@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.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 (161) hide show
  1. package/Accordion/Accordion.d.ts +1 -1
  2. package/Accordion/Accordion.mdx +437 -463
  3. package/Accordion/components/AccordionContent.js.map +1 -1
  4. package/Alert/Alert.d.ts +1 -1
  5. package/Alert/Alert.js.map +1 -1
  6. package/Alert/Alert.mdx +80 -83
  7. package/AutoComplete/AutoComplete.mdx +63 -55
  8. package/Avatar/Avatar.d.ts +1 -1
  9. package/Avatar/Avatar.js.map +1 -1
  10. package/Avatar/Avatar.mdx +52 -43
  11. package/Button/Button.d.ts +1 -1
  12. package/Button/Button.js.map +1 -1
  13. package/Button/Button.mdx +50 -42
  14. package/Button/IconButton.d.ts +1 -1
  15. package/Button/IconButton.js.map +1 -1
  16. package/Card/components/CardContent.d.ts +1 -1
  17. package/Card/components/CardTitle.d.ts +1 -1
  18. package/Checkbox/Checkbox.mdx +51 -49
  19. package/Checkbox/primitives/CheckboxPrimitive.d.ts +1 -1
  20. package/CheckboxGroup/CheckboxGroup.mdx +51 -53
  21. package/CodeEditor/CodeEditor.mdx +44 -43
  22. package/ColorPicker/ColorPicker.mdx +41 -40
  23. package/Command/components/Item.d.ts +1 -1
  24. package/Command/components/Item.js.map +1 -1
  25. package/DataTable/DataTable.mdx +537 -542
  26. package/DataTable/components/ColumnSorter.d.ts +1 -1
  27. package/DataTable/components/ColumnSorter.js.map +1 -1
  28. package/Dialog/Dialog.js.map +1 -1
  29. package/Dialog/components/DialogContent.d.ts +1 -1
  30. package/Dialog/components/DialogContent.js +1 -1
  31. package/Dialog/components/DialogContent.js.map +1 -1
  32. package/Dialog/components/DialogFooter.d.ts +1 -1
  33. package/Dialog/components/DialogFooter.js.map +1 -1
  34. package/Dialog/components/DialogTitle.d.ts +1 -1
  35. package/Drawer/Drawer.js.map +1 -1
  36. package/Drawer/Drawer.mdx +73 -64
  37. package/Drawer/components/DrawerContent.d.ts +1 -1
  38. package/Drawer/components/DrawerContent.js.map +1 -1
  39. package/DropdownMenu/DropdownMenu.js.map +1 -1
  40. package/DropdownMenu/DropdownMenu.mdx +155 -256
  41. package/DropdownMenu/components/DropdownMenuCheckboxItem.js.map +1 -1
  42. package/DropdownMenu/components/DropdownMenuLabel.js.map +1 -1
  43. package/FilePicker/FilePicker.mdx +69 -69
  44. package/FilePicker/primitives/FilePickerPrimitive.d.ts +19 -19
  45. package/FilePicker/primitives/FilePickerPrimitive.js.map +1 -1
  46. package/FilePicker/primitives/components/Trigger.d.ts +1 -1
  47. package/FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview.d.ts +1 -1
  48. package/FilePicker/primitives/components/previews/variants.d.ts +1 -1
  49. package/FilePicker/primitives/components/types.js.map +1 -1
  50. package/FormComponent/Description.d.ts +1 -1
  51. package/FormComponent/ErrorMessage.d.ts +1 -1
  52. package/FormComponent/Note.d.ts +1 -1
  53. package/Grid/Grid.d.ts +2 -2
  54. package/Grid/Grid.js.map +1 -1
  55. package/Grid/Grid.mdx +111 -121
  56. package/HeaderBar/HeaderBar.mdx +98 -99
  57. package/Heading/Heading.d.ts +1 -1
  58. package/Heading/Heading.js.map +1 -1
  59. package/Heading/Heading.mdx +63 -58
  60. package/Icon/Icon.d.ts +1 -1
  61. package/Icon/Icon.js.map +1 -1
  62. package/Icon/Icon.mdx +79 -147
  63. package/IconPicker/IconPicker.mdx +66 -64
  64. package/IconPicker/primitives/IconPickerPrimitive.d.ts +1 -1
  65. package/IconPicker/primitives/components/IconPickerTrigger.d.ts +1 -1
  66. package/Image/Image.js.map +1 -1
  67. package/Input/Input.mdx +67 -56
  68. package/Input/InputPrimitive.d.ts +1 -1
  69. package/Label/Label.d.ts +1 -1
  70. package/Label/Label.js.map +1 -1
  71. package/Label/Label.mdx +42 -42
  72. package/Label/components/LabelDescription.d.ts +1 -1
  73. package/Label/components/LabelRequired.d.ts +1 -1
  74. package/Label/components/LabelValue.d.ts +1 -1
  75. package/Link/Link.d.ts +1 -1
  76. package/Link/Link.mdx +129 -116
  77. package/List/List.d.ts +1 -1
  78. package/List/List.js.map +1 -1
  79. package/List/List.mdx +317 -329
  80. package/List/components/ListItem.d.ts +1 -1
  81. package/List/components/ListItem.js.map +1 -1
  82. package/Loader/Loader.d.ts +2 -2
  83. package/Loader/Loader.js.map +1 -1
  84. package/Loader/Loader.mdx +96 -91
  85. package/MultiAutoComplete/MultiAutoComplete.mdx +52 -51
  86. package/MultiAutoComplete/primitives/components/MultiAutoCompleteInput.d.ts +1 -1
  87. package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenter.js.map +1 -1
  88. package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteListOptionsPresenterWithUniqueValues.js.map +1 -1
  89. package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteSelectedOptionsPresenter.js.map +1 -1
  90. package/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.js.map +1 -1
  91. package/MultiFilePicker/MultiFilePicker.mdx +84 -80
  92. package/MultiFilePicker/primitives/MultiFilePickerPrimitive.js.map +1 -1
  93. package/Popover/Popover.mdx +112 -118
  94. package/Popover/primitives/components/PopoverArrow.d.ts +1 -1
  95. package/Popover/primitives/components/PopoverContent.d.ts +1 -1
  96. package/RadioGroup/RadioGroup.mdx +62 -59
  97. package/RadioGroup/primitives/RadioGroupPrimitive.js.map +1 -1
  98. package/RangeSlider/RangeSlider.mdx +48 -47
  99. package/RangeSlider/primitives/RangeSliderPrimitive.js.map +1 -1
  100. package/RangeSlider/primitives/components/RangeSliderValue.d.ts +1 -1
  101. package/RangeSlider/primitives/components/RangeSliderValue.js.map +1 -1
  102. package/ScrollArea/ScrollArea.js.map +1 -1
  103. package/SegmentedControl/SegmentedControl.mdx +59 -59
  104. package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts +1 -1
  105. package/SegmentedControl/primitives/SegmentedControlPrimitive.js.map +1 -1
  106. package/Select/Select.mdx +52 -43
  107. package/Select/primitives/components/SelectTrigger.d.ts +1 -1
  108. package/Select/primitives/components/SelectTrigger.js.map +1 -1
  109. package/Select/primitives/presenters/SelectPresenter.d.ts +1 -1
  110. package/Separator/Separator.d.ts +1 -1
  111. package/Separator/Separator.mdx +139 -150
  112. package/Sidebar/Sidebar.js.map +1 -1
  113. package/Sidebar/Sidebar.mdx +66 -88
  114. package/Sidebar/components/items/SidebarMenuSubItemIndentation.d.ts +1 -1
  115. package/Sidebar/components/items/SidebarMenuSubItemIndentation.js.map +1 -1
  116. package/Skeleton/Skeleton.d.ts +1 -1
  117. package/Skeleton/Skeleton.js.map +1 -1
  118. package/Skeleton/Skeleton.mdx +37 -37
  119. package/Slider/Slider.mdx +48 -47
  120. package/Slider/primitives/SliderPrimitive.js.map +1 -1
  121. package/Slider/primitives/components/SliderSideValue.d.ts +1 -1
  122. package/Slider/primitives/components/SliderSideValue.js.map +1 -1
  123. package/Slider/primitives/components/SliderTooltip.d.ts +1 -1
  124. package/SteppedProgress/components/SteppedProgressIcon.d.ts +1 -1
  125. package/SteppedProgress/components/SteppedProgressIcon.js.map +1 -1
  126. package/SteppedProgress/components/SteppedProgressIndicator.d.ts +1 -1
  127. package/SteppedProgress/components/SteppedProgressIndicator.js.map +1 -1
  128. package/Switch/Switch.mdx +44 -42
  129. package/Switch/primitives/SwitchPrimitive.d.ts +1 -1
  130. package/Table/Table.d.ts +1 -1
  131. package/Table/Table.js.map +1 -1
  132. package/Table/components/Direction.d.ts +1 -1
  133. package/Table/components/Direction.js.map +1 -1
  134. package/Table/components/Header.d.ts +1 -1
  135. package/Table/components/Header.js.map +1 -1
  136. package/Table/components/Resizer.d.ts +1 -1
  137. package/Table/components/Resizer.js.map +1 -1
  138. package/Table/components/Row.d.ts +1 -1
  139. package/Table/components/Row.js.map +1 -1
  140. package/Tabs/Tabs.mdx +297 -292
  141. package/Tabs/components/Content.d.ts +1 -1
  142. package/Tabs/components/List.d.ts +1 -1
  143. package/Tabs/components/Trigger.d.ts +1 -1
  144. package/Tag/Tag.d.ts +1 -1
  145. package/Tag/Tag.js.map +1 -1
  146. package/Tag/Tag.mdx +68 -64
  147. package/Tags/primitives/TagsPrimitive.js.map +1 -1
  148. package/Text/Text.d.ts +1 -1
  149. package/Text/Text.mdx +54 -48
  150. package/Textarea/Textarea.mdx +49 -39
  151. package/Textarea/TextareaPrimitive.d.ts +1 -1
  152. package/Textarea/TextareaPrimitive.js.map +1 -1
  153. package/Toast/Toast.mdx +63 -53
  154. package/Toast/components/ToastRoot.d.ts +1 -1
  155. package/Tooltip/Tooltip.mdx +197 -198
  156. package/Tooltip/components/TooltipArrow.d.ts +1 -1
  157. package/Tooltip/components/TooltipContent.d.ts +1 -1
  158. package/Tree/components/Item.d.ts +1 -1
  159. package/Tree/useTree.d.ts +1 -1
  160. package/Widget/components/WidgetContent.d.ts +1 -1
  161. package/package.json +15 -15
package/Accordion/Accordion.mdx CHANGED
@@ -1,6 +1,6 @@
1
- import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
1
+ import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
2
2
 
3
- import * as AccordionStories from './Accordion.stories';
3
+ import * as AccordionStories from "./Accordion.stories";
4
4
 
5
5
  <Meta of={AccordionStories} />
6
6
 
@@ -18,21 +18,21 @@ import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
18
18
  import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
19
19
 
20
20
  const AccordionExample = () => {
21
- return (
22
- <Accordion variant="underline" background="base">
23
- <Accordion.Item
24
- title="Accordion Item 1"
25
- description="This is a description for the first item"
26
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
27
- actions={
28
- <>
29
- <Accordion.Item.Action icon={<EditIcon />} />
30
- <Accordion.Item.Action icon={<TrashIcon />} />
31
- </>
32
- }
33
- >
34
- This is the content for the first accordion item. It can contain any React elements.
35
- </Accordion.Item>
21
+ return (
22
+
23
+ <Accordion variant="underline" background="base">
24
+ <Accordion.Item
25
+ title="Accordion Item 1"
26
+ description="This is a description for the first item"
27
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
28
+ actions={
29
+ <>
30
+ <Accordion.Item.Action icon={<EditIcon />} />
31
+ <Accordion.Item.Action icon={<TrashIcon />} />
32
+ </>
33
+ } >
34
+ This is the content for the first accordion item. It can contain any React elements.
35
+ </Accordion.Item>
36
36
 
37
37
  <Accordion.Item
38
38
  title="Accordion Item 2"
@@ -51,22 +51,23 @@ const AccordionExample = () => {
51
51
  </Accordion.Item>
52
52
  </Accordion>
53
53
  );
54
+
54
55
  };
55
56
 
56
57
  export default AccordionExample;
57
58
 
58
59
  ` } }
59
- additionalActions={[
60
- {
61
- title: 'Open in GitHub',
62
- onClick: () => {
63
- window.open(
64
- 'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Accordion/Accordion.tsx',
65
- '_blank'
66
- );
67
- },
68
- }
69
- ]}
60
+ additionalActions={[
61
+ {
62
+ title: 'Open in GitHub',
63
+ onClick: () => {
64
+ window.open(
65
+ 'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Accordion/Accordion.tsx',
66
+ '_blank'
67
+ );
68
+ },
69
+ }
70
+ ]}
70
71
  />
71
72
 
72
73
  <Controls of={AccordionStories.Documentation} />
@@ -79,39 +80,39 @@ import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
79
80
  import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
80
81
 
81
82
  const AccordionExample = () => {
82
- return (
83
- <Accordion variant="underline" background="base">
84
- <Accordion.Item
85
- title="Accordion Item 1"
86
- description="This is a description for the first item"
87
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
88
- actions={
89
- <>
90
- <Accordion.Item.Action icon={<EditIcon />} />
91
- <Accordion.Item.Action icon={<TrashIcon />} />
92
- </>
93
- }
94
- >
95
- This is the content for the first accordion item. It can contain any React elements.
96
- </Accordion.Item>
97
-
98
- <Accordion.Item
99
- title="Accordion Item 2"
100
- description="This is a description for the second item"
101
- defaultOpen={true}
102
- >
103
- This is the content for the second accordion item. It&apos;s open by default.
104
- </Accordion.Item>
105
-
106
- <Accordion.Item
107
- title="Disabled Item"
108
- description="This item cannot be interacted with"
109
- disabled={true}
110
- >
111
- This content won&apos;t be visible because the item is disabled.
112
- </Accordion.Item>
113
- </Accordion>
114
- );
83
+ return (
84
+ <Accordion variant="underline" background="base">
85
+ <Accordion.Item
86
+ title="Accordion Item 1"
87
+ description="This is a description for the first item"
88
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
89
+ actions={
90
+ <>
91
+ <Accordion.Item.Action icon={<EditIcon />} />
92
+ <Accordion.Item.Action icon={<TrashIcon />} />
93
+ </>
94
+ }
95
+ >
96
+ This is the content for the first accordion item. It can contain any React elements.
97
+ </Accordion.Item>
98
+
99
+ <Accordion.Item
100
+ title="Accordion Item 2"
101
+ description="This is a description for the second item"
102
+ defaultOpen={true}
103
+ >
104
+ This is the content for the second accordion item. It&apos;s open by default.
105
+ </Accordion.Item>
106
+
107
+ <Accordion.Item
108
+ title="Disabled Item"
109
+ description="This item cannot be interacted with"
110
+ disabled={true}
111
+ >
112
+ This content won&apos;t be visible because the item is disabled.
113
+ </Accordion.Item>
114
+ </Accordion>
115
+ );
115
116
  };
116
117
 
117
118
  export default AccordionExample;
@@ -126,26 +127,26 @@ import React from "react";
126
127
  import { Accordion } from "@webiny/admin-ui";
127
128
 
128
129
  const DefaultAccordionExample = () => {
129
- return (
130
- <Accordion>
131
- <Accordion.Item title="Accordion item 1">
132
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
133
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
134
- sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
135
- </Accordion.Item>
136
- <Accordion.Item title="Accordion item 2">
137
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
138
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
139
- sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
140
- </Accordion.Item>
141
- <Accordion.Item title="Accordion item 3">
142
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
143
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio
144
- sed consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
145
- </Accordion.Item>
146
- </Accordion>
147
- );
148
- };
130
+ return (
131
+
132
+ <Accordion>
133
+ <Accordion.Item title="Accordion item 1">
134
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
135
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed
136
+ consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
137
+ </Accordion.Item>
138
+ <Accordion.Item title="Accordion item 2">
139
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
140
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed
141
+ consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
142
+ </Accordion.Item>
143
+ <Accordion.Item title="Accordion item 3">
144
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
145
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus. Etiam venenatis, odio sed
146
+ consectetur consectetur, quam quam blandit ante, semper maximus lorem est vel dolor.
147
+ </Accordion.Item>
148
+ </Accordion>
149
+ ); };
149
150
 
150
151
  export default DefaultAccordionExample;
151
152
  ` } } />
@@ -157,32 +158,32 @@ import React from "react";
157
158
  import { Accordion } from "@webiny/admin-ui";
158
159
 
159
160
  const WithDescriptionsExample = () => {
160
- return (
161
- <Accordion>
162
- <Accordion.Item
163
- title="Accordion item 1"
164
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
165
- >
166
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
167
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
168
- </Accordion.Item>
169
- <Accordion.Item
170
- title="Accordion item 2"
171
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
172
- >
173
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
174
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
175
- </Accordion.Item>
176
- <Accordion.Item
177
- title="Accordion item 3"
178
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
179
- >
180
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
181
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
182
- </Accordion.Item>
183
- </Accordion>
184
- );
185
- };
161
+ return (
162
+
163
+ <Accordion>
164
+ <Accordion.Item
165
+ title="Accordion item 1"
166
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
167
+ >
168
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
169
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
170
+ </Accordion.Item>
171
+ <Accordion.Item
172
+ title="Accordion item 2"
173
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
174
+ >
175
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
176
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
177
+ </Accordion.Item>
178
+ <Accordion.Item
179
+ title="Accordion item 3"
180
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
181
+ >
182
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
183
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
184
+ </Accordion.Item>
185
+ </Accordion>
186
+ ); };
186
187
 
187
188
  export default WithDescriptionsExample;
188
189
  ` } } />
@@ -195,27 +196,27 @@ import { Accordion } from "@webiny/admin-ui";
195
196
  import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
196
197
 
197
198
  const WithIconExample = () => {
198
- return (
199
- <Accordion>
200
- <Accordion.Item
201
- title="Accordion item 1"
202
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
203
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
204
- >
205
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
206
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
207
- </Accordion.Item>
208
- <Accordion.Item
209
- title="Accordion item 2"
210
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
211
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
212
- >
213
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
214
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
215
- </Accordion.Item>
216
- </Accordion>
217
- );
218
- };
199
+ return (
200
+
201
+ <Accordion>
202
+ <Accordion.Item
203
+ title="Accordion item 1"
204
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
205
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
206
+ >
207
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
208
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
209
+ </Accordion.Item>
210
+ <Accordion.Item
211
+ title="Accordion item 2"
212
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
213
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
214
+ >
215
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
216
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
217
+ </Accordion.Item>
218
+ </Accordion>
219
+ ); };
219
220
 
220
221
  export default WithIconExample;
221
222
  ` } } />
@@ -232,45 +233,45 @@ import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
232
233
  import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
233
234
 
234
235
  const WithActionsExample = () => {
235
- return (
236
- <Accordion>
237
- <Accordion.Item
238
- title="Accordion item 1"
239
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
240
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
241
- actions={
242
- <>
243
- <Accordion.Item.Action icon={<ArrowUp />} />
244
- <Accordion.Item.Action icon={<ArrowDown />} />
245
- <Accordion.Item.Action.Separator />
246
- <Accordion.Item.Action icon={<EditIcon />} />
247
- <Accordion.Item.Action icon={<TrashIcon />} />
248
- </>
249
- }
250
- >
251
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
252
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
253
- </Accordion.Item>
254
- <Accordion.Item
255
- title="Accordion item 2"
256
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
257
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
258
- actions={
259
- <>
260
- <Accordion.Item.Action icon={<ArrowUp />} />
261
- <Accordion.Item.Action icon={<ArrowDown />} />
262
- <Accordion.Item.Action.Separator />
263
- <Accordion.Item.Action icon={<EditIcon />} />
264
- <Accordion.Item.Action icon={<TrashIcon />} />
265
- </>
266
- }
267
- >
268
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
269
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
270
- </Accordion.Item>
271
- </Accordion>
272
- );
273
- };
236
+ return (
237
+
238
+ <Accordion>
239
+ <Accordion.Item
240
+ title="Accordion item 1"
241
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
242
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
243
+ actions={
244
+ <>
245
+ <Accordion.Item.Action icon={<ArrowUp />} />
246
+ <Accordion.Item.Action icon={<ArrowDown />} />
247
+ <Accordion.Item.Action.Separator />
248
+ <Accordion.Item.Action icon={<EditIcon />} />
249
+ <Accordion.Item.Action icon={<TrashIcon />} />
250
+ </>
251
+ }
252
+ >
253
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
254
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
255
+ </Accordion.Item>
256
+ <Accordion.Item
257
+ title="Accordion item 2"
258
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
259
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
260
+ actions={
261
+ <>
262
+ <Accordion.Item.Action icon={<ArrowUp />} />
263
+ <Accordion.Item.Action icon={<ArrowDown />} />
264
+ <Accordion.Item.Action.Separator />
265
+ <Accordion.Item.Action icon={<EditIcon />} />
266
+ <Accordion.Item.Action icon={<TrashIcon />} />
267
+ </>
268
+ }
269
+ >
270
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
271
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
272
+ </Accordion.Item>
273
+ </Accordion>
274
+ ); };
274
275
 
275
276
  export default WithActionsExample;
276
277
  ` } } />
@@ -283,35 +284,35 @@ import { Accordion } from "@webiny/admin-ui";
283
284
  import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
284
285
 
285
286
  const WithHandleExample = () => {
286
- return (
287
- <Accordion>
288
- <Accordion.Item
289
- title="Accordion item 1"
290
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
291
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
292
- draggable={true}
293
- >
294
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
295
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
296
- </Accordion.Item>
297
- <Accordion.Item
298
- title="Accordion item 2"
299
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
300
- draggable={true}
301
- >
302
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
303
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
304
- </Accordion.Item>
305
- <Accordion.Item
306
- title="Accordion item 3"
307
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
308
- >
309
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
310
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
311
- </Accordion.Item>
312
- </Accordion>
313
- );
314
- };
287
+ return (
288
+
289
+ <Accordion>
290
+ <Accordion.Item
291
+ title="Accordion item 1"
292
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
293
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
294
+ draggable={true}
295
+ >
296
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
297
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
298
+ </Accordion.Item>
299
+ <Accordion.Item
300
+ title="Accordion item 2"
301
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
302
+ draggable={true}
303
+ >
304
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
305
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
306
+ </Accordion.Item>
307
+ <Accordion.Item
308
+ title="Accordion item 3"
309
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
310
+ >
311
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
312
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
313
+ </Accordion.Item>
314
+ </Accordion>
315
+ ); };
315
316
 
316
317
  export default WithHandleExample;
317
318
  ` } } />
@@ -323,26 +324,26 @@ import React from "react";
323
324
  import { Accordion } from "@webiny/admin-ui";
324
325
 
325
326
  const NonInteractiveExample = () => {
326
- return (
327
- <Accordion>
328
- <Accordion.Item
329
- title="Non-interactive item"
330
- description="This item cannot be expanded or collapsed."
331
- interactive={false}
332
- >
333
- This content won&apos;t be accessible because the item is not interactive.
334
- </Accordion.Item>
335
- <Accordion.Item title="Regular item">
336
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
337
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
338
- </Accordion.Item>
339
- <Accordion.Item title="Another regular item">
340
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
341
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
342
- </Accordion.Item>
343
- </Accordion>
344
- );
345
- };
327
+ return (
328
+
329
+ <Accordion>
330
+ <Accordion.Item
331
+ title="Non-interactive item"
332
+ description="This item cannot be expanded or collapsed."
333
+ interactive={false}
334
+ >
335
+ This content won&apos;t be accessible because the item is not interactive.
336
+ </Accordion.Item>
337
+ <Accordion.Item title="Regular item">
338
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
339
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
340
+ </Accordion.Item>
341
+ <Accordion.Item title="Another regular item">
342
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
343
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
344
+ </Accordion.Item>
345
+ </Accordion>
346
+ ); };
346
347
 
347
348
  export default NonInteractiveExample;
348
349
  ` } } />
@@ -354,26 +355,26 @@ import React from "react";
354
355
  import { Accordion } from "@webiny/admin-ui";
355
356
 
356
357
  const DefaultOpenExample = () => {
357
- return (
358
- <Accordion>
359
- <Accordion.Item
360
- title="Regular item"
361
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
362
- >
363
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
364
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
365
- </Accordion.Item>
366
- <Accordion.Item
367
- title="Default open item"
368
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
369
- defaultOpen={true}
370
- >
371
- This item is open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
372
- Sed elit sem, pretium sit amet convallis nec, consequat non nulla.
373
- </Accordion.Item>
374
- </Accordion>
375
- );
376
- };
358
+ return (
359
+
360
+ <Accordion>
361
+ <Accordion.Item
362
+ title="Regular item"
363
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
364
+ >
365
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
366
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
367
+ </Accordion.Item>
368
+ <Accordion.Item
369
+ title="Default open item"
370
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
371
+ defaultOpen={true}
372
+ >
373
+ This item is open by default. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit
374
+ sem, pretium sit amet convallis nec, consequat non nulla.
375
+ </Accordion.Item>
376
+ </Accordion>
377
+ ); };
377
378
 
378
379
  export default DefaultOpenExample;
379
380
  ` } } />
@@ -385,33 +386,33 @@ import React from "react";
385
386
  import { Accordion } from "@webiny/admin-ui";
386
387
 
387
388
  const DisabledItemExample = () => {
388
- return (
389
- <Accordion>
390
- <Accordion.Item
391
- title="Regular item"
392
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
393
- >
394
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
395
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
396
- </Accordion.Item>
397
- <Accordion.Item
398
- title="Disabled item"
399
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
400
- disabled={true}
401
- >
402
- This content won&apos;t be accessible because the item is disabled.
403
- </Accordion.Item>
404
- <Accordion.Item
405
- title="Disabled but open item"
406
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
407
- defaultOpen={true}
408
- disabled={true}
409
- >
410
- This item is disabled but open by default. Users cannot toggle it.
411
- </Accordion.Item>
412
- </Accordion>
413
- );
414
- };
389
+ return (
390
+
391
+ <Accordion>
392
+ <Accordion.Item
393
+ title="Regular item"
394
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
395
+ >
396
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
397
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
398
+ </Accordion.Item>
399
+ <Accordion.Item
400
+ title="Disabled item"
401
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
402
+ disabled={true}
403
+ >
404
+ This content won&apos;t be accessible because the item is disabled.
405
+ </Accordion.Item>
406
+ <Accordion.Item
407
+ title="Disabled but open item"
408
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
409
+ defaultOpen={true}
410
+ disabled={true}
411
+ >
412
+ This item is disabled but open by default. Users cannot toggle it.
413
+ </Accordion.Item>
414
+ </Accordion>
415
+ ); };
415
416
 
416
417
  export default DisabledItemExample;
417
418
  ` } } />
@@ -424,27 +425,27 @@ import { Accordion } from "@webiny/admin-ui";
424
425
  import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
425
426
 
426
427
  const ContainerVariantExample = () => {
427
- return (
428
- <Accordion variant="container">
429
- <Accordion.Item
430
- title="Accordion item 1"
431
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
432
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
433
- >
434
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
435
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
436
- </Accordion.Item>
437
- <Accordion.Item
438
- title="Accordion item 2"
439
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
440
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
441
- >
442
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
443
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
444
- </Accordion.Item>
445
- </Accordion>
446
- );
447
- };
428
+ return (
429
+
430
+ <Accordion variant="container">
431
+ <Accordion.Item
432
+ title="Accordion item 1"
433
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
434
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
435
+ >
436
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
437
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
438
+ </Accordion.Item>
439
+ <Accordion.Item
440
+ title="Accordion item 2"
441
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
442
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
443
+ >
444
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
445
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
446
+ </Accordion.Item>
447
+ </Accordion>
448
+ ); };
448
449
 
449
450
  export default ContainerVariantExample;
450
451
  ` } } />
@@ -457,60 +458,60 @@ import { Accordion } from "@webiny/admin-ui";
457
458
  import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
458
459
 
459
460
  const LightBackgroundExample = () => {
460
- return (
461
- <Accordion background="base">
462
- <Accordion.Item
463
- title="Accordion item 1"
464
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
465
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
466
- >
467
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
468
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
469
- </Accordion.Item>
470
- <Accordion.Item
471
- title="Accordion item 2"
472
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
473
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
474
- >
475
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
476
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
477
- </Accordion.Item>
478
- </Accordion>
479
- );
480
- };
461
+ return (
462
+
463
+ <Accordion background="base">
464
+ <Accordion.Item
465
+ title="Accordion item 1"
466
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
467
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
468
+ >
469
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
470
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
471
+ </Accordion.Item>
472
+ <Accordion.Item
473
+ title="Accordion item 2"
474
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
475
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
476
+ >
477
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
478
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
479
+ </Accordion.Item>
480
+ </Accordion>
481
+ ); };
481
482
 
482
483
  export default LightBackgroundExample;
483
484
  ` } } />
484
485
 
485
486
  ### Container Variant with Light Background
486
487
 
487
- <Canvas of={AccordionStories.ContainerVariantWithLightBackground} source={ { code: `
488
+ <Canvas of={AccordionStories.ContainerVariantWithBaseBackground} source={ { code: `
488
489
  import React from "react";
489
490
  import { Accordion } from "@webiny/admin-ui";
490
491
  import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
491
492
 
492
493
  const ContainerLightExample = () => {
493
- return (
494
- <Accordion variant="container" background="base">
495
- <Accordion.Item
496
- title="Accordion item 1"
497
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
498
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
499
- >
500
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
501
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
502
- </Accordion.Item>
503
- <Accordion.Item
504
- title="Accordion item 2"
505
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
506
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
507
- >
508
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
509
- convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
510
- </Accordion.Item>
511
- </Accordion>
512
- );
513
- };
494
+ return (
495
+
496
+ <Accordion variant="container" background="base">
497
+ <Accordion.Item
498
+ title="Accordion item 1"
499
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
500
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
501
+ >
502
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
503
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
504
+ </Accordion.Item>
505
+ <Accordion.Item
506
+ title="Accordion item 2"
507
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
508
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
509
+ >
510
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit sem, pretium sit amet
511
+ convallis nec, consequat non nulla. Nunc sit amet sagittis tellus.
512
+ </Accordion.Item>
513
+ </Accordion>
514
+ ); };
514
515
 
515
516
  export default ContainerLightExample;
516
517
  ` } } />
@@ -523,148 +524,121 @@ import { Accordion } from "@webiny/admin-ui";
523
524
  import { ReactComponent as WarningIcon } from "@webiny/icons/insert_chart.svg";
524
525
 
525
526
  const NestedExample = () => {
526
- return (
527
+ return (
528
+
529
+ <Accordion>
530
+ <Accordion.Item
531
+ title="Level 1"
532
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
533
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
534
+ actions={
535
+ <>
536
+ <Accordion.Item.Action icon={<ArrowUp />} />
537
+ <Accordion.Item.Action icon={<ArrowDown />} />
538
+ <Accordion.Item.Action.Separator />
539
+ <Accordion.Item.Action icon={<EditIcon />} />
540
+ <Accordion.Item.Action icon={<TrashIcon />} />
541
+ </>
542
+ }
543
+ >
544
+ <Accordion>
545
+ <Accordion.Item
546
+ title="Level 2"
547
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
548
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
549
+ actions={
550
+ <>
551
+ <Accordion.Item.Action icon={<ArrowUp />} />
552
+ <Accordion.Item.Action icon={<ArrowDown />} />
553
+ <Accordion.Item.Action.Separator />
554
+ <Accordion.Item.Action icon={<EditIcon />} />
555
+ <Accordion.Item.Action icon={<TrashIcon />} />
556
+ </>
557
+ }
558
+ >
527
559
  <Accordion>
528
- <Accordion.Item
529
- title="Level 1"
530
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
531
- icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
532
- actions={
533
- <>
534
- <Accordion.Item.Action icon={<ArrowUp />} />
535
- <Accordion.Item.Action icon={<ArrowDown />} />
536
- <Accordion.Item.Action.Separator />
537
- <Accordion.Item.Action icon={<EditIcon />} />
538
- <Accordion.Item.Action icon={<TrashIcon />} />
539
- </>
540
- }
541
- >
560
+ <Accordion.Item
561
+ title="Level 3"
562
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
563
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
564
+ actions={
565
+ <>
566
+ <Accordion.Item.Action icon={<ArrowUp />} />
567
+ <Accordion.Item.Action icon={<ArrowDown />} />
568
+ <Accordion.Item.Action.Separator />
569
+ <Accordion.Item.Action icon={<EditIcon />} />
570
+ <Accordion.Item.Action icon={<TrashIcon />} />
571
+ </>
572
+ }
573
+ >
574
+ <Accordion>
575
+ <Accordion.Item title="Level 4">
542
576
  <Accordion>
543
- <Accordion.Item
544
- title="Level 2"
545
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
546
- icon={
547
- <Accordion.Item.Icon
548
- icon={<WarningIcon />}
549
- label={"Warning icon"}
550
- />
551
- }
552
- actions={
553
- <>
554
- <Accordion.Item.Action icon={<ArrowUp />} />
555
- <Accordion.Item.Action icon={<ArrowDown />} />
556
- <Accordion.Item.Action.Separator />
557
- <Accordion.Item.Action icon={<EditIcon />} />
558
- <Accordion.Item.Action icon={<TrashIcon />} />
559
- </>
560
- }
561
- >
562
- <Accordion>
563
- <Accordion.Item
564
- title="Level 3"
565
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
566
- icon={
567
- <Accordion.Item.Icon
568
- icon={<WarningIcon />}
569
- label={"Warning icon"}
570
- />
571
- }
572
- actions={
573
- <>
574
- <Accordion.Item.Action icon={<ArrowUp />} />
575
- <Accordion.Item.Action icon={<ArrowDown />} />
576
- <Accordion.Item.Action.Separator />
577
- <Accordion.Item.Action icon={<EditIcon />} />
578
- <Accordion.Item.Action icon={<TrashIcon />} />
579
- </>
580
- }
581
- >
582
- <Accordion>
583
- <Accordion.Item title="Level 4">
584
- <Accordion>
585
- <Accordion.Item title="Level 5">
586
- Content
587
- </Accordion.Item>
588
- </Accordion>
589
- <Accordion>
590
- <Accordion.Item title="Level 5">
591
- Content
592
- </Accordion.Item>
593
- </Accordion>
594
- <Accordion>
595
- <Accordion.Item title="Level 5">
596
- Content
597
- </Accordion.Item>
598
- </Accordion>
599
- </Accordion.Item>
600
- </Accordion>
601
- </Accordion.Item>
602
- </Accordion>
603
- <Accordion>
604
- <Accordion.Item title="Level 3">Content</Accordion.Item>
605
- </Accordion>
606
- <Accordion>
607
- <Accordion.Item title="Level 3">Content</Accordion.Item>
608
- </Accordion>
609
- </Accordion.Item>
577
+ <Accordion.Item title="Level 5">Content</Accordion.Item>
610
578
  </Accordion>
611
- </Accordion.Item>
612
- <Accordion.Item title="Level 1">
613
579
  <Accordion>
614
- <Accordion.Item
615
- title="Level 2"
616
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
617
- icon={
618
- <Accordion.Item.Icon
619
- icon={<WarningIcon />}
620
- label={"Warning icon"}
621
- />
622
- }
623
- actions={
624
- <>
625
- <Accordion.Item.Action icon={<ArrowUp />} />
626
- <Accordion.Item.Action icon={<ArrowDown />} />
627
- <Accordion.Item.Action.Separator />
628
- <Accordion.Item.Action icon={<EditIcon />} />
629
- <Accordion.Item.Action icon={<TrashIcon />} />
630
- </>
631
- }
632
- >
633
- <Accordion>
634
- <Accordion.Item title="Level 3">
635
- <Accordion>
636
- <Accordion.Item title="Level 4">
637
- <Accordion>
638
- <Accordion.Item title="Level 5">
639
- Test
640
- </Accordion.Item>
641
- </Accordion>
642
- <Accordion>
643
- <Accordion.Item title="Level 5">
644
- Test
645
- </Accordion.Item>
646
- </Accordion>
647
- <Accordion>
648
- <Accordion.Item title="Level 5">
649
- Test
650
- </Accordion.Item>
651
- </Accordion>
652
- </Accordion.Item>
653
- </Accordion>
654
- </Accordion.Item>
655
- </Accordion>
656
- <Accordion>
657
- <Accordion.Item title="Level 3">Content</Accordion.Item>
658
- </Accordion>
659
- <Accordion>
660
- <Accordion.Item title="Level 3">Content</Accordion.Item>
661
- </Accordion>
662
- </Accordion.Item>
580
+ <Accordion.Item title="Level 5">Content</Accordion.Item>
663
581
  </Accordion>
664
- </Accordion.Item>
582
+ <Accordion>
583
+ <Accordion.Item title="Level 5">Content</Accordion.Item>
584
+ </Accordion>
585
+ </Accordion.Item>
586
+ </Accordion>
587
+ </Accordion.Item>
665
588
  </Accordion>
666
- );
667
- };
589
+ <Accordion>
590
+ <Accordion.Item title="Level 3">Content</Accordion.Item>
591
+ </Accordion>
592
+ <Accordion>
593
+ <Accordion.Item title="Level 3">Content</Accordion.Item>
594
+ </Accordion>
595
+ </Accordion.Item>
596
+ </Accordion>
597
+ </Accordion.Item>
598
+ <Accordion.Item title="Level 1">
599
+ <Accordion>
600
+ <Accordion.Item
601
+ title="Level 2"
602
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
603
+ icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
604
+ actions={
605
+ <>
606
+ <Accordion.Item.Action icon={<ArrowUp />} />
607
+ <Accordion.Item.Action icon={<ArrowDown />} />
608
+ <Accordion.Item.Action.Separator />
609
+ <Accordion.Item.Action icon={<EditIcon />} />
610
+ <Accordion.Item.Action icon={<TrashIcon />} />
611
+ </>
612
+ }
613
+ >
614
+ <Accordion>
615
+ <Accordion.Item title="Level 3">
616
+ <Accordion>
617
+ <Accordion.Item title="Level 4">
618
+ <Accordion>
619
+ <Accordion.Item title="Level 5">Test</Accordion.Item>
620
+ </Accordion>
621
+ <Accordion>
622
+ <Accordion.Item title="Level 5">Test</Accordion.Item>
623
+ </Accordion>
624
+ <Accordion>
625
+ <Accordion.Item title="Level 5">Test</Accordion.Item>
626
+ </Accordion>
627
+ </Accordion.Item>
628
+ </Accordion>
629
+ </Accordion.Item>
630
+ </Accordion>
631
+ <Accordion>
632
+ <Accordion.Item title="Level 3">Content</Accordion.Item>
633
+ </Accordion>
634
+ <Accordion>
635
+ <Accordion.Item title="Level 3">Content</Accordion.Item>
636
+ </Accordion>
637
+ </Accordion.Item>
638
+ </Accordion>
639
+ </Accordion.Item>
640
+ </Accordion>
641
+ ); };
668
642
 
669
643
  export default NestedExample;
670
644
  ` } } />