lau-ecom-design-system 1.0.0 → 1.0.2

package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue

@@ -3,8 +3,10 @@ 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;
@@ -13,6 +15,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
   step: () => ({
     numberStep: 1,
     label: "Step,",
@@ -29,10 +32,20 @@ const stepbarItemClasses = computed(() => {
   return [
     "lau-ecom-step upc-font-body-reg-05-14px",
     {
-      "lau-ecom-step--current": props.isCurrentStep,
+      "lau-ecom-step--current-upc":
+        props.isCurrentStep && props.instance === LauEcomInstance.Upc,
     },
     {
-      "lau-ecom-step--completed": props.isCompleted,
+      "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,
     },
   ];
 });
@@ -41,7 +54,12 @@ const stepTrailClasses = computed(() => {
   return [
     "lau-ecom-step-trail",
     {
-      "lau-ecom-step-trail--completed": props.isCompleted,
+      "lau-ecom-step-trail--completed-upc":
+        props.isCompleted && props.instance === LauEcomInstance.Upc,
+    },
+    {
+      "lau-ecom-step-trail--completed-cbt":
+        props.isCompleted && props.instance === LauEcomInstance.Cibertec,
     },
   ];
 });
@@ -49,6 +67,12 @@ const stepTrailClasses = computed(() => {
 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,
@@ -94,31 +118,50 @@ const stepLabelClasses = computed(() => {
     dsEcom-rounded-full;
 }
 
-.lau-ecom-step--completed {
+.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--current {
+.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 {
+.lau-ecom-step-trail--completed-upc {
   @apply !dsEcom-bg-upc-color-red-60-base;
 }
 
-.lau-ecom-step-label {
+.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;
 }

package/src/components/LauEcomSwitch/LauEcomSwitch.vue

@@ -1,94 +1,113 @@
-<script lang="ts" setup>
-import { computed } 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 lauEcomSwitchClasses = computed(() => {
-  return {
-    "dsEcom-peer lau-ecom-switch": true,
-    "lau-ecom-switch--disabled": props.isDisabled,
-  };
-});
-
-const lauEcomSwitchButtonClasses = computed(() => {
-  return {
-    "lau-ecom-switch-button": true,
-  };
-});
-</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-border-upc-color-red-90
-    dsEcom-rounded-full
-    dsEcom-bg-white
-    dsEcom-transition-all
-    dsEcom-duration-[0.3s]
-    checked:dsEcom-bg-upc-color-red-60-base
-    checked:dsEcom-border-upc-color-red-60-base
-    checked:dsEcom-p-1
-    checked:dsEcom-cursor-pointer
-    checked:disabled:!dsEcom-bg-upc-color-neutral-60
-    checked:disabled:!dsEcom-border-upc-color-neutral-60;
-}
-
-.lau-ecom-switch--disabled {
-  @apply dsEcom-border-upc-color-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-upc-color-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;
-}
-</style>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomInstance } from "../../enums";
+
+interface Props {
+  instance?: LauEcomInstance;
+  currentClass?: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  id?: string;
+  name?: string;
+  label?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
+  currentClass: "",
+  isDisabled: false,
+  isChecked: false,
+  id: "",
+  name: "",
+  label: "",
+  errorMessage: "",
+});
+
+const model = defineModel<boolean>();
+
+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,
+    "lau-ecom-switch--disabled": props.isDisabled,
+  };
+});
+
+const lauEcomSwitchButtonClasses = computed(() => {
+  return {
+    "lau-ecom-switch-button": true,
+    "lau-ecom-switch-button--disabled": props.isDisabled,
+  };
+});
+</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-upc-color-neutral-60
+    checked:disabled:!dsEcom-border-upc-color-neutral-60;
+}
+
+.lau-ecom-switch--upc {
+  @apply dsEcom-border-upc-color-red-90
+    checked:dsEcom-bg-upc-color-red-60-base
+    checked:dsEcom-border-upc-color-red-60-base;
+}
+
+.lau-ecom-switch--cbt {
+  @apply dsEcom-border-cbt-color-apple-green-60-base
+    checked:dsEcom-bg-cbt-color-apple-green-60-base
+    checked:dsEcom-border-cbt-color-apple-green-60-base;
+}
+
+.lau-ecom-switch--disabled {
+  @apply dsEcom-border-upc-color-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-upc-color-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-upc-color-neutral-60;
+}
+</style>

package/src/components/LauEcomTab/LauEcomTab.vue

@@ -0,0 +1,113 @@
+<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>

package/src/components/LauEcomTextButton/LauEcomTextButton.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { LauEcomInstance } from "../../enums";
+import { Colors } from "../../utils";
+import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
+
+interface Props {
+  instance?: LauEcomInstance;
+  size?: string;
+  isDisabled?: boolean;
+  type?: string;
+  hasArrow?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  instance: LauEcomInstance.Upc,
+  size: "medium",
+  isDisabled: false,
+  type: "button",
+  hasArrow: false,
+});
+
+const emit = defineEmits(["onClick"]);
+
+const handleClick = () => {
+  emit("onClick");
+};
+
+const isMouseOver = ref(false);
+const isActive = ref(false);
+
+const handleMouseOver = () => {
+  console.log("over");
+
+  isMouseOver.value = true;
+};
+
+const handleMouseOut = () => {
+  isMouseOver.value = false;
+};
+
+const handleMouseDown = () => {
+  console.log("down");
+
+  isActive.value = true;
+};
+
+const handleMouseUp = () => {
+  console.log("up");
+
+  isActive.value = false;
+};
+
+const lauEcomButtonTextClasses = computed(() => {
+  return {
+    "lau-ecom-text-button": true,
+    "lau-ecom-text-button--upc upc-font-button-16px":
+      props.instance === LauEcomInstance.Upc,
+    "lau-ecom-text-button--cbt cbt-font-button-16px":
+      props.instance === LauEcomInstance.Cibertec,
+    "lau-ecom-text-button--disabled": props.isDisabled,
+  };
+});
+
+const getIconColor = computed(() => {
+  if (props.instance === LauEcomInstance.Upc) {
+    if (props.isDisabled) {
+      return Colors["upc-color-neutral-70"];
+    }
+    if (isMouseOver.value) {
+      if (isActive.value) {
+        return Colors["upc-color-red-80"];
+      }
+
+      return Colors["upc-color-red-70"];
+    }
+    return Colors["upc-color-red-60-base"];
+  }
+
+  if (props.instance === LauEcomInstance.Cibertec) {
+    if (props.isDisabled) {
+      return Colors["cbt-color-neutral-70"];
+    }
+    if (isMouseOver.value) {
+      if (isActive.value) {
+        return Colors["cbt-color-apple-green-80"];
+      }
+      return Colors["cbt-color-apple-green-70"];
+    }
+
+    return Colors["cbt-color-apple-green-60-base"];
+  }
+  return "";
+});
+</script>
+
+<template>
+  <button
+    :class="lauEcomButtonTextClasses"
+    :disabled="isDisabled"
+    @mouseover="handleMouseOver"
+    @mouseout="handleMouseOut"
+    @mouseup="handleMouseUp"
+    @mousedown="handleMouseDown"
+    @click="handleClick"
+  >
+    <slot></slot>
+    <LauEcomUpcIconNavArrow
+      v-if="hasArrow"
+      class="dsEcom-rotate-90"
+      width="16"
+      height="16"
+      :color="getIconColor"
+    />
+  </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-upc-color-red-60-base
+    hover:dsEcom-text-upc-color-red-70
+    active:dsEcom-text-upc-color-red-80;
+}
+
+.lau-ecom-text-button--cbt {
+  @apply dsEcom-text-cbt-color-apple-green-60-base
+    hover:dsEcom-text-cbt-color-apple-green-70
+    active:dsEcom-text-cbt-color-apple-green-80;
+}
+.lau-ecom-text-button--disabled {
+  @apply dsEcom-text-upc-color-neutral-70;
+}
+</style>

package/src/enums/index.ts

@@ -1,2 +1,3 @@
-export { UpcSize } from "./size";
-export { LauEcomInstance } from "./instance";
+export { LauEcomState } from "./state";
+export { LauEcomSize } from "./size";
+export { LauEcomInstance } from "./instance";

package/src/enums/instance.ts

@@ -1,5 +1,5 @@
-export enum LauEcomInstance {
-  Upc = "UPC",
-  Upn = "UPN",
-  Cibertec = "CIBERTEC",
-}
+export enum LauEcomInstance {
+  Upc = "UPC",
+  Upn = "UPN",
+  Cibertec = "CIBERTEC",
+}

package/src/enums/size.ts

@@ -1,4 +1,4 @@
-export enum UpcSize {
+export enum LauEcomSize {
   sm = "small",
   md = "medium",
   lg = "large",

package/src/enums/state.ts

@@ -0,0 +1,6 @@
+export enum LauEcomState {
+  success = "success",
+  warning = "warning",
+  error = "error",
+  information = "information",
+}