@lumx/react 3.1.5 → 3.2.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/_internal/types.d.ts +16 -5
  2. package/index.d.ts +45 -4
  3. package/index.js +632 -423
  4. package/index.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/components/alert-dialog/AlertDialog.stories.tsx +96 -165
  7. package/src/components/alert-dialog/AlertDialog.test.tsx +15 -23
  8. package/src/components/avatar/Avatar.stories.tsx +91 -62
  9. package/src/components/avatar/Avatar.test.tsx +9 -24
  10. package/src/components/badge/Badge.stories.tsx +63 -38
  11. package/src/components/button/Button.stories.tsx +147 -139
  12. package/src/components/button/IconButton.stories.tsx +45 -0
  13. package/src/components/checkbox/Checkbox.stories.tsx +37 -30
  14. package/src/components/chip/Chip.stories.tsx +77 -15
  15. package/src/components/comment-block/CommentBlock.stories.tsx +90 -25
  16. package/src/components/comment-block/CommentBlock.test.tsx +12 -17
  17. package/src/components/date-picker/DatePickerField.stories.tsx +52 -83
  18. package/src/components/dialog/Dialog.stories.tsx +131 -293
  19. package/src/components/dialog/Dialog.test.tsx +0 -32
  20. package/src/components/dropdown/Dropdown.stories.tsx +1 -186
  21. package/src/components/flag/Flag.stories.tsx +33 -18
  22. package/src/components/flag/Flag.test.tsx +1 -8
  23. package/src/components/flex-box/FlexBox.stories.tsx +151 -238
  24. package/src/components/flex-box/FlexBox.test.tsx +9 -49
  25. package/src/components/generic-block/GenericBlock.stories.jsx +1 -1
  26. package/src/components/grid-column/GridColumn.stories.tsx +46 -0
  27. package/src/components/heading/Heading.stories.tsx +57 -95
  28. package/src/components/icon/Icon.stories.tsx +67 -70
  29. package/src/components/image-block/ImageBlock.stories.tsx +103 -47
  30. package/src/components/image-block/ImageBlock.test.tsx +12 -17
  31. package/src/components/inline-list/InlineList.stories.tsx +45 -29
  32. package/src/components/input-helper/InputHelper.stories.tsx +31 -25
  33. package/src/components/input-label/InputLabel.stories.tsx +33 -10
  34. package/src/components/lightbox/Lightbox.stories.tsx +39 -77
  35. package/src/components/lightbox/Lightbox.test.tsx +12 -17
  36. package/src/components/link/Link.stories.tsx +98 -128
  37. package/src/components/link-preview/LinkPreview.stories.tsx +48 -75
  38. package/src/components/list/List.stories.tsx +59 -84
  39. package/src/components/list/List.test.tsx +8 -17
  40. package/src/components/list/ListDivider.stories.tsx +9 -4
  41. package/src/components/list/ListDivider.test.tsx +12 -17
  42. package/src/components/list/ListItem.stories.tsx +97 -59
  43. package/src/components/list/ListItem.test.tsx +12 -17
  44. package/src/components/list/ListSubheader.stories.tsx +8 -5
  45. package/src/components/list/ListSubheader.test.tsx +12 -18
  46. package/src/components/message/Message.stories.tsx +51 -22
  47. package/src/components/mosaic/Mosaic.stories.tsx +78 -74
  48. package/src/components/mosaic/Mosaic.test.tsx +0 -31
  49. package/src/components/navigation/Navigation.stories.tsx +67 -0
  50. package/src/components/navigation/Navigation.test.tsx +58 -0
  51. package/src/components/navigation/Navigation.tsx +62 -0
  52. package/src/components/navigation/NavigationItem.test.tsx +37 -0
  53. package/src/components/navigation/NavigationItem.tsx +89 -0
  54. package/src/components/navigation/NavigationSection.test.tsx +126 -0
  55. package/src/components/navigation/NavigationSection.tsx +109 -0
  56. package/src/components/navigation/context.tsx +6 -0
  57. package/src/components/navigation/index.ts +1 -0
  58. package/src/components/notification/Notifications.stories.tsx +52 -47
  59. package/src/components/popover/Popover.stories.tsx +68 -201
  60. package/src/components/popover/Popover.tsx +7 -9
  61. package/src/components/popover-dialog/PopoverDialog.stories.tsx +26 -65
  62. package/src/components/post-block/PostBlock.test.tsx +12 -17
  63. package/src/components/progress/ProgressCircular.stories.tsx +24 -12
  64. package/src/components/progress/ProgressLinear.stories.tsx +6 -2
  65. package/src/components/radio-button/RadioButton.stories.tsx +35 -24
  66. package/src/components/select/Select.stories.tsx +19 -23
  67. package/src/components/select/SelectMultiple.stories.tsx +105 -2
  68. package/src/components/select/WithSelectContext.tsx +10 -4
  69. package/src/components/skeleton/SkeletonCircle.stories.tsx +37 -21
  70. package/src/components/skeleton/SkeletonCircle.test.tsx +12 -17
  71. package/src/components/skeleton/SkeletonRectangle.stories.tsx +74 -99
  72. package/src/components/skeleton/SkeletonRectangle.test.tsx +12 -17
  73. package/src/components/skeleton/SkeletonTypography.test.tsx +12 -17
  74. package/src/components/slider/Slider.stories.tsx +41 -25
  75. package/src/components/slider/Slider.test.tsx +12 -18
  76. package/src/components/slideshow/Slideshow.stories.tsx +31 -61
  77. package/src/components/slideshow/Slideshow.test.tsx +15 -23
  78. package/src/components/slideshow/SlideshowControls.stories.tsx +4 -6
  79. package/src/components/switch/Switch.stories.tsx +35 -32
  80. package/src/components/table/Table.test.tsx +12 -17
  81. package/src/components/tabs/Tabs.stories.tsx +4 -3
  82. package/src/components/text/Text.stories.tsx +130 -0
  83. package/src/components/text-field/TextField.stories.tsx +114 -148
  84. package/src/components/thumbnail/Thumbnail.stories.tsx +106 -255
  85. package/src/components/thumbnail/Thumbnail.test.tsx +12 -35
  86. package/src/components/tooltip/Tooltip.stories.tsx +51 -136
  87. package/src/components/user-block/UserBlock.stories.tsx +67 -56
  88. package/src/components/user-block/UserBlock.test.tsx +1 -5
  89. package/src/hooks/useFocusTrap.ts +2 -2
  90. package/src/index.ts +1 -0
  91. package/src/stories/controls/color.ts +6 -0
  92. package/src/stories/controls/element.ts +6 -0
  93. package/src/stories/controls/focusPoint.ts +1 -0
  94. package/src/stories/controls/icons.ts +6 -0
  95. package/src/stories/{knobs → controls}/image.ts +6 -16
  96. package/src/stories/controls/selectArgType.ts +4 -0
  97. package/src/stories/controls/theme.ts +3 -0
  98. package/src/stories/controls/typography.ts +5 -0
  99. package/src/stories/controls/withUndefined.ts +1 -0
  100. package/src/stories/decorators/withChromaticForceScreenSize.tsx +8 -0
  101. package/src/stories/decorators/withCombinations.tsx +99 -0
  102. package/src/stories/decorators/withNestedProps.tsx +23 -0
  103. package/src/stories/{withResizableBox.tsx → decorators/withResizableBox.tsx} +6 -10
  104. package/src/stories/decorators/withValueOnChange.tsx +18 -0
  105. package/src/stories/decorators/withWrapper.tsx +19 -0
  106. package/src/stories/utils/CustomLink.tsx +8 -2
  107. package/src/stories/{knobs → utils}/lorem.ts +9 -9
  108. package/src/testing/utils/commonTestsSuiteRTL.ts +2 -3
  109. package/src/testing/utils/index.ts +0 -2
  110. package/src/untypped-modules.d.ts +0 -2
  111. package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +1 -1
  112. package/src/utils/ThemeContext.ts +4 -0
  113. package/src/utils/forwardRefPolymorphic.ts +9 -0
  114. package/src/utils/type.ts +28 -4
  115. package/src/components/alert-dialog/__snapshots__/AlertDialog.test.tsx.snap +0 -558
  116. package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +0 -681
  117. package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap +0 -92
  118. package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap +0 -1133
  119. package/src/components/expansion-panel/ExpansionPanel.stories.tsx +0 -65
  120. package/src/components/flag/__snapshots__/Flag.test.tsx.snap +0 -133
  121. package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap +0 -492
  122. package/src/components/grid-column/GridColumn.stories.jsx +0 -56
  123. package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap +0 -64
  124. package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap +0 -194
  125. package/src/components/list/__snapshots__/List.test.tsx.snap +0 -360
  126. package/src/components/list/__snapshots__/ListDivider.test.tsx.snap +0 -7
  127. package/src/components/list/__snapshots__/ListItem.test.tsx.snap +0 -160
  128. package/src/components/list/__snapshots__/ListSubheader.test.tsx.snap +0 -9
  129. package/src/components/mosaic/__snapshots__/Mosaic.test.tsx.snap +0 -357
  130. package/src/components/post-block/__snapshots__/PostBlock.test.tsx.snap +0 -139
  131. package/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap +0 -54
  132. package/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap +0 -177
  133. package/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap +0 -174
  134. package/src/components/slider/__snapshots__/Slider.test.tsx.snap +0 -122
  135. package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +0 -157
  136. package/src/components/table/__snapshots__/Table.test.tsx.snap +0 -263
  137. package/src/components/text/Text.stories.jsx +0 -75
  138. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +0 -130
  139. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +0 -362
  140. package/src/stories/chromaticForceScreenSize.tsx +0 -7
  141. package/src/stories/knobs/buttonKnob.ts +0 -9
  142. package/src/stories/knobs/emphasisKnob.ts +0 -8
  143. package/src/stories/knobs/enumKnob.ts +0 -14
  144. package/src/stories/knobs/focusKnob.ts +0 -3
  145. package/src/stories/knobs/sizeKnob.ts +0 -5
  146. package/src/stories/knobs/thumbnailsKnob.ts +0 -9
  147. package/src/testing/utils/itShouldRenderStories.tsx +0 -103
@@ -1,558 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`<AlertDialog> Snapshots and structure should render story 'Default' 1`] = `
4
- <Dialog
5
- className="lumx-alert-dialog lumx-alert-dialog--kind-info"
6
- dialogProps={
7
- {
8
- "aria-describedby": "uid-description",
9
- "aria-labelledby": "uid-title",
10
- "id": "uid",
11
- "role": "alertdialog",
12
- }
13
- }
14
- disableBodyScroll={true}
15
- focusElement={
16
- {
17
- "current": null,
18
- }
19
- }
20
- isOpen={true}
21
- onClose={[Function]}
22
- parentElement={
23
- {
24
- "current": undefined,
25
- }
26
- }
27
- size="tiny"
28
- >
29
- <header>
30
- <Toolbar
31
- before={
32
- <Icon
33
- color="blue"
34
- icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
35
- size="s"
36
- />
37
- }
38
- className="lumx-spacing-margin-horizontal"
39
- label={
40
- <h2
41
- className="lumx-typography-title"
42
- id="uid-title"
43
- >
44
- Default (info)
45
- </h2>
46
- }
47
- />
48
- </header>
49
- <p
50
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
51
- id="uid-description"
52
- >
53
- Consequat deserunt officia aute laborum tempor anim sint est.
54
- </p>
55
- <footer>
56
- <Toolbar
57
- after={
58
- <React.Fragment>
59
- <Button
60
- className="lumx-spacing-margin-left-regular"
61
- color="blue"
62
- emphasis="high"
63
- onClick={[Function]}
64
- size="m"
65
- theme="light"
66
- >
67
- Confirm
68
- </Button>
69
- </React.Fragment>
70
- }
71
- className="lumx-spacing-margin-horizontal"
72
- />
73
- </footer>
74
- </Dialog>
75
- `;
76
-
77
- exports[`<AlertDialog> Snapshots and structure should render story 'Error' 1`] = `
78
- <Dialog
79
- className="lumx-alert-dialog lumx-alert-dialog--kind-error"
80
- dialogProps={
81
- {
82
- "aria-describedby": "alert-dialog-description",
83
- "aria-labelledby": "alert-dialog-title",
84
- "id": "alert-dialog",
85
- "role": "alertdialog",
86
- }
87
- }
88
- disableBodyScroll={true}
89
- focusElement={
90
- {
91
- "current": null,
92
- }
93
- }
94
- isOpen={true}
95
- onClose={[Function]}
96
- parentElement={
97
- {
98
- "current": undefined,
99
- }
100
- }
101
- size="tiny"
102
- >
103
- <header>
104
- <Toolbar
105
- before={
106
- <Icon
107
- color="red"
108
- icon="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z"
109
- size="s"
110
- />
111
- }
112
- className="lumx-spacing-margin-horizontal"
113
- label={
114
- <h2
115
- className="lumx-typography-title"
116
- id="alert-dialog-title"
117
- >
118
- Error
119
- </h2>
120
- }
121
- />
122
- </header>
123
- <p
124
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
125
- id="alert-dialog-description"
126
- >
127
- Consequat deserunt officia aute laborum tempor anim sint est.
128
- </p>
129
- <footer>
130
- <Toolbar
131
- after={
132
- <React.Fragment>
133
- <Button
134
- className="lumx-spacing-margin-left-regular"
135
- color="red"
136
- emphasis="high"
137
- onClick={[Function]}
138
- size="m"
139
- theme="light"
140
- >
141
- OK
142
- </Button>
143
- </React.Fragment>
144
- }
145
- className="lumx-spacing-margin-horizontal"
146
- />
147
- </footer>
148
- </Dialog>
149
- `;
150
-
151
- exports[`<AlertDialog> Snapshots and structure should render story 'RichDescription' 1`] = `
152
- <Dialog
153
- className="lumx-alert-dialog lumx-alert-dialog--kind-info"
154
- dialogProps={
155
- {
156
- "aria-describedby": "alert-dialog-description",
157
- "aria-labelledby": "alert-dialog-title",
158
- "id": "alert-dialog",
159
- "role": "alertdialog",
160
- }
161
- }
162
- disableBodyScroll={true}
163
- focusElement={
164
- {
165
- "current": null,
166
- }
167
- }
168
- isOpen={true}
169
- onClose={[Function]}
170
- parentElement={
171
- {
172
- "current": undefined,
173
- }
174
- }
175
- size="tiny"
176
- >
177
- <header>
178
- <Toolbar
179
- before={
180
- <Icon
181
- color="blue"
182
- icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
183
- size="s"
184
- />
185
- }
186
- className="lumx-spacing-margin-horizontal"
187
- label={
188
- <h2
189
- className="lumx-typography-title"
190
- id="alert-dialog-title"
191
- >
192
- With Rich Description
193
- </h2>
194
- }
195
- />
196
- </header>
197
- <div
198
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
199
- id="alert-dialog-description"
200
- >
201
- Amet ut elit dolore irure mollit
202
- <strong>
203
- sunt culpa esse
204
- </strong>
205
- .
206
- <br />
207
- Ea ut Lorem.
208
- <br />
209
- <Link
210
- href="https://example.com"
211
- target="_blank"
212
- >
213
- Link
214
- </Link>
215
- </div>
216
- <footer>
217
- <Toolbar
218
- after={
219
- <React.Fragment>
220
- <Button
221
- className="lumx-spacing-margin-left-regular"
222
- color="blue"
223
- emphasis="high"
224
- onClick={[Function]}
225
- size="m"
226
- theme="light"
227
- >
228
- OK
229
- </Button>
230
- </React.Fragment>
231
- }
232
- className="lumx-spacing-margin-horizontal"
233
- />
234
- </footer>
235
- </Dialog>
236
- `;
237
-
238
- exports[`<AlertDialog> Snapshots and structure should render story 'Success' 1`] = `
239
- <Dialog
240
- className="lumx-alert-dialog lumx-alert-dialog--kind-success"
241
- dialogProps={
242
- {
243
- "aria-describedby": "alert-dialog-description",
244
- "aria-labelledby": "alert-dialog-title",
245
- "id": "alert-dialog",
246
- "role": "alertdialog",
247
- }
248
- }
249
- disableBodyScroll={true}
250
- focusElement={
251
- {
252
- "current": null,
253
- }
254
- }
255
- isOpen={true}
256
- onClose={[Function]}
257
- parentElement={
258
- {
259
- "current": undefined,
260
- }
261
- }
262
- size="tiny"
263
- >
264
- <header>
265
- <Toolbar
266
- before={
267
- <Icon
268
- color="green"
269
- icon="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
270
- size="s"
271
- />
272
- }
273
- className="lumx-spacing-margin-horizontal"
274
- label={
275
- <h2
276
- className="lumx-typography-title"
277
- id="alert-dialog-title"
278
- >
279
- Success
280
- </h2>
281
- }
282
- />
283
- </header>
284
- <p
285
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
286
- id="alert-dialog-description"
287
- >
288
- Consequat deserunt officia aute laborum tempor anim sint est.
289
- </p>
290
- <footer>
291
- <Toolbar
292
- after={
293
- <React.Fragment>
294
- <Button
295
- className="lumx-spacing-margin-left-regular"
296
- color="green"
297
- emphasis="high"
298
- onClick={[Function]}
299
- size="m"
300
- theme="light"
301
- >
302
- OK
303
- </Button>
304
- </React.Fragment>
305
- }
306
- className="lumx-spacing-margin-horizontal"
307
- />
308
- </footer>
309
- </Dialog>
310
- `;
311
-
312
- exports[`<AlertDialog> Snapshots and structure should render story 'Warning' 1`] = `
313
- <Dialog
314
- className="lumx-alert-dialog lumx-alert-dialog--kind-warning"
315
- dialogProps={
316
- {
317
- "aria-describedby": "alert-dialog-description",
318
- "aria-labelledby": "alert-dialog-title",
319
- "id": "alert-dialog",
320
- "role": "alertdialog",
321
- }
322
- }
323
- disableBodyScroll={true}
324
- focusElement={
325
- {
326
- "current": null,
327
- }
328
- }
329
- isOpen={true}
330
- onClose={[Function]}
331
- parentElement={
332
- {
333
- "current": undefined,
334
- }
335
- }
336
- size="tiny"
337
- >
338
- <header>
339
- <Toolbar
340
- before={
341
- <Icon
342
- color="yellow"
343
- icon="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
344
- size="s"
345
- />
346
- }
347
- className="lumx-spacing-margin-horizontal"
348
- label={
349
- <h2
350
- className="lumx-typography-title"
351
- id="alert-dialog-title"
352
- >
353
- Warning
354
- </h2>
355
- }
356
- />
357
- </header>
358
- <p
359
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
360
- id="alert-dialog-description"
361
- >
362
- Consequat deserunt officia aute laborum tempor anim sint est.
363
- </p>
364
- <footer>
365
- <Toolbar
366
- after={
367
- <React.Fragment>
368
- <Button
369
- className="lumx-spacing-margin-left-regular"
370
- color="yellow"
371
- emphasis="high"
372
- onClick={[Function]}
373
- size="m"
374
- theme="light"
375
- >
376
- OK
377
- </Button>
378
- </React.Fragment>
379
- }
380
- className="lumx-spacing-margin-horizontal"
381
- />
382
- </footer>
383
- </Dialog>
384
- `;
385
-
386
- exports[`<AlertDialog> Snapshots and structure should render story 'WithCancel' 1`] = `
387
- <Dialog
388
- className="lumx-alert-dialog lumx-alert-dialog--kind-info"
389
- dialogProps={
390
- {
391
- "aria-describedby": "alert-dialog-description",
392
- "aria-labelledby": "alert-dialog-title",
393
- "id": "alert-dialog",
394
- "role": "alertdialog",
395
- }
396
- }
397
- disableBodyScroll={true}
398
- focusElement={
399
- {
400
- "current": null,
401
- }
402
- }
403
- isOpen={true}
404
- onClose={[Function]}
405
- parentElement={
406
- {
407
- "current": undefined,
408
- }
409
- }
410
- size="tiny"
411
- >
412
- <header>
413
- <Toolbar
414
- before={
415
- <Icon
416
- color="blue"
417
- icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
418
- size="s"
419
- />
420
- }
421
- className="lumx-spacing-margin-horizontal"
422
- label={
423
- <h2
424
- className="lumx-typography-title"
425
- id="alert-dialog-title"
426
- >
427
- With Cancel
428
- </h2>
429
- }
430
- />
431
- </header>
432
- <p
433
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
434
- id="alert-dialog-description"
435
- >
436
- Consequat deserunt officia aute laborum tempor anim sint est.
437
- </p>
438
- <footer>
439
- <Toolbar
440
- after={
441
- <React.Fragment>
442
- <Button
443
- emphasis="medium"
444
- onClick={[Function]}
445
- size="m"
446
- theme="light"
447
- >
448
- Cancel
449
- </Button>
450
- <Button
451
- className="lumx-spacing-margin-left-regular"
452
- color="blue"
453
- emphasis="high"
454
- onClick={[Function]}
455
- size="m"
456
- theme="light"
457
- >
458
- OK
459
- </Button>
460
- </React.Fragment>
461
- }
462
- className="lumx-spacing-margin-horizontal"
463
- />
464
- </footer>
465
- </Dialog>
466
- `;
467
-
468
- exports[`<AlertDialog> Snapshots and structure should render story 'WithForwardedProps' 1`] = `
469
- <Dialog
470
- className="lumx-alert-dialog lumx-alert-dialog--kind-info"
471
- dialogProps={
472
- {
473
- "aria-describedby": "alert-dialog-description",
474
- "aria-labelledby": "alert-dialog-title",
475
- "id": "alert-dialog",
476
- "role": "alertdialog",
477
- }
478
- }
479
- disableBodyScroll={true}
480
- focusElement={
481
- {
482
- "current": null,
483
- }
484
- }
485
- isOpen={true}
486
- onClose={[Function]}
487
- parentElement={
488
- {
489
- "current": undefined,
490
- }
491
- }
492
- size="tiny"
493
- >
494
- <header>
495
- <Toolbar
496
- before={
497
- <Icon
498
- color="blue"
499
- icon="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
500
- size="s"
501
- />
502
- }
503
- className="lumx-spacing-margin-horizontal"
504
- label={
505
- <h2
506
- className="lumx-typography-title"
507
- id="alert-dialog-title"
508
- >
509
- With Forwarded Props
510
- </h2>
511
- }
512
- />
513
- </header>
514
- <p
515
- className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
516
- id="alert-dialog-description"
517
- >
518
- Consequat deserunt officia aute laborum tempor anim sint est.
519
- </p>
520
- <footer>
521
- <Toolbar
522
- after={
523
- <React.Fragment>
524
- <Button
525
- emphasis="medium"
526
- onClick={[Function]}
527
- size="m"
528
- style={
529
- {
530
- "color": "blue",
531
- }
532
- }
533
- theme="light"
534
- >
535
- Cancel
536
- </Button>
537
- <Button
538
- className="lumx-spacing-margin-left-regular"
539
- color="blue"
540
- emphasis="high"
541
- onClick={[Function]}
542
- size="m"
543
- style={
544
- {
545
- "color": "red",
546
- }
547
- }
548
- theme="light"
549
- >
550
- OK
551
- </Button>
552
- </React.Fragment>
553
- }
554
- className="lumx-spacing-margin-horizontal"
555
- />
556
- </footer>
557
- </Dialog>
558
- `;