lau-ecom-design-system 1.0.2 → 1.0.3

package/dist/style.css

@@ -640,7 +640,7 @@
   --tw-contain-style:  ;
 }
 
-/* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com */
+/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1242,6 +1242,10 @@ video {
   position: relative;
 }
 
+.dsEcom-inset-0 {
+  inset: 0px;
+}
+
 .dsEcom-left-0 {
   left: 0px;
 }
@@ -1282,6 +1286,10 @@ video {
   z-index: 20;
 }
 
+.dsEcom-z-50 {
+  z-index: 50;
+}
+
 .dsEcom-col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -1331,6 +1339,11 @@ video {
   display: none;
 }
 
+.dsEcom-size-full {
+  width: 100%;
+  height: 100%;
+}
+
 .\!dsEcom-h-\[1px\] {
   height: 1px !important;
 }
@@ -1609,6 +1622,10 @@ video {
   border-color: var(--color-cbt-color-apple-green-60-base);
 }
 
+.dsEcom-border-color-cbt-color-neutral-90 {
+  border-color: var(--color-cbt-color-neutral-90);
+}
+
 .dsEcom-border-upc-color-neutral-60 {
   border-color: var(--color-upc-color-neutral-60);
 }
@@ -1629,10 +1646,6 @@ video {
   border-color: var(--color-upc-color-red-60-base);
 }
 
-.dsEcom-border-upc-color-red-90 {
-  border-color: var(--color-upc-color-red-90);
-}
-
 .dsEcom-border-upc-epg-color-purple-60-base {
   border-color: var(--color-upc-epg-color-purple-60-base);
 }
@@ -1653,6 +1666,10 @@ video {
   background-color: var(--color-upc-color-red-60-base) !important;
 }
 
+.dsEcom-bg-cbt-astro-blue-90 {
+  background-color: var(--color-cbt-astro-blue-90);
+}
+
 .dsEcom-bg-cbt-color-apple-green-60-base {
   background-color: var(--color-cbt-color-apple-green-60-base);
 }
@@ -1681,6 +1698,10 @@ video {
   background-color: var(--color-upc-color-neutral-70);
 }
 
+.dsEcom-bg-upc-color-neutral-80 {
+  background-color: var(--color-upc-color-neutral-80);
+}
+
 .dsEcom-bg-upc-color-neutral-90 {
   background-color: var(--color-upc-color-neutral-90);
 }
@@ -1691,7 +1712,11 @@ video {
 
 .dsEcom-bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
+.dsEcom-bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
 }
 
 .dsEcom-p-4 {
@@ -1898,6 +1923,11 @@ video {
   color: var(--color-upc-epg-color-purple-60-base);
 }
 
+.dsEcom-text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .dsEcom-shadow-upc-shadow-prominent {
   --tw-shadow: 0px 8px 48px -6px rgba(89, 89, 89, 0.24);
   --tw-shadow-colored: 0px 8px 48px -6px var(--tw-shadow-color);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lau-ecom-design-system",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "sourceType": "module",
   "sideEffects": false,
   "main": "dist/lau-ecom-design-system.ssr.js",

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -1,105 +1,199 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import LauEcomTextButton from "../LauEcomTextButton/LauEcomTextButton.vue";
-import { LauEcomInstance } from "../../enums";
-
-interface Props {
-  instance?: LauEcomInstance;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
-});
-
-const emit = defineEmits(["onConfigCookies", "onAccept"]);
-
-const handleConfigCookies = () => {
-  emit("onConfigCookies");
-};
-
-const handleAccept = () => {
-  emit("onAccept");
-};
-
-const lauEcomBannerCookiesClasses = computed(() => {
-  return {
-    "lau-ecom-cookies": true,
-    "lau-ecom-cookies--upc": props.instance === LauEcomInstance.Upc,
-    "lau-ecom-cookies--cib": props.instance === LauEcomInstance.Cibertec,
-  };
-});
-
-const lauEcomBannerCookiesTextClasses = computed(() => {
-  return {
-    "lau-ecom-text": true,
-    "core-font-body-reg-04-16px": true,
-    "lau-ecom-text--upc": props.instance === LauEcomInstance.Upc,
-    "lau-ecom-text--cib": props.instance === LauEcomInstance.Cibertec,
-  };
-});
-</script>
-
-<template>
-  <div :class="lauEcomBannerCookiesClasses">
-    <p :class="lauEcomBannerCookiesTextClasses">
-      Este sitio web utiliza cookies gracias a esto podemos personalizar los
-      ingresos a la web en futuras visitas y brindarte una mejor experiencia
-      dentro de nuestro sitio.
-      <a class="core-font-link-02-16px dsEcom-text-core-color-blue-60-base"
-        >Conoce más</a
-      >
-    </p>
-    <div class="lau-ecom-buttons">
-      <LauEcomTextButton :instance="instance" @on-click="handleConfigCookies">
-        Configurar cookies
-      </LauEcomTextButton>
-      <LauEcomButton :instance="instance" @on-click="handleAccept">
-        Aceptar
-      </LauEcomButton>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-cookies {
-  @apply dsEcom-w-full
-    dsEcom-py-[32px]
-    dsEcom-px-[64px]
-    dsEcom-flex
-    dsEcom-justify-between
-    dsEcom-items-center
-    dsEcom-gap-20
-    dsEcom-shadow-upc-shadow-prominent
-    mobiles:dsEcom-flex-col
-    mobiles:dsEcom-px-[24px];
-}
-
-.lau-ecom-cookies--upc {
-  @apply dsEcom-text-upc-color-neutral-20;
-}
-
-.lau-ecom-cookies--cib {
-  @apply dsEcom-text-color-cbt-color-neutral-20;
-}
-
-.lau-ecom-text {
-  @apply dsEcom-block
-    dsEcom-w-[883px]
-    mobiles:dsEcom-w-full;
-}
-
-.lau-ecom-text--upc {
-  @apply dsEcom-text-upc-color-neutral-90;
-}
-
-.lau-ecom-text--cib {
-  @apply dsEcom-text-color-cbt-color-neutral-80;
-}
-
-.lau-ecom-buttons {
-  @apply dsEcom-flex
-    dsEcom-gap-8
-    mobiles:dsEcom-self-end;
-}
-</style>
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import LauEcomTextButton from "../LauEcomTextButton/LauEcomTextButton.vue";
+import { LauEcomInstance } from "../../enums";
+import { getCookie, acceptAllCookies } from "../../utils/Cookies";
+import LauEcomBannerCookiesConfig from "./LauEcomBannerCookiesConfig.vue";
+import { CategoryCookie } from "./types";
+import { COOKIE_CONSENT, CookieItemKey } from "../../utils";
+
+interface Props {
+  instance?: LauEcomInstance;
+  isVisible?: boolean;
+  categoryCookies?: CategoryCookie[] | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
+  isVisible: true,
+  categoryCookies: () => {
+    return [
+      {
+        title: "Esenciales",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+        isDisabled: false,
+      },
+      {
+        title: "Preferencias",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+        isDisabled: false,
+      },
+      {
+        id: CookieItemKey.statistics,
+        title: "Estadisticas",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+        isDisabled: false,
+      },
+      {
+        id: CookieItemKey.marketing,
+        title: "Marketing",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+        isDisabled: false,
+      },
+    ];
+  },
+});
+
+const isConfigOpen = ref(false);
+const isBannerVisible = ref(props.isVisible);
+
+const emit = defineEmits([
+  "onConfigCookies",
+  "onAccept",
+  "onAcceptAll",
+  "onReject",
+  "onAcceptSelected",
+  "onAcceptAll",
+  "onClose",
+]);
+
+onBeforeMount(() => {
+  const cookieConsent = getCookie(COOKIE_CONSENT);
+  if (cookieConsent) isBannerVisible.value = false;
+});
+
+const handleConfigCookies = () => {
+  isConfigOpen.value = !isConfigOpen.value;
+  emit("onConfigCookies");
+};
+
+const handleAccept = () => {
+  acceptAllCookies();
+  emit("onAccept");
+  isBannerVisible.value = false;
+};
+
+const lauEcomBannerCookiesClasses = computed(() => {
+  return {
+    "lau-ecom-cookies": true,
+    "lau-ecom-cookies--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-cookies--cib": props.instance === LauEcomInstance.Cibertec,
+  };
+});
+
+const lauEcomBannerCookiesTextClasses = computed(() => {
+  return {
+    "lau-ecom-text core-font-body-reg-04-16px": true,
+    "lau-ecom-text--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-text--cib": props.instance === LauEcomInstance.Cibertec,
+  };
+});
+
+const handleConfigClose = () => {
+  emit("onClose");
+  isConfigOpen.value = false;
+};
+
+const closeCookiesBanner = () => {
+  isConfigOpen.value = false;
+  isBannerVisible.value = false;
+};
+
+const handleReject = () => {
+  emit("onReject");
+  closeCookiesBanner();
+};
+
+const handleAcceptSelected = () => {
+  emit("onAcceptSelected");
+  closeCookiesBanner();
+};
+
+const handleAcceptAll = () => {
+  emit("onAcceptAll");
+  closeCookiesBanner();
+};
+</script>
+
+<template>
+  <div v-if="isBannerVisible">
+    <div v-if="!isConfigOpen" :class="lauEcomBannerCookiesClasses">
+      <p :class="lauEcomBannerCookiesTextClasses">
+        Este sitio web utiliza cookies gracias a esto podemos personalizar los
+        ingresos a la web en futuras visitas y brindarte una mejor experiencia
+        dentro de nuestro sitio.
+        <a class="core-font-link-02-16px dsEcom-text-core-color-blue-60-base"
+          >Conoce más</a
+        >
+      </p>
+      <div class="lau-ecom-buttons">
+        <LauEcomTextButton :instance="instance" @on-click="handleConfigCookies">
+          Configurar cookies
+        </LauEcomTextButton>
+        <LauEcomButton :instance="instance" @on-click="handleAccept">
+          Aceptar
+        </LauEcomButton>
+      </div>
+    </div>
+    <LauEcomBannerCookiesConfig
+      v-else
+      :category-cookies="categoryCookies"
+      @on-accept-all="handleAcceptAll"
+      @on-reject="handleReject"
+      @on-accept-selected="handleAcceptSelected"
+      @on-close="handleConfigClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-cookies {
+  @apply dsEcom-w-full
+    dsEcom-py-[32px]
+    dsEcom-px-[64px]
+    dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-20
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-flex-col
+    mobiles:dsEcom-px-[24px];
+}
+
+.lau-ecom-cookies--upc {
+  @apply dsEcom-text-upc-color-neutral-20;
+}
+
+.lau-ecom-cookies--cib {
+  @apply dsEcom-text-color-cbt-color-neutral-20;
+}
+
+.lau-ecom-text {
+  @apply dsEcom-block
+    dsEcom-w-[883px]
+    mobiles:dsEcom-w-full;
+}
+
+.lau-ecom-text--upc {
+  @apply dsEcom-text-upc-color-neutral-90;
+}
+
+.lau-ecom-text--cib {
+  @apply dsEcom-text-color-cbt-color-neutral-80;
+}
+
+.lau-ecom-buttons {
+  @apply dsEcom-flex
+    dsEcom-gap-8
+    mobiles:dsEcom-self-end;
+}
+</style>