@dpa-id-components/dpa-shared-components 16.0.0 → 17.0.0

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

@@ -0,0 +1,64 @@
+import UiSnackbar from "./UiSnackbar.vue";
+import { iconNames } from "../UiIcon/iconNames.js";
+import { ref } from "vue";
+import { action } from "storybook/actions";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiSnackbar",
+  component: UiSnackbar,
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["left", "right"],
+    },
+    isShown: {
+      control: "boolean",
+    },
+    iconName: {
+      control: "select",
+      options: [null, ...iconNames],
+    },
+    iconSize: {
+      control: "select",
+      options: ["small", "medium", "large"],
+    },
+    type: {
+      control: "select",
+      options: ["info", "error"],
+    },
+  },
+  args: {
+    position: "left",
+    isShown: true,
+    iconName: null,
+    iconSize: "medium",
+    type: "info",
+  },
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(args.isShown);
+
+      const toggle = () => {
+        isVisible.value = !isVisible.value;
+      };
+      return { args, isVisible, toggle };
+    },
+    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>
+      </div>
+    `,
+    methods: { input: action("input"), action: action("action") },
+  }),
+} satisfies Meta<typeof UiSnackbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,86 @@
+<template>
+  <transition
+    enter-active-class="duration-200 ease-out"
+    enter-from-class="transform opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-in"
+    leave-from-class="opacity-100"
+    leave-to-class="transform opacity-0"
+  >
+    <div
+      v-if="isShown"
+      role="status"
+      class="fixed bottom-5 sm:bottom-12"
+      :class="{
+        'left-5 sm:left-12': position === 'left',
+        'right-5 sm:right-12': position === 'right',
+      }"
+    >
+      <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',
+        }"
+      >
+        <UiIcon
+          v-if="iconName || type === 'error'"
+          :name="iconName || 'alert-fill'"
+          :size="iconSize"
+          class="mr-2 text-white"
+        />
+
+        <p class="text-sm font-normal leading-5">
+          <slot />
+        </p>
+
+        <button
+          v-if="$slots.action"
+          ref="actionBtn"
+          type="button"
+          class="pointer ml-3 text-sm font-bold leading-5 hover:underline focus:outline-none focus-visible:underline"
+          @click="emit('action-click')"
+        >
+          <slot name="action" />
+        </button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import UiIcon, { 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",
+  },
+);
+
+watch(
+  () => props.isShown,
+  (isShown) => {
+    if (isShown) {
+      emit("input", isShown);
+    }
+  },
+);
+</script>

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

@@ -0,0 +1,26 @@
+# @dpa-shared-components/UiSpinner
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiSpinner -->
+<template>
+    <UiSpinner color="#000"></UiSpinner>
+</template>
+
+<script>
+    import {UiSpinner} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name    | Type     | Default     | Description                        |
+|---------|----------|-------------|------------------------------------|
+| `color` | `String` | `"#00E281"` | Color string for css inline color. |
+
+### Slots
+
+This component has no slots

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

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiSpinner from "./UiSpinner.vue";
+
+describe("UiSpinner", () => {
+  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);
+  });
+
+  it("renders bubbles variant", async () => {
+    await wrapper.setProps({ variant: "bubbles" });
+    expect(wrapper.find("div").exists()).toBe(true);
+  });
+
+  it("renders green color class", async () => {
+    await wrapper.setProps({ color: "green" });
+    expect(wrapper.classes("text-green-primary")).toBe(true);
+  });
+
+  it("renders white color class", async () => {
+    await wrapper.setProps({ color: "white" });
+    expect(wrapper.classes("text-white")).toBe(true);
+  });
+});

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

@@ -0,0 +1,47 @@
+import UiSpinner from "./UiSpinner.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+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",
+  },
+  render: (args) => ({
+    components: { UiSpinner },
+    setup() {
+      return { args };
+    },
+    template: '<UiSpinner v-bind="args" ></UiSpinner>',
+  }),
+} satisfies Meta<typeof UiSpinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithGreenSpinner: Story = {
+  args: {
+    variant: "spinner",
+    color: "green",
+  },
+};
+
+export const WithBlueBubbles: Story = {
+  args: {
+    variant: "bubbles",
+    color: "blue",
+  },
+};

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

@@ -0,0 +1,103 @@
+<template>
+  <div :class="colorClass">
+    <svg
+      v-if="variant === 'bubbles'"
+      class="mx-auto"
+      width="100"
+      height="40"
+      viewBox="0 0 100 40"
+      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>
+    </svg>
+    <UiIcon v-else name="spinner" class="animate-spin" size="large" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiIcon from "../UiIcon/UiIcon.vue";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    color?: "blue" | "white" | "green";
+    variant?: "spinner" | "bubbles";
+  }>(),
+  {
+    variant: "spinner",
+    color: "blue",
+  },
+);
+
+const colorClass = computed(() => {
+  const colorClasses: Record<string, string> = {
+    blue: "text-blue-default",
+    green: "text-green-primary",
+    white: "text-white",
+  };
+
+  return colorClasses[props.color];
+});
+</script>

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

@@ -0,0 +1,41 @@
+# @dpa-id-components/UiTextButton
+
+## Installation
+
+```
+yarn add @dpa-id-components/UiTextButton
+```
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiTextButton -->
+<template>
+  <UiTextButton>Link</UiTextButton>
+</template>
+
+<script setup lang="ts">
+  import UiTextButton from "@dpa-id-components/UiSnackbar";
+</script>
+```
+
+## API
+
+### Props
+
+| Name        | Type                                     | Default     | Description                                                                         |
+|-------------|------------------------------------------|-------------|-------------------------------------------------------------------------------------|
+| color?      | "blue" &#124; "gray";                    | "blue"      | The text color                                                                      |
+| href?       | string;                                  | undefined   | The link target, if set the component will render as <a> tag                        |
+| iconLeft?   | `UiIconName`                             | undefined   | The name of the icon that should be rendered left of the link text                  |
+| iconRight?  | `UiIconName`                             | undefined   | The name of the icon that should be rendered right of the link text                 |
+| placement?  | "onsurface" &#124; "oncanvas";           | "onsurface" | The 'placement' of the link. Renders a higher contrast version if "oncanvas" is set |
+| size?       | "xsmall" &#124; "small" &#124; "medium"; | "medium"    | The text size of the link, also affects icons size.                                 |
+| weight?     | "regular" &#124; "semibold";             | "regular"   | The font weight of the link.                                                        |
+| linkTarget? | string;                                  | "_self"     | Used to modify the a tag's target property if href is set.                          |
+
+### Slots
+
+| Name      | Description                              |
+| --------- | ---------------------------------------- |
+| `default` | Default slot for text of the text button |

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

@@ -0,0 +1,98 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiTextButton from "./UiTextButton.vue";
+
+describe("UiTextButton", () => {
+  it("should render defaults", () => {
+    const wrapper = mount(UiTextButton);
+    expect(wrapper.classes("font-normal")).toBe(true);
+  });
+
+  it("should render semibold font-weight", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        weight: "semibold",
+      },
+    });
+    expect(wrapper.classes("font-semibold")).toBe(true);
+  });
+
+  it("should render xsmall font-size", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        size: "xsmall",
+      },
+    });
+    expect(wrapper.classes("text-xs")).toBe(true);
+  });
+
+  it("should render small font-size", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        size: "small",
+      },
+    });
+    expect(wrapper.classes("text-sm")).toBe(true);
+  });
+
+  it("should render medium font-size", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        size: "medium",
+      },
+    });
+    expect(wrapper.classes("text-base")).toBe(true);
+  });
+
+  it("should render blue text color", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        color: "blue",
+      },
+    });
+    expect(wrapper.classes("text-blue-default")).toBe(true);
+  });
+
+  it("should render gray text color", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        color: "gray",
+      },
+    });
+    expect(wrapper.classes("text-gray-700")).toBe(true);
+  });
+
+  it("should render iconLeft", () => {
+    const iconLeft = "alert";
+    const wrapper = mount(UiTextButton, {
+      props: {
+        iconLeft,
+      },
+    });
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: iconLeft,
+    });
+  });
+
+  it("should render iconRight", () => {
+    const iconRight = "alert";
+    const wrapper = mount(UiTextButton, {
+      props: {
+        iconRight,
+      },
+    });
+    expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
+      name: iconRight,
+    });
+  });
+
+  it("should change gray text color when placement is oncanvas", () => {
+    const wrapper = mount(UiTextButton, {
+      props: {
+        color: "gray",
+        placement: "oncanvas",
+      },
+    });
+    expect(wrapper.classes("text-gray-800")).toBe(true);
+  });
+});

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

@@ -0,0 +1,59 @@
+import UiTextButton from "./UiTextButton.vue";
+import { iconNames } from "../UiIcon/iconNames.js";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiTextButton",
+  component: UiTextButton,
+  argTypes: {
+    color: {
+      control: "select",
+      options: ["blue", "gray"],
+    },
+    href: { control: "text" },
+    linkTarget: { control: "text" },
+    iconLeft: {
+      control: "select",
+      options: Object.values(iconNames),
+    },
+    iconRight: {
+      control: "select",
+      options: Object.values(iconNames),
+    },
+    placement: {
+      control: "select",
+      options: ["onsurface", "oncanvas"],
+    },
+    size: {
+      control: "select",
+      options: ["xsmall", "small", "medium"],
+    },
+    weight: {
+      control: "select",
+      options: ["regular", "semibold"],
+    },
+  },
+  args: {
+    color: "blue",
+    href: undefined,
+    iconLeft: undefined,
+    iconRight: undefined,
+    placement: "onsurface",
+    size: "medium",
+    weight: "regular",
+    linkTarget: undefined,
+  },
+} satisfies Meta<typeof UiTextButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiTextButton },
+    template: "<UiTextButton v-bind='args'>Link</UiTextButton>",
+  }),
+};