@cloudscape-design/components 3.0.774 → 3.0.775
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/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +2 -1
- package/prompt-input/interfaces.d.ts +0 -16
- package/prompt-input/interfaces.d.ts.map +1 -1
- package/prompt-input/interfaces.js.map +1 -1
- package/prompt-input/internal.d.ts.map +1 -1
- package/prompt-input/internal.js +11 -28
- package/prompt-input/internal.js.map +1 -1
- package/prompt-input/styles.css.js +8 -14
- package/prompt-input/styles.scoped.css +68 -264
- package/prompt-input/styles.selectors.js +8 -14
- package/prompt-input/test-classes/styles.css.js +3 -5
- package/prompt-input/test-classes/styles.scoped.css +3 -11
- package/prompt-input/test-classes/styles.selectors.js +3 -5
- package/steps/index.d.ts +6 -0
- package/steps/index.d.ts.map +1 -0
- package/steps/index.js +19 -0
- package/steps/index.js.map +1 -0
- package/steps/interfaces.d.ts +40 -0
- package/steps/interfaces.d.ts.map +1 -0
- package/steps/interfaces.js +2 -0
- package/steps/interfaces.js.map +1 -0
- package/steps/internal.d.ts +8 -0
- package/steps/internal.d.ts.map +1 -0
- package/steps/internal.js +21 -0
- package/steps/internal.js.map +1 -0
- package/steps/styles.css.js +11 -0
- package/steps/styles.scoped.css +247 -0
- package/steps/styles.selectors.js +12 -0
- package/test-utils/dom/index.d.ts +3 -0
- package/test-utils/dom/index.js +9 -1
- package/test-utils/dom/index.js.map +1 -1
- package/test-utils/dom/prompt-input/index.d.ts +0 -2
- package/test-utils/dom/prompt-input/index.js +0 -6
- package/test-utils/dom/prompt-input/index.js.map +1 -1
- package/test-utils/dom/steps/index.d.ts +18 -0
- package/test-utils/dom/steps/index.js +33 -0
- package/test-utils/dom/steps/index.js.map +1 -0
- package/test-utils/selectors/index.d.ts +3 -0
- package/test-utils/selectors/index.js +9 -1
- package/test-utils/selectors/index.js.map +1 -1
- package/test-utils/selectors/prompt-input/index.d.ts +0 -2
- package/test-utils/selectors/prompt-input/index.js +0 -6
- package/test-utils/selectors/prompt-input/index.js.map +1 -1
- package/test-utils/selectors/steps/index.d.ts +18 -0
- package/test-utils/selectors/steps/index.js +33 -0
- package/test-utils/selectors/steps/index.js.map +1 -0
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -139,124 +139,37 @@
|
|
|
139
139
|
*/
|
|
140
140
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
141
141
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
142
|
-
.
|
|
143
|
-
|
|
144
|
-
border-spacing: 0;
|
|
145
|
-
box-sizing: border-box;
|
|
146
|
-
caption-side: top;
|
|
147
|
-
cursor: auto;
|
|
148
|
-
direction: inherit;
|
|
149
|
-
empty-cells: show;
|
|
150
|
-
font-family: serif;
|
|
151
|
-
font-size: medium;
|
|
152
|
-
font-style: normal;
|
|
153
|
-
font-variant: normal;
|
|
154
|
-
font-weight: 400;
|
|
155
|
-
font-stretch: normal;
|
|
156
|
-
line-height: normal;
|
|
157
|
-
-webkit-hyphens: none;
|
|
158
|
-
hyphens: none;
|
|
159
|
-
letter-spacing: normal;
|
|
160
|
-
list-style: disc outside none;
|
|
161
|
-
tab-size: 8;
|
|
162
|
-
text-align: start;
|
|
163
|
-
text-indent: 0;
|
|
164
|
-
text-shadow: none;
|
|
165
|
-
text-transform: none;
|
|
166
|
-
visibility: visible;
|
|
167
|
-
white-space: normal;
|
|
168
|
-
word-spacing: normal;
|
|
169
|
-
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
170
|
-
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
171
|
-
color: var(--color-text-body-default-7v1jfn, #0f141a);
|
|
172
|
-
font-weight: 400;
|
|
173
|
-
font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
174
|
-
-webkit-font-smoothing: auto;
|
|
175
|
-
-moz-osx-font-smoothing: auto;
|
|
176
|
-
border-start-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
177
|
-
border-start-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
178
|
-
border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
179
|
-
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
180
|
-
cursor: text;
|
|
181
|
-
background-color: var(--color-background-input-default-u56ls1, #ffffff);
|
|
182
|
-
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-l7v83d, #8c8c94);
|
|
183
|
-
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-l7v83d, #8c8c94);
|
|
184
|
-
}
|
|
185
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-readonly_55fkh_1vvqx_184:not(#\9) {
|
|
186
|
-
background-color: var(--color-background-input-default-u56ls1, #ffffff);
|
|
187
|
-
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
188
|
-
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
189
|
-
}
|
|
190
|
-
.awsui_root_55fkh_1vvqx_142.awsui_disabled_55fkh_1vvqx_189:not(#\9) {
|
|
191
|
-
background-color: var(--color-background-input-disabled-gvxsk4, #ebebf0);
|
|
192
|
-
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
193
|
-
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
194
|
-
color: var(--color-text-input-disabled-fc4jfl, #b4b4bb);
|
|
195
|
-
cursor: auto;
|
|
196
|
-
cursor: default;
|
|
197
|
-
}
|
|
198
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9) {
|
|
199
|
-
color: var(--color-text-status-error-5676bj, #db0000);
|
|
200
|
-
border-color: var(--color-text-status-error-5676bj, #db0000);
|
|
201
|
-
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
202
|
-
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
203
|
-
}
|
|
204
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus {
|
|
205
|
-
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
206
|
-
}
|
|
207
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9) {
|
|
208
|
-
padding-inline-start: 0;
|
|
209
|
-
}
|
|
210
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus-within, .awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus {
|
|
211
|
-
color: var(--color-text-status-error-5676bj, #db0000);
|
|
212
|
-
border-color: var(--color-text-status-error-5676bj, #db0000);
|
|
213
|
-
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
214
|
-
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
215
|
-
}
|
|
216
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus-within:focus, .awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus:focus {
|
|
217
|
-
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
218
|
-
}
|
|
219
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus-within, .awsui_root_55fkh_1vvqx_142.awsui_textarea-invalid_55fkh_1vvqx_197:not(#\9):focus {
|
|
220
|
-
padding-inline-start: 0;
|
|
221
|
-
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
222
|
-
}
|
|
223
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-warning_55fkh_1vvqx_222:not(#\9) {
|
|
224
|
-
color: var(--color-text-status-warning-csaw41, #855900);
|
|
225
|
-
border-color: var(--color-text-status-warning-csaw41, #855900);
|
|
226
|
-
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
227
|
-
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
228
|
-
}
|
|
229
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-warning_55fkh_1vvqx_222:not(#\9):focus {
|
|
230
|
-
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
231
|
-
}
|
|
232
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-warning_55fkh_1vvqx_222:not(#\9) {
|
|
233
|
-
padding-inline-start: 0;
|
|
234
|
-
}
|
|
235
|
-
.awsui_root_55fkh_1vvqx_142.awsui_textarea-warning_55fkh_1vvqx_222:not(#\9):focus-within, .awsui_root_55fkh_1vvqx_142.awsui_textarea-warning_55fkh_1vvqx_222:not(#\9):focus {
|
|
236
|
-
color: var(--color-text-status-warning-csaw41, #855900);
|
|
237
|
-
border-color: var(--color-text-status-warning-csaw41, #855900);
|
|
238
|
-
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
239
|
-
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
142
|
+
.awsui_root_55fkh_1r4bl_142:not(#\9) {
|
|
143
|
+
position: relative;
|
|
240
144
|
}
|
|
241
|
-
.
|
|
242
|
-
|
|
145
|
+
.awsui_root_55fkh_1r4bl_142 > .awsui_button_55fkh_1r4bl_145:not(#\9) {
|
|
146
|
+
position: absolute;
|
|
147
|
+
inset-inline-end: var(--space-static-xxs-82cdfi, 4px);
|
|
148
|
+
inset-block-end: 0;
|
|
243
149
|
}
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
150
|
+
body[data-awsui-focus-visible=true] .awsui_root_55fkh_1r4bl_142 > .awsui_button_55fkh_1r4bl_145 > .awsui_action-button_55fkh_1r4bl_150:not(#\9):focus {
|
|
151
|
+
position: relative;
|
|
247
152
|
}
|
|
248
|
-
|
|
153
|
+
body[data-awsui-focus-visible=true] .awsui_root_55fkh_1r4bl_142 > .awsui_button_55fkh_1r4bl_145 > .awsui_action-button_55fkh_1r4bl_150:not(#\9):focus {
|
|
249
154
|
outline: 2px dotted transparent;
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
155
|
+
outline-offset: calc(calc((var(--space-xxxs-zbmxqb, 2px)) - 1px) - 1px);
|
|
156
|
+
}
|
|
157
|
+
body[data-awsui-focus-visible=true] .awsui_root_55fkh_1r4bl_142 > .awsui_button_55fkh_1r4bl_145 > .awsui_action-button_55fkh_1r4bl_150:not(#\9):focus::before {
|
|
158
|
+
content: " ";
|
|
159
|
+
display: block;
|
|
160
|
+
position: absolute;
|
|
161
|
+
inset-inline-start: calc(-1 * calc((var(--space-xxxs-zbmxqb, 2px)) - 1px));
|
|
162
|
+
inset-block-start: calc(-1 * calc(-1 * var(--space-xxxs-zbmxqb, 2px) - 1px));
|
|
163
|
+
inline-size: calc(100% + calc((var(--space-xxxs-zbmxqb, 2px)) - 1px) + calc((var(--space-xxxs-zbmxqb, 2px)) - 1px));
|
|
164
|
+
block-size: calc(100% + calc(-1 * var(--space-xxxs-zbmxqb, 2px) - 1px) + calc(-1 * var(--space-xxxs-zbmxqb, 2px) - 1px));
|
|
165
|
+
border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
166
|
+
border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
167
|
+
border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
168
|
+
border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
169
|
+
box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
257
170
|
}
|
|
258
171
|
|
|
259
|
-
.
|
|
172
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9) {
|
|
260
173
|
border-collapse: separate;
|
|
261
174
|
border-spacing: 0;
|
|
262
175
|
box-sizing: border-box;
|
|
@@ -290,16 +203,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
290
203
|
font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
291
204
|
-webkit-font-smoothing: auto;
|
|
292
205
|
-moz-osx-font-smoothing: auto;
|
|
293
|
-
border-start-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
294
|
-
border-start-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
295
|
-
border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
296
|
-
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
297
|
-
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
298
|
-
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
299
206
|
resize: none;
|
|
300
207
|
cursor: text;
|
|
301
208
|
white-space: pre-wrap;
|
|
302
|
-
background-color: inherit;
|
|
303
209
|
padding-block: var(--space-scaled-xxs-7597g1, 4px);
|
|
304
210
|
padding-inline: var(--space-field-horizontal-gg19kw, 12px);
|
|
305
211
|
color: var(--color-text-body-default-7v1jfn, #0f141a);
|
|
@@ -307,178 +213,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
307
213
|
inline-size: 100%;
|
|
308
214
|
display: block;
|
|
309
215
|
box-sizing: border-box;
|
|
310
|
-
|
|
216
|
+
background-color: var(--color-background-input-default-u56ls1, #ffffff);
|
|
217
|
+
border-start-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
218
|
+
border-start-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
219
|
+
border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
220
|
+
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
221
|
+
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-l7v83d, #8c8c94);
|
|
222
|
+
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-default-l7v83d, #8c8c94);
|
|
223
|
+
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
224
|
+
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
311
225
|
}
|
|
312
|
-
.
|
|
226
|
+
.awsui_textarea_55fkh_1r4bl_172.awsui_textarea-readonly_55fkh_1r4bl_225:not(#\9) {
|
|
227
|
+
background-color: var(--color-background-input-default-u56ls1, #ffffff);
|
|
228
|
+
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
229
|
+
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
230
|
+
}
|
|
231
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9)::placeholder {
|
|
313
232
|
color: var(--color-text-input-placeholder-f3x213, #656871);
|
|
314
233
|
font-style: italic;
|
|
315
234
|
opacity: 1;
|
|
316
235
|
}
|
|
317
|
-
.
|
|
236
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9):-ms-input-placeholder {
|
|
318
237
|
color: var(--color-text-input-placeholder-f3x213, #656871);
|
|
319
238
|
font-style: italic;
|
|
320
239
|
}
|
|
321
|
-
.
|
|
322
|
-
outline:
|
|
240
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9):focus {
|
|
241
|
+
outline: 2px dotted transparent;
|
|
242
|
+
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-c6w5i5, #002b66);
|
|
243
|
+
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-focused-c6w5i5, #002b66);
|
|
244
|
+
border-start-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
245
|
+
border-start-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
246
|
+
border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
247
|
+
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
248
|
+
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
323
249
|
}
|
|
324
|
-
.
|
|
250
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9):invalid {
|
|
325
251
|
box-shadow: none;
|
|
326
252
|
}
|
|
327
|
-
.
|
|
328
|
-
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
329
|
-
}
|
|
330
|
-
.awsui_textarea_55fkh_1vvqx_184:not(#\9):disabled {
|
|
253
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9):disabled {
|
|
331
254
|
background-color: var(--color-background-input-disabled-gvxsk4, #ebebf0);
|
|
332
255
|
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
333
256
|
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
|
|
334
257
|
color: var(--color-text-input-disabled-fc4jfl, #b4b4bb);
|
|
335
258
|
cursor: auto;
|
|
336
|
-
border: 0;
|
|
337
259
|
cursor: default;
|
|
338
260
|
}
|
|
339
|
-
.
|
|
261
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9):disabled::placeholder {
|
|
340
262
|
color: var(--color-text-input-placeholder-disabled-7v2f7f, #b4b4bb);
|
|
341
263
|
opacity: 1;
|
|
342
264
|
}
|
|
343
|
-
.
|
|
265
|
+
.awsui_textarea_55fkh_1r4bl_172:not(#\9):disabled:-ms-input-placeholder {
|
|
344
266
|
color: var(--color-text-input-placeholder-disabled-7v2f7f, #b4b4bb);
|
|
345
267
|
}
|
|
346
|
-
.awsui_textarea-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
.awsui_button_55fkh_1vvqx_348:not(#\9) {
|
|
351
|
-
align-self: flex-end;
|
|
352
|
-
padding-inline: calc(var(--space-field-horizontal-gg19kw, 12px) / 2);
|
|
353
|
-
padding-block-end: var(--space-scaled-xxxs-27y4hv, 2px);
|
|
354
|
-
}
|
|
355
|
-
.awsui_button_55fkh_1vvqx_348 > .awsui_action-button_55fkh_1vvqx_353:not(#\9) {
|
|
356
|
-
padding: 0;
|
|
357
|
-
}
|
|
358
|
-
body[data-awsui-focus-visible=true] .awsui_button_55fkh_1vvqx_348 > .awsui_action-button_55fkh_1vvqx_353:not(#\9):focus {
|
|
359
|
-
position: relative;
|
|
360
|
-
}
|
|
361
|
-
body[data-awsui-focus-visible=true] .awsui_button_55fkh_1vvqx_348 > .awsui_action-button_55fkh_1vvqx_353:not(#\9):focus {
|
|
362
|
-
outline: 2px dotted transparent;
|
|
363
|
-
outline-offset: calc(calc((var(--space-xxxs-zbmxqb, 2px)) - 1px) - 1px);
|
|
364
|
-
}
|
|
365
|
-
body[data-awsui-focus-visible=true] .awsui_button_55fkh_1vvqx_348 > .awsui_action-button_55fkh_1vvqx_353:not(#\9):focus::before {
|
|
366
|
-
content: " ";
|
|
367
|
-
display: block;
|
|
368
|
-
position: absolute;
|
|
369
|
-
inset-inline-start: calc(-1 * calc((var(--space-xxxs-zbmxqb, 2px)) - 1px));
|
|
370
|
-
inset-block-start: calc(-1 * calc(-1 * var(--space-xxxs-zbmxqb, 2px) - 1px));
|
|
371
|
-
inline-size: calc(100% + calc((var(--space-xxxs-zbmxqb, 2px)) - 1px) + calc((var(--space-xxxs-zbmxqb, 2px)) - 1px));
|
|
372
|
-
block-size: calc(100% + calc(-1 * var(--space-xxxs-zbmxqb, 2px) - 1px) + calc(-1 * var(--space-xxxs-zbmxqb, 2px) - 1px));
|
|
373
|
-
border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
374
|
-
border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
375
|
-
border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
376
|
-
border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
377
|
-
box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
.awsui_secondary-content_55fkh_1vvqx_378:not(#\9) {
|
|
381
|
-
border-collapse: separate;
|
|
382
|
-
border-spacing: 0;
|
|
383
|
-
box-sizing: border-box;
|
|
384
|
-
caption-side: top;
|
|
385
|
-
cursor: auto;
|
|
386
|
-
direction: inherit;
|
|
387
|
-
empty-cells: show;
|
|
388
|
-
font-family: serif;
|
|
389
|
-
font-size: medium;
|
|
390
|
-
font-style: normal;
|
|
391
|
-
font-variant: normal;
|
|
392
|
-
font-weight: 400;
|
|
393
|
-
font-stretch: normal;
|
|
394
|
-
line-height: normal;
|
|
395
|
-
-webkit-hyphens: none;
|
|
396
|
-
hyphens: none;
|
|
397
|
-
letter-spacing: normal;
|
|
398
|
-
list-style: disc outside none;
|
|
399
|
-
tab-size: 8;
|
|
400
|
-
text-align: start;
|
|
401
|
-
text-indent: 0;
|
|
402
|
-
text-shadow: none;
|
|
403
|
-
text-transform: none;
|
|
404
|
-
visibility: visible;
|
|
405
|
-
white-space: normal;
|
|
406
|
-
word-spacing: normal;
|
|
407
|
-
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
408
|
-
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
409
|
-
color: var(--color-text-body-default-7v1jfn, #0f141a);
|
|
410
|
-
font-weight: 400;
|
|
411
|
-
font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
412
|
-
-webkit-font-smoothing: auto;
|
|
413
|
-
-moz-osx-font-smoothing: auto;
|
|
414
|
-
border-start-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
415
|
-
border-start-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
416
|
-
border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
417
|
-
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
418
|
-
}
|
|
419
|
-
.awsui_secondary-content_55fkh_1vvqx_378.awsui_with-paddings_55fkh_1vvqx_416:not(#\9) {
|
|
420
|
-
padding-block-start: var(--space-scaled-xxs-7597g1, 4px);
|
|
421
|
-
padding-block-end: var(--space-scaled-s-aqzyko, 12px);
|
|
422
|
-
padding-inline-start: var(--space-field-horizontal-gg19kw, 12px);
|
|
423
|
-
padding-inline-end: calc(var(--space-field-horizontal-gg19kw, 12px) / 2);
|
|
424
|
-
}
|
|
425
|
-
.awsui_secondary-content_55fkh_1vvqx_378.awsui_with-paddings_55fkh_1vvqx_416.awsui_invalid_55fkh_1vvqx_325:not(#\9), .awsui_secondary-content_55fkh_1vvqx_378.awsui_with-paddings_55fkh_1vvqx_416.awsui_warning_55fkh_1vvqx_325:not(#\9) {
|
|
268
|
+
.awsui_textarea_55fkh_1r4bl_172.awsui_textarea-invalid_55fkh_1r4bl_267:not(#\9) {
|
|
269
|
+
color: var(--color-text-status-error-5676bj, #db0000);
|
|
270
|
+
border-color: var(--color-text-status-error-5676bj, #db0000);
|
|
426
271
|
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
272
|
+
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
427
273
|
}
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
border-collapse: separate;
|
|
431
|
-
border-spacing: 0;
|
|
432
|
-
box-sizing: border-box;
|
|
433
|
-
caption-side: top;
|
|
434
|
-
cursor: auto;
|
|
435
|
-
direction: inherit;
|
|
436
|
-
empty-cells: show;
|
|
437
|
-
font-family: serif;
|
|
438
|
-
font-size: medium;
|
|
439
|
-
font-style: normal;
|
|
440
|
-
font-variant: normal;
|
|
441
|
-
font-weight: 400;
|
|
442
|
-
font-stretch: normal;
|
|
443
|
-
line-height: normal;
|
|
444
|
-
-webkit-hyphens: none;
|
|
445
|
-
hyphens: none;
|
|
446
|
-
letter-spacing: normal;
|
|
447
|
-
list-style: disc outside none;
|
|
448
|
-
tab-size: 8;
|
|
449
|
-
text-align: start;
|
|
450
|
-
text-indent: 0;
|
|
451
|
-
text-shadow: none;
|
|
452
|
-
text-transform: none;
|
|
453
|
-
visibility: visible;
|
|
454
|
-
white-space: normal;
|
|
455
|
-
word-spacing: normal;
|
|
456
|
-
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
457
|
-
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
458
|
-
color: var(--color-text-body-default-7v1jfn, #0f141a);
|
|
459
|
-
font-weight: 400;
|
|
460
|
-
font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
461
|
-
-webkit-font-smoothing: auto;
|
|
462
|
-
-moz-osx-font-smoothing: auto;
|
|
463
|
-
border-start-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
464
|
-
border-start-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
465
|
-
border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
|
|
466
|
-
border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
|
|
467
|
-
display: flex;
|
|
468
|
-
justify-content: space-between;
|
|
469
|
-
align-items: flex-end;
|
|
470
|
-
}
|
|
471
|
-
.awsui_secondary-actions_55fkh_1vvqx_426.awsui_with-paddings_55fkh_1vvqx_416:not(#\9) {
|
|
472
|
-
padding-inline-start: var(--space-field-horizontal-gg19kw, 12px);
|
|
473
|
-
padding-block-start: var(--space-scaled-s-aqzyko, 12px);
|
|
474
|
-
padding-block-end: var(--space-scaled-xxs-7597g1, 4px);
|
|
274
|
+
.awsui_textarea_55fkh_1r4bl_172.awsui_textarea-invalid_55fkh_1r4bl_267:not(#\9):focus {
|
|
275
|
+
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
475
276
|
}
|
|
476
|
-
.
|
|
277
|
+
.awsui_textarea_55fkh_1r4bl_172.awsui_textarea-warning_55fkh_1r4bl_276:not(#\9) {
|
|
278
|
+
color: var(--color-text-status-warning-csaw41, #855900);
|
|
279
|
+
border-color: var(--color-text-status-warning-csaw41, #855900);
|
|
477
280
|
padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-field-width-09w7vk, 2px)));
|
|
281
|
+
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
478
282
|
}
|
|
479
|
-
.
|
|
480
|
-
|
|
283
|
+
.awsui_textarea_55fkh_1r4bl_172.awsui_textarea-warning_55fkh_1r4bl_276:not(#\9):focus {
|
|
284
|
+
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
481
285
|
}
|
|
482
|
-
.
|
|
483
|
-
padding-
|
|
286
|
+
.awsui_textarea_55fkh_1r4bl_172.awsui_textarea-with-button_55fkh_1r4bl_285:not(#\9) {
|
|
287
|
+
padding-inline-end: calc(var(--space-field-horizontal-gg19kw, 12px) + var(--space-static-xxs-82cdfi, 4px) + var(--size-icon-normal-0m1722, 16px));
|
|
484
288
|
}
|
|
@@ -2,19 +2,13 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"textarea
|
|
9
|
-
"textarea-
|
|
10
|
-
"textarea": "
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"textarea-wrapper": "awsui_textarea-wrapper_55fkh_1vvqx_344",
|
|
14
|
-
"button": "awsui_button_55fkh_1vvqx_348",
|
|
15
|
-
"action-button": "awsui_action-button_55fkh_1vvqx_353",
|
|
16
|
-
"secondary-content": "awsui_secondary-content_55fkh_1vvqx_378",
|
|
17
|
-
"with-paddings": "awsui_with-paddings_55fkh_1vvqx_416",
|
|
18
|
-
"secondary-actions": "awsui_secondary-actions_55fkh_1vvqx_426"
|
|
5
|
+
"root": "awsui_root_55fkh_1r4bl_142",
|
|
6
|
+
"button": "awsui_button_55fkh_1r4bl_145",
|
|
7
|
+
"action-button": "awsui_action-button_55fkh_1r4bl_150",
|
|
8
|
+
"textarea": "awsui_textarea_55fkh_1r4bl_172",
|
|
9
|
+
"textarea-readonly": "awsui_textarea-readonly_55fkh_1r4bl_225",
|
|
10
|
+
"textarea-invalid": "awsui_textarea-invalid_55fkh_1r4bl_267",
|
|
11
|
+
"textarea-warning": "awsui_textarea-warning_55fkh_1r4bl_276",
|
|
12
|
+
"textarea-with-button": "awsui_textarea-with-button_55fkh_1r4bl_285"
|
|
19
13
|
};
|
|
20
14
|
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"textarea": "
|
|
6
|
-
"action-button": "awsui_action-
|
|
7
|
-
"secondary-actions": "awsui_secondary-actions_nr3gs_n93je_17",
|
|
8
|
-
"secondary-content": "awsui_secondary-content_nr3gs_n93je_21"
|
|
4
|
+
"root": "awsui_root_nr3gs_1mr3y_5",
|
|
5
|
+
"textarea": "awsui_textarea_nr3gs_1mr3y_9",
|
|
6
|
+
"action-button": "awsui_action-button_nr3gs_1mr3y_13"
|
|
9
7
|
};
|
|
10
8
|
|
|
@@ -2,22 +2,14 @@
|
|
|
2
2
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
|
-
.
|
|
5
|
+
.awsui_root_nr3gs_1mr3y_5:not(#\9) {
|
|
6
6
|
/* used in test-utils */
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
.
|
|
9
|
+
.awsui_textarea_nr3gs_1mr3y_9:not(#\9) {
|
|
10
10
|
/* used in test-utils */
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.awsui_action-
|
|
14
|
-
/* used in test-utils */
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.awsui_secondary-actions_nr3gs_n93je_17:not(#\9) {
|
|
18
|
-
/* used in test-utils */
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.awsui_secondary-content_nr3gs_n93je_21:not(#\9) {
|
|
13
|
+
.awsui_action-button_nr3gs_1mr3y_13:not(#\9) {
|
|
22
14
|
/* used in test-utils */
|
|
23
15
|
}
|
|
@@ -2,10 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"textarea": "
|
|
7
|
-
"action-button": "awsui_action-
|
|
8
|
-
"secondary-actions": "awsui_secondary-actions_nr3gs_n93je_17",
|
|
9
|
-
"secondary-content": "awsui_secondary-content_nr3gs_n93je_21"
|
|
5
|
+
"root": "awsui_root_nr3gs_1mr3y_5",
|
|
6
|
+
"textarea": "awsui_textarea_nr3gs_1mr3y_9",
|
|
7
|
+
"action-button": "awsui_action-button_nr3gs_1mr3y_13"
|
|
10
8
|
};
|
|
11
9
|
|
package/steps/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/steps/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,wBAAyB,UAAU,gBAM7C,CAAC;AAGF,eAAe,KAAK,CAAC"}
|
package/steps/index.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { getBaseProps } from '../internal/base-component';
|
|
6
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
7
|
+
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
|
+
import { getExternalProps } from '../internal/utils/external-props';
|
|
9
|
+
import InternalSteps from './internal';
|
|
10
|
+
const Steps = (_a) => {
|
|
11
|
+
var { steps } = _a, props = __rest(_a, ["steps"]);
|
|
12
|
+
const baseProps = getBaseProps(props);
|
|
13
|
+
const baseComponentProps = useBaseComponent('Steps');
|
|
14
|
+
const externalProps = getExternalProps(props);
|
|
15
|
+
return React.createElement(InternalSteps, Object.assign({}, baseProps, baseComponentProps, externalProps, { steps: steps }));
|
|
16
|
+
};
|
|
17
|
+
applyDisplayName(Steps, 'Steps');
|
|
18
|
+
export default Steps;
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/steps/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,KAAK,GAAG,CAAC,EAA+B,EAAE,EAAE;QAAnC,EAAE,KAAK,OAAwB,EAAnB,KAAK,cAAjB,SAAmB,CAAF;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,oBAAC,aAAa,oBAAK,SAAS,EAAM,kBAAkB,EAAM,aAAa,IAAE,KAAK,EAAE,KAAK,IAAI,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { StepsProps } from './interfaces';\nimport InternalSteps from './internal';\n\nexport { StepsProps };\n\nconst Steps = ({ steps, ...props }: StepsProps) => {\n const baseProps = getBaseProps(props);\n const baseComponentProps = useBaseComponent('Steps');\n const externalProps = getExternalProps(props);\n\n return <InternalSteps {...baseProps} {...baseComponentProps} {...externalProps} steps={steps} />;\n};\n\napplyDisplayName(Steps, 'Steps');\nexport default Steps;\n"]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseComponentProps } from '../internal/base-component';
|
|
3
|
+
import { StatusIndicatorProps } from '../status-indicator/internal';
|
|
4
|
+
export interface StepsProps extends BaseComponentProps {
|
|
5
|
+
/**
|
|
6
|
+
* An array of individual steps
|
|
7
|
+
*
|
|
8
|
+
* Each step definition has the following properties:
|
|
9
|
+
* * `status` (string) - Status of the step corresponding to a status indicator.
|
|
10
|
+
* * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.
|
|
11
|
+
* * `header` (ReactNode) - Summary corresponding to the step.
|
|
12
|
+
* * `details` (ReactNode) - (Optional) Additional information corresponding to the step.
|
|
13
|
+
*/
|
|
14
|
+
steps: ReadonlyArray<StepsProps.Step>;
|
|
15
|
+
/**
|
|
16
|
+
* Provides an `aria-label` to the progress steps container.
|
|
17
|
+
* Don't use `ariaLabel` and `ariaLabelledby` at the same time.
|
|
18
|
+
*/
|
|
19
|
+
ariaLabel?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Sets the `aria-labelledby` property on the progress steps container.
|
|
22
|
+
* If there's a visible label element that you can reference, use this instead of `ariaLabel`.
|
|
23
|
+
* Don't use `ariaLabel` and `ariaLabelledby` at the same time.
|
|
24
|
+
*/
|
|
25
|
+
ariaLabelledby?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Sets the `aria-describedby` property on the progress steps container.
|
|
28
|
+
*/
|
|
29
|
+
ariaDescribedby?: string;
|
|
30
|
+
}
|
|
31
|
+
export declare namespace StepsProps {
|
|
32
|
+
type Status = StatusIndicatorProps.Type;
|
|
33
|
+
interface Step {
|
|
34
|
+
status: Status;
|
|
35
|
+
statusIconAriaLabel?: string;
|
|
36
|
+
header: React.ReactNode;
|
|
37
|
+
details?: React.ReactNode;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;OAQG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAE/C,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { StatusIndicatorProps } from '../status-indicator/internal';\n\nexport interface StepsProps extends BaseComponentProps {\n /**\n * An array of individual steps\n *\n * Each step definition has the following properties:\n * * `status` (string) - Status of the step corresponding to a status indicator.\n * * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n * * `header` (ReactNode) - Summary corresponding to the step.\n * * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n */\n steps: ReadonlyArray<StepsProps.Step>;\n /**\n * Provides an `aria-label` to the progress steps container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n /**\n * Sets the `aria-labelledby` property on the progress steps container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n /**\n * Sets the `aria-describedby` property on the progress steps container.\n */\n ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n export type Status = StatusIndicatorProps.Type;\n\n export interface Step {\n status: Status;\n statusIconAriaLabel?: string;\n header: React.ReactNode;\n details?: React.ReactNode;\n }\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
|
+
import { SomeRequired } from '../internal/types';
|
|
4
|
+
import { StepsProps } from './interfaces';
|
|
5
|
+
type InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps<HTMLDivElement>;
|
|
6
|
+
export declare const InternalSteps: ({ steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }: InternalStepsProps) => JSX.Element;
|
|
7
|
+
export default InternalSteps;
|
|
8
|
+
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC,cAAc,CAAC,CAAC;AAgBzG,eAAO,MAAM,aAAa,uFAOvB,kBAAkB,gBAqBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
import StatusIndicator from '../status-indicator/internal';
|
|
7
|
+
import styles from './styles.css.js';
|
|
8
|
+
const InternalStep = ({ status, statusIconAriaLabel, header, details }) => {
|
|
9
|
+
return (React.createElement("li", { className: styles.container },
|
|
10
|
+
React.createElement("div", { className: styles.header },
|
|
11
|
+
React.createElement(StatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)),
|
|
12
|
+
React.createElement("hr", { className: styles.connector, role: "none" }),
|
|
13
|
+
details && React.createElement("div", { className: styles.details }, details)));
|
|
14
|
+
};
|
|
15
|
+
export const InternalSteps = (_a) => {
|
|
16
|
+
var { steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef } = _a, props = __rest(_a, ["steps", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "__internalRootRef"]);
|
|
17
|
+
return (React.createElement("div", Object.assign({}, props, { className: clsx(styles.root, props.className), ref: __internalRootRef }),
|
|
18
|
+
React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details }))))));
|
|
19
|
+
};
|
|
20
|
+
export default InternalSteps;
|
|
21
|
+
//# sourceMappingURL=internal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAG3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAmB,EAAE,EAAE;IACzF,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,oBAAC,eAAe,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,IAC9D,MAAM,CACS,CACd;QACN,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG;QAC9C,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAOT,EAAE,EAAE;QAPK,EAC5B,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,OAEE,EADhB,KAAK,cANoB,gFAO7B,CADS;IAER,OAAO,CACL,6CAAS,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACnF,4BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACH,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport StatusIndicator from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps<HTMLDivElement>;\n\nconst InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => {\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n {header}\n </StatusIndicator>\n </div>\n <hr className={styles.connector} role=\"none\" />\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n};\n\nexport const InternalSteps = ({\n steps,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n __internalRootRef,\n ...props\n}: InternalStepsProps) => {\n return (\n <div {...props} className={clsx(styles.root, props.className)} ref={__internalRootRef}>\n <ol\n className={styles.list}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {steps.map((step, index) => (\n <InternalStep\n key={index}\n status={step.status}\n statusIconAriaLabel={step.statusIconAriaLabel}\n header={step.header}\n details={step.details}\n />\n ))}\n </ol>\n </div>\n );\n};\n\nexport default InternalSteps;\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
|
|
2
|
+
import './styles.scoped.css';
|
|
3
|
+
export default {
|
|
4
|
+
"root": "awsui_root_gxp9y_128ou_177",
|
|
5
|
+
"list": "awsui_list_gxp9y_128ou_211",
|
|
6
|
+
"container": "awsui_container_gxp9y_128ou_216",
|
|
7
|
+
"header": "awsui_header_gxp9y_128ou_221",
|
|
8
|
+
"details": "awsui_details_gxp9y_128ou_225",
|
|
9
|
+
"connector": "awsui_connector_gxp9y_128ou_231"
|
|
10
|
+
};
|
|
11
|
+
|