@navikt/ds-react 6.4.1 → 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 (349) hide show
  1. package/cjs/date/datepicker/parts/DayButton.js +1 -1
  2. package/cjs/date/datepicker/parts/DayButton.js.map +1 -1
  3. package/cjs/date/hooks/useDatepicker.js +4 -1
  4. package/cjs/date/hooks/useDatepicker.js.map +1 -1
  5. package/cjs/date/hooks/useMonthPicker.js +4 -1
  6. package/cjs/date/hooks/useMonthPicker.js.map +1 -1
  7. package/cjs/date/monthpicker/MonthButton.js +1 -1
  8. package/cjs/date/monthpicker/MonthButton.js.map +1 -1
  9. package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +2 -4
  10. package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
  11. package/cjs/form/combobox/Input/Input.js +6 -1
  12. package/cjs/form/combobox/Input/Input.js.map +1 -1
  13. package/cjs/form/form-summary/FormSummary.d.ts +82 -0
  14. package/cjs/form/form-summary/FormSummary.js +81 -0
  15. package/cjs/form/form-summary/FormSummary.js.map +1 -0
  16. package/cjs/form/form-summary/FormSummaryAnswer.d.ts +11 -0
  17. package/cjs/form/form-summary/FormSummaryAnswer.js +25 -0
  18. package/cjs/form/form-summary/FormSummaryAnswer.js.map +1 -0
  19. package/cjs/form/form-summary/FormSummaryAnswers.d.ts +9 -0
  20. package/cjs/{toggle-group/ToggleItem.js → form/form-summary/FormSummaryAnswers.js} +6 -10
  21. package/cjs/form/form-summary/FormSummaryAnswers.js.map +1 -0
  22. package/cjs/form/form-summary/FormSummaryEditLink.d.ts +17 -0
  23. package/cjs/form/form-summary/FormSummaryEditLink.js +49 -0
  24. package/cjs/form/form-summary/FormSummaryEditLink.js.map +1 -0
  25. package/cjs/form/form-summary/FormSummaryHeader.d.ts +9 -0
  26. package/cjs/{tabs/TabPanel.js → form/form-summary/FormSummaryHeader.js} +6 -6
  27. package/cjs/form/form-summary/FormSummaryHeader.js.map +1 -0
  28. package/cjs/form/form-summary/FormSummaryHeading.d.ts +14 -0
  29. package/cjs/form/form-summary/FormSummaryHeading.js +31 -0
  30. package/cjs/form/form-summary/FormSummaryHeading.js.map +1 -0
  31. package/cjs/form/form-summary/FormSummaryLabel.d.ts +6 -0
  32. package/cjs/form/form-summary/FormSummaryLabel.js +45 -0
  33. package/cjs/form/form-summary/FormSummaryLabel.js.map +1 -0
  34. package/cjs/form/form-summary/FormSummaryValue.d.ts +6 -0
  35. package/cjs/form/form-summary/FormSummaryValue.js +49 -0
  36. package/cjs/form/form-summary/FormSummaryValue.js.map +1 -0
  37. package/cjs/form/form-summary/index.d.ts +8 -0
  38. package/cjs/form/form-summary/index.js +24 -0
  39. package/cjs/form/form-summary/index.js.map +1 -0
  40. package/cjs/index.d.ts +3 -2
  41. package/cjs/index.js +5 -3
  42. package/cjs/index.js.map +1 -1
  43. package/cjs/tabs/Tabs.context.d.ts +30 -0
  44. package/cjs/tabs/Tabs.context.js +14 -0
  45. package/cjs/tabs/Tabs.context.js.map +1 -0
  46. package/cjs/tabs/Tabs.d.ts +8 -43
  47. package/cjs/tabs/Tabs.js +19 -12
  48. package/cjs/tabs/Tabs.js.map +1 -1
  49. package/cjs/tabs/Tabs.types.d.ts +41 -0
  50. package/cjs/tabs/Tabs.types.js +3 -0
  51. package/cjs/tabs/Tabs.types.js.map +1 -0
  52. package/cjs/tabs/index.d.ts +5 -4
  53. package/cjs/tabs/index.js +6 -6
  54. package/cjs/tabs/index.js.map +1 -1
  55. package/cjs/tabs/parts/tab/Tab.d.ts +25 -0
  56. package/cjs/tabs/parts/tab/Tab.js +64 -0
  57. package/cjs/tabs/parts/tab/Tab.js.map +1 -0
  58. package/cjs/tabs/parts/tab/useTab.d.ts +20 -0
  59. package/cjs/tabs/parts/tab/useTab.js +29 -0
  60. package/cjs/tabs/parts/tab/useTab.js.map +1 -0
  61. package/cjs/tabs/parts/tablist/ScrollButtons.d.ts +8 -0
  62. package/cjs/tabs/parts/tablist/ScrollButtons.js +15 -0
  63. package/cjs/tabs/parts/tablist/ScrollButtons.js.map +1 -0
  64. package/{esm/tabs → cjs/tabs/parts/tablist}/TabList.d.ts +1 -1
  65. package/cjs/tabs/parts/tablist/TabList.js +61 -0
  66. package/cjs/tabs/parts/tablist/TabList.js.map +1 -0
  67. package/cjs/tabs/parts/tablist/useScrollButtons.d.ts +12 -0
  68. package/cjs/tabs/parts/tablist/useScrollButtons.js +61 -0
  69. package/cjs/tabs/parts/tablist/useScrollButtons.js.map +1 -0
  70. package/cjs/tabs/parts/tablist/useTabList.d.ts +7 -0
  71. package/cjs/tabs/parts/tablist/useTabList.js +66 -0
  72. package/cjs/tabs/parts/tablist/useTabList.js.map +1 -0
  73. package/cjs/tabs/parts/tabpanel/TabPanel.d.ts +25 -0
  74. package/cjs/tabs/{Tab.js → parts/tabpanel/TabPanel.js} +7 -20
  75. package/cjs/tabs/parts/tabpanel/TabPanel.js.map +1 -0
  76. package/cjs/tabs/parts/tabpanel/useTabPanel.d.ts +12 -0
  77. package/cjs/tabs/parts/tabpanel/useTabPanel.js +17 -0
  78. package/cjs/tabs/parts/tabpanel/useTabPanel.js.map +1 -0
  79. package/cjs/tabs/useTabs.d.ts +14 -0
  80. package/cjs/tabs/useTabs.js +43 -0
  81. package/cjs/tabs/useTabs.js.map +1 -0
  82. package/cjs/toggle-group/ToggleGroup.context.d.ts +31 -0
  83. package/cjs/toggle-group/ToggleGroup.context.js +16 -0
  84. package/cjs/toggle-group/ToggleGroup.context.js.map +1 -0
  85. package/cjs/toggle-group/ToggleGroup.d.ts +5 -36
  86. package/cjs/toggle-group/ToggleGroup.js +24 -24
  87. package/cjs/toggle-group/ToggleGroup.js.map +1 -1
  88. package/cjs/toggle-group/ToggleGroup.types.d.ts +38 -0
  89. package/cjs/toggle-group/ToggleGroup.types.js +3 -0
  90. package/cjs/toggle-group/ToggleGroup.types.js.map +1 -0
  91. package/cjs/toggle-group/index.d.ts +3 -2
  92. package/cjs/toggle-group/index.js +1 -1
  93. package/cjs/toggle-group/index.js.map +1 -1
  94. package/cjs/toggle-group/{ToggleItem.d.ts → parts/ToggleItem.d.ts} +2 -2
  95. package/cjs/toggle-group/parts/ToggleItem.js +53 -0
  96. package/cjs/toggle-group/parts/ToggleItem.js.map +1 -0
  97. package/cjs/toggle-group/parts/useToggleItem.d.ts +20 -0
  98. package/cjs/toggle-group/parts/useToggleItem.js +76 -0
  99. package/cjs/toggle-group/parts/useToggleItem.js.map +1 -0
  100. package/cjs/toggle-group/useToggleGroup.d.ts +8 -0
  101. package/cjs/toggle-group/useToggleGroup.js +29 -0
  102. package/cjs/toggle-group/useToggleGroup.js.map +1 -0
  103. package/cjs/util/hooks/descendants/descendant.js +10 -1
  104. package/cjs/util/hooks/descendants/descendant.js.map +1 -1
  105. package/cjs/util/hooks/descendants/useDescendant.js +0 -5
  106. package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
  107. package/esm/date/datepicker/parts/DayButton.js +1 -1
  108. package/esm/date/datepicker/parts/DayButton.js.map +1 -1
  109. package/esm/date/hooks/useDatepicker.js +4 -1
  110. package/esm/date/hooks/useDatepicker.js.map +1 -1
  111. package/esm/date/hooks/useMonthPicker.js +4 -1
  112. package/esm/date/hooks/useMonthPicker.js.map +1 -1
  113. package/esm/date/monthpicker/MonthButton.js +1 -1
  114. package/esm/date/monthpicker/MonthButton.js.map +1 -1
  115. package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +2 -4
  116. package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
  117. package/esm/form/combobox/Input/Input.js +6 -1
  118. package/esm/form/combobox/Input/Input.js.map +1 -1
  119. package/esm/form/form-summary/FormSummary.d.ts +82 -0
  120. package/esm/form/form-summary/FormSummary.js +52 -0
  121. package/esm/form/form-summary/FormSummary.js.map +1 -0
  122. package/esm/form/form-summary/FormSummaryAnswer.d.ts +11 -0
  123. package/esm/form/form-summary/FormSummaryAnswer.js +19 -0
  124. package/esm/form/form-summary/FormSummaryAnswer.js.map +1 -0
  125. package/esm/form/form-summary/FormSummaryAnswers.d.ts +9 -0
  126. package/esm/{tabs/TabPanel.js → form/form-summary/FormSummaryAnswers.js} +5 -6
  127. package/esm/form/form-summary/FormSummaryAnswers.js.map +1 -0
  128. package/esm/form/form-summary/FormSummaryEditLink.d.ts +17 -0
  129. package/esm/form/form-summary/FormSummaryEditLink.js +20 -0
  130. package/esm/form/form-summary/FormSummaryEditLink.js.map +1 -0
  131. package/esm/form/form-summary/FormSummaryHeader.d.ts +9 -0
  132. package/esm/form/form-summary/FormSummaryHeader.js +19 -0
  133. package/esm/form/form-summary/FormSummaryHeader.js.map +1 -0
  134. package/esm/form/form-summary/FormSummaryHeading.d.ts +14 -0
  135. package/esm/form/form-summary/FormSummaryHeading.js +5 -0
  136. package/esm/form/form-summary/FormSummaryHeading.js.map +1 -0
  137. package/esm/form/form-summary/FormSummaryLabel.d.ts +6 -0
  138. package/esm/form/form-summary/FormSummaryLabel.js +19 -0
  139. package/esm/form/form-summary/FormSummaryLabel.js.map +1 -0
  140. package/esm/form/form-summary/FormSummaryValue.d.ts +6 -0
  141. package/esm/form/form-summary/FormSummaryValue.js +20 -0
  142. package/esm/form/form-summary/FormSummaryValue.js.map +1 -0
  143. package/esm/form/form-summary/index.d.ts +8 -0
  144. package/esm/form/form-summary/index.js +10 -0
  145. package/esm/form/form-summary/index.js.map +1 -0
  146. package/esm/index.d.ts +3 -2
  147. package/esm/index.js +2 -1
  148. package/esm/index.js.map +1 -1
  149. package/esm/tabs/Tabs.context.d.ts +30 -0
  150. package/esm/tabs/Tabs.context.js +10 -0
  151. package/esm/tabs/Tabs.context.js.map +1 -0
  152. package/esm/tabs/Tabs.d.ts +8 -43
  153. package/esm/tabs/Tabs.js +19 -12
  154. package/esm/tabs/Tabs.js.map +1 -1
  155. package/esm/tabs/Tabs.types.d.ts +41 -0
  156. package/esm/tabs/Tabs.types.js +2 -0
  157. package/esm/tabs/Tabs.types.js.map +1 -0
  158. package/esm/tabs/index.d.ts +5 -4
  159. package/esm/tabs/index.js +3 -3
  160. package/esm/tabs/index.js.map +1 -1
  161. package/esm/tabs/parts/tab/Tab.d.ts +25 -0
  162. package/esm/tabs/parts/tab/Tab.js +35 -0
  163. package/esm/tabs/parts/tab/Tab.js.map +1 -0
  164. package/esm/tabs/parts/tab/useTab.d.ts +20 -0
  165. package/esm/tabs/parts/tab/useTab.js +25 -0
  166. package/esm/tabs/parts/tab/useTab.js.map +1 -0
  167. package/esm/tabs/parts/tablist/ScrollButtons.d.ts +8 -0
  168. package/esm/tabs/parts/tablist/ScrollButtons.js +10 -0
  169. package/esm/tabs/parts/tablist/ScrollButtons.js.map +1 -0
  170. package/{cjs/tabs → esm/tabs/parts/tablist}/TabList.d.ts +1 -1
  171. package/esm/tabs/parts/tablist/TabList.js +32 -0
  172. package/esm/tabs/parts/tablist/TabList.js.map +1 -0
  173. package/esm/tabs/parts/tablist/useScrollButtons.d.ts +12 -0
  174. package/esm/tabs/parts/tablist/useScrollButtons.js +57 -0
  175. package/esm/tabs/parts/tablist/useScrollButtons.js.map +1 -0
  176. package/esm/tabs/parts/tablist/useTabList.d.ts +7 -0
  177. package/esm/tabs/parts/tablist/useTabList.js +62 -0
  178. package/esm/tabs/parts/tablist/useTabList.js.map +1 -0
  179. package/esm/tabs/parts/tabpanel/TabPanel.d.ts +25 -0
  180. package/esm/tabs/parts/tabpanel/TabPanel.js +22 -0
  181. package/esm/tabs/parts/tabpanel/TabPanel.js.map +1 -0
  182. package/esm/tabs/parts/tabpanel/useTabPanel.d.ts +12 -0
  183. package/esm/tabs/parts/tabpanel/useTabPanel.js +13 -0
  184. package/esm/tabs/parts/tabpanel/useTabPanel.js.map +1 -0
  185. package/esm/tabs/useTabs.d.ts +14 -0
  186. package/esm/tabs/useTabs.js +39 -0
  187. package/esm/tabs/useTabs.js.map +1 -0
  188. package/esm/toggle-group/ToggleGroup.context.d.ts +31 -0
  189. package/esm/toggle-group/ToggleGroup.context.js +12 -0
  190. package/esm/toggle-group/ToggleGroup.context.js.map +1 -0
  191. package/esm/toggle-group/ToggleGroup.d.ts +5 -36
  192. package/esm/toggle-group/ToggleGroup.js +24 -24
  193. package/esm/toggle-group/ToggleGroup.js.map +1 -1
  194. package/esm/toggle-group/ToggleGroup.types.d.ts +38 -0
  195. package/esm/toggle-group/ToggleGroup.types.js +2 -0
  196. package/esm/toggle-group/ToggleGroup.types.js.map +1 -0
  197. package/esm/toggle-group/index.d.ts +3 -2
  198. package/esm/toggle-group/index.js +1 -1
  199. package/esm/toggle-group/index.js.map +1 -1
  200. package/esm/toggle-group/{ToggleItem.d.ts → parts/ToggleItem.d.ts} +2 -2
  201. package/esm/toggle-group/parts/ToggleItem.js +25 -0
  202. package/esm/toggle-group/parts/ToggleItem.js.map +1 -0
  203. package/esm/toggle-group/parts/useToggleItem.d.ts +20 -0
  204. package/esm/toggle-group/parts/useToggleItem.js +72 -0
  205. package/esm/toggle-group/parts/useToggleItem.js.map +1 -0
  206. package/esm/toggle-group/useToggleGroup.d.ts +8 -0
  207. package/esm/toggle-group/useToggleGroup.js +25 -0
  208. package/esm/toggle-group/useToggleGroup.js.map +1 -0
  209. package/esm/util/hooks/descendants/descendant.js +10 -1
  210. package/esm/util/hooks/descendants/descendant.js.map +1 -1
  211. package/esm/util/hooks/descendants/useDescendant.js +0 -5
  212. package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
  213. package/package.json +15 -6
  214. package/src/date/datepicker/parts/DayButton.tsx +2 -0
  215. package/src/date/hooks/useDatepicker.tsx +5 -1
  216. package/src/date/hooks/useMonthPicker.tsx +5 -1
  217. package/src/date/monthpicker/MonthButton.tsx +1 -0
  218. package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +9 -1
  219. package/src/form/combobox/Input/Input.tsx +5 -0
  220. package/src/form/form-summary/FormSummary.tsx +106 -0
  221. package/src/form/form-summary/FormSummaryAnswer.tsx +27 -0
  222. package/src/form/form-summary/FormSummaryAnswers.tsx +25 -0
  223. package/src/form/form-summary/FormSummaryEditLink.tsx +35 -0
  224. package/src/form/form-summary/FormSummaryHeader.tsx +25 -0
  225. package/src/form/form-summary/FormSummaryHeading.tsx +23 -0
  226. package/src/form/form-summary/FormSummaryLabel.tsx +17 -0
  227. package/src/form/form-summary/FormSummaryValue.tsx +24 -0
  228. package/src/form/form-summary/index.ts +30 -0
  229. package/src/index.ts +16 -15
  230. package/src/tabs/Tabs.context.ts +24 -0
  231. package/src/tabs/Tabs.test.tsx +99 -37
  232. package/src/tabs/Tabs.tsx +48 -70
  233. package/src/tabs/Tabs.types.ts +43 -0
  234. package/src/tabs/index.ts +11 -4
  235. package/src/tabs/parts/tab/Tab.tsx +93 -0
  236. package/src/tabs/parts/tab/useTab.ts +52 -0
  237. package/src/tabs/parts/tablist/ScrollButtons.tsx +29 -0
  238. package/src/tabs/parts/tablist/TabList.tsx +56 -0
  239. package/src/tabs/parts/tablist/useScrollButtons.ts +69 -0
  240. package/src/tabs/parts/tablist/useTabList.ts +68 -0
  241. package/src/tabs/parts/tabpanel/TabPanel.tsx +50 -0
  242. package/src/tabs/parts/tabpanel/useTabPanel.ts +18 -0
  243. package/src/tabs/useTabs.ts +51 -0
  244. package/src/toggle-group/ToggleGroup.context.ts +31 -0
  245. package/src/toggle-group/ToggleGroup.test.tsx +57 -16
  246. package/src/toggle-group/ToggleGroup.tsx +63 -90
  247. package/src/toggle-group/ToggleGroup.types.ts +40 -0
  248. package/src/toggle-group/index.ts +3 -2
  249. package/src/toggle-group/parts/ToggleItem.tsx +55 -0
  250. package/src/toggle-group/parts/useToggleItem.ts +104 -0
  251. package/src/toggle-group/useToggleGroup.ts +33 -0
  252. package/src/util/hooks/descendants/descendant.ts +15 -1
  253. package/src/util/hooks/descendants/useDescendant.tsx +0 -5
  254. package/cjs/tabs/Tab.d.ts +0 -18
  255. package/cjs/tabs/Tab.js.map +0 -1
  256. package/cjs/tabs/TabList.js +0 -111
  257. package/cjs/tabs/TabList.js.map +0 -1
  258. package/cjs/tabs/TabPanel.d.ts +0 -13
  259. package/cjs/tabs/TabPanel.js.map +0 -1
  260. package/cjs/tabs/context.d.ts +0 -8
  261. package/cjs/tabs/context.js +0 -6
  262. package/cjs/tabs/context.js.map +0 -1
  263. package/cjs/toggle-group/ToggleItem.js.map +0 -1
  264. package/cjs/toggle-group/context.d.ts +0 -6
  265. package/cjs/toggle-group/context.js +0 -6
  266. package/cjs/toggle-group/context.js.map +0 -1
  267. package/esm/tabs/Tab.d.ts +0 -18
  268. package/esm/tabs/Tab.js +0 -34
  269. package/esm/tabs/Tab.js.map +0 -1
  270. package/esm/tabs/TabList.js +0 -82
  271. package/esm/tabs/TabList.js.map +0 -1
  272. package/esm/tabs/TabPanel.d.ts +0 -13
  273. package/esm/tabs/TabPanel.js.map +0 -1
  274. package/esm/tabs/context.d.ts +0 -8
  275. package/esm/tabs/context.js +0 -3
  276. package/esm/tabs/context.js.map +0 -1
  277. package/esm/toggle-group/ToggleItem.js +0 -24
  278. package/esm/toggle-group/ToggleItem.js.map +0 -1
  279. package/esm/toggle-group/context.d.ts +0 -6
  280. package/esm/toggle-group/context.js +0 -3
  281. package/esm/toggle-group/context.js.map +0 -1
  282. package/src/accordion/accordion.stories.tsx +0 -286
  283. package/src/alert/alert.stories.tsx +0 -306
  284. package/src/button/button.stories.tsx +0 -185
  285. package/src/chat/chat.stories.tsx +0 -341
  286. package/src/chips/chips.stories.tsx +0 -260
  287. package/src/copybutton/copy-button.stories.tsx +0 -261
  288. package/src/date/datepicker/datepicker.stories.tsx +0 -575
  289. package/src/date/monthpicker/monthpicker.stories.tsx +0 -204
  290. package/src/dropdown/dropdown.stories.tsx +0 -124
  291. package/src/expansion-card/expansion-card.stories.tsx +0 -282
  292. package/src/form/checkbox/checkbox.stories.tsx +0 -281
  293. package/src/form/combobox/combobox.stories.tsx +0 -626
  294. package/src/form/confirmation-panel/confirmation-panel.stories.tsx +0 -128
  295. package/src/form/error-summary/error-summary.stories.tsx +0 -81
  296. package/src/form/fieldset/fieldset.stories.tsx +0 -157
  297. package/src/form/file-upload/file-upload-dropzone.stories.tsx +0 -123
  298. package/src/form/file-upload/file-upload-item.stories.tsx +0 -148
  299. package/src/form/file-upload/file-upload.stories.tsx +0 -248
  300. package/src/form/radio/radio.stories.tsx +0 -230
  301. package/src/form/search/search.stories.tsx +0 -238
  302. package/src/form/select/select.stories.tsx +0 -172
  303. package/src/form/switch/switch.stories.tsx +0 -171
  304. package/src/form/textarea/textarea.stories.tsx +0 -254
  305. package/src/form/textfield/text-field.stories.tsx +0 -143
  306. package/src/guide-panel/guidepanel.stories.tsx +0 -90
  307. package/src/help-text/help-text.stories.tsx +0 -91
  308. package/src/internal-header/header.stories.tsx +0 -229
  309. package/src/layout/bleed/Bleed.stories.tsx +0 -395
  310. package/src/layout/box/Box.stories.tsx +0 -380
  311. package/src/layout/grid/h-grid.stories.tsx +0 -122
  312. package/src/layout/page/Page.stories.tsx +0 -271
  313. package/src/layout/responsive/hide.stories.tsx +0 -80
  314. package/src/layout/responsive/show.stories.tsx +0 -80
  315. package/src/layout/sidemal-test/navno-sidemal.stories.tsx +0 -69
  316. package/src/layout/stack/stack.stories.tsx +0 -183
  317. package/src/link/stories/link.stories.tsx +0 -304
  318. package/src/link-panel/link-panel.stories.tsx +0 -59
  319. package/src/list/list.stories.tsx +0 -280
  320. package/src/loader/loader.stories.tsx +0 -82
  321. package/src/modal/modal.stories.tsx +0 -395
  322. package/src/pagination/pagination.stories.tsx +0 -110
  323. package/src/popover/popover.stories.tsx +0 -113
  324. package/src/portal/Portal.stories.tsx +0 -102
  325. package/src/read-more/readmore.stories.tsx +0 -91
  326. package/src/skeleton/skeleton.stories.tsx +0 -130
  327. package/src/stepper/stepper.stories.tsx +0 -200
  328. package/src/table/stories/table-1.stories.tsx +0 -292
  329. package/src/table/stories/table-2-expandable.stories.tsx +0 -298
  330. package/src/table/stories/table-3-async.stories.tsx +0 -179
  331. package/src/table/stories/tests/table.stories.tsx +0 -102
  332. package/src/tabs/Tab.tsx +0 -66
  333. package/src/tabs/TabList.tsx +0 -128
  334. package/src/tabs/TabPanel.tsx +0 -26
  335. package/src/tabs/Tabs.stories.tsx +0 -191
  336. package/src/tabs/context.ts +0 -9
  337. package/src/tag/tag.stories.tsx +0 -126
  338. package/src/timeline/timeline.stories.tsx +0 -445
  339. package/src/toggle-group/ToggleGroup.stories.tsx +0 -137
  340. package/src/toggle-group/ToggleItem.tsx +0 -41
  341. package/src/toggle-group/context.ts +0 -9
  342. package/src/tooltip/tooltip.stories.tsx +0 -101
  343. package/src/typography/stories/bodylong.stories.tsx +0 -209
  344. package/src/typography/stories/bodyshort.stories.tsx +0 -208
  345. package/src/typography/stories/detail.stories.tsx +0 -115
  346. package/src/typography/stories/error-message.stories.tsx +0 -122
  347. package/src/typography/stories/heading.stories.tsx +0 -169
  348. package/src/typography/stories/label.stories.tsx +0 -131
  349. 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
- };