@uxf/ui 11.114.0 → 11.117.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.
- package/color-radio-group/color-radio-group.js +1 -1
- package/css/tokens/source/colors-dark.css +118 -0
- package/css/tokens/source/colors-light.css +118 -0
- package/css/tokens/source/colors-primitives.css +312 -0
- package/css/tokens/typography.css +9 -0
- package/label/label.d.ts +1 -0
- package/label/label.js +1 -2
- package/package.json +2 -2
- package/radio-group/radio-group.js +1 -1
- package/text-input/text-input.stories.d.ts +1 -1
- package/text-input/text-input.stories.js +13 -9
- /package/css/{common.css → tokens/common.css} +0 -0
- /package/css/{figma-colors.css → tokens/generated/figma-colors.css} +0 -0
|
@@ -48,7 +48,7 @@ exports.ColorRadioGroup = (0, react_2.forwardRef)((props, ref) => {
|
|
|
48
48
|
const rootClassName = (0, cx_1.cx)("uxf-form-component uxf-color-radio-group__wrapper", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
|
|
49
49
|
return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
|
|
50
50
|
react_2.default.createElement("div", { className: "uxf-form-component__label" },
|
|
51
|
-
react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-color-radio-group__label", isHidden: props.hiddenLabel, isRequired: props.isRequired, ref: ref }, props.label)),
|
|
51
|
+
react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-color-radio-group__label", isFocusable: true, isHidden: props.hiddenLabel, isRequired: props.isRequired, ref: ref }, props.label)),
|
|
52
52
|
react_2.default.createElement("div", { className: "uxf-form-component__input" },
|
|
53
53
|
react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, props.options.map((option) => {
|
|
54
54
|
const optionStyle = { "--option-color": option.value };
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* Color tokens */
|
|
2
|
+
:root {
|
|
3
|
+
/* Dark */
|
|
4
|
+
/* color */
|
|
5
|
+
--base-border-border: hsl(0 0 100% / 0.12);
|
|
6
|
+
--base-border-input: hsl(0 0 100% / 0.2);
|
|
7
|
+
--base-border-inverted-border: hsl(218 28% 17% / 0.12);
|
|
8
|
+
--base-border-inverted-input: hsl(218 28% 17% / 0.2);
|
|
9
|
+
--base-icon-disabled: hsl(0 0 100% / 0.5);
|
|
10
|
+
--base-icon-high-emphasis: var(--base-white);
|
|
11
|
+
--base-icon-low-emphasis: hsl(0 0 100% / 0.75);
|
|
12
|
+
--base-icon-medium-emphasis: hsl(0 0 100% / 0.75);
|
|
13
|
+
--base-icon-inverted-low-emphasis: var(--grayneutral-900);
|
|
14
|
+
--base-icon-inverted-disabled: var(--grayneutral-900);
|
|
15
|
+
--base-icon-inverted-high-emphasis: var(--grayneutral-900);
|
|
16
|
+
--base-shadow-shadow-md: hsl(0 0 100% / 0);
|
|
17
|
+
--base-shadow-shadow-sm: hsl(0 0 100% / 0);
|
|
18
|
+
--base-surface-background: var(--grayneutral-800);
|
|
19
|
+
--base-surface-disabled: hsl(0 0 100% / 0.2);
|
|
20
|
+
--base-surface-input: var(--grayneutral-900);
|
|
21
|
+
--base-surface-input-disabled: var(--grayneutral-600);
|
|
22
|
+
--base-surface-input-hover: var(--grayneutral-800);
|
|
23
|
+
--base-surface-main: var(--grayneutral-900);
|
|
24
|
+
--base-surface-main-hover: var(--grayneutral-800);
|
|
25
|
+
--base-surface-popup: var(--grayneutral-800);
|
|
26
|
+
--base-surface-tooltip: var(--grayneutral-50);
|
|
27
|
+
--base-surface-inverted-default: hsl(218 28% 17%);
|
|
28
|
+
--base-surface-inverted-default-hover: hsl(218 28% 17% / 0.9);
|
|
29
|
+
--base-surface-inverted-disabled: var(--grayneutral-500);
|
|
30
|
+
--base-surface-inverted-main: hsl(218 28% 17% / 0.08);
|
|
31
|
+
--base-surface-inverted-main-hover: hsl(218 28% 17% / 0.16);
|
|
32
|
+
--base-text-disabled: hsl(0 0 100% / 0.6);
|
|
33
|
+
--base-text-high-emphasis: hsl(0 0 100%);
|
|
34
|
+
--base-text-link: var(--base-white);
|
|
35
|
+
--base-text-link-pressed: var(--base-white);
|
|
36
|
+
--base-text-low-emphasis: hsl(0 0 100% / 0.8);
|
|
37
|
+
--base-text-inverted-disabled: hsl(218 28% 17% / 0.7);
|
|
38
|
+
--base-text-inverted-high-emphasis: var(--grayneutral-900);
|
|
39
|
+
--base-text-inverted-link: var(--grayneutral-900);
|
|
40
|
+
--base-text-inverted-low-emphasis: hsl(218 28% 17% / 0.8);
|
|
41
|
+
--brand-border: var(--bluedark-600);
|
|
42
|
+
--brand-icon: var(--bluedark-400);
|
|
43
|
+
--brand-icon-on-muted: var(--bluedark-300);
|
|
44
|
+
--brand-text: var(--base-white);
|
|
45
|
+
--brand-text-on-muted: var(--bluedark-200);
|
|
46
|
+
--brand-surface-bolder: var(--bluedark-200);
|
|
47
|
+
--brand-surface-bolder-hover: var(--bluedark-100);
|
|
48
|
+
--brand-surface-default: var(--bluedark-400);
|
|
49
|
+
--brand-surface-default-hover: var(--bluedark-300);
|
|
50
|
+
--brand-surface-muted: var(--bluedark-800);
|
|
51
|
+
--brand-surface-muted-hover: var(--bluedark-700);
|
|
52
|
+
--brand-surface-subtle: var(--bluedark-900);
|
|
53
|
+
--brand-surface-subtle-hover: var(--bluedark-800);
|
|
54
|
+
--info-border: var(--grayblue-600);
|
|
55
|
+
--info-icon: var(--grayblue-300);
|
|
56
|
+
--info-icon-on-muted: var(--grayblue-300);
|
|
57
|
+
--info-text: var(--grayblue-300);
|
|
58
|
+
--info-text-on-muted: var(--grayblue-200);
|
|
59
|
+
--info-surface-default: var(--grayblue-300);
|
|
60
|
+
--info-surface-default-hover: var(--grayblue-200);
|
|
61
|
+
--info-surface-muted: var(--grayblue-800);
|
|
62
|
+
--info-surface-muted-hover: var(--grayblue-700);
|
|
63
|
+
--info-surface-subtle: var(--grayblue-900);
|
|
64
|
+
--info-surface-subtle-hover: var(--grayblue-800);
|
|
65
|
+
--inverted-border: hsl(0 0 100%);
|
|
66
|
+
--inverted-icon: hsl(0 0 100%);
|
|
67
|
+
--inverted-icon-on-muted: hsl(0 0 100%);
|
|
68
|
+
--inverted-text-default: hsl(0 0 100%);
|
|
69
|
+
--inverted-text-disabled: hsl(0 0 100%);
|
|
70
|
+
--inverted-text-muted: hsl(0 0 100%);
|
|
71
|
+
--inverted-text-on-muted: hsl(0 0 100%);
|
|
72
|
+
--negative-border: var(--error-600);
|
|
73
|
+
--negative-icon: var(--error-400);
|
|
74
|
+
--negative-icon-on-muted: var(--error-200);
|
|
75
|
+
--negative-text: var(--error-300);
|
|
76
|
+
--negative-text-on-muted: var(--error-200);
|
|
77
|
+
--negative-surface-default: var(--error-400);
|
|
78
|
+
--negative-surface-default-hover: var(--error-300);
|
|
79
|
+
--negative-surface-muted: var(--error-800);
|
|
80
|
+
--negative-surface-muted-hover: var(--error-700);
|
|
81
|
+
--negative-surface-subtle: var(--error-900);
|
|
82
|
+
--negative-surface-subtle-hover: var(--error-800);
|
|
83
|
+
--neutral-border: var(--grayneutral-600);
|
|
84
|
+
--neutral-icon: var(--grayneutral-400);
|
|
85
|
+
--neutral-icon-on-muted: var(--grayneutral-200);
|
|
86
|
+
--neutral-text: var(--grayneutral-300);
|
|
87
|
+
--neutral-text-on-muted: var(--grayneutral-200);
|
|
88
|
+
--neutral-surface-bolder: hsl(0 0 100%);
|
|
89
|
+
--neutral-surface-bolder-hover: hsl(0 0 100%);
|
|
90
|
+
--neutral-surface-default: var(--grayneutral-400);
|
|
91
|
+
--neutral-surface-default-hover: var(--grayneutral-300);
|
|
92
|
+
--neutral-surface-muted: var(--grayneutral-700);
|
|
93
|
+
--neutral-surface-muted-hover: var(--grayneutral-600);
|
|
94
|
+
--neutral-surface-subtle: var(--grayneutral-800);
|
|
95
|
+
--neutral-surface-subtle-hover: var(--grayneutral-700);
|
|
96
|
+
--positive-border: var(--success-600);
|
|
97
|
+
--positive-icon: var(--success-400);
|
|
98
|
+
--positive-icon-on-muted: var(--success-300);
|
|
99
|
+
--positive-text: var(--success-300);
|
|
100
|
+
--positive-text-on-muted: var(--success-200);
|
|
101
|
+
--positive-surface-default: var(--green-400);
|
|
102
|
+
--positive-surface-default-hover: var(--green-300);
|
|
103
|
+
--positive-surface-muted: var(--green-800);
|
|
104
|
+
--positive-surface-muted-hover: var(--green-700);
|
|
105
|
+
--positive-surface-subtle: var(--green-900);
|
|
106
|
+
--positive-surface-subtle-hover: var(--green-800);
|
|
107
|
+
--warning-border: var(--warning-600);
|
|
108
|
+
--warning-icon: var(--warning-400);
|
|
109
|
+
--warning-icon-on-muted: var(--warning-300);
|
|
110
|
+
--warning-text: var(--warning-300);
|
|
111
|
+
--warning-text-on-muted: var(--warning-200);
|
|
112
|
+
--warning-surface-default: var(--warning-400);
|
|
113
|
+
--warning-surface-default-hover: var(--warning-300);
|
|
114
|
+
--warning-surface-muted: var(--warning-800);
|
|
115
|
+
--warning-surface-muted-hover: var(--warning-700);
|
|
116
|
+
--warning-surface-subtle: var(--warning-900);
|
|
117
|
+
--warning-surface-subtle-hover: var(--warning-800);
|
|
118
|
+
}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* Color tokens */
|
|
2
|
+
:root {
|
|
3
|
+
/* Light */
|
|
4
|
+
/* color */
|
|
5
|
+
--base-border-border: var(--grayneutral-200);
|
|
6
|
+
--base-border-input: var(--grayneutral-300);
|
|
7
|
+
--base-border-inverted-border: hsl(0 0 100% / 0.12);
|
|
8
|
+
--base-border-inverted-input: hsl(0 0 100% / 0.2);
|
|
9
|
+
--base-icon-disabled: var(--grayneutral-500);
|
|
10
|
+
--base-icon-high-emphasis: var(--grayneutral-900);
|
|
11
|
+
--base-icon-low-emphasis: var(--grayneutral-700);
|
|
12
|
+
--base-icon-medium-emphasis: var(--grayneutral-700);
|
|
13
|
+
--base-icon-inverted-low-emphasis: hsl(0 0 100% / 0.75);
|
|
14
|
+
--base-icon-inverted-disabled: hsl(0 0 100% / 0.5);
|
|
15
|
+
--base-icon-inverted-high-emphasis: var(--base-white);
|
|
16
|
+
--base-shadow-shadow-md: hsl(218 28% 17% / 0.1);
|
|
17
|
+
--base-shadow-shadow-sm: hsl(218 28% 17% / 0.05);
|
|
18
|
+
--base-surface-background: var(--grayneutral-50);
|
|
19
|
+
--base-surface-disabled: var(--grayneutral-300);
|
|
20
|
+
--base-surface-input: var(--base-white);
|
|
21
|
+
--base-surface-input-disabled: var(--grayneutral-100);
|
|
22
|
+
--base-surface-input-hover: var(--grayneutral-50);
|
|
23
|
+
--base-surface-main: var(--base-white);
|
|
24
|
+
--base-surface-main-hover: var(--grayneutral-100);
|
|
25
|
+
--base-surface-popup: var(--base-white);
|
|
26
|
+
--base-surface-tooltip: var(--grayneutral-700);
|
|
27
|
+
--base-surface-inverted-default: hsl(0 0 100%);
|
|
28
|
+
--base-surface-inverted-default-hover: hsl(0 0 100% / 0.9);
|
|
29
|
+
--base-surface-inverted-disabled: var(--grayneutral-300);
|
|
30
|
+
--base-surface-inverted-main: hsl(0 0 100% / 0.08);
|
|
31
|
+
--base-surface-inverted-main-hover: hsl(0 0 100% / 0.16);
|
|
32
|
+
--base-text-disabled: var(--grayneutral-500);
|
|
33
|
+
--base-text-high-emphasis: var(--grayneutral-900);
|
|
34
|
+
--base-text-link: var(--grayneutral-900);
|
|
35
|
+
--base-text-link-pressed: var(--grayneutral-900);
|
|
36
|
+
--base-text-low-emphasis: var(--grayneutral-700);
|
|
37
|
+
--base-text-inverted-disabled: hsl(0 0 100% / 0.7);
|
|
38
|
+
--base-text-inverted-high-emphasis: var(--base-white);
|
|
39
|
+
--base-text-inverted-link: var(--base-white);
|
|
40
|
+
--base-text-inverted-low-emphasis: hsl(0 0 100% / 0.8);
|
|
41
|
+
--brand-border: var(--bluedark-300);
|
|
42
|
+
--brand-icon: var(--bluedark-900);
|
|
43
|
+
--brand-icon-on-muted: var(--bluedark-700);
|
|
44
|
+
--brand-text: var(--bluedark-900);
|
|
45
|
+
--brand-text-on-muted: var(--bluedark-900);
|
|
46
|
+
--brand-surface-bolder: var(--bluedark-800);
|
|
47
|
+
--brand-surface-bolder-hover: var(--bluedark-900);
|
|
48
|
+
--brand-surface-default: var(--bluedark-600);
|
|
49
|
+
--brand-surface-default-hover: var(--bluedark-700);
|
|
50
|
+
--brand-surface-muted: var(--bluedark-100);
|
|
51
|
+
--brand-surface-muted-hover: var(--bluedark-200);
|
|
52
|
+
--brand-surface-subtle: var(--bluedark-50);
|
|
53
|
+
--brand-surface-subtle-hover: var(--bluedark-100);
|
|
54
|
+
--info-border: var(--grayblue-300);
|
|
55
|
+
--info-icon: var(--grayblue-500);
|
|
56
|
+
--info-icon-on-muted: var(--grayblue-700);
|
|
57
|
+
--info-text: var(--grayblue-600);
|
|
58
|
+
--info-text-on-muted: var(--grayblue-800);
|
|
59
|
+
--info-surface-default: var(--grayblue-600);
|
|
60
|
+
--info-surface-default-hover: var(--graycool-700);
|
|
61
|
+
--info-surface-muted: var(--graycool-100);
|
|
62
|
+
--info-surface-muted-hover: var(--graycool-200);
|
|
63
|
+
--info-surface-subtle: var(--graycool-50);
|
|
64
|
+
--info-surface-subtle-hover: var(--graycool-100);
|
|
65
|
+
--inverted-border: hsl(0 0 100%);
|
|
66
|
+
--inverted-icon: hsl(0 0 100%);
|
|
67
|
+
--inverted-icon-on-muted: hsl(0 0 100%);
|
|
68
|
+
--inverted-text-default: hsl(0 0 100%);
|
|
69
|
+
--inverted-text-disabled: hsl(0 0 100%);
|
|
70
|
+
--inverted-text-muted: hsl(0 0 100%);
|
|
71
|
+
--inverted-text-on-muted: hsl(0 0 100%);
|
|
72
|
+
--negative-border: var(--error-300);
|
|
73
|
+
--negative-icon: var(--error-600);
|
|
74
|
+
--negative-icon-on-muted: var(--error-700);
|
|
75
|
+
--negative-text: var(--error-600);
|
|
76
|
+
--negative-text-on-muted: var(--error-800);
|
|
77
|
+
--negative-surface-default: var(--error-600);
|
|
78
|
+
--negative-surface-default-hover: var(--error-700);
|
|
79
|
+
--negative-surface-muted: var(--error-100);
|
|
80
|
+
--negative-surface-muted-hover: var(--error-200);
|
|
81
|
+
--negative-surface-subtle: var(--error-50);
|
|
82
|
+
--negative-surface-subtle-hover: var(--error-100);
|
|
83
|
+
--neutral-border: var(--grayneutral-300);
|
|
84
|
+
--neutral-icon: var(--grayneutral-500);
|
|
85
|
+
--neutral-icon-on-muted: var(--grayneutral-700);
|
|
86
|
+
--neutral-text: var(--grayneutral-600);
|
|
87
|
+
--neutral-text-on-muted: var(--grayneutral-800);
|
|
88
|
+
--neutral-surface-bolder: var(--grayneutral-800);
|
|
89
|
+
--neutral-surface-bolder-hover: var(--grayneutral-900);
|
|
90
|
+
--neutral-surface-default: var(--grayneutral-600);
|
|
91
|
+
--neutral-surface-default-hover: var(--grayneutral-700);
|
|
92
|
+
--neutral-surface-muted: var(--grayneutral-200);
|
|
93
|
+
--neutral-surface-muted-hover: var(--grayneutral-300);
|
|
94
|
+
--neutral-surface-subtle: var(--grayneutral-50);
|
|
95
|
+
--neutral-surface-subtle-hover: var(--grayneutral-100);
|
|
96
|
+
--positive-border: var(--success-300);
|
|
97
|
+
--positive-icon: var(--success-500);
|
|
98
|
+
--positive-icon-on-muted: var(--success-700);
|
|
99
|
+
--positive-text: var(--success-700);
|
|
100
|
+
--positive-text-on-muted: var(--success-800);
|
|
101
|
+
--positive-surface-default: var(--green-600);
|
|
102
|
+
--positive-surface-default-hover: var(--green-700);
|
|
103
|
+
--positive-surface-muted: var(--green-100);
|
|
104
|
+
--positive-surface-muted-hover: var(--green-200);
|
|
105
|
+
--positive-surface-subtle: var(--green-50);
|
|
106
|
+
--positive-surface-subtle-hover: var(--green-100);
|
|
107
|
+
--warning-border: var(--warning-300);
|
|
108
|
+
--warning-icon: var(--warning-600);
|
|
109
|
+
--warning-icon-on-muted: var(--warning-700);
|
|
110
|
+
--warning-text: var(--warning-700);
|
|
111
|
+
--warning-text-on-muted: var(--warning-800);
|
|
112
|
+
--warning-surface-default: var(--warning-600);
|
|
113
|
+
--warning-surface-default-hover: var(--warning-700);
|
|
114
|
+
--warning-surface-muted: var(--warning-100);
|
|
115
|
+
--warning-surface-muted-hover: var(--warning-200);
|
|
116
|
+
--warning-surface-subtle: var(--warning-50);
|
|
117
|
+
--warning-surface-subtle-hover: var(--warning-100);
|
|
118
|
+
}
|
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
/* Primitives */
|
|
2
|
+
:root {
|
|
3
|
+
/* Mode 1 */
|
|
4
|
+
/* color */
|
|
5
|
+
--base-black: hsl(0 0 0%);
|
|
6
|
+
--base-white: hsl(0 0 100%);
|
|
7
|
+
--bluedark-100: hsl(220 100% 91%);
|
|
8
|
+
--bluedark-200: hsl(221 100% 85%);
|
|
9
|
+
--bluedark-25: hsl(222 100% 98%);
|
|
10
|
+
--bluedark-300: hsl(220 100% 76%);
|
|
11
|
+
--bluedark-400: hsl(220 100% 66%);
|
|
12
|
+
--bluedark-50: hsl(221 100% 97%);
|
|
13
|
+
--bluedark-500: hsl(220 99% 58%);
|
|
14
|
+
--bluedark-600: hsl(220 86% 51%);
|
|
15
|
+
--bluedark-700: hsl(220 100% 46%);
|
|
16
|
+
--bluedark-800: hsl(220 100% 38%);
|
|
17
|
+
--bluedark-900: hsl(220 100% 31%);
|
|
18
|
+
--bluelight-100: hsl(204 94% 94%);
|
|
19
|
+
--bluelight-200: hsl(201 97% 86%);
|
|
20
|
+
--bluelight-25: hsl(207 100% 98%);
|
|
21
|
+
--bluelight-300: hsl(199 97% 74%);
|
|
22
|
+
--bluelight-400: hsl(198 94% 59%);
|
|
23
|
+
--bluelight-50: hsl(204 100% 97%);
|
|
24
|
+
--bluelight-500: hsl(199 91% 48%);
|
|
25
|
+
--bluelight-600: hsl(200 100% 39%);
|
|
26
|
+
--bluelight-700: hsl(201 99% 32%);
|
|
27
|
+
--bluelight-800: hsl(201 91% 27%);
|
|
28
|
+
--bluelight-900: hsl(202 83% 24%);
|
|
29
|
+
--cyan-100: hsl(186 96% 90%);
|
|
30
|
+
--cyan-200: hsl(188 91% 82%);
|
|
31
|
+
--cyan-300: hsl(189 92% 69%);
|
|
32
|
+
--cyan-400: hsl(190 85% 53%);
|
|
33
|
+
--cyan-50: hsl(186 100% 96%);
|
|
34
|
+
--cyan-500: hsl(191 95% 43%);
|
|
35
|
+
--cyan-600: hsl(194 92% 36%);
|
|
36
|
+
--cyan-700: hsl(195 83% 31%);
|
|
37
|
+
--cyan-800: hsl(196 70% 27%);
|
|
38
|
+
--cyan-900: hsl(198 65% 24%);
|
|
39
|
+
--error-100: hsl(4 93% 94%);
|
|
40
|
+
--error-200: hsl(3 96% 89%);
|
|
41
|
+
--error-25: hsl(12 100% 99%);
|
|
42
|
+
--error-300: hsl(4 94% 80%);
|
|
43
|
+
--error-400: hsl(4 92% 69%);
|
|
44
|
+
--error-50: hsl(5 86% 97%);
|
|
45
|
+
--error-500: hsl(4 86% 58%);
|
|
46
|
+
--error-600: hsl(4 74% 49%);
|
|
47
|
+
--error-700: hsl(4 76% 40%);
|
|
48
|
+
--error-800: hsl(4 72% 33%);
|
|
49
|
+
--error-900: hsl(8 66% 29%);
|
|
50
|
+
--fuchsia-100: hsl(290 100% 95%);
|
|
51
|
+
--fuchsia-200: hsl(290 96% 91%);
|
|
52
|
+
--fuchsia-25: hsl(288 100% 99%);
|
|
53
|
+
--fuchsia-300: hsl(289 93% 83%);
|
|
54
|
+
--fuchsia-400: hsl(290 93% 72%);
|
|
55
|
+
--fuchsia-50: hsl(289 100% 98%);
|
|
56
|
+
--fuchsia-500: hsl(290 86% 61%);
|
|
57
|
+
--fuchsia-600: hsl(291 71% 49%);
|
|
58
|
+
--fuchsia-700: hsl(293 74% 40%);
|
|
59
|
+
--fuchsia-800: hsl(293 71% 33%);
|
|
60
|
+
--fuchsia-900: hsl(295 66% 28%);
|
|
61
|
+
--gray-100: hsl(216 24% 96%);
|
|
62
|
+
--gray-200: hsl(220 17% 93%);
|
|
63
|
+
--gray-25: hsl(240 20% 99%);
|
|
64
|
+
--gray-300: hsl(217 16% 84%);
|
|
65
|
+
--gray-400: hsl(219 14% 65%);
|
|
66
|
+
--gray-50: hsl(210 20% 98%);
|
|
67
|
+
--gray-500: hsl(221 13% 46%);
|
|
68
|
+
--gray-600: hsl(216 18% 34%);
|
|
69
|
+
--gray-700: hsl(217 24% 27%);
|
|
70
|
+
--gray-800: hsl(214 33% 17%);
|
|
71
|
+
--gray-900: hsl(220 43% 11%);
|
|
72
|
+
--grayblue-100: hsl(229 35% 94%);
|
|
73
|
+
--grayblue-200: hsl(229 35% 88%);
|
|
74
|
+
--grayblue-25: hsl(240 20% 99%);
|
|
75
|
+
--grayblue-300: hsl(233 36% 78%);
|
|
76
|
+
--grayblue-400: hsl(232 36% 59%);
|
|
77
|
+
--grayblue-50: hsl(225 40% 98%);
|
|
78
|
+
--grayblue-500: hsl(231 36% 48%);
|
|
79
|
+
--grayblue-600: hsl(232 36% 38%);
|
|
80
|
+
--grayblue-700: hsl(231 37% 33%);
|
|
81
|
+
--grayblue-800: hsl(231 35% 25%);
|
|
82
|
+
--grayblue-900: hsl(231 37% 10%);
|
|
83
|
+
--graycool-100: hsl(220 23% 95%);
|
|
84
|
+
--graycool-200: hsl(227 25% 89%);
|
|
85
|
+
--graycool-25: hsl(240 20% 99%);
|
|
86
|
+
--graycool-300: hsl(224 24% 78%);
|
|
87
|
+
--graycool-400: hsl(226 24% 59%);
|
|
88
|
+
--graycool-50: hsl(240 20% 98%);
|
|
89
|
+
--graycool-500: hsl(227 24% 48%);
|
|
90
|
+
--graycool-600: hsl(226 24% 38%);
|
|
91
|
+
--graycool-700: hsl(227 24% 33%);
|
|
92
|
+
--graycool-800: hsl(226 24% 25%);
|
|
93
|
+
--graycool-900: hsl(233 33% 10%);
|
|
94
|
+
--grayiron-100: hsl(240 5% 96%);
|
|
95
|
+
--grayiron-200: hsl(240 6% 90%);
|
|
96
|
+
--grayiron-300: hsl(240 6% 83%);
|
|
97
|
+
--grayiron-400: hsl(240 6% 65%);
|
|
98
|
+
--grayiron-50: hsl(0 0 98%);
|
|
99
|
+
--grayiron-500: hsl(240 5% 46%);
|
|
100
|
+
--grayiron-600: hsl(235 6% 34%);
|
|
101
|
+
--grayiron-700: hsl(240 5% 26%);
|
|
102
|
+
--grayiron-800: hsl(228 6% 16%);
|
|
103
|
+
--grayiron-900: hsl(240 6% 10%);
|
|
104
|
+
--graymodern-100: hsl(210 31% 95%);
|
|
105
|
+
--graymodern-200: hsl(215 27% 91%);
|
|
106
|
+
--graymodern-25: hsl(240 20% 99%);
|
|
107
|
+
--graymodern-300: hsl(213 22% 84%);
|
|
108
|
+
--graymodern-400: hsl(215 13% 65%);
|
|
109
|
+
--graymodern-50: hsl(210 40% 98%);
|
|
110
|
+
--graymodern-500: hsl(215 12% 47%);
|
|
111
|
+
--graymodern-600: hsl(217 15% 35%);
|
|
112
|
+
--graymodern-700: hsl(216 21% 27%);
|
|
113
|
+
--graymodern-800: hsl(218 28% 17%);
|
|
114
|
+
--graymodern-900: hsl(219 36% 11%);
|
|
115
|
+
--grayneutral-100: hsl(220 14% 96%);
|
|
116
|
+
--grayneutral-200: hsl(220 13% 91%);
|
|
117
|
+
--grayneutral-25: hsl(240 20% 99%);
|
|
118
|
+
--grayneutral-300: hsl(213 11% 84%);
|
|
119
|
+
--grayneutral-400: hsl(215 9% 65%);
|
|
120
|
+
--grayneutral-50: hsl(210 20% 98%);
|
|
121
|
+
--grayneutral-500: hsl(220 8% 46%);
|
|
122
|
+
--grayneutral-600: hsl(210 11% 34%);
|
|
123
|
+
--grayneutral-700: hsl(215 18% 27%);
|
|
124
|
+
--grayneutral-800: hsl(212 28% 17%);
|
|
125
|
+
--grayneutral-900: hsl(218 39% 11%);
|
|
126
|
+
--graytrue-100: hsl(0 0 96%);
|
|
127
|
+
--graytrue-200: hsl(0 0 90%);
|
|
128
|
+
--graytrue-25: hsl(0 0 99%);
|
|
129
|
+
--graytrue-300: hsl(0 0 84%);
|
|
130
|
+
--graytrue-400: hsl(0 0 64%);
|
|
131
|
+
--graytrue-50: hsl(0 0 98%);
|
|
132
|
+
--graytrue-500: hsl(0 0 45%);
|
|
133
|
+
--graytrue-600: hsl(0 0 32%);
|
|
134
|
+
--graytrue-700: hsl(0 0 26%);
|
|
135
|
+
--graytrue-800: hsl(0 0 16%);
|
|
136
|
+
--graytrue-900: hsl(0 0 8%);
|
|
137
|
+
--graywarm-100: hsl(60 5% 96%);
|
|
138
|
+
--graywarm-200: hsl(20 6% 90%);
|
|
139
|
+
--graywarm-25: hsl(60 20% 99%);
|
|
140
|
+
--graywarm-300: hsl(26 8% 83%);
|
|
141
|
+
--graywarm-400: hsl(25 7% 64%);
|
|
142
|
+
--graywarm-50: hsl(60 9% 98%);
|
|
143
|
+
--graywarm-500: hsl(26 6% 45%);
|
|
144
|
+
--graywarm-600: hsl(33 5% 32%);
|
|
145
|
+
--graywarm-700: hsl(30 6% 25%);
|
|
146
|
+
--graywarm-800: hsl(12 6% 15%);
|
|
147
|
+
--graywarm-900: hsl(24 10% 10%);
|
|
148
|
+
--green-100: hsl(139 73% 90%);
|
|
149
|
+
--green-200: hsl(142 68% 80%);
|
|
150
|
+
--green-25: hsl(143 80% 98%);
|
|
151
|
+
--green-300: hsl(146 66% 67%);
|
|
152
|
+
--green-400: hsl(148 58% 52%);
|
|
153
|
+
--green-50: hsl(140 71% 96%);
|
|
154
|
+
--green-500: hsl(150 78% 39%);
|
|
155
|
+
--green-600: hsl(151 88% 30%);
|
|
156
|
+
--green-700: hsl(153 87% 24%);
|
|
157
|
+
--green-800: hsl(153 82% 20%);
|
|
158
|
+
--green-900: hsl(154 81% 16%);
|
|
159
|
+
--greenlight-100: hsl(91 85% 89%);
|
|
160
|
+
--greenlight-200: hsl(91 85% 82%);
|
|
161
|
+
--greenlight-25: hsl(87 82% 98%);
|
|
162
|
+
--greenlight-300: hsl(92 81% 67%);
|
|
163
|
+
--greenlight-400: hsl(93 74% 55%);
|
|
164
|
+
--greenlight-50: hsl(89 92% 95%);
|
|
165
|
+
--greenlight-500: hsl(94 75% 44%);
|
|
166
|
+
--greenlight-600: hsl(95 86% 34%);
|
|
167
|
+
--greenlight-700: hsl(96 80% 27%);
|
|
168
|
+
--greenlight-800: hsl(96 70% 23%);
|
|
169
|
+
--greenlight-900: hsl(98 63% 20%);
|
|
170
|
+
--indigo-100: hsl(221 100% 94%);
|
|
171
|
+
--indigo-200: hsl(223 96% 89%);
|
|
172
|
+
--indigo-25: hsl(222 100% 98%);
|
|
173
|
+
--indigo-300: hsl(224 96% 82%);
|
|
174
|
+
--indigo-400: hsl(228 91% 74%);
|
|
175
|
+
--indigo-50: hsl(219 100% 97%);
|
|
176
|
+
--indigo-500: hsl(233 86% 66%);
|
|
177
|
+
--indigo-600: hsl(237 77% 59%);
|
|
178
|
+
--indigo-700: hsl(239 60% 50%);
|
|
179
|
+
--indigo-800: hsl(238 57% 41%);
|
|
180
|
+
--indigo-900: hsl(236 49% 34%);
|
|
181
|
+
--moss-100: hsl(89 57% 90%);
|
|
182
|
+
--moss-200: hsl(89 58% 80%);
|
|
183
|
+
--moss-25: hsl(90 60% 98%);
|
|
184
|
+
--moss-300: hsl(89 59% 67%);
|
|
185
|
+
--moss-400: hsl(89 58% 52%);
|
|
186
|
+
--moss-50: hsl(88 62% 96%);
|
|
187
|
+
--moss-500: hsl(89 58% 39%);
|
|
188
|
+
--moss-600: hsl(89 57% 30%);
|
|
189
|
+
--moss-700: hsl(89 58% 24%);
|
|
190
|
+
--moss-800: hsl(89 58% 20%);
|
|
191
|
+
--moss-900: hsl(89 57% 16%);
|
|
192
|
+
--orange-100: hsl(31 86% 92%);
|
|
193
|
+
--orange-200: hsl(36 84% 83%);
|
|
194
|
+
--orange-25: hsl(33 82% 98%);
|
|
195
|
+
--orange-300: hsl(27 89% 72%);
|
|
196
|
+
--orange-400: hsl(23 88% 61%);
|
|
197
|
+
--orange-50: hsl(30 89% 96%);
|
|
198
|
+
--orange-500: hsl(21 87% 53%);
|
|
199
|
+
--orange-600: hsl(17 82% 48%);
|
|
200
|
+
--orange-700: hsl(13 80% 40%);
|
|
201
|
+
--orange-800: hsl(11 72% 34%);
|
|
202
|
+
--orange-900: hsl(11 68% 28%);
|
|
203
|
+
--orangedark-100: hsl(23 100% 92%);
|
|
204
|
+
--orangedark-25: hsl(24 100% 98%);
|
|
205
|
+
--orangedark-300: hsl(21 100% 70%);
|
|
206
|
+
--orangedark-400: hsl(17 99% 59%);
|
|
207
|
+
--orangedark-50: hsl(20 100% 96%);
|
|
208
|
+
--orangedark-500: hsl(15 100% 51%);
|
|
209
|
+
--orangedark-600: hsl(11 97% 46%);
|
|
210
|
+
--orangedark-700: hsl(7 95% 38%);
|
|
211
|
+
--orangedark-800: hsl(5 85% 32%);
|
|
212
|
+
--orangedark-900: hsl(7 80% 26%);
|
|
213
|
+
--pink-100: hsl(317 78% 95%);
|
|
214
|
+
--pink-200: hsl(318 88% 90%);
|
|
215
|
+
--pink-25: hsl(323 80% 98%);
|
|
216
|
+
--pink-300: hsl(319 87% 82%);
|
|
217
|
+
--pink-400: hsl(321 87% 70%);
|
|
218
|
+
--pink-50: hsl(316 73% 97%);
|
|
219
|
+
--pink-500: hsl(318 83% 60%);
|
|
220
|
+
--pink-600: hsl(325 72% 50%);
|
|
221
|
+
--pink-700: hsl(327 80% 42%);
|
|
222
|
+
--pink-800: hsl(328 77% 35%);
|
|
223
|
+
--pink-900: hsl(328 72% 30%);
|
|
224
|
+
--primary-100: hsl(267 100% 96%);
|
|
225
|
+
--primary-200: hsl(268 95% 92%);
|
|
226
|
+
--primary-25: hsl(264 100% 99%);
|
|
227
|
+
--primary-300: hsl(265 89% 86%);
|
|
228
|
+
--primary-400: hsl(262 85% 77%);
|
|
229
|
+
--primary-50: hsl(264 100% 98%);
|
|
230
|
+
--primary-500: hsl(260 77% 70%);
|
|
231
|
+
--primary-600: hsl(258 63% 59%);
|
|
232
|
+
--primary-700: hsl(258 54% 51%);
|
|
233
|
+
--primary-800: hsl(256 48% 42%);
|
|
234
|
+
--primary-900: hsl(255 45% 34%);
|
|
235
|
+
--purple-100: hsl(246 91% 95%);
|
|
236
|
+
--purple-200: hsl(245 95% 92%);
|
|
237
|
+
--purple-25: hsl(240 100% 99%);
|
|
238
|
+
--purple-300: hsl(247 95% 85%);
|
|
239
|
+
--purple-400: hsl(249 93% 76%);
|
|
240
|
+
--purple-50: hsl(245 100% 98%);
|
|
241
|
+
--purple-500: hsl(252 92% 66%);
|
|
242
|
+
--purple-600: hsl(256 84% 58%);
|
|
243
|
+
--purple-700: hsl(257 72% 50%);
|
|
244
|
+
--purple-800: hsl(257 71% 42%);
|
|
245
|
+
--purple-900: hsl(257 69% 35%);
|
|
246
|
+
--rosé-100: hsl(351 100% 95%);
|
|
247
|
+
--rosé-200: hsl(349 96% 90%);
|
|
248
|
+
--rosé-25: hsl(354 100% 98%);
|
|
249
|
+
--rosé-300: hsl(349 98% 82%);
|
|
250
|
+
--rosé-400: hsl(347 96% 71%);
|
|
251
|
+
--rosé-50: hsl(351 100% 97%);
|
|
252
|
+
--rosé-500: hsl(346 90% 60%);
|
|
253
|
+
--rosé-600: hsl(343 79% 50%);
|
|
254
|
+
--rosé-700: hsl(341 86% 41%);
|
|
255
|
+
--rosé-800: hsl(339 83% 35%);
|
|
256
|
+
--rosé-900: hsl(338 78% 30%);
|
|
257
|
+
--success-100: hsl(140 80% 90%);
|
|
258
|
+
--success-200: hsl(144 78% 80%);
|
|
259
|
+
--success-25: hsl(143 80% 98%);
|
|
260
|
+
--success-300: hsl(148 74% 67%);
|
|
261
|
+
--success-400: hsl(150 66% 51%);
|
|
262
|
+
--success-50: hsl(145 81% 96%);
|
|
263
|
+
--success-500: hsl(152 82% 39%);
|
|
264
|
+
--success-600: hsl(153 96% 30%);
|
|
265
|
+
--success-700: hsl(155 97% 24%);
|
|
266
|
+
--success-800: hsl(155 90% 20%);
|
|
267
|
+
--success-900: hsl(156 88% 16%);
|
|
268
|
+
--teal-100: hsl(165 85% 89%);
|
|
269
|
+
--teal-200: hsl(166 84% 78%);
|
|
270
|
+
--teal-25: hsl(165 80% 98%);
|
|
271
|
+
--teal-300: hsl(169 76% 64%);
|
|
272
|
+
--teal-400: hsl(170 65% 50%);
|
|
273
|
+
--teal-50: hsl(162 76% 97%);
|
|
274
|
+
--teal-500: hsl(171 79% 40%);
|
|
275
|
+
--teal-600: hsl(173 83% 32%);
|
|
276
|
+
--teal-700: hsl(173 77% 26%);
|
|
277
|
+
--teal-800: hsl(174 68% 22%);
|
|
278
|
+
--teal-900: hsl(174 61% 19%);
|
|
279
|
+
--violet-100: hsl(249 91% 95%);
|
|
280
|
+
--violet-200: hsl(251 95% 92%);
|
|
281
|
+
--violet-25: hsl(252 100% 99%);
|
|
282
|
+
--violet-300: hsl(252 95% 85%);
|
|
283
|
+
--violet-400: hsl(254 92% 76%);
|
|
284
|
+
--violet-50: hsl(250 100% 98%);
|
|
285
|
+
--violet-500: hsl(257 91% 66%);
|
|
286
|
+
--violet-600: hsl(261 83% 58%);
|
|
287
|
+
--violet-700: hsl(262 71% 50%);
|
|
288
|
+
--violet-800: hsl(262 70% 42%);
|
|
289
|
+
--violet-900: hsl(262 69% 35%);
|
|
290
|
+
--warning-100: hsl(45 96% 89%);
|
|
291
|
+
--warning-200: hsl(44 98% 77%);
|
|
292
|
+
--warning-25: hsl(42 100% 98%);
|
|
293
|
+
--warning-300: hsl(42 99% 65%);
|
|
294
|
+
--warning-400: hsl(39 98% 56%);
|
|
295
|
+
--warning-50: hsl(45 100% 96%);
|
|
296
|
+
--warning-500: hsl(34 94% 50%);
|
|
297
|
+
--warning-600: hsl(28 97% 44%);
|
|
298
|
+
--warning-700: hsl(22 93% 37%);
|
|
299
|
+
--warning-800: hsl(19 85% 31%);
|
|
300
|
+
--warning-900: hsl(18 79% 27%);
|
|
301
|
+
--yellow-100: hsl(54 94% 88%);
|
|
302
|
+
--yellow-200: hsl(51 98% 79%);
|
|
303
|
+
--yellow-25: hsl(56 88% 97%);
|
|
304
|
+
--yellow-300: hsl(48 97% 72%);
|
|
305
|
+
--yellow-400: hsl(46 96% 53%);
|
|
306
|
+
--yellow-50: hsl(52 92% 95%);
|
|
307
|
+
--yellow-500: hsl(43 94% 47%);
|
|
308
|
+
--yellow-600: hsl(39 97% 40%);
|
|
309
|
+
--yellow-700: hsl(33 93% 33%);
|
|
310
|
+
--yellow-800: hsl(30 82% 29%);
|
|
311
|
+
--yellow-900: hsl(26 74% 25%);
|
|
312
|
+
}
|
package/label/label.d.ts
CHANGED
package/label/label.js
CHANGED
|
@@ -37,12 +37,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.Label = void 0;
|
|
38
38
|
const classes_1 = require("@uxf/core/constants/classes");
|
|
39
39
|
const cx_1 = require("@uxf/core/utils/cx");
|
|
40
|
-
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
41
40
|
const react_1 = __importStar(require("react"));
|
|
42
41
|
exports.Label = (0, react_1.forwardRef)((props, ref) => {
|
|
43
42
|
const className = (0, cx_1.cx)("uxf-label", props.isHidden && "uxf-label--hidden", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
|
|
44
43
|
return (
|
|
45
44
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
|
|
46
|
-
react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref, tabIndex:
|
|
45
|
+
react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref, tabIndex: props.isFocusable ? 0 : undefined }, props.children));
|
|
47
46
|
});
|
|
48
47
|
exports.Label.displayName = "UxfUiLabel";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uxf/ui",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.117.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"gen": "npm run css-tokens:gen",
|
|
10
10
|
"build": "npm run css:prepare && npm run tokens:prepare && tsc -P tsconfig.json",
|
|
11
11
|
"css-tokens:gen": "bin/generate-css-tokens.js --source=./_tokens/source --output=./_tokens/generated/",
|
|
12
|
-
"css:prepare": "
|
|
12
|
+
"css:prepare": "./bin/css-prepare.sh",
|
|
13
13
|
"tokens:prepare": "rm -rf ./tokens && mkdir tokens && cp ./_tokens/generated/figma-colors.js ./tokens/",
|
|
14
14
|
"tw-tokens:check": "tsx ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
|
|
15
15
|
"tw-tokens:gen": "tsx ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
|
|
@@ -52,7 +52,7 @@ exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
|
|
|
52
52
|
const rootClassName = (0, cx_1.cx)("uxf-form-component uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
|
|
53
53
|
return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, "data-component": exports.RADIO_GROUP_COMPONENT_NAME, "data-name": props.name, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
|
|
54
54
|
react_2.default.createElement("div", { className: "uxf-form-component__label" },
|
|
55
|
-
react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, isRequired: props.isRequired, ref: ref }, props.label)),
|
|
55
|
+
react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isFocusable: true, isHidden: props.hiddenLabel, isRequired: props.isRequired, ref: ref }, props.label)),
|
|
56
56
|
react_2.default.createElement("div", { className: "uxf-form-component__input" },
|
|
57
57
|
react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.id.toString(), value: option.id }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
|
|
58
58
|
react_2.default.createElement("span", { className: "uxf-radio-group__option-label" }, option.label),
|
|
@@ -32,20 +32,23 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
36
|
exports.Default = Default;
|
|
40
|
-
exports.
|
|
37
|
+
exports.OnlyForE2ETests = OnlyForE2ETests;
|
|
41
38
|
const copy_to_clipboard_1 = require("@uxf/core/utils/copy-to-clipboard");
|
|
42
39
|
const button_1 = require("@uxf/ui/button");
|
|
40
|
+
const combobox_1 = require("@uxf/ui/combobox");
|
|
43
41
|
const flash_messages_service_1 = require("@uxf/ui/flash-messages/flash-messages-service");
|
|
44
42
|
const icon_1 = require("@uxf/ui/icon");
|
|
45
43
|
const text_input_1 = require("@uxf/ui/text-input");
|
|
46
|
-
const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
|
|
47
44
|
const react_1 = __importStar(require("react"));
|
|
48
45
|
const action_1 = require("../utils/action");
|
|
46
|
+
const PHONE_OPTIONS = [
|
|
47
|
+
{ id: "CZ", label: "+420" },
|
|
48
|
+
{ id: "SK", label: "+421" },
|
|
49
|
+
{ id: "DE", label: "+49" },
|
|
50
|
+
{ id: "AT", label: "+43" },
|
|
51
|
+
];
|
|
49
52
|
function Default() {
|
|
50
53
|
const [value, setValue] = (0, react_1.useState)("");
|
|
51
54
|
const [timeValue, setTimeValue] = (0, react_1.useState)("");
|
|
@@ -69,8 +72,9 @@ function Default() {
|
|
|
69
72
|
react_1.default.createElement(text_input_1.TextInput, { label: "Copy to clipboard input", leftAddon: "I can be copied!", name: "copyToClipboard", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "size-full rounded-l-none border-none", isDisabled: value === "", onClick: onCopy, variant: "secondary" },
|
|
70
73
|
react_1.default.createElement(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
|
|
71
74
|
}
|
|
72
|
-
function
|
|
73
|
-
const [
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
function OnlyForE2ETests() {
|
|
76
|
+
const [phoneCountryCode, setPhoneCountryCode] = (0, react_1.useState)({ id: "CZ", label: "+420" });
|
|
77
|
+
const [phoneNumber, setPhoneNumber] = (0, react_1.useState)("");
|
|
78
|
+
return (react_1.default.createElement("div", { className: "space-y-2 p-20" },
|
|
79
|
+
react_1.default.createElement(text_input_1.TextInput, { label: "Text input with combobox", leftAddon: react_1.default.createElement(combobox_1.Combobox, { className: "w-24", hiddenLabel: true, label: "Phone country code", name: "phoneCountryCode", onChange: setPhoneCountryCode, options: PHONE_OPTIONS, value: phoneCountryCode }), name: "phoneNumber", onChange: setPhoneNumber, placeholder: "777777777", type: "tel", value: phoneNumber })));
|
|
76
80
|
}
|
|
File without changes
|
|
File without changes
|