@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.
- package/README.md +29 -6
- package/bin/jokul.mjs +10 -0
- package/bin/run-jokul-cli.mjs +63 -0
- package/build/build-stats.html +1 -1
- package/build/cjs/components/card/Card.cjs +1 -1
- package/build/cjs/components/card/Card.cjs.map +1 -1
- package/build/cjs/components/card/types.cjs +1 -1
- package/build/cjs/components/card/types.cjs.map +1 -1
- package/build/cjs/components/card/types.d.cts +2 -2
- package/build/cjs/components/checkbox/Checkbox.cjs +1 -1
- package/build/cjs/components/checkbox/Checkbox.cjs.map +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.d.cts +1 -1
- package/build/cjs/components/cookie-consent/types.d.cts +4 -0
- package/build/cjs/components/datepicker/DatePicker.cjs +1 -1
- package/build/cjs/components/datepicker/DatePicker.cjs.map +1 -1
- package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
- package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
- package/build/cjs/components/link/Link.cjs +1 -1
- package/build/cjs/components/link/Link.cjs.map +1 -1
- package/build/cjs/components/link/Link.d.cts +2 -2
- package/build/cjs/components/link/types.d.cts +1 -4
- package/build/cjs/components/modal/Modal.cjs +1 -1
- package/build/cjs/components/modal/Modal.cjs.map +1 -1
- package/build/cjs/components/modal/Modal.d.cts +2 -9
- package/build/cjs/components/modal/index.d.cts +1 -1
- package/build/cjs/components/modal/types.d.cts +18 -0
- package/build/cjs/components/popover/Popover.cjs +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/radio-button/BaseRadioButton.cjs +1 -1
- package/build/cjs/components/radio-button/BaseRadioButton.cjs.map +1 -1
- package/build/cjs/core/tokens.cjs +2 -0
- package/build/cjs/core/tokens.cjs.map +1 -0
- package/build/cjs/core/tokens.d.cts +593 -0
- package/build/cjs/tailwind/colors.cjs +2 -0
- package/build/cjs/tailwind/colors.cjs.map +1 -0
- package/build/cjs/tailwind/colors.d.cts +39 -0
- package/build/cjs/tokens.cjs +1 -1
- package/build/cjs/tokens.cjs.map +1 -1
- package/build/cjs/tokens.d.cts +98 -39
- package/build/es/components/card/Card.js +1 -1
- package/build/es/components/card/Card.js.map +1 -1
- package/build/es/components/card/types.d.ts +2 -2
- package/build/es/components/card/types.js +1 -1
- package/build/es/components/card/types.js.map +1 -1
- package/build/es/components/checkbox/Checkbox.js +1 -1
- package/build/es/components/checkbox/Checkbox.js.map +1 -1
- package/build/es/components/cookie-consent/CookieConsent.d.ts +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
- package/build/es/components/cookie-consent/types.d.ts +4 -0
- package/build/es/components/datepicker/DatePicker.js +1 -1
- package/build/es/components/datepicker/DatePicker.js.map +1 -1
- package/build/es/components/expander/ExpandablePanel.js +1 -1
- package/build/es/components/expander/ExpandablePanel.js.map +1 -1
- package/build/es/components/link/Link.d.ts +2 -2
- package/build/es/components/link/Link.js +1 -1
- package/build/es/components/link/Link.js.map +1 -1
- package/build/es/components/link/types.d.ts +1 -4
- package/build/es/components/modal/Modal.d.ts +2 -9
- package/build/es/components/modal/Modal.js +1 -1
- package/build/es/components/modal/Modal.js.map +1 -1
- package/build/es/components/modal/index.d.ts +1 -1
- package/build/es/components/modal/types.d.ts +18 -0
- package/build/es/components/popover/Popover.js +1 -1
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/radio-button/BaseRadioButton.js +1 -1
- package/build/es/components/radio-button/BaseRadioButton.js.map +1 -1
- package/build/es/core/tokens.d.ts +593 -0
- package/build/es/core/tokens.js +2 -0
- package/build/es/core/tokens.js.map +1 -0
- package/build/es/tailwind/colors.d.ts +39 -0
- package/build/es/tailwind/colors.js +2 -0
- package/build/es/tailwind/colors.js.map +1 -0
- package/build/es/tokens.d.ts +98 -39
- package/build/es/tokens.js +1 -1
- package/build/es/tokens.js.map +1 -1
- package/codemods/__tests__/import-paths.test.mjs +84 -0
- package/codemods/import-paths.mjs +393 -0
- package/package.json +6 -1
- package/styles/base.css +483 -66
- package/styles/base.min.css +1 -1
- package/styles/components/autosuggest/autosuggest.css +2 -2
- package/styles/components/autosuggest/autosuggest.min.css +1 -1
- package/styles/components/autosuggest/autosuggest.scss +2 -2
- package/styles/components/beta/description-list/description-list.css +1 -1
- package/styles/components/beta/description-list/description-list.min.css +1 -1
- package/styles/components/beta/description-list/description-list.scss +1 -1
- package/styles/components/beta/nav-link/navlink.css +2 -2
- package/styles/components/beta/nav-link/navlink.min.css +1 -1
- package/styles/components/beta/nav-link/navlink.scss +2 -2
- package/styles/components/beta/select/select.css +9 -9
- package/styles/components/beta/select/select.min.css +1 -1
- package/styles/components/beta/select/select.scss +8 -7
- package/styles/components/breadcrumb/breadcrumb.css +1 -1
- package/styles/components/breadcrumb/breadcrumb.min.css +1 -1
- package/styles/components/button/button.css +6 -2
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +12 -12
- package/styles/components/card/card.css +6 -9
- package/styles/components/card/card.min.css +1 -1
- package/styles/components/card/card.scss +6 -10
- package/styles/components/checkbox/checkbox.css +43 -9
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox/checkbox.scss +38 -21
- package/styles/components/checkbox-panel/checkbox-panel.css +65 -26
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.scss +4 -0
- package/styles/components/chip/chip.css +2 -2
- package/styles/components/chip/chip.min.css +1 -1
- package/styles/components/chip/chip.scss +1 -1
- package/styles/components/combobox/combobox.css +18 -15
- package/styles/components/combobox/combobox.min.css +1 -1
- package/styles/components/combobox/combobox.scss +9 -6
- package/styles/components/countdown/countdown.css +4 -4
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/datepicker/_calendar-date-button.scss +7 -7
- package/styles/components/datepicker/_calendar-navigation-dropdown.scss +1 -1
- package/styles/components/datepicker/_calendar.scss +6 -7
- package/styles/components/datepicker/datepicker.css +19 -11
- package/styles/components/datepicker/datepicker.min.css +1 -1
- package/styles/components/description-list/description-list.css +1 -1
- package/styles/components/description-list/description-list.min.css +1 -1
- package/styles/components/description-list/description-list.scss +1 -1
- package/styles/components/expander/expandable.css +17 -17
- package/styles/components/expander/expandable.min.css +1 -1
- package/styles/components/expander/expandable.scss +15 -19
- package/styles/components/feedback/feedback.css +6 -8
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/feedback/feedback.scss +4 -9
- package/styles/components/file/file.css +5 -5
- package/styles/components/file/file.min.css +1 -1
- package/styles/components/file/file.scss +5 -5
- package/styles/components/file-input/file-input.css +26 -22
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/file-input/file-input.scss +3 -3
- package/styles/components/help/help.css +2 -2
- package/styles/components/help/help.min.css +1 -1
- package/styles/components/help/help.scss +2 -2
- package/styles/components/icon/icon.css +4 -4
- package/styles/components/icon/icon.min.css +1 -1
- package/styles/components/icon/icon.scss +4 -4
- package/styles/components/icon-button/icon-button.css +1 -1
- package/styles/components/icon-button/icon-button.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/input-panel/input-panel.css +19 -17
- package/styles/components/input-panel/input-panel.min.css +1 -1
- package/styles/components/input-panel/input-panel.scss +20 -18
- package/styles/components/link/link.css +1 -1
- package/styles/components/link/link.min.css +1 -1
- package/styles/components/link-list/link-list.css +6 -2
- package/styles/components/link-list/link-list.min.css +1 -1
- package/styles/components/link-list/link-list.scss +6 -2
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +4 -4
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.scss +1 -1
- package/styles/components/menu/_menu-divider.scss +1 -1
- package/styles/components/menu/menu.css +3 -3
- package/styles/components/menu/menu.min.css +1 -1
- package/styles/components/menu/menu.scss +2 -2
- package/styles/components/message/message.css +19 -9
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/message/message.scss +16 -6
- package/styles/components/modal/_layout.scss +22 -0
- package/styles/components/modal/_modal-base.scss +32 -0
- package/styles/components/modal/_motion.scss +45 -0
- package/styles/components/modal/_overlay.scss +20 -0
- package/styles/components/modal/_parts.scss +33 -0
- package/styles/components/modal/_placement.scss +59 -0
- package/styles/components/modal/modal.css +118 -34
- package/styles/components/modal/modal.min.css +1 -1
- package/styles/components/modal/modal.scss +6 -95
- package/styles/components/nav-link/nav-link.css +1 -1
- package/styles/components/nav-link/nav-link.min.css +1 -1
- package/styles/components/pagination/pagination.css +1 -1
- package/styles/components/pagination/pagination.min.css +1 -1
- package/styles/components/popover/popover.css +12 -1
- package/styles/components/popover/popover.min.css +1 -1
- package/styles/components/popover/popover.scss +15 -1
- package/styles/components/progress-bar/progress-bar.css +27 -3
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.scss +5 -0
- package/styles/components/radio-button/radio-button.css +41 -6
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-button/radio-button.scss +35 -16
- package/styles/components/radio-panel/radio-panel.css +22 -17
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.scss +4 -0
- package/styles/components/search/search-with-submit-button.css +1 -1
- package/styles/components/search/search-with-submit-button.min.css +1 -1
- package/styles/components/search/search-with-submit-button.scss +1 -1
- package/styles/components/search/search.css +2 -2
- package/styles/components/search/search.min.css +1 -1
- package/styles/components/search/search.scss +1 -1
- package/styles/components/segmented-control/segmented-control.css +54 -19
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +4 -4
- package/styles/components/select/select.css +15 -15
- package/styles/components/select/select.min.css +1 -1
- package/styles/components/select/select.scss +12 -12
- package/styles/components/summary-table/summary-table.css +2 -2
- package/styles/components/summary-table/summary-table.min.css +1 -1
- package/styles/components/summary-table/summary-table.scss +2 -2
- package/styles/components/system-message/system-message.css +20 -10
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/system-message/system-message.scss +17 -7
- package/styles/components/table/_table-head.scss +1 -1
- package/styles/components/table/_table-row.scss +2 -2
- package/styles/components/table/table.css +3 -3
- package/styles/components/table/table.min.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.scss +1 -1
- package/styles/components/tabs/tabs.css +3 -3
- package/styles/components/tabs/tabs.min.css +1 -1
- package/styles/components/tabs/tabs.scss +2 -2
- package/styles/components/tag/tag.css +16 -6
- package/styles/components/tag/tag.min.css +1 -1
- package/styles/components/tag/tag.scss +16 -6
- package/styles/components/text-area/text-area.css +8 -8
- package/styles/components/text-area/text-area.min.css +1 -1
- package/styles/components/text-input/text-input.css +8 -8
- package/styles/components/text-input/text-input.min.css +1 -1
- package/styles/components/toast/toast.css +19 -12
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/toast/toast.scss +15 -12
- package/styles/components/toggle-switch/_toggle-slider.scss +4 -4
- package/styles/components/toggle-switch/toggle-switch.css +14 -19
- package/styles/components/toggle-switch/toggle-switch.min.css +2 -2
- package/styles/components/toggle-switch/toggle-switch.scss +9 -16
- package/styles/components/tooltip/tooltip.css +3 -3
- package/styles/components/tooltip/tooltip.min.css +1 -1
- package/styles/components/tooltip/tooltip.scss +3 -3
- package/styles/components.css +536 -294
- package/styles/components.min.css +2 -2
- package/styles/core/jkl/_tokens.scss +59 -0
- package/styles/core/jkl/legacy/_dynamic-colors.scss +40 -0
- package/styles/core/jkl/legacy/_tokens.scss +742 -0
- package/styles/core/theme/_color-tokens.scss +73 -0
- package/styles/core/theme/_legacy-color-tokens.scss +81 -0
- package/styles/core/theme/_legacy-tokens.scss +279 -0
- package/styles/core/theme/_spacing-tokens.scss +33 -0
- package/styles/core/theme/_tokens.scss +33 -0
- package/styles/hooks/stories/styles.scss +2 -2
- package/styles/jkl/_ornaments.scss +1 -1
- package/styles/jkl/_tokens.scss +151 -71
- package/styles/shared/input/shared-input-styles.scss +6 -6
- package/styles/shared/track/track.scss +2 -2
- package/styles/tailwind.css +108 -66
- package/styles/theme/_color-scheme.scss +135 -66
- package/styles/theme/_index.scss +3 -0
- package/styles/theme/brands/dnb/_color-scheme.scss +119 -0
- package/styles/theme/brands/eika/_color-scheme.scss +119 -0
- 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/
|
|
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/
|
|
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/
|
|
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
|
|
213
|
+
@import "@fremtind/jokul/styles/tailwind";
|
|
191
214
|
```
|
|
192
215
|
|
|
193
216
|
### Farger
|
package/bin/jokul.mjs
ADDED
|
@@ -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
|
+
}
|