feat(button): add vote button variant

docs/_data/buttons.json

@@ -66,6 +66,17 @@
       ]
     }
   ],
+  "vote": [
+    {
+      "title": "Vote",
+      "class": "s-btn__vote",
+      "classes": [
+        {
+          "title": "default"
+        }
+      ]
+    }
+  ],
   "loading": [
     {
       "title": "Loaders",

docs/product/components/buttons.html

@@ -233,6 +233,92 @@
     </div>
 </section>
 
+<section class="stacks-section">
+    {% header "h2", "Vote" %}
+    <p class="stacks-copy">TODO describe</p>
+
+    <div class="stacks-preview">
+{% highlight html %}
+<button class="s-btn s-btn__vote" type="button">
+    @Svg.ArrowUp
+    <span class="v-visible-sr">Upvote</span>
+</button>
+<button class="s-btn s-btn__vote" type="button">
+    @Svg.ArrowDown
+    <span class="v-visible-sr">Downvote</span>
+</button>
+<button class="s-btn s-btn__vote is-selected" type="button">
+    @Svg.ArrowUp
+    <span class="v-visible-sr">Upvoted</span>
+</button>
+<button class="s-btn s-btn__vote is-selected" type="button">
+    @Svg.ArrowUp
+    <span class="v-visible-sr">Downvoted</span>
+</button>
+
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="overflow-x-auto">
+                <table class="wmn5 s-table s-table__bx-simple">
+                    <thead>
+                        <tr>
+                            <th scope="col">Type</th>
+                            <th scope="col" class="s-table--cell4">Class</th>
+                            <th scope="col" class="ta-center">Default State</th>
+                            <th scope="col" class="ta-center">Selected State</th>
+                            <th scope="col" class="ta-center">Disabled State</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for btn in buttons.vote %}
+                            {% assign types = btn.classes %}
+                            {% for class in types %}
+                            <tr>
+                                <th scope="row" class="va-middle">{{ class.title }}</th>
+                                <td class="va-middle">
+                                    <div class="d-flex g4 fw-wrap">
+                                        <code class="flex--item stacks-code">.s-btn</code>
+                                        {% if btn.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ btn.class }}</code>
+                                        {% endif %}
+                                        {% if class.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ class.class }}</code>
+                                        {% endif %}
+                                    </div>
+                                </td>
+                                <td class="va-middle ta-center px4">
+                                    <button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }}" type="button">
+                                        {% icon "ArrowUp" %}
+                                        <span class="v-visible-sr">Upvote</span>
+                                    </button>
+                                </td>
+                                <td class="va-middle ta-center px4">
+                                    <button
+                                        class="ws-nowrap s-btn {{ btn.class }} {{ class.class }} is-selected" 
+                                        type="button">
+                                        {% icon "ArrowUp" %}
+                                        <span class="v-visible-sr">Upvoted</span>
+                                    </button>
+                                </td>
+                                <td class="va-middle ta-center px4">
+                                    <button
+                                        class="ws-nowrap s-btn {{ btn.class }} {{ class.class }}"
+                                        type="button"
+                                        disabled>
+                                        {% icon "ArrowUp" %}
+                                        <span class="v-visible-sr">Upvote</span>
+                                    </button>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>
+
 <section class="stacks-section">
     {% header "h2", "Loading" %}
     <p class="stacks-copy">Any button can have a loading state applied by adding the <code class="stacks-code">.is-loading</code> state class.</p>

lib/components/button/button.a11y.test.ts

@@ -1,4 +1,4 @@
-import testArgs from "./button.test.setup";
+import { testArgs, voteBtnTestArgs } from "./button.test.setup";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
@@ -18,4 +18,7 @@ describe("button", () => {
             /s-btn-highcontrast-light-(?:muted-outlined-|muted-|outlined-)?(?:sm|xs).*?badge/,
         ],
     });
+
+    // `vote` variant
+    runA11yTests(voteBtnTestArgs);
 });

lib/components/button/button.less

@@ -64,6 +64,15 @@
         --_bu-outlined-fc-selected: var(--white);
         --_bu-badge-o: 0.8;
         --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+
+        &.s-btn__vote {
+            --_bu-bc-focus: var(--theme-secondary-400);
+            --_bu-bg-focus: var(--theme-secondary-400);
+            --_bu-fc-focus: var(--white);
+            --_bu-bc-selected: var(--theme-primary-400);
+            --_bu-bg-selected: var(--theme-primary-400);
+            --_bu-fc-selected: var(--white);
+        }
     });
 
     // STATES
@@ -374,6 +383,42 @@
         --_bu-hc-bc: transparent;
     }
 
+    // Vote
+    &&__vote {
+        &.is-selected {
+            &:focus-visible,
+            &.focus-inset-bordered {
+                --_bu-bg-selected: var(--theme-primary-400);
+                --_bu-fc-selected: var(--white);
+            }
+        }
+
+        // Base
+        --_bu-bc: var(--black-225);
+        --_bu-bg: transparent;
+        --_bu-br: var(--br-circle);
+        --_bu-fc: var(--black-500);
+
+        // Active
+        --_bu-bc-active: var(--theme-primary-500);
+        --_bu-bg-active: var(--theme-primary-200);
+        --_bu-fc-active: var(--theme-primary-500);
+
+        // Focus
+        --_bu-bg-focus: var(--theme-secondary-400);
+        --_bu-fc-focus: var(--white);
+
+        // Hover
+        --_bu-bc-hover: var(--black-300);
+        --_bu-bg-hover: var(--theme-primary-200);
+        --_bu-fc-hover: var(--black-600);
+
+        // Selected
+        --_bu-bc-selected: var(--theme-primary-400);
+        --_bu-bg-selected: var(--theme-primary-100);
+        --_bu-fc-selected: var(--theme-primary-400);
+    }
+
     // CHILD ELEMENTS
     & &--badge {
         opacity: var(--_bu-badge-o);

lib/components/button/button.test.setup.ts

@@ -1,5 +1,7 @@
 import type { TestVariationArgs } from "../../test/test-utils";
+import { IconArrowUp } from "@stackoverflow/stacks-icons/icons";
 import "../../index";
+import { html } from "@open-wc/testing";
 
 const getChild = (child?: string): string => {
     switch (child) {
@@ -8,6 +10,11 @@ const getChild = (child?: string): string => {
                 <span class="s-btn--badge">
                     <span class="s-btn--number">198</span>
                 </span>`;
+        case "vote":
+            return `
+                ${IconArrowUp}
+                <span class="v-visible-sr">Vote</span>
+            `;
         default:
             return "Ask question";
     }
@@ -20,7 +27,7 @@ const testArgs: TestVariationArgs = {
     modifiers: {
         primary: ["filled", "outlined"],
         secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
-        global: ["is-loading"],
+        global: ["is-loading"], // TODO add `is-selected` global modifier
         standalone: [...["link", "unset"], ...["facebook", "github", "google"]],
     },
     attributes: {
@@ -33,4 +40,30 @@ const testArgs: TestVariationArgs = {
     tag: "button",
 };
 
-export default testArgs;
+const voteBtnTestArgs: TestVariationArgs = {
+    baseClass: "s-btn",
+    variants: ["vote"],
+    modifiers: {
+        global: ["is-selected"],
+    },
+    attributes: {
+        type: "button",
+    },
+    children: {
+        default: getChild("vote"),
+    },
+    tag: "button",
+    options: {
+        includeNullVariant: false,
+    },
+    template: ({ component, testid }) => html`
+        <div
+            class="d-inline-flex ai-center jc-center p8"
+            data-testid="${testid}"
+        >
+            ${component}
+        </div>
+    `,
+};
+
+export { testArgs, voteBtnTestArgs };

lib/components/button/button.visual.test.ts

@@ -1,4 +1,4 @@
-import testArgs from "./button.test.setup";
+import { testArgs, voteBtnTestArgs } from "./button.test.setup";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 import { html } from "@open-wc/testing";
@@ -15,4 +15,7 @@ describe("button", () => {
             </div>
         `,
     });
+
+    // `vote` variant
+    runVisualTests(voteBtnTestArgs);
 });