From ad0bdc1d4f0a2d7b8b6ff94b0a3a7dfb2efd6a6e Mon Sep 17 00:00:00 2001 From: Giamir Buoncristiani Date: Tue, 27 Jan 2026 15:48:41 +0100 Subject: [PATCH 1/3] feat(vote): allow downvoting for horizontal layout --- .changeset/witty-hats-drop.md | 5 + .../stacks-docs/_data/site-navigation.json | 1137 +++++++++-------- packages/stacks-docs/_data/vote.json | 13 + .../stacks-docs/product/components/vote.html | 37 +- .../src/components/Vote/Vote.stories.svelte | 9 + .../src/components/Vote/Vote.svelte | 76 +- .../src/components/Vote/Vote.test.ts | 4 +- 7 files changed, 668 insertions(+), 613 deletions(-) create mode 100644 .changeset/witty-hats-drop.md diff --git a/.changeset/witty-hats-drop.md b/.changeset/witty-hats-drop.md new file mode 100644 index 0000000000..b9bfe13a06 --- /dev/null +++ b/.changeset/witty-hats-drop.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-svelte": patch +--- + +vote component: allow downvoting for horizontal layout diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 9425dd8f99..bd0934d928 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -1,578 +1,579 @@ { - "sections": [ - { - "title": "Product", - "url": "/product/develop/using-stacks/", - "sections": [ + "sections": [ { - "title": "Develop", - "links": [ - { - "title": "Using Stacks", - "url": "/product/develop/using-stacks/" - }, - { - "title": "Building Stacks", - "url": "/product/develop/building/" - }, - { - "title": "Conditional classes", - "url": "/product/develop/conditional-classes/" - }, - { - "title": "JavaScript", - "url": "/product/develop/javascript/" - } - ] + "title": "Product", + "url": "/product/develop/using-stacks/", + "sections": [ + { + "title": "Develop", + "links": [ + { + "title": "Using Stacks", + "url": "/product/develop/using-stacks/" + }, + { + "title": "Building Stacks", + "url": "/product/develop/building/" + }, + { + "title": "Conditional classes", + "url": "/product/develop/conditional-classes/" + }, + { + "title": "JavaScript", + "url": "/product/develop/javascript/" + } + ] + }, + { + "title": "Foundation", + "links": [ + { + "title": "Accessibility", + "url": "/product/foundation/accessibility/" + }, + { + "title": "Color fundamentals", + "url": "/product/foundation/color-fundamentals/" + }, + { + "title": "Color palette", + "url": "/product/foundation/colors/", + "new": true + }, + { + "title": "Theming", + "url": "/product/foundation/theming/" + }, + { + "title": "Icons", + "url": "/product/foundation/icons/", + "new": true + }, + { + "title": "Illustrations", + "url": "/product/foundation/spots/", + "new": true + }, + { + "title": "Typography", + "url": "/product/foundation/typography/", + "new": true + } + ] + }, + { + "title": "Base", + "links": [ + { + "title": "Backgrounds", + "url": "/product/base/backgrounds/", + "new": true + }, + { + "title": "Borders", + "url": "/product/base/borders/" + }, + { + "title": "Border radius", + "url": "/product/base/border-radius/", + "new": true + }, + { + "title": "Box shadow", + "url": "/product/base/box-shadow/" + }, + { + "title": "Box sizing", + "url": "/product/base/box-sizing/" + }, + { + "title": "Cursors", + "url": "/product/base/cursors/" + }, + { + "title": "Current color", + "url": "/product/base/current-color/" + }, + { + "title": "Display", + "url": "/product/base/display/" + }, + { + "title": "Flex", + "url": "/product/base/flex/" + }, + { + "title": "Floats", + "url": "/product/base/floats/" + }, + { + "title": "Gap", + "url": "/product/base/gap/" + }, + { + "title": "Grid", + "url": "/product/base/grid/" + }, + { + "title": "Height", + "url": "/product/base/height/", + "new": true + }, + { + "title": "Interactivity", + "url": "/product/base/interactivity/" + }, + { + "title": "Lists", + "url": "/product/base/lists/" + }, + { + "title": "Margin", + "url": "/product/base/margin/" + }, + { + "title": "Object fit", + "url": "/product/base/object-fit/" + }, + { + "title": "Opacity", + "url": "/product/base/opacity/" + }, + { + "title": "Outline", + "url": "/product/base/outline/" + }, + { + "title": "Overflow", + "url": "/product/base/overflow/" + }, + { + "title": "Positioning", + "url": "/product/base/position/" + }, + { + "title": "Padding", + "url": "/product/base/padding/" + }, + { + "title": "Transitions", + "url": "/product/base/transitions/" + }, + { + "title": "Truncation", + "url": "/product/base/truncation/" + }, + { + "title": "Vertical alignment", + "url": "/product/base/vertical-alignment/" + }, + { + "title": "Visibility", + "url": "/product/base/visibility/" + }, + { + "title": "Width", + "url": "/product/base/width/", + "new": true + }, + { + "title": "Z-index", + "url": "/product/base/z-index/" + } + ] + }, + { + "title": "Forms", + "links": [ + { + "title": "Checkbox", + "url": "/product/components/checkbox/", + "new": true + }, + { + "title": "Inputs", + "url": "/product/components/inputs/", + "new": true + }, + { + "title": "Labels", + "url": "/product/components/labels/" + }, + { + "title": "Radio", + "url": "/product/components/radio/", + "new": true + }, + { + "title": "Select", + "url": "/product/components/select/", + "new": true + }, + { + "title": "Textarea", + "url": "/product/components/textarea/", + "new": true + } + ] + }, + { + "title": "Components", + "links": [ + { + "title": "Activity indicator", + "url": "/product/components/activity-indicator/", + "new": true + }, + { + "title": "Avatars", + "url": "/product/components/avatars/", + "new": true + }, + { + "title": "Badges", + "url": "/product/components/badges/", + "new": true + }, + { + "title": "Banners", + "url": "/product/components/banners/" + }, + { + "title": "Bling", + "url": "/product/components/bling/", + "new": true + }, + { + "title": "Breadcrumbs", + "url": "/product/components/breadcrumbs/" + }, + { + "title": "Buttons", + "url": "/product/components/buttons/", + "new": true + }, + { + "title": "Button groups", + "url": "/product/components/button-groups/" + }, + { + "title": "Cards", + "url": "/product/components/cards/" + }, + { + "title": "Code blocks", + "url": "/product/components/code-blocks/" + }, + { + "title": "Editor", + "url": "/product/components/editor/" + }, + { + "title": "Empty states", + "url": "/product/components/empty-states/", + "new": true + }, + { + "title": "Expandable", + "url": "/product/components/expandable/" + }, + { + "title": "Links", + "url": "/product/components/links/" + }, + { + "title": "Link previews", + "url": "/product/components/link-previews/" + }, + { + "title": "Menus", + "url": "/product/components/menus/", + "new": true + }, + { + "title": "Modals", + "url": "/product/components/modals/", + "new": true + }, + { + "title": "Navigation", + "url": "/product/components/navigation/", + "new": true + }, + { + "title": "Notices", + "url": "/product/components/notices/", + "new": true + }, + { + "title": "Page titles", + "url": "/product/components/page-titles/" + }, + { + "title": "Pagination", + "url": "/product/components/pagination/", + "new": true + }, + { + "title": "Popovers", + "url": "/product/components/popovers/", + "new": true + }, + { + "title": "Post summary", + "url": "/product/components/post-summary/" + }, + { + "title": "Progress bars", + "url": "/product/components/progress-bars/" + }, + { + "title": "Prose", + "url": "/product/components/prose/" + }, + { + "title": "Sidebar widgets", + "url": "/product/components/sidebar-widgets/" + }, + { + "title": "Spinner", + "url": "/product/components/spinner/" + }, + { + "title": "Tables", + "url": "/product/components/tables/" + }, + { + "title": "Tags", + "url": "/product/components/tags/", + "new": true + }, + { + "title": "Toggle switch", + "url": "/product/components/toggle-switch/" + }, + { + "title": "Topbar", + "url": "/product/components/topbar/" + }, + { + "title": "Uploader", + "url": "/product/components/uploader/" + }, + { + "title": "User cards", + "url": "/product/components/user-cards/", + "new": true + }, + { + "title": "Vote", + "url": "/product/components/vote/", + "new": true + } + ] + } + ] }, { - "title": "Foundation", - "links": [ - { - "title": "Accessibility", - "url": "/product/foundation/accessibility/" - }, - { - "title": "Color fundamentals", - "url": "/product/foundation/color-fundamentals/" - }, - { - "title": "Color palette", - "url": "/product/foundation/colors/", - "new": true - }, - { - "title": "Theming", - "url": "/product/foundation/theming/" - }, - { - "title": "Icons", - "url": "/product/foundation/icons/", - "new": true - }, - { - "title": "Illustrations", - "url": "/product/foundation/spots/", - "new": true - }, - { - "title": "Typography", - "url": "/product/foundation/typography/", - "new": true - } - ] + "title": "Email", + "url": "/email/guidelines/getting-started/", + "sections": [ + { + "title": "Guidelines", + "links": [ + { + "title": "Getting started", + "url": "/email/guidelines/getting-started/" + }, + { + "title": "Design best practices", + "url": "/email/guidelines/design-best-practices/" + }, + { + "title": "FAQ", + "url": "/email/guidelines/faq/" + } + ] + }, + { + "title": "Templates", + "links": [ + { + "title": "Short transactional", + "url": "/email/templates/short-transactional/" + }, + { + "title": "Long transactional", + "url": "/email/templates/long-transactional/" + }, + { + "title": "Promotional", + "url": "/email/templates/promotional/" + }, + { + "title": "Major announcements", + "url": "/email/templates/major-announcements/" + } + ] + }, + { + "title": "Base", + "links": [ + { + "title": "Border radius", + "url": "/email/base/border-radius/" + }, + { + "title": "Outlook conditional CSS", + "url": "/email/base/mso/" + }, + { + "title": "Responsiveness", + "url": "/email/base/responsiveness/" + }, + { + "title": "Typography", + "url": "/email/base/typography/" + } + ] + }, + { + "title": "Components", + "links": [ + { + "title": "Buttons", + "url": "/email/components/buttons/" + }, + { + "title": "Footers", + "url": "/email/components/footers/" + }, + { + "title": "Images", + "url": "/email/components/images/" + }, + { + "title": "Spacers", + "url": "/email/components/spacers/" + }, + { + "title": "Tags", + "url": "/email/components/tags/" + }, + { + "title": "Team identification", + "url": "/email/components/team-identification/" + }, + { + "title": "Signatures", + "url": "/email/components/signatures/" + } + ] + }, + { + "title": "Patterns", + "links": [ + { + "title": "Columns", + "url": "/email/patterns/columns/" + } + ] + } + ] }, { - "title": "Base", - "links": [ - { - "title": "Backgrounds", - "url": "/product/base/backgrounds/", - "new": true - }, - { - "title": "Borders", - "url": "/product/base/borders/" - }, - { - "title": "Border radius", - "url": "/product/base/border-radius/", - "new": true - }, - { - "title": "Box shadow", - "url": "/product/base/box-shadow/" - }, - { - "title": "Box sizing", - "url": "/product/base/box-sizing/" - }, - { - "title": "Cursors", - "url": "/product/base/cursors/" - }, - { - "title": "Current color", - "url": "/product/base/current-color/" - }, - { - "title": "Display", - "url": "/product/base/display/" - }, - { - "title": "Flex", - "url": "/product/base/flex/" - }, - { - "title": "Floats", - "url": "/product/base/floats/" - }, - { - "title": "Gap", - "url": "/product/base/gap/" - }, - { - "title": "Grid", - "url": "/product/base/grid/" - }, - { - "title": "Height", - "url": "/product/base/height/", - "new": true - }, - { - "title": "Interactivity", - "url": "/product/base/interactivity/" - }, - { - "title": "Lists", - "url": "/product/base/lists/" - }, - { - "title": "Margin", - "url": "/product/base/margin/" - }, - { - "title": "Object fit", - "url": "/product/base/object-fit/" - }, - { - "title": "Opacity", - "url": "/product/base/opacity/" - }, - { - "title": "Outline", - "url": "/product/base/outline/" - }, - { - "title": "Overflow", - "url": "/product/base/overflow/" - }, - { - "title": "Positioning", - "url": "/product/base/position/" - }, - { - "title": "Padding", - "url": "/product/base/padding/" - }, - { - "title": "Transitions", - "url": "/product/base/transitions/" - }, - { - "title": "Truncation", - "url": "/product/base/truncation/" - }, - { - "title": "Vertical alignment", - "url": "/product/base/vertical-alignment/" - }, - { - "title": "Visibility", - "url": "/product/base/visibility/" - }, - { - "title": "Width", - "url": "/product/base/width/", - "new": true - }, - { - "title": "Z-index", - "url": "/product/base/z-index/" - } - ] + "title": "Content", + "url": "/content/guidelines/principles/", + "sections": [ + { + "title": "Guidelines", + "links": [ + { + "title": "Principles", + "url": "/content/guidelines/principles/" + }, + { + "title": "Voice and tone", + "url": "/content/guidelines/voice-and-tone/" + }, + { + "title": "Grammar and mechanics", + "url": "/content/guidelines/grammar-and-mechanics/" + } + ] + }, + { + "title": "Examples", + "links": [ + { + "title": "Alt text", + "url": "/content/examples/alt-text/" + }, + { + "title": "Error messages", + "url": "/content/examples/error-messages/" + }, + { + "title": "Preferences and settings", + "url": "/content/examples/preferences-settings/" + }, + { + "title": "Success messages", + "url": "/content/examples/success-messages/" + } + ] + } + ] }, { - "title": "Forms", - "links": [ - { - "title": "Checkbox", - "url": "/product/components/checkbox/", - "new": true - }, - { - "title": "Inputs", - "url": "/product/components/inputs/", - "new": true - }, - { - "title": "Labels", - "url": "/product/components/labels/" - }, - { - "title": "Radio", - "url": "/product/components/radio/", - "new": true - }, - { - "title": "Select", - "url": "/product/components/select/", - "new": true - }, - { - "title": "Textarea", - "url": "/product/components/textarea/", - "new": true - } - ] - }, - { - "title": "Components", - "links": [ - { - "title": "Activity indicator", - "url": "/product/components/activity-indicator/", - "new": true - }, - { - "title": "Avatars", - "url": "/product/components/avatars/", - "new": true - }, - { - "title": "Badges", - "url": "/product/components/badges/", - "new": true - }, - { - "title": "Banners", - "url": "/product/components/banners/" - }, - { - "title": "Bling", - "url": "/product/components/bling/", - "new": true - }, - { - "title": "Breadcrumbs", - "url": "/product/components/breadcrumbs/" - }, - { - "title": "Buttons", - "url": "/product/components/buttons/", - "new": true - }, - { - "title": "Button groups", - "url": "/product/components/button-groups/" - }, - { - "title": "Cards", - "url": "/product/components/cards/" - }, - { - "title": "Code blocks", - "url": "/product/components/code-blocks/" - }, - { - "title": "Editor", - "url": "/product/components/editor/" - }, - { - "title": "Empty states", - "url": "/product/components/empty-states/", - "new": true - }, - { - "title": "Expandable", - "url": "/product/components/expandable/" - }, - { - "title": "Links", - "url": "/product/components/links/" - }, - { - "title": "Link previews", - "url": "/product/components/link-previews/" - }, - { - "title": "Menus", - "url": "/product/components/menus/", - "new": true - }, - { - "title": "Modals", - "url": "/product/components/modals/", - "new": true - }, - { - "title": "Navigation", - "url": "/product/components/navigation/", - "new": true - }, - { - "title": "Notices", - "url": "/product/components/notices/", - "new": true - }, - { - "title": "Page titles", - "url": "/product/components/page-titles/" - }, - { - "title": "Pagination", - "url": "/product/components/pagination/", - "new": true - }, - { - "title": "Popovers", - "url": "/product/components/popovers/", - "new": true - }, - { - "title": "Post summary", - "url": "/product/components/post-summary/" - }, - { - "title": "Progress bars", - "url": "/product/components/progress-bars/" - }, - { - "title": "Prose", - "url": "/product/components/prose/" - }, - { - "title": "Sidebar widgets", - "url": "/product/components/sidebar-widgets/" - }, - { - "title": "Spinner", - "url": "/product/components/spinner/" - }, - { - "title": "Tables", - "url": "/product/components/tables/" - }, - { - "title": "Tags", - "url": "/product/components/tags/", - "new": true - }, - { - "title": "Toggle switch", - "url": "/product/components/toggle-switch/" - }, - { - "title": "Topbar", - "url": "/product/components/topbar/" - }, - { - "title": "Uploader", - "url": "/product/components/uploader/" - }, - { - "title": "User cards", - "url": "/product/components/user-cards/", - "new": true - }, - { - "title": "Vote", - "url": "/product/components/vote/" - } - ] - } - ] - }, - { - "title": "Email", - "url": "/email/guidelines/getting-started/", - "sections": [ - { - "title": "Guidelines", - "links": [ - { - "title": "Getting started", - "url": "/email/guidelines/getting-started/" - }, - { - "title": "Design best practices", - "url": "/email/guidelines/design-best-practices/" - }, - { - "title": "FAQ", - "url": "/email/guidelines/faq/" - } - ] - }, - { - "title": "Templates", - "links": [ - { - "title": "Short transactional", - "url": "/email/templates/short-transactional/" - }, - { - "title": "Long transactional", - "url": "/email/templates/long-transactional/" - }, - { - "title": "Promotional", - "url": "/email/templates/promotional/" - }, - { - "title": "Major announcements", - "url": "/email/templates/major-announcements/" - } - ] - }, - { - "title": "Base", - "links": [ - { - "title": "Border radius", - "url": "/email/base/border-radius/" - }, - { - "title": "Outlook conditional CSS", - "url": "/email/base/mso/" - }, - { - "title": "Responsiveness", - "url": "/email/base/responsiveness/" - }, - { - "title": "Typography", - "url": "/email/base/typography/" - } - ] - }, - { - "title": "Components", - "links": [ - { - "title": "Buttons", - "url": "/email/components/buttons/" - }, - { - "title": "Footers", - "url": "/email/components/footers/" - }, - { - "title": "Images", - "url": "/email/components/images/" - }, - { - "title": "Spacers", - "url": "/email/components/spacers/" - }, - { - "title": "Tags", - "url": "/email/components/tags/" - }, - { - "title": "Team identification", - "url": "/email/components/team-identification/" - }, - { - "title": "Signatures", - "url": "/email/components/signatures/" - } - ] - }, - { - "title": "Patterns", - "links": [ - { - "title": "Columns", - "url": "/email/patterns/columns/" - } - ] - } - ] - }, - { - "title": "Content", - "url": "/content/guidelines/principles/", - "sections": [ - { - "title": "Guidelines", - "links": [ - { - "title": "Principles", - "url": "/content/guidelines/principles/" - }, - { - "title": "Voice and tone", - "url": "/content/guidelines/voice-and-tone/" - }, - { - "title": "Grammar and mechanics", - "url": "/content/guidelines/grammar-and-mechanics/" - } - ] - }, - { - "title": "Examples", - "links": [ - { - "title": "Alt text", - "url": "/content/examples/alt-text/" - }, - { - "title": "Error messages", - "url": "/content/examples/error-messages/" - }, - { - "title": "Preferences and settings", - "url": "/content/examples/preferences-settings/" - }, - { - "title": "Success messages", - "url": "/content/examples/success-messages/" - } - ] - } - ] - }, - { - "title": "Brand", - "url": "/brand/principles/", - "sections": [ - { - "title": "Brand", - "links": [ - { - "title": "Principles", - "url": "/brand/principles/" - } - ] - }, - { - "title": "Copywriting", - "links": [ - { - "title": "Naming guidelines", - "url": "/brand/copywriting/naming/" - }, - { - "title": "Concepts", - "url": "/brand/copywriting/concepts/" - } - ] - }, - { - "title": "Visuals", - "links": [ - { - "title": "Logos", - "url": "/brand/logo/" - }, - { - "title": "Typography", - "url": "/brand/typography/" - }, - { - "title": "Colors", - "url": "/brand/colors/" - }, - { - "title": "Data visualization", - "url": "/brand/data-visualization/" - } - ] + "title": "Brand", + "url": "/brand/principles/", + "sections": [ + { + "title": "Brand", + "links": [ + { + "title": "Principles", + "url": "/brand/principles/" + } + ] + }, + { + "title": "Copywriting", + "links": [ + { + "title": "Naming guidelines", + "url": "/brand/copywriting/naming/" + }, + { + "title": "Concepts", + "url": "/brand/copywriting/concepts/" + } + ] + }, + { + "title": "Visuals", + "links": [ + { + "title": "Logos", + "url": "/brand/logo/" + }, + { + "title": "Typography", + "url": "/brand/typography/" + }, + { + "title": "Colors", + "url": "/brand/colors/" + }, + { + "title": "Data visualization", + "url": "/brand/data-visualization/" + } + ] + } + ] } - ] - } - ] + ] } diff --git a/packages/stacks-docs/_data/vote.json b/packages/stacks-docs/_data/vote.json index cf39215f2b..b69212a0a2 100644 --- a/packages/stacks-docs/_data/vote.json +++ b/packages/stacks-docs/_data/vote.json @@ -67,6 +67,10 @@ { "count": "5", "downvote": false + }, + { + "count": "10", + "downvote": true } ], "voted": [ @@ -90,6 +94,15 @@ "horizontal": true, "upvote": true, "upvoted": true + }, + { + "description": "Horizontal downvoted", + "count": "4", + "horizontal": true, + "upvote": true, + "upvoted": false, + "downvote": true, + "downvoted": true } ] } diff --git a/packages/stacks-docs/product/components/vote.html b/packages/stacks-docs/product/components/vote.html index 95baa7244e..62b90f71c7 100644 --- a/packages/stacks-docs/product/components/vote.html +++ b/packages/stacks-docs/product/components/vote.html @@ -84,7 +84,7 @@
{% highlight html %} -
+
+ +
+ + + 10 + + +
{% endhighlight %} -
+
{% for vote in vote.groups.horizontal %}
{% if vote.description %} @@ -150,10 +164,21 @@ + {% if vote.downvote %} {{ vote.count }} - + + {% endif %}
{% endfor %} @@ -170,8 +195,8 @@ {% highlight html %}
12 diff --git a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte index a17e34bffe..baf762e58c 100644 --- a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte +++ b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte @@ -62,3 +62,12 @@
{/snippet} + + + {#snippet template()} +
+ + +
+ {/snippet} + diff --git a/packages/stacks-svelte/src/components/Vote/Vote.svelte b/packages/stacks-svelte/src/components/Vote/Vote.svelte index 7838a61b7a..de3ee00033 100644 --- a/packages/stacks-svelte/src/components/Vote/Vote.svelte +++ b/packages/stacks-svelte/src/components/Vote/Vote.svelte @@ -29,10 +29,15 @@ downvotes?: number; /** - * Display the vote component in horizontal layout. When true, hides the downvote button. + * Display the vote component in horizontal layout. */ horizontal?: boolean; + /** + * Display the vote component with only upvote button. + */ + upvoteOnly?: boolean; + /** * Current vote status. Use "upvoted" or "downvoted" to show filled icons, or null for no vote. */ @@ -95,6 +100,7 @@ upvotes = undefined, downvotes = undefined, horizontal, + upvoteOnly = false, status = null, i18nVote = "Vote", i18nUpvote = "Upvote", @@ -169,6 +175,34 @@ } +{#snippet votes()} + (expandable ? (expanded = !expanded) : null)} + > + {#if upvotes !== undefined} + +{formatCount(upvotes, 1000)} + {/if} + + {currentCount !== 0 || currentStatus !== null + ? formatCount(currentCount, 1000) + : i18nVote} + + {#if downvotes !== undefined} + -{formatCount(downvotes, 1000)} + {/if} + {#if expandable} + + {expanded ? i18nExpanded : i18nExpand} + + {/if} + +{/snippet} +
- {#if !horizontal} - (expandable ? (expanded = !expanded) : null)} - > - {#if upvotes !== undefined} - +{formatCount(upvotes, 1000)} - {/if} - - {currentCount !== 0 || currentStatus !== null - ? formatCount(currentCount, 1000) - : i18nVote} - - {#if downvotes !== undefined} - -{formatCount(downvotes, 1000)} - {/if} - {#if expandable} - - {expanded ? i18nExpanded : i18nExpand} - - {/if} - + {#if !upvoteOnly} + {@render votes()} - - 12 - +20 - -8 - - - `, - upvoteOnly: ` - - - 12 - +20 - -8 - - `, -}; - 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, }); diff --git a/packages/stacks-classic/lib/components/vote/vote.test.setup.ts b/packages/stacks-classic/lib/components/vote/vote.test.setup.ts new file mode 100644 index 0000000000..ab68e89e9e --- /dev/null +++ b/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: ` + + + 12 + +20 + -8 + + + `, + upvoteOnly: ` + + `, +}; + +export { children }; diff --git a/packages/stacks-classic/lib/components/vote/vote.visual.test.ts b/packages/stacks-classic/lib/components/vote/vote.visual.test.ts index badf453347..f10dd78622 100644 --- a/packages/stacks-classic/lib/components/vote/vote.visual.test.ts +++ b/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: ` - - - 12 - +20 - -8 - - - `, - }, - template: ({ component, testid }) => html` -
- ${component} -
- `, - }); - - // Horizontal with and without downvote - runVisualTests({ - baseClass: "s-vote", - modifiers: { - primary: ["horizontal"], - }, - options: { - includeNullModifier: false, - }, - children: { - default: ` - - `, + primary: ["expanded", "horizontal"], }, + children, template: ({ component, testid }) => html`
Date: Wed, 28 Jan 2026 09:52:39 +0100 Subject: [PATCH 3/3] remove upvote only vertical version from story because not officially supported --- packages/stacks-svelte/src/components/Vote/Vote.stories.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte index baf762e58c..f8e4d3aa03 100644 --- a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte +++ b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte @@ -66,7 +66,6 @@ {#snippet template()}
-
{/snippet}