@cloudscape-design/components-themeable 3.0.1044 → 3.0.1046
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/internal/styles/typography/mixins.scss +1 -0
- package/lib/internal/scss/top-navigation/styles.scss +6 -5
- package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh/mobile-toolbar.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js +1 -1
- package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/lib/internal/template/attribute-editor/internal.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/internal.js +1 -1
- package/lib/internal/template/attribute-editor/internal.js.map +1 -1
- package/lib/internal/template/button/index.d.ts.map +1 -1
- package/lib/internal/template/button/index.js +2 -2
- package/lib/internal/template/button/index.js.map +1 -1
- package/lib/internal/template/button/interfaces.d.ts +26 -0
- package/lib/internal/template/button/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button/interfaces.js.map +1 -1
- package/lib/internal/template/button/internal.d.ts +2 -2
- package/lib/internal/template/button/internal.d.ts.map +1 -1
- package/lib/internal/template/button/internal.js +27 -26
- package/lib/internal/template/button/internal.js.map +1 -1
- package/lib/internal/template/button-dropdown/internal.js +1 -1
- package/lib/internal/template/button-dropdown/internal.js.map +1 -1
- package/lib/internal/template/code-editor/status-bar.d.ts.map +1 -1
- package/lib/internal/template/code-editor/status-bar.js +2 -2
- package/lib/internal/template/code-editor/status-bar.js.map +1 -1
- package/lib/internal/template/drawer/styles.css.js +8 -8
- package/lib/internal/template/drawer/styles.scoped.css +15 -13
- package/lib/internal/template/drawer/styles.selectors.js +8 -8
- package/lib/internal/template/file-input/internal.d.ts.map +1 -1
- package/lib/internal/template/file-input/internal.js +1 -1
- package/lib/internal/template/file-input/internal.js.map +1 -1
- package/lib/internal/template/help-panel/styles.css.js +6 -6
- package/lib/internal/template/help-panel/styles.scoped.css +69 -67
- package/lib/internal/template/help-panel/styles.selectors.js +6 -6
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/utils/with-native-attributes.d.ts +16 -0
- package/lib/internal/template/internal/utils/with-native-attributes.d.ts.map +1 -0
- package/lib/internal/template/internal/utils/with-native-attributes.js +39 -0
- package/lib/internal/template/internal/utils/with-native-attributes.js.map +1 -0
- package/lib/internal/template/multiselect/use-multiselect.d.ts +1 -1
- package/lib/internal/template/select/parts/filter.d.ts +1 -1
- package/lib/internal/template/side-navigation/styles.css.js +30 -30
- package/lib/internal/template/side-navigation/styles.scoped.css +48 -46
- package/lib/internal/template/side-navigation/styles.selectors.js +30 -30
- package/lib/internal/template/split-panel/styles.css.js +27 -27
- package/lib/internal/template/split-panel/styles.scoped.css +45 -44
- package/lib/internal/template/split-panel/styles.selectors.js +27 -27
- package/lib/internal/template/top-navigation/styles.css.js +47 -47
- package/lib/internal/template/top-navigation/styles.scoped.css +75 -73
- package/lib/internal/template/top-navigation/styles.selectors.js +47 -47
- package/lib/internal/template/tutorial-panel/components/tutorial-list/index.js +1 -1
- package/lib/internal/template/tutorial-panel/components/tutorial-list/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.awsui_top-
|
|
145
|
+
.awsui_top-navigation_k5dlb_76ww4_145:not(#\9) {
|
|
146
146
|
border-collapse: separate;
|
|
147
147
|
border-spacing: 0;
|
|
148
148
|
box-sizing: border-box;
|
|
@@ -175,7 +175,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
175
175
|
background: var(--color-background-container-content-aemn43, #ffffff);
|
|
176
176
|
border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
|
|
177
177
|
}
|
|
178
|
-
.awsui_top-
|
|
178
|
+
.awsui_top-navigation_k5dlb_76ww4_145 > .awsui_padding-box_k5dlb_76ww4_178:not(#\9) {
|
|
179
179
|
display: flex;
|
|
180
180
|
flex-direction: row;
|
|
181
181
|
flex-wrap: nowrap;
|
|
@@ -185,22 +185,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
185
185
|
block-size: calc(var(--space-xxxl-qhelse, 40px) + var(--space-scaled-m-sw9kcx, 16px));
|
|
186
186
|
padding-inline-start: var(--space-xxl-q0lyvp, 32px);
|
|
187
187
|
}
|
|
188
|
-
.awsui_top-
|
|
188
|
+
.awsui_top-navigation_k5dlb_76ww4_145.awsui_medium_k5dlb_76ww4_188 > .awsui_padding-box_k5dlb_76ww4_178:not(#\9), .awsui_top-navigation_k5dlb_76ww4_145.awsui_narrow_k5dlb_76ww4_188 > .awsui_padding-box_k5dlb_76ww4_178:not(#\9) {
|
|
189
189
|
padding-inline-start: var(--space-l-3cws6j, 20px);
|
|
190
190
|
}
|
|
191
|
-
.awsui_top-
|
|
191
|
+
.awsui_top-navigation_k5dlb_76ww4_145.awsui_medium_k5dlb_76ww4_188 > .awsui_padding-box_k5dlb_76ww4_178:not(#\9) {
|
|
192
192
|
block-size: calc(var(--space-xxxl-qhelse, 40px) + var(--space-scaled-xs-sppte9, 8px));
|
|
193
193
|
padding-inline-end: 0;
|
|
194
194
|
}
|
|
195
|
-
.awsui_top-
|
|
195
|
+
.awsui_top-navigation_k5dlb_76ww4_145.awsui_narrow_k5dlb_76ww4_188 > .awsui_padding-box_k5dlb_76ww4_178:not(#\9) {
|
|
196
196
|
block-size: var(--space-xxxl-qhelse, 40px);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
-
.
|
|
199
|
+
.awsui_virtual_k5dlb_76ww4_199:not(#\9) {
|
|
200
200
|
inline-size: 9000px;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
.
|
|
203
|
+
.awsui_hidden_k5dlb_76ww4_203:not(#\9) {
|
|
204
204
|
position: absolute !important;
|
|
205
205
|
inset-block-start: -9999px !important;
|
|
206
206
|
inset-inline-start: -9999px !important;
|
|
@@ -208,23 +208,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
|
|
211
|
-
.
|
|
211
|
+
.awsui_hidden_k5dlb_76ww4_203 *:not(#\9):not(#awsui_\9 _k5dlb_76ww4_1) {
|
|
212
212
|
visibility: hidden;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
.
|
|
215
|
+
.awsui_identity_k5dlb_76ww4_215:not(#\9) {
|
|
216
216
|
min-inline-size: 0;
|
|
217
217
|
}
|
|
218
|
-
.
|
|
218
|
+
.awsui_identity_k5dlb_76ww4_215 > .awsui_identity-link_k5dlb_76ww4_218:not(#\9) {
|
|
219
219
|
display: flex;
|
|
220
220
|
align-items: center;
|
|
221
221
|
text-decoration: none;
|
|
222
222
|
color: var(--color-text-top-navigation-title-4lkrln, #16191f);
|
|
223
223
|
}
|
|
224
|
-
.
|
|
224
|
+
.awsui_identity_k5dlb_76ww4_215 > .awsui_identity-link_k5dlb_76ww4_218:not(#\9):hover {
|
|
225
225
|
color: var(--color-text-accent-rvq171, #0073bb);
|
|
226
226
|
}
|
|
227
|
-
body[data-awsui-focus-visible=true] .
|
|
227
|
+
body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_76ww4_215 > .awsui_identity-link_k5dlb_76ww4_218:not(#\9):focus {
|
|
228
228
|
outline: thin dotted;
|
|
229
229
|
outline: var(--border-link-focus-ring-outline-c5423y, 5px auto Highlight);
|
|
230
230
|
outline-offset: 2px;
|
|
@@ -235,11 +235,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
235
235
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
|
|
236
236
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-woh62o, 0px) var(--color-border-item-focused-r5f6xl, #0073bb);
|
|
237
237
|
}
|
|
238
|
-
.
|
|
238
|
+
.awsui_identity_k5dlb_76ww4_215.awsui_no-logo_k5dlb_76ww4_238:not(#\9) {
|
|
239
239
|
min-inline-size: 100px;
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
-
.
|
|
242
|
+
.awsui_logo_k5dlb_76ww4_242:not(#\9) {
|
|
243
243
|
display: block;
|
|
244
244
|
max-block-size: var(--space-xxl-q0lyvp, 32px);
|
|
245
245
|
margin-inline-end: var(--space-s-4a5hs8, 12px);
|
|
@@ -247,11 +247,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
247
247
|
flex-shrink: 0;
|
|
248
248
|
min-inline-size: 10px;
|
|
249
249
|
}
|
|
250
|
-
.
|
|
250
|
+
.awsui_logo_k5dlb_76ww4_242.awsui_narrow_k5dlb_76ww4_188:not(#\9) {
|
|
251
251
|
max-block-size: var(--space-xl-4dmkh1, 24px);
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
.
|
|
254
|
+
.awsui_title_k5dlb_76ww4_254:not(#\9) {
|
|
255
255
|
font-size: var(--font-size-heading-m-56jjln, 18px);
|
|
256
256
|
line-height: var(--line-height-heading-m-irezqt, 22px);
|
|
257
257
|
letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
|
|
@@ -262,11 +262,11 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
262
262
|
overflow: hidden;
|
|
263
263
|
text-overflow: ellipsis;
|
|
264
264
|
}
|
|
265
|
-
.awsui_no-
|
|
265
|
+
.awsui_no-logo_k5dlb_76ww4_238 > .awsui_identity-link_k5dlb_76ww4_218 > .awsui_title_k5dlb_76ww4_254:not(#\9) {
|
|
266
266
|
font-weight: 700;
|
|
267
267
|
}
|
|
268
268
|
|
|
269
|
-
.
|
|
269
|
+
.awsui_inputs_k5dlb_76ww4_269:not(#\9) {
|
|
270
270
|
display: flex;
|
|
271
271
|
flex: 1;
|
|
272
272
|
padding-block: 0;
|
|
@@ -274,26 +274,26 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
274
274
|
justify-content: center;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
|
-
.
|
|
277
|
+
.awsui_search_k5dlb_76ww4_277:not(#\9) {
|
|
278
278
|
inline-size: 100%;
|
|
279
279
|
max-inline-size: 340px;
|
|
280
280
|
}
|
|
281
|
-
.awsui_search-
|
|
281
|
+
.awsui_search-expanded_k5dlb_76ww4_281:not(#\9) {
|
|
282
282
|
max-inline-size: none;
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
-
.
|
|
285
|
+
.awsui_utilities_k5dlb_76ww4_285:not(#\9) {
|
|
286
286
|
display: flex;
|
|
287
287
|
flex-shrink: 0;
|
|
288
288
|
flex-direction: row;
|
|
289
289
|
align-items: stretch;
|
|
290
290
|
block-size: 100%;
|
|
291
291
|
}
|
|
292
|
-
.
|
|
292
|
+
.awsui_medium_k5dlb_76ww4_188 > .awsui_padding-box_k5dlb_76ww4_178 > .awsui_utilities_k5dlb_76ww4_285:not(#\9), .awsui_narrow_k5dlb_76ww4_188 > .awsui_padding-box_k5dlb_76ww4_178 > .awsui_utilities_k5dlb_76ww4_285:not(#\9) {
|
|
293
293
|
padding-inline-start: 0;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
|
-
.awsui_utility-
|
|
296
|
+
.awsui_utility-wrapper_k5dlb_76ww4_296:not(#\9) {
|
|
297
297
|
display: flex;
|
|
298
298
|
position: relative;
|
|
299
299
|
flex-shrink: 0;
|
|
@@ -301,7 +301,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
301
301
|
padding-block: 0;
|
|
302
302
|
padding-inline: var(--space-m-n2lypl, 16px);
|
|
303
303
|
}
|
|
304
|
-
.awsui_utility-
|
|
304
|
+
.awsui_utility-wrapper_k5dlb_76ww4_296:not(#\9)::after {
|
|
305
305
|
display: block;
|
|
306
306
|
position: absolute;
|
|
307
307
|
content: "";
|
|
@@ -310,61 +310,61 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
310
310
|
inset-block: var(--space-s-4a5hs8, 12px);
|
|
311
311
|
background: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
312
312
|
}
|
|
313
|
-
.awsui_utility-
|
|
313
|
+
.awsui_utility-wrapper_k5dlb_76ww4_296:not(#\9):last-of-type::after {
|
|
314
314
|
display: none;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
.awsui_utility-type-button-
|
|
317
|
+
.awsui_utility-type-button-link_k5dlb_76ww4_317:not(#\9) {
|
|
318
318
|
padding-block: 0;
|
|
319
319
|
padding-inline: var(--space-l-3cws6j, 20px);
|
|
320
320
|
}
|
|
321
321
|
|
|
322
|
-
.awsui_utility-type-menu-
|
|
322
|
+
.awsui_utility-type-menu-dropdown_k5dlb_76ww4_322:not(#\9) {
|
|
323
323
|
padding-block: 0;
|
|
324
324
|
padding-inline: var(--space-s-4a5hs8, 12px);
|
|
325
325
|
align-items: stretch;
|
|
326
326
|
}
|
|
327
|
-
.awsui_utility-type-menu-
|
|
327
|
+
.awsui_utility-type-menu-dropdown_k5dlb_76ww4_322:not(#\9):not(.awsui_narrow_k5dlb_76ww4_188):last-of-type, .awsui_utility-type-menu-dropdown_k5dlb_76ww4_322:not(#\9):not(.awsui_medium_k5dlb_76ww4_188):last-of-type {
|
|
328
328
|
padding-inline-end: 0;
|
|
329
329
|
}
|
|
330
330
|
|
|
331
|
-
.awsui_utility-type-button-primary-
|
|
331
|
+
.awsui_utility-type-button-primary-button_k5dlb_76ww4_331:not(#\9) {
|
|
332
332
|
inset-inline-start: -1px;
|
|
333
333
|
border-inline-start: 1px solid var(--color-background-container-content-aemn43, #ffffff);
|
|
334
334
|
}
|
|
335
|
-
.awsui_utility-type-button-primary-
|
|
335
|
+
.awsui_utility-type-button-primary-button_k5dlb_76ww4_331:not(#\9)::after {
|
|
336
336
|
display: none;
|
|
337
337
|
}
|
|
338
338
|
|
|
339
|
-
.awsui_utility-link-
|
|
339
|
+
.awsui_utility-link-icon_k5dlb_76ww4_339:not(#\9) {
|
|
340
340
|
margin-inline-start: var(--space-xxs-jnczic, 4px);
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
-
.awsui_utility-button-external-
|
|
343
|
+
.awsui_utility-button-external-icon_k5dlb_76ww4_343:not(#\9) {
|
|
344
344
|
display: inline-block;
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
-
.awsui_offset-right-
|
|
347
|
+
.awsui_offset-right-none_k5dlb_76ww4_347:not(#\9) {
|
|
348
348
|
margin-inline-end: 0;
|
|
349
349
|
}
|
|
350
350
|
|
|
351
|
-
.awsui_offset-right-
|
|
351
|
+
.awsui_offset-right-l_k5dlb_76ww4_351:not(#\9) {
|
|
352
352
|
margin-inline-end: var(--space-xxs-jnczic, 4px);
|
|
353
353
|
}
|
|
354
354
|
|
|
355
|
-
.awsui_offset-right-
|
|
355
|
+
.awsui_offset-right-xxl_k5dlb_76ww4_355:not(#\9) {
|
|
356
356
|
margin-inline-end: var(--space-m-n2lypl, 16px);
|
|
357
357
|
}
|
|
358
358
|
|
|
359
359
|
/* Overflow Menu */
|
|
360
|
-
.awsui_overflow-menu-
|
|
360
|
+
.awsui_overflow-menu-drawer_k5dlb_76ww4_360:not(#\9) {
|
|
361
361
|
position: fixed;
|
|
362
362
|
block-size: 100%;
|
|
363
363
|
inline-size: 100%;
|
|
364
364
|
z-index: 1001;
|
|
365
365
|
}
|
|
366
366
|
|
|
367
|
-
.awsui_overflow-
|
|
367
|
+
.awsui_overflow-menu_k5dlb_76ww4_360:not(#\9) {
|
|
368
368
|
border-collapse: separate;
|
|
369
369
|
border-spacing: 0;
|
|
370
370
|
box-sizing: border-box;
|
|
@@ -398,7 +398,7 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
398
398
|
block-size: 100%;
|
|
399
399
|
}
|
|
400
400
|
|
|
401
|
-
.awsui_overflow-menu-
|
|
401
|
+
.awsui_overflow-menu-header_k5dlb_76ww4_401:not(#\9) {
|
|
402
402
|
display: flex;
|
|
403
403
|
align-items: center;
|
|
404
404
|
min-block-size: var(--font-panel-header-line-height-z3wpa5, 22px);
|
|
@@ -406,37 +406,39 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
406
406
|
padding-inline: var(--space-scaled-m-sw9kcx, 16px);
|
|
407
407
|
border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
|
|
408
408
|
}
|
|
409
|
-
.awsui_overflow-menu-header-
|
|
410
|
-
font-size: var(--font-panel-header-size-i1j838, 18px);
|
|
411
|
-
line-height: var(--font-panel-header-line-height-z3wpa5, 22px);
|
|
412
|
-
font-weight: var(--font-weight-heading-l-zqsb7y, 700);
|
|
413
|
-
-webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
|
|
414
|
-
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
|
|
409
|
+
.awsui_overflow-menu-header-text_k5dlb_76ww4_409:not(#\9) {
|
|
415
410
|
color: var(--color-text-heading-default-wlau07, #16191f);
|
|
416
411
|
flex: 1;
|
|
417
412
|
margin-block: 0;
|
|
418
413
|
margin-inline: 0;
|
|
419
414
|
text-align: center;
|
|
420
415
|
}
|
|
421
|
-
.awsui_overflow-menu-header-text--
|
|
416
|
+
.awsui_overflow-menu-header-text--title_k5dlb_76ww4_416:not(#\9) {
|
|
417
|
+
/* used in test-utils */
|
|
418
|
+
font-size: var(--font-panel-header-size-i1j838, 18px);
|
|
419
|
+
letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
|
|
420
|
+
line-height: var(--font-panel-header-line-height-z3wpa5, 22px);
|
|
421
|
+
font-weight: var(--font-weight-heading-l-zqsb7y, 700);
|
|
422
|
+
-webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
|
|
423
|
+
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
|
|
424
|
+
}
|
|
425
|
+
.awsui_overflow-menu-header-text--secondary_k5dlb_76ww4_425:not(#\9) {
|
|
422
426
|
font-size: var(--font-header-h2-description-size-t8fx03, 12px);
|
|
423
427
|
line-height: var(--font-header-h2-description-line-height-7ibe40, 16px);
|
|
424
428
|
font-weight: 400;
|
|
429
|
+
-webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
|
|
430
|
+
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
|
|
425
431
|
}
|
|
426
432
|
|
|
427
|
-
.awsui_overflow-menu-
|
|
428
|
-
/* used in test-utils */
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
.awsui_overflow-menu-back-button_k5dlb_en1pm_431:not(#\9) {
|
|
433
|
+
.awsui_overflow-menu-back-button_k5dlb_76ww4_433:not(#\9) {
|
|
432
434
|
/* used in test-utils */
|
|
433
435
|
}
|
|
434
436
|
|
|
435
|
-
.awsui_overflow-menu-dismiss-
|
|
437
|
+
.awsui_overflow-menu-dismiss-button_k5dlb_76ww4_437:not(#\9) {
|
|
436
438
|
/* used in test-utils */
|
|
437
439
|
}
|
|
438
440
|
|
|
439
|
-
.awsui_overflow-menu-
|
|
441
|
+
.awsui_overflow-menu-control_k5dlb_76ww4_441:not(#\9) {
|
|
440
442
|
border-collapse: separate;
|
|
441
443
|
border-spacing: 0;
|
|
442
444
|
box-sizing: border-box;
|
|
@@ -474,32 +476,32 @@ body[data-awsui-focus-visible=true] .awsui_identity_k5dlb_en1pm_215 > .awsui_ide
|
|
|
474
476
|
border-block: none;
|
|
475
477
|
border-inline: none;
|
|
476
478
|
}
|
|
477
|
-
.awsui_overflow-menu-list-item-
|
|
479
|
+
.awsui_overflow-menu-list-item-utility_k5dlb_76ww4_479 > .awsui_overflow-menu-control_k5dlb_76ww4_441:not(#\9) {
|
|
478
480
|
padding-block: var(--space-scaled-m-sw9kcx, 16px);
|
|
479
481
|
padding-inline: var(--space-scaled-m-sw9kcx, 16px);
|
|
480
482
|
}
|
|
481
|
-
.awsui_overflow-menu-
|
|
483
|
+
.awsui_overflow-menu-control_k5dlb_76ww4_441:not(#\9):hover {
|
|
482
484
|
color: var(--color-text-accent-rvq171, #0073bb);
|
|
483
485
|
cursor: pointer;
|
|
484
486
|
}
|
|
485
|
-
.awsui_overflow-menu-control-
|
|
487
|
+
.awsui_overflow-menu-control-link_k5dlb_76ww4_487:not(#\9) {
|
|
486
488
|
text-decoration: none;
|
|
487
489
|
}
|
|
488
|
-
.awsui_overflow-menu-control-expandable-menu-
|
|
490
|
+
.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_76ww4_490:not(#\9) {
|
|
489
491
|
color: var(--color-text-dropdown-group-label-7pa4nd, #545b64);
|
|
490
492
|
font-weight: bold;
|
|
491
493
|
}
|
|
492
|
-
.awsui_overflow-menu-control-expandable-menu-
|
|
494
|
+
.awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_76ww4_490:not(#\9):hover {
|
|
493
495
|
color: var(--color-text-accent-rvq171, #0073bb);
|
|
494
496
|
}
|
|
495
|
-
body[data-awsui-focus-visible=true] .awsui_overflow-menu-
|
|
497
|
+
body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_76ww4_441:not(#\9):focus {
|
|
496
498
|
position: relative;
|
|
497
499
|
}
|
|
498
|
-
body[data-awsui-focus-visible=true] .awsui_overflow-menu-
|
|
500
|
+
body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_76ww4_441:not(#\9):focus {
|
|
499
501
|
outline: 2px dotted transparent;
|
|
500
502
|
outline-offset: calc(var(--space-button-focus-outline-gutter-vsdlzg, 3px) - 1px);
|
|
501
503
|
}
|
|
502
|
-
body[data-awsui-focus-visible=true] .awsui_overflow-menu-
|
|
504
|
+
body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_76ww4_441:not(#\9):focus::before {
|
|
503
505
|
content: " ";
|
|
504
506
|
display: block;
|
|
505
507
|
position: absolute;
|
|
@@ -514,63 +516,63 @@ body[data-awsui-focus-visible=true] .awsui_overflow-menu-control_k5dlb_en1pm_439
|
|
|
514
516
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
|
|
515
517
|
}
|
|
516
518
|
|
|
517
|
-
.awsui_overflow-menu-
|
|
519
|
+
.awsui_overflow-menu-list_k5dlb_76ww4_479:not(#\9) {
|
|
518
520
|
list-style: none;
|
|
519
521
|
margin-block: 0;
|
|
520
522
|
margin-inline: 0;
|
|
521
523
|
padding-block: 0;
|
|
522
524
|
padding-inline: 0;
|
|
523
525
|
}
|
|
524
|
-
.awsui_overflow-menu-list-
|
|
526
|
+
.awsui_overflow-menu-list-submenu_k5dlb_76ww4_526:not(#\9) {
|
|
525
527
|
margin-block: var(--space-scaled-xxs-jatbiv, 4px);
|
|
526
528
|
margin-inline: 0;
|
|
527
529
|
}
|
|
528
530
|
|
|
529
|
-
.awsui_overflow-menu-list-
|
|
531
|
+
.awsui_overflow-menu-list-item_k5dlb_76ww4_479:not(#\9) {
|
|
530
532
|
box-sizing: border-box;
|
|
531
533
|
letter-spacing: var(--font-button-letter-spacing-9h7rbb, 0.25px);
|
|
532
534
|
}
|
|
533
|
-
.awsui_overflow-menu-list-item-
|
|
535
|
+
.awsui_overflow-menu-list-item-icon_k5dlb_76ww4_535:not(#\9) {
|
|
534
536
|
margin-inline-end: var(--space-xxs-jnczic, 4px);
|
|
535
537
|
}
|
|
536
|
-
.awsui_overflow-menu-list-item-
|
|
538
|
+
.awsui_overflow-menu-list-item-text_k5dlb_76ww4_538:not(#\9) {
|
|
537
539
|
flex: 1;
|
|
538
540
|
}
|
|
539
|
-
.awsui_overflow-menu-list-item-
|
|
541
|
+
.awsui_overflow-menu-list-item-utility_k5dlb_76ww4_479:not(#\9) {
|
|
540
542
|
font-weight: var(--font-weight-button-hh0ago, 700);
|
|
541
543
|
-webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
|
|
542
544
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
|
|
543
545
|
border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
|
|
544
546
|
}
|
|
545
|
-
.awsui_overflow-menu-list-item-
|
|
547
|
+
.awsui_overflow-menu-list-item-submenu_k5dlb_76ww4_547:not(#\9) {
|
|
546
548
|
border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
|
|
547
549
|
border-block-end: var(--border-divider-section-width-sznrdy, 1px) solid transparent;
|
|
548
550
|
padding-block: var(--space-scaled-xxs-jatbiv, 4px);
|
|
549
551
|
padding-inline: var(--space-scaled-l-66n9sr, 20px);
|
|
550
552
|
}
|
|
551
|
-
.awsui_overflow-menu-list-item-dropdown-
|
|
553
|
+
.awsui_overflow-menu-list-item-dropdown-menu_k5dlb_76ww4_553:not(#\9) {
|
|
552
554
|
padding-block: var(--space-scaled-xxs-jatbiv, 4px);
|
|
553
555
|
padding-inline: var(--space-scaled-s-gjhvjd, 12px);
|
|
554
556
|
}
|
|
555
|
-
.awsui_overflow-menu-list-item-
|
|
557
|
+
.awsui_overflow-menu-list-item-expandable_k5dlb_76ww4_557:not(#\9) {
|
|
556
558
|
border-block-start-color: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
557
559
|
border-block-end-color: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
558
560
|
}
|
|
559
561
|
|
|
560
|
-
.
|
|
562
|
+
.awsui_icon_k5dlb_76ww4_562:not(#\9) {
|
|
561
563
|
transform: rotate(0deg);
|
|
562
564
|
transition: transform var(--motion-duration-rotate-180-4er9qu, 135ms) var(--motion-easing-rotate-180-xlspcm, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
563
565
|
}
|
|
564
566
|
@media (prefers-reduced-motion: reduce) {
|
|
565
|
-
.
|
|
567
|
+
.awsui_icon_k5dlb_76ww4_562:not(#\9) {
|
|
566
568
|
animation: none;
|
|
567
569
|
transition: none;
|
|
568
570
|
}
|
|
569
571
|
}
|
|
570
|
-
.awsui-motion-disabled .
|
|
572
|
+
.awsui-motion-disabled .awsui_icon_k5dlb_76ww4_562:not(#\9), .awsui-mode-entering .awsui_icon_k5dlb_76ww4_562:not(#\9) {
|
|
571
573
|
animation: none;
|
|
572
574
|
transition: none;
|
|
573
575
|
}
|
|
574
|
-
.awsui_icon-
|
|
576
|
+
.awsui_icon-open_k5dlb_76ww4_576:not(#\9) {
|
|
575
577
|
transform: rotate(-180deg);
|
|
576
578
|
}
|
|
@@ -2,52 +2,52 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"top-navigation": "awsui_top-
|
|
6
|
-
"padding-box": "awsui_padding-
|
|
7
|
-
"medium": "
|
|
8
|
-
"narrow": "
|
|
9
|
-
"virtual": "
|
|
10
|
-
"hidden": "
|
|
11
|
-
"\t": "awsui_\
|
|
12
|
-
"identity": "
|
|
13
|
-
"identity-link": "awsui_identity-
|
|
14
|
-
"no-logo": "awsui_no-
|
|
15
|
-
"logo": "
|
|
16
|
-
"title": "
|
|
17
|
-
"inputs": "
|
|
18
|
-
"search": "
|
|
19
|
-
"search-expanded": "awsui_search-
|
|
20
|
-
"utilities": "
|
|
21
|
-
"utility-wrapper": "awsui_utility-
|
|
22
|
-
"utility-type-button-link": "awsui_utility-type-button-
|
|
23
|
-
"utility-type-menu-dropdown": "awsui_utility-type-menu-
|
|
24
|
-
"utility-type-button-primary-button": "awsui_utility-type-button-primary-
|
|
25
|
-
"utility-link-icon": "awsui_utility-link-
|
|
26
|
-
"utility-button-external-icon": "awsui_utility-button-external-
|
|
27
|
-
"offset-right-none": "awsui_offset-right-
|
|
28
|
-
"offset-right-l": "awsui_offset-right-
|
|
29
|
-
"offset-right-xxl": "awsui_offset-right-
|
|
30
|
-
"overflow-menu-drawer": "awsui_overflow-menu-
|
|
31
|
-
"overflow-menu": "awsui_overflow-
|
|
32
|
-
"overflow-menu-header": "awsui_overflow-menu-
|
|
33
|
-
"overflow-menu-header-text": "awsui_overflow-menu-header-
|
|
34
|
-
"overflow-menu-header-text--
|
|
35
|
-
"overflow-menu-header-text--
|
|
36
|
-
"overflow-menu-back-button": "awsui_overflow-menu-back-
|
|
37
|
-
"overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-
|
|
38
|
-
"overflow-menu-control": "awsui_overflow-menu-
|
|
39
|
-
"overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-
|
|
40
|
-
"overflow-menu-control-link": "awsui_overflow-menu-control-
|
|
41
|
-
"overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-
|
|
42
|
-
"overflow-menu-list": "awsui_overflow-menu-
|
|
43
|
-
"overflow-menu-list-submenu": "awsui_overflow-menu-list-
|
|
44
|
-
"overflow-menu-list-item": "awsui_overflow-menu-list-
|
|
45
|
-
"overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-
|
|
46
|
-
"overflow-menu-list-item-text": "awsui_overflow-menu-list-item-
|
|
47
|
-
"overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-
|
|
48
|
-
"overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-
|
|
49
|
-
"overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-
|
|
50
|
-
"icon": "
|
|
51
|
-
"icon-open": "awsui_icon-
|
|
5
|
+
"top-navigation": "awsui_top-navigation_k5dlb_76ww4_145",
|
|
6
|
+
"padding-box": "awsui_padding-box_k5dlb_76ww4_178",
|
|
7
|
+
"medium": "awsui_medium_k5dlb_76ww4_188",
|
|
8
|
+
"narrow": "awsui_narrow_k5dlb_76ww4_188",
|
|
9
|
+
"virtual": "awsui_virtual_k5dlb_76ww4_199",
|
|
10
|
+
"hidden": "awsui_hidden_k5dlb_76ww4_203",
|
|
11
|
+
"\t": "awsui_\t_k5dlb_76ww4_1",
|
|
12
|
+
"identity": "awsui_identity_k5dlb_76ww4_215",
|
|
13
|
+
"identity-link": "awsui_identity-link_k5dlb_76ww4_218",
|
|
14
|
+
"no-logo": "awsui_no-logo_k5dlb_76ww4_238",
|
|
15
|
+
"logo": "awsui_logo_k5dlb_76ww4_242",
|
|
16
|
+
"title": "awsui_title_k5dlb_76ww4_254",
|
|
17
|
+
"inputs": "awsui_inputs_k5dlb_76ww4_269",
|
|
18
|
+
"search": "awsui_search_k5dlb_76ww4_277",
|
|
19
|
+
"search-expanded": "awsui_search-expanded_k5dlb_76ww4_281",
|
|
20
|
+
"utilities": "awsui_utilities_k5dlb_76ww4_285",
|
|
21
|
+
"utility-wrapper": "awsui_utility-wrapper_k5dlb_76ww4_296",
|
|
22
|
+
"utility-type-button-link": "awsui_utility-type-button-link_k5dlb_76ww4_317",
|
|
23
|
+
"utility-type-menu-dropdown": "awsui_utility-type-menu-dropdown_k5dlb_76ww4_322",
|
|
24
|
+
"utility-type-button-primary-button": "awsui_utility-type-button-primary-button_k5dlb_76ww4_331",
|
|
25
|
+
"utility-link-icon": "awsui_utility-link-icon_k5dlb_76ww4_339",
|
|
26
|
+
"utility-button-external-icon": "awsui_utility-button-external-icon_k5dlb_76ww4_343",
|
|
27
|
+
"offset-right-none": "awsui_offset-right-none_k5dlb_76ww4_347",
|
|
28
|
+
"offset-right-l": "awsui_offset-right-l_k5dlb_76ww4_351",
|
|
29
|
+
"offset-right-xxl": "awsui_offset-right-xxl_k5dlb_76ww4_355",
|
|
30
|
+
"overflow-menu-drawer": "awsui_overflow-menu-drawer_k5dlb_76ww4_360",
|
|
31
|
+
"overflow-menu": "awsui_overflow-menu_k5dlb_76ww4_360",
|
|
32
|
+
"overflow-menu-header": "awsui_overflow-menu-header_k5dlb_76ww4_401",
|
|
33
|
+
"overflow-menu-header-text": "awsui_overflow-menu-header-text_k5dlb_76ww4_409",
|
|
34
|
+
"overflow-menu-header-text--title": "awsui_overflow-menu-header-text--title_k5dlb_76ww4_416",
|
|
35
|
+
"overflow-menu-header-text--secondary": "awsui_overflow-menu-header-text--secondary_k5dlb_76ww4_425",
|
|
36
|
+
"overflow-menu-back-button": "awsui_overflow-menu-back-button_k5dlb_76ww4_433",
|
|
37
|
+
"overflow-menu-dismiss-button": "awsui_overflow-menu-dismiss-button_k5dlb_76ww4_437",
|
|
38
|
+
"overflow-menu-control": "awsui_overflow-menu-control_k5dlb_76ww4_441",
|
|
39
|
+
"overflow-menu-list-item-utility": "awsui_overflow-menu-list-item-utility_k5dlb_76ww4_479",
|
|
40
|
+
"overflow-menu-control-link": "awsui_overflow-menu-control-link_k5dlb_76ww4_487",
|
|
41
|
+
"overflow-menu-control-expandable-menu-trigger": "awsui_overflow-menu-control-expandable-menu-trigger_k5dlb_76ww4_490",
|
|
42
|
+
"overflow-menu-list": "awsui_overflow-menu-list_k5dlb_76ww4_479",
|
|
43
|
+
"overflow-menu-list-submenu": "awsui_overflow-menu-list-submenu_k5dlb_76ww4_526",
|
|
44
|
+
"overflow-menu-list-item": "awsui_overflow-menu-list-item_k5dlb_76ww4_479",
|
|
45
|
+
"overflow-menu-list-item-icon": "awsui_overflow-menu-list-item-icon_k5dlb_76ww4_535",
|
|
46
|
+
"overflow-menu-list-item-text": "awsui_overflow-menu-list-item-text_k5dlb_76ww4_538",
|
|
47
|
+
"overflow-menu-list-item-submenu": "awsui_overflow-menu-list-item-submenu_k5dlb_76ww4_547",
|
|
48
|
+
"overflow-menu-list-item-dropdown-menu": "awsui_overflow-menu-list-item-dropdown-menu_k5dlb_76ww4_553",
|
|
49
|
+
"overflow-menu-list-item-expandable": "awsui_overflow-menu-list-item-expandable_k5dlb_76ww4_557",
|
|
50
|
+
"icon": "awsui_icon_k5dlb_76ww4_562",
|
|
51
|
+
"icon-open": "awsui_icon-open_k5dlb_76ww4_576"
|
|
52
52
|
};
|
|
53
53
|
|
|
@@ -50,7 +50,7 @@ function Tutorial({ tutorial, onStartTutorial: onStartTutorialEventHandler, i18n
|
|
|
50
50
|
React.createElement("div", { className: styles['tutorial-box-title'] },
|
|
51
51
|
React.createElement(InternalBox, { variant: "h3", fontSize: isRefresh ? 'heading-s' : 'heading-m', id: headerId, margin: { right: 'xs' }, padding: "n", className: styles.title }, tutorial.title),
|
|
52
52
|
React.createElement("div", { className: styles['button-wrapper'] },
|
|
53
|
-
React.createElement(InternalButton, { id: triggerControldId, variant: "icon", ariaExpanded: expanded,
|
|
53
|
+
React.createElement(InternalButton, { id: triggerControldId, variant: "icon", ariaExpanded: expanded, nativeButtonAttributes: {
|
|
54
54
|
'aria-controls': controlId,
|
|
55
55
|
'aria-labelledby': headerId,
|
|
56
56
|
}, formAction: "none", onClick: onClick, className: expanded ? styles['collapse-button'] : styles['expand-button'], iconName: expanded ? 'angle-up' : 'angle-down' }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,aAAa,MAAM,yBAAyB,CAAC;AAEpD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAC/D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAGzE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAO,GAAG,KAAK,EACf,eAAe,EACf,WAAW,GACO;IAClB,YAAY,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,OAAO,CACL;QACE,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;YAC5B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;gBAC5B,oBAAC,WAAW,IAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,IAChG,WAAW,CAAC,iBAAiB,CAClB;gBACd,oBAAC,WAAW,IAAC,OAAO,EAAC,GAAG,EAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAC,GAAG,IAC7D,WAAW,CAAC,uBAAuB,CACxB,CACO;YACvB,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;gBAC3B,WAAW,IAAI,CACd,2BACE,IAAI,EAAE,WAAW,EACjB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,gBACtB,WAAW,CAAC,6BAA6B;oBAErD,oBAAC,YAAY,IAAC,IAAI,EAAC,UAAU,GAAG;oBAChC,oBAAC,WAAW,IAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,IACrF,WAAW,CAAC,4BAA4B,CAC7B,CACZ,CACL;gBACA,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;oBACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,WAAW,CAAC,WAAW,CAAsB,CACzD,CAC3B,CAAC,CAAC,CAAC,CACF,4BAAI,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAC,MAAM,IAChD,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,GAAI,CACzG,CAAC,CACC,CACN,CACoB,CACF,CACtB,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,eAAe,EAAE,2BAA2B,EAC5C,WAAW,GAKZ;;IACC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAChC,MAAM,iBAAiB,GAAG,WAAW,EAAE,CAAC;IACxC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,sBAAsB,CAAC,2BAA2B,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,2BAA2B,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE/F,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,IAAI,EAAC,UAAU;QACpD,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC;gBAC1C,oBAAC,WAAW,IACV,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC/C,EAAE,EAAE,QAAQ,EACZ,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EACvB,OAAO,EAAC,GAAG,EACX,SAAS,EAAE,MAAM,CAAC,KAAK,IAEtB,QAAQ,CAAC,KAAK,CACH;gBACd,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;oBACtC,oBAAC,cAAc,IACb,EAAE,EAAE,iBAAiB,EACrB,OAAO,EAAC,MAAM,EACd,YAAY,EAAE,QAAQ,EACtB,kBAAkB,EAAE;4BAClB,eAAe,EAAE,SAAS;4BAC1B,iBAAiB,EAAE,QAAQ;yBAC5B,EACD,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,EACzE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAC9C,CACE,CACF;YAEL,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CACpB,oBAAC,uBAAuB,IAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,IACjG,WAAW,CAAC,qBAAqB,CACV,CAC3B,CAAC,CAAC,CAAC,IAAI,CACa;QAEvB,0CAAe,QAAQ;YACrB,oBAAC,aAAa,IAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE;gBACtF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,SAAS;oBAC5F,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;wBAC5B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;4BAC3B,QAAQ,CAAC,mBAAmB,IAAI,QAAQ,CAAC,kBAAkB,IAAI,CAC9D,oBAAC,aAAa,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAChE,QAAQ,CAAC,kBAAkB,CACd,CACjB;4BACD,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG;gCAC5B,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB;oCACtC,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,sBAAsB,CAAC,EAC9B,OAAO,QAAQ,CAAC,WAAW,KAAK,QAAQ,IAAI,MAAM,CAAC,gCAAgC,CAAC,CACrF,IAEA,QAAQ,CAAC,WAAW,CACjB,CACM;gCACb,QAAQ,CAAC,YAAY,IAAI,CACxB,oBAAC,YAAY,IACX,IAAI,EAAE,QAAQ,CAAC,YAAY,EAC3B,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,qBAAqB,EAAE,WAAW,CAAC,0BAA0B,EAC7D,SAAS,EAAE,WAAW,CAAC,kBAAkB,EACzC,QAAQ,EAAE,IAAI,EACd,OAAO,EAAC,SAAS,IAEhB,WAAW,CAAC,iBAAiB,CACjB,CAChB,CACoB,CACF;wBAEvB,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;4BACpC,oBAAC,cAAc,IACb,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,MAAA,QAAQ,CAAC,mBAAmB,mCAAI,KAAK,EAC/C,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,KAAK,IAEtB,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,yBAAyB,CAAC,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAClF,CACL,CACO,CACnB,CACQ,CACZ,CACH,CACN,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalAlert from '../../../alert/internal';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { TutorialPanelProps } from '../../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface TutorialListProps {\n loading?: boolean;\n tutorials: TutorialPanelProps['tutorials'];\n onStartTutorial: HotspotContext['onStartTutorial'];\n i18nStrings: TutorialPanelProps['i18nStrings'];\n downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n i18nStrings,\n tutorials,\n loading = false,\n onStartTutorial,\n downloadUrl,\n}: TutorialListProps) {\n checkSafeUrl('TutorialPanel', downloadUrl);\n\n const isRefresh = useVisualRefresh();\n\n return (\n <>\n <InternalSpaceBetween size=\"s\">\n <InternalSpaceBetween size=\"m\">\n <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n {i18nStrings.tutorialListTitle}\n </InternalBox>\n <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n {i18nStrings.tutorialListDescription}\n </InternalBox>\n </InternalSpaceBetween>\n <InternalSpaceBetween size=\"l\">\n {downloadUrl && (\n <a\n href={downloadUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles['download-link']}\n aria-label={i18nStrings.labelTutorialListDownloadLink}\n >\n <InternalIcon name=\"download\" />\n <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n {i18nStrings.tutorialListDownloadLinkText}\n </InternalBox>\n </a>\n )}\n {loading ? (\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{i18nStrings.loadingText}</InternalLiveRegion>\n </InternalStatusIndicator>\n ) : (\n <ul className={styles['tutorial-list']} role=\"list\">\n {tutorials.map((tutorial, index) => (\n <Tutorial tutorial={tutorial} key={index} onStartTutorial={onStartTutorial} i18nStrings={i18nStrings} />\n ))}\n </ul>\n )}\n </InternalSpaceBetween>\n </InternalSpaceBetween>\n </>\n );\n}\n\nfunction Tutorial({\n tutorial,\n onStartTutorial: onStartTutorialEventHandler,\n i18nStrings,\n}: {\n tutorial: TutorialPanelProps.Tutorial;\n onStartTutorial: HotspotContext['onStartTutorial'];\n i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n const controlId = useUniqueId();\n const triggerControldId = useUniqueId();\n const headerId = useUniqueId();\n\n const isRefresh = useVisualRefresh();\n\n const onStartTutorial = useCallback(() => {\n fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n }, [onStartTutorialEventHandler, tutorial]);\n\n const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n const onClick = useCallback(() => {\n setExpanded(expanded => !expanded);\n }, []);\n\n return (\n <li className={styles['tutorial-box']} role=\"listitem\">\n <InternalSpaceBetween size=\"xs\">\n <div className={styles['tutorial-box-title']}>\n <InternalBox\n variant=\"h3\"\n fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n id={headerId}\n margin={{ right: 'xs' }}\n padding=\"n\"\n className={styles.title}\n >\n {tutorial.title}\n </InternalBox>\n <div className={styles['button-wrapper']}>\n <InternalButton\n id={triggerControldId}\n variant=\"icon\"\n ariaExpanded={expanded}\n __nativeAttributes={{\n 'aria-controls': controlId,\n 'aria-labelledby': headerId,\n }}\n formAction=\"none\"\n onClick={onClick}\n className={expanded ? styles['collapse-button'] : styles['expand-button']}\n iconName={expanded ? 'angle-up' : 'angle-down'}\n />\n </div>\n </div>\n\n {tutorial.completed ? (\n <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n {i18nStrings.tutorialCompletedText}\n </InternalStatusIndicator>\n ) : null}\n </InternalSpaceBetween>\n\n <div aria-live=\"polite\">\n <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n <InternalSpaceBetween size=\"l\">\n <InternalSpaceBetween size=\"m\">\n {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n {tutorial.prerequisitesAlert}\n </InternalAlert>\n )}\n <InternalSpaceBetween size=\"s\">\n <InternalBox color=\"text-body-secondary\">\n <div\n className={clsx(\n styles['tutorial-description'],\n typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n )}\n >\n {tutorial.description}\n </div>\n </InternalBox>\n {tutorial.learnMoreUrl && (\n <InternalLink\n href={tutorial.learnMoreUrl}\n className={styles['learn-more-link']}\n externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n ariaLabel={i18nStrings.labelLearnMoreLink}\n external={true}\n variant=\"primary\"\n >\n {i18nStrings.learnMoreLinkText}\n </InternalLink>\n )}\n </InternalSpaceBetween>\n </InternalSpaceBetween>\n\n <InternalBox margin={{ bottom: 'xxs' }}>\n <InternalButton\n onClick={onStartTutorial}\n disabled={tutorial.prerequisitesNeeded ?? false}\n formAction=\"none\"\n className={styles.start}\n >\n {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n </InternalButton>\n </InternalBox>\n </InternalSpaceBetween>\n </div>\n </CSSTransition>\n </div>\n </li>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalAlert from '../../../alert/internal';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalIcon from '../../../icon/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { TutorialPanelProps } from '../../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface TutorialListProps {\n loading?: boolean;\n tutorials: TutorialPanelProps['tutorials'];\n onStartTutorial: HotspotContext['onStartTutorial'];\n i18nStrings: TutorialPanelProps['i18nStrings'];\n downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n i18nStrings,\n tutorials,\n loading = false,\n onStartTutorial,\n downloadUrl,\n}: TutorialListProps) {\n checkSafeUrl('TutorialPanel', downloadUrl);\n\n const isRefresh = useVisualRefresh();\n\n return (\n <>\n <InternalSpaceBetween size=\"s\">\n <InternalSpaceBetween size=\"m\">\n <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n {i18nStrings.tutorialListTitle}\n </InternalBox>\n <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n {i18nStrings.tutorialListDescription}\n </InternalBox>\n </InternalSpaceBetween>\n <InternalSpaceBetween size=\"l\">\n {downloadUrl && (\n <a\n href={downloadUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles['download-link']}\n aria-label={i18nStrings.labelTutorialListDownloadLink}\n >\n <InternalIcon name=\"download\" />\n <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n {i18nStrings.tutorialListDownloadLinkText}\n </InternalBox>\n </a>\n )}\n {loading ? (\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{i18nStrings.loadingText}</InternalLiveRegion>\n </InternalStatusIndicator>\n ) : (\n <ul className={styles['tutorial-list']} role=\"list\">\n {tutorials.map((tutorial, index) => (\n <Tutorial tutorial={tutorial} key={index} onStartTutorial={onStartTutorial} i18nStrings={i18nStrings} />\n ))}\n </ul>\n )}\n </InternalSpaceBetween>\n </InternalSpaceBetween>\n </>\n );\n}\n\nfunction Tutorial({\n tutorial,\n onStartTutorial: onStartTutorialEventHandler,\n i18nStrings,\n}: {\n tutorial: TutorialPanelProps.Tutorial;\n onStartTutorial: HotspotContext['onStartTutorial'];\n i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n const controlId = useUniqueId();\n const triggerControldId = useUniqueId();\n const headerId = useUniqueId();\n\n const isRefresh = useVisualRefresh();\n\n const onStartTutorial = useCallback(() => {\n fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n }, [onStartTutorialEventHandler, tutorial]);\n\n const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n const onClick = useCallback(() => {\n setExpanded(expanded => !expanded);\n }, []);\n\n return (\n <li className={styles['tutorial-box']} role=\"listitem\">\n <InternalSpaceBetween size=\"xs\">\n <div className={styles['tutorial-box-title']}>\n <InternalBox\n variant=\"h3\"\n fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n id={headerId}\n margin={{ right: 'xs' }}\n padding=\"n\"\n className={styles.title}\n >\n {tutorial.title}\n </InternalBox>\n <div className={styles['button-wrapper']}>\n <InternalButton\n id={triggerControldId}\n variant=\"icon\"\n ariaExpanded={expanded}\n nativeButtonAttributes={{\n 'aria-controls': controlId,\n 'aria-labelledby': headerId,\n }}\n formAction=\"none\"\n onClick={onClick}\n className={expanded ? styles['collapse-button'] : styles['expand-button']}\n iconName={expanded ? 'angle-up' : 'angle-down'}\n />\n </div>\n </div>\n\n {tutorial.completed ? (\n <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n {i18nStrings.tutorialCompletedText}\n </InternalStatusIndicator>\n ) : null}\n </InternalSpaceBetween>\n\n <div aria-live=\"polite\">\n <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n <InternalSpaceBetween size=\"l\">\n <InternalSpaceBetween size=\"m\">\n {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n {tutorial.prerequisitesAlert}\n </InternalAlert>\n )}\n <InternalSpaceBetween size=\"s\">\n <InternalBox color=\"text-body-secondary\">\n <div\n className={clsx(\n styles['tutorial-description'],\n typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n )}\n >\n {tutorial.description}\n </div>\n </InternalBox>\n {tutorial.learnMoreUrl && (\n <InternalLink\n href={tutorial.learnMoreUrl}\n className={styles['learn-more-link']}\n externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n ariaLabel={i18nStrings.labelLearnMoreLink}\n external={true}\n variant=\"primary\"\n >\n {i18nStrings.learnMoreLinkText}\n </InternalLink>\n )}\n </InternalSpaceBetween>\n </InternalSpaceBetween>\n\n <InternalBox margin={{ bottom: 'xxs' }}>\n <InternalButton\n onClick={onStartTutorial}\n disabled={tutorial.prerequisitesNeeded ?? false}\n formAction=\"none\"\n className={styles.start}\n >\n {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n </InternalButton>\n </InternalBox>\n </InternalSpaceBetween>\n </div>\n </CSSTransition>\n </div>\n </li>\n );\n}\n"]}
|