lau-ecom-design-system 1.0.0 → 1.0.2

package/package.json

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

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -1,106 +1,105 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import { LauEcomButtonType } from "../LauEcomButton/types";
-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>Conoce más</a>
-    </p>
-    <div class="lau-ecom-buttons">
-      <LauEcomButton
-        :instance="instance"
-        :type="LauEcomButtonType.Secondary"
-        @on-click="handleConfigCookies"
-      >
-        Configurar cookies
-      </LauEcomButton>
-      <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 } 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>

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -1,159 +1,191 @@
-<script lang="ts" setup>
-import { computed, reactive } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import { LauEcomButtonType } from "../LauEcomButton/types";
-import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
-import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
-import { CookieItem } from "./types";
-import { LauEcomInstance } from "../../enums";
-
-interface Props {
-  cookiesItems?: CookieItem[];
-  instance?: LauEcomInstance;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  cookiesItems: () => {
-    return [
-      {
-        title: "Esenciales",
-        text: "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,
-      },
-      {
-        title: "Preferencias",
-        text: "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,
-      },
-      {
-        title: "Estadisticas",
-        text: "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,
-      },
-      {
-        title: "Marketing",
-        text: "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,
-      },
-    ];
-  },
-  instance: LauEcomInstance.Upc,
-});
-
-const items = reactive(props.cookiesItems);
-
-const emit = defineEmits(["onClose", "onReject", "onRejectAll", "onAccept"]);
-
-const bannerCookiesConfigClasses = computed(() => {
-  return {
-    "lau-ecom-banner-cookies-config": true,
-    "lau-ecom-banner-cookies-config--upc":
-      props.instance === LauEcomInstance.Upc,
-    "lau-ecom-banner-cookies-config--cib":
-      props.instance === LauEcomInstance.Cibertec,
-  };
-});
-
-const handleCloseConfig = () => {
-  emit("onClose");
-};
-
-const handleReject = () => {
-  emit("onReject");
-};
-
-const handleRejectAll = () => {
-  emit("onRejectAll");
-};
-
-const handleAccept = () => {
-  const itemsConfig = items.map((item) => item.isChecked);
-  console.log(itemsConfig);
-  emit("onAccept");
-};
-</script>
-
-<template>
-  <div :class="bannerCookiesConfigClasses">
-    <div class="lau-ecom-banner-cookies-config-head">
-      <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"
-        :cookie-item="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="handleRejectAll"
-      >
-        Aceptar seleccionadas
-      </LauEcomButton>
-      <LauEcomButton
-        class="!dsEcom-w-full mobiles:dsEcom-order-first"
-        @on-click="handleAccept"
-      >
-        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-upc-color-neutral-100;
-}
-
-.lau-ecom-banner-cookies-config--cib {
-  @apply dsEcom-text-color-cbt-color-neutral-100;
-}
-
-.lau-ecom-banner-cookies-config-head {
-  @apply dsEcom-flex 
-    dsEcom-justify-between 
-    dsEcom-items-center;
-}
-
-.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 { computed, reactive } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import { LauEcomButtonType } from "../LauEcomButton/types";
+import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
+import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
+import { CookieItem } from "./types";
+import { LauEcomInstance } from "../../enums";
+
+interface Props {
+  cookiesItems?: CookieItem[];
+  instance?: LauEcomInstance;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cookiesItems: () => {
+    return [
+      {
+        title: "Esenciales",
+        text: "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",
+        text: "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: "Estadisticas",
+        text: "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,
+      },
+      {
+        title: "Marketing",
+        text: "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,
+      },
+    ];
+  },
+  instance: LauEcomInstance.Upc,
+});
+
+const items = reactive(props.cookiesItems);
+
+const emit = defineEmits(["onClose", "onReject", "onRejectAll", "onAccept"]);
+
+const bannerCookiesConfigClasses = computed(() => {
+  return {
+    "lau-ecom-banner-cookies-config": true,
+    "lau-ecom-banner-cookies-config--upc":
+      props.instance === LauEcomInstance.Upc,
+    "lau-ecom-banner-cookies-config--cib":
+      props.instance === LauEcomInstance.Cibertec,
+  };
+});
+
+const configCookiesTitleClasses = computed(() => {
+  return {
+    "upc-font-subtitle-03-20px": props.instance === LauEcomInstance.Upc,
+    "cbt-font-subtitle-03-20px": props.instance === LauEcomInstance.Cibertec,
+  };
+});
+
+const configHeadClasses = computed(() => {
+  return {
+    "lau-ecom-config-head": true,
+    "lau-ecom-config-head--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-config-head--cbt": props.instance === LauEcomInstance.Cibertec,
+  };
+});
+
+const handleCloseConfig = () => {
+  emit("onClose");
+};
+
+const handleReject = () => {
+  emit("onReject");
+};
+
+const handleRejectAll = () => {
+  emit("onRejectAll");
+};
+
+const handleAccept = () => {
+  const itemsConfig = items.map((item) => item.isChecked);
+  console.log(itemsConfig);
+  emit("onAccept");
+};
+//
+</script>
+
+<template>
+  <div :class="bannerCookiesConfigClasses">
+    <div :class="configHeadClasses">
+      <p :class="configCookiesTitleClasses">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"
+        :cookie-item="item"
+        :instance="instance!"
+      />
+    </div>
+    <div class="lau-ecom-banner-cookies-buttons">
+      <LauEcomButton
+        :instance="instance"
+        class="!dsEcom-w-full mobiles:dsEcom-order-last"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleReject"
+      >
+        Rechazar
+      </LauEcomButton>
+      <LauEcomButton
+        :instance="instance"
+        class="!dsEcom-w-full"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleRejectAll"
+      >
+        Aceptar seleccionadas
+      </LauEcomButton>
+      <LauEcomButton
+        :instance="instance"
+        class="!dsEcom-w-full mobiles:dsEcom-order-first"
+        @on-click="handleAccept"
+      >
+        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-upc-color-neutral-100;
+}
+
+.lau-ecom-banner-cookies-config--cib {
+  @apply dsEcom-text-color-cbt-color-neutral-100;
+}
+
+.lau-ecom-config-head {
+  @apply dsEcom-flex 
+    dsEcom-justify-between 
+    dsEcom-items-center;
+}
+
+.lau-ecom-config-head--upc {
+  @apply dsEcom-text-upc-epg-color-purple-60-base;
+}
+
+.lau-ecom-config-head--cbt {
+  @apply dsEcom-text-cbt-astro-blue-80;
+}
+
+.lau-ecom-banner-cookies-buttons {
+  @apply dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-4
+    mobiles:dsEcom-flex-col;
+}
+</style>