lau-ecom-design-system 1.0.17 → 1.0.18

package/src/components/LauEcomTextButton/LauEcomTextButton.vue

@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import { LauEcomInstance } from "../../enums";
-import { Colors } from "../../utils";
+import { computed } from "vue";
 import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
 
 interface Props {
-  instance?: LauEcomInstance;
   size?: string;
   isDisabled?: boolean;
   type?: string;
@@ -13,7 +10,6 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  instance: LauEcomInstance.Upc,
   size: "medium",
   isDisabled: false,
   type: "button",
@@ -26,85 +22,26 @@ const handleClick = () => {
   emit("onClick");
 };
 
-const isMouseOver = ref(false);
-const isActive = ref(false);
-
-const handleMouseOver = () => {
-  isMouseOver.value = true;
-};
-
-const handleMouseOut = () => {
-  isMouseOver.value = false;
-};
-
-const handleMouseDown = () => {
-  isActive.value = true;
-};
-
-const handleMouseUp = () => {
-  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 lau-ecom-text-button--upc upc-font-button-16px": true,
     "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"
+      class="dsEcom-rotate-90 lau-ecom-icon-text-button"
       width="16"
       height="16"
-      :color="getIconColor"
     />
   </button>
 </template>
@@ -117,17 +54,18 @@ const getIconColor = computed(() => {
 }
 
 .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;
+  @apply dsEcom-text-primary-60
+    hover:dsEcom-text-primary-70
+    active:dsEcom-text-primary-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;
+  @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>