@dpa-id-components/dpa-shared-components 22.0.0-next.9 → 22.0.0

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

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import { icons } from "../UiIcon/icons.ts";
-
-import UiFilterButton from "./UiFilterButton.vue";
-
-const meta = {
-  tags: ["deprecated"],
-  title: "Ui/UiFilterButton",
-  component: UiFilterButton,
-  argTypes: {
-    title: {
-      control: "text",
-    },
-    variant: {
-      control: "select",
-      options: [
-        "blue-rounded",
-        "white-rounded",
-        "blank",
-        "blue-blank",
-        "transparent-rounded",
-      ],
-    },
-    buttonWidth: {
-      control: "select",
-      options: ["max", "full"],
-    },
-    chevronIcon: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    rotateIcon: {
-      control: "boolean",
-    },
-    disabled: {
-      control: "boolean",
-    },
-    active: {
-      control: "boolean",
-    },
-    hasIcon: {
-      control: "boolean",
-    },
-    iconLeft: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    iconSize: {
-      control: "select",
-      options: ["xs", "small", "large"],
-    },
-    size: {
-      control: "select",
-      options: ["xs", "small"],
-    },
-    iconLeftClass: {
-      control: "text",
-    },
-    iconRightClass: {
-      control: "text",
-    },
-  },
-  args: {
-    title: "Filter",
-    variant: "white-rounded",
-    buttonWidth: "max",
-    chevronIcon: "chevron-down",
-    rotateIcon: false,
-    disabled: false,
-    active: false,
-    hasIcon: true,
-    iconSize: "xs",
-    iconLeft: undefined,
-    iconLeftClass: undefined,
-    iconRightClass: undefined,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiFilterButton },
-    template: "<UiFilterButton v-bind='args'>Slot</UiFilterButton>",
-  }),
-} satisfies Meta<typeof UiFilterButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiFilterButton/UiFilterButton.vue

@@ -1,170 +0,0 @@
-<template>
-  <div
-    :class="
-      cn(
-        'w-full px-3',
-        $attrs.class,
-        'flex cursor-pointer items-center rounded-full select-none',
-        variantClasses,
-        buttonWidth === 'full' ? 'w-full' : 'max-w-max',
-        props.size === 'xs' ? 'py-0.5' : 'py-1.5',
-      )
-    "
-    @click="onClick"
-  >
-    <button
-      class="w-full rounded-full focus:outline-hidden focus-visible:focus-outline"
-      :disabled="disabled"
-      type="button"
-      data-testid="filter-button"
-    >
-      <span
-        data-testid="filterbutton-title"
-        class="flex w-full items-center justify-between text-left text-sm/normal font-medium"
-        :class="`${textColorClass} ${props.size === 'xs' ? 'text-xs' : 'text-sm'}`"
-      >
-        <UiIcon
-          v-if="hasIcon && iconLeft"
-          :name="iconLeft"
-          :size="iconSize"
-          class="flex-none"
-          :class="
-            cn(
-              {
-                'mr-2': title.length !== 0,
-              },
-              iconLeftClass,
-            )
-          "
-        />
-        <span class="w-full grow truncate">
-          {{ title }}
-        </span>
-        <UiIcon
-          v-if="hasIcon"
-          :name="chevronIcon"
-          :class="
-            cn(
-              {
-                'origin-center rotate-180': rotateIcon,
-                'ml-2': title.length !== 0,
-              },
-              iconRightClass,
-            )
-          "
-          :size="iconSize"
-          class="flex-none"
-        />
-      </span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated Use `UiButton` instead
- */
-export default {
-  name: "UiFilterButton",
-};
-</script>
-
-<script setup lang="ts">
-import type { ClassValue } from "clsx";
-import { computed } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-const emit = defineEmits<{
-  click: [];
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    variant?:
-      | "blue-rounded"
-      | "white-rounded"
-      | "transparent-rounded"
-      | "blank"
-      | "blue-blank";
-    buttonWidth?: "full" | "max";
-    chevronIcon?: UiIconName;
-    rotateIcon?: boolean;
-    iconSize?: "xs" | "sm" | "lg";
-    size?: "xs" | "small";
-    disabled?: boolean;
-    active?: boolean;
-    hasIcon?: boolean;
-    iconLeft?: UiIconName;
-    iconLeftClass?: ClassValue | ClassValue[];
-    iconRightClass?: ClassValue | ClassValue[];
-  }>(),
-  {
-    title: "",
-    variant: "white-rounded",
-    buttonWidth: "max",
-    chevronIcon: "chevron-down",
-    rotateIcon: false,
-    iconSize: "xs",
-    size: "small",
-    disabled: false,
-    active: false,
-    hasIcon: true,
-    iconLeft: undefined,
-    iconLeftClass: undefined,
-    iconRightClass: undefined,
-  },
-);
-
-const variants = {
-  "blue-rounded": "bg-primary hover:bg-primary-dark",
-  "white-rounded":
-    "bg-neutral hover:border-neutral-subtle border border-neutral-soft",
-  blank: "bg-transparent hover:bg-neutral-faint",
-  "blue-blank": "bg-transparent hover:bg-neutral-faint",
-  "transparent-rounded":
-    "bg-transparent border border-neutral-soft hover:border-neutral-subtle",
-};
-
-const textColors = {
-  "blue-rounded": "text-neutral",
-  "white-rounded": "text-neutral-emphasis hover:text-neutral-primary",
-  blank: "text-neutral-emphasis hover:text-neutral-primary",
-  "blue-blank": "text-primary hover:text-primary-dark",
-  "transparent-rounded": "text-neutral-emphasis",
-};
-
-const variantClasses = computed(() => {
-  if (props.disabled) {
-    if (props.variant === "blank") {
-      return "border border-transparent";
-    }
-    return "bg-neutral border border-neutral-soft";
-  }
-  if (props.active) {
-    if (variants[props.variant as keyof typeof variants].includes("border")) {
-      return "bg-primary hover:bg-primary-dark border border-primary hover:border-primary-dark";
-    }
-    return "bg-primary hover:bg-primary-dark";
-  }
-  return variants[props.variant as keyof typeof variants];
-});
-
-const textColorClass = computed(() => {
-  if (props.disabled) {
-    return "text-neutral-soft";
-  }
-  if (props.active) {
-    return "text-neutral";
-  }
-  return textColors[props.variant as keyof typeof textColors];
-});
-
-const onClick = () => {
-  if (!props.disabled) {
-    emit("click");
-  }
-};
-</script>

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

@@ -1,31 +0,0 @@
-# @dpa-shared-components/UiIconButton
-
-## Usage
-
-Color is set by text color:
-
-```html
-<!-- SomeComponent.vue using UiIconButton -->
-<template>
-  <UiIconButtonIcon iconName="alert"></UiIconButtonIcon>
-</template>
-
-<script>
-  import { UiIconButton } from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name              | Type                                                 | Default  | Description                                                                           |
-|-------------------|------------------------------------------------------|----------|---------------------------------------------------------------------------------------|
-| `iconName`        | `UiIconName`                                         | required | Sets the `name`, which determines which svg is used as icon.                          |
-| `size`            | `"small" &#124; "medium" &#124; "large" &#124; "xl"` | `large`  | Sets the `size` attribute of the iconButton.                                          |
-| `backgroundColor` | `"blue" &#124; "none" "gray-hover"`                  | `blue`   | Sets the `color` of the button background including hover, active and disable states. |
-| `iconColor`       | `"blue" &#124; "white" &#124; "gray`                 | `white`  | Sets the `color` of the button icon including hover, active and disable states.       |
-| `disabled`        | `boolean`                                            | `false`  | Disables the button.                                                                  |
-| `title`           | `string`                                             | `""`     | Sets the aria label of the button.                                                    |
-
-### Slots

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

@@ -1,78 +0,0 @@
-import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiIconButton from "./UiIconButton.vue";
-
-function createWrapper(
-  options: ComponentMountingOptions<typeof UiIconButton> = {},
-) {
-  return mount(UiIconButton, {
-    ...options,
-  });
-}
-
-describe("UiIconButton", () => {
-  test("should have no background when color none is taken  ", () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-        backgroundColor: "none",
-        iconColor: "gray",
-      },
-    });
-
-    expect(wrapper.classes("bg-primary")).toBe(false);
-  });
-
-  test("should render small sized button by default", () => {
-    const wrapper = createWrapper({
-      props: {
-        iconName: "alert",
-        size: "medium",
-        title: "Foo",
-        backgroundColor: "none",
-        iconColor: "gray",
-      },
-    });
-    expect(wrapper.classes("h-8")).toBe(true);
-    expect(wrapper.classes("w-8")).toBe(true);
-  });
-
-  test("should emit a click event when clicked", async () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-      },
-    });
-
-    await wrapper.trigger("click");
-
-    expect(wrapper.emitted().click).toBeTruthy();
-  });
-
-  test("should not emit click event when disabled", async () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-        disabled: true,
-      },
-    });
-
-    await wrapper.trigger("click");
-    expect(wrapper.emitted().click).toBeFalsy();
-  });
-
-  test("should have no hover effect when disabled", async () => {
-    const wrapper = createWrapper({
-      props: {
-        title: "Title",
-        iconName: "alert",
-        disabled: true,
-      },
-    });
-    expect(wrapper.classes("disabled:hover:bg-none")).toBe(true);
-  });
-});

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

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
-
-import { icons } from "../UiIcon/icons.ts";
-
-import UiIconButton from "./UiIconButton.vue";
-
-const meta = {
-  tags: ["deprecated"],
-  title: "Ui/UiIconButton",
-  component: UiIconButton,
-  argTypes: {
-    title: {
-      control: "text",
-    },
-    iconName: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium", "large", "xl"],
-    },
-    backgroundColor: {
-      control: "select",
-      options: ["blue", "gray-hover", "none"],
-    },
-    iconColor: {
-      control: "select",
-      options: ["blue", "white", "gray"],
-    },
-  },
-  args: {
-    title: "Title",
-    iconName: "alert",
-    size: "large",
-    backgroundColor: "blue",
-    iconColor: "white",
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiIconButton },
-    template: "<UiIconButton v-bind='args' @click='action'></UiIconButton>",
-    methods: { action: action("click") },
-  }),
-} satisfies Meta<typeof UiIconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Menu: Story = {
-  args: {
-    backgroundColor: "none",
-    iconColor: "gray",
-    iconName: "more-horizontal",
-    size: "large",
-  },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-};

package/dist/src/components/UiIconButton/UiIconButton.vue

@@ -1,112 +0,0 @@
-<template>
-  <button
-    :disabled="disabled"
-    :aria-label="title"
-    class="group flex flex-none items-center justify-center rounded-full focus:outline-hidden focus-visible:focus-outline"
-    :class="[colorClass, backgroundClass, buttonSizeClass]"
-    type="button"
-    @click="($event) => emit('click', $event)"
-  >
-    <UiIcon
-      class="flex items-center justify-center"
-      :name="iconName"
-      :size="iconSize"
-    />
-  </button>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated Use `UiButton` instead
- */
-export default {
-  name: "UiIconButton",
-};
-</script>
-
-<script lang="ts" setup>
-import { computed, onMounted } from "vue";
-
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-const emit = defineEmits<{
-  click: [MouseEvent];
-}>();
-
-const props = withDefaults(
-  defineProps<{
-    iconName: UiIconName;
-    title: string;
-    disabled?: boolean;
-    backgroundColor?: "blue" | "none" | "gray-hover";
-    iconColor?: "blue" | "gray" | "white";
-    size?: "small" | "medium" | "large" | "xl";
-  }>(),
-  {
-    disabled: false,
-    backgroundColor: "blue",
-    iconColor: "white",
-    size: "small",
-  },
-);
-
-const backgroundColorVariants = {
-  blue: "hover:bg-primary-dark active:bg-primary-dark bg-primary disabled:bg-neutral-faint disabled:hover:bg-none",
-  none: "hover:bg-neutral-whisper active:bg-primary disabled:hover:bg-transparent",
-  "gray-hover": "hover:bg-neutral-faint disabled:hover:bg-none",
-};
-
-const iconColorVariants = {
-  blue: "text-primary hover:text-primary-dark disabled:text-neutral-soft active:text-neutral",
-  gray: "text-neutral-emphasis hover:text-neutral-primary active:text-neutral-primary disabled:text-neutral-soft",
-  white: "text-neutral disabled:text-neutral-soft",
-};
-
-const sizeVariants = {
-  small: {
-    iconSize: "small",
-    buttonSize: "h-6 w-6",
-  },
-  medium: {
-    iconSize: "large",
-    buttonSize: "h-8 w-8",
-  },
-  large: {
-    iconSize: "large",
-    buttonSize: "h-12 w-12",
-  },
-  xl: {
-    iconSize: "large",
-    buttonSize: "h-16 w-16",
-  },
-};
-
-const backgroundClass = computed(() => {
-  return backgroundColorVariants[
-    props.backgroundColor as keyof typeof backgroundColorVariants
-  ];
-});
-
-const colorClass = computed(() => {
-  return iconColorVariants[props.iconColor as keyof typeof iconColorVariants];
-});
-
-const buttonSizeClass = computed(() => {
-  return sizeVariants[props.size as keyof typeof sizeVariants].buttonSize;
-});
-
-const iconSize = computed(() => {
-  return sizeVariants[props.size as keyof typeof sizeVariants].iconSize as
-    | "lg"
-    | "sm";
-});
-
-onMounted(() => {
-  if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Component is deprecated. It will be removed in a future update.",
-    );
-  }
-});
-</script>

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

@@ -1,31 +0,0 @@
-# @dpa-shared-components/UiList
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiList -->
-<template>
-    <UiList>
-        <UiListItem>Item 1</UiListItem>
-        <UiListItem>Item 2</UiListItem>
-        <UiListItem>Item 3</UiListItem>
-    </UiList>
-</template>
-
-<script setup lang="ts">
-    import {UiList, UiListItem} from "@dpa-id-components/dpa-shared-components";
-</script>
-
-```
-
-## API
-
-### Props
-
-This component has no properties.
-
-### Slots
-
-| Name      | Description                                                      |
-|-----------|------------------------------------------------------------------|
-| `default` | Slot for the rendering the list's content (probably UiListItems) |

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

@@ -1,23 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-import UiList from "./UiList.vue";
-
-describe("UiList", () => {
-  test("renders with slot content", () => {
-    const wrapper = mount(UiList, {
-      slots: {
-        default: UiListItem,
-      },
-    });
-    expect(wrapper.classes("border")).toBe(true);
-    expect(wrapper.classes("text-base/6")).toBe(true);
-    expect(wrapper.classes("focus:outline-hidden")).toBe(true);
-    expect(wrapper.classes("sm:text-sm/5")).toBe(true);
-
-    const listItem = wrapper.findComponent(UiListItem);
-    expect(listItem.exists()).toBe(true);
-  });
-});

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

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-import UiList from "./UiList.vue";
-
-const meta = {
-  tags: ["deprecated"],
-  title: "Ui/UiList",
-  component: UiList,
-  subcomponents: { UiListItem },
-  parameters: {
-    backgrounds: { default: "white" },
-  },
-} satisfies Meta<typeof UiList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiList, UiListItem },
-    template:
-      "<UiList v-bind='args'>" +
-      "<UiListItem>Test 1</UiListItem>" +
-      "<UiListItem>Test 2</UiListItem>" +
-      "<UiListItem>Test 3</UiListItem>" +
-      "<UiListItem>Test 4</UiListItem>" +
-      "</UiList>",
-  }),
-};
-
-export const WithCheckboxes: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiList, UiListItem },
-    template:
-      "<UiList v-bind='args'>" +
-      "<UiListItem checkBoxMenu>Test 1</UiListItem>" +
-      "<UiListItem checkBoxMenu>Test 2</UiListItem>" +
-      "<UiListItem checkBoxMenu>Test 3</UiListItem>" +
-      "<UiListItem checkBoxMenu>Test 4</UiListItem>" +
-      "</UiList>",
-  }),
-};
-
-export const WithCheckmark: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiList, UiListItem },
-    template:
-      "<UiList v-bind='args'>" +
-      "<UiListItem selectable selected>Test 1</UiListItem>" +
-      "<UiListItem selectable selected>Test 2</UiListItem>" +
-      "<UiListItem selectable selected>Test 3</UiListItem>" +
-      "<UiListItem selectable selected>Test 4</UiListItem>" +
-      "</UiList>",
-  }),
-};

package/dist/src/components/UiList/UiList.vue

@@ -1,29 +0,0 @@
-<template>
-  <ul
-    class="rounded-sm border text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
-  >
-    <slot />
-  </ul>
-</template>
-
-<script lang="ts">
-import { onMounted } from "vue";
-
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiList",
-  setup() {
-    onMounted(() => {
-      if (window.location.origin.includes("local")) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          "Component is deprecated. It will be removed in a future update.",
-        );
-      }
-    });
-  },
-};
-</script>