feat(vote): allow downvoting for horizontal layout

.changeset/witty-hats-drop.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+vote component: allow downvoting for horizontal layout

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

@@ -1,58 +1,12 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
-import {
-    IconVote16Up,
-    IconVote16Down,
-} from "@stackoverflow/stacks-icons/icons";
+import { children } from "./vote.test.setup";
 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,
+            primary: ["expanded", "horizontal"],
         },
         children,
     });

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

@@ -0,0 +1,35 @@
+import {
+    IconVote16Up,
+    IconVote16Down,
+} from "@stackoverflow/stacks-icons/icons";
+
+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>
+            <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>
+    `,
+};
+
+export { children };

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

@@ -1,64 +1,15 @@
 import { runVisualTests } from "../../test/visual-test-utils";
 import { html } from "@open-wc/testing";
-import {
-    IconVote16Up,
-    IconVote16Down,
-} from "@stackoverflow/stacks-icons/icons";
+import { children } from "./vote.test.setup";
 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>
-            `,
+            primary: ["expanded", "horizontal"],
         },
+        children,
         template: ({ component, testid }) => html`
             <div
                 class="d-inline-flex ai-center jc-center ws1 p8"