srcdev-nuxt-components 9.1.43 → 9.1.45

package/app/components/{display-avatar → 01.atoms/display-avatar}/stories/DisplayAvatar.stories.ts

@@ -2,9 +2,17 @@ import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import StorybookComponent from "../DisplayAvatar.vue";
 
 export default {
-  title: "Components/UI/DisplayAvatar",
+  title: "Atoms/DisplayAvatar",
   component: StorybookComponent,
   argTypes: {
+    size: {
+      control: { type: "inline-radio" },
+      options: ["xs", "s", "md", "lg", "xl"],
+      description: "Avatar size",
+      table: {
+        category: "Avatar",
+      },
+    },
     src: {
       control: { type: "text" },
       description: "Avatar image source URL",
@@ -61,6 +69,7 @@ export default {
     },
   },
   args: {
+    size: "md",
     src: "https://github.com/srcdev.png",
     alt: "SrcDev Avatar",
     chipSize: 12,
@@ -77,7 +86,9 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
     return { args };
   },
   template: `
+    <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
     <StorybookComponent
+      :size="args.size"
       :src="args.src"
       :alt="args.alt"
       :chip="{
@@ -88,6 +99,7 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
       }"
       :style-class-passthrough="args.styleClassPassthrough"
     />
+    </div>
   `,
 });
 

package/app/components/01.atoms/display-avatar/tests/DisplayAvatar.spec.ts

@@ -0,0 +1,208 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayAvatar from "../DisplayAvatar.vue";
+import DisplayChip from "../../../02.molecules/display-chip/DisplayChip.vue";
+
+describe("DisplayAvatar", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with src)", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg", alt: "John Doe", size: "lg" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with chip)", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe", chip: true },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <span> by default", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.element.tagName).toBe("SPAN");
+  });
+
+  it("renders as the element specified by the as prop", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { as: "div" },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders as DisplayChip when chip prop is set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { chip: true },
+    });
+    expect(wrapper.findComponent(DisplayChip).exists()).toBe(true);
+  });
+
+  // ─── Base class ───────────────────────────────────────────────────────────
+
+  it("always has the display-avatar class", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.classes()).toContain("display-avatar");
+  });
+
+  // ─── Size ─────────────────────────────────────────────────────────────────
+
+  it("applies md size class by default", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.classes()).toContain("md");
+  });
+
+  it.each(["xs", "s", "md", "lg", "xl"] as const)("applies %s size class when size='%s'", async (size) => {
+    const wrapper = await mountSuspended(DisplayAvatar, { props: { size } });
+    expect(wrapper.classes()).toContain(size);
+  });
+
+  // ─── Fallback text ────────────────────────────────────────────────────────
+
+  it("shows initials derived from alt when no src or text is set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe" },
+    });
+    expect(wrapper.find("span").text()).toBe("JD");
+  });
+
+  it("caps initials at two characters", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "Alice Bob Charlie" },
+    });
+    expect(wrapper.find("span").text()).toBe("AB");
+  });
+
+  it("shows single initial for a single-word alt", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "Alice" },
+    });
+    expect(wrapper.find("span").text()).toBe("A");
+  });
+
+  it("shows text prop instead of alt-derived initials when text is set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe", text: "?" },
+    });
+    expect(wrapper.find("span").text()).toBe("?");
+  });
+
+  it("shows empty fallback when neither src, text, nor alt are set", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.find("span").text()).toBe("");
+  });
+
+  // ─── Image ────────────────────────────────────────────────────────────────
+
+  it("renders an image element when src is provided", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg" },
+    });
+    expect(wrapper.find(".avatar-image").exists()).toBe(true);
+  });
+
+  it("does not render an image element when src is not provided", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar);
+    expect(wrapper.find(".avatar-image").exists()).toBe(false);
+  });
+
+  it("falls back to 'Avatar' as alt text when src is set but alt is not", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg" },
+    });
+    expect(wrapper.find(".avatar-image").attributes("alt")).toBe("Avatar");
+  });
+
+  it("uses the alt prop as alt text on the image", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { src: "/avatar.jpg", alt: "Profile picture" },
+    });
+    expect(wrapper.find(".avatar-image").attributes("alt")).toBe("Profile picture");
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────────────
+
+  it("renders default slot content instead of the fallback", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { alt: "John Doe" },
+      slots: { default: "<img class='custom-avatar' src='/x.jpg' alt='x' />" },
+    });
+    expect(wrapper.find(".custom-avatar").exists()).toBe(true);
+    expect(wrapper.text()).not.toContain("JD");
+  });
+
+  it("renders icon slot content", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      slots: { icon: "<span class='status-icon'>●</span>" },
+    });
+    expect(wrapper.find(".status-icon").exists()).toBe(true);
+  });
+
+  // ─── Chip ─────────────────────────────────────────────────────────────────
+
+  it("passes chipDefaultConfig when chip=true", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { chip: true },
+    });
+    const chip = wrapper.findComponent(DisplayChip);
+    expect(chip.props("config")).toMatchObject({
+      size: "12px",
+      maskWidth: "4px",
+      offset: "0px",
+      angle: "90deg",
+    });
+  });
+
+  it("passes custom config when chip is an object", async () => {
+    const chipConfig = { size: "16px", maskWidth: "2px", offset: "4px", angle: "45deg" };
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { chip: chipConfig },
+    });
+    const chip = wrapper.findComponent(DisplayChip);
+    expect(chip.props("config")).toMatchObject(chipConfig);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { styleClassPassthrough: "online" },
+    });
+    expect(wrapper.classes()).toContain("online");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { styleClassPassthrough: ["online", "featured"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayAvatar, {
+      props: { styleClassPassthrough: ["online"] },
+    });
+    expect(wrapper.classes()).toContain("online");
+    await wrapper.setProps({ styleClassPassthrough: ["offline"] });
+    expect(wrapper.classes()).not.toContain("online");
+    expect(wrapper.classes()).toContain("offline");
+  });
+});

package/app/components/01.atoms/display-avatar/tests/__snapshots__/DisplayAvatar.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayAvatar > renders correct HTML structure (default) 1`] = `"<span class="display-avatar md" style-class-passthrough=""><span>JD</span></span>"`;
+
+exports[`DisplayAvatar > renders correct HTML structure (with chip) 1`] = `
+"<span class="display-chip-core circle display-avatar md" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><span>JD</span>
+<!--v-if-->
+<!--v-if--></span>"
+`;
+
+exports[`DisplayAvatar > renders correct HTML structure (with src) 1`] = `"<span class="display-avatar lg" style-class-passthrough=""><img data-nuxt-img="" srcset="/_ipx/_/avatar.jpg 1x, /_ipx/_/avatar.jpg 2x" alt="John Doe" class="avatar-image" src="/_ipx/_/avatar.jpg"></span>"`;

package/app/components/01.atoms/display-pill/DisplayPill.vue

@@ -0,0 +1,134 @@
+<template>
+  <component
+    :is="tag"
+    class="display-pill"
+    :class="[size, variant, { 'is-reversed': reversed }, elementClasses]"
+  >
+    <slot name="icon"></slot>
+    <span v-if="label" class="pill-label">{{ label }}</span>
+    <slot v-else name="default"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "span" | "div" | "button" | "a";
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "primary" | "success" | "warning" | "danger" | "neutral";
+  reversed?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "span",
+  label: undefined,
+  size: "md",
+  variant: "default",
+  reversed: false,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .display-pill {
+    --_bg: var(--theme-pill-bg, var(--slate-01));
+    --_color: var(--theme-pill-color, var(--slate-09));
+    --_border-color: var(--theme-pill-border-color, transparent);
+    --_border-width: var(--theme-pill-border-width, 1px);
+    --_border-style: var(--theme-pill-border-style, solid);
+    /* 100vw always resolves to the correct pill radius regardless of element size */
+    --_border-radius: var(--theme-pill-border-radius, 100vw);
+    --_outline: var(--theme-pill-outline, none);
+    --_outline-offset: var(--theme-pill-outline-offset, 0px);
+    --_gap: var(--theme-pill-gap, 0.5rem);
+    --_font-size: var(--theme-pill-font-size, 1.2rem);
+    --_font-weight: var(--theme-pill-font-weight, 500);
+    --_padding-x: var(--theme-pill-padding-x, 1rem);
+    --_padding-y: var(--theme-pill-padding-y, 0.4rem);
+    --_icon-size: var(--theme-pill-icon-size, 1.4rem);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+    padding: var(--_padding-y) var(--_padding-x);
+    border-radius: var(--_border-radius);
+    border: var(--_border-width) var(--_border-style) var(--_border-color);
+    outline: var(--_outline);
+    outline-offset: var(--_outline-offset);
+    background-color: var(--_bg);
+    color: var(--_color);
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    line-height: 1;
+    white-space: nowrap;
+    width: fit-content;
+    cursor: default;
+    user-select: none;
+
+    &:is(button, a) {
+      cursor: pointer;
+    }
+
+    &.is-reversed {
+      flex-direction: row-reverse;
+    }
+
+    .pill-label {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    /* Sizes */
+    &.sm {
+      --_font-size: var(--theme-pill-font-size-sm, 1rem);
+      --_padding-x: var(--theme-pill-padding-x-sm, 0.8rem);
+      --_padding-y: var(--theme-pill-padding-y-sm, 0.3rem);
+      --_icon-size: var(--theme-pill-icon-size-sm, 1.2rem);
+    }
+
+    &.lg {
+      --_font-size: var(--theme-pill-font-size-lg, 1.4rem);
+      --_padding-x: var(--theme-pill-padding-x-lg, 1.2rem);
+      --_padding-y: var(--theme-pill-padding-y-lg, 0.6rem);
+      --_icon-size: var(--theme-pill-icon-size-lg, 1.6rem);
+    }
+
+    /* Variants */
+    &.primary {
+      --_bg: var(--theme-pill-primary-bg, var(--blue-01));
+      --_color: var(--theme-pill-primary-color, var(--blue-09));
+    }
+
+    &.success {
+      --_bg: var(--theme-pill-success-bg, var(--green-01));
+      --_color: var(--theme-pill-success-color, var(--green-10));
+    }
+
+    &.warning {
+      --_bg: var(--theme-pill-warning-bg, var(--yellow-08, #fef9c3));
+      --_color: var(--theme-pill-warning-color, var(--yellow-03, #a16207));
+    }
+
+    &.danger {
+      --_bg: var(--theme-pill-danger-bg, var(--red-01));
+      --_color: var(--theme-pill-danger-color, var(--red-10));
+    }
+
+    &.neutral {
+      --_bg: var(--theme-pill-neutral-bg, var(--slate-08));
+      --_color: var(--theme-pill-neutral-color, var(--slate-03));
+    }
+  }
+}
+</style>

package/app/components/01.atoms/display-pill/stories/DisplayPill.stories.ts

@@ -0,0 +1,88 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../DisplayPill.vue";
+
+type StoryArgs = {
+  tag: "span" | "div" | "button" | "a";
+  label: string;
+  size: "sm" | "md" | "lg";
+  variant: "default" | "primary" | "success" | "warning" | "danger" | "neutral";
+  reversed: boolean;
+  showIcon: boolean;
+};
+
+export default {
+  title: "Atoms/DisplayPill",
+  component: StorybookComponent,
+  argTypes: {
+    tag: {
+      control: { type: "inline-radio" },
+      options: ["span", "div", "button", "a"],
+      description: "Root element tag",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Pill label text",
+    },
+    size: {
+      control: { type: "inline-radio" },
+      options: ["sm", "md", "lg"],
+      description: "Pill size",
+    },
+    variant: {
+      control: { type: "inline-radio" },
+      options: ["default", "primary", "success", "warning", "danger", "neutral"],
+      description: "Colour variant",
+    },
+    reversed: {
+      control: { type: "boolean" },
+      description: "Swap icon and label order",
+    },
+    showIcon: {
+      control: { type: "boolean" },
+      description: "Show icon slot",
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+    class: {
+      table: { disable: true },
+    },
+    style: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "span",
+    label: "Status",
+    size: "md",
+    variant: "default",
+    reversed: false,
+    showIcon: true,
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="display: flex; align-items: center; justify-content: center; min-height: 100vh; gap: 1.6rem; flex-wrap: wrap;">
+      <StorybookComponent
+        :tag="args.tag"
+        :label="args.label"
+        :size="args.size"
+        :variant="args.variant"
+        :reversed="args.reversed"
+      >
+        <template v-if="args.showIcon" #icon>
+          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <circle cx="12" cy="12" r="5" />
+          </svg>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});

package/app/components/01.atoms/display-pill/tests/DisplayPill.spec.ts

@@ -0,0 +1,159 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayPill from "../DisplayPill.vue";
+
+describe("DisplayPill", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayPill);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "Status" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (with icon slot)", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "Status", variant: "success", size: "lg" },
+      slots: { icon: "<span class='icon'>✓</span>" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (reversed)", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "Status", reversed: true },
+      slots: { icon: "<span class='icon'>✓</span>" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders as <span> by default", async () => {
+    const wrapper = await mountSuspended(DisplayPill);
+    expect(wrapper.element.tagName).toBe("SPAN");
+  });
+
+  it.each(["span", "div", "button", "a"] as const)("renders as <%s> when tag='%s'", async (tag) => {
+    const wrapper = await mountSuspended(DisplayPill, { props: { tag } });
+    expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+  });
+
+  // ─── Base class ───────────────────────────────────────────────────────────
+
+  it("always has the display-pill class", async () => {
+    const wrapper = await mountSuspended(DisplayPill);
+    expect(wrapper.classes()).toContain("display-pill");
+  });
+
+  // ─── Label ────────────────────────────────────────────────────────────────
+
+  it("renders label text inside .pill-label", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "Active" },
+    });
+    expect(wrapper.find(".pill-label").text()).toBe("Active");
+  });
+
+  it("renders default slot when no label prop is set", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      slots: { default: "<strong class='custom'>Custom</strong>" },
+    });
+    expect(wrapper.find(".custom").exists()).toBe(true);
+    expect(wrapper.find(".pill-label").exists()).toBe(false);
+  });
+
+  it("does not render default slot when label prop is set", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { label: "Active" },
+      slots: { default: "<strong class='custom'>Custom</strong>" },
+    });
+    expect(wrapper.find(".pill-label").exists()).toBe(true);
+    expect(wrapper.find(".custom").exists()).toBe(false);
+  });
+
+  // ─── Icon slot ────────────────────────────────────────────────────────────
+
+  it("renders icon slot content", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      slots: { icon: "<span class='test-icon'>★</span>" },
+    });
+    expect(wrapper.find(".test-icon").exists()).toBe(true);
+  });
+
+  // ─── Size ─────────────────────────────────────────────────────────────────
+
+  it("applies md size class by default", async () => {
+    const wrapper = await mountSuspended(DisplayPill);
+    expect(wrapper.classes()).toContain("md");
+  });
+
+  it.each(["sm", "md", "lg"] as const)("applies %s size class when size='%s'", async (size) => {
+    const wrapper = await mountSuspended(DisplayPill, { props: { size } });
+    expect(wrapper.classes()).toContain(size);
+  });
+
+  // ─── Variant ──────────────────────────────────────────────────────────────
+
+  it("applies default variant class by default", async () => {
+    const wrapper = await mountSuspended(DisplayPill);
+    expect(wrapper.classes()).toContain("default");
+  });
+
+  it.each(["default", "primary", "success", "warning", "danger", "neutral"] as const)(
+    "applies %s variant class when variant='%s'",
+    async (variant) => {
+      const wrapper = await mountSuspended(DisplayPill, { props: { variant } });
+      expect(wrapper.classes()).toContain(variant);
+    }
+  );
+
+  // ─── Reversed ─────────────────────────────────────────────────────────────
+
+  it("does not apply is-reversed class by default", async () => {
+    const wrapper = await mountSuspended(DisplayPill);
+    expect(wrapper.classes()).not.toContain("is-reversed");
+  });
+
+  it("applies is-reversed class when reversed=true", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { reversed: true },
+    });
+    expect(wrapper.classes()).toContain("is-reversed");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { styleClassPassthrough: "featured" },
+    });
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { styleClassPassthrough: ["featured", "highlighted"] },
+    });
+    expect(wrapper.classes()).toContain("featured");
+    expect(wrapper.classes()).toContain("highlighted");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayPill, {
+      props: { styleClassPassthrough: ["featured"] },
+    });
+    expect(wrapper.classes()).toContain("featured");
+    await wrapper.setProps({ styleClassPassthrough: ["highlighted"] });
+    expect(wrapper.classes()).not.toContain("featured");
+    expect(wrapper.classes()).toContain("highlighted");
+  });
+});

package/app/components/01.atoms/display-pill/tests/__snapshots__/DisplayPill.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayPill > renders correct HTML structure (default) 1`] = `"<span class="display-pill md default"><span class="pill-label">Status</span></span>"`;
+
+exports[`DisplayPill > renders correct HTML structure (reversed) 1`] = `"<span class="display-pill md default is-reversed"><span class="icon">✓</span><span class="pill-label">Status</span></span>"`;
+
+exports[`DisplayPill > renders correct HTML structure (with icon slot) 1`] = `"<span class="display-pill lg success"><span class="icon">✓</span><span class="pill-label">Status</span></span>"`;