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

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

@@ -1,49 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSection from "./UiSection.vue";
-
-describe("UiSection", () => {
-  const wrapper = mount(UiSection, {
-    slots: {
-      default: "Slot text",
-    },
-  });
-
-  test("renders with slot content", () => {
-    const inner = wrapper.find('[data-testid="inner"]');
-
-    expect(inner.text()).toBe("Slot text");
-  });
-
-  test("renders with border classes", async () => {
-    await wrapper.setProps({
-      borderTop: true,
-      borderBottom: true,
-    });
-    expect(wrapper.classes("border-t")).toBe(true);
-    expect(wrapper.classes("border-b")).toBe(true);
-  });
-
-  test("renders with padding classes", async () => {
-    await wrapper.setProps({
-      verticalPadding: "small",
-    });
-    const inner = wrapper.find('[data-testid="inner"]');
-
-    expect(inner.classes("lg:py-12")).toBe(true);
-    expect(inner.classes("pt-8")).toBe(true);
-    expect(inner.classes("pb-12")).toBe(true);
-  });
-
-  test("renders with size classes", async () => {
-    await wrapper.setProps({
-      size: "small",
-    });
-    const inner = wrapper.find('[data-testid="inner"]');
-
-    expect(inner.classes("w-full")).toBe(true);
-    expect(inner.classes("lg:mx-auto")).toBe(true);
-    expect(inner.classes("lg:w-2/3")).toBe(true);
-  });
-});

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiSection from "./UiSection.vue";
-
-const meta = {
-  title: "Ui/UiSection",
-  component: UiSection,
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["wide", "small"],
-    },
-    verticalPadding: {
-      control: "select",
-      options: ["small", "large", "none"],
-    },
-    borderTop: {
-      control: "boolean",
-    },
-    borderBottom: {
-      control: "boolean",
-    },
-  },
-  args: {
-    size: "small",
-    verticalPadding: "large",
-    borderTop: false,
-    borderBottom: false,
-  },
-  parameters: {
-    backgrounds: { default: "gray-100" },
-  },
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiSection>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSection },
-    template: "<UiSection v-bind='args'>Slot</UiSection>",
-  }),
-};
-
-export const Multiple: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSection },
-    template:
-      "<UiSection v-bind='args'>Slot1</UiSection>" +
-      "<UiSection v-bind='args'>Slot2</UiSection>" +
-      "<UiSection v-bind='args'>Slot3</UiSection>" +
-      "<UiSection v-bind='args'>Slot4</UiSection>",
-  }),
-};

package/dist/src/components/UiSection/UiSection.vue

@@ -1,63 +0,0 @@
-<template>
-  <section :class="borderClass" class="w-full border-neutral-pale bg-neutral">
-    <div
-      :class="[sizeClasses[size], paddingClasses[verticalPadding]]"
-      data-testid="inner"
-    >
-      <slot></slot>
-    </div>
-  </section>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiSection",
-};
-</script>
-<script setup lang="ts">
-import { computed, onMounted } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    size?: "wide" | "small";
-    verticalPadding?: "small" | "large" | "none";
-    borderTop?: boolean;
-    borderBottom?: boolean;
-  }>(),
-  {
-    size: "wide",
-    verticalPadding: "large",
-    borderTop: false,
-    borderBottom: false,
-  },
-);
-
-const sizeClasses: Record<string, string> = {
-  wide: "w-full  md:px-28 text-neutral-primary lg:flex",
-  small: "w-full lg:mx-auto lg:w-2/3",
-};
-
-const paddingClasses: Record<string, string> = {
-  small: "lg:py-12 pt-8 pb-12",
-  large: "py-24",
-  none: "py-0",
-};
-
-const borderClass = computed(() => {
-  const borderTopClass = props.borderTop ? "border-t" : "";
-  const borderBottomClass = props.borderBottom ? "border-b" : "";
-  return `${borderTopClass} ${borderBottomClass}`;
-});
-
-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/UiSectionDivider/README.md

@@ -1,29 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiSectionDivider
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSectionDivider -->
-<template>
-    <UiSectionDivider></UiSectionDivider>
-</template>
-
-<script>
-    import {UiSectionDivider} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name            | Type                     | Default   | Description            |
-|-----------------|--------------------------|-----------|------------------------|
-| `size`          | `"large" &#124; "small"` | `"large"` | Determines the height. |
-| `customClasses` | `String`                 | `""`      | Custom class string.   |
-
-### Slots
-
-This component has no slot

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

@@ -1,19 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiSectionDivider from "./UiSectionDivider.vue";
-
-describe("UiSectionDivider", () => {
-  const wrapper = mount(UiSectionDivider);
-
-  test("renders default size class", () => {
-    expect(wrapper.classes("h-4")).toBe(true);
-  });
-
-  test("renders small size class", async () => {
-    await wrapper.setProps({
-      size: "small",
-    });
-    expect(wrapper.classes("h-px")).toBe(true);
-  });
-});

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

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiSection from "../UiSection/UiSection.vue";
-
-import UiSectionDivider from "./UiSectionDivider.vue";
-
-const meta = {
-  title: "Ui/UiSectionDivider",
-  component: UiSectionDivider,
-  subcomponents: { UiSection },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["large", "small"],
-    },
-  },
-  args: {
-    size: "large",
-  },
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiSectionDivider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSectionDivider },
-    template: "<UiSectionDivider v-bind='args'>Slot</UiSectionDivider>",
-  }),
-};
-
-export const WithSection: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiSectionDivider, UiSection },
-    template:
-      "<UiSection>Section 1</UiSection>" +
-      "<UiSectionDivider v-bind='args'></UiSectionDivider>" +
-      "<UiSection>Section 2</UiSection>" +
-      "<UiSectionDivider v-bind='args'>Slot4</UiSectionDivider>" +
-      "<UiSection>Section 3</UiSection>",
-  }),
-};

package/dist/src/components/UiSectionDivider/UiSectionDivider.vue

@@ -1,44 +0,0 @@
-<template>
-  <div :class="[sizeClass, customClasses]" class="bg-neutral-whisper" />
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiSectionDivider",
-};
-</script>
-<script lang="ts" setup>
-import { computed, onMounted } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    size?: "small" | "large";
-    customClasses?: string[] | string;
-  }>(),
-  {
-    customClasses: "",
-    size: "large",
-  },
-);
-
-const sizeClasses: Record<string, string> = {
-  small: "h-px",
-  large: "h-4",
-};
-
-const sizeClass = computed(() => {
-  return sizeClasses[props.size];
-});
-
-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/UiTextButton/README.md

@@ -1,41 +0,0 @@
-# @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

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

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

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import { icons } from "../UiIcon/icons.ts";
-
-import UiTextButton from "./UiTextButton.vue";
-
-const meta = {
-  tags: ["deprecated"],
-  title: "Ui/UiTextButton",
-  component: UiTextButton,
-  argTypes: {
-    color: {
-      control: "select",
-      options: ["blue", "gray"],
-    },
-    href: { control: "text" },
-    linkTarget: { control: "text" },
-    iconLeft: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    iconRight: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    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>",
-  }),
-};

package/dist/src/components/UiTextButton/UiTextButton.vue

@@ -1,173 +0,0 @@
-<template>
-  <component
-    :is="tagName"
-    :href="href"
-    :class="classNames"
-    class="inline-flex items-center"
-    :target="target"
-  >
-    <UiIcon
-      v-if="iconLeft"
-      :class="iconLeftMarginClass"
-      :name="iconLeft"
-      :size="iconSize"
-    />
-    <slot />
-    <UiIcon
-      v-if="iconRight"
-      :class="iconRightMarginClass"
-      :name="iconRight"
-      :size="iconSize"
-    />
-  </component>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiTextButton",
-  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>
-<script setup lang="ts">
-import { computed, onMounted } from "vue";
-
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
-
-const props = withDefaults(
-  defineProps<{
-    color?: "blue" | "gray";
-    href?: string;
-    iconLeft?: UiIconName;
-    iconRight?: UiIconName;
-    placement?: "onsurface" | "oncanvas";
-    size?: "xsmall" | "small" | "medium";
-    weight?: "regular" | "semibold";
-    linkTarget?: string;
-  }>(),
-  {
-    color: "blue",
-    href: undefined,
-    iconLeft: undefined,
-    iconRight: undefined,
-    placement: "onsurface",
-    size: "medium",
-    weight: "regular",
-    linkTarget: "_self",
-  },
-);
-
-const tagName = computed((): string => {
-  if (props.href?.length) {
-    return "a";
-  }
-
-  return "button";
-});
-
-const target = computed((): string => {
-  if (props.href?.length) {
-    return props.linkTarget;
-  }
-  return "";
-});
-
-const weightClassName = computed((): string => {
-  let fontClass, hoverClass;
-
-  if (props.weight === "regular") {
-    fontClass = "font-normal";
-    hoverClass = "hover:underline";
-  }
-
-  if (props.weight === "semibold") {
-    fontClass = "font-semibold rounded-lg";
-
-    if (props.placement === "onsurface") {
-      hoverClass = "hover:bg-neutral-whisper";
-    } else if (props.placement === "oncanvas") {
-      hoverClass = "hover:bg-neutral-pale";
-    }
-  }
-
-  return `${fontClass} ${hoverClass}`;
-});
-
-const paddingClass = computed((): string => {
-  if (props.weight === "semibold") {
-    if (props.size === "medium") {
-      return "px-2 -mx-2";
-    } else if (props.size === "small" || props.size === "xsmall") {
-      return "px-1 -mx-1";
-    }
-  }
-  return "";
-});
-
-const textClassName = computed((): string => {
-  if (props.size === "xsmall") {
-    return "text-xs";
-  } else if (props.size === "small") {
-    return "text-sm";
-  } else {
-    return "text-base";
-  }
-});
-
-const colorClass = computed((): string => {
-  if (props.color === "blue") {
-    return "text-primary";
-  } else if (props.color === "gray") {
-    if (props.placement === "onsurface") {
-      return "text-neutral-subtle";
-    } else if (props.placement === "oncanvas") {
-      return "text-neutral-emphasis";
-    }
-  }
-  return "";
-});
-
-const iconSize = computed((): "sm" | "md" => {
-  if (props.size === "xsmall") {
-    return "sm";
-  } else {
-    return "md";
-  }
-});
-
-const iconLeftMarginClass = computed((): string => {
-  if (props.size === "xsmall") {
-    return "mr-1";
-  } else {
-    return "mr-2";
-  }
-});
-
-const iconRightMarginClass = computed((): string => {
-  if (props.size === "xsmall") {
-    return "ml-1";
-  } else {
-    return "ml-2";
-  }
-});
-
-const classNames = computed((): string[] => {
-  return [
-    paddingClass.value,
-    textClassName.value,
-    weightClassName.value,
-    colorClass.value,
-  ];
-});
-</script>