@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/layout/bleed/Bleed.stories.tsx DELETED
@@ -1,395 +0,0 @@
1
- import type { Meta } from "@storybook/react";
2
- import React from "react";
3
- import { BodyLong } from "../../typography";
4
- import { Box } from "../box";
5
- import { HStack, VStack } from "../stack";
6
- import { Bleed } from "./Bleed";
7
-
8
- export default {
9
- title: "ds-react/Primitives/Bleed",
10
- component: Bleed,
11
- } satisfies Meta<typeof Bleed>;
12
-
13
- export const Default = {
14
- render: () => (
15
- <>
16
- <VStack gap="2">
17
- <Box background="surface-alt-1-subtle" padding="5">
18
- <Box background="surface-alt-2-subtle" padding="5">
19
- <Bleed marginInline="10 0">
20
- <Box
21
- padding="3"
22
- className="p"
23
- background="surface-success-subtle"
24
- >
25
- <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
26
- </Box>
27
- </Bleed>
28
- </Box>
29
- </Box>
30
- <Box background="surface-alt-1-subtle" padding="5">
31
- <Box background="surface-alt-2-subtle" padding="5">
32
- <Bleed marginInline="0 10">
33
- <Box
34
- padding="3"
35
- className="p"
36
- background="surface-success-subtle"
37
- >
38
- <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
39
- </Box>
40
- </Bleed>
41
- </Box>
42
- </Box>
43
- <Box background="surface-alt-1-subtle" padding="5">
44
- <Box background="surface-alt-2-subtle" padding="5">
45
- <Bleed marginBlock="10 0">
46
- <Box
47
- padding="3"
48
- className="p"
49
- background="surface-success-subtle"
50
- >
51
- <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
52
- </Box>
53
- </Bleed>
54
- </Box>
55
- </Box>
56
- <Box background="surface-alt-1-subtle" padding="5">
57
- <Box background="surface-alt-2-subtle" padding="5">
58
- <Bleed marginBlock="0 10">
59
- <Box
60
- padding="3"
61
- className="p"
62
- background="surface-success-subtle"
63
- >
64
- <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
65
- </Box>
66
- </Bleed>
67
- </Box>
68
- </Box>
69
- </VStack>
70
- </>
71
- ),
72
- };
73
-
74
- export const AsChild = {
75
- render: () => (
76
- <>
77
- <VStack gap="2">
78
- <Box background="surface-alt-1-subtle" padding="5">
79
- <Box background="surface-alt-2-subtle" padding="5">
80
- <Bleed marginInline="10 0" asChild>
81
- <Box padding="3" background="surface-success-subtle">
82
- <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
83
- </Box>
84
- </Bleed>
85
- </Box>
86
- </Box>
87
- <Box background="surface-alt-1-subtle" padding="5">
88
- <Box background="surface-alt-2-subtle" padding="5">
89
- <Bleed marginInline="0 10" asChild>
90
- <Box padding="3" background="surface-success-subtle">
91
- <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
92
- </Box>
93
- </Bleed>
94
- </Box>
95
- </Box>
96
- <Box background="surface-alt-1-subtle" padding="5">
97
- <Box background="surface-alt-2-subtle" padding="5">
98
- <Bleed marginBlock="10 0" asChild>
99
- <Box padding="3" background="surface-success-subtle">
100
- <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
101
- </Box>
102
- </Bleed>
103
- </Box>
104
- </Box>
105
- <Box background="surface-alt-1-subtle" padding="5">
106
- <Box background="surface-alt-2-subtle" padding="5">
107
- <Bleed marginBlock="0 10" asChild>
108
- <Box padding="3" background="surface-success-subtle">
109
- <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
110
- </Box>
111
- </Bleed>
112
- </Box>
113
- </Box>
114
- </VStack>
115
- </>
116
- ),
117
- };
118
-
119
- export const Breakpoints = {
120
- render: () => (
121
- <>
122
- <VStack gap="2">
123
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
124
- <Box
125
- background="surface-alt-2-subtle"
126
- padding={{ xs: "5", md: "10" }}
127
- >
128
- <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
129
- <Box padding="3" background="surface-success-subtle">
130
- <BodyLong>
131
- {'marginInline={{ xs: "10 0", md: "20 0" }}'}
132
- </BodyLong>
133
- </Box>
134
- </Bleed>
135
- </Box>
136
- </Box>
137
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
138
- <Box
139
- background="surface-alt-2-subtle"
140
- padding={{ xs: "5", md: "10" }}
141
- >
142
- <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
143
- <Box padding="3" background="surface-success-subtle">
144
- <BodyLong>
145
- {'marginInline={{ xs: "0 10", md: "0 20" }}'}
146
- </BodyLong>
147
- </Box>
148
- </Bleed>
149
- </Box>
150
- </Box>
151
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
152
- <Box
153
- background="surface-alt-2-subtle"
154
- padding={{ xs: "5", md: "10" }}
155
- >
156
- <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
157
- <Box padding="3" background="surface-success-subtle">
158
- <BodyLong>
159
- {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
160
- </BodyLong>
161
- </Box>
162
- </Bleed>
163
- </Box>
164
- </Box>
165
- <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
166
- <Box
167
- background="surface-alt-2-subtle"
168
- padding={{ xs: "5", md: "10" }}
169
- >
170
- <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
171
- <Box padding="3" background="surface-success-subtle">
172
- <BodyLong>
173
- {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
174
- </BodyLong>
175
- </Box>
176
- </Bleed>
177
- </Box>
178
- </Box>
179
- </VStack>
180
- </>
181
- ),
182
- };
183
-
184
- export const Px = {
185
- render: () => (
186
- <>
187
- <style>
188
- {`
189
- .circle {
190
- width: 24px;
191
- height: 24px;
192
- display: flex;
193
- align-items: center;
194
- justify-content: center;
195
- }
196
- .scale {
197
- transform: scale(5);
198
- }
199
- `}
200
- </style>
201
- <Box padding="32">
202
- <HStack className="" gap="32">
203
- <Box
204
- className="circle scale"
205
- background="surface-success-subtle"
206
- borderRadius="full"
207
- >
208
- L
209
- </Box>
210
- <Box
211
- className="circle scale"
212
- background="surface-success-subtle"
213
- borderRadius="full"
214
- >
215
- <Bleed marginInline="0 px">L</Bleed>
216
- </Box>
217
- </HStack>
218
- </Box>
219
- </>
220
- ),
221
- };
222
-
223
- export const Full = {
224
- parameters: {
225
- layout: "fullscreen",
226
- },
227
- render: () => (
228
- <>
229
- <style>
230
- {`
231
- .maxWidth {
232
- max-width: 300px;
233
- }
234
- `}
235
- </style>
236
- <VStack gap="2" align="center">
237
- <Box
238
- className="maxWidth"
239
- background="surface-alt-1-subtle"
240
- padding="10"
241
- >
242
- <Box background="surface-alt-2-subtle" padding="10">
243
- <Bleed marginInline="full">
244
- <Box background="surface-success-subtle">
245
- <BodyLong>marginInline=&quot;full&quot;</BodyLong>
246
- </Box>
247
- </Bleed>
248
- </Box>
249
- </Box>
250
- <Box
251
- className="maxWidth"
252
- background="surface-alt-1-subtle"
253
- padding="10"
254
- >
255
- <Box background="surface-alt-2-subtle" padding="10">
256
- <Bleed marginInline="full 0">
257
- <Box background="surface-success-subtle">
258
- <BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
259
- </Box>
260
- </Bleed>
261
- </Box>
262
- </Box>
263
- <Box
264
- className="maxWidth"
265
- background="surface-alt-1-subtle"
266
- padding="10"
267
- >
268
- <Box background="surface-alt-2-subtle" padding="10">
269
- <Bleed marginInline="0 full">
270
- <Box background="surface-success-subtle">
271
- <BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
272
- </Box>
273
- </Bleed>
274
- </Box>
275
- </Box>
276
- <Box
277
- className="maxWidth"
278
- background="surface-alt-1-subtle"
279
- padding="10"
280
- >
281
- <Box background="surface-alt-2-subtle" padding="10">
282
- <Bleed marginInline="full" reflectivePadding asChild>
283
- <Box background="surface-success-subtle">
284
- <BodyLong>full + reflectivePadding</BodyLong>
285
- </Box>
286
- </Bleed>
287
- </Box>
288
- </Box>
289
- </VStack>
290
- </>
291
- ),
292
- };
293
-
294
- export const ReflectivePadding = {
295
- render: () => (
296
- <>
297
- <style>
298
- {`
299
- .navds-bleed {
300
- background-color: var(--a-surface-success-subtle);
301
- width: fit-content;
302
- }
303
- `}
304
- </style>
305
- <HStack gap="3">
306
- <VStack gap="2">
307
- <p>CSS string</p>
308
- <Box background="surface-alt-1-subtle" padding="5">
309
- <Box background="surface-alt-2-subtle" padding="5">
310
- <Bleed asChild>
311
- <BodyLong>before Bleed</BodyLong>
312
- </Bleed>
313
- </Box>
314
- </Box>
315
- <Box background="surface-alt-1-subtle" padding="5">
316
- <Box background="surface-alt-2-subtle" padding="5">
317
- <Bleed marginInline="10 0" asChild>
318
- <BodyLong>without reflectivePadding</BodyLong>
319
- </Bleed>
320
- </Box>
321
- </Box>
322
- <Box background="surface-alt-1-subtle" padding="5">
323
- <Box background="surface-alt-2-subtle" padding="5">
324
- <Bleed marginInline="10 0" reflectivePadding asChild>
325
- <BodyLong>with reflectivePadding</BodyLong>
326
- </Bleed>
327
- </Box>
328
- </Box>
329
- </VStack>
330
-
331
- <VStack gap="2">
332
- <p>breakpoints</p>
333
- <Box
334
- background="surface-alt-1-subtle"
335
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
336
- >
337
- <Box
338
- background="surface-alt-2-subtle"
339
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
340
- >
341
- <Bleed asChild>
342
- <BodyLong>before Bleed</BodyLong>
343
- </Bleed>
344
- </Box>
345
- </Box>
346
- <Box
347
- background="surface-alt-1-subtle"
348
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
349
- >
350
- <Box
351
- background="surface-alt-2-subtle"
352
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
353
- >
354
- <Bleed
355
- marginInline={{
356
- xs: "4 0",
357
- sm: "8 0",
358
- md: "12 0",
359
- lg: "16 0",
360
- xl: "20 0",
361
- }}
362
- asChild
363
- >
364
- <BodyLong>without reflectivePadding</BodyLong>
365
- </Bleed>
366
- </Box>
367
- </Box>
368
- <Box
369
- background="surface-alt-1-subtle"
370
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
371
- >
372
- <Box
373
- background="surface-alt-2-subtle"
374
- padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
375
- >
376
- <Bleed
377
- marginInline={{
378
- xs: "4 0",
379
- sm: "8 0",
380
- md: "12 0",
381
- lg: "16 0",
382
- xl: "20 0",
383
- }}
384
- reflectivePadding
385
- asChild
386
- >
387
- <BodyLong>with reflectivePadding</BodyLong>
388
- </Bleed>
389
- </Box>
390
- </Box>
391
- </VStack>
392
- </HStack>
393
- </>
394
- ),
395
- };