feat(VCST-4041): improve vc-chip a11y

client-app/assets/styles/preflight.scss

@@ -7,11 +7,13 @@
   }
 
   body {
+    --outline-color: rgb(from var(--color-primary-500) r g b / 0.4);
+
     @apply text-[--body-text-color];
 
     *:focus-visible,
     *:focus {
-      @apply outline outline-2 outline-primary-500/30;
+      @apply outline outline-2 outline-[--outline-color];
     }
   }
 }

client-app/shared/catalog/components/count-in-cart.vue

@@ -22,7 +22,7 @@ import { useShortCart } from "@/shared/cart/composables";
 
 export interface IProps {
   productId?: string;
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: VcChipSizeType;
 }
 
 const props = withDefaults(defineProps<IProps>(), {

client-app/shared/catalog/components/in-stock.vue

@@ -45,7 +45,7 @@ interface IProps {
   isAvailable?: boolean;
   isDigital?: boolean;
   quantity?: number | null;
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: VcChipSizeType;
   textEnabled?: boolean;
 }
 

client-app/shared/catalog/components/product/variations-table.vue

@@ -36,7 +36,7 @@
           </td>
 
           <td class="variations-table__col variations-table__col--in-stock">
-            <VcChip
+            <VcBadge
               v-if="variation.availabilityData?.isInStock"
               color="success"
               size="xs"
@@ -52,9 +52,9 @@
               <template v-else>
                 {{ $t("common.labels.in_stock") }}
               </template>
-            </VcChip>
+            </VcBadge>
 
-            <VcChip
+            <VcBadge
               v-else
               size="xs"
               variant="outline-dark"
@@ -64,7 +64,7 @@
               rounded
             >
               0
-            </VcChip>
+            </VcBadge>
           </td>
 
           <td class="variations-table__col variations-table__col--price">

client-app/ui-kit/components/molecules/chip/vc-chip.stories.ts

@@ -1,9 +1,9 @@
 import { VcChip } from "..";
 import { VcIcon } from "../../atoms";
-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 SIZES = ["sm", "md", "lg"];
+const COLORS = ["primary", "secondary", "success", "info", "neutral", "warning", "danger", "accent"];
 const VARIANTS = ["solid", "solid-light", "outline", "outline-dark"];
 
 export default {
@@ -14,142 +14,222 @@ export default {
       control: "inline-radio",
       options: SIZES,
       type: { name: "string", required: false },
-      table: {
-        type: {
-          summary: SIZES.join(" | "),
-        },
-      },
+      table: { type: { summary: SIZES.join(" | ") } },
     },
     color: {
       control: "select",
       options: COLORS,
       type: { name: "string", required: false },
-      table: {
-        type: {
-          summary: COLORS.join(" | "),
-        },
-      },
+      table: { type: { summary: COLORS.join(" | ") } },
     },
     variant: {
       control: "select",
       options: VARIANTS,
       type: { name: "string", required: false },
-      table: {
-        type: {
-          summary: VARIANTS.join(" | "),
-        },
-      },
+      table: { type: { summary: VARIANTS.join(" | ") } },
     },
   },
+  // Default render function for most stories
+  render: (args) => ({
+    components: { VcChip },
+    setup: () => ({ args }),
+    template: '<VcChip v-bind="args">Chip text</VcChip>',
+  }),
 } as Meta<typeof VcChip>;
 
-const Template: StoryFn = (args) => ({
-  components: { VcChip },
-  setup: () => ({ args }),
-  template: '<VcChip v-bind="args">Chip text</VcChip>',
-});
+type StoryType = StoryObj<typeof VcChip>;
 
-export const Basic = Template.bind({});
+export const Basic: StoryType = { args: {} };
 
-export const Rounded = Template.bind({});
-Rounded.args = {
-  rounded: true,
+export const Rounded: StoryType = {
+  args: { rounded: true },
 };
 
-export const Closable = Template.bind({});
-Closable.args = {
-  closable: true,
+export const Closable: StoryType = {
+  args: { closable: true },
 };
 
-export const Clickable = Template.bind({});
-Clickable.args = {
-  clickable: true,
+export const Clickable: StoryType = {
+  args: { clickable: true },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
+export const Disabled: StoryType = {
+  args: { disabled: true },
 };
 
-export const Icon = Template.bind({});
-Icon.args = {
-  icon: "circle-solid",
+export const Icon: StoryType = {
+  args: { icon: "circle-solid" },
 };
 
-export const IconInSlot: StoryFn = (args) => ({
-  components: { VcChip, VcIcon },
-  setup: () => ({ args }),
-  template: `<VcChip v-bind="args">
-    <VcIcon name="circle-solid" />
-    <span>Chip text</span>
-  </VcChip>`,
-});
+export const IconInSlot: StoryType = {
+  args: {},
+  render: (args) => ({
+    components: { VcChip, VcIcon },
+    setup: () => ({ args }),
+    template: `<VcChip v-bind="args">
+      <VcIcon name="circle-solid" />
+      <span>Chip text</span>
+    </VcChip>`,
+  }),
+};
+
+export const IconColorPallette: StoryType = {
+  args: {
+    variant: "outline",
+    icon: "circle-solid",
+    iconColor: "secondary",
+  },
+};
+
+export const IconColorHEX: StoryType = {
+  args: {
+    variant: "outline",
+    icon: "circle-solid",
+    iconColor: "#ff0000",
+  },
+};
+
+export const Truncate: StoryType = {
+  args: { truncate: true },
+  render: (args) => ({
+    components: { VcChip },
+    setup: () => ({ args }),
+    template: `<VcChip v-bind="args" class="w-36">
+      <span>Long long long Chip text</span>
+    </VcChip>`,
+  }),
+};
+
+export const RouterLink: StoryType = {
+  args: {
+    clickable: true,
+    to: "/",
+    icon: "link",
+  },
+};
+
+export const ExternalLink: StoryType = {
+  args: {
+    clickable: true,
+    externalLink: "https://example.com",
+    target: "_blank",
+    icon: "external-link",
+  },
+};
 
-export const IconColorPallette = Template.bind({});
-IconColorPallette.args = {
-  variant: "outline",
-  icon: "circle-solid",
-  iconColor: "secondary",
+export const WithActions: StoryType = {
+  args: {
+    closable: true,
+    clickable: true,
+  },
+  render: (args) => ({
+    components: { VcChip },
+    setup: () => ({
+      args,
+      handleClick: () => console.log("click event fired"),
+      handleClose: () => console.log("close event fired"),
+    }),
+    template: `<VcChip v-bind="args" @click="handleClick" @close="handleClose">
+      Chip with actions
+    </VcChip>`,
+  }),
 };
 
-export const IconColorHEX = Template.bind({});
-IconColorHEX.args = {
-  variant: "outline",
-  icon: "circle-solid",
-  iconColor: "#ff0000",
+export const Draggable: StoryType = {
+  args: {
+    draggable: true,
+  },
 };
 
-export const Truncate: StoryFn = (args) => ({
-  components: { VcChip },
-  setup: () => ({ args }),
-  template: `<VcChip v-bind="args" class="w-36">
-    <span>Long long long Chip text</span>
-  </VcChip>`,
-});
-Truncate.args = {
-  truncate: true,
+export const ClosableClickable: StoryType = {
+  args: {
+    closable: true,
+    clickable: true,
+  },
 };
 
-export const AllStates: StoryFn = () => ({
-  components: { VcChip },
-  setup: () => ({ colors: COLORS, variants: VARIANTS, sizes: SIZES }),
-  template: `<div class="space-y-8">
-    <div v-for="size in sizes" class="space-y-3">
-      <h2 class="text-lg font-bold">Size: {{ size }}</h2>
+export const DisabledClosable: StoryType = {
+  args: {
+    disabled: true,
+    closable: true,
+  },
+};
 
-      <div class="space-y-1" v-for="variant in variants">
-        <div class="text-base">Variant: <b>{{ variant }}</b></div>
+export const CustomCloseIcon: StoryType = {
+  args: {
+    closable: true,
+  },
+  render: (args) => ({
+    components: { VcChip, VcIcon },
+    setup: () => ({
+      args,
+      handleClose: () => console.log("close event fired with custom icon"),
+    }),
+    template: `<VcChip v-bind="args" @close="handleClose">
+      Custom close
+      <template #close-icon>
+        <VcIcon name="delete" />
+      </template>
+    </VcChip>`,
+  }),
+};
 
-        <div class="flex flex-wrap gap-2 items-center">
-          <VcChip v-for="color in colors" :size="size" :color="color" :variant="variant" icon="cog">
-            Color: {{ color }}
-          </VcChip>
+export const AllVariants: StoryType = {
+  args: {
+    size: "md",
+    color: "primary",
+  },
+  render: (args) => ({
+    components: { VcChip },
+    setup: () => ({ variants: VARIANTS, args }),
+    template: `<div class="flex flex-col items-start gap-3">
+      <VcChip v-bind="args" v-for="variant in variants" :variant="variant" icon="circle-solid" closable>
+        {{ variant }}
+      </VcChip>
+    </div>`,
+  }),
+};
 
-          <VcChip :size="size" :variant="variant" icon="cog" disabled>
-            Color: Disabled
-          </VcChip>
+export const AllStates: StoryType = {
+  render: () => ({
+    components: { VcChip },
+    setup: () => ({ colors: COLORS, variants: VARIANTS, sizes: SIZES }),
+    template: `<div class="space-y-8">
+      <div v-for="size in sizes" class="space-y-3">
+        <h2 class="text-lg font-bold">Size: {{ size }}</h2>
+
+        <div class="space-y-1" v-for="variant in variants">
+          <div class="text-base">Variant: <b>{{ variant }}</b></div>
+
+          <div class="flex flex-wrap gap-2 items-center">
+            <VcChip v-for="color in colors" :size="size" :color="color" :variant="variant" icon="circle-solid">
+              Color: {{ color }}
+            </VcChip>
+
+            <VcChip :size="size" :variant="variant" icon="circle-solid" disabled>
+              Color: Disabled
+            </VcChip>
+          </div>
         </div>
       </div>
-    </div>
-
-    <div v-for="size in sizes" class="space-y-3">
-      <h2 class="text-lg font-bold">Size: {{ size }}</h2>
 
+      <div v-for="size in sizes" class="space-y-3">
+        <h2 class="text-lg font-bold">Size: {{ size }}</h2>
 
-      <div class="space-y-1" v-for="variant in variants">
-        <div class="text-base">Variant: <b>{{ variant }}</b></div>
+        <div class="space-y-1" v-for="variant in variants">
+          <div class="text-base">Variant: <b>{{ variant }}</b></div>
 
-        <div class="flex flex-wrap gap-2 items-center">
-          <VcChip v-for="color in colors" :size="size" :color="color" :variant="variant" closable>
-            Color: {{ color }}
-          </VcChip>
+          <div class="flex flex-wrap gap-2 items-center">
+            <VcChip v-for="color in colors" :size="size" :color="color" :variant="variant" closable>
+              Color: {{ color }}
+            </VcChip>
 
-          <VcChip :size="size" :variant="variant" icon="cog" disabled closable>
-            Color: Disabled
-          </VcChip>
+            <VcChip :size="size" :variant="variant" icon="circle-solid" disabled closable>
+              Color: Disabled
+            </VcChip>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-  `,
-});
+    </div>`,
+  }),
+};