lau-ecom-design-system 1.0.19 → 1.0.20

package/src/components/LauEcomDropdown/LauEcomDropdown.vue

@@ -1,203 +1,203 @@
-<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";
+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>

package/src/components/LauEcomFooter/LauEcomFooter.vue

@@ -1,28 +1,20 @@
 <script setup lang="ts">
-// import { computed } from 'vue';
-import { computed } from "vue";
-import { LauEcomInstance } from "../../enums";
-import { Colors } from "../../utils";
 import {
-  LauEcomCbtLogoLaureate,
-  LauEcomCbtLogoUpcWhite,
   LauEcomCoreIconBook,
   LauEcomLogoWasc,
   LauEcomUpcIconInnova,
 } from "../LauEcomIcon";
-import LauEcomCbtLogoCbtVer from "../LauEcomIcon/LauEcomCbtLogoCbtVer.vue";
 import LauEcomSubFooter from "./LauEcomSubFooter.vue";
 
 interface Props {
-  instance?: LauEcomInstance;
   urlPrivacyPolicy?: string;
   urlTermAndConditions?: string;
   urlComplaintsBook?: string;
   urlPdpArco?: string;
+  institutionName?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
+withDefaults(defineProps<Props>(), {
   urlContact: "https://www.upc.edu.pe/servicios/contacto-para-alumnos-upc/",
   urlPrivacyPolicy:
     "https://www.upc.edu.pe/html/politica-y-terminos/0/politica-privacidad.htm",
@@ -30,46 +22,23 @@ const props = withDefaults(defineProps<Props>(), {
     "https://www.upc.edu.pe/html/politica-y-terminos/0/terminos-condiciones.htm",
   urlComplaintsBook: "https://librodereclamaciones.upc.edu.pe/",
   urlPdpArco: "https://upc.edu.pe/proteccion-de-datos/",
-});
-
-const isUpcInstance = computed(() => {
-  return props.instance === LauEcomInstance.Upc;
-});
-
-const isCbtInstance = computed(() => {
-  return props.instance === LauEcomInstance.Cibertec;
-});
-
-const lauEcomFooterLogosClasses = computed(() => {
-  return {
-    "lau-ecom-footer-logos": true,
-    "lau-ecom-footer-logos--upc": isUpcInstance.value,
-    "lau-ecom-footer-logos--cbt": isCbtInstance.value,
-  };
-});
-
-const lauEcomTermnsClasses = computed(() => {
-  return {
-    "lau-ecom-termns": true,
-    "lau-ecom-termns--upc": isUpcInstance.value,
-    "lau-ecom-termns--cbt": isCbtInstance.value,
-  };
+  institutionName: "Universidad Peruana de Ciencias Aplicadas",
 });
 </script>
 
 <template>
   <footer>
-    <LauEcomSubFooter :instance="instance" />
+    <LauEcomSubFooter />
     <div class="dsEcom-flex dsEcom-flex-col">
-      <div :class="lauEcomFooterLogosClasses">
+      <div class="lau-ecom-footer-logos lau-ecom-footer-logos--upc">
         <div
-          class="dsEcom-flex mobiles:dsEcom-w-full mobiles:dsEcom-justify-center mobiles:dsEcom-border-b-2 mobiles:dsEcom-border-b-upc-color-neutral-40"
+          class="dsEcom-flex mobiles:dsEcom-w-full mobiles:dsEcom-justify-center mobiles:dsEcom-border-b-2 mobiles:dsEcom-border-b-neutral-40"
         >
-          <span v-if="isUpcInstance">
-            <LauEcomUpcIconInnova />
+          <span v-if="$slots.mainLogo">
+            <slot name="mainLogo" />
           </span>
-          <span v-if="isCbtInstance">
-            <LauEcomCbtLogoCbtVer />
+          <span v-else>
+            <LauEcomUpcIconInnova />
           </span>
         </div>
         <div
@@ -81,42 +50,30 @@ const lauEcomTermnsClasses = computed(() => {
           <div
             class="dsEcom-flex dsEcom-items-center mobiles:dsEcom-flex-col mobiles:dsEcom-gap-8"
           >
+            <span v-if="$slots.sponsorLogo">
+              <slot name="sponsorLogo" />
+            </span>
             <span
-              v-if="isUpcInstance"
-              class="dsEcom-pr-[51px] dsEcom-py-3 dsEcom-border-r-2 dsEcom-border-r-upc-color-neutral-50 mobiles:dsEcom-pr-0 mobiles:dsEcom-border-r-0 mobiles:dsEcom-py-0"
+              v-else
+              class="dsEcom-pr-[51px] dsEcom-py-3 dsEcom-border-r-2 dsEcom-border-r-neutral-50 mobiles:dsEcom-pr-0 mobiles:dsEcom-border-r-0 mobiles:dsEcom-py-0"
             >
               <LauEcomLogoWasc />
             </span>
-            <div
-              v-if="isCbtInstance"
-              class="dsEcom-flex mobiles:dsEcom-flex-col mobiles:dsEcom-gap-8"
-            >
-              <span
-                class="dsEcom-pr-[51px] dsEcom-py-2 dsEcom-border-r-2 dsEcom-border-r-color-cbt-color-neutral-50 mobiles:dsEcom-py-0 mobiles:dsEcom-pr-0 mobiles:dsEcom-border-r-0"
-              >
-                <LauEcomCbtLogoLaureate />
-              </span>
-              <span
-                class="dsEcom-px-[51px] dsEcom-py-2 dsEcom-border-r-2 dsEcom-border-r-color-cbt-color-neutral-50 mobiles:dsEcom-px-0 mobiles:dsEcom-py-0 mobiles:dsEcom-border-r-0"
-              >
-                <LauEcomCbtLogoUpcWhite />
-              </span>
-            </div>
             <div
               class="dsEcom-flex dsEcom-items-center dsEcom-pl-[51px] mobiles:dsEcom-pl-0"
             >
               <span>
                 <LauEcomCoreIconBook
+                  class="dsEcom-fill-link-60"
                   width="56"
                   height="56"
-                  :color="Colors['core-color-blue-60-base']"
                 />
               </span>
               <a
                 :href="urlComplaintsBook"
                 target="_blank"
                 rel="nofollow"
-                class="core-font-body-bold-04-16px dsEcom-text-core-color-blue-60-base"
+                class="core-font-body-bold-04-16px dsEcom-text-link-60"
               >
                 Libro de reclamaciones
               </a>
@@ -124,10 +81,9 @@ const lauEcomTermnsClasses = computed(() => {
           </div>
         </div>
       </div>
-      <div :class="lauEcomTermnsClasses">
-        <!-- ToDo: Add links para terminos y politicas -->
+      <div class="lau-ecom-termns lau-ecom-termns--upc">
         <div
-          class="dsEcom-flex dsEcom-gap-1 core-font-link-03-14px dsEcom-text-core-color-blue-60-base mobiles:dsEcom-block mobiles:dsEcom-text-center"
+          class="dsEcom-flex dsEcom-gap-1 core-font-link-03-14px dsEcom-text-link-60 mobiles:dsEcom-block mobiles:dsEcom-text-center"
         >
           <a :href="urlPrivacyPolicy" target="_blank" rel="nofollow">
             Politica de Privacidad
@@ -142,9 +98,8 @@ const lauEcomTermnsClasses = computed(() => {
           </a>
         </div>
         <div class="core-font-body-reg-05-14px mobiles:dsEcom-text-center">
-          <p v-if="isUpcInstance">Universidad Peruana de Ciencias Aplicadas</p>
-          <p v-if="isCbtInstance">
-            Instituto de Educacion Superior Privado Cibertec S.A.C
+          <p>
+            {{ institutionName }}
           </p>
         </div>
       </div>
@@ -165,11 +120,11 @@ const lauEcomTermnsClasses = computed(() => {
 }
 
 .lau-ecom-footer-logos--upc {
-  @apply dsEcom-bg-upc-color-neutral-20;
+  @apply dsEcom-bg-neutral-20;
 }
 
 .lau-ecom-footer-logos--cbt {
-  @apply dsEcom-bg-color-cbt-color-neutral-20;
+  @apply dsEcom-bg-neutral-20;
 }
 
 .lau-ecom-termns {
@@ -185,10 +140,6 @@ const lauEcomTermnsClasses = computed(() => {
 }
 
 .lau-ecom-termns--upc {
-  @apply dsEcom-bg-upc-color-neutral-30;
-}
-
-.lau-ecom-termns--cbt {
-  @apply dsEcom-bg-color-cbt-color-neutral-30;
+  @apply dsEcom-bg-neutral-30;
 }
 </style>

package/src/components/LauEcomFooter/LauEcomSubFooter.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import LauEcomSubFooterCategory from "./LauEcomSubFooterCategory.vue";
 import { Category } from "./types";
-import { LauEcomInstance } from "../../enums";
 
 interface Props {
-  instance?: LauEcomInstance;
   categories?: Category[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
+withDefaults(defineProps<Props>(), {
   categories: () => {
     return [
       {
@@ -58,42 +54,20 @@ const props = withDefaults(defineProps<Props>(), {
     ];
   },
 });
-
-const isUpcInstance = computed(() => {
-  return props.instance === LauEcomInstance.Upc;
-});
-
-const isCbtInstance = computed(() => {
-  return props.instance === LauEcomInstance.Cibertec;
-});
-
-const lauEcomSubFooterClasses = computed(() => {
-  return {
-    "dsEcom-bg-upc-color-neutral-20": isUpcInstance.value,
-    "dsEcom-bg-color-cbt-color-neutral-20": isCbtInstance.value,
-  };
-});
-
-const subFooterLineClasses = computed(() => {
-  return {
-    "dsEcom-mx-[91px] dsEcom-h-[2px] mobiles:dsEcom-hidden": true,
-    "dsEcom-bg-upc-color-neutral-50": isUpcInstance.value,
-    "dsEcom-bg-color-cbt-color-neutral-50": isCbtInstance.value,
-  };
-});
 </script>
 
 <template>
-  <div :class="lauEcomSubFooterClasses">
+  <div class="dsEcom-bg-neutral-20">
     <div class="lau-ecom-sub-footer-wrapper">
       <LauEcomSubFooterCategory
         v-for="(category, index) in categories"
         :key="`sub-footer-category-${index + 1}`"
-        :instance="instance"
         :category-data="category"
       />
     </div>
-    <hr :class="subFooterLineClasses" />
+    <hr
+      class="dsEcom-mx-[91px] dsEcom-h-[2px] mobiles:dsEcom-hidden dsEcom-bg-neutral-50"
+    />
   </div>
 </template>