lau-ecom-design-system 1.0.0

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 (28) hide show
  1. package/README.md +16 -0
  2. package/dist/lau-ecom-design-system.esm.js +1486 -0
  3. package/dist/lau-ecom-design-system.min.js +1 -0
  4. package/dist/lau-ecom-design-system.ssr.js +1456 -0
  5. package/dist/style.css +2001 -0
  6. package/package.json +78 -0
  7. package/src/assets/Grotesk/SharpGrotesk-Bold15.otf +0 -0
  8. package/src/assets/Grotesque/Brandon_bld.otf +0 -0
  9. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +106 -0
  10. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +159 -0
  11. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +66 -0
  12. package/src/components/LauEcomButton/LauEcomButton.vue +160 -0
  13. package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +133 -0
  14. package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -0
  15. package/src/components/LauEcomIcon/LauEcomCoreIconNavClose.vue +29 -0
  16. package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue +49 -0
  17. package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +29 -0
  18. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +31 -0
  19. package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +29 -0
  20. package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +29 -0
  21. package/src/components/LauEcomInput/LauEcomInput.vue +208 -0
  22. package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +87 -0
  23. package/src/components/LauEcomStepbar/LauEcomStepbar.vue +45 -0
  24. package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +129 -0
  25. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +94 -0
  26. package/src/enums/index.ts +2 -0
  27. package/src/enums/instance.ts +5 -0
  28. package/src/enums/size.ts +6 -0
@@ -0,0 +1,87 @@
1
+ <script lang="ts" setup>
2
+ import { computed, ref } from "vue";
3
+
4
+ interface Props {
5
+ id?: string;
6
+ label?: string;
7
+ value?: string | number | boolean;
8
+ modelValue?: string | number | boolean;
9
+ isRequired?: boolean;
10
+ isDisabled?: boolean;
11
+ }
12
+
13
+ const props = withDefaults(defineProps<Props>(), {
14
+ id: "",
15
+ label: "default",
16
+ value: "",
17
+ modelValue: "",
18
+ isRequired: false,
19
+ isDisabled: true,
20
+ });
21
+
22
+ const emit = defineEmits<{
23
+ "update:modelValue": [value: string];
24
+ }>();
25
+
26
+ const lauEcomRadioButtonClasses = computed(() => {
27
+ return {
28
+ "lau-ecom-radio-button": true,
29
+ "lau-ecom-radio-button--disabled": props.isDisabled,
30
+ };
31
+ });
32
+
33
+ const radioGroupValue = ref(props.modelValue);
34
+ const handleChange = () => {
35
+ emit("update:modelValue", String(props.value));
36
+ };
37
+ </script>
38
+
39
+ <template>
40
+ <label>
41
+ <input
42
+ :id="id"
43
+ v-model="radioGroupValue"
44
+ :class="lauEcomRadioButtonClasses"
45
+ type="radio"
46
+ :disabled="isDisabled"
47
+ :value="value"
48
+ @change="handleChange"
49
+ />
50
+ <span :for="id">{{ label }}</span>
51
+ </label>
52
+ </template>
53
+
54
+ <style scoped>
55
+ .lau-ecom-radio-button {
56
+ @apply dsEcom-relative
57
+ dsEcom-float-left
58
+ dsEcom-mr-2
59
+ dsEcom-h-5
60
+ dsEcom-w-5
61
+ dsEcom-appearance-none
62
+ dsEcom-rounded-full
63
+ dsEcom-border-[1px]
64
+ dsEcom-border-solid
65
+ dsEcom-border-upc-color-neutral-90
66
+ hover:dsEcom-border-upc-color-red-60-base
67
+ checked:dsEcom-border-upc-color-red-60-base
68
+ checked:before:dsEcom-opacity-[0.16]
69
+ checked:after:dsEcom-content-['']
70
+ checked:after:dsEcom-absolute
71
+ checked:after:dsEcom-left-1/2
72
+ checked:after:dsEcom-top-1/2
73
+ checked:after:dsEcom-h-3
74
+ checked:after:dsEcom-w-3
75
+ checked:after:dsEcom-rounded-full
76
+ checked:after:dsEcom-bg-upc-color-red-60-base
77
+ checked:after:[transform:translate(-50%,-50%)]
78
+ checked:focus:dsEcom-border-upc-color-red-60-base
79
+ checked:focus:before:dsEcom-scale-100;
80
+ }
81
+
82
+ .lau-ecom-radio-button--disabled {
83
+ @apply !dsEcom-border-upc-color-neutral-50
84
+ checked:after:dsEcom-bg-upc-color-neutral-50
85
+ disabled:dsEcom-cursor-not-allowed;
86
+ }
87
+ </style>
@@ -0,0 +1,45 @@
1
+ <script lang="ts" setup>
2
+ // import { ref } from 'vue';
3
+ import { Step } from "./types";
4
+ import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
5
+
6
+ interface Props {
7
+ steps: Step[];
8
+ currentStep: number;
9
+ }
10
+ withDefaults(defineProps<Props>(), {
11
+ steps: () => [
12
+ {
13
+ numberStep: 1,
14
+ label: "Step",
15
+ },
16
+ {
17
+ numberStep: 2,
18
+ label: "Step",
19
+ },
20
+ {
21
+ numberStep: 3,
22
+ label: "Step",
23
+ },
24
+ {
25
+ numberStep: 4,
26
+ label: "Step",
27
+ },
28
+ ],
29
+ currentStep: 1,
30
+ });
31
+ </script>
32
+
33
+ <template>
34
+ <div class="dsEcom-flex dsEcom-w-full">
35
+ <LauEcomStepbarItem
36
+ v-for="(step, index) in steps"
37
+ :key="`lau-ecom-stepbar-item-${index + 1}`"
38
+ :step="step"
39
+ :is-completed="currentStep > index + 1"
40
+ :is-current-step="currentStep === index + 1"
41
+ :is-last-item="index === steps.length - 1"
42
+ :total-steps="steps.length"
43
+ />
44
+ </div>
45
+ </template>
@@ -0,0 +1,129 @@
1
+ <script lang="ts" setup>
2
+ import { computed, toRefs } from "vue";
3
+ import { Step } from "./types";
4
+ import { LauEcomUpcIconCheck } from "../LauEcomIcon";
5
+ import { Colors } from "../../utils";
6
+
7
+ interface Props {
8
+ step: Step;
9
+ totalSteps: number;
10
+ isCurrentStep: boolean;
11
+ isCompleted: boolean;
12
+ isLastItem: boolean;
13
+ }
14
+
15
+ const props = withDefaults(defineProps<Props>(), {
16
+ step: () => ({
17
+ numberStep: 1,
18
+ label: "Step,",
19
+ }),
20
+ totalSteps: 10,
21
+ isCurrentStep: false,
22
+ isCompleted: false,
23
+ isLastItem: false,
24
+ });
25
+
26
+ const { numberStep, label } = toRefs(props.step);
27
+
28
+ const stepbarItemClasses = computed(() => {
29
+ return [
30
+ "lau-ecom-step upc-font-body-reg-05-14px",
31
+ {
32
+ "lau-ecom-step--current": props.isCurrentStep,
33
+ },
34
+ {
35
+ "lau-ecom-step--completed": props.isCompleted,
36
+ },
37
+ ];
38
+ });
39
+
40
+ const stepTrailClasses = computed(() => {
41
+ return [
42
+ "lau-ecom-step-trail",
43
+ {
44
+ "lau-ecom-step-trail--completed": props.isCompleted,
45
+ },
46
+ ];
47
+ });
48
+
49
+ const stepLabelClasses = computed(() => {
50
+ return [
51
+ "lau-ecom-step-label core-font-body-reg-06-12px",
52
+ {
53
+ "lau-ecom-step-label--disabled":
54
+ !props.isCompleted && !props.isCurrentStep,
55
+ },
56
+ {
57
+ "lau-ecom-step-label--current": props.isCurrentStep,
58
+ },
59
+ ];
60
+ });
61
+ </script>
62
+
63
+ <template>
64
+ <div class="dsEcom-w-full">
65
+ <div class="dsEcom-flex dsEcom-items-center dsEcom-w-full">
66
+ <div :class="stepbarItemClasses">
67
+ <span v-if="!props.isCompleted">
68
+ {{ `${numberStep < 10 && "0"}${numberStep}` }}
69
+ </span>
70
+ <LauEcomUpcIconCheck
71
+ v-else
72
+ :color="Colors['upc-color-neutral-10']"
73
+ width="24"
74
+ height="24"
75
+ />
76
+ </div>
77
+ <span v-if="!isLastItem" :class="stepTrailClasses" />
78
+ </div>
79
+ <span :class="stepLabelClasses">{{ label }}</span>
80
+ </div>
81
+ </template>
82
+
83
+ <style scoped>
84
+ .lau-ecom-step {
85
+ @apply dsEcom-flex
86
+ dsEcom-items-center
87
+ dsEcom-justify-center
88
+ dsEcom-border
89
+ dsEcom-border-upc-color-neutral-70
90
+ dsEcom-text-upc-color-neutral-70
91
+ dsEcom-bg-upc-color-neutral-10
92
+ dsEcom-w-8
93
+ dsEcom-h-8
94
+ dsEcom-rounded-full;
95
+ }
96
+
97
+ .lau-ecom-step--completed {
98
+ @apply !dsEcom-text-upc-color-neutral-10
99
+ !dsEcom-bg-upc-color-red-60-base
100
+ dsEcom-border-upc-color-red-60-base;
101
+ }
102
+
103
+ .lau-ecom-step--current {
104
+ @apply !dsEcom-text-upc-color-red-60-base
105
+ dsEcom-border-upc-color-red-60-base;
106
+ }
107
+
108
+ .lau-ecom-step-trail {
109
+ @apply dsEcom-bg-upc-color-neutral-70
110
+ dsEcom-grow
111
+ !dsEcom-h-[1px];
112
+ }
113
+
114
+ .lau-ecom-step-trail--completed {
115
+ @apply !dsEcom-bg-upc-color-red-60-base;
116
+ }
117
+
118
+ .lau-ecom-step-label {
119
+ @apply dsEcom-text-upc-color-red-60-base;
120
+ }
121
+
122
+ .lau-ecom-step-label--current {
123
+ @apply dsEcom-font-bold;
124
+ }
125
+
126
+ .lau-ecom-step-label--disabled {
127
+ @apply dsEcom-text-upc-color-neutral-70;
128
+ }
129
+ </style>
@@ -0,0 +1,94 @@
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>
@@ -0,0 +1,2 @@
1
+ export { UpcSize } from "./size";
2
+ export { LauEcomInstance } from "./instance";
@@ -0,0 +1,5 @@
1
+ export enum LauEcomInstance {
2
+ Upc = "UPC",
3
+ Upn = "UPN",
4
+ Cibertec = "CIBERTEC",
5
+ }
@@ -0,0 +1,6 @@
1
+ export enum UpcSize {
2
+ sm = "small",
3
+ md = "medium",
4
+ lg = "large",
5
+ full = "full",
6
+ }