lau-ecom-design-system 1.0.16 → 1.0.18

package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue

@@ -1,172 +1,128 @@
-<script lang="ts" setup>
-import { computed, toRefs } from "vue";
-import { Step } from "./types";
-import { LauEcomUpcIconCheck } from "../LauEcomIcon";
-import { Colors } from "../../utils";
-import { LauEcomInstance } from "../../enums";
-
-interface Props {
-  instance?: LauEcomInstance;
-  step: Step;
-  totalSteps: number;
-  isCurrentStep: boolean;
-  isCompleted: boolean;
-  isLastItem: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
-  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 && props.instance === LauEcomInstance.Upc,
-    },
-    {
-      "lau-ecom-step--current-cbt":
-        props.isCurrentStep && props.instance === LauEcomInstance.Cibertec,
-    },
-    {
-      "lau-ecom-step--completed-upc":
-        props.isCompleted && props.instance === LauEcomInstance.Upc,
-    },
-    {
-      "lau-ecom-step--completed-cbt":
-        props.isCompleted && props.instance === LauEcomInstance.Cibertec,
-    },
-  ];
-});
-
-const stepTrailClasses = computed(() => {
-  return [
-    "lau-ecom-step-trail",
-    {
-      "lau-ecom-step-trail--completed-upc":
-        props.isCompleted && props.instance === LauEcomInstance.Upc,
-    },
-    {
-      "lau-ecom-step-trail--completed-cbt":
-        props.isCompleted && props.instance === LauEcomInstance.Cibertec,
-    },
-  ];
-});
-
-const stepLabelClasses = computed(() => {
-  return [
-    "lau-ecom-step-label core-font-body-reg-06-12px",
-    {
-      "lau-ecom-step-label--upc": props.instance === LauEcomInstance.Upc,
-    },
-    {
-      "lau-ecom-step-label--cbt": props.instance === LauEcomInstance.Cibertec,
-    },
-    {
-      "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
-          :color="Colors['upc-color-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-upc-color-neutral-70 
-    dsEcom-text-upc-color-neutral-70 
-    dsEcom-bg-upc-color-neutral-10
-    dsEcom-w-8 
-    dsEcom-h-8
-    dsEcom-rounded-full;
-}
-
-.lau-ecom-step--completed-upc {
-  @apply !dsEcom-text-upc-color-neutral-10 
-    !dsEcom-bg-upc-color-red-60-base 
-    dsEcom-border-upc-color-red-60-base;
-}
-
-.lau-ecom-step--completed-cbt {
-  @apply !dsEcom-text-upc-color-neutral-10 
-    !dsEcom-bg-cbt-color-apple-green-60-base 
-    dsEcom-border-cbt-color-apple-green-60-base;
-}
-
-.lau-ecom-step--current-upc {
-  @apply !dsEcom-text-upc-color-red-60-base 
-    dsEcom-border-upc-color-red-60-base;
-}
-
-.lau-ecom-step--current-cbt {
-  @apply !dsEcom-text-cbt-color-apple-green-60-base 
-    dsEcom-border-cbt-color-apple-green-60-base;
-}
-
-.lau-ecom-step-trail {
-  @apply dsEcom-bg-upc-color-neutral-70 
-    dsEcom-grow 
-    !dsEcom-h-[1px];
-}
-
-.lau-ecom-step-trail--completed-upc {
-  @apply !dsEcom-bg-upc-color-red-60-base;
-}
-
-.lau-ecom-step-trail--completed-cbt {
-  @apply !dsEcom-bg-cbt-color-apple-green-60-base;
-}
-
-.lau-ecom-step-label--upc {
-  @apply dsEcom-text-upc-color-red-60-base;
-}
-
-.lau-ecom-step-label--cbt {
-  @apply dsEcom-text-cbt-color-apple-green-60-base;
-}
-
-.lau-ecom-step-label--current {
-  @apply dsEcom-font-bold;
-}
-
-.lau-ecom-step-label--disabled {
-  @apply dsEcom-text-upc-color-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>

package/src/components/LauEcomSwitch/LauEcomSwitch.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import { computed, watch } from "vue";
-import { LauEcomInstance } from "../../enums";
 
 interface Props {
-  instance?: LauEcomInstance;
   currentClass?: string;
   isDisabled?: boolean;
   isChecked?: boolean;
@@ -13,7 +11,6 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
   currentClass: "",
   isDisabled: false,
   isChecked: false,
@@ -29,9 +26,7 @@ const emit = defineEmits(["onToggle"]);
 
 const lauEcomSwitchClasses = computed(() => {
   return {
-    "dsEcom-peer lau-ecom-switch": true,
-    "lau-ecom-switch--upc": props.instance === LauEcomInstance.Upc,
-    "lau-ecom-switch--cbt": props.instance === LauEcomInstance.Cibertec,
+    "dsEcom-peer lau-ecom-switch lau-ecom-switch--upc": true,
     "lau-ecom-switch--disabled": props.isDisabled,
   };
 });
@@ -77,24 +72,18 @@ watch(model, (newValue) => {
     dsEcom-duration-[0.3s]
     checked:dsEcom-p-1
     checked:dsEcom-cursor-pointer
-    checked:disabled:!dsEcom-bg-upc-color-neutral-60
-    checked:disabled:!dsEcom-border-upc-color-neutral-60;
+    checked:disabled:!dsEcom-bg-neutral-60
+    checked:disabled:!dsEcom-border-neutral-60;
 }
 
 .lau-ecom-switch--upc {
-  @apply dsEcom-border-upc-color-neutral-90
-    checked:dsEcom-bg-upc-color-red-60-base
-    checked:dsEcom-border-upc-color-red-60-base;
-}
-
-.lau-ecom-switch--cbt {
-  @apply dsEcom-border-color-cbt-color-neutral-90
-    checked:dsEcom-bg-cbt-color-apple-green-60-base
-    checked:dsEcom-border-cbt-color-apple-green-60-base;
+  @apply dsEcom-border-neutral-90
+    checked:dsEcom-bg-primary-60
+    checked:dsEcom-border-primary-60;
 }
 
 .lau-ecom-switch--disabled {
-  @apply dsEcom-border-upc-color-neutral-60
+  @apply dsEcom-border-neutral-60
     dsEcom-pointer-events-none;
 }
 
@@ -104,7 +93,7 @@ watch(model, (newValue) => {
     dsEcom-w-4
     dsEcom-h-4
     dsEcom-ml-1
-    dsEcom-bg-upc-color-neutral-90
+    dsEcom-bg-neutral-90
     dsEcom-rounded-full
     dsEcom-pointer-events-none
     dsEcom-transition-all
@@ -114,6 +103,6 @@ watch(model, (newValue) => {
 }
 
 .lau-ecom-switch-button--disabled {
-  @apply dsEcom-bg-upc-color-neutral-60;
+  @apply dsEcom-bg-neutral-60;
 }
 </style>

package/src/components/LauEcomTab/LauEcomTab.vue

@@ -1,113 +1,82 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { LauEcomInstance, LauEcomSize } from "../../enums";
-// import { LauEcomUpcIconGlobe } from '../LauEcomIcon';
-import { Colors } from "../../utils";
-
-interface Props {
-  instance?: LauEcomInstance;
-  size?: LauEcomSize;
-  isDisabled?: boolean;
-  isActive?: boolean;
-  title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
-  size: LauEcomSize.md,
-  isDisabled: false,
-  isActive: false,
-  title: "item",
-});
-
-const lauEcomTabClasses = computed(() => {
-  return {
-    "lau-ecom-tab": true,
-    "lau-ecom-tab--disabled": props.isDisabled,
-    "lau-ecom-tab--upc upc-font-button-16px":
-      props.instance === LauEcomInstance.Upc,
-    "lau-ecom-tab--cbt cbt-font-button-16px":
-      props.instance === LauEcomInstance.Cibertec,
-    "lau-ecom-tab--upc-active":
-      props.instance === LauEcomInstance.Upc && props.isActive,
-    "lau-ecom-tab--cbt-active":
-      props.instance === LauEcomInstance.Cibertec && props.isActive,
-  };
-});
-
-const getIconColor = computed(() => {
-  if (props.instance === LauEcomInstance.Upc) {
-    if (props.isDisabled) return Colors["upc-color-neutral-70"];
-    return Colors["upc-epg-color-purple-60-base"];
-  }
-
-  if (props.instance === LauEcomInstance.Cibertec) {
-    if (props.isDisabled) return Colors["cbt-color-neutral-80"];
-    return Colors["cbt-astro-blue-80"];
-  }
-
-  return "";
-});
-</script>
-
-<template>
-  <div class="dsEcom-flex">
-    <div :class="lauEcomTabClasses">
-      <!-- <LauEcomUpcIconGlobe :color="getIconColor" /> -->
-      <slot name="icon" :color="getIconColor"></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-upc-color-neutral-70
-    dsEcom-cursor-not-allowed
-    hover:!dsEcom-bg-upc-color-neutral-10;
-}
-
-.lau-ecom-tab--upc {
-  @apply dsEcom-text-upc-epg-color-purple-60-base
-    hover:dsEcom-bg-upc-color-neutral-20;
-}
-
-.lau-ecom-tab--upc-active {
-  @apply dsEcom-border-b-4
-    dsEcom-border-upc-epg-color-purple-60-base
-    dsEcom-rounded-b-[2px]
-    hover:dsEcom-bg-upc-color-neutral-10;
-}
-
-.lau-ecom-tab--cbt {
-  @apply dsEcom-text-cbt-astro-blue-80
-    hover:dsEcom-bg-color-cbt-color-neutral-20;
-}
-
-.lau-ecom-tab--cbt-active {
-  @apply dsEcom-border-b-4
-    dsEcom-border-cbt-astro-blue-80
-    dsEcom-rounded-b-[2px]
-    hover:dsEcom-bg-color-cbt-color-neutral-10;
-}
-
-.lau-ecom-tab-line {
-  @apply dsEcom-w-full
-    dsEcom-mt-4
-    dsEcom-h-[4px]
-    dsEcom-rounded-[2px] 
-    dsEcom-bg-upc-epg-color-purple-60-base;
-}
-</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>