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-classic/lib/components/vote/vote.a11y.test.ts b/packages/stacks-classic/lib/components/vote/vote.a11y.test.ts index c107011c2d..a229aa6207 100644 --- a/packages/stacks-classic/lib/components/vote/vote.a11y.test.ts +++ b/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: ` - - - 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`
{% 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..f8e4d3aa03 100644 --- a/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte +++ b/packages/stacks-svelte/src/components/Vote/Vote.stories.svelte @@ -62,3 +62,11 @@
{/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()}