lau-ecom-design-system 1.0.16 → 1.0.18

package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue

@@ -1,148 +1,143 @@
-<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;
-  modelValue?: string | number | boolean | [];
-  isRequired?: boolean;
-  isDisabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
-  id: "",
-  label: "text label",
-  value: "",
-  modelValue: () => false,
-  isRequired: false,
-  isDisabled: false,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string | number | boolean];
-}>();
-
-const isChecked = ref(
-  typeof props.modelValue === "boolean"
-    ? props.modelValue
-    : //@ts-ignore
-      props.modelValue.includes(props.value),
-);
-
-const handleChange = () => {
-  if (typeof props.modelValue !== "boolean") {
-    isChecked.value = !isChecked.value;
-    //@ts-ignore
-    const newValue = isChecked.value
-      ? [...props.modelValue, props.value]
-      : props.modelValue.filter((val) => val !== props.value);
-    emit("update:modelValue", newValue);
-  } else {
-    isChecked.value = !isChecked.value;
-    emit("update:modelValue", isChecked.value);
-  }
-};
-
-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,
-    "!dsEcom-border-upc-color-red-60-base":
-      props.isRequired && !props.isDisabled,
-  };
-});
-
-const textLabelClass = computed(() => {
-  if (props.isDisabled) return "!dsEcom-text-upc-color-neutral-70";
-  return "";
-});
-</script>
-
-<template>
-  <div class="dsEcom-flex">
-    <label class="lau-ecom-label group upc-font-body-reg-05-14px">
-      <input
-        :class="lauEcomCheckboxClasses"
-        type="checkbox"
-        :required="isRequired"
-        :disabled="isDisabled"
-        :checked="isChecked"
-        @change="handleChange"
-      />
-      <LauEcomUpcIconNavCheckmark
-        class="icon-checkmark"
-        color="#fff"
-        width="16"
-        height="16"
-      />
-      <span
-        v-if="!$slots.default"
-        class="upc-font-link-03-14px"
-        :class="textLabelClass"
-        >{{ label }}</span
-      >
-    </label>
-    <div :class="textLabelClass">
-      <slot :text="`upc-font-link-03-14px ${textLabelClass}`" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-checkbox {
-  @apply dsEcom-w-5
-    dsEcom-h-5
-    dsEcom-mr-2
-    dsEcom-rounded
-    dsEcom-appearance-none
-    dsEcom-border
-    dsEcom-border-upc-color-neutral-90
-    
-    dsEcom-transition
-    dsEcom-duration-200
-    after:dsEcom-absolute
-    after:dsEcom-left-0
-    after:dsEcom-top-0
-    after:dsEcom-h-full
-    after:dsEcom-w-full
-    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 
-    checked:!dsEcom-bg-upc-color-neutral-60;
-}
-
-.lau-ecom-label {
-  @apply dsEcom-flex dsEcom-items-center dsEcom-text-upc-color-neutral-90 dsEcom-relative;
-}
-
-.icon-checkmark {
-  @apply dsEcom-absolute
-    dsEcom-left-[2px]
-    dsEcom-hidden 
-    peer-checked:!dsEcom-block;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { LauEcomUpcIconNavCheckmark } from "../LauEcomIcon";
+
+interface Props {
+  id?: string;
+  label?: string;
+  value?: string | number | boolean;
+  modelValue?: string | number | boolean | [];
+  isRequired?: boolean;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "",
+  label: "text label",
+  value: "",
+  modelValue: () => false,
+  isRequired: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string | number | boolean];
+}>();
+
+const isChecked = ref(
+  typeof props.modelValue === "boolean"
+    ? props.modelValue
+    : //@ts-ignore
+      props.modelValue.includes(props.value),
+);
+
+const handleChange = () => {
+  if (typeof props.modelValue !== "boolean") {
+    isChecked.value = !isChecked.value;
+    //@ts-ignore
+    const newValue = isChecked.value
+      ? [...props.modelValue, props.value]
+      : props.modelValue.filter((val) => val !== props.value);
+    emit("update:modelValue", newValue);
+  } else {
+    isChecked.value = !isChecked.value;
+    emit("update:modelValue", isChecked.value);
+  }
+};
+
+const lauEcomCheckboxClasses = computed(() => {
+  return {
+    "lau-ecom-checkbox dsEcom-peer lau-ecom-checkbox--upc": true,
+    "lau-ecom-checkbox--disabled": props.isDisabled,
+    "lau-ecom-checkbox--checked": !props.isDisabled,
+    "!dsEcom-border-upc-primary-60": props.isRequired && !props.isDisabled,
+  };
+});
+
+const textLabelClass = computed(() => {
+  if (props.isDisabled) return "!dsEcom-text-neutral-70";
+  return "";
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex">
+    <label class="lau-ecom-label group upc-font-body-reg-05-14px">
+      <input
+        :class="lauEcomCheckboxClasses"
+        type="checkbox"
+        :required="isRequired"
+        :disabled="isDisabled"
+        :checked="isChecked"
+        @change="handleChange"
+      />
+      <LauEcomUpcIconNavCheckmark
+        class="icon-checkmark"
+        color="#fff"
+        width="16"
+        height="16"
+      />
+      <span
+        v-if="!$slots.default"
+        class="upc-font-link-03-14px"
+        :class="textLabelClass"
+        >{{ label }}</span
+      >
+    </label>
+    <div :class="textLabelClass">
+      <slot :text="`upc-font-link-03-14px ${textLabelClass}`" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-checkbox {
+  @apply dsEcom-w-5
+    dsEcom-h-5
+    dsEcom-mr-2
+    dsEcom-rounded
+    dsEcom-appearance-none
+    dsEcom-border
+    dsEcom-border-neutral-90
+    dsEcom-transition
+    dsEcom-duration-200
+    after:dsEcom-absolute
+    after:dsEcom-left-0
+    after:dsEcom-top-0
+    after:dsEcom-h-full
+    after:dsEcom-w-full
+    focus:dsEcom-outline-none;
+}
+
+.lau-ecom-checkbox--upc {
+  @apply hover:dsEcom-border-primary-80
+    checked:dsEcom-bg-primary-60
+    checked:!dsEcom-border-primary-60;
+}
+
+.lau-ecom-checkbox--checked {
+  @apply dsEcom-cursor-pointer 
+    checked:!dsEcom-border-primary-60 
+    group-hover:dsEcom-border-primary-60;
+}
+
+.lau-ecom-checkbox--disabled {
+  @apply !dsEcom-border-neutral-60
+    checked:!dsEcom-border-neutral-60
+    checked:!dsEcom-bg-neutral-60;
+}
+
+.lau-ecom-label {
+  @apply dsEcom-flex 
+    dsEcom-items-center 
+    dsEcom-text-neutral-90 
+    dsEcom-relative;
+}
+
+.icon-checkmark {
+  @apply dsEcom-absolute
+    dsEcom-left-[2px]
+    dsEcom-hidden 
+    peer-checked:!dsEcom-block;
+}
+</style>

package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue

@@ -1,82 +1,79 @@
-<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>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomState } from "../../enums";
+import {
+  LauEcomUpcIconCheckCircle,
+  LauEcomUpcIconExclamationCircle,
+  LauEcomUpcIconExclamationTriangle,
+  LauEcomUpcIconInfoCircle,
+} from "../LauEcomIcon";
+
+interface Props {
+  state?: LauEcomState;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  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"
+        class="dsEcom-fill-feedback-success-60"
+      />
+      <LauEcomUpcIconExclamationTriangle
+        v-if="state === LauEcomState.warning"
+        class="dsEcom-fill-feedback-critical-60"
+      />
+      <LauEcomUpcIconExclamationCircle
+        v-if="state === LauEcomState.error"
+        class="dsEcom-fill-feedback-error-60"
+      />
+      <LauEcomUpcIconInfoCircle
+        v-if="state === LauEcomState.information"
+        class="dsEcom-fill-feedback-informative-60"
+      />
+    </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-neutral-100
+    dsEcom-p-4
+    dsEcom-flex
+    dsEcom-gap-3
+    dsEcom-w-fit
+    dsEcom-rounded-[2px];
+}
+
+.lau-ecom-disclamer--success {
+  @apply dsEcom-bg-feedback-success-30;
+}
+.lau-ecom-disclamer--warning {
+  @apply dsEcom-bg-feedback-critical-30;
+}
+.lau-ecom-disclamer--error {
+  @apply dsEcom-bg-feedback-error-30;
+}
+.lau-ecom-disclamer--information {
+  @apply dsEcom-bg-feedback-informative-30;
+}
+</style>