lau-ecom-design-system 1.0.16 → 1.0.18

package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue

@@ -1,115 +1,103 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from "vue";
-import { LauEcomInstance } from "../../enums";
-
-interface Props {
-  instance?: LauEcomInstance;
-  id?: string;
-  label?: string;
-  value?: string | number | boolean;
-  modelValue?: string | number | boolean;
-  isRequired?: boolean;
-  isDisabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
-  id: "",
-  label: "default",
-  value: "",
-  modelValue: "",
-  isRequired: false,
-  isDisabled: false,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string];
-}>();
-
-const lauEcomRadioButtonClasses = computed(() => {
-  return {
-    "lau-ecom-radio-button": true,
-    "lau-ecom-radio-button--upc": props.instance === LauEcomInstance.Upc,
-    "lau-ecom-radio-button--cbt": props.instance === LauEcomInstance.Cibertec,
-    "lau-ecom-radio-button--disabled": props.isDisabled,
-    "lau-ecom-radio-button--required": props.isRequired,
-  };
-});
-
-const radioGroupValue = ref(props.modelValue);
-
-const handleChange = () => {
-  emit("update:modelValue", String(props.value));
-};
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    radioGroupValue.value = newValue;
-  },
-);
-</script>
-
-<template>
-  <label>
-    <input
-      :id="id"
-      v-model="radioGroupValue"
-      :class="lauEcomRadioButtonClasses"
-      type="radio"
-      :disabled="isDisabled"
-      :value="value"
-      @change="handleChange"
-    />
-    <span :for="id">{{ label }}</span>
-  </label>
-</template>
-
-<style scoped>
-.lau-ecom-radio-button {
-  @apply dsEcom-relative
-    dsEcom-float-left
-    dsEcom-mr-2
-    dsEcom-h-5
-    dsEcom-w-5
-    dsEcom-appearance-none
-    dsEcom-rounded-full
-    dsEcom-border-[1px]
-    dsEcom-border-solid
-    dsEcom-border-upc-color-neutral-90 
-    checked:before:dsEcom-opacity-[0.16] 
-    checked:after:dsEcom-content-[''] 
-    checked:after:dsEcom-absolute 
-    checked:after:dsEcom-left-1/2 
-    checked:after:dsEcom-top-1/2 
-    checked:after:dsEcom-h-3 
-    checked:after:dsEcom-w-3 
-    checked:after:dsEcom-rounded-full  
-    checked:after:[transform:translate(-50%,-50%)] 
-    checked:focus:before:dsEcom-scale-100;
-}
-
-.lau-ecom-radio-button--upc {
-  @apply hover:dsEcom-border-upc-color-red-60-base
-    checked:dsEcom-border-upc-color-red-60-base
-    checked:after:dsEcom-bg-upc-color-red-60-base
-    checked:focus:dsEcom-border-upc-color-red-60-base;
-}
-
-.lau-ecom-radio-button--cbt {
-  @apply hover:dsEcom-border-cbt-color-apple-green-60-base
-    checked:dsEcom-border-cbt-color-apple-green-60-base
-    checked:after:dsEcom-bg-cbt-color-apple-green-60-base
-    checked:focus:dsEcom-border-cbt-color-apple-green-60-base;
-}
-
-.lau-ecom-radio-button--disabled {
-  @apply !dsEcom-border-upc-color-neutral-50
-  checked:after:dsEcom-bg-upc-color-neutral-50 
-  disabled:dsEcom-cursor-not-allowed;
-}
-
-.lau-ecom-radio-button--required {
-  @apply dsEcom-border-upc-color-red-60-base;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+
+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: "default",
+  value: "",
+  modelValue: "",
+  isRequired: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const lauEcomRadioButtonClasses = computed(() => {
+  return {
+    "lau-ecom-radio-button lau-ecom-radio-button--upc": true,
+    "lau-ecom-radio-button--disabled": props.isDisabled,
+    "lau-ecom-radio-button--required": props.isRequired,
+  };
+});
+
+const radioGroupValue = ref(props.modelValue);
+
+const handleChange = () => {
+  emit("update:modelValue", String(props.value));
+};
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    radioGroupValue.value = newValue;
+  },
+);
+</script>
+
+<template>
+  <label>
+    <input
+      :id="id"
+      v-model="radioGroupValue"
+      :class="lauEcomRadioButtonClasses"
+      type="radio"
+      :disabled="isDisabled"
+      :value="value"
+      @change="handleChange"
+    />
+    <span :for="id">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.lau-ecom-radio-button {
+  @apply dsEcom-relative
+    dsEcom-float-left
+    dsEcom-mr-2
+    dsEcom-h-5
+    dsEcom-w-5
+    dsEcom-appearance-none
+    dsEcom-rounded-full
+    dsEcom-border-[1px]
+    dsEcom-border-solid
+    dsEcom-border-neutral-90 
+    checked:before:dsEcom-opacity-[0.16] 
+    checked:after:dsEcom-content-[''] 
+    checked:after:dsEcom-absolute 
+    checked:after:dsEcom-left-1/2 
+    checked:after:dsEcom-top-1/2 
+    checked:after:dsEcom-h-3 
+    checked:after:dsEcom-w-3 
+    checked:after:dsEcom-rounded-full  
+    checked:after:[transform:translate(-50%,-50%)] 
+    checked:focus:before:dsEcom-scale-100;
+}
+
+.lau-ecom-radio-button--upc {
+  @apply hover:dsEcom-border-primary-60
+    checked:dsEcom-border-primary-60
+    checked:after:dsEcom-bg-primary-60
+    checked:focus:dsEcom-border-primary-60;
+}
+
+.lau-ecom-radio-button--disabled {
+  @apply !dsEcom-border-neutral-50
+  checked:after:dsEcom-bg-neutral-50
+  disabled:dsEcom-cursor-not-allowed;
+}
+
+.lau-ecom-radio-button--required {
+  @apply dsEcom-border-primary-60;
+}
+</style>

package/src/components/LauEcomRtb/LauEcomRtb.vue

@@ -1,92 +1,71 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { Colors } from "../../utils";
-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.cbt,
-  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;
-});
-
-const isCbtType = computed(() => {
-  return props.type === RtbType.cbt;
-});
-</script>
-
-<template>
-  <div
-    v-if="isModalidadType"
-    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
-  >
-    <LauEcomUpcIconVirtualClass
-      width="32"
-      height="32"
-      :color="Colors['upc-epg-color-purple-60-base']"
-    />
-    Virtual en vivo
-  </div>
-  <div
-    v-if="isCertificacionType"
-    class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
-  >
-    <LauEcomUpcIconCertificate
-      width="32"
-      height="32"
-      :color="Colors['upc-epg-color-purple-60-base']"
-    />
-    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
-      width="32"
-      height="32"
-      :color="Colors['upc-epg-color-purple-60-base']"
-    />
-    Hasta 12 cuotas sin intereses en TC Dinners y BBVA
-  </div>
-  <div v-if="isCbtType" class="lau-ecom-rtb-cbt">
-    <slot name="icon" :color="Colors['cbt-color-apple-green-60-base']"></slot>
-    <p class="dsEcom-text-cbt-astro-blue-20 cbt-font-heading-07-28px">
-      {{ title }}
-    </p>
-    <p class="cbt-font-body-reg-02-16px dsEcom-text-color-cbt-color-neutral-80">
-      {{ text }}
-    </p>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-rtb-cbt {
-  @apply dsEcom-w-[384px] 
-    dsEcom-h-[292px] 
-    dsEcom-rounded-[16px]
-    dsEcom-p-6;
-}
-</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,49 +1,43 @@
-<script lang="ts" setup>
-// import { ref } from 'vue';
-import { Step } from "./types";
-import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
-import { LauEcomInstance } from "../../enums";
-
-interface Props {
-  instance?: LauEcomInstance;
-  steps: Step[];
-  currentStep: number;
-}
-withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
-  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}`"
-      :instance="instance"
-      :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>