lau-ecom-design-system 1.0.20 → 1.0.21

package/dist/style.css

@@ -1115,57 +1115,18 @@ video {
   display: none;
 }
 
-:root {
-  --primary-60: #e50a17;
-  --primary-70: #b70812;
-  --primary-80: #89060e;
-  --secondary-10: #ede9f3;
-  --secondary-50: #6d529c;
-  --secondary-60: #482783;
-  --secondary-70: #422377;
-  --secondary-80: #331c5d;
-  --secondary-tag-soft: #ede9f3;
-  --tertiary-10: #eff9fb;
-  --tertiary-30: #e2f4f8;
-  --tertiary-50: #c2e7f0;
-  --tertiary-60: #6ac5da;
-  --tertiary-80: #1f697a;
-  --tertiary-tag-soft: #eff9fb;
-  --neutral-gray-10: #ffffff;
-  --neutral-gray-20: #fafafa;
-  --neutral-gray-40: #d9d9d9;
-  --neutral-10: #ffffff;
-  --neutral-20: #fafafa;
-  --neutral-30: #f2f2f2;
-  --neutral-40: #d9d9d9;
-  --neutral-50: #bfbfbf;
-  --neutral-60: #a6a6a6;
-  --neutral-70: #808080;
-  --neutral-80: #595959;
-  --neutral-90: #404040;
-  --neutral-100: #191919;
-  --feedback-success-30: #b6ffb4;
-  --feedback-success-60: #359e29;
-  --feedback-success-80: #205f19;
-  --feedback-critical-30: #fee7c5;
-  --feedback-critical-60: #fd6d21;
-  --feedback-error-30: #fed4d8;
-  --feedback-error-60: #dc3545;
-  --feedback-informative-30: #b9d6fe;
-  --feedback-informative-60: #1762ca;
-  --social-whatsapp-60: #00ba37;
-  --social-pink-70: #ff4b4b;
-  --stroke-secondary-60: #482783;
-  --stroke-secondary-70: #422377;
-  --stroke-secondary-80: #331c5d;
-  --link-60: #0042e9;
-  --link-80: #0011af;
-}
-
 .dsEcom-pointer-events-none {
   pointer-events: none;
 }
 
+.dsEcom-invisible {
+  visibility: hidden;
+}
+
+.dsEcom-fixed {
+  position: fixed;
+}
+
 .dsEcom-absolute {
   position: absolute;
 }
@@ -1190,6 +1151,10 @@ video {
   left: 2px;
 }
 
+.dsEcom-right-2 {
+  right: 0.5rem;
+}
+
 .dsEcom-right-4 {
   right: 1rem;
 }
@@ -1218,6 +1183,10 @@ video {
   z-index: 20;
 }
 
+.dsEcom-z-40 {
+  z-index: 40;
+}
+
 .dsEcom-z-50 {
   z-index: 50;
 }
@@ -1301,6 +1270,10 @@ video {
   height: 1px !important;
 }
 
+.dsEcom-h-10 {
+  height: 2.5rem;
+}
+
 .dsEcom-h-4 {
   height: 1rem;
 }
@@ -1365,14 +1338,26 @@ video {
   width: 2rem;
 }
 
+.dsEcom-w-\[250px\] {
+  width: 250px;
+}
+
 .dsEcom-w-\[284px\] {
   width: 284px;
 }
 
+.dsEcom-w-\[350px\] {
+  width: 350px;
+}
+
 .dsEcom-w-\[584px\] {
   width: 584px;
 }
 
+.dsEcom-w-\[656px\] {
+  width: 656px;
+}
+
 .dsEcom-w-\[883px\] {
   width: 883px;
 }
@@ -1426,6 +1411,10 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.dsEcom-transform-gpu {
+  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .dsEcom-cursor-default {
   cursor: default;
 }
@@ -1514,6 +1503,10 @@ video {
   border-radius: 9999px;
 }
 
+.dsEcom-rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .dsEcom-rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1591,6 +1584,16 @@ video {
   background-color: var(--primary-60) !important;
 }
 
+.dsEcom-bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+}
+
+.dsEcom-bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
 .dsEcom-bg-neutral-10 {
   background-color: var(--neutral-10);
 }
@@ -1676,6 +1679,10 @@ video {
   fill: #fff;
 }
 
+.dsEcom-p-2 {
+  padding: 0.5rem;
+}
+
 .dsEcom-p-4 {
   padding: 1rem;
 }
@@ -1694,6 +1701,11 @@ video {
   padding-right: 0.75rem;
 }
 
+.dsEcom-px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .dsEcom-px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1812,6 +1824,15 @@ video {
   font-size: 12px;
 }
 
+.dsEcom-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.dsEcom-font-bold {
+  font-weight: 700;
+}
+
 .dsEcom-font-core-font-weight-extrabold {
   font-weight: 800;
 }
@@ -1836,6 +1857,11 @@ video {
   color: var(--primary-60) !important;
 }
 
+.dsEcom-text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
 .dsEcom-text-link-60 {
   color: var(--link-60);
 }
@@ -1873,6 +1899,14 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.dsEcom-opacity-0 {
+  opacity: 0;
+}
+
+.dsEcom-opacity-50 {
+  opacity: 0.5;
+}
+
 .dsEcom-shadow-upc-shadow-prominent {
   --tw-shadow: 0px 8px 48px -6px rgba(89, 89, 89, 0.24);
   --tw-shadow-colored: 0px 8px 48px -6px var(--tw-shadow-color);
@@ -1897,6 +1931,18 @@ video {
   transition-duration: 150ms;
 }
 
+.dsEcom-transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dsEcom-transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .dsEcom-duration-200 {
   transition-duration: 200ms;
 }
@@ -1909,16 +1955,78 @@ video {
   transition-duration: 0.3s;
 }
 
+.dsEcom-ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
 }
 
+/* Base theme variables with instant fallbacks */
+
+:root {
+  /* Theme Tokens - Colors */
+  --color-primary: #e50a17;
+  --color-primary-dark: #b70812;
+  --color-primary-darker: #89060e;
+  --color-secondary: #482783;
+  --color-secondary-light: #6d529c;
+  --color-secondary-dark: #331c5d;
+  --color-text-primary: #191919;
+  --color-text-secondary: #595959;
+  --color-background: #ffffff;
+  --color-surface: #fafafa;
+  --color-success: #359e29;
+  --color-error: #dc3545;
+  --color-warning: #fd6d21;
+  --color-info: #1762ca;
+  /* Typography */
+  --font-family-heading: "upc-font-family-zizou-slab";
+  --font-family-body: "core-font-family-public-sans";
+  --font-family-special: "upn-font-family-sharp-grotesk";
+}
+
+/* Custom theme overrides */
+
+:root {
+  --color-primary: var(--custom-color-primary, var(--color-primary));
+  --color-primary-dark: var(--custom-color-primary-dark, var(--color-primary-dark));
+  --color-primary-darker: var(--custom-color-primary-darker, var(--color-primary-darker));
+  --color-secondary: var(--custom-color-secondary, var(--color-secondary));
+  --color-secondary-light: var(--custom-color-secondary-light, var(--color-secondary-light));
+  --color-secondary-dark: var(--custom-color-secondary-dark, var(--color-secondary-dark));
+  --color-text-primary: var(--custom-color-text-primary, var(--color-text-primary));
+  --color-text-secondary: var(--custom-color-text-secondary, var(--color-text-secondary));
+  --color-background: var(--custom-color-background, var(--color-background));
+  --color-surface: var(--custom-color-surface, var(--color-surface));
+  --color-success: var(--custom-color-success, var(--color-success));
+  --color-error: var(--custom-color-error, var(--color-error));
+  --color-warning: var(--custom-color-warning, var(--color-warning));
+  --color-info: var(--custom-color-info, var(--color-info));
+  --font-family-heading: var(--custom-font-family-heading, var(--font-family-heading));
+  --font-family-body: var(--custom-font-family-body, var(--font-family-body));
+  --font-family-special: var(--custom-font-family-special, var(--font-family-special));
+}
+
+/* Font faces are now optional and can be overridden */
+
 @font-face {
   font-family: "upc-font-family-zizou-slab";
 
-  src: url("../src/assets/fonts/Slab/zizou-slab-bold.ttf") format("opentype");
+  src: var(--custom-font-heading-src, url("../src/assets/fonts/Slab/zizou-slab-bold.ttf")) format("opentype");
+
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "core-font-family-public-sans";
+
+  font-style: normal;
+
+  src: var(--custom-font-body-src, url("../src/assets/fonts/Sans/PublicSans-Regular.ttf")) format("opentype");
 
   font-display: swap;
 }
@@ -1950,16 +2058,6 @@ video {
   font-display: swap;
 }
 
-@font-face {
-  font-family: "core-font-family-public-sans";
-
-  font-style: normal;
-
-  src: url("../src/assets/fonts/Sans/PublicSans-Regular.ttf") format("opentype");
-
-  font-display: swap;
-}
-
 @font-face {
   font-family: "core-font-family-public-sans";
 
@@ -2143,10 +2241,19 @@ video {
   fill: var(--secondary-70);
 }
 
+.hover\:dsEcom-text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
+}
+
 .hover\:dsEcom-text-neutral-70:hover {
   color: var(--neutral-70);
 }
 
+.hover\:dsEcom-text-neutral-80:hover {
+  color: var(--neutral-80);
+}
+
 .hover\:dsEcom-text-primary-70:hover {
   color: var(--primary-70);
 }
@@ -2208,6 +2315,12 @@ video {
   display: block !important;
 }
 
+@media (min-width: 768px) {
+  .md\:dsEcom-w-\[350px\] {
+    width: 350px;
+  }
+}
+
 @media (min-width: 320px) and (max-width: 1024px) {
   .mobiles\:dsEcom-order-first {
     order: -9999;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lau-ecom-design-system",
   "private": false,
-  "version": "1.0.20",
+  "version": "1.0.21",
   "sourceType": "module",
   "sideEffects": false,
   "main": "dist/lau-ecom-design-system.ssr.js",
@@ -26,7 +26,8 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky"
+    "prepare": "husky",
+    "watch": "rollup -c -w"
   },
   "dependencies": {
     "vue": "^3.5.12"

package/src/components/LauEcomDropdown/LauEcomDropdown.vue

@@ -5,7 +5,6 @@ import {
   LauEcomUpcIconExclamationTriangle,
 } from "../LauEcomIcon";
 import { DropdownItem } from "./types";
-import { Colors } from "../../utils";
 
 interface Props {
   id?: string;
@@ -14,6 +13,9 @@ interface Props {
   placeholder?: string;
   dropdownItems: DropdownItem[];
   errorMessage?: string;
+  disabledColor?: string;
+  errorColor?: string;
+  defaultColor?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +24,9 @@ const props = withDefaults(defineProps<Props>(), {
   isDisabled: false,
   placeholder: "Placeholder",
   errorMessage: "",
+  disabledColor: "var(--neutral-70)",
+  errorColor: "var(--feedback-error-60)",
+  defaultColor: "var(--neutral-100)",
 });
 
 const isOpen = ref(false);
@@ -62,9 +67,9 @@ const lauEcomIconClasses = computed(() => {
 });
 
 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"];
+  if (props.isDisabled) return props.disabledColor;
+  if (props.errorMessage) return props.errorColor;
+  return props.defaultColor;
 });
 </script>
 
@@ -110,7 +115,7 @@ const iconArrowDownColor = computed(() => {
         <LauEcomUpcIconExclamationTriangle
           width="16"
           height="16"
-          :color="Colors['upc-color-red-60-base']"
+          :color="errorColor"
         />
       </span>
       <p class="dsEcom-ml-1">

package/src/components/LauEcomInput/LauEcomInput.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   type: "text",
   placeholder: "Placeholder",
   isDisabled: false,
-  label: "label",
+  label: "Text label",
   size: LauEcomSize.md,
   name: "input",
   modelValue: "",

package/src/components/LauEcomInput2/LauEcomInput2.vue

@@ -0,0 +1,207 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { LauEcomSize } from "../../enums";
+import {
+  LauEcomUpcIconExclamationTriangle,
+  LauEcomUpcIconNavCheckmark,
+} from "../LauEcomIcon";
+
+interface Props {
+  id?: string;
+  type?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  label?: string;
+  size?: LauEcomSize;
+  name?: string;
+  modelValue?: string | number;
+  inputContainerClass?: string;
+  inputClass?: string;
+  errorMessage?: string;
+  hasSuccess?: boolean;
+  limit?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "lauEcomInput",
+  type: "text",
+  placeholder: "Placeholder",
+  isDisabled: false,
+  label: "Text label",
+  size: LauEcomSize.md,
+  name: "input",
+  modelValue: "",
+  inputContainerClass: "",
+  inputClass: "",
+  errorMessage: "",
+  hasSuccess: false,
+  limit: 50,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const inputValue = ref(props.modelValue);
+const errorMessageValue = ref(props.errorMessage);
+
+const handleInput = (event: Event) => {
+  const newValue = (event.target as HTMLInputElement).value;
+
+  if (newValue.length === props.limit) {
+    errorMessageValue.value = "Excediste el numero de caracteres";
+    inputValue.value = newValue;
+    emit("update:modelValue", newValue);
+    return;
+  } else {
+    errorMessageValue.value = props.errorMessage;
+  }
+
+  inputValue.value = newValue;
+  emit("update:modelValue", newValue);
+};
+
+const labelClasses = computed(() => {
+  return {
+    "lau-ecom-label": true,
+    "lau-ecom-label--disabled": props.isDisabled,
+  };
+});
+
+const inputContainerClasses = computed(() => {
+  return [
+    "dsEcom-relative",
+    props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]",
+    props.size === LauEcomSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
+  ];
+});
+
+const inputClasses = computed(() => {
+  return [
+    "lau-ecom-input core-font-body-reg-04-16px",
+    props.inputClass,
+    props.size === LauEcomSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]",
+    { "lau-ecom-input--disabled": props.isDisabled },
+    { "lau-ecom-input--error": errorMessageValue.value },
+    { "lau-ecom-input-success": props.hasSuccess && !errorMessageValue.value },
+    props.hasSuccess || errorMessageValue.value
+      ? "placeholder:!dsEcom-text-neutral-100"
+      : "placeholder:!dsEcom-text-neutral-80",
+  ];
+});
+
+const successClasses = computed(() => {
+  return [
+    "lau-ecom-success",
+    props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
+  ];
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-flex-col">
+    <label v-if="label" :class="labelClasses">
+      {{ label }}
+    </label>
+    <div :class="inputContainerClasses">
+      <input
+        :id="id"
+        :class="inputClasses"
+        :type="type"
+        :placeholder="placeholder"
+        :name="name"
+        :disabled="isDisabled"
+        :value="inputValue"
+        :maxlength="limit"
+        @input="handleInput"
+      />
+      <div v-if="hasSuccess && !errorMessageValue" :class="successClasses">
+        <LauEcomUpcIconNavCheckmark
+          class="dsEcom-fill-feedback-success-60"
+          width="24"
+          height="24"
+        />
+      </div>
+      <div
+        v-if="errorMessageValue"
+        class="lau-ecom-error-message core-font-body-reg-06-12px"
+      >
+        <div class="dsEcom-flex">
+          <LauEcomUpcIconExclamationTriangle
+            class="dsEcom-fill-primary-60"
+            width="16"
+            height="16"
+          />
+          <p class="dsEcom-ml-1">
+            {{ errorMessageValue }}
+          </p>
+        </div>
+
+        <span v-if="inputValue.toString().length === limit">
+          {{ `${inputValue.toString().length}/${limit}` }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.lau-ecom-label {
+  @apply dsEcom-block  
+    dsEcom-text-neutral-100
+    dsEcom-font-core-font-family-public-sans
+    dsEcom-text-[12px]
+    dsEcom-font-core-font-weight-extrabold
+    dsEcom-leading-[18px];
+}
+
+.lau-ecom-label--disabled {
+  @apply !dsEcom-text-neutral-70;
+}
+
+.lau-ecom-input {
+  @apply dsEcom-w-full 
+    dsEcom-pl-3 
+    dsEcom-pr-[44px] 
+    dsEcom-rounded-sm
+    dsEcom-border 
+    dsEcom-border-neutral-80
+    hover:dsEcom-border-stroke-secondary-60
+    focus:dsEcom-border-stroke-secondary-60 focus:!dsEcom-text-neutral-100
+    focus-visible:dsEcom-outline-none
+    disabled:placeholder:dsEcom-text-neutral-70 disabled:dsEcom-bg-neutral-20
+    disabled:!dsEcom-border-neutral-70;
+}
+
+.lau-ecom-input--disabled {
+  @apply !dsEcom-text-neutral-70;
+}
+
+.lau-ecom-input--error {
+  @apply !dsEcom-border-feedback-error-60;
+}
+
+.lau-ecom-input-success {
+  @apply !dsEcom-border-feedback-success-60
+    placeholder:!dsEcom-text-neutral-100;
+}
+
+.lau-ecom-error-message {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-mt-[2px]
+    dsEcom-justify-between
+    dsEcom-text-primary-60;
+}
+
+.lau-ecom-success {
+  @apply dsEcom-absolute
+    dsEcom-right-3;
+}
+</style>