lau-ecom-design-system 1.0.0

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "lau-ecom-design-system",
+  "private": false,
+  "version": "1.0.0",
+  "sourceType": "module",
+  "sideEffects": false,
+  "main": "dist/lau-ecom-design-system.ssr.js",
+  "module": "dist/lau-ecom-design-system.esm.js",
+  "browser": "dist/lau-ecom-design-system.esm.js",
+  "unpkg": "dist/pe-lau-ecom-design-system.min.js",
+  "files": [
+    "dist/*",
+    "dist/types/",
+    "src/**/*.vue",
+    "src/**/*.otf",
+    "src/enums/*.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup --bundleConfigAsCjs --config ./rollup.config.js && npm run start ",
+    "build:ssr": "rollup --config ./rollup.config.js --format cjs",
+    "build:es": "rollup --config ./rollup.config.js --format es",
+    "build:unpkg": "rollup --config ./rollup.config.js --format iife",
+    "start": "npx tailwindcss -i ./src/main.css -o ./dist/style.css",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-typescript": "^7.25.9",
+    "@chromatic-com/storybook": "1.9.0",
+    "@eslint/js": "^9.13.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/addon-onboarding": "8.3.6",
+    "@storybook/addon-styling-webpack": "1.0.0",
+    "@storybook/blocks": "8.3.6",
+    "@storybook/test": "8.3.6",
+    "@storybook/vue3": "8.3.6",
+    "@storybook/vue3-vite": "8.3.6",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "minimist": "^1.2.8",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "pretty-quick": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "storybook": "8.3.6",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.9",
+    "vue-tsc": "^2.1.6"
+  }
+}

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import { LauEcomButtonType } from "../LauEcomButton/types";
+import { LauEcomInstance } from "../../enums";
+
+interface Props {
+  instance?: LauEcomInstance;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
+});
+
+const emit = defineEmits(["onConfigCookies", "onAccept"]);
+
+const handleConfigCookies = () => {
+  emit("onConfigCookies");
+};
+
+const handleAccept = () => {
+  emit("onAccept");
+};
+
+const lauEcomBannerCookiesClasses = computed(() => {
+  return {
+    "lau-ecom-cookies": true,
+    "lau-ecom-cookies--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-cookies--cib": props.instance === LauEcomInstance.Cibertec,
+  };
+});
+
+const lauEcomBannerCookiesTextClasses = computed(() => {
+  return {
+    "lau-ecom-text": true,
+    "core-font-body-reg-04-16px": true,
+    "lau-ecom-text--upc": props.instance === LauEcomInstance.Upc,
+    "lau-ecom-text--cib": props.instance === LauEcomInstance.Cibertec,
+  };
+});
+</script>
+
+<template>
+  <div :class="lauEcomBannerCookiesClasses">
+    <p :class="lauEcomBannerCookiesTextClasses">
+      Este sitio web utiliza cookies gracias a esto podemos personalizar los
+      ingresos a la web en futuras visitas y brindarte una mejor experiencia
+      dentro de nuestro sitio. <a>Conoce más</a>
+    </p>
+    <div class="lau-ecom-buttons">
+      <LauEcomButton
+        :instance="instance"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleConfigCookies"
+      >
+        Configurar cookies
+      </LauEcomButton>
+      <LauEcomButton :instance="instance" @on-click="handleAccept">
+        Aceptar
+      </LauEcomButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-cookies {
+  @apply dsEcom-w-full
+    dsEcom-py-[32px]
+    dsEcom-px-[64px]
+    dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-20
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-flex-col
+    mobiles:dsEcom-px-[24px];
+}
+
+.lau-ecom-cookies--upc {
+  @apply dsEcom-text-upc-color-neutral-20;
+}
+
+.lau-ecom-cookies--cib {
+  @apply dsEcom-text-color-cbt-color-neutral-20;
+}
+
+.lau-ecom-text {
+  @apply dsEcom-block
+    dsEcom-w-[883px]
+    mobiles:dsEcom-w-full;
+}
+
+.lau-ecom-text--upc {
+  @apply dsEcom-text-upc-color-neutral-90;
+}
+
+.lau-ecom-text--cib {
+  @apply dsEcom-text-color-cbt-color-neutral-80;
+}
+
+.lau-ecom-buttons {
+  @apply dsEcom-flex
+    dsEcom-gap-8
+    mobiles:dsEcom-self-end;
+}
+</style>

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { computed, reactive } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import { LauEcomButtonType } from "../LauEcomButton/types";
+import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
+import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
+import { CookieItem } from "./types";
+import { LauEcomInstance } from "../../enums";
+
+interface Props {
+  cookiesItems?: CookieItem[];
+  instance?: LauEcomInstance;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cookiesItems: () => {
+    return [
+      {
+        title: "Esenciales",
+        text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+      },
+      {
+        title: "Preferencias",
+        text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+      },
+      {
+        title: "Estadisticas",
+        text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+      },
+      {
+        title: "Marketing",
+        text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+      },
+    ];
+  },
+  instance: LauEcomInstance.Upc,
+});
+
+const items = reactive(props.cookiesItems);
+
+const emit = defineEmits(["onClose", "onReject", "onRejectAll", "onAccept"]);
+
+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 handleCloseConfig = () => {
+  emit("onClose");
+};
+
+const handleReject = () => {
+  emit("onReject");
+};
+
+const handleRejectAll = () => {
+  emit("onRejectAll");
+};
+
+const handleAccept = () => {
+  const itemsConfig = items.map((item) => item.isChecked);
+  console.log(itemsConfig);
+  emit("onAccept");
+};
+</script>
+
+<template>
+  <div :class="bannerCookiesConfigClasses">
+    <div class="lau-ecom-banner-cookies-config-head">
+      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
+      <button @click="handleCloseConfig">
+        <span><LauEcomCoreIconNavClose /></span>
+      </button>
+    </div>
+    <div>
+      <LauEcomBannerCookiesConfigAccordion
+        v-for="(item, index) in items"
+        :key="`cookie-config-${index + 1}`"
+        v-model="item.isChecked"
+        :cookie-item="item"
+      />
+    </div>
+    <div class="lau-ecom-banner-cookies-buttons">
+      <LauEcomButton
+        class="!dsEcom-w-full mobiles:dsEcom-order-last"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleReject"
+      >
+        Rechazar
+      </LauEcomButton>
+      <LauEcomButton
+        class="!dsEcom-w-full"
+        :type="LauEcomButtonType.Secondary"
+        @on-click="handleRejectAll"
+      >
+        Aceptar seleccionadas
+      </LauEcomButton>
+      <LauEcomButton
+        class="!dsEcom-w-full mobiles:dsEcom-order-first"
+        @on-click="handleAccept"
+      >
+        Aceptar todas
+      </LauEcomButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-banner-cookies-config {
+  @apply dsEcom-flex
+    dsEcom-flex-col
+    dsEcom-gap-10
+    dsEcom-absolute
+    dsEcom-top-1/2
+    dsEcom-left-1/2
+    dsEcom-transform
+    -dsEcom-translate-x-1/2
+    -dsEcom-translate-y-1/2
+    dsEcom-pt-6
+    dsEcom-pb-8
+    dsEcom-px-6
+    dsEcom-w-[584px]
+    dsEcom-h-auto
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-gap-8
+    mobiles:dsEcom-w-[360px];
+}
+
+.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;
+}
+
+.lau-ecom-banner-cookies-config-head {
+  @apply dsEcom-flex 
+    dsEcom-justify-between 
+    dsEcom-items-center;
+}
+
+.lau-ecom-banner-cookies-buttons {
+  @apply dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-4
+    mobiles:dsEcom-flex-col;
+}
+</style>

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue

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

package/src/components/LauEcomButton/LauEcomButton.vue

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

package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue

@@ -0,0 +1,133 @@
+<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": true,
+    "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
+    hover:dsEcom-border-upc-color-red-80
+    dsEcom-transition
+    dsEcom-duration-200
+    after:dsEcom-absolute
+    after:dsEcom-left-0
+    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--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>