@commercetools-frontend/ui-kit 15.2.4 → 15.3.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.
- package/dist/commercetools-frontend-ui-kit.cjs.dev.js +5 -1
- package/dist/commercetools-frontend-ui-kit.cjs.prod.js +5 -1
- package/dist/commercetools-frontend-ui-kit.esm.js +2 -2
- package/dist/declarations/src/index.d.ts +1 -1
- package/materials/custom-properties.css +1 -1
- package/materials/internals/definition.yaml +264 -238
- package/materials/internals/tokens.story.js +111 -36
- package/package.json +34 -34
|
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
|
|
|
80
80
|
var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
|
|
81
81
|
|
|
82
82
|
// NOTE: This string will be replaced on build time with the package version.
|
|
83
|
-
var version = "15.
|
|
83
|
+
var version = "15.3.0";
|
|
84
84
|
|
|
85
85
|
exports.i18n = i18n__namespace;
|
|
86
86
|
Object.defineProperty(exports, 'AccessibleHidden', {
|
|
@@ -223,6 +223,10 @@ Object.defineProperty(exports, 'customProperties', {
|
|
|
223
223
|
enumerable: true,
|
|
224
224
|
get: function () { return designSystem.customProperties; }
|
|
225
225
|
});
|
|
226
|
+
Object.defineProperty(exports, 'designTokens', {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function () { return designSystem.designTokens; }
|
|
229
|
+
});
|
|
226
230
|
exports.version = version;
|
|
227
231
|
Object.keys(buttons).forEach(function (k) {
|
|
228
232
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
|
|
|
80
80
|
var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
|
|
81
81
|
|
|
82
82
|
// NOTE: This string will be replaced on build time with the package version.
|
|
83
|
-
var version = "15.
|
|
83
|
+
var version = "15.3.0";
|
|
84
84
|
|
|
85
85
|
exports.i18n = i18n__namespace;
|
|
86
86
|
Object.defineProperty(exports, 'AccessibleHidden', {
|
|
@@ -223,6 +223,10 @@ Object.defineProperty(exports, 'customProperties', {
|
|
|
223
223
|
enumerable: true,
|
|
224
224
|
get: function () { return designSystem.customProperties; }
|
|
225
225
|
});
|
|
226
|
+
Object.defineProperty(exports, 'designTokens', {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function () { return designSystem.designTokens; }
|
|
229
|
+
});
|
|
226
230
|
exports.version = version;
|
|
227
231
|
Object.keys(buttons).forEach(function (k) {
|
|
228
232
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
@@ -30,9 +30,9 @@ export { default as Tooltip } from '@commercetools-uikit/tooltip';
|
|
|
30
30
|
export { default as Text } from '@commercetools-uikit/text';
|
|
31
31
|
export { default as ViewSwitcher } from '@commercetools-uikit/view-switcher';
|
|
32
32
|
export { useDataTableSortingState, usePaginationState, useRowSelection, useSorting, useToggleState } from '@commercetools-uikit/hooks';
|
|
33
|
-
export { customProperties } from '@commercetools-uikit/design-system';
|
|
33
|
+
export { customProperties, designTokens } from '@commercetools-uikit/design-system';
|
|
34
34
|
|
|
35
35
|
// NOTE: This string will be replaced on build time with the package version.
|
|
36
|
-
var version = "15.
|
|
36
|
+
var version = "15.3.0";
|
|
37
37
|
|
|
38
38
|
export { version };
|
|
@@ -30,5 +30,5 @@ export { default as Tooltip } from '@commercetools-uikit/tooltip';
|
|
|
30
30
|
export { default as Text } from '@commercetools-uikit/text';
|
|
31
31
|
export { default as ViewSwitcher } from '@commercetools-uikit/view-switcher';
|
|
32
32
|
export { useToggleState, useSorting, useRowSelection, usePaginationState, useDataTableSortingState, } from '@commercetools-uikit/hooks';
|
|
33
|
-
export { customProperties } from '@commercetools-uikit/design-system';
|
|
33
|
+
export { customProperties, designTokens, } from '@commercetools-uikit/design-system';
|
|
34
34
|
export { default as version } from './version';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
|
3
3
|
|
|
4
|
-
This file is created by the 'scripts/generate-
|
|
4
|
+
This file is created by the 'scripts/generate-design-tokens.js' script.
|
|
5
5
|
The variables should be updated in 'materials/internals/definition.yaml'.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -18,127 +18,138 @@
|
|
|
18
18
|
# Storybook at uikit.commercetools.com.
|
|
19
19
|
#
|
|
20
20
|
#
|
|
21
|
-
# Run "node scripts/generate-
|
|
21
|
+
# Run "node scripts/generate-design-tokens" to generate `materials/design-tokens`
|
|
22
22
|
# files in different format (css, json, js, ...).
|
|
23
23
|
#
|
|
24
24
|
# The names of decisions in this file need to follow this format:
|
|
25
25
|
# <attribute>-for-<component-group>-when-<state>-
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
27
|
+
choiceGroupsByTheme:
|
|
28
|
+
default:
|
|
29
|
+
colors:
|
|
30
|
+
label: Colors
|
|
31
|
+
prefix: color
|
|
32
|
+
description: All colors in the system
|
|
33
|
+
choices:
|
|
34
|
+
color-primary: '#00b39e'
|
|
35
|
+
color-primary-25: 'hsl(172.9608938547486, 100%, 25%)'
|
|
36
|
+
color-primary-40: 'hsl(172.9608938547486, 100%, 40%)'
|
|
37
|
+
color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
|
|
38
|
+
color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'
|
|
39
|
+
color-accent: '#213c45'
|
|
40
|
+
color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
|
|
41
|
+
color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
|
|
42
|
+
color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
|
|
43
|
+
color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
|
|
44
|
+
color-neutral: '#ccc'
|
|
45
|
+
color-neutral-60: 'hsl(0, 0%, 60%)'
|
|
46
|
+
color-neutral-90: 'hsl(0, 0%, 90%)'
|
|
47
|
+
color-neutral-95: 'hsl(0, 0%, 95%)'
|
|
48
|
+
color-info: '#078cdf'
|
|
49
|
+
color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
|
|
50
|
+
color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
|
|
51
|
+
color-warning: '#f16d0e'
|
|
52
|
+
color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
|
|
53
|
+
color-error: '#e60050'
|
|
54
|
+
color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
|
|
55
|
+
color-solid: '#1a1a1a'
|
|
56
|
+
color-surface: '#fff'
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
58
|
+
borderRadiuses:
|
|
59
|
+
label: Border Radiuses
|
|
60
|
+
prefix: border-radius
|
|
61
|
+
choices:
|
|
62
|
+
border-radius-1: 1px
|
|
63
|
+
border-radius-2: 2px
|
|
64
|
+
border-radius-4: 4px
|
|
65
|
+
border-radius-6: 6px
|
|
66
|
+
border-radius-20: 20px
|
|
67
|
+
fontFamilies:
|
|
68
|
+
label: Font families
|
|
69
|
+
prefix: font-family
|
|
70
|
+
choices:
|
|
71
|
+
font-family-body: "'Open Sans', sans-serif"
|
|
72
|
+
fontSizes:
|
|
73
|
+
label: Font sizes
|
|
74
|
+
prefix: font-size
|
|
75
|
+
choices:
|
|
76
|
+
font-size-m: '1rem'
|
|
77
|
+
shadows:
|
|
78
|
+
label: Shadows
|
|
79
|
+
prefix: shadow
|
|
80
|
+
choices:
|
|
81
|
+
shadow-1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
|
|
82
|
+
shadow-2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
|
|
83
|
+
shadow-3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)'
|
|
84
|
+
shadow-4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)'
|
|
85
|
+
shadow-5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)'
|
|
86
|
+
shadow-6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
|
|
87
|
+
shadow-7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)'
|
|
88
|
+
shadow-8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)'
|
|
89
|
+
shadow-9: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)'
|
|
90
|
+
shadow-10: '0 0 0 1px rgba(224, 230, 237, 0.5)'
|
|
91
|
+
shadow-11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)'
|
|
92
|
+
shadow-12: '0 0 1px rgba(0, 0, 0, 0.25)'
|
|
93
|
+
shadow-13: '0 0 1px rgba(0, 0, 0, 0.25)'
|
|
94
|
+
shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)'
|
|
95
|
+
shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)'
|
|
96
|
+
shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)'
|
|
97
|
+
constraints:
|
|
98
|
+
label: Constraints
|
|
99
|
+
prefix: constraint
|
|
100
|
+
choices:
|
|
101
|
+
constraint-scale: 100%
|
|
102
|
+
constraint-1: 42px
|
|
103
|
+
constraint-2: 84px
|
|
104
|
+
constraint-3: 142px
|
|
105
|
+
constraint-4: 184px
|
|
106
|
+
constraint-5: 242px
|
|
107
|
+
constraint-6: 284px
|
|
108
|
+
constraint-7: 342px
|
|
109
|
+
constraint-8: 384px
|
|
110
|
+
constraint-9: 442px
|
|
111
|
+
constraint-10: 484px
|
|
112
|
+
constraint-11: 542px
|
|
113
|
+
constraint-12: 584px
|
|
114
|
+
constraint-13: 642px
|
|
115
|
+
constraint-14: 684px
|
|
116
|
+
constraint-15: 742px
|
|
117
|
+
constraint-16: 784px
|
|
118
|
+
spacings:
|
|
119
|
+
label: Spacings
|
|
120
|
+
prefix: spacing
|
|
121
|
+
choices:
|
|
122
|
+
spacing-xs: 4px
|
|
123
|
+
spacing-s: 8px
|
|
124
|
+
spacing-m: 16px
|
|
125
|
+
spacing-l: 24px
|
|
126
|
+
spacing-xl: 32px
|
|
127
|
+
transitions:
|
|
128
|
+
label: Transitions
|
|
129
|
+
prefix: transition
|
|
130
|
+
choices:
|
|
131
|
+
transition-linear-80ms: '80ms linear'
|
|
132
|
+
transition-easeinout-150ms: '150ms ease-in-out'
|
|
133
|
+
transition-standard: '200ms ease'
|
|
134
|
+
breakpoints:
|
|
135
|
+
label: Breakpoints
|
|
136
|
+
prefix: break-point
|
|
137
|
+
choices:
|
|
138
|
+
break-point-mobile: 768px
|
|
139
|
+
break-point-desktop: 1024px
|
|
140
|
+
break-point-biggerdesktop: 1280px
|
|
141
|
+
break-point-giantdesktop: 1680px
|
|
142
|
+
break-point-jumbodesktop: 1920px
|
|
143
|
+
|
|
144
|
+
test:
|
|
145
|
+
colors:
|
|
146
|
+
label: Colors
|
|
147
|
+
prefix: color
|
|
148
|
+
description: Dark theme colors overwrite
|
|
149
|
+
choices:
|
|
150
|
+
color-primary: '#f78d26'
|
|
151
|
+
color-solid: '#fff'
|
|
152
|
+
color-surface: '#1a1a1a'
|
|
142
153
|
|
|
143
154
|
states:
|
|
144
155
|
active: 'Trigged while the user is currently interacting with the element'
|
|
@@ -168,134 +179,149 @@ componentGroups:
|
|
|
168
179
|
text:
|
|
169
180
|
description: 'Text elements'
|
|
170
181
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
182
|
+
decisionGroupsByTheme:
|
|
183
|
+
default:
|
|
184
|
+
backgroundColors:
|
|
185
|
+
label: Background Colors
|
|
186
|
+
prefix: background-color
|
|
187
|
+
decisions:
|
|
188
|
+
background-color-for-input:
|
|
189
|
+
description: ''
|
|
190
|
+
choice: color-surface
|
|
191
|
+
background-color-for-input-when-selected:
|
|
192
|
+
description: ''
|
|
193
|
+
choice: color-accent-95
|
|
194
|
+
background-color-for-input-when-disabled:
|
|
195
|
+
description: ''
|
|
196
|
+
choice: color-accent-98
|
|
197
|
+
background-color-for-input-when-hovered:
|
|
198
|
+
description: ''
|
|
199
|
+
choice: color-neutral-90
|
|
200
|
+
background-color-for-tag:
|
|
201
|
+
description: ''
|
|
202
|
+
choice: color-neutral-95
|
|
203
|
+
background-color-for-tag-warning:
|
|
204
|
+
description: ''
|
|
205
|
+
choice: color-warning-95
|
|
206
|
+
|
|
207
|
+
borderColors:
|
|
208
|
+
label: Border Colors
|
|
209
|
+
prefix: border-color
|
|
210
|
+
decisions:
|
|
211
|
+
border-color-for-input:
|
|
212
|
+
description: ''
|
|
213
|
+
choice: color-neutral-60
|
|
214
|
+
border-color-for-input-when-focused:
|
|
215
|
+
description: ''
|
|
216
|
+
choice: color-primary
|
|
217
|
+
border-color-for-input-when-disabled:
|
|
218
|
+
description: ''
|
|
219
|
+
choice: color-neutral
|
|
220
|
+
border-color-for-input-when-readonly:
|
|
221
|
+
description: ''
|
|
222
|
+
choice: color-neutral
|
|
223
|
+
border-color-for-input-when-error:
|
|
224
|
+
description: ''
|
|
225
|
+
choice: color-error
|
|
226
|
+
border-color-for-input-when-warning:
|
|
227
|
+
description: ''
|
|
228
|
+
choice: color-warning
|
|
229
|
+
border-color-for-tag:
|
|
230
|
+
description: ''
|
|
231
|
+
choice: color-neutral-60
|
|
232
|
+
border-color-for-tag-warning:
|
|
233
|
+
description: ''
|
|
234
|
+
choice: color-warning
|
|
235
|
+
border-color-for-tag-when-focused:
|
|
236
|
+
description: ''
|
|
237
|
+
choice: color-primary
|
|
238
|
+
|
|
239
|
+
borderRadiuses:
|
|
240
|
+
label: Border Radius
|
|
241
|
+
prefix: border-radius
|
|
242
|
+
decisions:
|
|
243
|
+
border-radius-for-input:
|
|
244
|
+
description: ''
|
|
245
|
+
choice: border-radius-6
|
|
246
|
+
border-radius-for-tag:
|
|
247
|
+
description: ''
|
|
248
|
+
choice: border-radius-2
|
|
249
|
+
# We don't have font families in choices yet, so we can't have decisions for
|
|
250
|
+
# them
|
|
251
|
+
|
|
252
|
+
fontColors:
|
|
253
|
+
label: Font Colors
|
|
254
|
+
prefix: font-color
|
|
255
|
+
decisions:
|
|
256
|
+
font-color-for-input:
|
|
257
|
+
description: ''
|
|
258
|
+
choice: color-solid
|
|
259
|
+
font-color-for-input-when-disabled:
|
|
260
|
+
description: ''
|
|
261
|
+
choice: color-neutral-60
|
|
262
|
+
font-color-for-input-when-error:
|
|
263
|
+
description: ''
|
|
264
|
+
choice: color-error
|
|
265
|
+
font-color-for-input-when-readonly:
|
|
266
|
+
description: ''
|
|
267
|
+
choice: color-neutral-60
|
|
268
|
+
font-color-for-input-when-warning:
|
|
269
|
+
description: ''
|
|
270
|
+
choice: color-warning
|
|
271
|
+
font-color-for-tag:
|
|
272
|
+
description: ''
|
|
273
|
+
choice: color-solid
|
|
274
|
+
font-color-for-tag-when-disabled:
|
|
275
|
+
description: ''
|
|
276
|
+
choice: color-neutral-60
|
|
277
|
+
font-color-for-text-when-inverted:
|
|
278
|
+
description: ''
|
|
279
|
+
choice: color-surface
|
|
194
280
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
border-color-for-input-when-focused:
|
|
203
|
-
description: ''
|
|
204
|
-
choice: color-primary
|
|
205
|
-
border-color-for-input-when-disabled:
|
|
206
|
-
description: ''
|
|
207
|
-
choice: color-neutral
|
|
208
|
-
border-color-for-input-when-readonly:
|
|
209
|
-
description: ''
|
|
210
|
-
choice: color-neutral
|
|
211
|
-
border-color-for-input-when-error:
|
|
212
|
-
description: ''
|
|
213
|
-
choice: color-error
|
|
214
|
-
border-color-for-input-when-warning:
|
|
215
|
-
description: ''
|
|
216
|
-
choice: color-warning
|
|
217
|
-
border-color-for-tag:
|
|
218
|
-
description: ''
|
|
219
|
-
choice: color-neutral-60
|
|
220
|
-
border-color-for-tag-warning:
|
|
221
|
-
description: ''
|
|
222
|
-
choice: color-warning
|
|
223
|
-
border-color-for-tag-when-focused:
|
|
224
|
-
description: ''
|
|
225
|
-
choice: color-primary
|
|
281
|
+
fontFamily:
|
|
282
|
+
label: Font family
|
|
283
|
+
prefix: font-family
|
|
284
|
+
decisions:
|
|
285
|
+
font-family:
|
|
286
|
+
description: ''
|
|
287
|
+
choice: font-family-body
|
|
226
288
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
border-radius-for-tag:
|
|
235
|
-
description: ''
|
|
236
|
-
choice: border-radius-2
|
|
237
|
-
# We don't have font families in choices yet, so we can't have decisions for
|
|
238
|
-
# them
|
|
289
|
+
placeholderFontColors:
|
|
290
|
+
label: Placeholder font colors
|
|
291
|
+
prefix: placeholder-font-color
|
|
292
|
+
decisions:
|
|
293
|
+
placeholder-font-color-for-input:
|
|
294
|
+
description: ''
|
|
295
|
+
choice: color-neutral-60
|
|
239
296
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
font-color-for-input-when-disabled:
|
|
248
|
-
description: ''
|
|
249
|
-
choice: color-neutral-60
|
|
250
|
-
font-color-for-input-when-error:
|
|
251
|
-
description: ''
|
|
252
|
-
choice: color-error
|
|
253
|
-
font-color-for-input-when-readonly:
|
|
254
|
-
description: ''
|
|
255
|
-
choice: color-neutral-60
|
|
256
|
-
font-color-for-input-when-warning:
|
|
257
|
-
description: ''
|
|
258
|
-
choice: color-warning
|
|
259
|
-
font-color-for-tag:
|
|
260
|
-
description: ''
|
|
261
|
-
choice: color-solid
|
|
262
|
-
font-color-for-tag-when-disabled:
|
|
263
|
-
description: ''
|
|
264
|
-
choice: color-neutral-60
|
|
265
|
-
font-color-for-text-when-inverted:
|
|
266
|
-
description: ''
|
|
267
|
-
choice: color-surface
|
|
297
|
+
fontSizes:
|
|
298
|
+
label: Font Sizes
|
|
299
|
+
prefix: font-size
|
|
300
|
+
decisions:
|
|
301
|
+
font-size-for-input:
|
|
302
|
+
description: ''
|
|
303
|
+
choice: font-size-m
|
|
268
304
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
label: Placeholder font colors
|
|
278
|
-
prefix: placeholder-font-color
|
|
279
|
-
decisions:
|
|
280
|
-
placeholder-font-color-for-input:
|
|
281
|
-
description: ''
|
|
282
|
-
choice: color-neutral-60
|
|
305
|
+
shadows:
|
|
306
|
+
label: Shadows
|
|
307
|
+
prefix: shadow
|
|
308
|
+
decisions:
|
|
309
|
+
shadow-box-tag-when-hovered:
|
|
310
|
+
description: ''
|
|
311
|
+
deprecated: true
|
|
312
|
+
choice: shadow-1
|
|
283
313
|
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
shadow-box-tag-when-hovered:
|
|
296
|
-
description: ''
|
|
297
|
-
deprecated: true
|
|
298
|
-
choice: shadow-1
|
|
314
|
+
test:
|
|
315
|
+
backgroundColors:
|
|
316
|
+
label: Background Colors
|
|
317
|
+
prefix: background-color
|
|
318
|
+
decisions:
|
|
319
|
+
background-color-for-tag:
|
|
320
|
+
description: ''
|
|
321
|
+
choice: color-warning-95
|
|
322
|
+
background-color-for-tag-warning:
|
|
323
|
+
description: ''
|
|
324
|
+
choice: color-neutral-95
|
|
299
325
|
|
|
300
326
|
# These tokens are deprecated as they don't follow our naming patterns.
|
|
301
327
|
# Ideally they should be replaced with new tokens and not be used anymore.
|
|
@@ -3,11 +3,18 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { storiesOf } from '@storybook/react';
|
|
4
4
|
import styled from '@emotion/styled';
|
|
5
5
|
import TextInput from '@commercetools-uikit/text-input';
|
|
6
|
-
import
|
|
6
|
+
import merge from 'lodash/merge';
|
|
7
|
+
import { designTokens } from '@commercetools-uikit/design-system';
|
|
7
8
|
import Readme from './TOKENS.md';
|
|
8
9
|
import definition from './definition.yaml';
|
|
9
10
|
import deprecatedTokens from './deprecated-tokens';
|
|
10
11
|
|
|
12
|
+
const choiceGroupsByTheme =
|
|
13
|
+
process.env.NODE_ENV !== 'production'
|
|
14
|
+
? definition.choiceGroupsByTheme
|
|
15
|
+
: { default: definition.choiceGroupsByTheme.default };
|
|
16
|
+
const allThemesNames = Object.keys(choiceGroupsByTheme);
|
|
17
|
+
|
|
11
18
|
const getIsDeprecated = (token) => deprecatedTokens.includes(token);
|
|
12
19
|
|
|
13
20
|
const Table = styled.table`
|
|
@@ -27,8 +34,8 @@ const Table = styled.table`
|
|
|
27
34
|
|
|
28
35
|
const Background = styled.div`
|
|
29
36
|
background-color: rgba(0, 0, 0, 0.01);
|
|
30
|
-
font-family: ${
|
|
31
|
-
color: ${
|
|
37
|
+
font-family: ${designTokens.fontFamilyDefault};
|
|
38
|
+
color: ${designTokens.colorSolid}
|
|
32
39
|
margin: 10px;
|
|
33
40
|
> * + * {
|
|
34
41
|
margin: 16px 0 0 0;
|
|
@@ -56,13 +63,27 @@ const Description = styled.p`
|
|
|
56
63
|
const DeprecationBadge = () => <b style={{ color: 'orange' }}>DEPRECATED</b>;
|
|
57
64
|
DeprecationBadge.displayName = 'DeprecationBadge';
|
|
58
65
|
|
|
59
|
-
const
|
|
60
|
-
|
|
66
|
+
const getThemeChoiceByName = (theme, choiceName) =>
|
|
67
|
+
Object.values(theme)
|
|
61
68
|
.map((choiceGroup) => choiceGroup.choices)
|
|
62
69
|
.find((choices) => choices[choiceName]);
|
|
63
|
-
|
|
70
|
+
|
|
71
|
+
const getChoiceValue = (choiceName, theme) => {
|
|
72
|
+
const defaultChoice = getThemeChoiceByName(
|
|
73
|
+
choiceGroupsByTheme.default,
|
|
74
|
+
choiceName
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
const themeChoice = getThemeChoiceByName(
|
|
78
|
+
choiceGroupsByTheme[theme],
|
|
79
|
+
choiceName
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
if (!defaultChoice)
|
|
64
83
|
throw new Error(`Tried to get value of non-existant choice ${choiceName}`);
|
|
65
|
-
return
|
|
84
|
+
return defaultChoice
|
|
85
|
+
? themeChoice?.[choiceName] ?? defaultChoice[choiceName]
|
|
86
|
+
: undefined;
|
|
66
87
|
};
|
|
67
88
|
|
|
68
89
|
const filterChoiceGroupValues = (choices, searchText) =>
|
|
@@ -98,25 +119,61 @@ const filterComponentGroupsGroupValues = (componentGroups, searchText) =>
|
|
|
98
119
|
state.description.toLowerCase().includes(searchText.toLowerCase()))
|
|
99
120
|
);
|
|
100
121
|
|
|
122
|
+
const getDefaultThemeChoiceGroupProperty = (choiceGroup, property) =>
|
|
123
|
+
choiceGroupsByTheme.default[choiceGroup][property];
|
|
124
|
+
|
|
101
125
|
const ChoiceGroup = (props) => {
|
|
102
|
-
const choices =
|
|
103
|
-
|
|
104
|
-
|
|
126
|
+
const choices = Object.entries(choiceGroupsByTheme).reduce(
|
|
127
|
+
(acc, [theme, themeChoices]) => {
|
|
128
|
+
// default theme is used as a blueprint
|
|
129
|
+
const themeChoicesBasedOnDefaultTheme = merge(
|
|
130
|
+
{},
|
|
131
|
+
choiceGroupsByTheme.default,
|
|
132
|
+
themeChoices
|
|
133
|
+
);
|
|
134
|
+
const filteredThemeChoices = Object.fromEntries(
|
|
135
|
+
filterChoiceGroupValues(
|
|
136
|
+
themeChoicesBasedOnDefaultTheme[props.choiceGroup].choices,
|
|
137
|
+
props.searchText
|
|
138
|
+
)
|
|
139
|
+
);
|
|
140
|
+
const filteredThemeChoicesNames = Object.keys(filteredThemeChoices);
|
|
141
|
+
|
|
142
|
+
return merge(
|
|
143
|
+
acc,
|
|
144
|
+
...filteredThemeChoicesNames.map((name) => ({
|
|
145
|
+
[name]: { [theme]: filteredThemeChoices[name] },
|
|
146
|
+
}))
|
|
147
|
+
);
|
|
148
|
+
},
|
|
149
|
+
{}
|
|
105
150
|
);
|
|
151
|
+
|
|
106
152
|
return (
|
|
107
|
-
<GroupStyle isVisible={choices.length > 0}>
|
|
108
|
-
<a
|
|
109
|
-
|
|
110
|
-
|
|
153
|
+
<GroupStyle isVisible={Object.values(choices).length > 0}>
|
|
154
|
+
<a
|
|
155
|
+
id={`choice-${getDefaultThemeChoiceGroupProperty(
|
|
156
|
+
props.choiceGroup,
|
|
157
|
+
'prefix'
|
|
158
|
+
)}`}
|
|
159
|
+
/>
|
|
160
|
+
<h3>{getDefaultThemeChoiceGroupProperty(props.choiceGroup, 'label')}</h3>
|
|
161
|
+
{getDefaultThemeChoiceGroupProperty(props.choiceGroup, 'description') && (
|
|
162
|
+
<p>
|
|
163
|
+
{getDefaultThemeChoiceGroupProperty(props.choiceGroup, 'description')}
|
|
164
|
+
</p>
|
|
165
|
+
)}
|
|
111
166
|
<Table>
|
|
112
167
|
<thead>
|
|
113
168
|
<tr>
|
|
114
169
|
<TokenRow>Token</TokenRow>
|
|
115
|
-
|
|
170
|
+
{allThemesNames.map((theme) => {
|
|
171
|
+
return <td key={theme}>{theme}</td>;
|
|
172
|
+
})}
|
|
116
173
|
</tr>
|
|
117
174
|
</thead>
|
|
118
175
|
<tbody>
|
|
119
|
-
{choices.map(([name,
|
|
176
|
+
{Object.entries(choices).map(([name, values]) => (
|
|
120
177
|
<tr key={name}>
|
|
121
178
|
<td>
|
|
122
179
|
<>
|
|
@@ -124,7 +181,9 @@ const ChoiceGroup = (props) => {
|
|
|
124
181
|
{getIsDeprecated(name) && <DeprecationBadge />}
|
|
125
182
|
</>
|
|
126
183
|
</td>
|
|
127
|
-
|
|
184
|
+
{Object.entries(values).map(([theme, value]) => (
|
|
185
|
+
<td key={theme}>{props.renderSample(value)}</td>
|
|
186
|
+
))}
|
|
128
187
|
</tr>
|
|
129
188
|
))}
|
|
130
189
|
</tbody>
|
|
@@ -161,7 +220,9 @@ const DecisionGroup = (props) => {
|
|
|
161
220
|
<tr>
|
|
162
221
|
<TokenRow>Token</TokenRow>
|
|
163
222
|
<td>Choice</td>
|
|
164
|
-
|
|
223
|
+
{allThemesNames.map((theme) => {
|
|
224
|
+
return <td key={theme}>{theme}</td>;
|
|
225
|
+
})}
|
|
165
226
|
</tr>
|
|
166
227
|
</thead>
|
|
167
228
|
<tbody>
|
|
@@ -175,9 +236,16 @@ const DecisionGroup = (props) => {
|
|
|
175
236
|
<td>
|
|
176
237
|
<Token>{decision.choice}</Token>
|
|
177
238
|
</td>
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
239
|
+
{allThemesNames.map((theme) => {
|
|
240
|
+
return (
|
|
241
|
+
<td key={theme}>
|
|
242
|
+
{props.renderSample(
|
|
243
|
+
getChoiceValue(decision.choice, theme),
|
|
244
|
+
name
|
|
245
|
+
)}
|
|
246
|
+
</td>
|
|
247
|
+
);
|
|
248
|
+
})}
|
|
181
249
|
</tr>
|
|
182
250
|
))}
|
|
183
251
|
</tbody>
|
|
@@ -191,7 +259,10 @@ DecisionGroup.propTypes = {
|
|
|
191
259
|
decisionGroup: PropTypes.shape({
|
|
192
260
|
label: PropTypes.string.isRequired,
|
|
193
261
|
prefix: PropTypes.string.isRequired,
|
|
194
|
-
decisions: PropTypes.
|
|
262
|
+
decisions: PropTypes.shape({
|
|
263
|
+
choice: PropTypes.string.isRequired,
|
|
264
|
+
description: PropTypes.string,
|
|
265
|
+
}),
|
|
195
266
|
}).isRequired,
|
|
196
267
|
renderSample: PropTypes.func.isRequired,
|
|
197
268
|
};
|
|
@@ -355,7 +426,7 @@ class Story extends Component {
|
|
|
355
426
|
Choices
|
|
356
427
|
</a>
|
|
357
428
|
<ul>
|
|
358
|
-
{Object.entries(
|
|
429
|
+
{Object.entries(choiceGroupsByTheme.default).map(
|
|
359
430
|
([key, choiceGroup]) =>
|
|
360
431
|
filterChoiceGroupValues(
|
|
361
432
|
choiceGroup.choices,
|
|
@@ -421,7 +492,7 @@ class Story extends Component {
|
|
|
421
492
|
Decisions
|
|
422
493
|
</a>{' '}
|
|
423
494
|
<ul>
|
|
424
|
-
{Object.entries(definition.
|
|
495
|
+
{Object.entries(definition.decisionGroupsByTheme.default).map(
|
|
425
496
|
([key, decisionGroup]) =>
|
|
426
497
|
filterDecisionGroupValues(
|
|
427
498
|
decisionGroup.decisions,
|
|
@@ -455,7 +526,7 @@ class Story extends Component {
|
|
|
455
526
|
tokens.
|
|
456
527
|
</p>
|
|
457
528
|
<ChoiceGroup
|
|
458
|
-
choiceGroup=
|
|
529
|
+
choiceGroup="colors"
|
|
459
530
|
searchText={this.state.searchText}
|
|
460
531
|
renderSample={(value) => (
|
|
461
532
|
<>
|
|
@@ -464,7 +535,7 @@ class Story extends Component {
|
|
|
464
535
|
)}
|
|
465
536
|
/>
|
|
466
537
|
<ChoiceGroup
|
|
467
|
-
choiceGroup=
|
|
538
|
+
choiceGroup="borderRadiuses"
|
|
468
539
|
searchText={this.state.searchText}
|
|
469
540
|
renderSample={(value) => (
|
|
470
541
|
<>
|
|
@@ -473,7 +544,7 @@ class Story extends Component {
|
|
|
473
544
|
)}
|
|
474
545
|
/>
|
|
475
546
|
<ChoiceGroup
|
|
476
|
-
choiceGroup=
|
|
547
|
+
choiceGroup="shadows"
|
|
477
548
|
searchText={this.state.searchText}
|
|
478
549
|
renderSample={(value) => (
|
|
479
550
|
<>
|
|
@@ -482,11 +553,11 @@ class Story extends Component {
|
|
|
482
553
|
)}
|
|
483
554
|
/>
|
|
484
555
|
<ChoiceGroup
|
|
485
|
-
choiceGroup=
|
|
556
|
+
choiceGroup="constraints"
|
|
486
557
|
searchText={this.state.searchText}
|
|
487
558
|
/>
|
|
488
559
|
<ChoiceGroup
|
|
489
|
-
choiceGroup=
|
|
560
|
+
choiceGroup="spacings"
|
|
490
561
|
searchText={this.state.searchText}
|
|
491
562
|
renderSample={(value) => (
|
|
492
563
|
<>
|
|
@@ -495,11 +566,11 @@ class Story extends Component {
|
|
|
495
566
|
)}
|
|
496
567
|
/>
|
|
497
568
|
<ChoiceGroup
|
|
498
|
-
choiceGroup=
|
|
569
|
+
choiceGroup="transitions"
|
|
499
570
|
searchText={this.state.searchText}
|
|
500
571
|
/>
|
|
501
572
|
<ChoiceGroup
|
|
502
|
-
choiceGroup=
|
|
573
|
+
choiceGroup="breakpoints"
|
|
503
574
|
searchText={this.state.searchText}
|
|
504
575
|
/>
|
|
505
576
|
|
|
@@ -521,7 +592,9 @@ class Story extends Component {
|
|
|
521
592
|
(optionally in a certain state).
|
|
522
593
|
</p>
|
|
523
594
|
<DecisionGroup
|
|
524
|
-
decisionGroup={
|
|
595
|
+
decisionGroup={
|
|
596
|
+
definition.decisionGroupsByTheme.default.backgroundColors
|
|
597
|
+
}
|
|
525
598
|
searchText={this.state.searchText}
|
|
526
599
|
renderSample={(value) => (
|
|
527
600
|
<>
|
|
@@ -530,7 +603,7 @@ class Story extends Component {
|
|
|
530
603
|
)}
|
|
531
604
|
/>
|
|
532
605
|
<DecisionGroup
|
|
533
|
-
decisionGroup={definition.
|
|
606
|
+
decisionGroup={definition.decisionGroupsByTheme.default.borderColors}
|
|
534
607
|
searchText={this.state.searchText}
|
|
535
608
|
renderSample={(value) => (
|
|
536
609
|
<>
|
|
@@ -539,7 +612,9 @@ class Story extends Component {
|
|
|
539
612
|
)}
|
|
540
613
|
/>
|
|
541
614
|
<DecisionGroup
|
|
542
|
-
decisionGroup={
|
|
615
|
+
decisionGroup={
|
|
616
|
+
definition.decisionGroupsByTheme.default.borderRadiuses
|
|
617
|
+
}
|
|
543
618
|
searchText={this.state.searchText}
|
|
544
619
|
renderSample={(value) => (
|
|
545
620
|
<>
|
|
@@ -548,7 +623,7 @@ class Story extends Component {
|
|
|
548
623
|
)}
|
|
549
624
|
/>
|
|
550
625
|
<DecisionGroup
|
|
551
|
-
decisionGroup={definition.
|
|
626
|
+
decisionGroup={definition.decisionGroupsByTheme.default.fontColors}
|
|
552
627
|
searchText={this.state.searchText}
|
|
553
628
|
renderSample={(value) => (
|
|
554
629
|
<>
|
|
@@ -557,7 +632,7 @@ class Story extends Component {
|
|
|
557
632
|
)}
|
|
558
633
|
/>
|
|
559
634
|
<DecisionGroup
|
|
560
|
-
decisionGroup={definition.
|
|
635
|
+
decisionGroup={definition.decisionGroupsByTheme.default.shadows}
|
|
561
636
|
searchText={this.state.searchText}
|
|
562
637
|
renderSample={(value) => (
|
|
563
638
|
<>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-frontend/ui-kit",
|
|
3
3
|
"description": "A preset of all the UI-Kit components.",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.3.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -24,39 +24,39 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@babel/runtime": "^7.19.0",
|
|
26
26
|
"@babel/runtime-corejs3": "^7.19.1",
|
|
27
|
-
"@commercetools-uikit/accessible-hidden": "15.
|
|
28
|
-
"@commercetools-uikit/avatar": "15.
|
|
29
|
-
"@commercetools-uikit/buttons": "15.
|
|
30
|
-
"@commercetools-uikit/card": "15.
|
|
31
|
-
"@commercetools-uikit/collapsible": "15.
|
|
32
|
-
"@commercetools-uikit/collapsible-motion": "15.
|
|
33
|
-
"@commercetools-uikit/collapsible-panel": "15.
|
|
34
|
-
"@commercetools-uikit/constraints": "15.
|
|
35
|
-
"@commercetools-uikit/data-table": "15.
|
|
36
|
-
"@commercetools-uikit/data-table-manager": "15.
|
|
37
|
-
"@commercetools-uikit/design-system": "15.
|
|
38
|
-
"@commercetools-uikit/field-errors": "15.
|
|
39
|
-
"@commercetools-uikit/field-label": "15.
|
|
40
|
-
"@commercetools-uikit/fields": "15.
|
|
41
|
-
"@commercetools-uikit/grid": "15.
|
|
42
|
-
"@commercetools-uikit/hooks": "15.
|
|
43
|
-
"@commercetools-uikit/i18n": "15.
|
|
44
|
-
"@commercetools-uikit/icons": "15.
|
|
45
|
-
"@commercetools-uikit/inputs": "15.
|
|
46
|
-
"@commercetools-uikit/label": "15.
|
|
47
|
-
"@commercetools-uikit/link": "15.
|
|
48
|
-
"@commercetools-uikit/loading-spinner": "15.
|
|
49
|
-
"@commercetools-uikit/messages": "15.
|
|
50
|
-
"@commercetools-uikit/notifications": "15.
|
|
51
|
-
"@commercetools-uikit/pagination": "15.
|
|
52
|
-
"@commercetools-uikit/primary-action-dropdown": "15.
|
|
53
|
-
"@commercetools-uikit/spacings": "15.
|
|
54
|
-
"@commercetools-uikit/stamp": "15.
|
|
55
|
-
"@commercetools-uikit/tag": "15.
|
|
56
|
-
"@commercetools-uikit/text": "15.
|
|
57
|
-
"@commercetools-uikit/tooltip": "15.
|
|
58
|
-
"@commercetools-uikit/utils": "15.
|
|
59
|
-
"@commercetools-uikit/view-switcher": "15.
|
|
27
|
+
"@commercetools-uikit/accessible-hidden": "15.3.0",
|
|
28
|
+
"@commercetools-uikit/avatar": "15.3.0",
|
|
29
|
+
"@commercetools-uikit/buttons": "15.3.0",
|
|
30
|
+
"@commercetools-uikit/card": "15.3.0",
|
|
31
|
+
"@commercetools-uikit/collapsible": "15.3.0",
|
|
32
|
+
"@commercetools-uikit/collapsible-motion": "15.3.0",
|
|
33
|
+
"@commercetools-uikit/collapsible-panel": "15.3.0",
|
|
34
|
+
"@commercetools-uikit/constraints": "15.3.0",
|
|
35
|
+
"@commercetools-uikit/data-table": "15.3.0",
|
|
36
|
+
"@commercetools-uikit/data-table-manager": "15.3.0",
|
|
37
|
+
"@commercetools-uikit/design-system": "15.3.0",
|
|
38
|
+
"@commercetools-uikit/field-errors": "15.3.0",
|
|
39
|
+
"@commercetools-uikit/field-label": "15.3.0",
|
|
40
|
+
"@commercetools-uikit/fields": "15.3.0",
|
|
41
|
+
"@commercetools-uikit/grid": "15.3.0",
|
|
42
|
+
"@commercetools-uikit/hooks": "15.3.0",
|
|
43
|
+
"@commercetools-uikit/i18n": "15.3.0",
|
|
44
|
+
"@commercetools-uikit/icons": "15.3.0",
|
|
45
|
+
"@commercetools-uikit/inputs": "15.3.0",
|
|
46
|
+
"@commercetools-uikit/label": "15.3.0",
|
|
47
|
+
"@commercetools-uikit/link": "15.3.0",
|
|
48
|
+
"@commercetools-uikit/loading-spinner": "15.3.0",
|
|
49
|
+
"@commercetools-uikit/messages": "15.3.0",
|
|
50
|
+
"@commercetools-uikit/notifications": "15.3.0",
|
|
51
|
+
"@commercetools-uikit/pagination": "15.3.0",
|
|
52
|
+
"@commercetools-uikit/primary-action-dropdown": "15.3.0",
|
|
53
|
+
"@commercetools-uikit/spacings": "15.3.0",
|
|
54
|
+
"@commercetools-uikit/stamp": "15.3.0",
|
|
55
|
+
"@commercetools-uikit/tag": "15.3.0",
|
|
56
|
+
"@commercetools-uikit/text": "15.3.0",
|
|
57
|
+
"@commercetools-uikit/tooltip": "15.3.0",
|
|
58
|
+
"@commercetools-uikit/utils": "15.3.0",
|
|
59
|
+
"@commercetools-uikit/view-switcher": "15.3.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"moment": "2.29.4",
|