lau-ecom-design-system 1.0.19 → 1.0.21

package/src/components/LauEcomRtb/LauEcomRtb.vue

@@ -1,71 +1,71 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import {
-  LauEcomUpcIconCertificate,
-  LauEcomUpcIconCreditCard,
-  LauEcomUpcIconVirtualClass,
-} from "../LauEcomIcon";
-import { RtbType } from "./types";
-
-interface Props {
-  type?: RtbType;
-  title?: string;
-  text?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: RtbType.modalidad,
-  title: "Aprenderas Haciendo",
-  text: "Resolverás casos reales, a través de clases prácticas. Obtendrás conocimiento para aplicarla en tu trabajo o proyecto personal.",
-});
-
-const isModalidadType = computed(() => {
-  return props.type === RtbType.modalidad;
-});
-
-const isCertificacionType = computed(() => {
-  return props.type === RtbType.certificacion;
-});
-
-const isMetodopagoType = computed(() => {
-  return props.type === RtbType.metodopago;
-});
-</script>
-
-<template>
-  <div
-    v-if="isModalidadType"
-    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
-  >
-    <LauEcomUpcIconVirtualClass
-      class="dsEcom-fill-secondary-60"
-      width="32"
-      height="32"
-    />
-    Virtual en vivo
-  </div>
-  <div
-    v-if="isCertificacionType"
-    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
-  >
-    <LauEcomUpcIconCertificate
-      class="dsEcom-fill-secondary-60"
-      width="32"
-      height="32"
-    />
-    Certificado de EPG | UPC
-  </div>
-  <div
-    v-if="isMetodopagoType"
-    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
-  >
-    <LauEcomUpcIconCreditCard
-      class="dsEcom-fill-secondary-60"
-      width="32"
-      height="32"
-    />
-    Hasta 12 cuotas sin intereses en TC Dinners y BBVA
-  </div>
-</template>
-
-<style scoped></style>
+<script lang="ts" setup>
+import { computed } from "vue";
+import {
+  LauEcomUpcIconCertificate,
+  LauEcomUpcIconCreditCard,
+  LauEcomUpcIconVirtualClass,
+} from "../LauEcomIcon";
+import { RtbType } from "./types";
+
+interface Props {
+  type?: RtbType;
+  title?: string;
+  text?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: RtbType.modalidad,
+  title: "Aprenderas Haciendo",
+  text: "Resolverás casos reales, a través de clases prácticas. Obtendrás conocimiento para aplicarla en tu trabajo o proyecto personal.",
+});
+
+const isModalidadType = computed(() => {
+  return props.type === RtbType.modalidad;
+});
+
+const isCertificacionType = computed(() => {
+  return props.type === RtbType.certificacion;
+});
+
+const isMetodopagoType = computed(() => {
+  return props.type === RtbType.metodopago;
+});
+</script>
+
+<template>
+  <div
+    v-if="isModalidadType"
+    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+  >
+    <LauEcomUpcIconVirtualClass
+      class="dsEcom-fill-secondary-60"
+      width="32"
+      height="32"
+    />
+    Virtual en vivo
+  </div>
+  <div
+    v-if="isCertificacionType"
+    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+  >
+    <LauEcomUpcIconCertificate
+      class="dsEcom-fill-secondary-60"
+      width="32"
+      height="32"
+    />
+    Certificado de EPG | UPC
+  </div>
+  <div
+    v-if="isMetodopagoType"
+    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
+  >
+    <LauEcomUpcIconCreditCard
+      class="dsEcom-fill-secondary-60"
+      width="32"
+      height="32"
+    />
+    Hasta 12 cuotas sin intereses en TC Dinners y BBVA
+  </div>
+</template>
+
+<style scoped></style>

package/src/components/LauEcomStepbar/LauEcomStepbar.vue

@@ -1,43 +1,43 @@
-<script lang="ts" setup>
-import { Step } from "./types";
-import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
-interface Props {
-  steps: Step[];
-  currentStep: number;
-}
-withDefaults(defineProps<Props>(), {
-  steps: () => [
-    {
-      numberStep: 1,
-      label: "Step",
-    },
-    {
-      numberStep: 2,
-      label: "Step",
-    },
-    {
-      numberStep: 3,
-      label: "Step",
-    },
-    {
-      numberStep: 4,
-      label: "Step",
-    },
-  ],
-  currentStep: 1,
-});
-</script>
-
-<template>
-  <div class="dsEcom-flex dsEcom-w-full">
-    <LauEcomStepbarItem
-      v-for="(step, index) in steps"
-      :key="`lau-ecom-stepbar-item-${index + 1}`"
-      :step="step"
-      :is-completed="currentStep > index + 1"
-      :is-current-step="currentStep === index + 1"
-      :is-last-item="index === steps.length - 1"
-      :total-steps="steps.length"
-    />
-  </div>
-</template>
+<script lang="ts" setup>
+import { Step } from "./types";
+import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
+interface Props {
+  steps: Step[];
+  currentStep: number;
+}
+withDefaults(defineProps<Props>(), {
+  steps: () => [
+    {
+      numberStep: 1,
+      label: "Step",
+    },
+    {
+      numberStep: 2,
+      label: "Step",
+    },
+    {
+      numberStep: 3,
+      label: "Step",
+    },
+    {
+      numberStep: 4,
+      label: "Step",
+    },
+  ],
+  currentStep: 1,
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-w-full">
+    <LauEcomStepbarItem
+      v-for="(step, index) in steps"
+      :key="`lau-ecom-stepbar-item-${index + 1}`"
+      :step="step"
+      :is-completed="currentStep > index + 1"
+      :is-current-step="currentStep === index + 1"
+      :is-last-item="index === steps.length - 1"
+      :total-steps="steps.length"
+    />
+  </div>
+</template>

package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue

@@ -1,128 +1,128 @@
-<script lang="ts" setup>
-import { computed, toRefs } from "vue";
-import { Step } from "./types";
-import { LauEcomUpcIconCheck } from "../LauEcomIcon";
-
-interface Props {
-  step: Step;
-  totalSteps: number;
-  isCurrentStep: boolean;
-  isCompleted: boolean;
-  isLastItem: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  step: () => ({
-    numberStep: 1,
-    label: "Step,",
-  }),
-  totalSteps: 10,
-  isCurrentStep: false,
-  isCompleted: false,
-  isLastItem: false,
-});
-
-const { numberStep, label } = toRefs(props.step);
-
-const stepbarItemClasses = computed(() => {
-  return [
-    "lau-ecom-step upc-font-body-reg-05-14px",
-    {
-      "lau-ecom-step--current-upc": props.isCurrentStep,
-    },
-    {
-      "lau-ecom-step--completed-upc": props.isCompleted,
-    },
-  ];
-});
-
-const stepTrailClasses = computed(() => {
-  return [
-    "lau-ecom-step-trail",
-    {
-      "lau-ecom-step-trail--completed-upc": props.isCompleted,
-    },
-  ];
-});
-
-const stepLabelClasses = computed(() => {
-  return [
-    "lau-ecom-step-label core-font-body-reg-06-12px lau-ecom-step-label--upc",
-    {
-      "lau-ecom-step-label--disabled":
-        !props.isCompleted && !props.isCurrentStep,
-    },
-    {
-      "lau-ecom-step-label--current": props.isCurrentStep,
-    },
-  ];
-});
-</script>
-
-<template>
-  <div class="dsEcom-w-full">
-    <div class="dsEcom-flex dsEcom-items-center dsEcom-w-full">
-      <div :class="stepbarItemClasses">
-        <span v-if="!props.isCompleted">
-          {{ `${numberStep < 10 && "0"}${numberStep}` }}
-        </span>
-        <LauEcomUpcIconCheck
-          v-else
-          class="dsEcom-fill-neutral-10"
-          width="24"
-          height="24"
-        />
-      </div>
-      <span v-if="!isLastItem" :class="stepTrailClasses" />
-    </div>
-    <span :class="stepLabelClasses">{{ label }}</span>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-step {
-  @apply dsEcom-flex 
-    dsEcom-items-center
-    dsEcom-justify-center 
-    dsEcom-border 
-    dsEcom-border-neutral-70 
-    dsEcom-text-neutral-70 
-    dsEcom-bg-neutral-10
-    dsEcom-w-8 
-    dsEcom-h-8
-    dsEcom-rounded-full;
-}
-
-.lau-ecom-step--completed-upc {
-  @apply !dsEcom-text-neutral-10 
-    !dsEcom-bg-primary-60 
-    dsEcom-border-primary-60;
-}
-
-.lau-ecom-step--current-upc {
-  @apply !dsEcom-text-primary-60 
-    dsEcom-border-primary-60;
-}
-
-.lau-ecom-step-trail {
-  @apply dsEcom-bg-neutral-70 
-    dsEcom-grow 
-    !dsEcom-h-[1px];
-}
-
-.lau-ecom-step-trail--completed-upc {
-  @apply !dsEcom-bg-primary-60;
-}
-
-.lau-ecom-step-label--upc {
-  @apply dsEcom-text-primary-60;
-}
-
-.lau-ecom-step-label--current {
-  @apply dsEcom-font-bold;
-}
-
-.lau-ecom-step-label--disabled {
-  @apply dsEcom-text-neutral-70;
-}
-</style>
+<script lang="ts" setup>
+import { computed, toRefs } from "vue";
+import { Step } from "./types";
+import { LauEcomUpcIconCheck } from "../LauEcomIcon";
+
+interface Props {
+  step: Step;
+  totalSteps: number;
+  isCurrentStep: boolean;
+  isCompleted: boolean;
+  isLastItem: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  step: () => ({
+    numberStep: 1,
+    label: "Step,",
+  }),
+  totalSteps: 10,
+  isCurrentStep: false,
+  isCompleted: false,
+  isLastItem: false,
+});
+
+const { numberStep, label } = toRefs(props.step);
+
+const stepbarItemClasses = computed(() => {
+  return [
+    "lau-ecom-step upc-font-body-reg-05-14px",
+    {
+      "lau-ecom-step--current-upc": props.isCurrentStep,
+    },
+    {
+      "lau-ecom-step--completed-upc": props.isCompleted,
+    },
+  ];
+});
+
+const stepTrailClasses = computed(() => {
+  return [
+    "lau-ecom-step-trail",
+    {
+      "lau-ecom-step-trail--completed-upc": props.isCompleted,
+    },
+  ];
+});
+
+const stepLabelClasses = computed(() => {
+  return [
+    "lau-ecom-step-label core-font-body-reg-06-12px lau-ecom-step-label--upc",
+    {
+      "lau-ecom-step-label--disabled":
+        !props.isCompleted && !props.isCurrentStep,
+    },
+    {
+      "lau-ecom-step-label--current": props.isCurrentStep,
+    },
+  ];
+});
+</script>
+
+<template>
+  <div class="dsEcom-w-full">
+    <div class="dsEcom-flex dsEcom-items-center dsEcom-w-full">
+      <div :class="stepbarItemClasses">
+        <span v-if="!props.isCompleted">
+          {{ `${numberStep < 10 && "0"}${numberStep}` }}
+        </span>
+        <LauEcomUpcIconCheck
+          v-else
+          class="dsEcom-fill-neutral-10"
+          width="24"
+          height="24"
+        />
+      </div>
+      <span v-if="!isLastItem" :class="stepTrailClasses" />
+    </div>
+    <span :class="stepLabelClasses">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-step {
+  @apply dsEcom-flex 
+    dsEcom-items-center
+    dsEcom-justify-center 
+    dsEcom-border 
+    dsEcom-border-neutral-70 
+    dsEcom-text-neutral-70 
+    dsEcom-bg-neutral-10
+    dsEcom-w-8 
+    dsEcom-h-8
+    dsEcom-rounded-full;
+}
+
+.lau-ecom-step--completed-upc {
+  @apply !dsEcom-text-neutral-10 
+    !dsEcom-bg-primary-60 
+    dsEcom-border-primary-60;
+}
+
+.lau-ecom-step--current-upc {
+  @apply !dsEcom-text-primary-60 
+    dsEcom-border-primary-60;
+}
+
+.lau-ecom-step-trail {
+  @apply dsEcom-bg-neutral-70 
+    dsEcom-grow 
+    !dsEcom-h-[1px];
+}
+
+.lau-ecom-step-trail--completed-upc {
+  @apply !dsEcom-bg-primary-60;
+}
+
+.lau-ecom-step-label--upc {
+  @apply dsEcom-text-primary-60;
+}
+
+.lau-ecom-step-label--current {
+  @apply dsEcom-font-bold;
+}
+
+.lau-ecom-step-label--disabled {
+  @apply dsEcom-text-neutral-70;
+}
+</style>