lau-ecom-design-system 1.0.19 → 1.0.20

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue

@@ -1,76 +1,80 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import LauEcomUpcIconNavArrow from "../LauEcomIcon/LauEcomUpcIconNavArrow.vue";
-import LauEcomSwitch from "../LauEcomSwitch/LauEcomSwitch.vue";
-import { CategoryCookie } from "./types";
-
-interface Props {
-  categoryCookie: CategoryCookie;
-}
-
-withDefaults(defineProps<Props>(), {
-  categoryCookie: () => {
-    return {
-      title: "Cookie",
-      description: "lorem ipsum dolor sit amet, consectetur",
-    };
-  },
-});
-
-const isOpen = ref(false);
-const isChecked = defineModel<boolean>();
-
-const emit = defineEmits(["onToggle"]);
-
-const handleClickAccordion = () => {
-  isOpen.value = !isOpen.value;
-};
-
-const handleToggle = () => {
-  emit("onToggle");
-};
-
-const iconClass = computed(() => {
-  return isOpen.value ? "dsEcom-rotate-0" : "dsEcom-rotate-180";
-});
-</script>
-
-<template>
-  <div class="dsEcom-mb-4">
-    <div class="lau-ecom-config-accordion-head">
-      <div
-        class="dsEcom-flex dsEcom-items-center dsEcom-gap-2"
-        @click="handleClickAccordion"
-      >
-        <span :class="iconClass"><LauEcomUpcIconNavArrow /></span>
-        <p class="upc-font-subtitle-03-20px">
-          {{ categoryCookie.title }}
-        </p>
-      </div>
-      <LauEcomSwitch
-        v-model="isChecked"
-        :isDisabled="categoryCookie.isDisabled"
-        @on-toggle="handleToggle"
-      />
-    </div>
-    <div v-show="isOpen" class="lau-ecom-config-accordion-content">
-      <p class="core-font-body-reg-05-14px">
-        {{ categoryCookie.description }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-config-accordion-head {
-  @apply dsEcom-flex
-    dsEcom-justify-between
-    dsEcom-pb-4
-    dsEcom-border-b-2;
-}
-
-.lau-ecom-config-accordion-content {
-  @apply dsEcom-py-2
-    dsEcom-px-8;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import LauEcomUpcIconNavArrow from "../LauEcomIcon/LauEcomUpcIconNavArrow.vue";
+import LauEcomSwitch from "../LauEcomSwitch/LauEcomSwitch.vue";
+import { CategoryCookie } from "./types";
+
+interface Props {
+  categoryCookie: CategoryCookie;
+}
+
+withDefaults(defineProps<Props>(), {
+  categoryCookie: () => {
+    return {
+      title: "Cookie",
+      description: "lorem ipsum dolor sit amet, consectetur",
+    };
+  },
+});
+
+const isOpen = ref(false);
+const isChecked = defineModel<boolean>();
+
+const emit = defineEmits<{
+  (e: "onToggle", value: boolean): void;
+}>();
+
+const handleClickAccordion = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const handleToggle = (value: boolean) => {
+  emit("onToggle", value);
+};
+
+const iconClass = computed(() => {
+  return isOpen.value ? "dsEcom-rotate-0" : "dsEcom-rotate-180";
+});
+</script>
+
+<template>
+  <div class="dsEcom-mb-4">
+    <div class="lau-ecom-config-accordion-head">
+      <div
+        class="dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+        @click="handleClickAccordion"
+      >
+        <span :class="iconClass"
+          ><LauEcomUpcIconNavArrow class="dsEcom-fill-neutral-100"
+        /></span>
+        <p class="upc-font-subtitle-03-20px">
+          {{ categoryCookie.title }}
+        </p>
+      </div>
+      <LauEcomSwitch
+        v-model="isChecked"
+        :isDisabled="categoryCookie.isDisabled"
+        @on-toggle="handleToggle"
+      />
+    </div>
+    <div v-show="isOpen" class="lau-ecom-config-accordion-content">
+      <p class="core-font-body-reg-05-14px">
+        {{ categoryCookie.description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-config-accordion-head {
+  @apply dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-pb-4
+    dsEcom-border-b-2;
+}
+
+.lau-ecom-config-accordion-content {
+  @apply dsEcom-py-2
+    dsEcom-px-8;
+}
+</style>

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>