feat(vote): add vote component

.changeset/eight-pants-worry.md

@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Add Vote component

package.json

@@ -85,7 +85,7 @@
         "storybook": "^9.1.5",
         "stylelint": "^16.25.0",
         "stylelint-config-recommended": "^16.0.0",
-        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard": "^39.0.1",
         "svelte": "^5.39.11",
         "svelte-check": "^4.3.3",
         "svelte-preprocess": "^6.0.3",

packages/stacks-classic/lib/components/vote/vote.a11y.test.ts

@@ -0,0 +1,59 @@
+import { runA11yTests } from "../../test/a11y-test-utils";
+import {
+    IconVote16Up,
+    IconVote16Down,
+} from "@stackoverflow/stacks-icons/icons";
+import "../../index";
+
+const children = {
+    default: `
+        <button class="s-vote--btn">
+            ${IconVote16Up}
+            <span class="v-visible-sr">upvote</span>
+        </button>
+        <span class="s-vote--votes">
+            <span class="s-vote--total">12</span>
+            <span class="s-vote--upvotes">+20</span>
+            <span class="s-vote--downvotes">-8</span>
+        </span>
+        <button class="s-vote--btn">
+            ${IconVote16Down}
+            <span class="v-visible-sr">downvote</span>
+        </button>
+    `,
+    upvoteOnly: `
+        <button class="s-vote--btn">
+            ${IconVote16Up}
+            <span class="v-visible-sr">upvote</span>
+        </button>
+        <span class="s-vote--votes">
+            <span class="s-vote--total">12</span>
+            <span class="s-vote--upvotes">+20</span>
+            <span class="s-vote--downvotes">-8</span>
+        </span>
+    `,
+};
+
+describe("vote", () => {
+    runA11yTests({
+        baseClass: "s-vote",
+        modifiers: {
+            primary: ["expanded"],
+        },
+        children: {
+            default: children.default,
+        },
+    });
+
+    // Horizontal with and without downvote
+    runA11yTests({
+        baseClass: "s-vote",
+        modifiers: {
+            primary: ["horizontal"],
+        },
+        options: {
+            includeNullModifier: false,
+        },
+        children,
+    });
+});

packages/stacks-classic/lib/components/vote/vote.less

@@ -0,0 +1,134 @@
+.s-vote {
+    --_vo-fd: column;
+    --_vo-child-bg: var(--black-150);
+    --_vo-child-br: unset;
+    --_vo-child-fd: var(--_vo-fd);
+    --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+    --_vo-child-h: unset;
+    --_vo-child-w: calc(var(--su48) + var(--su2)); // 50px
+    --_vo-child-p: unset;
+
+    // CHILD ELEMENTS
+    &:not(&__horizontal){
+        :first-child {
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0 calc(var(--su12) - var(--su2)); // 14px 0 10px
+            --_vo-child-br: var(--br-pill) var(--br-pill) 0 0;
+        }
+
+        :last-child {
+            --_vo-child-p: calc(var(--su12) - var(--su2)) 0 calc(var(--su12) + var(--su2)); // 10px 0 14px
+            --_vo-child-br: 0 0 var(--br-pill) var(--br-pill);
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su16) + var(--su4)); // 18px
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0; // 14px 0
+        }
+    }
+
+    // MODIFIERS
+    &&__expanded {
+        --_vo-child-g: var(--su2);
+        --_vo-child-p: 0;
+
+        .s-vote {
+            &--total {
+                display: none;
+            }
+            &--upvotes,
+            &--downvotes {
+                display: block;
+            }
+        }
+    }
+
+    &&__horizontal {
+        --_vo-fd: row;
+        --_vo-child-h: var(--su32);
+        --_vo-child-p: 0 var(--su4);
+        --_vo-child-w: unset;
+
+        :first-child {
+            --_vo-child-p: 0 var(--su6) 0 calc(var(--su8) + var(--su2)); // 0 6px 0 10px
+            --_vo-child-br: var(--br-pill) 0 0 var(--br-pill);
+        }
+
+        :last-child {
+            --_vo-child-p: 0 calc(var(--su8) + var(--su2)) 0 var(--su6); // 0 10px 0 6px
+            --_vo-child-br: 0 var(--br-pill) var(--br-pill) 0;
+        }
+
+        .s-vote--votes:last-child:not(:only-child) {
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 var(--su4); // 0 14px 0 4px
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 calc(var(--su8) + var(--su2)); // 0 10px
+        }
+    }
+
+    // CHILD ELEMENTS
+    > button {
+        // Reset button styles
+        appearance: none;
+        -webkit-appearance: none;
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    & &--btn,
+    & > &--votes {
+        background-color: var(--_vo-child-bg);
+        border-radius: var(--_vo-child-br);
+        flex-direction: var(--_vo-child-fd);
+        gap: var(--_vo-child-g);
+        height: var(--_vo-child-h);
+        padding: var(--_vo-child-p);
+        width: var(--_vo-child-w);
+
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+        overflow: hidden;
+        font-weight: 600;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    & &--upvotes,
+    & &--downvotes {
+        display: none;
+    }
+
+    & &--upvotes {
+        color: var(--green-500);
+    }
+
+    & &--downvotes {
+        color: var(--red-500);
+    }
+
+    // INTERACTION
+    > button,
+    & &--btn {
+        &:focus-visible {
+            .focus-styles(true, false);
+        }
+
+        &:hover {
+            --_vo-child-bg: var(--black-200);
+        }
+    }
+
+    flex-direction: var(--_vo-fd);
+
+    display: flex;
+}

packages/stacks-classic/lib/components/vote/vote.visual.test.ts

@@ -0,0 +1,71 @@
+import { runVisualTests } from "../../test/visual-test-utils";
+import { html } from "@open-wc/testing";
+import {
+    IconVote16Up,
+    IconVote16Down,
+} from "@stackoverflow/stacks-icons/icons";
+import "../../index";
+
+describe("vote", () => {
+    runVisualTests({
+        baseClass: "s-vote",
+        modifiers: {
+            primary: ["expanded"],
+        },
+        children: {
+            default: `
+                <button class="s-vote--btn">
+                    ${IconVote16Up}
+                    <span class="v-visible-sr">upvote</span>
+                </button>
+                <span class="s-vote--votes">
+                    <span class="s-vote--total">12</span>
+                    <span class="s-vote--upvotes">+20</span>
+                    <span class="s-vote--downvotes">-8</span>
+                </span>
+                <button class="s-vote--btn">
+                    ${IconVote16Down}
+                    <span class="v-visible-sr">downvote</span>
+                </button>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center ws1 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+
+    // Horizontal with and without downvote
+    runVisualTests({
+        baseClass: "s-vote",
+        modifiers: {
+            primary: ["horizontal"],
+        },
+        options: {
+            includeNullModifier: false,
+        },
+        children: {
+            default: `
+                <button class="s-vote--btn">
+                    ${IconVote16Up}
+                    <span class="v-visible-sr">upvote</span>
+                    <span class="s-vote--votes">
+                        <span class="s-vote--upvotes">+20</span>
+                    </span>
+                </button>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center ws1 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

packages/stacks-classic/lib/stacks-static.less

@@ -53,6 +53,7 @@
 @import "components/topbar/topbar.less";
 @import "components/uploader/uploader.less";
 @import "components/user-card/user-card.less";
+@import "components/vote/vote.less";
 
 // LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";

packages/stacks-classic/lib/tsconfig.json

@@ -5,7 +5,7 @@
         "lib": ["dom", "es6", "dom.iterable", "scripthost"],
         "outDir": "../dist",
         "sourceMap": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "declaration": true,
         "allowSyntheticDefaultImports": true,