agroptima-design-system 0.2.0 → 0.2.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/.github/workflows/design-system-deploy-production.yaml +1 -1
- package/.github/workflows/run-linters.yml +10 -10
- package/package.json +4 -2
- package/src/atoms/Button.scss +49 -23
- package/src/atoms/CardsTableList.scss +3 -3
- package/src/atoms/Input.scss +17 -8
- package/src/atoms/Multiselect.scss +16 -11
- package/src/atoms/Multiselect.tsx +8 -2
- package/src/atoms/Select.scss +11 -9
- package/src/atoms/Select.tsx +7 -3
- package/src/settings/_depth.scss +8 -0
- package/src/settings/_typography.scss +2 -2
- package/src/stories/Button.stories.ts +7 -0
- package/src/stories/Changelog.stories.mdx +10 -0
- package/src/stories/Multiselect.stories.ts +31 -0
- package/src/stories/Select.stories.ts +27 -3
|
@@ -12,16 +12,16 @@ jobs:
|
|
|
12
12
|
runs-on: ubuntu-latest
|
|
13
13
|
|
|
14
14
|
steps:
|
|
15
|
-
|
|
15
|
+
- uses: actions/checkout@v4
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
- name: Setup Node
|
|
18
|
+
uses: actions/setup-node@v3
|
|
19
|
+
with:
|
|
20
|
+
node-version: 18.x
|
|
21
|
+
cache: 'npm'
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
- name: Install dependencies
|
|
24
|
+
run: npm install
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
- name: Lint
|
|
27
|
+
run: npm run lint
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "agroptima-design-system",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "npm run storybook",
|
|
6
6
|
"storybook": "storybook dev -p 6006 --ci",
|
|
@@ -49,7 +49,9 @@
|
|
|
49
49
|
"keywords": [
|
|
50
50
|
"design-system"
|
|
51
51
|
],
|
|
52
|
-
"author":
|
|
52
|
+
"author": {
|
|
53
|
+
"name": "Isagri"
|
|
54
|
+
},
|
|
53
55
|
"license": "MPL-2.0",
|
|
54
56
|
"bugs": {
|
|
55
57
|
"url": "https://github.com/agroptima/design-system/issues"
|
package/src/atoms/Button.scss
CHANGED
|
@@ -6,20 +6,20 @@
|
|
|
6
6
|
&.primary,
|
|
7
7
|
&.primary-outlined,
|
|
8
8
|
&.primary-ghost {
|
|
9
|
-
--color-bg: #{color_alias.$primary-color-
|
|
10
|
-
--color-bg-hover: #{color_alias.$primary-color-
|
|
9
|
+
--color-bg: #{color_alias.$primary-color-600};
|
|
10
|
+
--color-bg-hover: #{color_alias.$primary-color-1000};
|
|
11
11
|
--color-bg-hover-outlined: #{color_alias.$primary-color-50};
|
|
12
12
|
--color-fg: #{color_alias.$neutral-white};
|
|
13
|
-
--color-fg-reversed: #{color_alias.$primary-color-
|
|
13
|
+
--color-fg-reversed: #{color_alias.$primary-color-600};
|
|
14
14
|
}
|
|
15
15
|
&.error,
|
|
16
16
|
&.error-outlined,
|
|
17
17
|
&.error-ghost {
|
|
18
|
-
--color-bg: #{color_alias.$error-color-
|
|
19
|
-
--color-bg-hover: #{color_alias.$error-color-
|
|
18
|
+
--color-bg: #{color_alias.$error-color-600};
|
|
19
|
+
--color-bg-hover: #{color_alias.$error-color-900};
|
|
20
20
|
--color-bg-hover-outlined: #{color_alias.$error-color-50};
|
|
21
21
|
--color-fg: #{color_alias.$neutral-white};
|
|
22
|
-
--color-fg-reversed: #{color_alias.$error-color-
|
|
22
|
+
--color-fg-reversed: #{color_alias.$error-color-600};
|
|
23
23
|
}
|
|
24
24
|
&.success,
|
|
25
25
|
&.success-outlined,
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
--color-bg: #{color_alias.$success-color-1000};
|
|
28
28
|
--color-bg-hover: #{color_alias.$success-color-700};
|
|
29
29
|
--color-bg-hover-outlined: #{color_alias.$success-color-50};
|
|
30
|
-
--color-fg: #{color_alias.$neutral-
|
|
30
|
+
--color-fg: #{color_alias.$neutral-color-900};
|
|
31
31
|
--color-fg-reversed: #{color_alias.$success-color-1000};
|
|
32
32
|
}
|
|
33
33
|
&.warning,
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
--color-bg: #{color_alias.$warning-color-1000};
|
|
37
37
|
--color-bg-hover: #{color_alias.$warning-color-700};
|
|
38
38
|
--color-bg-hover-outlined: #{color_alias.$warning-color-50};
|
|
39
|
-
--color-fg: #{color_alias.$neutral-
|
|
39
|
+
--color-fg: #{color_alias.$neutral-color-900};
|
|
40
40
|
--color-fg-reversed: #{color_alias.$warning-color-1000};
|
|
41
41
|
}
|
|
42
42
|
&.info,
|
|
43
43
|
&.info-outlined,
|
|
44
44
|
&.info-ghost {
|
|
45
|
-
--color-bg: #{color_alias.$info-color-
|
|
46
|
-
--color-bg-hover: #{color_alias.$info-color-
|
|
45
|
+
--color-bg: #{color_alias.$info-color-600};
|
|
46
|
+
--color-bg-hover: #{color_alias.$info-color-900};
|
|
47
47
|
--color-bg-hover-outlined: #{color_alias.$info-color-50};
|
|
48
48
|
--color-fg: #{color_alias.$neutral-white};
|
|
49
|
-
--color-fg-reversed: #{color_alias.$info-color-
|
|
49
|
+
--color-fg-reversed: #{color_alias.$info-color-600};
|
|
50
50
|
}
|
|
51
51
|
&.neutral,
|
|
52
52
|
&.neutral-outlined,
|
|
@@ -87,41 +87,67 @@
|
|
|
87
87
|
&:not(:disabled):hover,
|
|
88
88
|
&:not(:disabled):active {
|
|
89
89
|
background: var(--color-bg-hover);
|
|
90
|
+
|
|
91
|
+
&.success,
|
|
92
|
+
&.warning {
|
|
93
|
+
color: color_alias.$neutral-white;
|
|
94
|
+
svg,
|
|
95
|
+
svg path {
|
|
96
|
+
fill: color_alias.$neutral-white;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
&:disabled {
|
|
93
|
-
background: color_alias.$neutral-color-
|
|
94
|
-
color:
|
|
102
|
+
background: color_alias.$neutral-color-50;
|
|
103
|
+
color: color_alias.$neutral-color-400;
|
|
95
104
|
svg,
|
|
96
105
|
svg path {
|
|
97
|
-
fill:
|
|
106
|
+
fill: color_alias.$neutral-color-400;
|
|
98
107
|
}
|
|
99
108
|
}
|
|
100
109
|
|
|
101
110
|
&.primary-outlined,
|
|
102
111
|
&.error-outlined,
|
|
103
|
-
&.success-outlined,
|
|
104
|
-
&.warning-outlined,
|
|
105
112
|
&.info-outlined,
|
|
106
113
|
&.neutral-outlined {
|
|
107
114
|
background: color_alias.$neutral-white;
|
|
108
|
-
color: var(--color-
|
|
115
|
+
color: var(--color-bg);
|
|
109
116
|
border: 1px solid var(--color-bg);
|
|
110
117
|
svg,
|
|
111
118
|
svg path {
|
|
112
|
-
fill: var(--color-
|
|
119
|
+
fill: var(--color-bg);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&.success-outlined,
|
|
124
|
+
&.warning-outlined {
|
|
125
|
+
background: color_alias.$neutral-white;
|
|
126
|
+
color: var(--color-fg);
|
|
127
|
+
border: 1px solid var(--color-bg);
|
|
128
|
+
svg,
|
|
129
|
+
svg path {
|
|
130
|
+
fill: var(--color-fg);
|
|
113
131
|
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&.primary-outlined,
|
|
135
|
+
&.error-outlined,
|
|
136
|
+
&.success-outlined,
|
|
137
|
+
&.warning-outlined,
|
|
138
|
+
&.info-outlined,
|
|
139
|
+
&.neutral-outlined {
|
|
114
140
|
&:not(:disabled):hover,
|
|
115
141
|
&:not(:disabled):active {
|
|
116
142
|
background: var(--color-bg-hover-outlined);
|
|
117
143
|
}
|
|
118
144
|
&:disabled {
|
|
119
145
|
background: color_alias.$neutral-color-50;
|
|
120
|
-
border: 1px solid color_alias.$neutral-color-
|
|
121
|
-
color: color_alias.$neutral-color-
|
|
146
|
+
border: 1px solid color_alias.$neutral-color-400;
|
|
147
|
+
color: color_alias.$neutral-color-400;
|
|
122
148
|
svg,
|
|
123
149
|
svg path {
|
|
124
|
-
fill: color_alias.$neutral-color-
|
|
150
|
+
fill: color_alias.$neutral-color-400;
|
|
125
151
|
}
|
|
126
152
|
}
|
|
127
153
|
}
|
|
@@ -144,10 +170,10 @@
|
|
|
144
170
|
border: 1px solid var(--color-bg);
|
|
145
171
|
}
|
|
146
172
|
&:disabled {
|
|
147
|
-
color: color_alias.$neutral-color-
|
|
173
|
+
color: color_alias.$neutral-color-400;
|
|
148
174
|
svg,
|
|
149
175
|
svg path {
|
|
150
|
-
fill: color_alias.$neutral-color-
|
|
176
|
+
fill: color_alias.$neutral-color-400;
|
|
151
177
|
}
|
|
152
178
|
}
|
|
153
179
|
}
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
th {
|
|
57
|
-
background: color_alias.$primary-color-
|
|
57
|
+
background: color_alias.$primary-color-1000;
|
|
58
58
|
|
|
59
59
|
.icon {
|
|
60
60
|
> svg {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
&.ascending {
|
|
68
68
|
> svg {
|
|
69
69
|
.sorter_svg__up {
|
|
70
|
-
fill: color_alias.$primary-color-
|
|
70
|
+
fill: color_alias.$primary-color-600;
|
|
71
71
|
}
|
|
72
72
|
.sorter_svg__down {
|
|
73
73
|
fill: color_alias.$neutral-white;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
fill: color_alias.$neutral-white;
|
|
82
82
|
}
|
|
83
83
|
.sorter_svg__down {
|
|
84
|
-
fill: color_alias.$primary-color-
|
|
84
|
+
fill: color_alias.$primary-color-600;
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
}
|
package/src/atoms/Input.scss
CHANGED
|
@@ -21,9 +21,18 @@
|
|
|
21
21
|
.input-container {
|
|
22
22
|
.icon {
|
|
23
23
|
> svg {
|
|
24
|
-
fill: color_alias.$neutral-color-
|
|
24
|
+
fill: color_alias.$neutral-color-400;
|
|
25
25
|
path {
|
|
26
|
-
fill: color_alias.$neutral-color-
|
|
26
|
+
fill: color_alias.$neutral-color-400;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.password-icon {
|
|
32
|
+
> svg {
|
|
33
|
+
fill: color_alias.$neutral-color-600;
|
|
34
|
+
path {
|
|
35
|
+
fill: color_alias.$neutral-color-600;
|
|
27
36
|
}
|
|
28
37
|
}
|
|
29
38
|
}
|
|
@@ -31,7 +40,7 @@
|
|
|
31
40
|
|
|
32
41
|
.input {
|
|
33
42
|
border-radius: config.$corner-radius-m;
|
|
34
|
-
border: 1px solid color_alias.$neutral-color-
|
|
43
|
+
border: 1px solid color_alias.$neutral-color-400;
|
|
35
44
|
background: color_alias.$neutral-white;
|
|
36
45
|
|
|
37
46
|
@include typography.input-text;
|
|
@@ -41,8 +50,8 @@
|
|
|
41
50
|
}
|
|
42
51
|
|
|
43
52
|
&:focus {
|
|
44
|
-
outline: color_alias.$primary-color-
|
|
45
|
-
border: 1px solid color_alias.$primary-color-
|
|
53
|
+
outline: color_alias.$primary-color-600;
|
|
54
|
+
border: 1px solid color_alias.$primary-color-600;
|
|
46
55
|
}
|
|
47
56
|
|
|
48
57
|
&.invalid {
|
|
@@ -50,12 +59,12 @@
|
|
|
50
59
|
}
|
|
51
60
|
|
|
52
61
|
&:disabled {
|
|
53
|
-
border: 1px solid color_alias.$neutral-color-
|
|
62
|
+
border: 1px solid color_alias.$neutral-color-400;
|
|
54
63
|
background: color_alias.$neutral-color-50;
|
|
55
|
-
color: color_alias.$neutral-color-
|
|
64
|
+
color: color_alias.$neutral-color-400;
|
|
56
65
|
|
|
57
66
|
&::placeholder {
|
|
58
|
-
color: color_alias.$neutral-color-
|
|
67
|
+
color: color_alias.$neutral-color-400;
|
|
59
68
|
}
|
|
60
69
|
}
|
|
61
70
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use '../settings/color_alias';
|
|
2
2
|
@use '../settings/typography';
|
|
3
3
|
@use '../settings/config';
|
|
4
|
+
@use '../settings/depth';
|
|
4
5
|
|
|
5
6
|
.multiselect-group {
|
|
6
7
|
display: flex;
|
|
@@ -20,15 +21,15 @@
|
|
|
20
21
|
|
|
21
22
|
.selected-option {
|
|
22
23
|
border-radius: config.$corner-radius-m;
|
|
23
|
-
border: 1px solid color_alias.$neutral-color-
|
|
24
|
+
border: 1px solid color_alias.$neutral-color-600;
|
|
24
25
|
background: color_alias.$neutral-white;
|
|
25
26
|
@include typography.select-text;
|
|
26
27
|
|
|
27
28
|
> .icon {
|
|
28
29
|
> svg {
|
|
29
|
-
fill: color_alias.$primary-color-
|
|
30
|
+
fill: color_alias.$primary-color-600;
|
|
30
31
|
path {
|
|
31
|
-
fill: color_alias.$primary-color-
|
|
32
|
+
fill: color_alias.$primary-color-600;
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
}
|
|
@@ -38,8 +39,8 @@
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
&:focus {
|
|
41
|
-
outline: color_alias.$primary-color-
|
|
42
|
-
border: 1px solid color_alias.$primary-color-
|
|
42
|
+
outline: color_alias.$primary-color-600;
|
|
43
|
+
border: 1px solid color_alias.$primary-color-600;
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
&.invalid {
|
|
@@ -47,15 +48,15 @@
|
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
&.disabled {
|
|
50
|
-
border: 1px solid color_alias.$neutral-color-
|
|
51
|
+
border: 1px solid color_alias.$neutral-color-400;
|
|
51
52
|
background: color_alias.$neutral-color-50;
|
|
52
|
-
color: color_alias.$neutral-color-
|
|
53
|
+
color: color_alias.$neutral-color-400;
|
|
53
54
|
|
|
54
55
|
> .icon {
|
|
55
56
|
> svg {
|
|
56
|
-
fill: color_alias.$neutral-color-
|
|
57
|
+
fill: color_alias.$neutral-color-400;
|
|
57
58
|
path {
|
|
58
|
-
fill: color_alias.$neutral-color-
|
|
59
|
+
fill: color_alias.$neutral-color-400;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
}
|
|
@@ -82,10 +83,13 @@
|
|
|
82
83
|
> svg {
|
|
83
84
|
border-radius: config.$corner-radius-xxs;
|
|
84
85
|
.checkbox-active_svg__border {
|
|
85
|
-
fill: color_alias.$primary-color-
|
|
86
|
+
fill: color_alias.$primary-color-600;
|
|
87
|
+
}
|
|
88
|
+
.checkbox-active_svg__background {
|
|
89
|
+
fill: color_alias.$primary-color-600;
|
|
86
90
|
}
|
|
87
91
|
.checkbox-inactive_svg__border {
|
|
88
|
-
fill: color_alias.$neutral-color-
|
|
92
|
+
fill: color_alias.$neutral-color-600;
|
|
89
93
|
}
|
|
90
94
|
}
|
|
91
95
|
}
|
|
@@ -121,6 +125,7 @@
|
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
.multiselect-options {
|
|
128
|
+
z-index: depth.$z-dropdown-options;
|
|
124
129
|
margin: 0;
|
|
125
130
|
padding: config.$space-1x 0rem;
|
|
126
131
|
text-align: left;
|
|
@@ -14,6 +14,8 @@ export interface MultiselectProps
|
|
|
14
14
|
invalid?: boolean
|
|
15
15
|
label: string
|
|
16
16
|
selectedLabel?: string
|
|
17
|
+
hideLabel?: boolean
|
|
18
|
+
selected?: Option[]
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
export function Multiselect({
|
|
@@ -26,9 +28,13 @@ export function Multiselect({
|
|
|
26
28
|
options,
|
|
27
29
|
label,
|
|
28
30
|
selectedLabel = 'items selected',
|
|
31
|
+
hideLabel = false,
|
|
32
|
+
selected,
|
|
29
33
|
}: MultiselectProps): React.JSX.Element {
|
|
30
34
|
const [showOptionsList, setShowOptionsList] = useState(false)
|
|
31
|
-
const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>(
|
|
35
|
+
const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>(
|
|
36
|
+
selected?.map((option) => option.id) || [],
|
|
37
|
+
)
|
|
32
38
|
|
|
33
39
|
const optionsListOpenClass = showOptionsList ? 'open' : ''
|
|
34
40
|
const filledSelectClass = selectedOptionsIds.length > 0 ? 'filled' : ''
|
|
@@ -70,7 +76,7 @@ export function Multiselect({
|
|
|
70
76
|
|
|
71
77
|
return (
|
|
72
78
|
<div className={`multiselect-group ${variant}`}>
|
|
73
|
-
<span className="multiselect-label">{label}</span>
|
|
79
|
+
{!hideLabel && <span className="multiselect-label">{label}</span>}
|
|
74
80
|
<div className="multiselect-container">
|
|
75
81
|
<div
|
|
76
82
|
className={cssClasses}
|
package/src/atoms/Select.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use '../settings/color_alias';
|
|
2
2
|
@use '../settings/typography';
|
|
3
3
|
@use '../settings/config';
|
|
4
|
+
@use '../settings/depth';
|
|
4
5
|
|
|
5
6
|
.select-group {
|
|
6
7
|
display: flex;
|
|
@@ -20,15 +21,15 @@
|
|
|
20
21
|
|
|
21
22
|
.selected-option {
|
|
22
23
|
border-radius: config.$corner-radius-m;
|
|
23
|
-
border: 1px solid color_alias.$neutral-color-
|
|
24
|
+
border: 1px solid color_alias.$neutral-color-600;
|
|
24
25
|
background: color_alias.$neutral-white;
|
|
25
26
|
@include typography.select-text;
|
|
26
27
|
|
|
27
28
|
> .icon {
|
|
28
29
|
> svg {
|
|
29
|
-
fill: color_alias.$primary-color-
|
|
30
|
+
fill: color_alias.$primary-color-600;
|
|
30
31
|
path {
|
|
31
|
-
fill: color_alias.$primary-color-
|
|
32
|
+
fill: color_alias.$primary-color-600;
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
}
|
|
@@ -38,8 +39,8 @@
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
&:focus {
|
|
41
|
-
outline: color_alias.$primary-color-
|
|
42
|
-
border: 1px solid color_alias.$primary-color-
|
|
42
|
+
outline: color_alias.$primary-color-600;
|
|
43
|
+
border: 1px solid color_alias.$primary-color-600;
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
&.invalid {
|
|
@@ -47,15 +48,15 @@
|
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
&.disabled {
|
|
50
|
-
border: 1px solid color_alias.$neutral-color-
|
|
51
|
+
border: 1px solid color_alias.$neutral-color-400;
|
|
51
52
|
background: color_alias.$neutral-color-50;
|
|
52
|
-
color: color_alias.$neutral-color-
|
|
53
|
+
color: color_alias.$neutral-color-400;
|
|
53
54
|
|
|
54
55
|
> .icon {
|
|
55
56
|
> svg {
|
|
56
|
-
fill: color_alias.$neutral-color-
|
|
57
|
+
fill: color_alias.$neutral-color-400;
|
|
57
58
|
path {
|
|
58
|
-
fill: color_alias.$neutral-color-
|
|
59
|
+
fill: color_alias.$neutral-color-400;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
}
|
|
@@ -63,6 +64,7 @@
|
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
.select-options {
|
|
67
|
+
z-index: depth.$z-dropdown-options;
|
|
66
68
|
border-radius: config.$corner-radius-xxs;
|
|
67
69
|
background: color_alias.$neutral-white;
|
|
68
70
|
box-shadow:
|
package/src/atoms/Select.tsx
CHANGED
|
@@ -12,6 +12,8 @@ export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
|
|
|
12
12
|
options: Option[]
|
|
13
13
|
invalid?: boolean
|
|
14
14
|
label: string
|
|
15
|
+
hideLabel?: boolean
|
|
16
|
+
selected?: Option
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
export function Select({
|
|
@@ -23,11 +25,13 @@ export function Select({
|
|
|
23
25
|
name,
|
|
24
26
|
options,
|
|
25
27
|
label,
|
|
28
|
+
hideLabel = false,
|
|
29
|
+
selected,
|
|
26
30
|
}: SelectProps): React.JSX.Element {
|
|
27
31
|
const [showOptionsList, setShowOptionsList] = useState(false)
|
|
28
32
|
const [selectedOption, setSelectedOption] = useState<Option>({
|
|
29
|
-
id: '',
|
|
30
|
-
label: '',
|
|
33
|
+
id: selected?.id || '',
|
|
34
|
+
label: selected?.label || '',
|
|
31
35
|
})
|
|
32
36
|
|
|
33
37
|
const optionsListOpenClass = showOptionsList ? 'open' : ''
|
|
@@ -58,7 +62,7 @@ export function Select({
|
|
|
58
62
|
|
|
59
63
|
return (
|
|
60
64
|
<div className={`select-group ${variant}`}>
|
|
61
|
-
<span className="select-label">{label}</span>
|
|
65
|
+
{!hideLabel && <span className="select-label">{label}</span>}
|
|
62
66
|
<div className="select-container">
|
|
63
67
|
<div
|
|
64
68
|
className={cssClasses}
|
|
@@ -19,7 +19,7 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
|
|
|
19
19
|
font-variant: $text-base-style;
|
|
20
20
|
font-weight: 300;
|
|
21
21
|
font-family: $font-base-family;
|
|
22
|
-
color: color_alias.$neutral-color-
|
|
22
|
+
color: color_alias.$neutral-color-600;
|
|
23
23
|
// We need to apply a relation between font-size and line-height so the box envoloping the span
|
|
24
24
|
// is the most accurate in terms of top and bottom blank space.
|
|
25
25
|
font-size: 0.75rem;
|
|
@@ -37,7 +37,7 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
|
|
|
37
37
|
font-variant: $text-base-style;
|
|
38
38
|
font-weight: 400;
|
|
39
39
|
font-family: $font-base-family;
|
|
40
|
-
color: color_alias.$neutral-color-
|
|
40
|
+
color: color_alias.$neutral-color-400;
|
|
41
41
|
// We shouldn't define a font-size for the placeholder: https://stackoverflow.com/questions/30916387/placeholder-font-size-bigger-than-16px
|
|
42
42
|
}
|
|
43
43
|
@mixin select-text {
|
|
@@ -98,6 +98,7 @@ export const PrimaryWithLeftIcon: Story = {
|
|
|
98
98
|
export const PrimaryOutlined: Story = {
|
|
99
99
|
args: {
|
|
100
100
|
variant: 'primary-outlined',
|
|
101
|
+
disabled: false,
|
|
101
102
|
},
|
|
102
103
|
parameters: figmaPrimaryDesign,
|
|
103
104
|
}
|
|
@@ -105,6 +106,7 @@ export const PrimaryOutlined: Story = {
|
|
|
105
106
|
export const PrimaryGhost: Story = {
|
|
106
107
|
args: {
|
|
107
108
|
variant: 'primary-ghost',
|
|
109
|
+
disabled: false,
|
|
108
110
|
},
|
|
109
111
|
parameters: figmaPrimaryDesign,
|
|
110
112
|
}
|
|
@@ -112,6 +114,7 @@ export const PrimaryGhost: Story = {
|
|
|
112
114
|
export const Neutral: Story = {
|
|
113
115
|
args: {
|
|
114
116
|
variant: 'neutral',
|
|
117
|
+
disabled: false,
|
|
115
118
|
},
|
|
116
119
|
parameters: figmaNeutralDesign,
|
|
117
120
|
}
|
|
@@ -119,6 +122,7 @@ export const Neutral: Story = {
|
|
|
119
122
|
export const Error: Story = {
|
|
120
123
|
args: {
|
|
121
124
|
variant: 'error',
|
|
125
|
+
disabled: false,
|
|
122
126
|
},
|
|
123
127
|
parameters: figmaErrorDesign,
|
|
124
128
|
}
|
|
@@ -126,6 +130,7 @@ export const Error: Story = {
|
|
|
126
130
|
export const Success: Story = {
|
|
127
131
|
args: {
|
|
128
132
|
variant: 'success',
|
|
133
|
+
disabled: false,
|
|
129
134
|
},
|
|
130
135
|
parameters: figmaSuccessDesign,
|
|
131
136
|
}
|
|
@@ -133,6 +138,7 @@ export const Success: Story = {
|
|
|
133
138
|
export const Warning: Story = {
|
|
134
139
|
args: {
|
|
135
140
|
variant: 'warning',
|
|
141
|
+
disabled: false,
|
|
136
142
|
},
|
|
137
143
|
parameters: figmaWarningDesign,
|
|
138
144
|
}
|
|
@@ -140,6 +146,7 @@ export const Warning: Story = {
|
|
|
140
146
|
export const Info: Story = {
|
|
141
147
|
args: {
|
|
142
148
|
variant: 'info',
|
|
149
|
+
disabled: false,
|
|
143
150
|
},
|
|
144
151
|
parameters: figmaInfoDesign,
|
|
145
152
|
}
|
|
@@ -3,6 +3,16 @@ import { Meta } from "@storybook/addon-docs";
|
|
|
3
3
|
<Meta title="Changelog" />
|
|
4
4
|
# Changelog
|
|
5
5
|
|
|
6
|
+
## 0.2.2
|
|
7
|
+
|
|
8
|
+
- Select and Multiselect options dropdown have a higher z-index.
|
|
9
|
+
- Select and Multiselect can hide its label with `hideLabel` prop.
|
|
10
|
+
- Select and Multiselect can load preselected options with `selected` prop.
|
|
11
|
+
|
|
12
|
+
## 0.2.1
|
|
13
|
+
|
|
14
|
+
- Colors have been updated due to accessibility issues.
|
|
15
|
+
|
|
6
16
|
## 0.2.0
|
|
7
17
|
|
|
8
18
|
- Sorting has been added to the CardsTableList component.
|
|
@@ -33,6 +33,9 @@ const meta = {
|
|
|
33
33
|
options: {
|
|
34
34
|
description: 'Array of values to be displayed on the select list',
|
|
35
35
|
},
|
|
36
|
+
selected: {
|
|
37
|
+
description: 'Array of values to be displayed as selected',
|
|
38
|
+
},
|
|
36
39
|
},
|
|
37
40
|
}
|
|
38
41
|
|
|
@@ -51,6 +54,7 @@ export const Primary: Story = {
|
|
|
51
54
|
variant: 'primary',
|
|
52
55
|
disabled: false,
|
|
53
56
|
invalid: false,
|
|
57
|
+
hideLabel: false,
|
|
54
58
|
helpText: 'This text can help you',
|
|
55
59
|
name: 'example',
|
|
56
60
|
label: 'Videogames',
|
|
@@ -67,3 +71,30 @@ export const Primary: Story = {
|
|
|
67
71
|
},
|
|
68
72
|
parameters: figmaPrimaryDesign,
|
|
69
73
|
}
|
|
74
|
+
|
|
75
|
+
export const PrimaryWithSelectedOptions: Story = {
|
|
76
|
+
args: {
|
|
77
|
+
variant: 'primary',
|
|
78
|
+
disabled: false,
|
|
79
|
+
invalid: false,
|
|
80
|
+
hideLabel: false,
|
|
81
|
+
helpText: 'This text can help you',
|
|
82
|
+
name: 'example',
|
|
83
|
+
label: 'Videogames',
|
|
84
|
+
selectedLabel: 'videogames selected',
|
|
85
|
+
placeholder: 'Select your favourite videogames...',
|
|
86
|
+
options: [
|
|
87
|
+
{ id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
|
|
88
|
+
{ id: '2', label: 'Spyro the Dragon' },
|
|
89
|
+
{ id: '3', label: 'Halo' },
|
|
90
|
+
{ id: '4', label: 'Tetris' },
|
|
91
|
+
{ id: '5', label: 'Super Mario Bros' },
|
|
92
|
+
{ id: '6', label: 'Red Dead Redemption' },
|
|
93
|
+
],
|
|
94
|
+
selected: [
|
|
95
|
+
{ id: '2', label: 'Spyro the Dragon' },
|
|
96
|
+
{ id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
|
|
97
|
+
],
|
|
98
|
+
},
|
|
99
|
+
parameters: figmaPrimaryDesign,
|
|
100
|
+
}
|
|
@@ -15,8 +15,8 @@ const meta = {
|
|
|
15
15
|
disabled: {
|
|
16
16
|
description: 'Is the select in disabled state?',
|
|
17
17
|
},
|
|
18
|
-
|
|
19
|
-
description: 'Is the select in
|
|
18
|
+
invalid: {
|
|
19
|
+
description: 'Is the select in disabled state?',
|
|
20
20
|
},
|
|
21
21
|
helpText: {
|
|
22
22
|
description: 'Optional help text',
|
|
@@ -30,6 +30,9 @@ const meta = {
|
|
|
30
30
|
options: {
|
|
31
31
|
description: 'Array of values to be displayed on the select list',
|
|
32
32
|
},
|
|
33
|
+
selected: {
|
|
34
|
+
description: 'Value to be displayed as selected',
|
|
35
|
+
},
|
|
33
36
|
},
|
|
34
37
|
}
|
|
35
38
|
|
|
@@ -47,16 +50,37 @@ export const Primary: Story = {
|
|
|
47
50
|
args: {
|
|
48
51
|
variant: 'primary',
|
|
49
52
|
disabled: false,
|
|
50
|
-
|
|
53
|
+
invalid: false,
|
|
54
|
+
helpText: 'This text can help you',
|
|
55
|
+
name: 'example',
|
|
56
|
+
label: 'Videogames',
|
|
57
|
+
hideLabel: false,
|
|
58
|
+
placeholder: 'Select your favourite gaming system...',
|
|
59
|
+
options: [
|
|
60
|
+
{ id: '1', label: 'Nintendo Switch' },
|
|
61
|
+
{ id: '2', label: 'PlayStation 5' },
|
|
62
|
+
{ id: '3', label: 'Xbox Series S/X' },
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
parameters: figmaPrimaryDesign,
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export const PrimaryWithSelectedOptions: Story = {
|
|
69
|
+
args: {
|
|
70
|
+
variant: 'primary',
|
|
71
|
+
disabled: false,
|
|
72
|
+
invalid: false,
|
|
51
73
|
helpText: 'This text can help you',
|
|
52
74
|
name: 'example',
|
|
53
75
|
label: 'Videogames',
|
|
76
|
+
hideLabel: false,
|
|
54
77
|
placeholder: 'Select your favourite gaming system...',
|
|
55
78
|
options: [
|
|
56
79
|
{ id: '1', label: 'Nintendo Switch' },
|
|
57
80
|
{ id: '2', label: 'PlayStation 5' },
|
|
58
81
|
{ id: '3', label: 'Xbox Series S/X' },
|
|
59
82
|
],
|
|
83
|
+
selected: { id: '2', label: 'PlayStation 5' },
|
|
60
84
|
},
|
|
61
85
|
parameters: figmaPrimaryDesign,
|
|
62
86
|
}
|