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

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 (258) hide show
  1. package/README.md +29 -6
  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/types.cjs +1 -1
  8. package/build/cjs/components/card/types.cjs.map +1 -1
  9. package/build/cjs/components/card/types.d.cts +2 -2
  10. package/build/cjs/components/checkbox/Checkbox.cjs +1 -1
  11. package/build/cjs/components/checkbox/Checkbox.cjs.map +1 -1
  12. package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
  13. package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
  14. package/build/cjs/components/cookie-consent/CookieConsent.d.cts +1 -1
  15. package/build/cjs/components/cookie-consent/types.d.cts +4 -0
  16. package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
  17. package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
  18. package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
  19. package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
  20. package/build/cjs/components/link/Link.cjs +1 -1
  21. package/build/cjs/components/link/Link.cjs.map +1 -1
  22. package/build/cjs/components/link/Link.d.cts +2 -2
  23. package/build/cjs/components/link/types.d.cts +1 -4
  24. package/build/cjs/components/modal/Modal.cjs +1 -1
  25. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  26. package/build/cjs/components/modal/Modal.d.cts +2 -9
  27. package/build/cjs/components/modal/index.d.cts +1 -1
  28. package/build/cjs/components/modal/types.d.cts +18 -0
  29. package/build/cjs/components/popover/Popover.cjs +1 -1
  30. package/build/cjs/components/popover/Popover.cjs.map +1 -1
  31. package/build/cjs/components/radio-button/BaseRadioButton.cjs +1 -1
  32. package/build/cjs/components/radio-button/BaseRadioButton.cjs.map +1 -1
  33. package/build/cjs/core/tokens.cjs +2 -0
  34. package/build/cjs/core/tokens.cjs.map +1 -0
  35. package/build/cjs/core/tokens.d.cts +593 -0
  36. package/build/cjs/tailwind/colors.cjs +2 -0
  37. package/build/cjs/tailwind/colors.cjs.map +1 -0
  38. package/build/cjs/tailwind/colors.d.cts +39 -0
  39. package/build/cjs/tokens.cjs +1 -1
  40. package/build/cjs/tokens.cjs.map +1 -1
  41. package/build/cjs/tokens.d.cts +98 -39
  42. package/build/es/components/card/Card.js +1 -1
  43. package/build/es/components/card/Card.js.map +1 -1
  44. package/build/es/components/card/types.d.ts +2 -2
  45. package/build/es/components/card/types.js +1 -1
  46. package/build/es/components/card/types.js.map +1 -1
  47. package/build/es/components/checkbox/Checkbox.js +1 -1
  48. package/build/es/components/checkbox/Checkbox.js.map +1 -1
  49. package/build/es/components/cookie-consent/CookieConsent.d.ts +1 -1
  50. package/build/es/components/cookie-consent/CookieConsent.js +1 -1
  51. package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
  52. package/build/es/components/cookie-consent/types.d.ts +4 -0
  53. package/build/es/components/datepicker/DatePicker.js +1 -1
  54. package/build/es/components/datepicker/DatePicker.js.map +1 -1
  55. package/build/es/components/expander/ExpandablePanel.js +1 -1
  56. package/build/es/components/expander/ExpandablePanel.js.map +1 -1
  57. package/build/es/components/link/Link.d.ts +2 -2
  58. package/build/es/components/link/Link.js +1 -1
  59. package/build/es/components/link/Link.js.map +1 -1
  60. package/build/es/components/link/types.d.ts +1 -4
  61. package/build/es/components/modal/Modal.d.ts +2 -9
  62. package/build/es/components/modal/Modal.js +1 -1
  63. package/build/es/components/modal/Modal.js.map +1 -1
  64. package/build/es/components/modal/index.d.ts +1 -1
  65. package/build/es/components/modal/types.d.ts +18 -0
  66. package/build/es/components/popover/Popover.js +1 -1
  67. package/build/es/components/popover/Popover.js.map +1 -1
  68. package/build/es/components/radio-button/BaseRadioButton.js +1 -1
  69. package/build/es/components/radio-button/BaseRadioButton.js.map +1 -1
  70. package/build/es/core/tokens.d.ts +593 -0
  71. package/build/es/core/tokens.js +2 -0
  72. package/build/es/core/tokens.js.map +1 -0
  73. package/build/es/tailwind/colors.d.ts +39 -0
  74. package/build/es/tailwind/colors.js +2 -0
  75. package/build/es/tailwind/colors.js.map +1 -0
  76. package/build/es/tokens.d.ts +98 -39
  77. package/build/es/tokens.js +1 -1
  78. package/build/es/tokens.js.map +1 -1
  79. package/codemods/__tests__/import-paths.test.mjs +84 -0
  80. package/codemods/import-paths.mjs +393 -0
  81. package/package.json +6 -1
  82. package/styles/base.css +483 -66
  83. package/styles/base.min.css +1 -1
  84. package/styles/components/autosuggest/autosuggest.css +2 -2
  85. package/styles/components/autosuggest/autosuggest.min.css +1 -1
  86. package/styles/components/autosuggest/autosuggest.scss +2 -2
  87. package/styles/components/beta/description-list/description-list.css +1 -1
  88. package/styles/components/beta/description-list/description-list.min.css +1 -1
  89. package/styles/components/beta/description-list/description-list.scss +1 -1
  90. package/styles/components/beta/nav-link/navlink.css +2 -2
  91. package/styles/components/beta/nav-link/navlink.min.css +1 -1
  92. package/styles/components/beta/nav-link/navlink.scss +2 -2
  93. package/styles/components/beta/select/select.css +9 -9
  94. package/styles/components/beta/select/select.min.css +1 -1
  95. package/styles/components/beta/select/select.scss +8 -7
  96. package/styles/components/breadcrumb/breadcrumb.css +1 -1
  97. package/styles/components/breadcrumb/breadcrumb.min.css +1 -1
  98. package/styles/components/button/button.css +6 -2
  99. package/styles/components/button/button.min.css +1 -1
  100. package/styles/components/button/button.scss +12 -12
  101. package/styles/components/card/card.css +6 -9
  102. package/styles/components/card/card.min.css +1 -1
  103. package/styles/components/card/card.scss +6 -10
  104. package/styles/components/checkbox/checkbox.css +43 -9
  105. package/styles/components/checkbox/checkbox.min.css +1 -1
  106. package/styles/components/checkbox/checkbox.scss +38 -21
  107. package/styles/components/checkbox-panel/checkbox-panel.css +65 -26
  108. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  109. package/styles/components/checkbox-panel/checkbox-panel.scss +4 -0
  110. package/styles/components/chip/chip.css +2 -2
  111. package/styles/components/chip/chip.min.css +1 -1
  112. package/styles/components/chip/chip.scss +1 -1
  113. package/styles/components/combobox/combobox.css +18 -15
  114. package/styles/components/combobox/combobox.min.css +1 -1
  115. package/styles/components/combobox/combobox.scss +9 -6
  116. package/styles/components/countdown/countdown.css +4 -4
  117. package/styles/components/countdown/countdown.min.css +1 -1
  118. package/styles/components/datepicker/_calendar-date-button.scss +7 -7
  119. package/styles/components/datepicker/_calendar-navigation-dropdown.scss +1 -1
  120. package/styles/components/datepicker/_calendar.scss +6 -7
  121. package/styles/components/datepicker/datepicker.css +19 -11
  122. package/styles/components/datepicker/datepicker.min.css +1 -1
  123. package/styles/components/description-list/description-list.css +1 -1
  124. package/styles/components/description-list/description-list.min.css +1 -1
  125. package/styles/components/description-list/description-list.scss +1 -1
  126. package/styles/components/expander/expandable.css +17 -17
  127. package/styles/components/expander/expandable.min.css +1 -1
  128. package/styles/components/expander/expandable.scss +15 -19
  129. package/styles/components/feedback/feedback.css +6 -8
  130. package/styles/components/feedback/feedback.min.css +1 -1
  131. package/styles/components/feedback/feedback.scss +4 -9
  132. package/styles/components/file/file.css +5 -5
  133. package/styles/components/file/file.min.css +1 -1
  134. package/styles/components/file/file.scss +5 -5
  135. package/styles/components/file-input/file-input.css +26 -22
  136. package/styles/components/file-input/file-input.min.css +1 -1
  137. package/styles/components/file-input/file-input.scss +3 -3
  138. package/styles/components/help/help.css +2 -2
  139. package/styles/components/help/help.min.css +1 -1
  140. package/styles/components/help/help.scss +2 -2
  141. package/styles/components/icon/icon.css +4 -4
  142. package/styles/components/icon/icon.min.css +1 -1
  143. package/styles/components/icon/icon.scss +4 -4
  144. package/styles/components/icon-button/icon-button.css +1 -1
  145. package/styles/components/icon-button/icon-button.min.css +1 -1
  146. package/styles/components/input-group/input-group.css +2 -2
  147. package/styles/components/input-group/input-group.min.css +1 -1
  148. package/styles/components/input-panel/input-panel.css +19 -17
  149. package/styles/components/input-panel/input-panel.min.css +1 -1
  150. package/styles/components/input-panel/input-panel.scss +20 -18
  151. package/styles/components/link/link.css +1 -1
  152. package/styles/components/link/link.min.css +1 -1
  153. package/styles/components/link-list/link-list.css +6 -2
  154. package/styles/components/link-list/link-list.min.css +1 -1
  155. package/styles/components/link-list/link-list.scss +6 -2
  156. package/styles/components/loader/loader.css +6 -6
  157. package/styles/components/loader/loader.min.css +1 -1
  158. package/styles/components/loader/skeleton-loader.css +4 -4
  159. package/styles/components/loader/skeleton-loader.min.css +1 -1
  160. package/styles/components/loader/skeleton-loader.scss +1 -1
  161. package/styles/components/menu/_menu-divider.scss +1 -1
  162. package/styles/components/menu/menu.css +3 -3
  163. package/styles/components/menu/menu.min.css +1 -1
  164. package/styles/components/menu/menu.scss +2 -2
  165. package/styles/components/message/message.css +19 -9
  166. package/styles/components/message/message.min.css +1 -1
  167. package/styles/components/message/message.scss +16 -6
  168. package/styles/components/modal/_layout.scss +22 -0
  169. package/styles/components/modal/_modal-base.scss +32 -0
  170. package/styles/components/modal/_motion.scss +45 -0
  171. package/styles/components/modal/_overlay.scss +20 -0
  172. package/styles/components/modal/_parts.scss +33 -0
  173. package/styles/components/modal/_placement.scss +59 -0
  174. package/styles/components/modal/modal.css +118 -34
  175. package/styles/components/modal/modal.min.css +1 -1
  176. package/styles/components/modal/modal.scss +6 -95
  177. package/styles/components/nav-link/nav-link.css +1 -1
  178. package/styles/components/nav-link/nav-link.min.css +1 -1
  179. package/styles/components/pagination/pagination.css +1 -1
  180. package/styles/components/pagination/pagination.min.css +1 -1
  181. package/styles/components/popover/popover.css +12 -1
  182. package/styles/components/popover/popover.min.css +1 -1
  183. package/styles/components/popover/popover.scss +15 -1
  184. package/styles/components/progress-bar/progress-bar.css +27 -3
  185. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  186. package/styles/components/progress-bar/progress-bar.scss +5 -0
  187. package/styles/components/radio-button/radio-button.css +41 -6
  188. package/styles/components/radio-button/radio-button.min.css +1 -1
  189. package/styles/components/radio-button/radio-button.scss +35 -16
  190. package/styles/components/radio-panel/radio-panel.css +22 -17
  191. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  192. package/styles/components/radio-panel/radio-panel.scss +4 -0
  193. package/styles/components/search/search-with-submit-button.css +1 -1
  194. package/styles/components/search/search-with-submit-button.min.css +1 -1
  195. package/styles/components/search/search-with-submit-button.scss +1 -1
  196. package/styles/components/search/search.css +2 -2
  197. package/styles/components/search/search.min.css +1 -1
  198. package/styles/components/search/search.scss +1 -1
  199. package/styles/components/segmented-control/segmented-control.css +54 -19
  200. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  201. package/styles/components/segmented-control/segmented-control.scss +4 -4
  202. package/styles/components/select/select.css +15 -15
  203. package/styles/components/select/select.min.css +1 -1
  204. package/styles/components/select/select.scss +12 -12
  205. package/styles/components/summary-table/summary-table.css +2 -2
  206. package/styles/components/summary-table/summary-table.min.css +1 -1
  207. package/styles/components/summary-table/summary-table.scss +2 -2
  208. package/styles/components/system-message/system-message.css +20 -10
  209. package/styles/components/system-message/system-message.min.css +1 -1
  210. package/styles/components/system-message/system-message.scss +17 -7
  211. package/styles/components/table/_table-head.scss +1 -1
  212. package/styles/components/table/_table-row.scss +2 -2
  213. package/styles/components/table/table.css +3 -3
  214. package/styles/components/table/table.min.css +1 -1
  215. package/styles/components/table-of-contents/table-of-contents.css +1 -1
  216. package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
  217. package/styles/components/table-of-contents/table-of-contents.scss +1 -1
  218. package/styles/components/tabs/tabs.css +3 -3
  219. package/styles/components/tabs/tabs.min.css +1 -1
  220. package/styles/components/tabs/tabs.scss +2 -2
  221. package/styles/components/tag/tag.css +16 -6
  222. package/styles/components/tag/tag.min.css +1 -1
  223. package/styles/components/tag/tag.scss +16 -6
  224. package/styles/components/text-area/text-area.css +8 -8
  225. package/styles/components/text-area/text-area.min.css +1 -1
  226. package/styles/components/text-input/text-input.css +8 -8
  227. package/styles/components/text-input/text-input.min.css +1 -1
  228. package/styles/components/toast/toast.css +19 -12
  229. package/styles/components/toast/toast.min.css +1 -1
  230. package/styles/components/toast/toast.scss +15 -12
  231. package/styles/components/toggle-switch/_toggle-slider.scss +4 -4
  232. package/styles/components/toggle-switch/toggle-switch.css +14 -19
  233. package/styles/components/toggle-switch/toggle-switch.min.css +2 -2
  234. package/styles/components/toggle-switch/toggle-switch.scss +9 -16
  235. package/styles/components/tooltip/tooltip.css +3 -3
  236. package/styles/components/tooltip/tooltip.min.css +1 -1
  237. package/styles/components/tooltip/tooltip.scss +3 -3
  238. package/styles/components.css +536 -294
  239. package/styles/components.min.css +2 -2
  240. package/styles/core/jkl/_tokens.scss +59 -0
  241. package/styles/core/jkl/legacy/_dynamic-colors.scss +40 -0
  242. package/styles/core/jkl/legacy/_tokens.scss +742 -0
  243. package/styles/core/theme/_color-tokens.scss +73 -0
  244. package/styles/core/theme/_legacy-color-tokens.scss +81 -0
  245. package/styles/core/theme/_legacy-tokens.scss +279 -0
  246. package/styles/core/theme/_spacing-tokens.scss +33 -0
  247. package/styles/core/theme/_tokens.scss +33 -0
  248. package/styles/hooks/stories/styles.scss +2 -2
  249. package/styles/jkl/_ornaments.scss +1 -1
  250. package/styles/jkl/_tokens.scss +151 -71
  251. package/styles/shared/input/shared-input-styles.scss +6 -6
  252. package/styles/shared/track/track.scss +2 -2
  253. package/styles/tailwind.css +108 -66
  254. package/styles/theme/_color-scheme.scss +135 -66
  255. package/styles/theme/_index.scss +3 -0
  256. package/styles/theme/brands/dnb/_color-scheme.scss +119 -0
  257. package/styles/theme/brands/eika/_color-scheme.scss +119 -0
  258. package/styles/theme/brands/sparebank1/_color-scheme.scss +119 -0
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # @fremtind/jokul
2
2
 
3
3
  - [Migrering til monopakke](#migrering-til-monopakke)
4
+ - [Codemods](#codemods)
4
5
  - [React-komponenter](#react-komponenter)
5
6
  - [Stilark](#stilark)
6
7
  - [Fonter](#fonter)
@@ -12,6 +13,28 @@
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.
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
  ```
@@ -187,7 +210,7 @@ Dersom du bruker versjon 4 av Tailwind laster du inn vårt theme rett etter impo
187
210
 
188
211
  ```css
189
212
  @import "tailwindcss";
190
- @import "@fremtind/jokul/tailwind/v4";
213
+ @import "@fremtind/jokul/styles/tailwind";
191
214
  ```
192
215
 
193
216
  ### 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
+ }