@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/dist/src/components/UiSkeletonBox/UiSkeletonBox.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block animate-pulse rounded-sm bg-gray-200"
+    class="inline-block animate-pulse rounded-sm bg-neutral-pale"
     :class="{
       'h-4 w-full': dynamicSize,
     }"
@@ -11,28 +11,23 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    maxWidth?: number;
-    minWidth?: number;
-    dynamicSize?: boolean;
-  }>(),
-  {
-    maxWidth: 100,
-    minWidth: 80,
-    dynamicSize: false,
-  },
-);
+const {
+  maxWidth = 100,
+  minWidth = 80,
+  dynamicSize = false,
+} = defineProps<{
+  maxWidth?: number;
+  minWidth?: number;
+  dynamicSize?: boolean;
+}>();
 
 /**
  * Use either given width or random width between min and max value
  */
 const computedWidth = computed(() => {
   return (
-    props.dynamicSize &&
-    `${Math.floor(
-      Math.random() * (props.maxWidth - props.minWidth) + props.minWidth,
-    )}%`
+    dynamicSize &&
+    `${Math.floor(Math.random() * (maxWidth - minWidth) + minWidth)}%`
   );
 });
 </script>

package/dist/src/components/UiSnackbar/UiSnackbar.spec.ts

@@ -61,4 +61,49 @@ describe("UiSnackbar", () => {
 
     expect(wrapper.emitted()["action-click"]).toBeTruthy();
   });
+
+  it("snackbar type success has green background", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from success snackbar",
+      },
+      props: {
+        type: "success",
+        isShown: true,
+      },
+    });
+
+    const coloredDiv = wrapper.find(".flex.items-center.rounded-full");
+    expect(coloredDiv.classes("bg-accent-green")).toBe(true);
+  });
+
+  it("snackbar type error has red background", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from error snackbar",
+      },
+      props: {
+        type: "error",
+        isShown: true,
+      },
+    });
+
+    const coloredDiv = wrapper.find(".flex.items-center.rounded-full");
+    expect(coloredDiv.classes("bg-accent-red")).toBe(true);
+  });
+
+  it("snackbar type info has gray-900 background", () => {
+    const wrapper = mount(UiSnackbar, {
+      slots: {
+        default: "Hello, from info snackbar",
+      },
+      props: {
+        type: "info",
+        isShown: true,
+      },
+    });
+
+    const coloredDiv = wrapper.find(".flex.items-center.rounded-full");
+    expect(coloredDiv.classes("bg-neutral-primary")).toBe(true);
+  });
 });

package/dist/src/components/UiSnackbar/UiSnackbar.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
 import { ref } from "vue";
 
 import { icons } from "../UiIcon/icons.ts";
@@ -10,31 +9,25 @@ const meta = {
   title: "Ui/UiSnackbar",
   component: UiSnackbar,
   argTypes: {
-    position: {
-      control: "select",
-      options: ["left", "right"],
-    },
-    isShown: {
-      control: "boolean",
-    },
     iconName: {
       control: "select",
       options: [null, ...Object.keys(icons)],
+      description:
+        "Name of the icon to display. If not set, uses alert-fill for error.",
     },
     iconSize: {
       control: "select",
-      options: ["small", "medium", "large"],
-    },
-    type: {
-      control: "select",
-      options: ["info", "error"],
+      options: ["sm", "md", "lg"],
+      description: "Size of the icon.",
     },
+    "action-click": { action: "action-click" },
+    input: { action: "input" },
   },
   args: {
     position: "left",
     isShown: true,
-    iconName: null,
-    iconSize: "medium",
+    iconName: undefined,
+    iconSize: "md",
     type: "info",
   },
   render: (args) => ({
@@ -49,16 +42,20 @@ const meta = {
     components: { UiSnackbar },
     template: `
       <div>
-      <button @click="toggle">toggle snackbar</button>
-      <UiSnackbar v-bind="args" :is-shown="isVisible" @action-click="action" @input="input">
-        This is a message
-        <template #action>Action</template>
-      </UiSnackbar>
+        <button @click="toggle">toggle snackbar</button>
+        <UiSnackbar
+          v-bind="args"
+          :is-shown="isVisible"
+          @action-click="args['action-click']"
+          @input="args.input"
+        >
+          This is a message
+          <template #action>Action</template>
+        </UiSnackbar>
       </div>
     `,
-    methods: { input: action("input"), action: action("action") },
   }),
-} satisfies Meta<typeof UiSnackbar>;
+} as Meta<typeof UiSnackbar & { "action-click": any; input: any }>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/src/components/UiSnackbar/UiSnackbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition
+  <Transition
     enter-active-class="duration-200 ease-out"
     enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
@@ -19,16 +19,16 @@
       <div
         class="flex items-center rounded-full px-4 py-3 shadow-md ease-in"
         :class="{
-          'bg-red-500 text-white': type === 'error',
-          'bg-gray-900 text-white': type === 'info',
-          'bg-green-primary text-white': type === 'success',
+          'bg-accent-red text-neutral': type === 'error',
+          'bg-neutral-primary text-neutral': type === 'info',
+          'bg-accent-green text-neutral': type === 'success',
         }"
       >
         <UiIcon
           v-if="iconName || type === 'error'"
-          :name="iconName || 'alert-fill'"
+          :name="iconName || 'alert-filled'"
           :size="iconSize"
-          class="mr-2 text-white"
+          class="mr-2 text-neutral"
         />
 
         <p class="text-sm/5 font-normal">
@@ -39,45 +39,42 @@
           v-if="$slots.action"
           ref="actionBtn"
           type="button"
-          class="ml-3 cursor-pointer text-sm/5 font-bold hover:underline focus:outline-hidden focus-visible:underline"
+          class="ml-3 cursor-pointer text-sm/5 font-semibold hover:underline focus:outline-hidden focus-visible:underline"
           @click="emit('action-click')"
         >
           <slot name="action" />
         </button>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script setup lang="ts">
 import { watch } from "vue";
 
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
+import UiIcon, { ICON_SIZES, type UiIconName } from "../UiIcon/UiIcon.vue";
 
 const emit = defineEmits<{
   input: [boolean];
   "action-click": [];
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    isShown?: boolean;
-    position?: "left" | "right";
-    iconName?: UiIconName | null;
-    iconSize?: "small" | "medium" | "large";
-    type?: "info" | "error" | "success";
-  }>(),
-  {
-    isShown: false,
-    position: "left",
-    iconName: null,
-    iconSize: "large",
-    type: "info",
-  },
-);
+const {
+  isShown = false,
+  position = "left",
+  iconName = undefined,
+  iconSize = "lg",
+  type = "info",
+} = defineProps<{
+  isShown?: boolean;
+  position?: "left" | "right";
+  iconName?: UiIconName;
+  iconSize?: Extract<keyof typeof ICON_SIZES, "sm" | "md" | "lg">;
+  type?: "info" | "error" | "success";
+}>();
 
 watch(
-  () => props.isShown,
+  () => isShown,
   (isShown) => {
     if (isShown) {
       emit("input", isShown);

package/dist/src/components/UiSpinner/README.md

@@ -5,7 +5,7 @@
 ```html
 <!-- SomeComponent.vue using UiSpinner -->
 <template>
-    <UiSpinner color="#000"></UiSpinner>
+    <UiSpinner appearance="primary" size="lg"></UiSpinner>
 </template>
 
 <script>
@@ -17,9 +17,11 @@
 
 ### Props
 
-| Name    | Type     | Default     | Description                        |
-|---------|----------|-------------|------------------------------------|
-| `color` | `String` | `"#00E281"` | Color string for css inline color. |
+| Name         | Type     | Default   | Description                                                                             |
+|--------------|----------|-----------|-----------------------------------------------------------------------------------------|
+| `appearance` | `String` | `primary` | Sets the color theme for the spinner, affecting both the background circle and the arc. |
+| `size`       | `String` | `lg`      | sets size of the spinner                                                                |
+
 
 ### Slots
 

package/dist/src/components/UiSpinner/UiSpinner.spec.ts

@@ -1,31 +1,45 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
-import UiIcon from "../UiIcon/UiIcon.vue";
-
 import UiSpinner from "./UiSpinner.vue";
 
-describe("UiSpinner", () => {
-  const wrapper = mount(UiSpinner, {});
+describe("Spinner", () => {
+  it("renders with default props", () => {
+    const wrapper = mount(UiSpinner);
 
-  it("renders default", () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.findComponent(UiIcon).exists()).toBe(true);
-    expect(wrapper.classes("text-blue-default")).toBe(true);
-  });
+    // Wrapper div should have size-6 class (lg size)
+    const wrapperDiv = wrapper.find("div");
+    expect(wrapperDiv.classes()).toContain("size-6");
 
-  it("renders bubbles variant", async () => {
-    await wrapper.setProps({ variant: "bubbles" });
-    expect(wrapper.find("div").exists()).toBe(true);
-  });
+    // SVG should exist and animate
+    const svg = wrapper.find("svg");
+    expect(svg.exists()).toBe(true);
+    expect(svg.classes()).toContain("animate-spin");
+
+    // Only select circles that are direct children of svg (not inside mask/defs)
+    const visibleCircles = wrapper.findAll("svg > circle");
+    expect(visibleCircles).toHaveLength(2);
 
-  it("renders green color class", async () => {
-    await wrapper.setProps({ color: "green" });
-    expect(wrapper.classes("text-green-primary")).toBe(true);
+    // Background circle should have text-neutral-faint class
+    const bgCircle = wrapper.find("[data-testid=background-circle]");
+    expect(bgCircle.classes()).toContain("text-neutral-faint");
+
+    // Arc circle should have text-primary class
+    const arcCircle = wrapper.find("[data-testid=arc-circle]");
+    expect(arcCircle.classes()).toContain("text-primary");
   });
 
-  it("renders white color class", async () => {
-    await wrapper.setProps({ color: "white" });
-    expect(wrapper.classes("text-white")).toBe(true);
+  it("renders neutral with opacity color class when appearance is neutral", () => {
+    const wrapper = mount(UiSpinner, {
+      props: {
+        appearance: "neutral",
+      },
+    });
+
+    const arcCircle = wrapper.find("[data-testid=arc-circle]");
+    const bgCircle = wrapper.find("[data-testid=background-circle]");
+
+    expect(arcCircle.classes()).toContain("text-neutral");
+    expect(bgCircle.classes()).toContain("text-neutral/25");
   });
 });

package/dist/src/components/UiSpinner/UiSpinner.stories.ts

@@ -1,23 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
+import UiButton from "../UiButton/UiButton.vue";
+
 import UiSpinner from "./UiSpinner.vue";
 
 const meta = {
   title: "UI/UiSpinner",
   component: UiSpinner,
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["spinner", "bubbles"],
-    },
-    color: {
-      control: { type: "select" },
-      options: ["blue", "white", "green"],
-    },
-  },
   args: {
-    variant: "spinner",
-    color: "blue",
+    appearance: "primary",
   },
   render: (args) => ({
     components: { UiSpinner },
@@ -31,18 +22,23 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
-
-export const WithGreenSpinner: Story = {
+export const Default: Story = {
   args: {
-    variant: "spinner",
-    color: "green",
+    size: "xl",
+    appearance: "primary",
   },
 };
 
-export const WithBlueBubbles: Story = {
+export const OnButton: Story = {
   args: {
-    variant: "bubbles",
-    color: "blue",
+    appearance: "neutral",
   },
+  render: (args) => ({
+    components: { UiSpinner, UiButton },
+    setup() {
+      return { args };
+    },
+    template:
+      '<UiButton color="blue"><UiSpinner v-bind="args" ></UiSpinner></UiButton>',
+  }),
 };

package/dist/src/components/UiSpinner/UiSpinner.vue

@@ -1,104 +1,72 @@
 <template>
-  <div :class="colorClass">
+  <div :class="sizeClass">
     <svg
-      v-if="variant === 'bubbles'"
-      class="mx-auto"
-      width="100"
-      height="40"
-      viewBox="0 0 100 40"
+      class="animate-spin"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="25" cy="20" r="3.5" fill="currentColor">
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          dur="1.8s"
-          values="0,0;-25,-20;0,0;25,20;0,0"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.16s"
-        />
-        <animateTransform
-          attributeName="transform"
-          additive="sum"
-          type="scale"
-          dur="1.8s"
-          values="1; 2; 1; 0; 1"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.16s"
-        />
-      </circle>
-      <circle cx="50" cy="20" r="3.5" fill="currentColor">
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          dur="1.8s"
-          values="0,0;-50,-20;0,0;50,20;0,0"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.26s"
-        />
-        <animateTransform
-          attributeName="transform"
-          additive="sum"
-          type="scale"
-          dur="1.8s"
-          values="1; 2; 1; 0; 1"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.26s"
-        />
-      </circle>
-      <circle cx="75" cy="20" r="3.5" fill="currentColor">
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          dur="1.8s"
-          values="0,0;-75,-20;0,0;75,20;0,0"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.42s"
-        />
-        <animateTransform
-          attributeName="transform"
-          additive="sum"
-          type="scale"
-          dur="1.8s"
-          values="1; 2; 1; 0; 1"
-          repeatCount="indefinite"
-          easing="ease-in-out"
-          begin="0.42s"
-        />
-      </circle>
+      <circle
+        cx="16"
+        cy="16"
+        r="14.5"
+        data-testid="background-circle"
+        stroke="currentColor"
+        :class="backgroundClass"
+        stroke-width="3"
+        fill="none"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        r="14.5"
+        data-testid="arc-circle"
+        stroke="currentColor"
+        :class="arcClass"
+        stroke-width="3"
+        fill="none"
+        stroke-dasharray="22.78 68.33"
+        stroke-linecap="square"
+      />
     </svg>
-    <UiIcon v-else name="spinner" class="animate-spin" size="large" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 
-import UiIcon from "../UiIcon/UiIcon.vue";
+export interface SpinnerProps {
+  appearance?: "primary" | "neutral";
+  size?: "sm" | "md" | "lg" | "xl";
+}
 
-const props = withDefaults(
-  defineProps<{
-    color?: "blue" | "white" | "green";
-    variant?: "spinner" | "bubbles";
-  }>(),
-  {
-    variant: "spinner",
-    color: "blue",
-  },
-);
+const { appearance = "primary", size = "lg" } = defineProps<SpinnerProps>();
 
-const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
-    blue: "text-blue-default",
-    green: "text-green-primary",
-    white: "text-white",
+const sizeClass = computed(() => {
+  const sizes = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+    xl: "size-8",
   };
+  return sizes[size];
+});
 
-  return colorClasses[props.color];
+const arcClass = computed(() => {
+  const variants = {
+    primary: "text-primary",
+    neutral: "text-neutral",
+  };
+  return variants[appearance];
+});
+
+const backgroundClass = computed(() => {
+  const variants = {
+    primary: "text-neutral-faint",
+    neutral: "text-neutral/25",
+  };
+  return variants[appearance];
 });
 </script>

package/dist/src/components/UiTextButton/UiTextButton.spec.ts

@@ -51,7 +51,7 @@ describe("UiTextButton", () => {
         color: "blue",
       },
     });
-    expect(wrapper.classes("text-blue-default")).toBe(true);
+    expect(wrapper.classes("text-primary")).toBe(true);
   });
 
   it("should render gray text color", () => {
@@ -60,7 +60,7 @@ describe("UiTextButton", () => {
         color: "gray",
       },
     });
-    expect(wrapper.classes("text-gray-700")).toBe(true);
+    expect(wrapper.classes("text-neutral-subtle")).toBe(true);
   });
 
   it("should render iconLeft", () => {
@@ -94,6 +94,6 @@ describe("UiTextButton", () => {
         placement: "oncanvas",
       },
     });
-    expect(wrapper.classes("text-gray-800")).toBe(true);
+    expect(wrapper.classes("text-neutral-emphasis")).toBe(true);
   });
 });

package/dist/src/components/UiTextButton/UiTextButton.stories.ts

@@ -5,6 +5,7 @@ import { icons } from "../UiIcon/icons.ts";
 import UiTextButton from "./UiTextButton.vue";
 
 const meta = {
+  tags: ["deprecated"],
   title: "Ui/UiTextButton",
   component: UiTextButton,
   argTypes: {