lau-ecom-design-system 1.0.19 → 1.0.21

package/src/components/LauEcomSwitch/LauEcomSwitch.vue

@@ -1,108 +1,110 @@
-<script lang="ts" setup>
-import { computed, watch } from "vue";
-
-interface Props {
-  currentClass?: string;
-  isDisabled?: boolean;
-  isChecked?: boolean;
-  id?: string;
-  name?: string;
-  label?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  currentClass: "",
-  isDisabled: false,
-  isChecked: false,
-  id: "",
-  name: "",
-  label: "",
-  errorMessage: "",
-});
-
-const model = defineModel<boolean>();
-
-const emit = defineEmits(["onToggle"]);
-
-const lauEcomSwitchClasses = computed(() => {
-  return {
-    "dsEcom-peer lau-ecom-switch lau-ecom-switch--upc": true,
-    "lau-ecom-switch--disabled": props.isDisabled,
-  };
-});
-
-const lauEcomSwitchButtonClasses = computed(() => {
-  return {
-    "lau-ecom-switch-button": true,
-    "lau-ecom-switch-button--disabled": props.isDisabled,
-  };
-});
-
-watch(model, (newValue) => {
-  if (newValue) emit("onToggle");
-});
-</script>
-
-<template>
-  <div class="dsEcom-relative">
-    <input
-      :id="id"
-      v-model="model"
-      type="checkbox"
-      :name="name"
-      :disabled="isDisabled"
-      :class="lauEcomSwitchClasses"
-    />
-    <div :class="lauEcomSwitchButtonClasses" />
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-switch {
-  @apply dsEcom-relative
-    dsEcom-cursor-pointer
-    dsEcom-shrink-0
-    dsEcom-appearance-none
-    dsEcom-w-10
-    dsEcom-h-6
-    dsEcom-border
-    dsEcom-rounded-full
-    dsEcom-bg-white
-    dsEcom-transition-all
-    dsEcom-duration-[0.3s]
-    checked:dsEcom-p-1
-    checked:dsEcom-cursor-pointer
-    checked:disabled:!dsEcom-bg-neutral-60
-    checked:disabled:!dsEcom-border-neutral-60;
-}
-
-.lau-ecom-switch--upc {
-  @apply dsEcom-border-neutral-90
-    checked:dsEcom-bg-primary-60
-    checked:dsEcom-border-primary-60;
-}
-
-.lau-ecom-switch--disabled {
-  @apply dsEcom-border-neutral-60
-    dsEcom-pointer-events-none;
-}
-
-.lau-ecom-switch-button {
-  @apply dsEcom-absolute
-    dsEcom-top-1
-    dsEcom-w-4
-    dsEcom-h-4
-    dsEcom-ml-1
-    dsEcom-bg-neutral-90
-    dsEcom-rounded-full
-    dsEcom-pointer-events-none
-    dsEcom-transition-all
-    dsEcom-duration-[0.3s]
-    peer-checked:dsEcom-ml-5
-    peer-checked:dsEcom-bg-white;
-}
-
-.lau-ecom-switch-button--disabled {
-  @apply dsEcom-bg-neutral-60;
-}
-</style>
+<script lang="ts" setup>
+import { computed, watch } from "vue";
+
+interface Props {
+  currentClass?: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  id?: string;
+  name?: string;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentClass: "",
+  isDisabled: false,
+  isChecked: false,
+  id: "",
+  name: "",
+  label: "",
+  errorMessage: "",
+});
+
+const model = defineModel<boolean>();
+
+const emit = defineEmits<{
+  (e: "onToggle", value: boolean): void;
+}>();
+
+const lauEcomSwitchClasses = computed(() => {
+  return {
+    "dsEcom-peer lau-ecom-switch lau-ecom-switch--upc": true,
+    "lau-ecom-switch--disabled": props.isDisabled,
+  };
+});
+
+const lauEcomSwitchButtonClasses = computed(() => {
+  return {
+    "lau-ecom-switch-button": true,
+    "lau-ecom-switch-button--disabled": props.isDisabled,
+  };
+});
+
+watch(model, (newValue) => {
+  if (newValue) emit("onToggle", newValue);
+});
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <input
+      :id="id"
+      v-model="model"
+      type="checkbox"
+      :name="name"
+      :disabled="isDisabled"
+      :class="lauEcomSwitchClasses"
+    />
+    <div :class="lauEcomSwitchButtonClasses" />
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-switch {
+  @apply dsEcom-relative
+    dsEcom-cursor-pointer
+    dsEcom-shrink-0
+    dsEcom-appearance-none
+    dsEcom-w-10
+    dsEcom-h-6
+    dsEcom-border
+    dsEcom-rounded-full
+    dsEcom-bg-white
+    dsEcom-transition-all
+    dsEcom-duration-[0.3s]
+    checked:dsEcom-p-1
+    checked:dsEcom-cursor-pointer
+    checked:disabled:!dsEcom-bg-neutral-60
+    checked:disabled:!dsEcom-border-neutral-60;
+}
+
+.lau-ecom-switch--upc {
+  @apply dsEcom-border-neutral-90
+    checked:dsEcom-bg-primary-60
+    checked:dsEcom-border-primary-60;
+}
+
+.lau-ecom-switch--disabled {
+  @apply dsEcom-border-neutral-60
+    dsEcom-pointer-events-none;
+}
+
+.lau-ecom-switch-button {
+  @apply dsEcom-absolute
+    dsEcom-top-1
+    dsEcom-w-4
+    dsEcom-h-4
+    dsEcom-ml-1
+    dsEcom-bg-neutral-90
+    dsEcom-rounded-full
+    dsEcom-pointer-events-none
+    dsEcom-transition-all
+    dsEcom-duration-[0.3s]
+    peer-checked:dsEcom-ml-5
+    peer-checked:dsEcom-bg-white;
+}
+
+.lau-ecom-switch-button--disabled {
+  @apply dsEcom-bg-neutral-60;
+}
+</style>

package/src/components/LauEcomTab/LauEcomTab.vue

@@ -1,82 +1,82 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { LauEcomSize } from "../../enums";
-
-interface Props {
-  size?: LauEcomSize;
-  isDisabled?: boolean;
-  isActive?: boolean;
-  title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: LauEcomSize.md,
-  isDisabled: false,
-  isActive: false,
-  title: "item",
-});
-
-const lauEcomTabClasses = computed(() => {
-  return {
-    "lau-ecom-tab lau-ecom-tab--upc upc-font-button-16px": true,
-    "lau-ecom-tab--disabled": props.isDisabled,
-    "lau-ecom-tab--upc-active": props.isActive,
-  };
-});
-
-const iconClasses = computed(() => {
-  return {
-    "dsEcom-fill-secondary-60": true,
-    "dsEcom-fill-neutral-70": props.isDisabled,
-  };
-});
-</script>
-
-<template>
-  <div class="dsEcom-flex">
-    <div :class="lauEcomTabClasses">
-      <slot name="icon" :classIcon="iconClasses"></slot>
-      <p>{{ title }}</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-tab {
-  @apply dsEcom-flex
-    dsEcom-flex-col
-    dsEcom-justify-center
-    dsEcom-items-center
-    dsEcom-pt-2
-    dsEcom-pb-1
-    dsEcom-px-5
-    dsEcom-cursor-pointer
-    dsEcom-rounded-[4px];
-}
-
-.lau-ecom-tab--disabled {
-  @apply !dsEcom-text-neutral-70
-    dsEcom-cursor-not-allowed
-    hover:!dsEcom-bg-neutral-10;
-}
-
-.lau-ecom-tab--upc {
-  @apply dsEcom-text-secondary-60
-    hover:dsEcom-bg-neutral-20;
-}
-
-.lau-ecom-tab--upc-active {
-  @apply dsEcom-border-b-4
-    dsEcom-border-secondary-60
-    dsEcom-rounded-b-[2px]
-    hover:dsEcom-bg-neutral-10;
-}
-
-.lau-ecom-tab-line {
-  @apply dsEcom-w-full
-    dsEcom-mt-4
-    dsEcom-h-[4px]
-    dsEcom-rounded-[2px] 
-    dsEcom-bg-secondary-60;
-}
-</style>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomSize } from "../../enums";
+
+interface Props {
+  size?: LauEcomSize;
+  isDisabled?: boolean;
+  isActive?: boolean;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: LauEcomSize.md,
+  isDisabled: false,
+  isActive: false,
+  title: "item",
+});
+
+const lauEcomTabClasses = computed(() => {
+  return {
+    "lau-ecom-tab lau-ecom-tab--upc upc-font-button-16px": true,
+    "lau-ecom-tab--disabled": props.isDisabled,
+    "lau-ecom-tab--upc-active": props.isActive,
+  };
+});
+
+const iconClasses = computed(() => {
+  return {
+    "dsEcom-fill-secondary-60": true,
+    "dsEcom-fill-neutral-70": props.isDisabled,
+  };
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex">
+    <div :class="lauEcomTabClasses">
+      <slot name="icon" :classIcon="iconClasses"></slot>
+      <p>{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-tab {
+  @apply dsEcom-flex
+    dsEcom-flex-col
+    dsEcom-justify-center
+    dsEcom-items-center
+    dsEcom-pt-2
+    dsEcom-pb-1
+    dsEcom-px-5
+    dsEcom-cursor-pointer
+    dsEcom-rounded-[4px];
+}
+
+.lau-ecom-tab--disabled {
+  @apply !dsEcom-text-neutral-70
+    dsEcom-cursor-not-allowed
+    hover:!dsEcom-bg-neutral-10;
+}
+
+.lau-ecom-tab--upc {
+  @apply dsEcom-text-secondary-60
+    hover:dsEcom-bg-neutral-20;
+}
+
+.lau-ecom-tab--upc-active {
+  @apply dsEcom-border-b-4
+    dsEcom-border-secondary-60
+    dsEcom-rounded-b-[2px]
+    hover:dsEcom-bg-neutral-10;
+}
+
+.lau-ecom-tab-line {
+  @apply dsEcom-w-full
+    dsEcom-mt-4
+    dsEcom-h-[4px]
+    dsEcom-rounded-[2px] 
+    dsEcom-bg-secondary-60;
+}
+</style>

package/src/components/LauEcomTag/LauEcomTag.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomTagType, LauEcomTagSize } from "./types";
+
+interface Props {
+  size?: LauEcomTagSize;
+  type?: LauEcomTagType;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: LauEcomTagSize.Big,
+  type: LauEcomTagType.Intense,
+});
+
+const tagClasses = computed(() => {
+  return {
+    "lau-ecom-tag": true,
+    "lau-ecom-tag--intense": props.type === LauEcomTagType.Intense,
+    "lau-ecom-tag--soft-secondary": props.type === LauEcomTagType.SoftSecondary,
+    "lau-ecom-tag--soft-tertiary": props.type === LauEcomTagType.SoftTertiary,
+    "core-font-body-bold-05-14px": props.size === LauEcomTagSize.Big,
+    "core-font-body-bold-07-10px": props.size === LauEcomTagSize.Small,
+  };
+});
+</script>
+
+<template>
+  <div :class="tagClasses">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-tag {
+  @apply dsEcom-uppercase
+    dsEcom-w-fit
+    dsEcom-px-2
+    dsEcom-py-1
+    dsEcom-rounded-core-border-radius-4px;
+}
+
+.lau-ecom-tag--soft-secondary {
+  @apply dsEcom-text-secondary-60
+    dsEcom-bg-secondary-10;
+}
+
+.lau-ecom-tag--soft-tertiary {
+  @apply dsEcom-text-tertiary-80
+  dsEcom-bg-tertiary-10;
+}
+
+.lau-ecom-tag--intense {
+  @apply dsEcom-text-neutral-10
+  dsEcom-bg-social-pink-70;
+}
+</style>

package/src/components/LauEcomTextButton/LauEcomTextButton.vue

@@ -1,71 +1,71 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
-
-interface Props {
-  size?: string;
-  isDisabled?: boolean;
-  type?: string;
-  hasArrow?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: "medium",
-  isDisabled: false,
-  type: "button",
-  hasArrow: false,
-});
-
-const emit = defineEmits(["onClick"]);
-
-const handleClick = () => {
-  emit("onClick");
-};
-
-const lauEcomButtonTextClasses = computed(() => {
-  return {
-    "lau-ecom-text-button lau-ecom-text-button--upc upc-font-button-16px": true,
-    "lau-ecom-text-button--disabled": props.isDisabled,
-  };
-});
-</script>
-
-<template>
-  <button
-    :class="lauEcomButtonTextClasses"
-    :disabled="isDisabled"
-    @click="handleClick"
-  >
-    <slot></slot>
-    <LauEcomUpcIconNavArrow
-      v-if="hasArrow"
-      class="dsEcom-rotate-90 lau-ecom-icon-text-button"
-      width="16"
-      height="16"
-    />
-  </button>
-</template>
-
-<style scoped>
-.lau-ecom-text-button {
-  @apply dsEcom-flex
-    dsEcom-items-center
-    dsEcom-gap-2;
-}
-
-.lau-ecom-text-button--upc {
-  @apply dsEcom-text-primary-60
-    hover:dsEcom-text-primary-70
-    active:dsEcom-text-primary-80;
-}
-
-.lau-ecom-text-button--disabled {
-  @apply dsEcom-text-neutral-70;
-}
-
-.lau-ecom-icon-text-button {
-  @apply dsEcom-fill-primary-60
-    hover:dsEcom-fill-primary-70
-    active:dsEcom-fill-primary-80;
-}
-</style>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
+
+interface Props {
+  size?: string;
+  isDisabled?: boolean;
+  type?: string;
+  hasArrow?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "medium",
+  isDisabled: false,
+  type: "button",
+  hasArrow: false,
+});
+
+const emit = defineEmits(["onClick"]);
+
+const handleClick = () => {
+  emit("onClick");
+};
+
+const lauEcomButtonTextClasses = computed(() => {
+  return {
+    "lau-ecom-text-button lau-ecom-text-button--upc upc-font-button-16px": true,
+    "lau-ecom-text-button--disabled": props.isDisabled,
+  };
+});
+</script>
+
+<template>
+  <button
+    :class="lauEcomButtonTextClasses"
+    :disabled="isDisabled"
+    @click="handleClick"
+  >
+    <slot></slot>
+    <LauEcomUpcIconNavArrow
+      v-if="hasArrow"
+      class="dsEcom-rotate-90 lau-ecom-icon-text-button"
+      width="16"
+      height="16"
+    />
+  </button>
+</template>
+
+<style scoped>
+.lau-ecom-text-button {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-gap-2;
+}
+
+.lau-ecom-text-button--upc {
+  @apply dsEcom-text-primary-60
+    hover:dsEcom-text-primary-70
+    active:dsEcom-text-primary-80;
+}
+
+.lau-ecom-text-button--disabled {
+  @apply dsEcom-text-neutral-70;
+}
+
+.lau-ecom-icon-text-button {
+  @apply dsEcom-fill-primary-60
+    hover:dsEcom-fill-primary-70
+    active:dsEcom-fill-primary-80;
+}
+</style>

package/src/components/LauEcomTyPage/LauEcomSummary.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import LauEcomSummaryItem from "./LauEcomSummaryItem.vue";
+</script>
+
+<template>
+  <div>
+    <p class="button-bold-05-20px dsEcom-text-secondary-60">
+      Detalles del curso
+    </p>
+    <ul>
+      <LauEcomSummaryItem />
+    </ul>
+  </div>
+</template>

package/src/components/LauEcomTyPage/LauEcomSummaryItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  content?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  content: "", // Default values for title and content
+});
+</script>
+
+<template>
+  <li class="dsEcom-grid dsEcom-grid-cols-4 dsEcom-mb-4">
+    <span class="button-bold-06-16px dsEcom-text-secondary-60 dsEcom-col-span-2"
+      >{{ title }}:</span
+    >
+    <p class="core-font-body-reg-04-16px dsEcom-text-neutral-100">
+      {{ content }}
+    </p>
+  </li>
+</template>