lau-ecom-design-system 1.0.0 → 1.0.2

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 (45) hide show
  1. package/dist/lau-ecom-design-system.esm.js +2472 -980
  2. package/dist/lau-ecom-design-system.min.js +1 -1
  3. package/dist/lau-ecom-design-system.ssr.js +1768 -408
  4. package/dist/style.css +405 -27
  5. package/package.json +1 -1
  6. package/src/assets/Rambla/Rambla.otf +0 -0
  7. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +105 -106
  8. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +191 -159
  9. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +80 -66
  10. package/src/components/LauEcomButton/LauEcomButton.vue +192 -160
  11. package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +18 -3
  12. package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue +82 -0
  13. package/src/components/LauEcomFooter/LauEcomFooter.vue +194 -0
  14. package/src/components/LauEcomFooter/LauEcomSubFooter.vue +113 -0
  15. package/src/components/LauEcomFooter/LauEcomSubFooterCategory.vue +127 -0
  16. package/src/components/LauEcomIcon/LauEcomCbtIconChart.vue +53 -0
  17. package/src/components/LauEcomIcon/LauEcomCbtIconGirlReading.vue +31 -0
  18. package/src/components/LauEcomIcon/LauEcomCbtIconWorldwide.vue +29 -0
  19. package/src/components/LauEcomIcon/LauEcomCbtLogoCbtVer.vue +29 -0
  20. package/src/components/LauEcomIcon/LauEcomCbtLogoLaureate.vue +110 -0
  21. package/src/components/LauEcomIcon/LauEcomCbtLogoUpcWhite.vue +33 -0
  22. package/src/components/LauEcomIcon/LauEcomCoreIconBook.vue +29 -0
  23. package/src/components/LauEcomIcon/LauEcomCoreIconFileCode.vue +31 -0
  24. package/src/components/LauEcomIcon/LauEcomCoreIconNavClose.vue +29 -29
  25. package/src/components/LauEcomIcon/LauEcomLogoWasc.vue +456 -0
  26. package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue +31 -0
  27. package/src/components/LauEcomIcon/LauEcomUpcIconCheckCircle.vue +31 -0
  28. package/src/components/LauEcomIcon/LauEcomUpcIconCreditCard.vue +31 -0
  29. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationCircle.vue +31 -0
  30. package/src/components/LauEcomIcon/LauEcomUpcIconGlobe.vue +29 -0
  31. package/src/components/LauEcomIcon/LauEcomUpcIconInfoCircle.vue +29 -0
  32. package/src/components/LauEcomIcon/LauEcomUpcIconInnova.vue +122 -0
  33. package/src/components/LauEcomIcon/LauEcomUpcIconVirtualClass.vue +39 -0
  34. package/src/components/LauEcomInput/LauEcomInput.vue +6 -6
  35. package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +36 -8
  36. package/src/components/LauEcomRtb/LauEcomRtb.vue +92 -0
  37. package/src/components/LauEcomStepbar/LauEcomStepbar.vue +4 -0
  38. package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +50 -7
  39. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +113 -94
  40. package/src/components/LauEcomTab/LauEcomTab.vue +113 -0
  41. package/src/components/LauEcomTextButton/LauEcomTextButton.vue +139 -0
  42. package/src/enums/index.ts +3 -2
  43. package/src/enums/instance.ts +5 -5
  44. package/src/enums/size.ts +1 -1
  45. package/src/enums/state.ts +6 -0
@@ -3,8 +3,10 @@ import { computed, toRefs } from "vue";
3
3
  import { Step } from "./types";
4
4
  import { LauEcomUpcIconCheck } from "../LauEcomIcon";
5
5
  import { Colors } from "../../utils";
6
+ import { LauEcomInstance } from "../../enums";
6
7
 
7
8
  interface Props {
9
+ instance?: LauEcomInstance;
8
10
  step: Step;
9
11
  totalSteps: number;
10
12
  isCurrentStep: boolean;
@@ -13,6 +15,7 @@ interface Props {
13
15
  }
14
16
 
15
17
  const props = withDefaults(defineProps<Props>(), {
18
+ instance: LauEcomInstance.Upc,
16
19
  step: () => ({
17
20
  numberStep: 1,
18
21
  label: "Step,",
@@ -29,10 +32,20 @@ const stepbarItemClasses = computed(() => {
29
32
  return [
30
33
  "lau-ecom-step upc-font-body-reg-05-14px",
31
34
  {
32
- "lau-ecom-step--current": props.isCurrentStep,
35
+ "lau-ecom-step--current-upc":
36
+ props.isCurrentStep && props.instance === LauEcomInstance.Upc,
33
37
  },
34
38
  {
35
- "lau-ecom-step--completed": props.isCompleted,
39
+ "lau-ecom-step--current-cbt":
40
+ props.isCurrentStep && props.instance === LauEcomInstance.Cibertec,
41
+ },
42
+ {
43
+ "lau-ecom-step--completed-upc":
44
+ props.isCompleted && props.instance === LauEcomInstance.Upc,
45
+ },
46
+ {
47
+ "lau-ecom-step--completed-cbt":
48
+ props.isCompleted && props.instance === LauEcomInstance.Cibertec,
36
49
  },
37
50
  ];
38
51
  });
@@ -41,7 +54,12 @@ const stepTrailClasses = computed(() => {
41
54
  return [
42
55
  "lau-ecom-step-trail",
43
56
  {
44
- "lau-ecom-step-trail--completed": props.isCompleted,
57
+ "lau-ecom-step-trail--completed-upc":
58
+ props.isCompleted && props.instance === LauEcomInstance.Upc,
59
+ },
60
+ {
61
+ "lau-ecom-step-trail--completed-cbt":
62
+ props.isCompleted && props.instance === LauEcomInstance.Cibertec,
45
63
  },
46
64
  ];
47
65
  });
@@ -49,6 +67,12 @@ const stepTrailClasses = computed(() => {
49
67
  const stepLabelClasses = computed(() => {
50
68
  return [
51
69
  "lau-ecom-step-label core-font-body-reg-06-12px",
70
+ {
71
+ "lau-ecom-step-label--upc": props.instance === LauEcomInstance.Upc,
72
+ },
73
+ {
74
+ "lau-ecom-step-label--cbt": props.instance === LauEcomInstance.Cibertec,
75
+ },
52
76
  {
53
77
  "lau-ecom-step-label--disabled":
54
78
  !props.isCompleted && !props.isCurrentStep,
@@ -94,31 +118,50 @@ const stepLabelClasses = computed(() => {
94
118
  dsEcom-rounded-full;
95
119
  }
96
120
 
97
- .lau-ecom-step--completed {
121
+ .lau-ecom-step--completed-upc {
98
122
  @apply !dsEcom-text-upc-color-neutral-10
99
123
  !dsEcom-bg-upc-color-red-60-base
100
124
  dsEcom-border-upc-color-red-60-base;
101
125
  }
102
126
 
103
- .lau-ecom-step--current {
127
+ .lau-ecom-step--completed-cbt {
128
+ @apply !dsEcom-text-upc-color-neutral-10
129
+ !dsEcom-bg-cbt-color-apple-green-60-base
130
+ dsEcom-border-cbt-color-apple-green-60-base;
131
+ }
132
+
133
+ .lau-ecom-step--current-upc {
104
134
  @apply !dsEcom-text-upc-color-red-60-base
105
135
  dsEcom-border-upc-color-red-60-base;
106
136
  }
107
137
 
138
+ .lau-ecom-step--current-cbt {
139
+ @apply !dsEcom-text-cbt-color-apple-green-60-base
140
+ dsEcom-border-cbt-color-apple-green-60-base;
141
+ }
142
+
108
143
  .lau-ecom-step-trail {
109
144
  @apply dsEcom-bg-upc-color-neutral-70
110
145
  dsEcom-grow
111
146
  !dsEcom-h-[1px];
112
147
  }
113
148
 
114
- .lau-ecom-step-trail--completed {
149
+ .lau-ecom-step-trail--completed-upc {
115
150
  @apply !dsEcom-bg-upc-color-red-60-base;
116
151
  }
117
152
 
118
- .lau-ecom-step-label {
153
+ .lau-ecom-step-trail--completed-cbt {
154
+ @apply !dsEcom-bg-cbt-color-apple-green-60-base;
155
+ }
156
+
157
+ .lau-ecom-step-label--upc {
119
158
  @apply dsEcom-text-upc-color-red-60-base;
120
159
  }
121
160
 
161
+ .lau-ecom-step-label--cbt {
162
+ @apply dsEcom-text-cbt-color-apple-green-60-base;
163
+ }
164
+
122
165
  .lau-ecom-step-label--current {
123
166
  @apply dsEcom-font-bold;
124
167
  }
@@ -1,94 +1,113 @@
1
- <script lang="ts" setup>
2
- import { computed } from "vue";
3
-
4
- interface Props {
5
- currentClass?: string;
6
- isDisabled?: boolean;
7
- isChecked?: boolean;
8
- id?: string;
9
- name?: string;
10
- label?: string;
11
- }
12
-
13
- const props = withDefaults(defineProps<Props>(), {
14
- currentClass: "",
15
- isDisabled: false,
16
- isChecked: false,
17
- id: "",
18
- name: "",
19
- label: "",
20
- errorMessage: "",
21
- });
22
-
23
- const model = defineModel<boolean>();
24
-
25
- const lauEcomSwitchClasses = computed(() => {
26
- return {
27
- "dsEcom-peer lau-ecom-switch": true,
28
- "lau-ecom-switch--disabled": props.isDisabled,
29
- };
30
- });
31
-
32
- const lauEcomSwitchButtonClasses = computed(() => {
33
- return {
34
- "lau-ecom-switch-button": true,
35
- };
36
- });
37
- </script>
38
-
39
- <template>
40
- <div class="dsEcom-relative">
41
- <input
42
- :id="id"
43
- v-model="model"
44
- type="checkbox"
45
- :name="name"
46
- :disabled="isDisabled"
47
- :class="lauEcomSwitchClasses"
48
- />
49
- <div :class="lauEcomSwitchButtonClasses" />
50
- </div>
51
- </template>
52
-
53
- <style scoped>
54
- .lau-ecom-switch {
55
- @apply dsEcom-relative
56
- dsEcom-cursor-pointer
57
- dsEcom-shrink-0
58
- dsEcom-appearance-none
59
- dsEcom-w-10
60
- dsEcom-h-6
61
- dsEcom-border
62
- dsEcom-border-upc-color-red-90
63
- dsEcom-rounded-full
64
- dsEcom-bg-white
65
- dsEcom-transition-all
66
- dsEcom-duration-[0.3s]
67
- checked:dsEcom-bg-upc-color-red-60-base
68
- checked:dsEcom-border-upc-color-red-60-base
69
- checked:dsEcom-p-1
70
- checked:dsEcom-cursor-pointer
71
- checked:disabled:!dsEcom-bg-upc-color-neutral-60
72
- checked:disabled:!dsEcom-border-upc-color-neutral-60;
73
- }
74
-
75
- .lau-ecom-switch--disabled {
76
- @apply dsEcom-border-upc-color-neutral-60
77
- dsEcom-pointer-events-none;
78
- }
79
-
80
- .lau-ecom-switch-button {
81
- @apply dsEcom-absolute
82
- dsEcom-top-1
83
- dsEcom-w-4
84
- dsEcom-h-4
85
- dsEcom-ml-1
86
- dsEcom-bg-upc-color-neutral-90
87
- dsEcom-rounded-full
88
- dsEcom-pointer-events-none
89
- dsEcom-transition-all
90
- dsEcom-duration-[0.3s]
91
- peer-checked:dsEcom-ml-5
92
- peer-checked:dsEcom-bg-white;
93
- }
94
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed } from "vue";
3
+ import { LauEcomInstance } from "../../enums";
4
+
5
+ interface Props {
6
+ instance?: LauEcomInstance;
7
+ currentClass?: string;
8
+ isDisabled?: boolean;
9
+ isChecked?: boolean;
10
+ id?: string;
11
+ name?: string;
12
+ label?: string;
13
+ }
14
+
15
+ const props = withDefaults(defineProps<Props>(), {
16
+ instance: LauEcomInstance.Upc,
17
+ currentClass: "",
18
+ isDisabled: false,
19
+ isChecked: false,
20
+ id: "",
21
+ name: "",
22
+ label: "",
23
+ errorMessage: "",
24
+ });
25
+
26
+ const model = defineModel<boolean>();
27
+
28
+ const lauEcomSwitchClasses = computed(() => {
29
+ return {
30
+ "dsEcom-peer lau-ecom-switch": true,
31
+ "lau-ecom-switch--upc": props.instance === LauEcomInstance.Upc,
32
+ "lau-ecom-switch--cbt": props.instance === LauEcomInstance.Cibertec,
33
+ "lau-ecom-switch--disabled": props.isDisabled,
34
+ };
35
+ });
36
+
37
+ const lauEcomSwitchButtonClasses = computed(() => {
38
+ return {
39
+ "lau-ecom-switch-button": true,
40
+ "lau-ecom-switch-button--disabled": props.isDisabled,
41
+ };
42
+ });
43
+ </script>
44
+
45
+ <template>
46
+ <div class="dsEcom-relative">
47
+ <input
48
+ :id="id"
49
+ v-model="model"
50
+ type="checkbox"
51
+ :name="name"
52
+ :disabled="isDisabled"
53
+ :class="lauEcomSwitchClasses"
54
+ />
55
+ <div :class="lauEcomSwitchButtonClasses" />
56
+ </div>
57
+ </template>
58
+
59
+ <style scoped>
60
+ .lau-ecom-switch {
61
+ @apply dsEcom-relative
62
+ dsEcom-cursor-pointer
63
+ dsEcom-shrink-0
64
+ dsEcom-appearance-none
65
+ dsEcom-w-10
66
+ dsEcom-h-6
67
+ dsEcom-border
68
+ dsEcom-rounded-full
69
+ dsEcom-bg-white
70
+ dsEcom-transition-all
71
+ dsEcom-duration-[0.3s]
72
+ checked:dsEcom-p-1
73
+ checked:dsEcom-cursor-pointer
74
+ checked:disabled:!dsEcom-bg-upc-color-neutral-60
75
+ checked:disabled:!dsEcom-border-upc-color-neutral-60;
76
+ }
77
+
78
+ .lau-ecom-switch--upc {
79
+ @apply dsEcom-border-upc-color-red-90
80
+ checked:dsEcom-bg-upc-color-red-60-base
81
+ checked:dsEcom-border-upc-color-red-60-base;
82
+ }
83
+
84
+ .lau-ecom-switch--cbt {
85
+ @apply dsEcom-border-cbt-color-apple-green-60-base
86
+ checked:dsEcom-bg-cbt-color-apple-green-60-base
87
+ checked:dsEcom-border-cbt-color-apple-green-60-base;
88
+ }
89
+
90
+ .lau-ecom-switch--disabled {
91
+ @apply dsEcom-border-upc-color-neutral-60
92
+ dsEcom-pointer-events-none;
93
+ }
94
+
95
+ .lau-ecom-switch-button {
96
+ @apply dsEcom-absolute
97
+ dsEcom-top-1
98
+ dsEcom-w-4
99
+ dsEcom-h-4
100
+ dsEcom-ml-1
101
+ dsEcom-bg-upc-color-neutral-90
102
+ dsEcom-rounded-full
103
+ dsEcom-pointer-events-none
104
+ dsEcom-transition-all
105
+ dsEcom-duration-[0.3s]
106
+ peer-checked:dsEcom-ml-5
107
+ peer-checked:dsEcom-bg-white;
108
+ }
109
+
110
+ .lau-ecom-switch-button--disabled {
111
+ @apply dsEcom-bg-upc-color-neutral-60;
112
+ }
113
+ </style>
@@ -0,0 +1,113 @@
1
+ <script lang="ts" setup>
2
+ import { computed } from "vue";
3
+ import { LauEcomInstance, LauEcomSize } from "../../enums";
4
+ // import { LauEcomUpcIconGlobe } from '../LauEcomIcon';
5
+ import { Colors } from "../../utils";
6
+
7
+ interface Props {
8
+ instance?: LauEcomInstance;
9
+ size?: LauEcomSize;
10
+ isDisabled?: boolean;
11
+ isActive?: boolean;
12
+ title?: string;
13
+ }
14
+
15
+ const props = withDefaults(defineProps<Props>(), {
16
+ instance: LauEcomInstance.Upc,
17
+ size: LauEcomSize.md,
18
+ isDisabled: false,
19
+ isActive: false,
20
+ title: "item",
21
+ });
22
+
23
+ const lauEcomTabClasses = computed(() => {
24
+ return {
25
+ "lau-ecom-tab": true,
26
+ "lau-ecom-tab--disabled": props.isDisabled,
27
+ "lau-ecom-tab--upc upc-font-button-16px":
28
+ props.instance === LauEcomInstance.Upc,
29
+ "lau-ecom-tab--cbt cbt-font-button-16px":
30
+ props.instance === LauEcomInstance.Cibertec,
31
+ "lau-ecom-tab--upc-active":
32
+ props.instance === LauEcomInstance.Upc && props.isActive,
33
+ "lau-ecom-tab--cbt-active":
34
+ props.instance === LauEcomInstance.Cibertec && props.isActive,
35
+ };
36
+ });
37
+
38
+ const getIconColor = computed(() => {
39
+ if (props.instance === LauEcomInstance.Upc) {
40
+ if (props.isDisabled) return Colors["upc-color-neutral-70"];
41
+ return Colors["upc-epg-color-purple-60-base"];
42
+ }
43
+
44
+ if (props.instance === LauEcomInstance.Cibertec) {
45
+ if (props.isDisabled) return Colors["cbt-color-neutral-80"];
46
+ return Colors["cbt-astro-blue-80"];
47
+ }
48
+
49
+ return "";
50
+ });
51
+ </script>
52
+
53
+ <template>
54
+ <div class="dsEcom-flex">
55
+ <div :class="lauEcomTabClasses">
56
+ <!-- <LauEcomUpcIconGlobe :color="getIconColor" /> -->
57
+ <slot name="icon" :color="getIconColor"></slot>
58
+ <p>{{ title }}</p>
59
+ </div>
60
+ </div>
61
+ </template>
62
+
63
+ <style scoped>
64
+ .lau-ecom-tab {
65
+ @apply dsEcom-flex
66
+ dsEcom-flex-col
67
+ dsEcom-justify-center
68
+ dsEcom-items-center
69
+ dsEcom-pt-2
70
+ dsEcom-pb-1
71
+ dsEcom-px-5
72
+ dsEcom-cursor-pointer
73
+ dsEcom-rounded-[4px];
74
+ }
75
+
76
+ .lau-ecom-tab--disabled {
77
+ @apply !dsEcom-text-upc-color-neutral-70
78
+ dsEcom-cursor-not-allowed
79
+ hover:!dsEcom-bg-upc-color-neutral-10;
80
+ }
81
+
82
+ .lau-ecom-tab--upc {
83
+ @apply dsEcom-text-upc-epg-color-purple-60-base
84
+ hover:dsEcom-bg-upc-color-neutral-20;
85
+ }
86
+
87
+ .lau-ecom-tab--upc-active {
88
+ @apply dsEcom-border-b-4
89
+ dsEcom-border-upc-epg-color-purple-60-base
90
+ dsEcom-rounded-b-[2px]
91
+ hover:dsEcom-bg-upc-color-neutral-10;
92
+ }
93
+
94
+ .lau-ecom-tab--cbt {
95
+ @apply dsEcom-text-cbt-astro-blue-80
96
+ hover:dsEcom-bg-color-cbt-color-neutral-20;
97
+ }
98
+
99
+ .lau-ecom-tab--cbt-active {
100
+ @apply dsEcom-border-b-4
101
+ dsEcom-border-cbt-astro-blue-80
102
+ dsEcom-rounded-b-[2px]
103
+ hover:dsEcom-bg-color-cbt-color-neutral-10;
104
+ }
105
+
106
+ .lau-ecom-tab-line {
107
+ @apply dsEcom-w-full
108
+ dsEcom-mt-4
109
+ dsEcom-h-[4px]
110
+ dsEcom-rounded-[2px]
111
+ dsEcom-bg-upc-epg-color-purple-60-base;
112
+ }
113
+ </style>
@@ -0,0 +1,139 @@
1
+ <script lang="ts" setup>
2
+ import { computed, ref } from "vue";
3
+ import { LauEcomInstance } from "../../enums";
4
+ import { Colors } from "../../utils";
5
+ import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
6
+
7
+ interface Props {
8
+ instance?: LauEcomInstance;
9
+ size?: string;
10
+ isDisabled?: boolean;
11
+ type?: string;
12
+ hasArrow?: boolean;
13
+ }
14
+
15
+ const props = withDefaults(defineProps<Props>(), {
16
+ instance: LauEcomInstance.Upc,
17
+ size: "medium",
18
+ isDisabled: false,
19
+ type: "button",
20
+ hasArrow: false,
21
+ });
22
+
23
+ const emit = defineEmits(["onClick"]);
24
+
25
+ const handleClick = () => {
26
+ emit("onClick");
27
+ };
28
+
29
+ const isMouseOver = ref(false);
30
+ const isActive = ref(false);
31
+
32
+ const handleMouseOver = () => {
33
+ console.log("over");
34
+
35
+ isMouseOver.value = true;
36
+ };
37
+
38
+ const handleMouseOut = () => {
39
+ isMouseOver.value = false;
40
+ };
41
+
42
+ const handleMouseDown = () => {
43
+ console.log("down");
44
+
45
+ isActive.value = true;
46
+ };
47
+
48
+ const handleMouseUp = () => {
49
+ console.log("up");
50
+
51
+ isActive.value = false;
52
+ };
53
+
54
+ const lauEcomButtonTextClasses = computed(() => {
55
+ return {
56
+ "lau-ecom-text-button": true,
57
+ "lau-ecom-text-button--upc upc-font-button-16px":
58
+ props.instance === LauEcomInstance.Upc,
59
+ "lau-ecom-text-button--cbt cbt-font-button-16px":
60
+ props.instance === LauEcomInstance.Cibertec,
61
+ "lau-ecom-text-button--disabled": props.isDisabled,
62
+ };
63
+ });
64
+
65
+ const getIconColor = computed(() => {
66
+ if (props.instance === LauEcomInstance.Upc) {
67
+ if (props.isDisabled) {
68
+ return Colors["upc-color-neutral-70"];
69
+ }
70
+ if (isMouseOver.value) {
71
+ if (isActive.value) {
72
+ return Colors["upc-color-red-80"];
73
+ }
74
+
75
+ return Colors["upc-color-red-70"];
76
+ }
77
+ return Colors["upc-color-red-60-base"];
78
+ }
79
+
80
+ if (props.instance === LauEcomInstance.Cibertec) {
81
+ if (props.isDisabled) {
82
+ return Colors["cbt-color-neutral-70"];
83
+ }
84
+ if (isMouseOver.value) {
85
+ if (isActive.value) {
86
+ return Colors["cbt-color-apple-green-80"];
87
+ }
88
+ return Colors["cbt-color-apple-green-70"];
89
+ }
90
+
91
+ return Colors["cbt-color-apple-green-60-base"];
92
+ }
93
+ return "";
94
+ });
95
+ </script>
96
+
97
+ <template>
98
+ <button
99
+ :class="lauEcomButtonTextClasses"
100
+ :disabled="isDisabled"
101
+ @mouseover="handleMouseOver"
102
+ @mouseout="handleMouseOut"
103
+ @mouseup="handleMouseUp"
104
+ @mousedown="handleMouseDown"
105
+ @click="handleClick"
106
+ >
107
+ <slot></slot>
108
+ <LauEcomUpcIconNavArrow
109
+ v-if="hasArrow"
110
+ class="dsEcom-rotate-90"
111
+ width="16"
112
+ height="16"
113
+ :color="getIconColor"
114
+ />
115
+ </button>
116
+ </template>
117
+
118
+ <style scoped>
119
+ .lau-ecom-text-button {
120
+ @apply dsEcom-flex
121
+ dsEcom-items-center
122
+ dsEcom-gap-2;
123
+ }
124
+
125
+ .lau-ecom-text-button--upc {
126
+ @apply dsEcom-text-upc-color-red-60-base
127
+ hover:dsEcom-text-upc-color-red-70
128
+ active:dsEcom-text-upc-color-red-80;
129
+ }
130
+
131
+ .lau-ecom-text-button--cbt {
132
+ @apply dsEcom-text-cbt-color-apple-green-60-base
133
+ hover:dsEcom-text-cbt-color-apple-green-70
134
+ active:dsEcom-text-cbt-color-apple-green-80;
135
+ }
136
+ .lau-ecom-text-button--disabled {
137
+ @apply dsEcom-text-upc-color-neutral-70;
138
+ }
139
+ </style>
@@ -1,2 +1,3 @@
1
- export { UpcSize } from "./size";
2
- export { LauEcomInstance } from "./instance";
1
+ export { LauEcomState } from "./state";
2
+ export { LauEcomSize } from "./size";
3
+ export { LauEcomInstance } from "./instance";
@@ -1,5 +1,5 @@
1
- export enum LauEcomInstance {
2
- Upc = "UPC",
3
- Upn = "UPN",
4
- Cibertec = "CIBERTEC",
5
- }
1
+ export enum LauEcomInstance {
2
+ Upc = "UPC",
3
+ Upn = "UPN",
4
+ Cibertec = "CIBERTEC",
5
+ }
package/src/enums/size.ts CHANGED
@@ -1,4 +1,4 @@
1
- export enum UpcSize {
1
+ export enum LauEcomSize {
2
2
  sm = "small",
3
3
  md = "medium",
4
4
  lg = "large",
@@ -0,0 +1,6 @@
1
+ export enum LauEcomState {
2
+ success = "success",
3
+ warning = "warning",
4
+ error = "error",
5
+ information = "information",
6
+ }