lau-ecom-design-system 1.0.16 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/lau-ecom-design-system.esm.css +13 -1
  2. package/dist/lau-ecom-design-system.esm.js +1582 -265
  3. package/dist/lau-ecom-design-system.min.css +13 -1
  4. package/dist/lau-ecom-design-system.min.js +1 -1
  5. package/dist/lau-ecom-design-system.ssr.css +13 -1
  6. package/dist/lau-ecom-design-system.ssr.js +1496 -218
  7. package/dist/style.css +190 -19
  8. package/package.json +80 -80
  9. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +8 -39
  10. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +8 -46
  11. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +2 -13
  12. package/src/components/LauEcomButton/LauEcomButton.vue +137 -149
  13. package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +143 -148
  14. package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue +79 -82
  15. package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -203
  16. package/src/components/LauEcomIcon/LauEcomCoreIconBook.vue +26 -29
  17. package/src/components/LauEcomIcon/LauEcomCoreIconFileCode.vue +28 -31
  18. package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue +28 -31
  19. package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +26 -29
  20. package/src/components/LauEcomIcon/LauEcomUpcIconCheckCircle.vue +28 -31
  21. package/src/components/LauEcomIcon/LauEcomUpcIconCreditCard.vue +28 -31
  22. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationCircle.vue +28 -31
  23. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +28 -31
  24. package/src/components/LauEcomIcon/LauEcomUpcIconInfoCircle.vue +26 -29
  25. package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +26 -28
  26. package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +26 -29
  27. package/src/components/LauEcomInput/LauEcomInput.vue +207 -208
  28. package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue +2 -28
  29. package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +103 -115
  30. package/src/components/LauEcomRtb/LauEcomRtb.vue +71 -92
  31. package/src/components/LauEcomStepbar/LauEcomStepbar.vue +43 -49
  32. package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +128 -172
  33. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +9 -20
  34. package/src/components/LauEcomTab/LauEcomTab.vue +82 -113
  35. package/src/components/LauEcomTextButton/LauEcomTextButton.vue +13 -75
package/src/components/LauEcomTextButton/LauEcomTextButton.vue CHANGED
@@ -1,11 +1,8 @@
1
1
  <script lang="ts" setup>
2
- import { computed, ref } from "vue";
3
- import { LauEcomInstance } from "../../enums";
4
- import { Colors } from "../../utils";
2
+ import { computed } from "vue";
5
3
  import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
6
4
 
7
5
  interface Props {
8
- instance?: LauEcomInstance;
9
6
  size?: string;
10
7
  isDisabled?: boolean;
11
8
  type?: string;
@@ -13,7 +10,6 @@ interface Props {
13
10
  }
14
11
 
15
12
  const props = withDefaults(defineProps<Props>(), {
16
- instance: LauEcomInstance.Upc,
17
13
  size: "medium",
18
14
  isDisabled: false,
19
15
  type: "button",
@@ -26,85 +22,26 @@ const handleClick = () => {
26
22
  emit("onClick");
27
23
  };
28
24
 
29
- const isMouseOver = ref(false);
30
- const isActive = ref(false);
31
-
32
- const handleMouseOver = () => {
33
- isMouseOver.value = true;
34
- };
35
-
36
- const handleMouseOut = () => {
37
- isMouseOver.value = false;
38
- };
39
-
40
- const handleMouseDown = () => {
41
- isActive.value = true;
42
- };
43
-
44
- const handleMouseUp = () => {
45
- isActive.value = false;
46
- };
47
-
48
25
  const lauEcomButtonTextClasses = computed(() => {
49
26
  return {
50
- "lau-ecom-text-button": true,
51
- "lau-ecom-text-button--upc upc-font-button-16px":
52
- props.instance === LauEcomInstance.Upc,
53
- "lau-ecom-text-button--cbt cbt-font-button-16px":
54
- props.instance === LauEcomInstance.Cibertec,
27
+ "lau-ecom-text-button lau-ecom-text-button--upc upc-font-button-16px": true,
55
28
  "lau-ecom-text-button--disabled": props.isDisabled,
56
29
  };
57
30
  });
58
-
59
- const getIconColor = computed(() => {
60
- if (props.instance === LauEcomInstance.Upc) {
61
- if (props.isDisabled) {
62
- return Colors["upc-color-neutral-70"];
63
- }
64
- if (isMouseOver.value) {
65
- if (isActive.value) {
66
- return Colors["upc-color-red-80"];
67
- }
68
-
69
- return Colors["upc-color-red-70"];
70
- }
71
- return Colors["upc-color-red-60-base"];
72
- }
73
-
74
- if (props.instance === LauEcomInstance.Cibertec) {
75
- if (props.isDisabled) {
76
- return Colors["cbt-color-neutral-70"];
77
- }
78
- if (isMouseOver.value) {
79
- if (isActive.value) {
80
- return Colors["cbt-color-apple-green-80"];
81
- }
82
- return Colors["cbt-color-apple-green-70"];
83
- }
84
-
85
- return Colors["cbt-color-apple-green-60-base"];
86
- }
87
- return "";
88
- });
89
31
  </script>
90
32
 
91
33
  <template>
92
34
  <button
93
35
  :class="lauEcomButtonTextClasses"
94
36
  :disabled="isDisabled"
95
- @mouseover="handleMouseOver"
96
- @mouseout="handleMouseOut"
97
- @mouseup="handleMouseUp"
98
- @mousedown="handleMouseDown"
99
37
  @click="handleClick"
100
38
  >
101
39
  <slot></slot>
102
40
  <LauEcomUpcIconNavArrow
103
41
  v-if="hasArrow"
104
- class="dsEcom-rotate-90"
42
+ class="dsEcom-rotate-90 lau-ecom-icon-text-button"
105
43
  width="16"
106
44
  height="16"
107
- :color="getIconColor"
108
45
  />
109
46
  </button>
110
47
  </template>
@@ -117,17 +54,18 @@ const getIconColor = computed(() => {
117
54
  }
118
55
 
119
56
  .lau-ecom-text-button--upc {
120
- @apply dsEcom-text-upc-color-red-60-base
121
- hover:dsEcom-text-upc-color-red-70
122
- active:dsEcom-text-upc-color-red-80;
57
+ @apply dsEcom-text-primary-60
58
+ hover:dsEcom-text-primary-70
59
+ active:dsEcom-text-primary-80;
123
60
  }
124
61
 
125
- .lau-ecom-text-button--cbt {
126
- @apply dsEcom-text-cbt-color-apple-green-60-base
127
- hover:dsEcom-text-cbt-color-apple-green-70
128
- active:dsEcom-text-cbt-color-apple-green-80;
129
- }
130
62
  .lau-ecom-text-button--disabled {
131
- @apply dsEcom-text-upc-color-neutral-70;
63
+ @apply dsEcom-text-neutral-70;
64
+ }
65
+
66
+ .lau-ecom-icon-text-button {
67
+ @apply dsEcom-fill-primary-60
68
+ hover:dsEcom-fill-primary-70
69
+ active:dsEcom-fill-primary-80;
132
70
  }
133
71
  </style>