lau-ecom-design-system 1.0.17 → 1.0.18

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+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 { LauEcomInstance } from "../../enums";
 import {
   acceptAllCookies,
   acceptCookiesSelected,
@@ -16,12 +15,10 @@ import {
 
 interface Props {
   categoryCookies?: CategoryCookie[] | null;
-  instance?: LauEcomInstance;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   categoryCookies: null,
-  instance: LauEcomInstance.Upc,
 });
 
 const items = ref(props.categoryCookies);
@@ -33,31 +30,6 @@ const emit = defineEmits([
   "onAcceptAll",
 ]);
 
-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");
 };
@@ -100,9 +72,11 @@ const handleAcceptAll = () => {
 </script>
 
 <template>
-  <div :class="bannerCookiesConfigClasses">
-    <div :class="configHeadClasses">
-      <p :class="configCookiesTitleClasses">Configuracion de cookies</p>
+  <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>
@@ -113,12 +87,10 @@ const handleAcceptAll = () => {
         :key="`cookie-config-${index + 1}`"
         v-model="item.isChecked"
         :category-cookie="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"
@@ -126,7 +98,6 @@ const handleAcceptAll = () => {
         Rechazar
       </LauEcomButton>
       <LauEcomButton
-        :instance="instance"
         class="!dsEcom-w-full"
         :type="LauEcomButtonType.Secondary"
         @on-click="handleAcceptSelected"
@@ -134,7 +105,6 @@ const handleAcceptAll = () => {
         Aceptar seleccionadas
       </LauEcomButton>
       <LauEcomButton
-        :instance="instance"
         class="!dsEcom-w-full mobiles:dsEcom-order-first"
         @on-click="handleAcceptAll"
       >
@@ -166,11 +136,7 @@ const handleAcceptAll = () => {
 }
 
 .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;
+  @apply dsEcom-text-neutral-100;
 }
 
 .lau-ecom-config-head {
@@ -180,11 +146,7 @@ const handleAcceptAll = () => {
 }
 
 .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;
+  @apply dsEcom-text-secondary-60;
 }
 
 .lau-ecom-banner-cookies-buttons {

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue

@@ -3,15 +3,12 @@ import { computed, ref } from "vue";
 import LauEcomUpcIconNavArrow from "../LauEcomIcon/LauEcomUpcIconNavArrow.vue";
 import LauEcomSwitch from "../LauEcomSwitch/LauEcomSwitch.vue";
 import { CategoryCookie } from "./types";
-import { LauEcomInstance } from "../../enums";
 
 interface Props {
-  instance: LauEcomInstance;
   categoryCookie: CategoryCookie;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
+withDefaults(defineProps<Props>(), {
   categoryCookie: () => {
     return {
       title: "Cookie",
@@ -36,13 +33,6 @@ const handleToggle = () => {
 const iconClass = computed(() => {
   return isOpen.value ? "dsEcom-rotate-0" : "dsEcom-rotate-180";
 });
-
-const titleClasses = computed(() => {
-  return {
-    "upc-font-subtitle-03-20px": props.instance === LauEcomInstance.Upc,
-    "cbt-font-subtitle-03-20px": props.instance === LauEcomInstance.Cibertec,
-  };
-});
 </script>
 
 <template>
@@ -53,13 +43,12 @@ const titleClasses = computed(() => {
         @click="handleClickAccordion"
       >
         <span :class="iconClass"><LauEcomUpcIconNavArrow /></span>
-        <p :class="titleClasses">
+        <p class="upc-font-subtitle-03-20px">
           {{ categoryCookie.title }}
         </p>
       </div>
       <LauEcomSwitch
         v-model="isChecked"
-        :instance="instance"
         :isDisabled="categoryCookie.isDisabled"
         @on-toggle="handleToggle"
       />

package/src/components/LauEcomButton/LauEcomButton.vue

@@ -1,150 +1,137 @@
-<script lang="ts" setup>
-import { computed, ref } 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 isMouseOver = ref(false);
-
-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");
-};
-
-const handleMouseOver = () => {
-  isMouseOver.value = true;
-};
-
-const handleMouseOut = () => {
-  isMouseOver.value = false;
-};
-</script>
-
-<template>
-  <button
-    :class="lauEcomButtonClasses"
-    :disabled="isDisabled"
-    @mouseover="handleMouseOver"
-    @mouseout="handleMouseOut"
-    @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>