@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.11

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 (350) hide show
  1. package/README.md +41 -22
  2. package/bin/jokul.mjs +10 -0
  3. package/bin/run-jokul-cli.mjs +63 -0
  4. package/build/build-stats.html +1 -1
  5. package/build/cjs/components/card/Card.cjs +1 -1
  6. package/build/cjs/components/card/Card.cjs.map +1 -1
  7. package/build/cjs/components/card/index.d.cts +1 -1
  8. package/build/cjs/components/card/types.cjs +1 -1
  9. package/build/cjs/components/card/types.cjs.map +1 -1
  10. package/build/cjs/components/card/types.d.cts +3 -6
  11. package/build/cjs/components/checkbox/Checkbox.cjs +1 -1
  12. package/build/cjs/components/checkbox/Checkbox.cjs.map +1 -1
  13. package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
  14. package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
  15. package/build/cjs/components/cookie-consent/CookieConsent.d.cts +1 -1
  16. package/build/cjs/components/cookie-consent/types.d.cts +4 -0
  17. package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
  18. package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
  19. package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
  20. package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
  21. package/build/cjs/components/link/Link.cjs +1 -1
  22. package/build/cjs/components/link/Link.cjs.map +1 -1
  23. package/build/cjs/components/link/Link.d.cts +2 -2
  24. package/build/cjs/components/link/types.d.cts +1 -4
  25. package/build/cjs/components/modal/Modal.cjs +1 -1
  26. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  27. package/build/cjs/components/modal/Modal.d.cts +2 -9
  28. package/build/cjs/components/modal/index.d.cts +1 -1
  29. package/build/cjs/components/modal/types.d.cts +18 -0
  30. package/build/cjs/components/popover/Popover.cjs +1 -1
  31. package/build/cjs/components/popover/Popover.cjs.map +1 -1
  32. package/build/cjs/components/radio-button/BaseRadioButton.cjs +1 -1
  33. package/build/cjs/components/radio-button/BaseRadioButton.cjs.map +1 -1
  34. package/build/cjs/components/text-area/BaseTextArea.cjs +1 -1
  35. package/build/cjs/components/text-area/BaseTextArea.cjs.map +1 -1
  36. package/build/cjs/components/text-area/counter.cjs +2 -0
  37. package/build/cjs/components/text-area/counter.cjs.map +1 -0
  38. package/build/cjs/components/text-area/counter.d.cts +2 -0
  39. package/build/cjs/components/text-area/types.d.cts +21 -1
  40. package/build/cjs/components/typography/Text.cjs +2 -0
  41. package/build/cjs/components/typography/Text.cjs.map +1 -0
  42. package/build/cjs/components/typography/Text.d.cts +5 -0
  43. package/build/cjs/components/typography/Title.cjs +2 -0
  44. package/build/cjs/components/typography/Title.cjs.map +1 -0
  45. package/build/cjs/components/typography/Title.d.cts +5 -0
  46. package/build/cjs/components/typography/index.cjs +2 -0
  47. package/build/cjs/components/typography/index.cjs.map +1 -0
  48. package/build/cjs/components/typography/index.d.cts +3 -0
  49. package/build/cjs/components/typography/types.cjs +2 -0
  50. package/build/cjs/components/typography/types.cjs.map +1 -0
  51. package/build/cjs/components/typography/types.d.cts +48 -0
  52. package/build/cjs/tokens.cjs +1 -1
  53. package/build/cjs/tokens.cjs.map +1 -1
  54. package/build/cjs/tokens.d.cts +90 -38
  55. package/build/es/components/card/Card.js +1 -1
  56. package/build/es/components/card/Card.js.map +1 -1
  57. package/build/es/components/card/index.d.ts +1 -1
  58. package/build/es/components/card/types.d.ts +3 -6
  59. package/build/es/components/card/types.js +1 -1
  60. package/build/es/components/card/types.js.map +1 -1
  61. package/build/es/components/checkbox/Checkbox.js +1 -1
  62. package/build/es/components/checkbox/Checkbox.js.map +1 -1
  63. package/build/es/components/cookie-consent/CookieConsent.d.ts +1 -1
  64. package/build/es/components/cookie-consent/CookieConsent.js +1 -1
  65. package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
  66. package/build/es/components/cookie-consent/types.d.ts +4 -0
  67. package/build/es/components/datepicker/DatePicker.js +1 -1
  68. package/build/es/components/datepicker/DatePicker.js.map +1 -1
  69. package/build/es/components/expander/ExpandablePanel.js +1 -1
  70. package/build/es/components/expander/ExpandablePanel.js.map +1 -1
  71. package/build/es/components/link/Link.d.ts +2 -2
  72. package/build/es/components/link/Link.js +1 -1
  73. package/build/es/components/link/Link.js.map +1 -1
  74. package/build/es/components/link/types.d.ts +1 -4
  75. package/build/es/components/modal/Modal.d.ts +2 -9
  76. package/build/es/components/modal/Modal.js +1 -1
  77. package/build/es/components/modal/Modal.js.map +1 -1
  78. package/build/es/components/modal/index.d.ts +1 -1
  79. package/build/es/components/modal/types.d.ts +18 -0
  80. package/build/es/components/popover/Popover.js +1 -1
  81. package/build/es/components/popover/Popover.js.map +1 -1
  82. package/build/es/components/radio-button/BaseRadioButton.js +1 -1
  83. package/build/es/components/radio-button/BaseRadioButton.js.map +1 -1
  84. package/build/es/components/text-area/BaseTextArea.js +1 -1
  85. package/build/es/components/text-area/BaseTextArea.js.map +1 -1
  86. package/build/es/components/text-area/counter.d.ts +2 -0
  87. package/build/es/components/text-area/counter.js +2 -0
  88. package/build/es/components/text-area/counter.js.map +1 -0
  89. package/build/es/components/text-area/types.d.ts +21 -1
  90. package/build/es/components/typography/Text.d.ts +5 -0
  91. package/build/es/components/typography/Text.js +2 -0
  92. package/build/es/components/typography/Text.js.map +1 -0
  93. package/build/es/components/typography/Title.d.ts +5 -0
  94. package/build/es/components/typography/Title.js +2 -0
  95. package/build/es/components/typography/Title.js.map +1 -0
  96. package/build/es/components/typography/index.d.ts +3 -0
  97. package/build/es/components/typography/index.js +2 -0
  98. package/build/es/components/typography/index.js.map +1 -0
  99. package/build/es/components/typography/types.d.ts +48 -0
  100. package/build/es/components/typography/types.js +2 -0
  101. package/build/es/components/typography/types.js.map +1 -0
  102. package/build/es/tokens.d.ts +90 -38
  103. package/build/es/tokens.js +1 -1
  104. package/build/es/tokens.js.map +1 -1
  105. package/codemods/CODEMODS.md +133 -0
  106. package/codemods/__tests__/import-paths.test.mjs +648 -0
  107. package/codemods/import-paths.mjs +198 -0
  108. package/codemods/transforms/color-tokens.mjs +77 -0
  109. package/codemods/transforms/font-family.mjs +23 -0
  110. package/codemods/transforms/import-specifiers.mjs +230 -0
  111. package/codemods/transforms/warnings.mjs +41 -0
  112. package/codemods/utils.mjs +35 -0
  113. package/package.json +7 -1
  114. package/src/fonts/InterVariable-Italic.woff2 +0 -0
  115. package/src/fonts/InterVariable.woff2 +0 -0
  116. package/src/fonts/brands/dnb/DNB-Bold.woff2 +0 -0
  117. package/src/fonts/brands/dnb/DNB-Medium.woff2 +0 -0
  118. package/src/fonts/brands/dnb/DNB-Regular.woff2 +0 -0
  119. package/src/fonts/brands/dnb/DNBMono-Regular.woff2 +0 -0
  120. package/src/fonts/brands/eika/OpenSans-Bold.woff2 +0 -0
  121. package/src/fonts/brands/eika/OpenSans-Light.woff2 +0 -0
  122. package/src/fonts/brands/eika/OpenSans-Regular.woff2 +0 -0
  123. package/src/fonts/brands/eika/OpenSans-SemiBold.woff2 +0 -0
  124. package/src/fonts/brands/fremtind/Fremtind-Material-Symbols.woff2 +0 -0
  125. package/src/fonts/brands/fremtind/InterVariable-Italic.woff2 +0 -0
  126. package/src/fonts/brands/fremtind/InterVariable.woff2 +0 -0
  127. package/src/fonts/brands/sparebank1/SpareBank1-Medium-Web.woff2 +0 -0
  128. package/src/fonts/brands/sparebank1/SpareBank1-Regular-Web.woff2 +0 -0
  129. package/src/fonts/brands/sparebank1/SpareBank1-Title-Medium-Web.woff2 +0 -0
  130. package/styles/base.css +819 -218
  131. package/styles/base.min.css +1 -1
  132. package/styles/components/autosuggest/autosuggest.css +4 -4
  133. package/styles/components/autosuggest/autosuggest.min.css +1 -1
  134. package/styles/components/autosuggest/autosuggest.scss +4 -4
  135. package/styles/components/beta/description-list/description-list.css +1 -1
  136. package/styles/components/beta/description-list/description-list.min.css +1 -1
  137. package/styles/components/beta/description-list/description-list.scss +1 -1
  138. package/styles/components/beta/nav-link/navlink.css +4 -4
  139. package/styles/components/beta/nav-link/navlink.min.css +1 -1
  140. package/styles/components/beta/nav-link/navlink.scss +6 -4
  141. package/styles/components/beta/select/select.css +9 -9
  142. package/styles/components/beta/select/select.min.css +1 -1
  143. package/styles/components/beta/select/select.scss +8 -7
  144. package/styles/components/breadcrumb/breadcrumb.css +1 -1
  145. package/styles/components/breadcrumb/breadcrumb.min.css +1 -1
  146. package/styles/components/button/button.css +8 -4
  147. package/styles/components/button/button.min.css +1 -1
  148. package/styles/components/button/button.scss +14 -14
  149. package/styles/components/card/card.css +6 -11
  150. package/styles/components/card/card.min.css +1 -1
  151. package/styles/components/card/card.scss +5 -12
  152. package/styles/components/checkbox/checkbox.css +43 -15
  153. package/styles/components/checkbox/checkbox.min.css +1 -1
  154. package/styles/components/checkbox/checkbox.scss +35 -24
  155. package/styles/components/checkbox-panel/checkbox-panel.css +65 -32
  156. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  157. package/styles/components/checkbox-panel/checkbox-panel.scss +4 -0
  158. package/styles/components/checkbox-panel/development/styles.scss +1 -1
  159. package/styles/components/chip/chip.css +6 -6
  160. package/styles/components/chip/chip.min.css +1 -1
  161. package/styles/components/chip/chip.scss +6 -6
  162. package/styles/components/combobox/combobox.css +25 -23
  163. package/styles/components/combobox/combobox.min.css +1 -1
  164. package/styles/components/combobox/combobox.scss +15 -18
  165. package/styles/components/countdown/countdown.css +4 -4
  166. package/styles/components/countdown/countdown.min.css +1 -1
  167. package/styles/components/datepicker/_calendar-date-button.scss +11 -9
  168. package/styles/components/datepicker/_calendar-navigation-dropdown.scss +1 -1
  169. package/styles/components/datepicker/_calendar.scss +6 -7
  170. package/styles/components/datepicker/datepicker.css +20 -12
  171. package/styles/components/datepicker/datepicker.min.css +1 -1
  172. package/styles/components/description-list/description-list.css +1 -1
  173. package/styles/components/description-list/description-list.min.css +1 -1
  174. package/styles/components/description-list/description-list.scss +1 -1
  175. package/styles/components/expander/expandable.css +29 -27
  176. package/styles/components/expander/expandable.min.css +1 -1
  177. package/styles/components/expander/expandable.scss +29 -30
  178. package/styles/components/feedback/_index.scss +1 -1
  179. package/styles/components/feedback/feedback.css +6 -8
  180. package/styles/components/feedback/feedback.min.css +1 -1
  181. package/styles/components/feedback/feedback.scss +4 -9
  182. package/styles/components/file/file.css +5 -5
  183. package/styles/components/file/file.min.css +1 -1
  184. package/styles/components/file/file.scss +5 -5
  185. package/styles/components/file-input/file-input.css +29 -25
  186. package/styles/components/file-input/file-input.min.css +1 -1
  187. package/styles/components/file-input/file-input.scss +3 -3
  188. package/styles/components/help/help.css +2 -2
  189. package/styles/components/help/help.min.css +1 -1
  190. package/styles/components/help/help.scss +4 -4
  191. package/styles/components/icon/_base-styles.scss +12 -14
  192. package/styles/components/icon/icon.css +5 -5
  193. package/styles/components/icon/icon.min.css +1 -1
  194. package/styles/components/icon/icon.scss +73 -73
  195. package/styles/components/icon-button/icon-button.css +2 -2
  196. package/styles/components/icon-button/icon-button.min.css +1 -1
  197. package/styles/components/icon-button/icon-button.scss +1 -1
  198. package/styles/components/input-group/input-group.css +2 -2
  199. package/styles/components/input-group/input-group.min.css +1 -1
  200. package/styles/components/input-panel/input-panel.css +19 -17
  201. package/styles/components/input-panel/input-panel.min.css +1 -1
  202. package/styles/components/input-panel/input-panel.scss +21 -20
  203. package/styles/components/link/link.css +2 -2
  204. package/styles/components/link/link.min.css +1 -1
  205. package/styles/components/link-list/link-list.css +8 -4
  206. package/styles/components/link-list/link-list.min.css +1 -1
  207. package/styles/components/link-list/link-list.scss +7 -3
  208. package/styles/components/list/list.css +37 -21
  209. package/styles/components/list/list.min.css +1 -1
  210. package/styles/components/list/list.scss +27 -23
  211. package/styles/components/loader/loader.css +6 -6
  212. package/styles/components/loader/loader.min.css +1 -1
  213. package/styles/components/loader/skeleton-loader.css +4 -4
  214. package/styles/components/loader/skeleton-loader.min.css +1 -1
  215. package/styles/components/loader/skeleton-loader.scss +1 -1
  216. package/styles/components/menu/_menu-divider.scss +1 -1
  217. package/styles/components/menu/_menu-item.scss +2 -2
  218. package/styles/components/menu/menu.css +5 -5
  219. package/styles/components/menu/menu.min.css +1 -1
  220. package/styles/components/menu/menu.scss +2 -2
  221. package/styles/components/message/message.css +20 -10
  222. package/styles/components/message/message.min.css +1 -1
  223. package/styles/components/message/message.scss +19 -12
  224. package/styles/components/modal/_layout.scss +22 -0
  225. package/styles/components/modal/_modal-base.scss +32 -0
  226. package/styles/components/modal/_motion.scss +45 -0
  227. package/styles/components/modal/_overlay.scss +20 -0
  228. package/styles/components/modal/_parts.scss +33 -0
  229. package/styles/components/modal/_placement.scss +59 -0
  230. package/styles/components/modal/modal.css +118 -34
  231. package/styles/components/modal/modal.min.css +1 -1
  232. package/styles/components/modal/modal.scss +6 -95
  233. package/styles/components/nav-link/nav-link.css +1 -1
  234. package/styles/components/nav-link/nav-link.min.css +1 -1
  235. package/styles/components/pagination/development/styles.scss +1 -1
  236. package/styles/components/pagination/pagination.css +3 -3
  237. package/styles/components/pagination/pagination.min.css +1 -1
  238. package/styles/components/pagination/pagination.scss +2 -2
  239. package/styles/components/popover/popover.css +12 -1
  240. package/styles/components/popover/popover.min.css +1 -1
  241. package/styles/components/popover/popover.scss +15 -1
  242. package/styles/components/progress-bar/progress-bar.css +27 -3
  243. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  244. package/styles/components/progress-bar/progress-bar.scss +5 -0
  245. package/styles/components/radio-button/radio-button.css +43 -8
  246. package/styles/components/radio-button/radio-button.min.css +1 -1
  247. package/styles/components/radio-button/radio-button.scss +35 -16
  248. package/styles/components/radio-panel/development/styles.scss +1 -1
  249. package/styles/components/radio-panel/radio-panel.css +22 -17
  250. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  251. package/styles/components/radio-panel/radio-panel.scss +4 -0
  252. package/styles/components/search/search-with-submit-button.css +1 -1
  253. package/styles/components/search/search-with-submit-button.min.css +1 -1
  254. package/styles/components/search/search-with-submit-button.scss +1 -1
  255. package/styles/components/search/search.css +4 -4
  256. package/styles/components/search/search.min.css +1 -1
  257. package/styles/components/search/search.scss +3 -3
  258. package/styles/components/segmented-control/segmented-control.css +61 -26
  259. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  260. package/styles/components/segmented-control/segmented-control.scss +7 -7
  261. package/styles/components/select/select.css +17 -18
  262. package/styles/components/select/select.min.css +1 -1
  263. package/styles/components/select/select.scss +24 -29
  264. package/styles/components/summary-table/development/summary-table-example.scss +1 -1
  265. package/styles/components/summary-table/summary-table.css +2 -2
  266. package/styles/components/summary-table/summary-table.min.css +1 -1
  267. package/styles/components/summary-table/summary-table.scss +2 -2
  268. package/styles/components/system-message/system-message.css +23 -13
  269. package/styles/components/system-message/system-message.min.css +1 -1
  270. package/styles/components/system-message/system-message.scss +119 -108
  271. package/styles/components/table/_table-head.scss +1 -1
  272. package/styles/components/table/_table-row.scss +5 -3
  273. package/styles/components/table/table.css +6 -4
  274. package/styles/components/table/table.min.css +1 -1
  275. package/styles/components/table-of-contents/table-of-contents.css +2 -2
  276. package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
  277. package/styles/components/table-of-contents/table-of-contents.scss +3 -3
  278. package/styles/components/tabs/tabs.css +5 -5
  279. package/styles/components/tabs/tabs.min.css +1 -1
  280. package/styles/components/tabs/tabs.scss +5 -6
  281. package/styles/components/tag/tag.css +16 -6
  282. package/styles/components/tag/tag.min.css +1 -1
  283. package/styles/components/tag/tag.scss +18 -7
  284. package/styles/components/text-area/text-area.css +12 -12
  285. package/styles/components/text-area/text-area.min.css +1 -1
  286. package/styles/components/text-input/text-input.css +12 -12
  287. package/styles/components/text-input/text-input.min.css +1 -1
  288. package/styles/components/toast/toast.css +20 -13
  289. package/styles/components/toast/toast.min.css +1 -1
  290. package/styles/components/toast/toast.scss +19 -18
  291. package/styles/components/toggle-switch/_toggle-slider.scss +4 -4
  292. package/styles/components/toggle-switch/toggle-switch.css +15 -25
  293. package/styles/components/toggle-switch/toggle-switch.min.css +1 -3
  294. package/styles/components/toggle-switch/toggle-switch.scss +10 -22
  295. package/styles/components/tooltip/tooltip.css +5 -5
  296. package/styles/components/tooltip/tooltip.min.css +1 -1
  297. package/styles/components/tooltip/tooltip.scss +5 -5
  298. package/styles/components/typography/_index.scss +2 -0
  299. package/styles/components/typography/text.css +38 -0
  300. package/styles/components/typography/text.min.css +1 -0
  301. package/styles/components/typography/text.scss +54 -0
  302. package/styles/components/typography/title.css +55 -0
  303. package/styles/components/typography/title.min.css +1 -0
  304. package/styles/components/typography/title.scss +59 -0
  305. package/styles/components.css +729 -395
  306. package/styles/components.min.css +1 -3
  307. package/styles/components.scss +53 -52
  308. package/styles/global/_base-class.scss +2 -2
  309. package/styles/global/_top-layer.scss +1 -1
  310. package/styles/hooks/stories/styles.scss +3 -3
  311. package/styles/jkl/_ornaments.scss +1 -1
  312. package/styles/jkl/_tokens.scss +140 -66
  313. package/styles/jkl/_typography.scss +13 -21
  314. package/styles/shared/input/shared-input-styles.scss +11 -15
  315. package/styles/shared/track/track.scss +2 -2
  316. package/styles/tailwind.css +106 -62
  317. package/styles/theme/_color-scheme.scss +107 -60
  318. package/styles/theme/_dynamic-spacing.scss +24 -18
  319. package/styles/theme/_fonts.scss +19 -78
  320. package/styles/theme/_index.scss +4 -0
  321. package/styles/theme/_size.scss +20 -20
  322. package/styles/theme/_tokens.scss +14 -14
  323. package/styles/theme/brands/dnb/_color-scheme.scss +121 -0
  324. package/styles/theme/brands/dnb/_fonts.scss +46 -0
  325. package/styles/theme/brands/dnb/_index.scss +2 -0
  326. package/styles/theme/brands/eika/_color-scheme.scss +121 -0
  327. package/styles/theme/brands/eika/_fonts.scss +46 -0
  328. package/styles/theme/brands/eika/_index.scss +2 -0
  329. package/styles/theme/brands/fremtind/_color-scheme.scss +121 -0
  330. package/styles/theme/brands/fremtind/_fonts.scss +30 -0
  331. package/styles/theme/brands/fremtind/_index.scss +2 -0
  332. package/styles/theme/brands/sparebank1/_color-scheme.scss +121 -0
  333. package/styles/theme/brands/sparebank1/_fonts.scss +38 -0
  334. package/styles/theme/brands/sparebank1/_index.scss +2 -0
  335. package/styles/utility/_headings.scss +1 -1
  336. package/styles/utility/_paragraphs.scss +2 -2
  337. package/styles/utility/_screen-reader.scss +1 -1
  338. package/styles/utility/_spacing.scss +2 -2
  339. package/src/fonts/FremtindGrotesk-Bold-Web.woff +0 -0
  340. package/src/fonts/FremtindGrotesk-Bold-Web.woff2 +0 -0
  341. package/src/fonts/FremtindGrotesk-BoldItalic-Web.woff +0 -0
  342. package/src/fonts/FremtindGrotesk-BoldItalic-Web.woff2 +0 -0
  343. package/src/fonts/FremtindGrotesk-Display-Web.woff +0 -0
  344. package/src/fonts/FremtindGrotesk-Display-Web.woff2 +0 -0
  345. package/src/fonts/FremtindGrotesk-Italic-Web.woff +0 -0
  346. package/src/fonts/FremtindGrotesk-Italic-Web.woff2 +0 -0
  347. package/src/fonts/FremtindGrotesk-Regular-Web.woff +0 -0
  348. package/src/fonts/FremtindGrotesk-Regular-Web.woff2 +0 -0
  349. package/src/fonts/FremtindGroteskMono-Regular-Web.woff +0 -0
  350. package/src/fonts/FremtindGroteskMono-Regular-Web.woff2 +0 -0
package/README.md CHANGED
@@ -1,17 +1,40 @@
1
1
  # @fremtind/jokul
2
2
 
3
- - [Migrering til monopakke](#migrering-til-monopakke)
4
- - [React-komponenter](#react-komponenter)
5
- - [Stilark](#stilark)
6
- - [Fonter](#fonter)
7
- - [Hooks](#hooks)
8
- - [Utilities](#utilities)
9
- - [Tailwind](#tailwind)
3
+ - [Migrering til monopakke](#migrering-til-monopakke)
4
+ - [Codemods](#codemods)
5
+ - [React-komponenter](#react-komponenter)
6
+ - [Stilark](#stilark)
7
+ - [Fonter](#fonter)
8
+ - [Hooks](#hooks)
9
+ - [Utilities](#utilities)
10
+ - [Tailwind](#tailwind)
10
11
 
11
12
  ## Migrering til `@fremtind/jokul`
12
13
 
13
14
  Dersom du bruker dagens pakkestruktur med pakker for hver komponent har vi laget en [migrasjonsguide](./MIGRATION.md) for hvordan du går over til å bruke `@fremtind/jokul`.
14
15
 
16
+ ## Codemods
17
+
18
+ Hvis du oppgraderer til `5.0.0` eller nyere kan du bruke codemoden vår for å oppdatere importstier til dagens struktur.
19
+
20
+ Primær-CLI-et er `jokul`, og codemods kjøres som `jokul codemod`. Hvordan du starter det avhenger av package manageren din:
21
+
22
+ ```bash
23
+ # pnpm
24
+ pnpm exec jokul codemod --dry-run
25
+ pnpm exec jokul codemod
26
+
27
+ # npm
28
+ npx jokul codemod --dry-run
29
+ npx jokul codemod
30
+
31
+ # Valgfritt: begrens kjøringen til bestemte mapper
32
+ jokul codemod src app --dry-run
33
+ jokul codemod src app
34
+ ```
35
+
36
+ Codemoden oppdaterer sikre stier automatisk og varsler når den finner tvetydige stilimports for beta-komponenter som må vurderes manuelt. Den fjerner `@fremtind/jokul/styles/fonts/webfonts.css`-imports siden `@font-face`-definisjonene nå ligger i `styles/base.css`, bytter ut det gamle font-family-navnet `Fremtind Material Symbols` med `Jokul Icons`, og flagger fjernede Sass-fargevariabler, gamle `light-mode-variables`/`dark-mode-variables`-mixins og utdaterte `text-style`-navn (`"body"`, `"small"`).
37
+
15
38
  ## React-komponenter
16
39
 
17
40
  Alle Jøkul komponenter installeres fra denne pakka.
@@ -42,14 +65,14 @@ Det finnes en del grunnleggende stiler som må med for at ting skal fungere rikt
42
65
  kan du importere med
43
66
 
44
67
  ```scss
45
- @use "@fremtind/jokul/styles/core/core";
68
+ @use "@fremtind/jokul/styles/base";
46
69
  ```
47
70
 
48
71
  eller i ts/js
49
72
 
50
73
  ```tsx
51
74
  // Finnes også ferdig bygget, med filendelsene .css og .min.css
52
- import "@fremtind/jokul/styles/core/core.scss";
75
+ import "@fremtind/jokul/styles/base.scss";
53
76
  ```
54
77
 
55
78
  ### Stiler for komponenter
@@ -79,14 +102,14 @@ import "@fremtind/jokul/styles/components/[komponent]/[komponent].min.css";
79
102
  Du kan importere stilarkene for alle Jøkulkomponentene på en gang med
80
103
 
81
104
  ```scss
82
- @use "@fremtind/jokul/styles";
105
+ @use "@fremtind/jokul/styles/components.scss";
83
106
  ```
84
107
 
85
108
  eller i ts/js
86
109
 
87
110
  ```tsx
88
111
  // Finnes også ferdig bygget, med filendelsene .css og .min.css
89
- import "@fremtind/jokul/styles/styles.scss";
112
+ import "@fremtind/jokul/styles/components.scss";
90
113
  ```
91
114
 
92
115
  Vær obs på at du da kan få med en del mer stilark enn du trenger så vurder dette opp mot
@@ -105,7 +128,7 @@ Dette gjør du med
105
128
  ```scss
106
129
  // Variabelen `$webfonts-dir` angir hvor på disk filene ligger.
107
130
  // Hvis den ikke spesifiseres vil stilarket se etter fontfilene i mappen `/fonts`.
108
- @use "@fremtind/jokul/styles/fonts" with (
131
+ @use "@fremtind/jokul/styles/theme/fonts" with (
109
132
  $webfonts-dir: "relative/path/to/node_modules/@fremtind/jokul/src/fonts"
110
133
  );
111
134
  ```
@@ -114,20 +137,16 @@ Dette gjør du med
114
137
 
115
138
  Om du ikke bruker Sass kan du bruke CSS-versjonen. Denne versjonen ser **kun** etter fontfilene på URLen `/fonts`, så det beste er å sørge for å kopiere fonter på en måte som gjør at de blir tilgjengelig på den URLen.
116
139
 
117
- Om du er nødt til å legge fontfilene et annet sted må CSS-filen `node_modules/@fremtind/jokul/styles/fonts/webfonts.css`
118
- kopieres inn i prosjektet. Deretter må du endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at man må gjenta prosessen hver gang man oppdaterer pakken!**
140
+ Om du er nødt til å legge fontfilene et annet sted må `@font-face`-definisjonene fra `node_modules/@fremtind/jokul/styles/base.css` kopieres inn i prosjektet. Deretter må du endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at man må gjenta prosessen hver gang man oppdaterer pakken!**
119
141
 
120
142
  ```css
121
143
  @font-face {
122
- font-family: "Fremtind Grotesk";
144
+ font-family: "Jokul";
123
145
  font-display: fallback;
124
- font-weight: normal;
146
+ font-weight: 400;
125
147
  font-style: normal;
126
- src: local("Fremtind Grotesk"),
127
- /* Endre de to neste linjene så de stemmer */
128
- url("/relative/path/to/font/files/FremtindGrotesk-Regular-Web.woff2")
129
- format("woff2"), url("/relative/path/to/font/files/FremtindGrotesk-Regular-Web.woff")
130
- format("woff");
148
+ /* Endre URLen så den stemmer */
149
+ src: url("/relative/path/to/font/files/InterVariable.woff2") format("woff2");
131
150
  }
132
151
  ```
133
152
 
@@ -187,7 +206,7 @@ Dersom du bruker versjon 4 av Tailwind laster du inn vårt theme rett etter impo
187
206
 
188
207
  ```css
189
208
  @import "tailwindcss";
190
- @import "@fremtind/jokul/tailwind/v4";
209
+ @import "@fremtind/jokul/styles/tailwind";
191
210
  ```
192
211
 
193
212
  ### Farger
package/bin/jokul.mjs ADDED
@@ -0,0 +1,10 @@
1
+ #!/usr/bin/env node
2
+
3
+ import { runJokulCli } from "./run-jokul-cli.mjs";
4
+
5
+ try {
6
+ process.exit(await runJokulCli());
7
+ } catch (error) {
8
+ console.error(error instanceof Error ? error.message : String(error));
9
+ process.exit(1);
10
+ }
@@ -0,0 +1,63 @@
1
+ import { runImportPathsCodemod } from "../codemods/import-paths.mjs";
2
+
3
+ function printCodemodHelp(commandName) {
4
+ console.log(`Jøkul codemods
5
+
6
+ Bruk:
7
+ ${commandName} [import-paths] [--dry-run] [--verbose] [sti ...]
8
+
9
+ Eksempler:
10
+ ${commandName}
11
+ ${commandName} --dry-run
12
+ ${commandName} src app
13
+ ${commandName} import-paths src app README.md --dry-run
14
+ `);
15
+ }
16
+
17
+ async function runCodemodCommand(args, commandName) {
18
+ const [firstArg, ...rest] = args;
19
+
20
+ if (firstArg === "--help" || firstArg === "-h") {
21
+ printCodemodHelp(commandName);
22
+ return 0;
23
+ }
24
+
25
+ if (!firstArg) {
26
+ await runImportPathsCodemod([]);
27
+ return 0;
28
+ }
29
+
30
+ if (firstArg === "import-paths") {
31
+ await runImportPathsCodemod(rest);
32
+ return 0;
33
+ }
34
+
35
+ await runImportPathsCodemod(args);
36
+ return 0;
37
+ }
38
+
39
+ export async function runJokulCli(argv = process.argv.slice(2)) {
40
+ const [command, ...rest] = argv;
41
+
42
+ if (!command || command === "--help" || command === "-h") {
43
+ console.log(`Jøkul kommandolinje
44
+
45
+ Bruk:
46
+ jokul codemod [import-paths] [--dry-run] [--verbose] [sti ...]
47
+
48
+ Eksempler:
49
+ jokul codemod
50
+ jokul codemod --dry-run
51
+ jokul codemod src app
52
+ jokul codemod import-paths src app README.md --dry-run
53
+ `);
54
+ return 0;
55
+ }
56
+
57
+ if (command !== "codemod") {
58
+ console.error(`Ukjent kommando: ${command}`);
59
+ return 1;
60
+ }
61
+
62
+ return runCodemodCommand(rest, "jokul codemod");
63
+ }