@dpa-id-components/dpa-shared-components 22.0.0-next.13 → 22.0.0-next.14

package/dist/src/components/UiOverlay/UiOverlay.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="fixed inset-0 z-50 max-h-screen" role="dialog">
-    <div
-      class="fixed inset-0 h-screen bg-black opacity-60"
-      data-testid="background"
-      style="z-index: -1"
-      @click="emit('close')"
-    />
-    <slot />
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiOverlay",
-};
-</script>
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-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/UiOverlayMenu/README.md

@@ -1,40 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiOverlayMenu
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiOverlay -->
-<template>
-    <UiOverlayMenu :is-open="true">
-        <div class='grid place-items-center'>
-            <span class='text-neutral'>Here is Content</span>
-        </div>
-    </UiOverlayMenu>
-</template>
-
-<script setup lang="ts">
-    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name     | Type      | Default | Description                                |
-|----------|-----------|---------|--------------------------------------------|
-| `isOpen` | `boolean` | `false` | controls if Overlay Menu is open or closed |
-
-### Events
-
-| Name    | Type         | Description                                       |
-|---------|--------------|---------------------------------------------------|
-| `close` | none | Emitted when the clicked outside the Overlay Menu |
-
-### Slots
-
-| Name      | Description                                       |
-|-----------|---------------------------------------------------|
-| `default` | slot for the rendering the overlay menu's content |

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

@@ -1,33 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
-import UiButton from "../UiButton/UiButton.vue";
-
-import UiOverlayMenu from "./UiOverlayMenu.vue";
-
-document.body.innerHTML = `
-    <div id="app"></div>
-`;
-describe("UiOverlayMenu", () => {
-  const overlayWrapper = mount(UiOverlayMenu, {
-    attachTo: document.getElementById("app") || "#app",
-    props: {
-      isOpen: true,
-    },
-    global: {
-      directives: {
-        clickAway: vClickAway,
-      },
-    },
-  });
-
-  const buttonWrapper = mount(UiButton, {
-    attachTo: document.getElementById("app") || "#app",
-  });
-
-  test("emits correct event when clicked outside of slot content", async () => {
-    await buttonWrapper.trigger("mousedown");
-    expect(overlayWrapper.emitted().close).toBeTruthy();
-  });
-});

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiList from "../UiList/UiList.vue";
-import UiListItem from "../UiListItem/UiListItem.vue";
-
-import UiOverlayMenu from "./UiOverlayMenu.vue";
-
-const meta = {
-  title: "Ui/UiOverlayMenu",
-  component: UiOverlayMenu,
-  subcomponents: { UiList, UiListItem },
-  argTypes: {
-    isOpen: {
-      control: "boolean",
-    },
-  },
-  args: {
-    isOpen: true,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiOverlayMenu, UiList, UiListItem },
-    template:
-      "<UiOverlayMenu v-bind='args'>" +
-      "<UiList>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "<UiListItem checkBoxMenu='true'>Test</UiListItem>" +
-      "</UiList>" +
-      "</UiOverlayMenu>",
-  }),
-  tags: ["deprecated"],
-} satisfies Meta<typeof UiOverlayMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -1,51 +0,0 @@
-<template>
-  <div
-    v-show="isOpen"
-    v-click-away="close"
-    class="relative size-full border-none"
-  >
-    <div
-      class="absolute top-12 right-3 z-10 block border-t bg-neutral px-4 py-3 shadow-lg"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiOverlayMenu",
-};
-</script>
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-import { vClickAway } from "../../directives/vClickAway.ts";
-
-withDefaults(
-  defineProps<{
-    isOpen?: boolean;
-  }>(),
-  {
-    isOpen: false,
-  },
-);
-const emit = defineEmits<{
-  close: [];
-}>();
-const close = (): void => {
-  emit("close");
-};
-
-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/UiSection/README.md

@@ -1,33 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-shared-components/UiSection
-
-## Usage
-
-```html
-<!-- SomeComponent.vue using UiSection -->
-<template>
-    <UiSection size="small" vertical-padding="small" border-top border-bottom>Section Content</UiSection>
-</template>
-
-<script>
-    import {UiSection} from "@dpa-id-components/dpa-shared-components";
-</script>
-```
-
-## API
-
-### Props
-
-| Name              | Type                                   | Default   | Description                                   |
-|-------------------|----------------------------------------|-----------|-----------------------------------------------|
-| `size`            | `"wide" &#124; "small"`                | `"wide"`  | Determines the spread of the section content. |
-| `verticalPadding` | `"small" &#124; "large" &#124; "none"` | `"large"` | Determines the padding of the section.        |
-| `borderTop`       | `Boolean`                              | `false`   | Displays a top border on the section.         |
-| `BorderBottom`    | `Boolean`                              | `false`   | Displays a bottom border on the section.      |
-
-### Slots
-
-| Name      | Description                                  |
-|-----------|----------------------------------------------|
-| `default` | slot for the rendering the section's content |

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>