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

package/src/components/UiRadioInputGroup/README.md

@@ -1,51 +0,0 @@
-# @deprecated
-Component will be removed in a future update
-# @dpa-id-components/UiRadioInputGroup
-
-## Usage
-
-```html
-<template>
-  <UiRadioInput
-    :options="options"
-    group-name="someName"
-    v-model="selectedOption"
-  />
-</template>
-
-<script lang="ts" setup>
-  import { UiRadioInputGroup } from "@dpa-id-components/dpa-shared-components";
-
-  const selectedOption = ref("first option");
-  const options = computed(() => {
-    return [
-      {
-        value: "first option",
-        label: "First option",
-        selected: selectedOption.value === "first option",
-      },
-      {
-        value: "second option",
-        label: "Second option",
-        selected: selectedOption.value === "second option",
-      },
-    ];
-  });
-</script>
-```
-
-### Props
-
-| Name         | Type                   | Default  | Description                                                      |
-| ------------ | ---------------------- | -------- | ---------------------------------------------------------------- |
-| `options`    | `Array`                | --       | Array with RadioMenu specific content                            |
-| `groupName`  | `String`               | --       | common name for Radio Input Group                                |
-| `size`       | `String`               | `medium` | Sets the `size` attribute of the Radio Inputs                    |
-| `color`      | `"blue" &#124; "gray"` | `blue`   | Sets the `color` and `background` attributes of the Radio Inputs |
-| `disabled`   | `Boolean`              | `false`  | Whether the `Radio Input Group` is disabled                      |
-| `labelClass` | `string`               | ``       | Custom class for the Radio Label                                 |
-| `class`      | `string`               | ``       | Custom class for Wrapper                                         |
-
-### Events
-
-The component uses `v-model` to determine the current selected option, therefor it emits the `update:modelValue` event but it doesn't need to be specified as you should use v-model when used as you can see in the example

package/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -1,76 +0,0 @@
-<template>
-  <ul
-    :class="[
-      cn(
-        'flex gap-4',
-        {
-          'flex-col': direction === 'vertical',
-        },
-        $attrs.class,
-      ),
-    ]"
-  >
-    <li v-for="option in options" :key="option.value">
-      <UiRadioButton
-        v-model="model"
-        :appearance
-        :disabled
-        :size
-        :name="groupName"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </UiRadioButton>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
-/**
- * @deprecated
- * Please replace with your own component
- */
-export default {
-  name: "UiRadioInputGroup",
-};
-</script>
-
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-import UiRadioButton from "../UiRadioButton/UiRadioButton.vue";
-
-export interface UiRadioInputGroupOption {
-  value: string;
-  label: string;
-  /** @deprecated has no effect */
-  selected?: boolean;
-}
-
-const {
-  options,
-  direction = "horizontal",
-  appearance = "primary",
-  size = "md",
-  disabled = false,
-} = defineProps<{
-  options: UiRadioInputGroupOption[];
-  groupName: string;
-  disabled?: boolean;
-  direction?: "horizontal" | "vertical";
-  appearance?: "primary" | "secondary";
-  size?: "sm" | "md";
-}>();
-
-const model = defineModel<string>();
-
-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/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/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/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/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/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/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>