lau-ecom-design-system 1.0.13 → 1.0.15

package/src/components/LauEcomButton/LauEcomButton.vue

@@ -1,20 +1,17 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
-import { Colors } from "../../utils";
 import { LauEcomButtonType } from "./types";
-import { LauEcomInstance, LauEcomSize } from "../../enums";
+import { LauEcomSize } from "../../enums";
 
 const props = withDefaults(
   defineProps<{
-    instance?: LauEcomInstance;
     type?: LauEcomButtonType;
     size?: LauEcomSize;
     isDisabled?: boolean;
     hasArrow?: boolean;
   }>(),
   {
-    instance: LauEcomInstance.Upc,
     text: "Button Text",
     type: LauEcomButtonType.Primary,
     size: LauEcomSize.lg,
@@ -29,26 +26,10 @@ const isMouseOver = ref(false);
 
 const lauEcomButtonClasses = computed(() => {
   return {
-    "lau-ecom-button": true,
-    "lau-ecom-button--upc upc-font-button-16px":
-      props.instance === LauEcomInstance.Upc,
-    "lau-ecom-button--cbt cbt-font-button-16px":
-      props.instance === LauEcomInstance.Cibertec,
+    "lau-ecom-button lau-ecom-button--upc upc-font-button-16px": true,
     "lau-ecom-button--secondary": props.type === LauEcomButtonType.Secondary,
-    "lau-ecom-button--secondary-upc":
-      props.instance === LauEcomInstance.Upc &&
-      props.type === LauEcomButtonType.Secondary,
-    "lau-ecom-button--secondary-upc-disabled":
-      props.instance === LauEcomInstance.Upc &&
-      props.type === LauEcomButtonType.Secondary &&
-      props.isDisabled,
-    "lau-ecom-button--secondary-cbt":
-      props.instance === LauEcomInstance.Cibertec &&
-      props.type === LauEcomButtonType.Secondary,
-    "lau-ecom-button--secondary-cbt-disabled":
-      props.instance === LauEcomInstance.Cibertec &&
-      props.type === LauEcomButtonType.Secondary &&
-      props.isDisabled,
+    "lau-ecom-button--secondary-upc": props.type === LauEcomButtonType.Secondary,
+    "lau-ecom-button--secondary-upc-disabled": props.type === LauEcomButtonType.Secondary && props.isDisabled,
     "lau-ecom-button--large": props.size === LauEcomSize.lg,
     "lau-ecom-button--medium": props.size === LauEcomSize.md,
     "lau-ecom-button--disabled":
@@ -56,26 +37,11 @@ const lauEcomButtonClasses = computed(() => {
   };
 });
 
-const getIconColor = computed(() => {
-  if (props.instance === "UPC") {
-    switch (props.type) {
-      case LauEcomButtonType.Primary:
-        return Colors["upc-color-neutral-10"];
-
-      case LauEcomButtonType.Secondary:
-        if (props.isDisabled) {
-          return Colors["upc-color-neutral-70"];
-        }
-        return isMouseOver.value
-          ? Colors["upc-color-red-80"]
-          : Colors["upc-color-red-60-base"];
-
-      default:
-        return "";
-    }
-  }
-  return "";
-});
+const iconClasses = computed(() => {
+  return [
+    `lau-ecom-icon-button${props.type === LauEcomButtonType.Secondary ? '-secondary' : ''}`
+  ]
+})
 
 const handleClick = () => {
   emit("onClick");
@@ -98,14 +64,16 @@ const handleMouseOut = () => {
     @mouseout="handleMouseOut"
     @click="handleClick"
   >
-    <LauEcomUpcIconNavArrow v-if="hasArrow" :color="getIconColor" />
+    <LauEcomUpcIconNavArrow
+      v-if="hasArrow"
+      :class="iconClasses" />
     <slot></slot>
   </button>
 </template>
 
 <style scoped>
 .lau-ecom-button {
-  @apply dsEcom-text-upc-color-neutral-10 
+  @apply dsEcom-text-neutral-10 
     dsEcom-flex 
     dsEcom-items-center 
     dsEcom-justify-center 
@@ -118,21 +86,12 @@ const handleMouseOut = () => {
 }
 
 .lau-ecom-button--upc {
-  @apply dsEcom-bg-upc-color-red-60-base
-    dsEcom-border-upc-color-red-60-base
-    hover:dsEcom-bg-upc-color-red-70
-    hover:dsEcom-border-upc-color-red-70
-    active:dsEcom-bg-upc-color-red-80
-    active:dsEcom-border-upc-color-red-80;
-}
-
-.lau-ecom-button--cbt {
-  @apply dsEcom-bg-cbt-color-apple-green-60-base
-    dsEcom-border-cbt-color-apple-green-60-base
-    hover:dsEcom-bg-cbt-color-apple-green-70
-    hover:dsEcom-border-cbt-color-apple-green-70
-    active:dsEcom-bg-cbt-color-apple-green-80
-    active:dsEcom-border-cbt-color-apple-green-80;
+  @apply dsEcom-bg-primary-60
+    dsEcom-border-primary-60
+    hover:dsEcom-bg-primary-70
+    hover:dsEcom-border-primary-70
+    active:dsEcom-bg-primary-80
+    active:dsEcom-border-primary-80;
 }
 
 .lau-ecom-button--large {
@@ -146,47 +105,46 @@ const handleMouseOut = () => {
 }
 
 .lau-ecom-button--disabled {
-  @apply dsEcom-border-upc-color-neutral-70
-    dsEcom-bg-upc-color-neutral-70 
-    hover:dsEcom-bg-upc-color-neutral-70
-    hover:dsEcom-border-upc-color-neutral-70
-    active:dsEcom-bg-upc-color-neutral-70
-    active:dsEcom-border-upc-color-neutral-70;
+  @apply dsEcom-border-neutral-70
+    dsEcom-bg-neutral-70 
+    hover:dsEcom-bg-neutral-70
+    hover:dsEcom-border-neutral-70
+    active:dsEcom-bg-neutral-70
+    active:dsEcom-border-neutral-70;
 }
 
 .lau-ecom-button--secondary {
-  @apply dsEcom-bg-upc-color-neutral-10
-    hover:dsEcom-bg-upc-color-neutral-10
-    active:dsEcom-bg-upc-color-neutral-10;
+  @apply dsEcom-bg-neutral-10
+    hover:dsEcom-bg-neutral-10
+    active:dsEcom-bg-neutral-10;
 }
 
 .lau-ecom-button--secondary-upc {
-  @apply dsEcom-border-upc-color-red-60-base
-    dsEcom-text-upc-color-red-60-base
-    hover:dsEcom-text-upc-color-red-80
-    hover:dsEcom-border-upc-color-red-80
-    active:dsEcom-text-upc-color-red-80
-    active:dsEcom-border-upc-color-red-80;
+  @apply dsEcom-border-primary-60
+    dsEcom-text-primary-60
+    hover:dsEcom-text-primary-70
+    hover:dsEcom-border-primary-70
+    active:dsEcom-text-primary-80
+    active:dsEcom-border-primary-80;
 }
 
-.lau-ecom-button--secondary-cbt {
-  @apply dsEcom-bg-upc-color-neutral-10
-    dsEcom-border-cbt-color-apple-green-60-base
-    dsEcom-text-cbt-color-apple-green-60-base
-    hover:dsEcom-text-cbt-color-apple-green-70
-    hover:dsEcom-border-cbt-color-apple-green-70
-    hover:dsEcom-bg-upc-color-neutral-10
-    active:dsEcom-text-cbt-color-apple-green-80
-    active:dsEcom-border-cbt-color-apple-green-80
-    active:dsEcom-bg-upc-color-neutral-10;
+.lau-ecom-button--secondary-upc-disabled {
+  @apply dsEcom-border-neutral-70
+    dsEcom-text-neutral-70
+    hover:dsEcom-border-neutral-70
+    hover:dsEcom-text-neutral-70
+    active:dsEcom-border-neutral-70
+    active:dsEcom-text-neutral-70;
 }
 
-.lau-ecom-button--secondary-upc-disabled {
-  @apply dsEcom-border-upc-color-neutral-70
-    dsEcom-text-upc-color-neutral-70
-    hover:dsEcom-border-upc-color-neutral-70
-    hover:dsEcom-text-upc-color-neutral-70
-    active:dsEcom-border-upc-color-neutral-70
-    active:dsEcom-text-upc-color-neutral-70;
+.lau-ecom-icon-button {
+  @apply 
+    dsEcom-fill-neutral-10
+}
+
+.lau-ecom-icon-button-secondary {
+  @apply dsEcom-fill-primary-60
+  hover:dsEcom-fill-primary-70
+  active:dsEcom-fill-primary-80
 }
 </style>

package/src/components/LauEcomFooter/LauEcomSubFooter.vue

@@ -99,8 +99,7 @@ const subFooterLineClasses = computed(() => {
 
 <style scoped>
 .lau-ecom-sub-footer-wrapper {
-  @apply 
-    dsEcom-grid
+  @apply dsEcom-grid
     dsEcom-grid-cols-4
     dsEcom-gap-4
     dsEcom-w-full

package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue

@@ -23,7 +23,6 @@ withDefaults(
   >
     <path
       d="M8.0101 6.79111L12.5555 10.7793C12.6425 10.8583 12.7495 10.9192 12.8684 10.9572C12.9873 10.9951 13.1148 11.0092 13.2411 10.9983C13.3674 10.9873 13.489 10.9517 13.5966 10.8942C13.7041 10.8366 13.7947 10.7587 13.8613 10.6664C13.9537 10.5445 14.0025 10.4022 14.0018 10.257C14.0006 10.1602 13.9782 10.0644 13.9357 9.97464C13.8949 9.88489 13.833 9.80321 13.7539 9.73464L8.60514 5.21699C8.52804 5.14766 8.43526 5.09242 8.33241 5.05464C8.22731 5.01838 8.11519 4.99922 8.00183 4.99817C7.89105 4.99835 7.78144 5.01755 7.67952 5.05464C7.57372 5.09158 7.47804 5.14686 7.39853 5.21699L2.22498 9.7417C2.08201 9.88017 2.00272 10.0582 2.00185 10.2429C2.0012 10.3375 2.02281 10.4312 2.0654 10.5185C2.10799 10.6058 2.17069 10.6849 2.24978 10.7511C2.32563 10.8191 2.41659 10.8735 2.51735 10.911C2.6181 10.9486 2.72662 10.9686 2.83655 10.9699C2.94809 10.9724 3.05904 10.9555 3.16272 10.9203C3.26641 10.8851 3.36068 10.8324 3.43986 10.7652L8.0101 6.79111Z"
-      :fill="color"
     />
   </svg>
 </template>