lau-ecom-design-system 1.0.19 → 1.0.21

package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue

@@ -1,79 +1,79 @@
-<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>
+<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>

package/src/components/LauEcomDropdown/LauEcomDropdown.vue

@@ -1,203 +1,208 @@
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import {
-  LauEcomUpcIconArrowDown,
-  LauEcomUpcIconExclamationTriangle,
-} from "../LauEcomIcon";
-import { DropdownItem } from "./types";
-import { Colors } from "../../utils";
-
-interface Props {
-  id?: string;
-  label?: string;
-  isDisabled?: boolean;
-  placeholder?: string;
-  dropdownItems: DropdownItem[];
-  errorMessage?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "label",
-  label: "Dropdown label",
-  isDisabled: false,
-  placeholder: "Placeholder",
-  errorMessage: "",
-});
-
-const isOpen = ref(false);
-const selectedItem = ref<DropdownItem | null>(null);
-
-const handleDropdownOpen = () => {
-  if (props.isDisabled) return;
-  isOpen.value = !isOpen.value;
-};
-
-const selectDropdownItem = (index: number) => {
-  selectedItem.value = props.dropdownItems[index];
-  isOpen.value = false;
-};
-
-const lauEcomLabelClasses = computed(() => {
-  return {
-    "lau-ecom-label core-font-body-bold-06-12px": true,
-    "lau-ecom-label--disabled": props.isDisabled,
-  };
-});
-
-const lauEcomDropdownClasses = computed(() => {
-  return {
-    "lau-ecom-dropdown core-font-body-reg-04-16px": true,
-    "lau-ecom-dropdown--open": isOpen.value,
-    "lau-ecom-dropdown--disabled": props.isDisabled,
-    "lau-ecom-dropdown--error": props.errorMessage,
-  };
-});
-
-const lauEcomIconClasses = computed(() => {
-  return {
-    "lau-ecom-icon": true,
-    "lau-ecom-icon--open": isOpen.value,
-    "lau-ecom-icon--disabled": props.isDisabled,
-  };
-});
-
-const iconArrowDownColor = computed(() => {
-  if (props.isDisabled) return Colors["upc-color-neutral-70"];
-  if (props.errorMessage) return Colors["upc-color-red-60-base"];
-  return Colors["upc-color-neutral-100"];
-});
-</script>
-
-<template>
-  <div>
-    <label :class="lauEcomLabelClasses" :for="id">{{ label }}</label>
-    <div class="dsEcom-relative">
-      <div class="dsEcom-relative">
-        <input
-          :id="id"
-          :name="id"
-          :disabled="isDisabled"
-          :placeholder="placeholder"
-          :value="selectedItem?.name"
-          readonly
-          :class="lauEcomDropdownClasses"
-          @click="handleDropdownOpen"
-        />
-        <span :class="lauEcomIconClasses">
-          <LauEcomUpcIconArrowDown :color="iconArrowDownColor" />
-        </span>
-      </div>
-      <ul
-        v-if="dropdownItems.length > 0"
-        v-show="isOpen"
-        class="lau-ecom-dropdown-list core-font-body-reg-04-16px"
-      >
-        <li
-          v-for="(dropdownItem, index) in dropdownItems"
-          :key="`dropdown-item-${index + 1}`"
-          class="lau-ecom-dropdown-list-item"
-          @click="selectDropdownItem(index)"
-        >
-          <span>{{ dropdownItem.name }}</span>
-        </li>
-      </ul>
-    </div>
-    <div
-      v-if="errorMessage"
-      class="lau-ecom-dropdown__error core-font-body-reg-06-12px"
-    >
-      <span>
-        <LauEcomUpcIconExclamationTriangle
-          width="16"
-          height="16"
-          :color="Colors['upc-color-red-60-base']"
-        />
-      </span>
-      <p class="dsEcom-ml-1">
-        {{ errorMessage }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-label {
-  @apply dsEcom-text-neutral-100;
-}
-
-.lau-ecom-label--disabled {
-  @apply dsEcom-text-neutral-70;
-}
-
-.lau-ecom-dropdown {
-  @apply dsEcom-w-full
-    dsEcom-h-auto
-    dsEcom-cursor-pointer
-    dsEcom-bg-neutral-10
-    dsEcom-px-3
-    dsEcom-py-[11px]
-    dsEcom-rounded-[2px]
-    dsEcom-border
-    dsEcom-border-neutral-80
-    hover:dsEcom-border-stroke-secondary-60
-    focus:dsEcom-border-stroke-secondary-60
-    focus:dsEcom-outline-none;
-}
-
-.lau-ecom-dropdown--disabled {
-  @apply !dsEcom-border-neutral-70
-    !dsEcom-bg-neutral-20;
-}
-
-.lau-ecom-dropdown--error {
-  @apply !dsEcom-border-feedback-error-60;
-}
-
-.lau-ecom-dropdown--open {
-  @apply dsEcom-border-stroke-secondary-60;
-}
-
-.lau-ecom-icon {
-  @apply dsEcom-absolute
-    dsEcom-right-4
-    dsEcom-top-3
-    dsEcom-transition-all
-    dsEcom-duration-300
-    dsEcom-cursor-pointer;
-}
-
-.lau-ecom-icon--open {
-  @apply dsEcom-rotate-180;
-}
-
-.lau-ecom-icon--disabled {
-  @apply dsEcom-cursor-default;
-}
-
-.lau-ecom-dropdown-list {
-  @apply dsEcom-absolute
-    dsEcom-top-full
-    dsEcom-left-0
-    dsEcom-w-full
-    dsEcom-z-20
-    dsEcom-py-1
-    dsEcom-shadow-upc-shadow-subtle
-    dsEcom-bg-neutral-10;
-}
-
-.lau-ecom-dropdown-list-item {
-  @apply dsEcom-py-2
-    dsEcom-px-3
-    dsEcom-cursor-pointer
-    hover:dsEcom-bg-neutral-30
-    active:dsEcom-bg-neutral-40
-    focus:dsEcom-bg-neutral-40;
-}
-
-.lau-ecom-dropdown__error {
-  @apply dsEcom-flex
-    dsEcom-items-center
-    dsEcom-mt-[2px]
-    dsEcom-text-primary-60;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import {
+  LauEcomUpcIconArrowDown,
+  LauEcomUpcIconExclamationTriangle,
+} from "../LauEcomIcon";
+import { DropdownItem } from "./types";
+
+interface Props {
+  id?: string;
+  label?: string;
+  isDisabled?: boolean;
+  placeholder?: string;
+  dropdownItems: DropdownItem[];
+  errorMessage?: string;
+  disabledColor?: string;
+  errorColor?: string;
+  defaultColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "label",
+  label: "Dropdown label",
+  isDisabled: false,
+  placeholder: "Placeholder",
+  errorMessage: "",
+  disabledColor: "var(--neutral-70)",
+  errorColor: "var(--feedback-error-60)",
+  defaultColor: "var(--neutral-100)",
+});
+
+const isOpen = ref(false);
+const selectedItem = ref<DropdownItem | null>(null);
+
+const handleDropdownOpen = () => {
+  if (props.isDisabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const selectDropdownItem = (index: number) => {
+  selectedItem.value = props.dropdownItems[index];
+  isOpen.value = false;
+};
+
+const lauEcomLabelClasses = computed(() => {
+  return {
+    "lau-ecom-label core-font-body-bold-06-12px": true,
+    "lau-ecom-label--disabled": props.isDisabled,
+  };
+});
+
+const lauEcomDropdownClasses = computed(() => {
+  return {
+    "lau-ecom-dropdown core-font-body-reg-04-16px": true,
+    "lau-ecom-dropdown--open": isOpen.value,
+    "lau-ecom-dropdown--disabled": props.isDisabled,
+    "lau-ecom-dropdown--error": props.errorMessage,
+  };
+});
+
+const lauEcomIconClasses = computed(() => {
+  return {
+    "lau-ecom-icon": true,
+    "lau-ecom-icon--open": isOpen.value,
+    "lau-ecom-icon--disabled": props.isDisabled,
+  };
+});
+
+const iconArrowDownColor = computed(() => {
+  if (props.isDisabled) return props.disabledColor;
+  if (props.errorMessage) return props.errorColor;
+  return props.defaultColor;
+});
+</script>
+
+<template>
+  <div>
+    <label :class="lauEcomLabelClasses" :for="id">{{ label }}</label>
+    <div class="dsEcom-relative">
+      <div class="dsEcom-relative">
+        <input
+          :id="id"
+          :name="id"
+          :disabled="isDisabled"
+          :placeholder="placeholder"
+          :value="selectedItem?.name"
+          readonly
+          :class="lauEcomDropdownClasses"
+          @click="handleDropdownOpen"
+        />
+        <span :class="lauEcomIconClasses">
+          <LauEcomUpcIconArrowDown :color="iconArrowDownColor" />
+        </span>
+      </div>
+      <ul
+        v-if="dropdownItems.length > 0"
+        v-show="isOpen"
+        class="lau-ecom-dropdown-list core-font-body-reg-04-16px"
+      >
+        <li
+          v-for="(dropdownItem, index) in dropdownItems"
+          :key="`dropdown-item-${index + 1}`"
+          class="lau-ecom-dropdown-list-item"
+          @click="selectDropdownItem(index)"
+        >
+          <span>{{ dropdownItem.name }}</span>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="errorMessage"
+      class="lau-ecom-dropdown__error core-font-body-reg-06-12px"
+    >
+      <span>
+        <LauEcomUpcIconExclamationTriangle
+          width="16"
+          height="16"
+          :color="errorColor"
+        />
+      </span>
+      <p class="dsEcom-ml-1">
+        {{ errorMessage }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-label {
+  @apply dsEcom-text-neutral-100;
+}
+
+.lau-ecom-label--disabled {
+  @apply dsEcom-text-neutral-70;
+}
+
+.lau-ecom-dropdown {
+  @apply dsEcom-w-full
+    dsEcom-h-auto
+    dsEcom-cursor-pointer
+    dsEcom-bg-neutral-10
+    dsEcom-px-3
+    dsEcom-py-[11px]
+    dsEcom-rounded-[2px]
+    dsEcom-border
+    dsEcom-border-neutral-80
+    hover:dsEcom-border-stroke-secondary-60
+    focus:dsEcom-border-stroke-secondary-60
+    focus:dsEcom-outline-none;
+}
+
+.lau-ecom-dropdown--disabled {
+  @apply !dsEcom-border-neutral-70
+    !dsEcom-bg-neutral-20;
+}
+
+.lau-ecom-dropdown--error {
+  @apply !dsEcom-border-feedback-error-60;
+}
+
+.lau-ecom-dropdown--open {
+  @apply dsEcom-border-stroke-secondary-60;
+}
+
+.lau-ecom-icon {
+  @apply dsEcom-absolute
+    dsEcom-right-4
+    dsEcom-top-3
+    dsEcom-transition-all
+    dsEcom-duration-300
+    dsEcom-cursor-pointer;
+}
+
+.lau-ecom-icon--open {
+  @apply dsEcom-rotate-180;
+}
+
+.lau-ecom-icon--disabled {
+  @apply dsEcom-cursor-default;
+}
+
+.lau-ecom-dropdown-list {
+  @apply dsEcom-absolute
+    dsEcom-top-full
+    dsEcom-left-0
+    dsEcom-w-full
+    dsEcom-z-20
+    dsEcom-py-1
+    dsEcom-shadow-upc-shadow-subtle
+    dsEcom-bg-neutral-10;
+}
+
+.lau-ecom-dropdown-list-item {
+  @apply dsEcom-py-2
+    dsEcom-px-3
+    dsEcom-cursor-pointer
+    hover:dsEcom-bg-neutral-30
+    active:dsEcom-bg-neutral-40
+    focus:dsEcom-bg-neutral-40;
+}
+
+.lau-ecom-dropdown__error {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-mt-[2px]
+    dsEcom-text-primary-60;
+}
+</style>