lau-ecom-design-system 1.0.19 → 1.0.21

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -1,159 +1,160 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import { LauEcomButtonType } from "../LauEcomButton/types";
-import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
-import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
-import { CategoryCookie } from "./types";
-import {
-  acceptAllCookies,
-  acceptCookiesSelected,
-  CookieItemKey,
-  CookieOption,
-  rejectCookies,
-} from "../../utils";
-
-interface Props {
-  categoryCookies?: CategoryCookie[] | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  categoryCookies: null,
-});
-
-const items = ref(props.categoryCookies);
-
-const emit = defineEmits([
-  "onClose",
-  "onReject",
-  "onAcceptSelected",
-  "onAcceptAll",
-]);
-
-const handleCloseConfig = () => {
-  emit("onClose");
-};
-
-const handleReject = () => {
-  rejectCookies();
-  emit("onReject");
-};
-
-const handleAcceptSelected = () => {
-  let analyticsStorageOption;
-  let adStorageOption;
-
-  const analyticsStorageIndex = items.value?.findIndex(
-    (item) => item.id === CookieItemKey.statistics,
-  );
-  if (analyticsStorageIndex) {
-    analyticsStorageOption = items.value![analyticsStorageIndex].isChecked
-      ? CookieOption.granted
-      : CookieOption.denied;
-  }
-
-  const adStorageIndex = items.value?.findIndex(
-    (item) => item.id === CookieItemKey.marketing,
-  );
-  if (adStorageIndex) {
-    adStorageOption = items.value![adStorageIndex].isChecked
-      ? CookieOption.granted
-      : CookieOption.denied;
-  }
-
-  acceptCookiesSelected(analyticsStorageOption!, adStorageOption!);
-  emit("onAcceptSelected");
-};
-
-const handleAcceptAll = () => {
-  acceptAllCookies();
-  emit("onAcceptAll");
-};
-</script>
-
-<template>
-  <div
-    class="lau-ecom-banner-cookies-config lau-ecom-banner-cookies-config--upc"
-  >
-    <div class="lau-ecom-config-head lau-ecom-config-head--upc">
-      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
-      <button @click="handleCloseConfig">
-        <span><LauEcomCoreIconNavClose /></span>
-      </button>
-    </div>
-    <div>
-      <LauEcomBannerCookiesConfigAccordion
-        v-for="(item, index) in items"
-        :key="`cookie-config-${index + 1}`"
-        v-model="item.isChecked"
-        :category-cookie="item"
-      />
-    </div>
-    <div class="lau-ecom-banner-cookies-buttons">
-      <LauEcomButton
-        class="!dsEcom-w-full mobiles:dsEcom-order-last"
-        :type="LauEcomButtonType.Secondary"
-        @on-click="handleReject"
-      >
-        Rechazar
-      </LauEcomButton>
-      <LauEcomButton
-        class="!dsEcom-w-full"
-        :type="LauEcomButtonType.Secondary"
-        @on-click="handleAcceptSelected"
-      >
-        Aceptar seleccionadas
-      </LauEcomButton>
-      <LauEcomButton
-        class="!dsEcom-w-full mobiles:dsEcom-order-first"
-        @on-click="handleAcceptAll"
-      >
-        Aceptar todas
-      </LauEcomButton>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-banner-cookies-config {
-  @apply dsEcom-flex
-    dsEcom-flex-col
-    dsEcom-gap-10
-    dsEcom-absolute
-    dsEcom-top-1/2
-    dsEcom-left-1/2
-    dsEcom-transform
-    -dsEcom-translate-x-1/2
-    -dsEcom-translate-y-1/2
-    dsEcom-pt-6
-    dsEcom-pb-8
-    dsEcom-px-6
-    dsEcom-w-[584px]
-    dsEcom-h-auto
-    dsEcom-shadow-upc-shadow-prominent
-    mobiles:dsEcom-gap-8
-    mobiles:dsEcom-w-[360px];
-}
-
-.lau-ecom-banner-cookies-config--upc {
-  @apply dsEcom-text-neutral-100;
-}
-
-.lau-ecom-config-head {
-  @apply dsEcom-flex 
-    dsEcom-justify-between 
-    dsEcom-items-center;
-}
-
-.lau-ecom-config-head--upc {
-  @apply dsEcom-text-secondary-60;
-}
-
-.lau-ecom-banner-cookies-buttons {
-  @apply dsEcom-flex
-    dsEcom-justify-between
-    dsEcom-items-center
-    dsEcom-gap-4
-    mobiles:dsEcom-flex-col;
-}
-</style>
+<script lang="ts" setup>
+import { ref } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import { LauEcomButtonType } from "../LauEcomButton/types";
+import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
+import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
+import { CategoryCookie } from "./types";
+import {
+  acceptAllCookies,
+  acceptCookiesSelected,
+  CookieItemKey,
+  CookieOption,
+  rejectCookies,
+} from "../../utils";
+
+interface Props {
+  categoryCookies?: CategoryCookie[] | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  categoryCookies: null,
+});
+
+const items = ref(props.categoryCookies);
+
+const emit = defineEmits([
+  "onClose",
+  "onReject",
+  "onAcceptSelected",
+  "onAcceptAll",
+]);
+
+const handleCloseConfig = () => {
+  emit("onClose");
+};
+
+const handleReject = () => {
+  rejectCookies();
+  emit("onReject");
+};
+
+const handleAcceptSelected = () => {
+  let analyticsStorageOption;
+  let adStorageOption;
+
+  const analyticsStorageIndex = items.value?.findIndex(
+    (item) => item.id === CookieItemKey.statistics,
+  );
+  if (analyticsStorageIndex) {
+    analyticsStorageOption = items.value![analyticsStorageIndex].isChecked
+      ? CookieOption.granted
+      : CookieOption.denied;
+  }
+
+  const adStorageIndex = items.value?.findIndex(
+    (item) => item.id === CookieItemKey.marketing,
+  );
+  if (adStorageIndex) {
+    adStorageOption = items.value![adStorageIndex].isChecked
+      ? CookieOption.granted
+      : CookieOption.denied;
+  }
+
+  acceptCookiesSelected(analyticsStorageOption!, adStorageOption!);
+  emit("onAcceptSelected");
+};
+
+const handleAcceptAll = () => {
+  acceptAllCookies();
+  emit("onAcceptAll");
+};
+</script>
+
+<template>
+  <div
+    class="lau-ecom-banner-cookies-config lau-ecom-banner-cookies-config--upc"
+  >
+    <div class="lau-ecom-config-head lau-ecom-config-head--upc">
+      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
+      <button @click="handleCloseConfig">
+        <span><LauEcomCoreIconNavClose /></span>
+      </button>
+    </div>
+    <div>
+      <LauEcomBannerCookiesConfigAccordion
+        v-for="(item, index) in items"
+        :key="`cookie-config-${index + 1}`"
+        v-model="item.isChecked"
+        :category-cookie="item"
+        @on-toggle="item.onToggle"
+      />
+    </div>
+    <div class="lau-ecom-banner-cookies-buttons">
+      <LauEcomButton
+        class="!dsEcom-w-full mobiles:dsEcom-order-last"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleReject"
+      >
+        Rechazar
+      </LauEcomButton>
+      <LauEcomButton
+        class="!dsEcom-w-full"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleAcceptSelected"
+      >
+        Aceptar seleccionadas
+      </LauEcomButton>
+      <LauEcomButton
+        class="!dsEcom-w-full mobiles:dsEcom-order-first"
+        @on-click="handleAcceptAll"
+      >
+        Aceptar todas
+      </LauEcomButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-banner-cookies-config {
+  @apply dsEcom-flex
+    dsEcom-flex-col
+    dsEcom-gap-10
+    dsEcom-absolute
+    dsEcom-top-1/2
+    dsEcom-left-1/2
+    dsEcom-transform
+    -dsEcom-translate-x-1/2
+    -dsEcom-translate-y-1/2
+    dsEcom-pt-6
+    dsEcom-pb-8
+    dsEcom-px-6
+    dsEcom-w-[584px]
+    dsEcom-h-auto
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-gap-8
+    mobiles:dsEcom-w-[360px];
+}
+
+.lau-ecom-banner-cookies-config--upc {
+  @apply dsEcom-text-neutral-100;
+}
+
+.lau-ecom-config-head {
+  @apply dsEcom-flex 
+    dsEcom-justify-between 
+    dsEcom-items-center;
+}
+
+.lau-ecom-config-head--upc {
+  @apply dsEcom-text-secondary-60;
+}
+
+.lau-ecom-banner-cookies-buttons {
+  @apply dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-4
+    mobiles:dsEcom-flex-col;
+}
+</style>

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>