@navikt/ds-react 6.5.0 → 6.6.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 (153) hide show
  1. package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +2 -4
  2. package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
  3. package/cjs/form/combobox/Input/Input.js +6 -1
  4. package/cjs/form/combobox/Input/Input.js.map +1 -1
  5. package/cjs/form/form-summary/FormSummary.d.ts +82 -0
  6. package/cjs/form/form-summary/FormSummary.js +81 -0
  7. package/cjs/form/form-summary/FormSummary.js.map +1 -0
  8. package/cjs/form/form-summary/FormSummaryAnswer.d.ts +11 -0
  9. package/cjs/form/form-summary/FormSummaryAnswer.js +25 -0
  10. package/cjs/form/form-summary/FormSummaryAnswer.js.map +1 -0
  11. package/cjs/form/form-summary/FormSummaryAnswers.d.ts +9 -0
  12. package/cjs/form/form-summary/FormSummaryAnswers.js +48 -0
  13. package/cjs/form/form-summary/FormSummaryAnswers.js.map +1 -0
  14. package/cjs/form/form-summary/FormSummaryEditLink.d.ts +17 -0
  15. package/cjs/form/form-summary/FormSummaryEditLink.js +49 -0
  16. package/cjs/form/form-summary/FormSummaryEditLink.js.map +1 -0
  17. package/cjs/form/form-summary/FormSummaryHeader.d.ts +9 -0
  18. package/cjs/form/form-summary/FormSummaryHeader.js +48 -0
  19. package/cjs/form/form-summary/FormSummaryHeader.js.map +1 -0
  20. package/cjs/form/form-summary/FormSummaryHeading.d.ts +14 -0
  21. package/cjs/form/form-summary/FormSummaryHeading.js +31 -0
  22. package/cjs/form/form-summary/FormSummaryHeading.js.map +1 -0
  23. package/cjs/form/form-summary/FormSummaryLabel.d.ts +6 -0
  24. package/cjs/form/form-summary/FormSummaryLabel.js +45 -0
  25. package/cjs/form/form-summary/FormSummaryLabel.js.map +1 -0
  26. package/cjs/form/form-summary/FormSummaryValue.d.ts +6 -0
  27. package/cjs/form/form-summary/FormSummaryValue.js +49 -0
  28. package/cjs/form/form-summary/FormSummaryValue.js.map +1 -0
  29. package/cjs/form/form-summary/index.d.ts +8 -0
  30. package/cjs/form/form-summary/index.js +24 -0
  31. package/cjs/form/form-summary/index.js.map +1 -0
  32. package/cjs/index.d.ts +3 -2
  33. package/cjs/index.js +5 -3
  34. package/cjs/index.js.map +1 -1
  35. package/cjs/util/hooks/descendants/descendant.js +10 -1
  36. package/cjs/util/hooks/descendants/descendant.js.map +1 -1
  37. package/cjs/util/hooks/descendants/useDescendant.js +0 -5
  38. package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
  39. package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +2 -4
  40. package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
  41. package/esm/form/combobox/Input/Input.js +6 -1
  42. package/esm/form/combobox/Input/Input.js.map +1 -1
  43. package/esm/form/form-summary/FormSummary.d.ts +82 -0
  44. package/esm/form/form-summary/FormSummary.js +52 -0
  45. package/esm/form/form-summary/FormSummary.js.map +1 -0
  46. package/esm/form/form-summary/FormSummaryAnswer.d.ts +11 -0
  47. package/esm/form/form-summary/FormSummaryAnswer.js +19 -0
  48. package/esm/form/form-summary/FormSummaryAnswer.js.map +1 -0
  49. package/esm/form/form-summary/FormSummaryAnswers.d.ts +9 -0
  50. package/esm/form/form-summary/FormSummaryAnswers.js +19 -0
  51. package/esm/form/form-summary/FormSummaryAnswers.js.map +1 -0
  52. package/esm/form/form-summary/FormSummaryEditLink.d.ts +17 -0
  53. package/esm/form/form-summary/FormSummaryEditLink.js +20 -0
  54. package/esm/form/form-summary/FormSummaryEditLink.js.map +1 -0
  55. package/esm/form/form-summary/FormSummaryHeader.d.ts +9 -0
  56. package/esm/form/form-summary/FormSummaryHeader.js +19 -0
  57. package/esm/form/form-summary/FormSummaryHeader.js.map +1 -0
  58. package/esm/form/form-summary/FormSummaryHeading.d.ts +14 -0
  59. package/esm/form/form-summary/FormSummaryHeading.js +5 -0
  60. package/esm/form/form-summary/FormSummaryHeading.js.map +1 -0
  61. package/esm/form/form-summary/FormSummaryLabel.d.ts +6 -0
  62. package/esm/form/form-summary/FormSummaryLabel.js +19 -0
  63. package/esm/form/form-summary/FormSummaryLabel.js.map +1 -0
  64. package/esm/form/form-summary/FormSummaryValue.d.ts +6 -0
  65. package/esm/form/form-summary/FormSummaryValue.js +20 -0
  66. package/esm/form/form-summary/FormSummaryValue.js.map +1 -0
  67. package/esm/form/form-summary/index.d.ts +8 -0
  68. package/esm/form/form-summary/index.js +10 -0
  69. package/esm/form/form-summary/index.js.map +1 -0
  70. package/esm/index.d.ts +3 -2
  71. package/esm/index.js +2 -1
  72. package/esm/index.js.map +1 -1
  73. package/esm/util/hooks/descendants/descendant.js +10 -1
  74. package/esm/util/hooks/descendants/descendant.js.map +1 -1
  75. package/esm/util/hooks/descendants/useDescendant.js +0 -5
  76. package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
  77. package/package.json +15 -4
  78. package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +9 -1
  79. package/src/form/combobox/Input/Input.tsx +5 -0
  80. package/src/form/form-summary/FormSummary.tsx +106 -0
  81. package/src/form/form-summary/FormSummaryAnswer.tsx +27 -0
  82. package/src/form/form-summary/FormSummaryAnswers.tsx +25 -0
  83. package/src/form/form-summary/FormSummaryEditLink.tsx +35 -0
  84. package/src/form/form-summary/FormSummaryHeader.tsx +25 -0
  85. package/src/form/form-summary/FormSummaryHeading.tsx +23 -0
  86. package/src/form/form-summary/FormSummaryLabel.tsx +17 -0
  87. package/src/form/form-summary/FormSummaryValue.tsx +24 -0
  88. package/src/form/form-summary/index.ts +30 -0
  89. package/src/index.ts +16 -15
  90. package/src/util/hooks/descendants/descendant.ts +15 -1
  91. package/src/util/hooks/descendants/useDescendant.tsx +0 -5
  92. package/src/accordion/accordion.stories.tsx +0 -286
  93. package/src/alert/alert.stories.tsx +0 -306
  94. package/src/button/button.stories.tsx +0 -185
  95. package/src/chat/chat.stories.tsx +0 -341
  96. package/src/chips/chips.stories.tsx +0 -260
  97. package/src/copybutton/copy-button.stories.tsx +0 -261
  98. package/src/date/datepicker/datepicker.stories.tsx +0 -614
  99. package/src/date/monthpicker/monthpicker.stories.tsx +0 -221
  100. package/src/dropdown/dropdown.stories.tsx +0 -124
  101. package/src/expansion-card/expansion-card.stories.tsx +0 -282
  102. package/src/form/checkbox/checkbox.stories.tsx +0 -281
  103. package/src/form/combobox/combobox.stories.tsx +0 -626
  104. package/src/form/confirmation-panel/confirmation-panel.stories.tsx +0 -128
  105. package/src/form/error-summary/error-summary.stories.tsx +0 -81
  106. package/src/form/fieldset/fieldset.stories.tsx +0 -157
  107. package/src/form/file-upload/file-upload-dropzone.stories.tsx +0 -123
  108. package/src/form/file-upload/file-upload-item.stories.tsx +0 -148
  109. package/src/form/file-upload/file-upload.stories.tsx +0 -248
  110. package/src/form/radio/radio.stories.tsx +0 -230
  111. package/src/form/search/search.stories.tsx +0 -238
  112. package/src/form/select/select.stories.tsx +0 -172
  113. package/src/form/switch/switch.stories.tsx +0 -171
  114. package/src/form/textarea/textarea.stories.tsx +0 -254
  115. package/src/form/textfield/text-field.stories.tsx +0 -143
  116. package/src/guide-panel/guidepanel.stories.tsx +0 -90
  117. package/src/help-text/help-text.stories.tsx +0 -91
  118. package/src/internal-header/header.stories.tsx +0 -229
  119. package/src/layout/bleed/Bleed.stories.tsx +0 -395
  120. package/src/layout/box/Box.stories.tsx +0 -380
  121. package/src/layout/grid/h-grid.stories.tsx +0 -122
  122. package/src/layout/page/Page.stories.tsx +0 -271
  123. package/src/layout/responsive/hide.stories.tsx +0 -80
  124. package/src/layout/responsive/show.stories.tsx +0 -80
  125. package/src/layout/sidemal-test/navno-sidemal.stories.tsx +0 -69
  126. package/src/layout/stack/stack.stories.tsx +0 -183
  127. package/src/link/stories/link.stories.tsx +0 -304
  128. package/src/link-panel/link-panel.stories.tsx +0 -59
  129. package/src/list/list.stories.tsx +0 -280
  130. package/src/loader/loader.stories.tsx +0 -82
  131. package/src/modal/modal.stories.tsx +0 -391
  132. package/src/pagination/pagination.stories.tsx +0 -110
  133. package/src/popover/popover.stories.tsx +0 -113
  134. package/src/portal/Portal.stories.tsx +0 -102
  135. package/src/read-more/readmore.stories.tsx +0 -91
  136. package/src/skeleton/skeleton.stories.tsx +0 -130
  137. package/src/stepper/stepper.stories.tsx +0 -200
  138. package/src/table/stories/table-1.stories.tsx +0 -292
  139. package/src/table/stories/table-2-expandable.stories.tsx +0 -298
  140. package/src/table/stories/table-3-async.stories.tsx +0 -179
  141. package/src/table/stories/tests/table.stories.tsx +0 -102
  142. package/src/tabs/Tabs.stories.tsx +0 -311
  143. package/src/tag/tag.stories.tsx +0 -126
  144. package/src/timeline/timeline.stories.tsx +0 -445
  145. package/src/toggle-group/ToggleGroup.stories.tsx +0 -198
  146. package/src/tooltip/tooltip.stories.tsx +0 -101
  147. package/src/typography/stories/bodylong.stories.tsx +0 -209
  148. package/src/typography/stories/bodyshort.stories.tsx +0 -208
  149. package/src/typography/stories/detail.stories.tsx +0 -115
  150. package/src/typography/stories/error-message.stories.tsx +0 -122
  151. package/src/typography/stories/heading.stories.tsx +0 -169
  152. package/src/typography/stories/label.stories.tsx +0 -131
  153. package/src/util/hooks/descendants/descendant.stories.tsx +0 -147
package/src/alert/alert.stories.tsx DELETED
@@ -1,306 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import React from "react";
3
- import { VStack } from "../layout/stack";
4
- import { Link } from "../link";
5
- import { BodyLong, Heading as DsHeading } from "../typography";
6
- import Alert, { AlertProps } from "./Alert";
7
-
8
- const meta: Meta<typeof Alert> = {
9
- title: "ds-react/Alert",
10
- component: Alert,
11
- parameters: {
12
- chromatic: { disable: true },
13
- },
14
- };
15
-
16
- export default meta;
17
-
18
- type Story = StoryObj<typeof Alert>;
19
-
20
- const variants: AlertProps["variant"][] = [
21
- "error",
22
- "warning",
23
- "info",
24
- "success",
25
- ];
26
-
27
- export const Controls: Story = {
28
- render: (props) => <Alert {...props} />,
29
-
30
- args: {
31
- children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
32
- fullWidth: false,
33
- inline: false,
34
- variant: "info",
35
- size: "medium",
36
- closeButton: false,
37
- },
38
- argTypes: {
39
- variant: {
40
- control: { type: "radio" },
41
- options: ["info", "error", "warning", "success"],
42
- },
43
- size: {
44
- control: { type: "radio" },
45
- options: ["medium", "small"],
46
- },
47
- },
48
- };
49
-
50
- export const Variants = () => {
51
- return (
52
- <div className="colgap">
53
- {variants.map((variant, i) => (
54
- <Alert key={variant} variant={variant}>
55
- {new Array(i + 1).fill(
56
- "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
57
- )}
58
- </Alert>
59
- ))}
60
- {variants.map((variant, i) => (
61
- <Alert key={variant} variant={variant} size="small">
62
- {new Array(i + 1).fill(
63
- "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
64
- )}
65
- </Alert>
66
- ))}
67
- </div>
68
- );
69
- };
70
-
71
- export const FullWidth = () => {
72
- return (
73
- <VStack gap="4">
74
- <Alert variant="info" fullWidth>
75
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
76
- </Alert>
77
- <Alert variant="info" fullWidth size="small">
78
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
79
- </Alert>
80
- </VStack>
81
- );
82
- };
83
-
84
- export const Inline = () => {
85
- return (
86
- <VStack gap="4">
87
- <h2>Inline</h2>
88
- <Alert variant="info" inline>
89
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
90
- </Alert>
91
- <Alert variant="info" inline>
92
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
93
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
94
- reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
95
- enim nisi veniam nostrud.
96
- </Alert>
97
- <Alert variant="info" size="small" inline>
98
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
99
- </Alert>
100
- <Alert variant="info" size="small" inline>
101
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
102
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
103
- reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
104
- enim nisi veniam nostrud.
105
- </Alert>
106
- </VStack>
107
- );
108
- };
109
-
110
- export const Heading = () => {
111
- return (
112
- <div className="colgap">
113
- <Alert variant="info">
114
- <DsHeading spacing size="small" level="3">
115
- Aliquip duis est in commodo pariatur
116
- </DsHeading>
117
- <BodyLong>
118
- Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
119
- laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
120
- sint commodo consequat eu aute.
121
- </BodyLong>
122
- </Alert>
123
- <Alert variant="info" size="small">
124
- <DsHeading spacing size="xsmall" level="3">
125
- Aliquip duis est in commodo pariatur
126
- </DsHeading>
127
- <BodyLong>
128
- Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
129
- laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
130
- sint commodo consequat eu aute.
131
- </BodyLong>
132
- </Alert>
133
- </div>
134
- );
135
- };
136
-
137
- export const CloseButton: Story = {
138
- render: () => {
139
- return (
140
- <VStack gap="4">
141
- <h2>CloseButton</h2>
142
- <Alert variant="info" closeButton>
143
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
144
- </Alert>
145
- <Alert variant="info" closeButton>
146
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
147
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
148
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
149
- reprehenderit enim nisi veniam nostrud.
150
- </Alert>
151
- <Alert size="small" variant="info" closeButton>
152
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
153
- </Alert>
154
- <Alert size="small" variant="info" closeButton>
155
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
156
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
157
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
158
- reprehenderit enim nisi veniam nostrud.
159
- </Alert>
160
- <Alert variant="info" closeButton>
161
- <DsHeading size="small" level="3">
162
- Id elit esse enim reprehenderit
163
- </DsHeading>
164
- <BodyLong>
165
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
166
- </BodyLong>
167
- </Alert>
168
- <Alert variant="info" closeButton size="small">
169
- <DsHeading size="xsmall" level="3">
170
- Id elit esse enim reprehenderit
171
- </DsHeading>
172
- <BodyLong>
173
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
174
- </BodyLong>
175
- </Alert>
176
- </VStack>
177
- );
178
- },
179
- };
180
-
181
- export const Chromatic: Story = {
182
- render: () => (
183
- <VStack gap="6">
184
- <VStack gap="2">
185
- <h2>Variant</h2>
186
- {variants.map((variant, i) => (
187
- <Alert key={variant} variant={variant}>
188
- {new Array(i + 1).fill(
189
- "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
190
- )}
191
- </Alert>
192
- ))}
193
- </VStack>
194
- <VStack gap="2">
195
- <h2>Small</h2>
196
- <Alert variant="info" size="small">
197
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
198
- </Alert>
199
- <Alert variant="info" size="small">
200
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
201
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
202
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
203
- reprehenderit enim nisi veniam nostrud.
204
- </Alert>
205
- </VStack>
206
- <VStack gap="2">
207
- <h2>FullWidth</h2>
208
- <Alert variant="info" fullWidth>
209
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
210
- </Alert>
211
- <Alert variant="info" size="small" fullWidth>
212
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
213
- </Alert>
214
- </VStack>
215
- <VStack gap="2">
216
- <h2>Inline</h2>
217
- <Alert variant="info" inline>
218
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
219
- </Alert>
220
- <Alert variant="info" inline>
221
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
222
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
223
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
224
- reprehenderit enim nisi veniam nostrud.
225
- </Alert>
226
- <Alert variant="info" size="small" inline>
227
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
228
- </Alert>
229
- <Alert variant="info" size="small" inline>
230
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
231
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
232
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
233
- reprehenderit enim nisi veniam nostrud.
234
- </Alert>
235
- </VStack>
236
- <VStack gap="2">
237
- <h2>Heading</h2>
238
- <Alert variant="info">
239
- <DsHeading size="small" level="3">
240
- Id elit esse enim reprehenderit
241
- </DsHeading>
242
- <BodyLong>
243
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
244
- </BodyLong>
245
- </Alert>
246
- <Alert variant="info" size="small">
247
- <DsHeading size="xsmall" level="3">
248
- Id elit esse enim reprehenderit
249
- </DsHeading>
250
- <BodyLong size="small">
251
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
252
- </BodyLong>
253
- </Alert>
254
- </VStack>
255
- <VStack gap="2">
256
- <h2>CloseButton</h2>
257
- <Alert variant="info" closeButton>
258
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
259
- </Alert>
260
- <Alert variant="info" closeButton>
261
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
262
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
263
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
264
- reprehenderit enim nisi veniam nostrud.
265
- </Alert>
266
- <Alert size="small" variant="info" closeButton>
267
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
268
- </Alert>
269
- <Alert size="small" variant="info" closeButton>
270
- Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
271
- enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
272
- reprehenderit enim nisi veniam nostrud. Id elit esse enim
273
- reprehenderit enim nisi veniam nostrud.
274
- </Alert>
275
- <Alert variant="info" closeButton>
276
- <DsHeading size="small" level="3">
277
- Id elit esse enim reprehenderit
278
- </DsHeading>
279
- <BodyLong>
280
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
281
- </BodyLong>
282
- </Alert>
283
- <Alert variant="info" size="small" closeButton>
284
- <DsHeading size="xsmall" level="3">
285
- Id elit esse enim reprehenderit
286
- </DsHeading>
287
- <BodyLong size="small">
288
- Id elit esse enim reprehenderit enim nisi veniam nostrud.
289
- </BodyLong>
290
- </Alert>
291
- </VStack>
292
-
293
- <VStack gap="2">
294
- <h2>Links</h2>
295
- {variants.map((variant) => (
296
- <Alert key={variant} variant={variant}>
297
- <Link href="#">Id elit esse enim reprehenderit</Link>
298
- </Alert>
299
- ))}
300
- </VStack>
301
- </VStack>
302
- ),
303
- parameters: {
304
- chromatic: { disable: false },
305
- },
306
- };
package/src/button/button.stories.tsx DELETED
@@ -1,185 +0,0 @@
1
- import { StoryObj } from "@storybook/react";
2
- import React from "react";
3
- import { StarIcon as BaseStarIcon } from "@navikt/aksel-icons";
4
- import { HStack, VStack } from "../layout/stack";
5
- import { Button } from "./index";
6
-
7
- export default {
8
- title: "ds-react/Button",
9
- component: Button,
10
- parameters: {
11
- chromatic: { disable: true },
12
- },
13
- };
14
-
15
- type Story = StoryObj<typeof Button>;
16
-
17
- const StarIcon = () => <BaseStarIcon aria-hidden />;
18
-
19
- const variants: (
20
- | "primary"
21
- | "secondary"
22
- | "tertiary"
23
- | "primary-neutral"
24
- | "secondary-neutral"
25
- | "tertiary-neutral"
26
- | "danger"
27
- )[] = [
28
- "primary",
29
- "secondary",
30
- "tertiary",
31
- "danger",
32
- "primary-neutral",
33
- "secondary-neutral",
34
- "tertiary-neutral",
35
- ];
36
-
37
- export const Controls: Story = {
38
- render: (props) => {
39
- return (
40
- <Button
41
- variant={props.variant}
42
- size={props.size}
43
- loading={props.loading}
44
- icon={props.icon ? <StarIcon /> : undefined}
45
- iconPosition={props.iconPosition}
46
- >
47
- {props.children}
48
- </Button>
49
- );
50
- },
51
-
52
- args: {
53
- icon: false,
54
- loading: false,
55
- iconPosition: "left",
56
- children: "Button",
57
- variant: "primary",
58
- size: "medium",
59
- },
60
- argTypes: {
61
- variant: {
62
- control: {
63
- type: "radio",
64
- options: [
65
- "primary",
66
- "secondary",
67
- "tertiary",
68
- "danger",
69
- "primary-neutral",
70
- "secondary-neutral",
71
- "tertiary-neutral",
72
- ],
73
- },
74
- },
75
- size: {
76
- control: {
77
- type: "radio",
78
- options: ["medium", "small", "xsmall"],
79
- },
80
- },
81
- iconPosition: {
82
- control: {
83
- type: "radio",
84
- options: ["left", "right"],
85
- },
86
- },
87
- },
88
- };
89
-
90
- function ButtonGrid(props: any) {
91
- return (
92
- <VStack gap="2">
93
- {variants.map((variant) => (
94
- <HStack gap="2" key={variant}>
95
- <Button variant={variant} {...props}>
96
- Button
97
- </Button>
98
- <Button variant={variant} {...props} icon={<StarIcon />}>
99
- Button
100
- </Button>
101
- <Button
102
- variant={variant}
103
- {...props}
104
- icon={<StarIcon />}
105
- iconPosition="right"
106
- >
107
- Button
108
- </Button>
109
- <Button variant={variant} {...props} icon={<StarIcon />} />
110
- </HStack>
111
- ))}
112
- </VStack>
113
- );
114
- }
115
-
116
- export const Medium: Story = {
117
- render: () => <ButtonGrid size="medium" />,
118
- };
119
-
120
- export const Small: Story = {
121
- render: () => <ButtonGrid size="small" />,
122
- };
123
-
124
- export const XSmall: Story = {
125
- render: () => <ButtonGrid size="xsmall" />,
126
- };
127
-
128
- export const AsLink: Story = {
129
- render: () => (
130
- <VStack gap="4">
131
- <Button href="#" as="a">
132
- Button as a-tag
133
- </Button>
134
- <Button href="#" as="a" disabled>
135
- Disabled Button as a-tag
136
- </Button>
137
- </VStack>
138
- ),
139
- };
140
-
141
- export const Loading: Story = {
142
- render: () => <ButtonGrid loading />,
143
- };
144
-
145
- export const LoadingAsLink: Story = {
146
- render: () => <ButtonGrid loading href="#" as="a" />,
147
- };
148
-
149
- export const Disabled: Story = {
150
- render: () => <ButtonGrid disabled />,
151
- };
152
-
153
- export const DisabledAsLink: Story = {
154
- render: () => <ButtonGrid disabled href="#" as="a" />,
155
- };
156
-
157
- export const Chromatic: Story = {
158
- render: () => (
159
- <VStack gap="6" align="center">
160
- <div>
161
- <h2>Medium</h2>
162
- <ButtonGrid size="medium" />
163
- </div>
164
- <div>
165
- <h2>Small</h2>
166
- <ButtonGrid size="small" />
167
- </div>
168
- <div>
169
- <h2>XSmall</h2>
170
- <ButtonGrid size="xsmall" />
171
- </div>
172
- <div>
173
- <h2>As Link</h2>
174
- <ButtonGrid as="a" href="#" />
175
- </div>
176
- <div>
177
- <h2>Disabled</h2>
178
- <ButtonGrid disabled />
179
- </div>
180
- </VStack>
181
- ),
182
- parameters: {
183
- chromatic: { disable: false },
184
- },
185
- };