lau-ecom-design-system 1.0.19 → 1.0.21

package/src/components/LauEcomButton/LauEcomButton.vue

@@ -1,137 +1,137 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
-import { LauEcomButtonType } from "./types";
-import { LauEcomSize } from "../../enums";
-
-const props = withDefaults(
-  defineProps<{
-    type?: LauEcomButtonType;
-    size?: LauEcomSize;
-    isDisabled?: boolean;
-    hasArrow?: boolean;
-  }>(),
-  {
-    text: "Button Text",
-    type: LauEcomButtonType.Primary,
-    size: LauEcomSize.lg,
-    isDisabled: false,
-    hasArrow: false,
-  },
-);
-
-const emit = defineEmits(["onClick"]);
-
-const lauEcomButtonClasses = computed(() => {
-  return {
-    "lau-ecom-button lau-ecom-button--upc upc-font-button-16px": true,
-    "lau-ecom-button--secondary": props.type === LauEcomButtonType.Secondary,
-    "lau-ecom-button--secondary-upc":
-      props.type === LauEcomButtonType.Secondary,
-    "lau-ecom-button--secondary-upc-disabled":
-      props.type === LauEcomButtonType.Secondary && props.isDisabled,
-    "lau-ecom-button--large": props.size === LauEcomSize.lg,
-    "lau-ecom-button--medium": props.size === LauEcomSize.md,
-    "lau-ecom-button--disabled":
-      props.type === LauEcomButtonType.Primary && props.isDisabled,
-  };
-});
-
-const iconClasses = computed(() => {
-  return [
-    `lau-ecom-icon-button${props.type === LauEcomButtonType.Secondary ? "-secondary" : ""}`,
-  ];
-});
-
-const handleClick = () => {
-  emit("onClick");
-};
-</script>
-
-<template>
-  <button
-    :class="lauEcomButtonClasses"
-    :disabled="isDisabled"
-    @click="handleClick"
-  >
-    <LauEcomUpcIconNavArrow v-if="hasArrow" :class="iconClasses" />
-    <slot></slot>
-  </button>
-</template>
-
-<style scoped>
-.lau-ecom-button {
-  @apply dsEcom-text-neutral-10 
-    dsEcom-flex 
-    dsEcom-items-center 
-    dsEcom-justify-center 
-    dsEcom-gap-2
-    dsEcom-rounded-core-border-radius-32px
-    dsEcom-border-[1px]
-    dsEcom-text-center
-    dsEcom-py-[14px]
-    dsEcom-px-[16px];
-}
-
-.lau-ecom-button--upc {
-  @apply dsEcom-bg-primary-60
-    dsEcom-border-primary-60
-    hover:dsEcom-bg-primary-70
-    hover:dsEcom-border-primary-70
-    active:dsEcom-bg-primary-80
-    active:dsEcom-border-primary-80;
-}
-
-.lau-ecom-button--large {
-  @apply dsEcom-w-auto 
-    dsEcom-h-[48px];
-}
-
-.lau-ecom-button--medium {
-  @apply dsEcom-w-auto 
-    dsEcom-h-[44px];
-}
-
-.lau-ecom-button--disabled {
-  @apply dsEcom-border-neutral-70
-    dsEcom-bg-neutral-70 
-    hover:dsEcom-bg-neutral-70
-    hover:dsEcom-border-neutral-70
-    active:dsEcom-bg-neutral-70
-    active:dsEcom-border-neutral-70;
-}
-
-.lau-ecom-button--secondary {
-  @apply dsEcom-bg-neutral-10
-    hover:dsEcom-bg-neutral-10
-    active:dsEcom-bg-neutral-10;
-}
-
-.lau-ecom-button--secondary-upc {
-  @apply dsEcom-border-primary-60
-    dsEcom-text-primary-60
-    hover:dsEcom-text-primary-70
-    hover:dsEcom-border-primary-70
-    active:dsEcom-text-primary-80
-    active:dsEcom-border-primary-80;
-}
-
-.lau-ecom-button--secondary-upc-disabled {
-  @apply dsEcom-border-neutral-70
-    dsEcom-text-neutral-70
-    hover:dsEcom-border-neutral-70
-    hover:dsEcom-text-neutral-70
-    active:dsEcom-border-neutral-70
-    active:dsEcom-text-neutral-70;
-}
-
-.lau-ecom-icon-button {
-  @apply dsEcom-fill-neutral-10;
-}
-
-.lau-ecom-icon-button-secondary {
-  @apply dsEcom-fill-primary-60
-  hover:dsEcom-fill-primary-70
-  active:dsEcom-fill-primary-80;
-}
-</style>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
+import { LauEcomButtonType } from "./types";
+import { LauEcomSize } from "../../enums";
+
+const props = withDefaults(
+  defineProps<{
+    type?: LauEcomButtonType;
+    size?: LauEcomSize;
+    isDisabled?: boolean;
+    hasArrow?: boolean;
+  }>(),
+  {
+    text: "Button Text",
+    type: LauEcomButtonType.Primary,
+    size: LauEcomSize.lg,
+    isDisabled: false,
+    hasArrow: false,
+  },
+);
+
+const emit = defineEmits(["onClick"]);
+
+const lauEcomButtonClasses = computed(() => {
+  return {
+    "lau-ecom-button lau-ecom-button--upc upc-font-button-16px": true,
+    "lau-ecom-button--secondary": props.type === LauEcomButtonType.Secondary,
+    "lau-ecom-button--secondary-upc":
+      props.type === LauEcomButtonType.Secondary,
+    "lau-ecom-button--secondary-upc-disabled":
+      props.type === LauEcomButtonType.Secondary && props.isDisabled,
+    "lau-ecom-button--large": props.size === LauEcomSize.lg,
+    "lau-ecom-button--medium": props.size === LauEcomSize.md,
+    "lau-ecom-button--disabled":
+      props.type === LauEcomButtonType.Primary && props.isDisabled,
+  };
+});
+
+const iconClasses = computed(() => {
+  return [
+    `lau-ecom-icon-button${props.type === LauEcomButtonType.Secondary ? "-secondary" : ""}`,
+  ];
+});
+
+const handleClick = () => {
+  emit("onClick");
+};
+</script>
+
+<template>
+  <button
+    :class="lauEcomButtonClasses"
+    :disabled="isDisabled"
+    @click="handleClick"
+  >
+    <LauEcomUpcIconNavArrow v-if="hasArrow" :class="iconClasses" />
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+.lau-ecom-button {
+  @apply dsEcom-text-neutral-10 
+    dsEcom-flex 
+    dsEcom-items-center 
+    dsEcom-justify-center 
+    dsEcom-gap-2
+    dsEcom-rounded-core-border-radius-32px
+    dsEcom-border-[1px]
+    dsEcom-text-center
+    dsEcom-py-[14px]
+    dsEcom-px-[16px];
+}
+
+.lau-ecom-button--upc {
+  @apply dsEcom-bg-primary-60
+    dsEcom-border-primary-60
+    hover:dsEcom-bg-primary-70
+    hover:dsEcom-border-primary-70
+    active:dsEcom-bg-primary-80
+    active:dsEcom-border-primary-80;
+}
+
+.lau-ecom-button--large {
+  @apply dsEcom-w-auto 
+    dsEcom-h-[48px];
+}
+
+.lau-ecom-button--medium {
+  @apply dsEcom-w-auto 
+    dsEcom-h-[44px];
+}
+
+.lau-ecom-button--disabled {
+  @apply dsEcom-border-neutral-70
+    dsEcom-bg-neutral-70 
+    hover:dsEcom-bg-neutral-70
+    hover:dsEcom-border-neutral-70
+    active:dsEcom-bg-neutral-70
+    active:dsEcom-border-neutral-70;
+}
+
+.lau-ecom-button--secondary {
+  @apply dsEcom-bg-neutral-10
+    hover:dsEcom-bg-neutral-10
+    active:dsEcom-bg-neutral-10;
+}
+
+.lau-ecom-button--secondary-upc {
+  @apply dsEcom-border-primary-60
+    dsEcom-text-primary-60
+    hover:dsEcom-text-primary-70
+    hover:dsEcom-border-primary-70
+    active:dsEcom-text-primary-80
+    active:dsEcom-border-primary-80;
+}
+
+.lau-ecom-button--secondary-upc-disabled {
+  @apply dsEcom-border-neutral-70
+    dsEcom-text-neutral-70
+    hover:dsEcom-border-neutral-70
+    hover:dsEcom-text-neutral-70
+    active:dsEcom-border-neutral-70
+    active:dsEcom-text-neutral-70;
+}
+
+.lau-ecom-icon-button {
+  @apply dsEcom-fill-neutral-10;
+}
+
+.lau-ecom-icon-button-secondary {
+  @apply dsEcom-fill-primary-60
+  hover:dsEcom-fill-primary-70
+  active:dsEcom-fill-primary-80;
+}
+</style>

package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue

@@ -1,143 +1,143 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import { LauEcomUpcIconNavCheckmark } from "../LauEcomIcon";
-
-interface Props {
-  id?: string;
-  label?: string;
-  value?: string | number | boolean;
-  modelValue?: string | number | boolean | [];
-  isRequired?: boolean;
-  isDisabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "",
-  label: "text label",
-  value: "",
-  modelValue: () => false,
-  isRequired: false,
-  isDisabled: false,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string | number | boolean];
-}>();
-
-const isChecked = ref(
-  typeof props.modelValue === "boolean"
-    ? props.modelValue
-    : //@ts-ignore
-      props.modelValue.includes(props.value),
-);
-
-const handleChange = () => {
-  if (typeof props.modelValue !== "boolean") {
-    isChecked.value = !isChecked.value;
-    //@ts-ignore
-    const newValue = isChecked.value
-      ? [...props.modelValue, props.value]
-      : props.modelValue.filter((val) => val !== props.value);
-    emit("update:modelValue", newValue);
-  } else {
-    isChecked.value = !isChecked.value;
-    emit("update:modelValue", isChecked.value);
-  }
-};
-
-const lauEcomCheckboxClasses = computed(() => {
-  return {
-    "lau-ecom-checkbox dsEcom-peer lau-ecom-checkbox--upc": true,
-    "lau-ecom-checkbox--disabled": props.isDisabled,
-    "lau-ecom-checkbox--checked": !props.isDisabled,
-    "!dsEcom-border-upc-primary-60": props.isRequired && !props.isDisabled,
-  };
-});
-
-const textLabelClass = computed(() => {
-  if (props.isDisabled) return "!dsEcom-text-neutral-70";
-  return "";
-});
-</script>
-
-<template>
-  <div class="dsEcom-flex">
-    <label class="lau-ecom-label group upc-font-body-reg-05-14px">
-      <input
-        :class="lauEcomCheckboxClasses"
-        type="checkbox"
-        :required="isRequired"
-        :disabled="isDisabled"
-        :checked="isChecked"
-        @change="handleChange"
-      />
-      <LauEcomUpcIconNavCheckmark
-        class="icon-checkmark"
-        width="16"
-        height="16"
-      />
-      <span
-        v-if="!$slots.default"
-        class="upc-font-link-03-14px"
-        :class="textLabelClass"
-        >{{ label }}</span
-      >
-    </label>
-    <div :class="textLabelClass">
-      <slot :text="`upc-font-link-03-14px ${textLabelClass}`" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-checkbox {
-  @apply dsEcom-w-5
-    dsEcom-h-5
-    dsEcom-mr-2
-    dsEcom-rounded
-    dsEcom-appearance-none
-    dsEcom-border
-    dsEcom-border-neutral-90
-    dsEcom-transition
-    dsEcom-duration-200
-    after:dsEcom-absolute
-    after:dsEcom-left-0
-    after:dsEcom-top-0
-    after:dsEcom-h-full
-    after:dsEcom-w-full
-    focus:dsEcom-outline-none;
-}
-
-.lau-ecom-checkbox--upc {
-  @apply hover:dsEcom-border-primary-80
-    checked:dsEcom-bg-primary-60
-    checked:!dsEcom-border-primary-60;
-}
-
-.lau-ecom-checkbox--checked {
-  @apply dsEcom-cursor-pointer 
-    checked:!dsEcom-border-primary-60 
-    group-hover:dsEcom-border-primary-60;
-}
-
-.lau-ecom-checkbox--disabled {
-  @apply !dsEcom-border-neutral-60
-    checked:!dsEcom-border-neutral-60
-    checked:!dsEcom-bg-neutral-60;
-}
-
-.lau-ecom-label {
-  @apply dsEcom-flex 
-    dsEcom-items-center 
-    dsEcom-text-neutral-90 
-    dsEcom-relative;
-}
-
-.icon-checkmark {
-  @apply dsEcom-absolute
-    dsEcom-left-[2px]
-    dsEcom-hidden 
-    dsEcom-fill-white
-    peer-checked:!dsEcom-block;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { LauEcomUpcIconNavCheckmark } from "../LauEcomIcon";
+
+interface Props {
+  id?: string;
+  label?: string;
+  value?: string | number | boolean;
+  modelValue?: string | number | boolean | [];
+  isRequired?: boolean;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "",
+  label: "text label",
+  value: "",
+  modelValue: () => false,
+  isRequired: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string | number | boolean];
+}>();
+
+const isChecked = ref(
+  typeof props.modelValue === "boolean"
+    ? props.modelValue
+    : //@ts-ignore
+      props.modelValue.includes(props.value),
+);
+
+const handleChange = () => {
+  if (typeof props.modelValue !== "boolean") {
+    isChecked.value = !isChecked.value;
+    //@ts-ignore
+    const newValue = isChecked.value
+      ? [...props.modelValue, props.value]
+      : props.modelValue.filter((val) => val !== props.value);
+    emit("update:modelValue", newValue);
+  } else {
+    isChecked.value = !isChecked.value;
+    emit("update:modelValue", isChecked.value);
+  }
+};
+
+const lauEcomCheckboxClasses = computed(() => {
+  return {
+    "lau-ecom-checkbox dsEcom-peer lau-ecom-checkbox--upc": true,
+    "lau-ecom-checkbox--disabled": props.isDisabled,
+    "lau-ecom-checkbox--checked": !props.isDisabled,
+    "!dsEcom-border-upc-primary-60": props.isRequired && !props.isDisabled,
+  };
+});
+
+const textLabelClass = computed(() => {
+  if (props.isDisabled) return "!dsEcom-text-neutral-70";
+  return "";
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex">
+    <label class="lau-ecom-label group upc-font-body-reg-05-14px">
+      <input
+        :class="lauEcomCheckboxClasses"
+        type="checkbox"
+        :required="isRequired"
+        :disabled="isDisabled"
+        :checked="isChecked"
+        @change="handleChange"
+      />
+      <LauEcomUpcIconNavCheckmark
+        class="icon-checkmark"
+        width="16"
+        height="16"
+      />
+      <span
+        v-if="!$slots.default"
+        class="upc-font-link-03-14px"
+        :class="textLabelClass"
+        >{{ label }}</span
+      >
+    </label>
+    <div :class="textLabelClass">
+      <slot :text="`upc-font-link-03-14px ${textLabelClass}`" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-checkbox {
+  @apply dsEcom-w-5
+    dsEcom-h-5
+    dsEcom-mr-2
+    dsEcom-rounded
+    dsEcom-appearance-none
+    dsEcom-border
+    dsEcom-border-neutral-90
+    dsEcom-transition
+    dsEcom-duration-200
+    after:dsEcom-absolute
+    after:dsEcom-left-0
+    after:dsEcom-top-0
+    after:dsEcom-h-full
+    after:dsEcom-w-full
+    focus:dsEcom-outline-none;
+}
+
+.lau-ecom-checkbox--upc {
+  @apply hover:dsEcom-border-primary-80
+    checked:dsEcom-bg-primary-60
+    checked:!dsEcom-border-primary-60;
+}
+
+.lau-ecom-checkbox--checked {
+  @apply dsEcom-cursor-pointer 
+    checked:!dsEcom-border-primary-60 
+    group-hover:dsEcom-border-primary-60;
+}
+
+.lau-ecom-checkbox--disabled {
+  @apply !dsEcom-border-neutral-60
+    checked:!dsEcom-border-neutral-60
+    checked:!dsEcom-bg-neutral-60;
+}
+
+.lau-ecom-label {
+  @apply dsEcom-flex 
+    dsEcom-items-center 
+    dsEcom-text-neutral-90 
+    dsEcom-relative;
+}
+
+.icon-checkmark {
+  @apply dsEcom-absolute
+    dsEcom-left-[2px]
+    dsEcom-hidden 
+    dsEcom-fill-white
+    peer-checked:!dsEcom-block;
+}
+</style>