Skip to content

feat(VCST-4040): improve vc-badge a11y #2004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

feat(VCST-4040): improve vc-badge a11y #2004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
59d4b69
feat(VCST-4040): improve vc-badge a11y
muller39 Oct 15, 2025
d15f27e
fix: comments
muller39 Oct 16, 2025
b20e468
Merge branch 'dev' into feat/VCST-4040-improve-vc-badge
goldenmaya Oct 21, 2025
212f887
feat: update mercury
goldenmaya Oct 21, 2025
7b8a064
feat: update vc-badge layout
goldenmaya Oct 21, 2025
5a92c1d
fix: truncate
goldenmaya Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions client-app/assets/presets/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"color_primary_50": "#fff8eb",
"color_primary_100": "#fbead2",
"color_primary_200": "#f8dbb1",
"color_primary_300": "#f8c680",
"color_primary_400": "#f0ad4e",
"color_primary_500": "#eb9016",
"color_primary_200": "#fadbaf",
"color_primary_300": "#fdc77c",
"color_primary_400": "#ffbb5b",
"color_primary_500": "#f99e24",
"color_primary_600": "#b46b0f",
"color_primary_700": "#874f0c",
"color_primary_800": "#543008",
Expand Down
8 changes: 4 additions & 4 deletions client-app/assets/presets/mercury.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"color_primary_50": "#fff8eb",
"color_primary_100": "#fbead2",
"color_primary_200": "#f8dbb1",
"color_primary_300": "#f8c680",
"color_primary_400": "#f0ad4e",
"color_primary_500": "#eb9016",
"color_primary_200": "#fadbaf",
"color_primary_300": "#fdc77c",
"color_primary_400": "#ffbb5b",
"color_primary_500": "#f99e24",
"color_primary_600": "#b46b0f",
"color_primary_700": "#874f0c",
"color_primary_800": "#543008",
Expand Down
266 changes: 160 additions & 106 deletions client-app/ui-kit/components/atoms/badge/vc-badge.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { VcBadge } from "..";
import VcIcon from "../icon/vc-icon.vue";
import type { Meta, StoryFn } from "@storybook/vue3-vite";
import type { Meta, StoryObj } from "@storybook/vue3-vite";

const SIZES = ["xs", "sm", "md", "lg"];
const COLORS = ["primary", "secondary", "success", "info", "neutral", "warning", "danger"];
const COLORS = ["primary", "secondary", "success", "info", "neutral", "warning", "danger", "accent"];
const VARIANTS = ["solid", "solid-light", "outline", "outline-dark"];

export default {
Expand Down Expand Up @@ -41,139 +40,194 @@ export default {
},
},
},
render: (args) => ({
components: { VcBadge },
setup: () => ({ args }),
template: '<VcBadge v-bind="args">35</VcBadge>',
}),
} as Meta<typeof VcBadge>;

const Template: StoryFn = (args) => ({
const renderTemplate = (template: string) => (args: Record<string, unknown>) => ({
components: { VcBadge },
setup: () => ({ args }),
template: '<VcBadge v-bind="args">35</VcBadge>',
template,
});

export const Basic = Template.bind({});
export const Basic: StoryObj = {};

export const SolidLight = Template.bind({});
SolidLight.args = {
variant: "solid-light",
export const SolidLight: StoryObj = {
args: {
variant: "solid-light",
},
};

export const Outline = Template.bind({});
Outline.args = {
variant: "outline",
export const Outline: StoryObj = {
args: {
variant: "outline",
},
};

export const OutlineDark = Template.bind({});
OutlineDark.args = {
variant: "outline-dark",
export const OutlineDark: StoryObj = {
args: {
variant: "outline-dark",
},
};

export const Rounded = Template.bind({});
Rounded.args = {
rounded: true,
export const Rounded: StoryObj = {
args: {
rounded: true,
},
};

export const Truncate: StoryFn = (args) => ({
components: { VcBadge },
setup: () => ({ args }),
template: '<VcBadge class="w-32" v-bind="args">Long long long long badge text</VcBadge>',
});
Truncate.args = {
truncate: true,
export const Truncate: StoryObj = {
args: {
truncate: true,
},
render: renderTemplate(`
<div class="flex gap-4">
<VcBadge class="w-32" v-bind="args">Long long long long badge text</VcBadge>

<VcBadge class="w-32" v-bind="args">
<VcIcon name="round-check" />
<span>Long long long long badge text</span>
</VcBadge>
</div>
`),
};

export const WithIcon: StoryFn = (args) => ({
components: { VcBadge, VcIcon },
setup: () => ({ args }),
template: `<VcBadge v-bind="args">
export const Nowrap: StoryObj = {
args: {
nowrap: true,
},
render: renderTemplate('<VcBadge v-bind="args">Long long long long badge text</VcBadge>'),
};

export const MaxWidth: StoryObj = {
args: {
maxWidth: "8rem",
},
render: renderTemplate('<VcBadge v-bind="args">Very long badge text that should be constrained</VcBadge>'),
};

export const WithIcon: StoryObj = {
render: renderTemplate(`<VcBadge v-bind="args">
<VcIcon name="round-check" />
<span>35</span>
</VcBadge>`,
});
</VcBadge>`),
};

export const WithIcons: StoryFn = (args) => ({
components: { VcBadge, VcIcon },
setup: () => ({ args }),
template: `<VcBadge v-bind="args">
export const WithIcons: StoryObj = {
render: renderTemplate(`<VcBadge v-bind="args">
<VcIcon name="round-check" />
<span>35</span>
<VcIcon name="round-check" />
</VcBadge>`,
});

export const OnlyIcon: StoryFn = (args) => ({
components: { VcBadge, VcIcon },
setup: () => ({ args }),
template: `<VcBadge v-bind="args">
<VcIcon name="fire" />
</VcBadge>`,
});
OnlyIcon.args = {
square: true,
</VcBadge>`),
};

export const Dot: StoryFn = () => ({
components: { VcBadge },
template: "<VcBadge />",
});

export const AllStates: StoryFn = () => ({
components: { VcBadge, VcIcon },
setup: () => ({ colors: COLORS, variants: VARIANTS, sizes: SIZES }),
template: `<div class="space-y-6">
<div v-for="size in sizes" class="space-y-6">
<h2 class="text-lg font-bold">Size: {{ size }}</h2>

<div class="flex flex-wrap gap-1" v-for="variant in variants">
<div class="w-28 text-xs">Variant: <b>{{ variant }}</b></div>

<div class="space-y-2">
<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
<VcIcon name="fire" />
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
<VcIcon name="fire" />
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
Color: {{ color }}
</VcBadge>
</div>
export const OnlyIcon: StoryObj = {
args: {
square: true,
},
render: renderTemplate('<VcBadge v-bind="args"><VcIcon name="fire" /></VcBadge>'),
};

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square>
<VcIcon name="fire" />
</VcBadge>
</div>
export const Dot: StoryObj = {
render: renderTemplate(`<VcBadge />`),
};

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square rounded>
<VcIcon name="fire" />
</VcBadge>
</div>
export const AllSizes: StoryObj = {
render: () => ({
components: { VcBadge },
setup: () => ({ sizes: SIZES }),
template: `<div class="space-y-4">
<div v-for="size in sizes" class="flex items-center gap-4">
<span class="w-8 text-sm">{{ size }}:</span>
<VcBadge :size="size">35</VcBadge>
<VcBadge :size="size" rounded>35</VcBadge>
<VcBadge :size="size" square>
<VcIcon name="fire" />
</VcBadge>
<VcBadge :size="size" />
</div>
</div>`,
}),
};

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" />
</div>
export const AllColors: StoryObj = {
render: () => ({
setup: () => ({ colors: COLORS }),
template: `<div class="space-y-4">
<div v-for="color in colors" class="flex items-center gap-4">
<span class="w-20 text-sm">{{ color }}:</span>
<VcBadge :color="color">35</VcBadge>
<VcBadge :color="color" variant="solid-light">35</VcBadge>
<VcBadge :color="color" variant="outline">35</VcBadge>
<VcBadge :color="color" variant="outline-dark">35</VcBadge>
</div>
</div>`,
}),
};

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" rounded />
export const AllStates: StoryObj = {
render: () => ({
setup: () => ({ colors: COLORS, variants: VARIANTS, sizes: SIZES }),
template: `<div class="space-y-6">
<div v-for="size in sizes" class="space-y-6">
<h2 class="text-lg font-bold">Size: {{ size }}</h2>

<div class="flex flex-wrap gap-1" v-for="variant in variants">
<div class="w-28 text-xs">Variant: <b>{{ variant }}</b></div>

<div class="space-y-2">
<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
<VcIcon name="cloud" />
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
<VcIcon name="cloud" />
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
Color: {{ color }}
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square>
<VcIcon name="cloud" />
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square rounded>
<VcIcon name="cloud" />
</VcBadge>
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" />
</div>

<div class="flex justify-around flex-wrap gap-1">
<VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" rounded />
</div>
</div>
</div>
</div>
</div>
</div>
`,
});
`,
}),
};
Loading