lau-ecom-design-system 1.0.0 → 1.0.2

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue

@@ -1,66 +1,80 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import LauEcomUpcIconNavArrow from "../LauEcomIcon/LauEcomUpcIconNavArrow.vue";
-import LauEcomSwitch from "../LauEcomSwitch/LauEcomSwitch.vue";
-import { CookieItem } from "./types";
-
-interface Props {
-  cookieItem: CookieItem;
-}
-
-withDefaults(defineProps<Props>(), {
-  cookieItem: () => {
-    return {
-      title: "Cookie",
-      text: "lorem ipsum dolor sit amet, consectetur",
-    };
-  },
-});
-
-const isOpen = ref(false);
-const isChecked = defineModel<boolean>();
-
-const handleClickAccordion = () => {
-  isOpen.value = !isOpen.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 /></span>
-        <p class="upc-font-subtitle-03-20px">
-          {{ cookieItem.title }}
-        </p>
-      </div>
-      <LauEcomSwitch v-model="isChecked" />
-    </div>
-    <div v-show="isOpen" class="lau-ecom-config-accordion-content">
-      <p class="core-font-body-reg-05-14px">
-        {{ cookieItem.text }}
-      </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 { CookieItem } from "./types";
+import { LauEcomInstance } from "../../enums";
+
+interface Props {
+  instance: LauEcomInstance;
+  cookieItem: CookieItem;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
+  cookieItem: () => {
+    return {
+      title: "Cookie",
+      text: "lorem ipsum dolor sit amet, consectetur",
+    };
+  },
+});
+
+const isOpen = ref(false);
+const isChecked = defineModel<boolean>();
+
+const handleClickAccordion = () => {
+  isOpen.value = !isOpen.value;
+};
+
+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>
+  <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="titleClasses">
+          {{ cookieItem.title }}
+        </p>
+      </div>
+      <LauEcomSwitch
+        v-model="isChecked"
+        :instance="instance"
+        :isDisabled="cookieItem.isDisabled"
+      />
+    </div>
+    <div v-show="isOpen" class="lau-ecom-config-accordion-content">
+      <p class="core-font-body-reg-05-14px">
+        {{ cookieItem.text }}
+      </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,160 +1,192 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
-import { Colors } from "../../utils";
-import { LauEcomButtonSize, LauEcomButtonType } from "./types";
-import { LauEcomInstance } from "../../enums";
-
-const props = withDefaults(
-  defineProps<{
-    instance?: LauEcomInstance;
-    type?: LauEcomButtonType;
-    size?: LauEcomButtonSize;
-    isDisabled?: boolean;
-    hasArrow?: boolean;
-  }>(),
-  {
-    instance: LauEcomInstance.Upc,
-    text: "Button Text",
-    type: LauEcomButtonType.Primary,
-    size: LauEcomButtonSize.Large,
-    isDisabled: false,
-    hasArrow: false,
-  },
-);
-
-const emit = defineEmits(["onClick"]);
-
-const isMouseOver = ref(false);
-
-const lauEcomButtonClasses = computed(() => {
-  return {
-    "lau-ecom-button": true,
-    "lau-ecom-button-upc": props.instance === LauEcomInstance.Upc,
-    "lau-ecom-button-upc--secondary":
-      props.instance === LauEcomInstance.Upc &&
-      props.type === LauEcomButtonType.Secondary,
-    "lau-ecom-button-upc--large":
-      props.instance === LauEcomInstance.Upc &&
-      props.size === LauEcomButtonSize.Large,
-    "lau-ecom-button-upc--medium":
-      props.instance === LauEcomInstance.Upc &&
-      props.size === LauEcomButtonSize.Medium,
-    "lau-ecom-button-upc--disabled":
-      props.instance === "UPC" &&
-      props.type === LauEcomButtonType.Primary &&
-      props.isDisabled,
-    "lau-ecom-button-upc--secondary-disabled":
-      props.instance === LauEcomInstance.Upc &&
-      props.type === LauEcomButtonType.Secondary &&
-      props.isDisabled,
-  };
-});
-
-const getIconColor = computed(() => {
-  if (props.instance === "UPC") {
-    switch (props.type) {
-      case LauEcomButtonType.Primary:
-        return Colors["upc-color-neutral-10"];
-
-      case LauEcomButtonType.Secondary:
-        if (props.isDisabled) {
-          return Colors["upc-color-neutral-70"];
-        }
-        return isMouseOver.value
-          ? Colors["upc-color-red-80"]
-          : Colors["upc-color-red-60-base"];
-
-      default:
-        return "";
-    }
-  }
-  return "";
-});
-
-const handleClick = () => {
-  emit("onClick");
-};
-
-const handleMouseOver = () => {
-  isMouseOver.value = true;
-};
-
-const handleMouseOut = () => {
-  isMouseOver.value = false;
-};
-</script>
-
-<template>
-  <button
-    class="upc-font-button-bold-16px"
-    :class="lauEcomButtonClasses"
-    :disabled="isDisabled"
-    @mouseover="handleMouseOver"
-    @mouseout="handleMouseOut"
-    @click="handleClick"
-  >
-    <LauEcomUpcIconNavArrow v-if="hasArrow" :color="getIconColor" />
-    <slot></slot>
-  </button>
-</template>
-
-<style scoped>
-.lau-ecom-button {
-  @apply dsEcom-text-upc-color-neutral-10 dsEcom-flex dsEcom-items-center dsEcom-justify-center dsEcom-gap-2;
-}
-
-.lau-ecom-button-upc {
-  @apply dsEcom-bg-upc-color-red-60-base
-    dsEcom-rounded-core-border-radius-32px
-    dsEcom-border-[1px]
-    dsEcom-border-upc-color-red-60-base
-    dsEcom-text-center
-    dsEcom-py-[14px]
-    dsEcom-px-[16px]
-    hover:dsEcom-bg-upc-color-red-80
-    hover:dsEcom-border-upc-color-red-80
-    active:dsEcom-bg-upc-color-red-80
-    active:dsEcom-border-upc-color-red-80;
-}
-
-.lau-ecom-button-upc--large {
-  @apply dsEcom-w-auto 
-    dsEcom-h-[48px];
-}
-
-.lau-ecom-button-upc--medium {
-  @apply dsEcom-w-auto 
-    dsEcom-h-[44px];
-}
-
-.lau-ecom-button-upc--disabled {
-  @apply dsEcom-border-upc-color-neutral-70
-    dsEcom-bg-upc-color-neutral-70 
-    hover:dsEcom-bg-upc-color-neutral-70
-    hover:dsEcom-border-upc-color-neutral-70
-    active:dsEcom-bg-upc-color-neutral-70
-    active:dsEcom-border-upc-color-neutral-70;
-}
-
-.lau-ecom-button-upc--secondary {
-  @apply dsEcom-bg-upc-color-neutral-10
-    dsEcom-border-upc-color-red-60-base
-    dsEcom-text-upc-color-red-60-base
-    hover:dsEcom-text-upc-color-red-80
-    hover:dsEcom-border-upc-color-red-80
-    hover:dsEcom-bg-upc-color-neutral-10
-    active:dsEcom-text-upc-color-red-80
-    active:dsEcom-border-upc-color-red-80
-    active:dsEcom-bg-upc-color-neutral-10;
-}
-
-.lau-ecom-button-upc--secondary-disabled {
-  @apply dsEcom-border-upc-color-neutral-70
-    dsEcom-text-upc-color-neutral-70
-    hover:dsEcom-border-upc-color-neutral-70
-    hover:dsEcom-text-upc-color-neutral-70
-    active:dsEcom-border-upc-color-neutral-70
-    active:dsEcom-text-upc-color-neutral-70;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
+import { Colors } from "../../utils";
+import { LauEcomButtonType } from "./types";
+import { LauEcomInstance, LauEcomSize } from "../../enums";
+
+const props = withDefaults(
+  defineProps<{
+    instance?: LauEcomInstance;
+    type?: LauEcomButtonType;
+    size?: LauEcomSize;
+    isDisabled?: boolean;
+    hasArrow?: boolean;
+  }>(),
+  {
+    instance: LauEcomInstance.Upc,
+    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": true,
+    "lau-ecom-button--upc upc-font-button-16px":
+      props.instance === LauEcomInstance.Upc,
+    "lau-ecom-button--cbt cbt-font-button-16px":
+      props.instance === LauEcomInstance.Cibertec,
+    "lau-ecom-button--secondary": props.type === LauEcomButtonType.Secondary,
+    "lau-ecom-button--secondary-upc":
+      props.instance === LauEcomInstance.Upc &&
+      props.type === LauEcomButtonType.Secondary,
+    "lau-ecom-button--secondary-upc-disabled":
+      props.instance === LauEcomInstance.Upc &&
+      props.type === LauEcomButtonType.Secondary &&
+      props.isDisabled,
+    "lau-ecom-button--secondary-cbt":
+      props.instance === LauEcomInstance.Cibertec &&
+      props.type === LauEcomButtonType.Secondary,
+    "lau-ecom-button--secondary-cbt-disabled":
+      props.instance === LauEcomInstance.Cibertec &&
+      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 getIconColor = computed(() => {
+  if (props.instance === "UPC") {
+    switch (props.type) {
+      case LauEcomButtonType.Primary:
+        return Colors["upc-color-neutral-10"];
+
+      case LauEcomButtonType.Secondary:
+        if (props.isDisabled) {
+          return Colors["upc-color-neutral-70"];
+        }
+        return isMouseOver.value
+          ? Colors["upc-color-red-80"]
+          : Colors["upc-color-red-60-base"];
+
+      default:
+        return "";
+    }
+  }
+  return "";
+});
+
+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" :color="getIconColor" />
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+.lau-ecom-button {
+  @apply dsEcom-text-upc-color-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-upc-color-red-60-base
+    dsEcom-border-upc-color-red-60-base
+    hover:dsEcom-bg-upc-color-red-70
+    hover:dsEcom-border-upc-color-red-70
+    active:dsEcom-bg-upc-color-red-80
+    active:dsEcom-border-upc-color-red-80;
+}
+
+.lau-ecom-button--cbt {
+  @apply dsEcom-bg-cbt-color-apple-green-60-base
+    dsEcom-border-cbt-color-apple-green-60-base
+    hover:dsEcom-bg-cbt-color-apple-green-70
+    hover:dsEcom-border-cbt-color-apple-green-70
+    active:dsEcom-bg-cbt-color-apple-green-80
+    active:dsEcom-border-cbt-color-apple-green-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-upc-color-neutral-70
+    dsEcom-bg-upc-color-neutral-70 
+    hover:dsEcom-bg-upc-color-neutral-70
+    hover:dsEcom-border-upc-color-neutral-70
+    active:dsEcom-bg-upc-color-neutral-70
+    active:dsEcom-border-upc-color-neutral-70;
+}
+
+.lau-ecom-button--secondary {
+  @apply dsEcom-bg-upc-color-neutral-10
+    hover:dsEcom-bg-upc-color-neutral-10
+    active:dsEcom-bg-upc-color-neutral-10;
+}
+
+.lau-ecom-button--secondary-upc {
+  @apply dsEcom-border-upc-color-red-60-base
+    dsEcom-text-upc-color-red-60-base
+    hover:dsEcom-text-upc-color-red-80
+    hover:dsEcom-border-upc-color-red-80
+    active:dsEcom-text-upc-color-red-80
+    active:dsEcom-border-upc-color-red-80;
+}
+
+.lau-ecom-button--secondary-cbt {
+  @apply dsEcom-bg-upc-color-neutral-10
+    dsEcom-border-cbt-color-apple-green-60-base
+    dsEcom-text-cbt-color-apple-green-60-base
+    hover:dsEcom-text-cbt-color-apple-green-70
+    hover:dsEcom-border-cbt-color-apple-green-70
+    hover:dsEcom-bg-upc-color-neutral-10
+    active:dsEcom-text-cbt-color-apple-green-80
+    active:dsEcom-border-cbt-color-apple-green-80
+    active:dsEcom-bg-upc-color-neutral-10;
+}
+
+.lau-ecom-button--secondary-upc-disabled {
+  @apply dsEcom-border-upc-color-neutral-70
+    dsEcom-text-upc-color-neutral-70
+    hover:dsEcom-border-upc-color-neutral-70
+    hover:dsEcom-text-upc-color-neutral-70
+    active:dsEcom-border-upc-color-neutral-70
+    active:dsEcom-text-upc-color-neutral-70;
+}
+</style>

package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { LauEcomUpcIconNavCheckmark } from "../LauEcomIcon";
+import { LauEcomInstance } from "../../enums";
 
 interface Props {
+  instance?: LauEcomInstance;
   id?: string;
   label?: string;
   value?: string | number | boolean;
@@ -12,6 +14,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
   id: "",
   label: "text label",
   value: "",
@@ -48,6 +51,8 @@ const handleChange = () => {
 const lauEcomCheckboxClasses = computed(() => {
   return {
     "lau-ecom-checkbox dsEcom-peer": true,
+    "lau-ecom-checkbox--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-checkbox--cib": props.instance === LauEcomInstance.Cibertec,
     "lau-ecom-checkbox--disabled": props.isDisabled,
     "dsEcom-cursor-pointer checked:!dsEcom-border-upc-color-red-60-base group-hover:dsEcom-border-upc-color-red-60-base":
       !props.isDisabled,
@@ -101,7 +106,7 @@ const textLabelClass = computed(() => {
     dsEcom-appearance-none
     dsEcom-border
     dsEcom-border-upc-color-neutral-90
-    hover:dsEcom-border-upc-color-red-80
+    
     dsEcom-transition
     dsEcom-duration-200
     after:dsEcom-absolute
@@ -109,11 +114,21 @@ const textLabelClass = computed(() => {
     after:dsEcom-top-0
     after:dsEcom-h-full
     after:dsEcom-w-full
-    checked:dsEcom-bg-upc-color-red-60-base
-    checked:!dsEcom-border-upc-color-red-60-base
     focus:dsEcom-outline-none;
 }
 
+.lau-ecom-checkbox--upc {
+  @apply hover:dsEcom-border-upc-color-red-80
+    checked:dsEcom-bg-upc-color-red-60-base
+    checked:!dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-checkbox--cib {
+  @apply hover:dsEcom-border-cbt-color-apple-green-70
+    checked:dsEcom-bg-cbt-color-apple-green-60-base
+    checked:!dsEcom-border-cbt-color-apple-green-60-base;
+}
+
 .lau-ecom-checkbox--disabled {
   @apply !dsEcom-border-upc-color-neutral-60 
     checked:!dsEcom-border-upc-color-neutral-60 

package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomInstance, LauEcomState } from "../../enums";
+import {
+  LauEcomUpcIconCheckCircle,
+  LauEcomUpcIconExclamationCircle,
+  LauEcomUpcIconExclamationTriangle,
+  LauEcomUpcIconInfoCircle,
+} from "../LauEcomIcon";
+import { Colors } from "../../utils";
+
+interface Props {
+  instance?: LauEcomInstance;
+  state?: LauEcomState;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
+  state: LauEcomState.success,
+});
+
+const lauEcomDisclamerClasses = computed(() => {
+  return {
+    "lau-ecom-disclamer upc-font-body-reg-05-14px": true,
+    "lau-ecom-disclamer--success": props.state === LauEcomState.success,
+    "lau-ecom-disclamer--warning": props.state === LauEcomState.warning,
+    "lau-ecom-disclamer--error": props.state === LauEcomState.error,
+    "lau-ecom-disclamer--information": props.state === LauEcomState.information,
+  };
+});
+</script>
+
+<template>
+  <div :class="lauEcomDisclamerClasses">
+    <span>
+      <LauEcomUpcIconCheckCircle
+        v-if="state === LauEcomState.success"
+        :color="Colors['core-color-green-60-base']"
+      />
+      <LauEcomUpcIconExclamationTriangle
+        v-if="state === LauEcomState.warning"
+        :color="Colors['core-icon-critical-60']"
+      />
+      <LauEcomUpcIconExclamationCircle
+        v-if="state === LauEcomState.error"
+        :color="Colors['core-color-redibbon-60-base']"
+      />
+      <LauEcomUpcIconInfoCircle
+        v-if="state === LauEcomState.information"
+        :color="Colors['core-color-blue-intense-60-base']"
+      />
+    </span>
+    <p>
+      ¡Qué buena elección! Inscríbete pero antes escoge la fecha de inicio y el
+      horario
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-disclamer {
+  @apply dsEcom-text-upc-color-neutral-100
+    dsEcom-p-4
+    dsEcom-flex
+    dsEcom-gap-3
+    dsEcom-w-fit
+    dsEcom-rounded-[2px];
+}
+
+.lau-ecom-disclamer--success {
+  @apply dsEcom-bg-core-color-green-30;
+}
+.lau-ecom-disclamer--warning {
+  @apply dsEcom-bg-core-feedback-critical-30;
+}
+.lau-ecom-disclamer--error {
+  @apply dsEcom-bg-core-color-redibbon-30;
+}
+.lau-ecom-disclamer--information {
+  @apply dsEcom-bg-core-color-blue-intense-30;
+}
+</style>