@dxc-technology/halstack-react 0.0.0-83f5e92 → 0.0.0-84c9364
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/alert/Alert.stories.tsx +170 -0
- package/button/Button.stories.tsx +216 -233
- package/date-input/DateInput.stories.tsx +138 -0
- package/link/Link.stories.tsx +70 -0
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +2 -44
- package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +1 -1
- package/select/Select.stories.tsx +572 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/sidenav/Sidenav.js +4 -13
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/toggle-group/ToggleGroup.stories.tsx +178 -0
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +11 -51
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/number-input/index.d.ts +0 -113
- package/sidenav/index.d.ts +0 -13
- package/wizard/index.d.ts +0 -18
|
@@ -20,274 +20,257 @@ const iconSVG = () => {
|
|
|
20
20
|
};
|
|
21
21
|
export const Chromatic = () => (
|
|
22
22
|
<>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
23
|
+
<Title title="Primary" theme="light" level={2} />
|
|
24
|
+
<ExampleContainer>
|
|
25
|
+
<Title title="Enabled" theme="light" level={4} />
|
|
26
|
+
<DxcButton label="Primary enabled" />
|
|
27
|
+
</ExampleContainer>
|
|
28
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
29
|
+
<Title title="Hovered" theme="light" level={4} />
|
|
30
|
+
<DxcButton label="Primary hovered" />
|
|
31
|
+
</ExampleContainer>
|
|
32
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
33
|
+
<Title title="Focused" theme="light" level={4} />
|
|
34
|
+
<DxcButton label="Primary focused" />
|
|
35
|
+
</ExampleContainer>
|
|
36
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
37
|
+
<Title title="Actived" theme="light" level={4} />
|
|
38
|
+
<DxcButton label="Primary actived" />
|
|
39
|
+
</ExampleContainer>
|
|
40
|
+
<ExampleContainer>
|
|
41
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
42
|
+
<DxcButton label="Primary disabled" disabled />
|
|
43
|
+
</ExampleContainer>
|
|
44
|
+
<ExampleContainer>
|
|
45
|
+
<Title title="With left icon" theme="light" level={4} />
|
|
46
|
+
<DxcButton label="Primary" icon={iconSVG} />
|
|
47
|
+
</ExampleContainer>
|
|
48
|
+
<ExampleContainer>
|
|
49
|
+
<Title title="With right icon" theme="light" level={4} />
|
|
50
|
+
<DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
|
|
51
|
+
</ExampleContainer>
|
|
52
|
+
<ExampleContainer>
|
|
53
|
+
<Title title="Only icon" theme="light" level={4} />
|
|
54
|
+
<DxcButton icon={iconSVG} />
|
|
55
|
+
</ExampleContainer>
|
|
56
|
+
<Title title="Secondary" theme="light" level={2} />
|
|
57
|
+
<ExampleContainer>
|
|
58
|
+
<Title title="Enabled" theme="light" level={4} />
|
|
59
|
+
<DxcButton mode="secondary" label="Secondary enabled" />
|
|
60
|
+
</ExampleContainer>
|
|
61
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
62
|
+
<Title title="Hovered" theme="light" level={4} />
|
|
63
|
+
<DxcButton mode="secondary" label="Secondary hovered" />
|
|
64
|
+
</ExampleContainer>
|
|
65
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
66
|
+
<Title title="Focused" theme="light" level={4} />
|
|
67
|
+
<DxcButton mode="secondary" label="Secondary focused" />
|
|
68
|
+
</ExampleContainer>
|
|
69
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
70
|
+
<Title title="Actived" theme="light" level={4} />
|
|
71
|
+
<DxcButton mode="secondary" label="Secondary actived" />
|
|
72
|
+
</ExampleContainer>
|
|
73
|
+
<ExampleContainer>
|
|
74
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
75
|
+
<DxcButton mode="secondary" disabled label="Secondary disabled" />
|
|
76
|
+
</ExampleContainer>
|
|
77
|
+
<ExampleContainer>
|
|
78
|
+
<Title title="With icon" theme="light" level={4} />
|
|
79
|
+
<DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
|
|
80
|
+
</ExampleContainer>
|
|
81
|
+
<Title title="Text" theme="light" level={2} />
|
|
82
|
+
<ExampleContainer>
|
|
83
|
+
<Title title="Enabled" theme="light" level={4} />
|
|
84
|
+
<DxcButton mode="text" label="Text enabled" />
|
|
85
|
+
</ExampleContainer>
|
|
86
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
87
|
+
<Title title="Hovered" theme="light" level={4} />
|
|
88
|
+
<DxcButton mode="text" label="Text hovered" />
|
|
89
|
+
</ExampleContainer>
|
|
90
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
91
|
+
<Title title="Focused" theme="light" level={4} />
|
|
92
|
+
<DxcButton mode="text" label="Text focused" />
|
|
93
|
+
</ExampleContainer>
|
|
94
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
95
|
+
<Title title="Actived" theme="light" level={4} />
|
|
96
|
+
<DxcButton mode="text" label="Text actived" />
|
|
97
|
+
</ExampleContainer>
|
|
98
|
+
<ExampleContainer>
|
|
99
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
100
|
+
<DxcButton mode="text" label="Text disabled" disabled />
|
|
101
|
+
</ExampleContainer>
|
|
102
|
+
<ExampleContainer>
|
|
103
|
+
<Title title="With icon" theme="light" level={4} />
|
|
104
|
+
<DxcButton label="Text" mode="text" icon={iconSVG} />
|
|
105
|
+
</ExampleContainer>
|
|
106
|
+
<BackgroundColorProvider color="#333333">
|
|
107
|
+
<DarkContainer>
|
|
108
|
+
<Title title="Primary" theme="dark" level={2} />
|
|
61
109
|
<ExampleContainer>
|
|
62
|
-
<Title title="Enabled" theme="
|
|
110
|
+
<Title title="Enabled" theme="dark" level={4} />
|
|
111
|
+
<DxcButton label="Primary enabled" />
|
|
112
|
+
</ExampleContainer>
|
|
113
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
114
|
+
<Title title="Hovered" theme="dark" level={4} />
|
|
115
|
+
<DxcButton label="Primary hovered" />
|
|
116
|
+
</ExampleContainer>
|
|
117
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
118
|
+
<Title title="Focused" theme="dark" level={4} />
|
|
119
|
+
<DxcButton label="Primary focused" />
|
|
120
|
+
</ExampleContainer>
|
|
121
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
122
|
+
<Title title="Actived" theme="dark" level={4} />
|
|
123
|
+
<DxcButton label="Primary actived" />
|
|
124
|
+
</ExampleContainer>
|
|
125
|
+
<ExampleContainer>
|
|
126
|
+
<Title title="Disabled" theme="dark" level={4} />
|
|
127
|
+
<DxcButton label="Primary disabled" disabled />
|
|
128
|
+
</ExampleContainer>
|
|
129
|
+
<ExampleContainer>
|
|
130
|
+
<Title title="With icon" theme="dark" level={4} />
|
|
131
|
+
<DxcButton label="Primary" icon={iconSVG} />
|
|
132
|
+
</ExampleContainer>
|
|
133
|
+
<Title title="Secondary" theme="dark" level={2} />
|
|
134
|
+
<ExampleContainer>
|
|
135
|
+
<Title title="Enabled" theme="dark" level={4} />
|
|
63
136
|
<DxcButton mode="secondary" label="Secondary enabled" />
|
|
64
137
|
</ExampleContainer>
|
|
65
138
|
<ExampleContainer pseudoState="pseudo-hover">
|
|
66
|
-
<Title title="Hovered" theme="
|
|
139
|
+
<Title title="Hovered" theme="dark" level={4} />
|
|
67
140
|
<DxcButton mode="secondary" label="Secondary hovered" />
|
|
68
141
|
</ExampleContainer>
|
|
69
142
|
<ExampleContainer pseudoState="pseudo-focus">
|
|
70
|
-
<Title title="Focused" theme="
|
|
143
|
+
<Title title="Focused" theme="dark" level={4} />
|
|
71
144
|
<DxcButton mode="secondary" label="Secondary focused" />
|
|
72
145
|
</ExampleContainer>
|
|
73
146
|
<ExampleContainer pseudoState="pseudo-active">
|
|
74
|
-
<Title title="Actived" theme="
|
|
147
|
+
<Title title="Actived" theme="dark" level={4} />
|
|
75
148
|
<DxcButton mode="secondary" label="Secondary actived" />
|
|
76
149
|
</ExampleContainer>
|
|
77
150
|
<ExampleContainer>
|
|
78
|
-
<Title title="Disabled" theme="
|
|
151
|
+
<Title title="Disabled" theme="dark" level={4} />
|
|
79
152
|
<DxcButton mode="secondary" disabled label="Secondary disabled" />
|
|
80
153
|
</ExampleContainer>
|
|
81
154
|
<ExampleContainer>
|
|
82
|
-
<Title title="With icon" theme="
|
|
83
|
-
<DxcButton mode="secondary" label="
|
|
155
|
+
<Title title="With icon" theme="dark" level={4} />
|
|
156
|
+
<DxcButton mode="secondary" label="Primary" icon={iconSVG} />
|
|
84
157
|
</ExampleContainer>
|
|
85
|
-
|
|
86
|
-
<>
|
|
87
|
-
<Title title="Text" theme="light" level={2}/>
|
|
158
|
+
<Title title="Text" theme="dark" level={2} />
|
|
88
159
|
<ExampleContainer>
|
|
89
|
-
<Title title="Enabled" theme="
|
|
160
|
+
<Title title="Enabled" theme="dark" level={4} />
|
|
90
161
|
<DxcButton mode="text" label="Text enabled" />
|
|
91
162
|
</ExampleContainer>
|
|
92
163
|
<ExampleContainer pseudoState="pseudo-hover">
|
|
93
|
-
<Title title="Hovered" theme="
|
|
164
|
+
<Title title="Hovered" theme="dark" level={4} />
|
|
94
165
|
<DxcButton mode="text" label="Text hovered" />
|
|
95
166
|
</ExampleContainer>
|
|
96
167
|
<ExampleContainer pseudoState="pseudo-focus">
|
|
97
|
-
<Title title="Focused" theme="
|
|
168
|
+
<Title title="Focused" theme="dark" level={4} />
|
|
98
169
|
<DxcButton mode="text" label="Text focused" />
|
|
99
170
|
</ExampleContainer>
|
|
100
171
|
<ExampleContainer pseudoState="pseudo-active">
|
|
101
|
-
<Title title="Actived" theme="
|
|
172
|
+
<Title title="Actived" theme="dark" level={4} />
|
|
102
173
|
<DxcButton mode="text" label="Text actived" />
|
|
103
174
|
</ExampleContainer>
|
|
104
175
|
<ExampleContainer>
|
|
105
|
-
<Title title="Disabled" theme="
|
|
176
|
+
<Title title="Disabled" theme="dark" level={4} />
|
|
106
177
|
<DxcButton mode="text" label="Text disabled" disabled />
|
|
107
178
|
</ExampleContainer>
|
|
108
179
|
<ExampleContainer>
|
|
109
|
-
<Title title="With icon" theme="
|
|
110
|
-
<DxcButton
|
|
180
|
+
<Title title="With icon" theme="dark" level={4} />
|
|
181
|
+
<DxcButton mode="text" label="Primary" icon={iconSVG} />
|
|
111
182
|
</ExampleContainer>
|
|
112
|
-
</>
|
|
113
|
-
</>
|
|
114
|
-
<BackgroundColorProvider color="#333333">
|
|
115
|
-
<DarkContainer>
|
|
116
|
-
<>
|
|
117
|
-
<Title title="Primary" theme="dark" level={2}/>
|
|
118
|
-
<ExampleContainer>
|
|
119
|
-
<Title title="Enabled" theme="dark" level={4}/>
|
|
120
|
-
<DxcButton label="Primary enabled" />
|
|
121
|
-
</ExampleContainer>
|
|
122
|
-
<ExampleContainer pseudoState="pseudo-hover">
|
|
123
|
-
<Title title="Hovered" theme="dark" level={4}/>
|
|
124
|
-
<DxcButton label="Primary hovered" />
|
|
125
|
-
</ExampleContainer>
|
|
126
|
-
<ExampleContainer pseudoState="pseudo-focus">
|
|
127
|
-
<Title title="Focused" theme="dark" level={4}/>
|
|
128
|
-
<DxcButton label="Primary focused" />
|
|
129
|
-
</ExampleContainer>
|
|
130
|
-
<ExampleContainer pseudoState="pseudo-active">
|
|
131
|
-
<Title title="Actived" theme="dark" level={4}/>
|
|
132
|
-
<DxcButton label="Primary actived" />
|
|
133
|
-
</ExampleContainer>
|
|
134
|
-
<ExampleContainer>
|
|
135
|
-
<Title title="Disabled" theme="dark" level={4}/>
|
|
136
|
-
<DxcButton label="Primary disabled" disabled />
|
|
137
|
-
</ExampleContainer>
|
|
138
|
-
<ExampleContainer>
|
|
139
|
-
<Title title="With icon" theme="dark" level={4}/>
|
|
140
|
-
<DxcButton label="Primary" icon={iconSVG} />
|
|
141
|
-
</ExampleContainer>
|
|
142
|
-
</>
|
|
143
|
-
<>
|
|
144
|
-
<Title title="Secondary" theme="dark" level={2}/>
|
|
145
|
-
<ExampleContainer>
|
|
146
|
-
<Title title="Enabled" theme="dark" level={4}/>
|
|
147
|
-
<DxcButton mode="secondary" label="Secondary enabled" />
|
|
148
|
-
</ExampleContainer>
|
|
149
|
-
<ExampleContainer pseudoState="pseudo-hover">
|
|
150
|
-
<Title title="Hovered" theme="dark" level={4}/>
|
|
151
|
-
<DxcButton mode="secondary" label="Secondary hovered" />
|
|
152
|
-
</ExampleContainer>
|
|
153
|
-
<ExampleContainer pseudoState="pseudo-focus">
|
|
154
|
-
<Title title="Focused" theme="dark" level={4}/>
|
|
155
|
-
<DxcButton mode="secondary" label="Secondary focused" />
|
|
156
|
-
</ExampleContainer>
|
|
157
|
-
<ExampleContainer pseudoState="pseudo-active">
|
|
158
|
-
<Title title="Actived" theme="dark" level={4}/>
|
|
159
|
-
<DxcButton mode="secondary" label="Secondary actived" />
|
|
160
|
-
</ExampleContainer>
|
|
161
|
-
<ExampleContainer>
|
|
162
|
-
<Title title="Disabled" theme="dark" level={4}/>
|
|
163
|
-
<DxcButton mode="secondary" disabled label="Secondary disabled" />
|
|
164
|
-
</ExampleContainer>
|
|
165
|
-
<ExampleContainer>
|
|
166
|
-
<Title title="With icon" theme="dark" level={4}/>
|
|
167
|
-
<DxcButton mode="secondary" label="Primary" icon={iconSVG} />
|
|
168
|
-
</ExampleContainer>
|
|
169
|
-
</>
|
|
170
|
-
<>
|
|
171
|
-
<Title title="Text" theme="dark" level={2}/>
|
|
172
|
-
<ExampleContainer>
|
|
173
|
-
<Title title="Enabled" theme="dark" level={4}/>
|
|
174
|
-
<DxcButton mode="text" label="Text enabled" />
|
|
175
|
-
</ExampleContainer>
|
|
176
|
-
<ExampleContainer pseudoState="pseudo-hover">
|
|
177
|
-
<Title title="Hovered" theme="dark" level={4}/>
|
|
178
|
-
<DxcButton mode="text" label="Text hovered" />
|
|
179
|
-
</ExampleContainer>
|
|
180
|
-
<ExampleContainer pseudoState="pseudo-focus">
|
|
181
|
-
<Title title="Focused" theme="dark" level={4}/>
|
|
182
|
-
<DxcButton mode="text" label="Text focused" />
|
|
183
|
-
</ExampleContainer>
|
|
184
|
-
<ExampleContainer pseudoState="pseudo-active">
|
|
185
|
-
<Title title="Actived" theme="dark" level={4}/>
|
|
186
|
-
<DxcButton mode="text" label="Text actived" />
|
|
187
|
-
</ExampleContainer>
|
|
188
|
-
<ExampleContainer>
|
|
189
|
-
<Title title="Disabled" theme="dark" level={4}/>
|
|
190
|
-
<DxcButton mode="text" label="Text disabled" disabled />
|
|
191
|
-
</ExampleContainer>
|
|
192
|
-
<ExampleContainer>
|
|
193
|
-
<Title title="With icon" theme="dark" level={4}/>
|
|
194
|
-
<DxcButton mode="text" label="Primary" icon={iconSVG} />
|
|
195
|
-
</ExampleContainer>
|
|
196
|
-
</>
|
|
197
183
|
</DarkContainer>
|
|
198
184
|
</BackgroundColorProvider>
|
|
199
|
-
|
|
200
|
-
<
|
|
201
|
-
<
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
<
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
<
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
<
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
<
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
<
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
<
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
<
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
<
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
<
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
<
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
<
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
<
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
<
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
<
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
<
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
<
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
<
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
</ExampleContainer>
|
|
290
|
-
</>
|
|
185
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
186
|
+
<ExampleContainer>
|
|
187
|
+
<Title title="Small size" theme="light" level={4} />
|
|
188
|
+
<DxcButton label="Small" size="small" />
|
|
189
|
+
</ExampleContainer>
|
|
190
|
+
<ExampleContainer>
|
|
191
|
+
<Title title="Medium size" theme="light" level={4} />
|
|
192
|
+
<DxcButton label="MediumSiz" size="medium" />
|
|
193
|
+
</ExampleContainer>
|
|
194
|
+
<ExampleContainer>
|
|
195
|
+
<Title title="Medium size with ellipsis" theme="light" level={4} />
|
|
196
|
+
<DxcButton label="MediumSize" size="medium" />
|
|
197
|
+
</ExampleContainer>
|
|
198
|
+
<ExampleContainer>
|
|
199
|
+
<Title title="Medium size icon after" theme="light" level={4} />
|
|
200
|
+
<DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
|
|
201
|
+
</ExampleContainer>
|
|
202
|
+
<ExampleContainer>
|
|
203
|
+
<Title title="Medium size icon before" theme="light" level={4} />
|
|
204
|
+
<DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
|
|
205
|
+
</ExampleContainer>
|
|
206
|
+
<ExampleContainer>
|
|
207
|
+
<Title title="Medium size icon after with ellipsis" theme="light" level={4} />
|
|
208
|
+
<DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
|
|
209
|
+
</ExampleContainer>
|
|
210
|
+
<ExampleContainer>
|
|
211
|
+
<Title title="Medium size icon before with ellipsis" theme="light" level={4} />
|
|
212
|
+
<DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
|
|
213
|
+
</ExampleContainer>
|
|
214
|
+
<ExampleContainer>
|
|
215
|
+
<Title title="Large size" theme="light" level={4} />
|
|
216
|
+
<DxcButton label="LargeSizePrimaryButtonEx" size="large" />
|
|
217
|
+
</ExampleContainer>
|
|
218
|
+
<ExampleContainer>
|
|
219
|
+
<Title title="Large size with ellipsis" theme="light" level={4} />
|
|
220
|
+
<DxcButton label="LargeSizePrimaryButtonExa" size="large" />
|
|
221
|
+
</ExampleContainer>
|
|
222
|
+
<ExampleContainer>
|
|
223
|
+
<Title title="Large size icon after" theme="light" level={4} />
|
|
224
|
+
<DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
|
|
225
|
+
</ExampleContainer>
|
|
226
|
+
<ExampleContainer>
|
|
227
|
+
<Title title="Large size icon before" theme="light" level={4} />
|
|
228
|
+
<DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
|
|
229
|
+
</ExampleContainer>
|
|
230
|
+
<ExampleContainer>
|
|
231
|
+
<Title title="Large size icon after with ellipsis" theme="light" level={4} />
|
|
232
|
+
<DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
|
|
233
|
+
</ExampleContainer>
|
|
234
|
+
<ExampleContainer>
|
|
235
|
+
<Title title="Large size icon before with ellipsis" theme="light" level={4} />
|
|
236
|
+
<DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
|
|
237
|
+
</ExampleContainer>
|
|
238
|
+
<ExampleContainer>
|
|
239
|
+
<Title title="FillParent size" theme="light" level={4} />
|
|
240
|
+
<DxcButton label="FillParent" size="fillParent" />
|
|
241
|
+
</ExampleContainer>
|
|
242
|
+
<ExampleContainer>
|
|
243
|
+
<Title title="FitContent size" theme="light" level={4} />
|
|
244
|
+
<DxcButton label="FitContent" size="fitContent" />
|
|
245
|
+
</ExampleContainer>
|
|
246
|
+
<Title title="Margins" theme="light" level={2} />
|
|
247
|
+
<ExampleContainer>
|
|
248
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
249
|
+
<DxcButton label="Xxsmall margin" margin="xxsmall" />
|
|
250
|
+
</ExampleContainer>
|
|
251
|
+
<ExampleContainer>
|
|
252
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
253
|
+
<DxcButton label="Xsmall margin" margin="xsmall" />
|
|
254
|
+
</ExampleContainer>
|
|
255
|
+
<ExampleContainer>
|
|
256
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
257
|
+
<DxcButton label="Small margin" margin="small" />
|
|
258
|
+
</ExampleContainer>
|
|
259
|
+
<ExampleContainer>
|
|
260
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
261
|
+
<DxcButton label="Medium margin" margin="medium" />
|
|
262
|
+
</ExampleContainer>
|
|
263
|
+
<ExampleContainer>
|
|
264
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
265
|
+
<DxcButton label="Large margin" margin="large" />
|
|
266
|
+
</ExampleContainer>
|
|
267
|
+
<ExampleContainer>
|
|
268
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
269
|
+
<DxcButton label="Xlarge margin" margin="xlarge" />
|
|
270
|
+
</ExampleContainer>
|
|
271
|
+
<ExampleContainer>
|
|
272
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
273
|
+
<DxcButton label="Xxlarge margin" margin="xxlarge" />
|
|
274
|
+
</ExampleContainer>
|
|
291
275
|
</>
|
|
292
276
|
);
|
|
293
|
-
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
|
|
3
|
+
import DxcDateInput from "./DateInput";
|
|
4
|
+
import Title from "../../.storybook/components/Title";
|
|
5
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
+
import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
7
|
+
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
title: "Date input",
|
|
11
|
+
component: DxcDateInput,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export const Chromatic = () => (
|
|
15
|
+
<>
|
|
16
|
+
<ExampleContainer>
|
|
17
|
+
<Title title="Complete date input" theme="light" level={4} />
|
|
18
|
+
<DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
|
|
19
|
+
</ExampleContainer>
|
|
20
|
+
<ExampleContainer>
|
|
21
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
22
|
+
<DxcDateInput label="Disabled date input" helperText="Help message" value="06-04-2027" clearable disabled />
|
|
23
|
+
</ExampleContainer>
|
|
24
|
+
<ExampleContainer>
|
|
25
|
+
<Title title="Invalid" theme="light" level={4} />
|
|
26
|
+
<DxcDateInput label="Error date input" error="Error message." placeholder />
|
|
27
|
+
</ExampleContainer>
|
|
28
|
+
<ExampleContainer>
|
|
29
|
+
<Title title="Relation between icons" theme="light" level={4} />
|
|
30
|
+
<DxcDateInput label="Error date input" error="Error message." value="06-04-2027" clearable />
|
|
31
|
+
</ExampleContainer>
|
|
32
|
+
<BackgroundColorProvider color="#333333">
|
|
33
|
+
<DarkContainer>
|
|
34
|
+
<Title title="Dark" theme="dark" level={2} />
|
|
35
|
+
<ExampleContainer>
|
|
36
|
+
<Title title="Complete date input" theme="dark" level={4} />
|
|
37
|
+
<DxcDateInput label="Date input" helperText="Help message" format="yyyy/dd/mm" placeholder optional />
|
|
38
|
+
</ExampleContainer>
|
|
39
|
+
<ExampleContainer>
|
|
40
|
+
<Title title="Disabled" theme="dark" level={4} />
|
|
41
|
+
<DxcDateInput label="Disabled Date input" helperText="Help message" value="06-04-2027" clearable disabled />
|
|
42
|
+
</ExampleContainer>
|
|
43
|
+
<ExampleContainer>
|
|
44
|
+
<Title title="Invalid" theme="dark" level={4} />
|
|
45
|
+
<DxcDateInput label="Error date input" error="Error message." placeholder />
|
|
46
|
+
</ExampleContainer>
|
|
47
|
+
<ExampleContainer>
|
|
48
|
+
<Title title="Relation between icons" theme="dark" level={4} />
|
|
49
|
+
<DxcDateInput label="Error date input" value="06-04-2027" error="Error message." clearable />
|
|
50
|
+
</ExampleContainer>
|
|
51
|
+
</DarkContainer>
|
|
52
|
+
</BackgroundColorProvider>
|
|
53
|
+
<Title title="Margins" theme="light" level={2} />
|
|
54
|
+
<ExampleContainer>
|
|
55
|
+
<Title title="Xxsmall" theme="light" level={4} />
|
|
56
|
+
<DxcDateInput label="Xxsmall" margin="xxsmall" />
|
|
57
|
+
</ExampleContainer>
|
|
58
|
+
<ExampleContainer>
|
|
59
|
+
<Title title="Xsmall" theme="light" level={4} />
|
|
60
|
+
<DxcDateInput label="Xsmall" margin="xsmall" />
|
|
61
|
+
</ExampleContainer>
|
|
62
|
+
<ExampleContainer>
|
|
63
|
+
<Title title="Small" theme="light" level={4} />
|
|
64
|
+
<DxcDateInput label="Small" margin="small" />
|
|
65
|
+
</ExampleContainer>
|
|
66
|
+
<ExampleContainer>
|
|
67
|
+
<Title title="Medium" theme="light" level={4} />
|
|
68
|
+
<DxcDateInput label="Medium" margin="medium" />
|
|
69
|
+
</ExampleContainer>
|
|
70
|
+
<ExampleContainer>
|
|
71
|
+
<Title title="Large" theme="light" level={4} />
|
|
72
|
+
<DxcDateInput label="Large" margin="large" />
|
|
73
|
+
</ExampleContainer>
|
|
74
|
+
<ExampleContainer>
|
|
75
|
+
<Title title="Xlarge" theme="light" level={4} />
|
|
76
|
+
<DxcDateInput label="Xlarge" margin="xlarge" />
|
|
77
|
+
</ExampleContainer>
|
|
78
|
+
<ExampleContainer>
|
|
79
|
+
<Title title="Xxlarge" theme="light" level={4} />
|
|
80
|
+
<DxcDateInput label="Xxlarge" margin="xxlarge" />
|
|
81
|
+
</ExampleContainer>
|
|
82
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
83
|
+
<ExampleContainer>
|
|
84
|
+
<Title title="Medium size" theme="light" level={4} />
|
|
85
|
+
<DxcDateInput label="Medium" size="medium" />
|
|
86
|
+
</ExampleContainer>
|
|
87
|
+
<ExampleContainer>
|
|
88
|
+
<Title title="Large size" theme="light" level={4} />
|
|
89
|
+
<DxcDateInput label="Large" size="large" />
|
|
90
|
+
</ExampleContainer>
|
|
91
|
+
<ExampleContainer>
|
|
92
|
+
<Title title="FillParent size" theme="light" level={4} />
|
|
93
|
+
<DxcDateInput label="FillParent" size="fillParent" />
|
|
94
|
+
</ExampleContainer>
|
|
95
|
+
</>
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
const DatePicker = () => (
|
|
99
|
+
<ExampleContainer expanded>
|
|
100
|
+
<Title title="Show date input" theme="light" level={4} />
|
|
101
|
+
<DxcDateInput label="Date input" value="10-06-2023" />
|
|
102
|
+
</ExampleContainer>
|
|
103
|
+
);
|
|
104
|
+
|
|
105
|
+
export const ShowDatePicker = DatePicker.bind({});
|
|
106
|
+
ShowDatePicker.play = async ({ canvasElement }) => {
|
|
107
|
+
const canvas = within(canvasElement);
|
|
108
|
+
const dateBtn = canvas.getByRole("button");
|
|
109
|
+
await userEvent.click(dateBtn);
|
|
110
|
+
await userEvent.tab();
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const YearPicker = () => (
|
|
114
|
+
<ExampleContainer expanded>
|
|
115
|
+
<Title title="Show date input" theme="light" level={4} />
|
|
116
|
+
<DxcDateInput label="Date input" value="10-06-2023" />
|
|
117
|
+
</ExampleContainer>
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
export const ShowYearPicker = YearPicker.bind({});
|
|
121
|
+
ShowYearPicker.play = async () => {
|
|
122
|
+
await fireEvent.click(screen.getByRole("button"));
|
|
123
|
+
await fireEvent.click(screen.getByText("2023"));
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
const YearPickerFocus = () => (
|
|
127
|
+
<ExampleContainer expanded>
|
|
128
|
+
<Title title="Show date input" theme="light" level={4} />
|
|
129
|
+
<DxcDateInput label="Date input" value="10-06-2023" />
|
|
130
|
+
</ExampleContainer>
|
|
131
|
+
);
|
|
132
|
+
|
|
133
|
+
export const ShowYearPickerFocus = YearPickerFocus.bind({});
|
|
134
|
+
ShowYearPickerFocus.play = async () => {
|
|
135
|
+
await fireEvent.click(screen.getByRole("button"));
|
|
136
|
+
await fireEvent.click(screen.getByText("2023"));
|
|
137
|
+
await screen.getByText("2021").focus();
|
|
138
|
+
};
|