@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.10
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 +41 -22
- 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/index.d.cts +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 +3 -6
- 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/components/text-area/BaseTextArea.cjs +1 -1
- package/build/cjs/components/text-area/BaseTextArea.cjs.map +1 -1
- package/build/cjs/components/text-area/counter.cjs +2 -0
- package/build/cjs/components/text-area/counter.cjs.map +1 -0
- package/build/cjs/components/text-area/counter.d.cts +2 -0
- package/build/cjs/components/text-area/types.d.cts +21 -1
- package/build/cjs/components/typography/Text.cjs +2 -0
- package/build/cjs/components/typography/Text.cjs.map +1 -0
- package/build/cjs/components/typography/Text.d.cts +5 -0
- package/build/cjs/components/typography/Title.cjs +2 -0
- package/build/cjs/components/typography/Title.cjs.map +1 -0
- package/build/cjs/components/typography/Title.d.cts +5 -0
- package/build/cjs/components/typography/index.cjs +2 -0
- package/build/cjs/components/typography/index.cjs.map +1 -0
- package/build/cjs/components/typography/index.d.cts +3 -0
- package/build/cjs/components/typography/types.cjs +2 -0
- package/build/cjs/components/typography/types.cjs.map +1 -0
- package/build/cjs/components/typography/types.d.cts +48 -0
- package/build/cjs/tokens.cjs +1 -1
- package/build/cjs/tokens.cjs.map +1 -1
- package/build/cjs/tokens.d.cts +90 -38
- package/build/es/components/card/Card.js +1 -1
- package/build/es/components/card/Card.js.map +1 -1
- package/build/es/components/card/index.d.ts +1 -1
- package/build/es/components/card/types.d.ts +3 -6
- 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/components/text-area/BaseTextArea.js +1 -1
- package/build/es/components/text-area/BaseTextArea.js.map +1 -1
- package/build/es/components/text-area/counter.d.ts +2 -0
- package/build/es/components/text-area/counter.js +2 -0
- package/build/es/components/text-area/counter.js.map +1 -0
- package/build/es/components/text-area/types.d.ts +21 -1
- package/build/es/components/typography/Text.d.ts +5 -0
- package/build/es/components/typography/Text.js +2 -0
- package/build/es/components/typography/Text.js.map +1 -0
- package/build/es/components/typography/Title.d.ts +5 -0
- package/build/es/components/typography/Title.js +2 -0
- package/build/es/components/typography/Title.js.map +1 -0
- package/build/es/components/typography/index.d.ts +3 -0
- package/build/es/components/typography/index.js +2 -0
- package/build/es/components/typography/index.js.map +1 -0
- package/build/es/components/typography/types.d.ts +48 -0
- package/build/es/components/typography/types.js +2 -0
- package/build/es/components/typography/types.js.map +1 -0
- package/build/es/tokens.d.ts +90 -38
- package/build/es/tokens.js +1 -1
- package/build/es/tokens.js.map +1 -1
- package/codemods/__tests__/import-paths.test.mjs +273 -0
- package/codemods/import-paths.mjs +527 -0
- package/package.json +7 -1
- package/src/fonts/InterVariable-Italic.woff2 +0 -0
- package/src/fonts/InterVariable.woff2 +0 -0
- package/src/fonts/brands/dnb/DNB-Bold.woff2 +0 -0
- package/src/fonts/brands/dnb/DNB-Medium.woff2 +0 -0
- package/src/fonts/brands/dnb/DNB-Regular.woff2 +0 -0
- package/src/fonts/brands/dnb/DNBMono-Regular.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-Bold.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-Light.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-Regular.woff2 +0 -0
- package/src/fonts/brands/eika/OpenSans-SemiBold.woff2 +0 -0
- package/src/fonts/brands/fremtind/Fremtind-Material-Symbols.woff2 +0 -0
- package/src/fonts/brands/fremtind/InterVariable-Italic.woff2 +0 -0
- package/src/fonts/brands/fremtind/InterVariable.woff2 +0 -0
- package/src/fonts/brands/sparebank1/SpareBank1-Medium-Web.woff2 +0 -0
- package/src/fonts/brands/sparebank1/SpareBank1-Regular-Web.woff2 +0 -0
- package/src/fonts/brands/sparebank1/SpareBank1-Title-Medium-Web.woff2 +0 -0
- package/styles/base.css +804 -185
- package/styles/base.min.css +1 -1
- package/styles/components/autosuggest/autosuggest.css +4 -4
- package/styles/components/autosuggest/autosuggest.min.css +1 -1
- package/styles/components/autosuggest/autosuggest.scss +4 -4
- 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 +4 -4
- package/styles/components/beta/nav-link/navlink.min.css +1 -1
- package/styles/components/beta/nav-link/navlink.scss +6 -4
- 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 +8 -4
- package/styles/components/button/button.min.css +1 -1
- package/styles/components/button/button.scss +14 -14
- package/styles/components/card/card.css +6 -11
- package/styles/components/card/card.min.css +1 -1
- package/styles/components/card/card.scss +5 -12
- package/styles/components/checkbox/checkbox.css +43 -15
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox/checkbox.scss +35 -24
- package/styles/components/checkbox-panel/checkbox-panel.css +65 -32
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.scss +4 -0
- package/styles/components/checkbox-panel/development/styles.scss +1 -1
- package/styles/components/chip/chip.css +6 -6
- package/styles/components/chip/chip.min.css +1 -1
- package/styles/components/chip/chip.scss +6 -6
- package/styles/components/combobox/combobox.css +25 -23
- package/styles/components/combobox/combobox.min.css +1 -1
- package/styles/components/combobox/combobox.scss +15 -18
- 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 +11 -9
- package/styles/components/datepicker/_calendar-navigation-dropdown.scss +1 -1
- package/styles/components/datepicker/_calendar.scss +6 -7
- package/styles/components/datepicker/datepicker.css +20 -12
- 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 +21 -18
- package/styles/components/expander/expandable.min.css +1 -1
- package/styles/components/expander/expandable.scss +20 -20
- package/styles/components/feedback/_index.scss +1 -1
- 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 +29 -25
- 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 +4 -4
- package/styles/components/icon/_base-styles.scss +12 -14
- package/styles/components/icon/icon.css +5 -5
- package/styles/components/icon/icon.min.css +1 -1
- package/styles/components/icon/icon.scss +73 -73
- package/styles/components/icon-button/icon-button.css +2 -2
- package/styles/components/icon-button/icon-button.min.css +1 -1
- package/styles/components/icon-button/icon-button.scss +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 +21 -20
- package/styles/components/link/link.css +2 -2
- package/styles/components/link/link.min.css +1 -1
- package/styles/components/link-list/link-list.css +8 -4
- package/styles/components/link-list/link-list.min.css +1 -1
- package/styles/components/link-list/link-list.scss +7 -3
- 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-item.scss +2 -2
- package/styles/components/menu/menu.css +5 -5
- package/styles/components/menu/menu.min.css +1 -1
- package/styles/components/menu/menu.scss +2 -2
- package/styles/components/message/message.css +20 -10
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/message/message.scss +19 -12
- 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/development/styles.scss +1 -1
- package/styles/components/pagination/pagination.css +3 -3
- package/styles/components/pagination/pagination.min.css +1 -1
- package/styles/components/pagination/pagination.scss +2 -2
- 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 +43 -8
- 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/development/styles.scss +1 -1
- 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 +4 -4
- package/styles/components/search/search.min.css +1 -1
- package/styles/components/search/search.scss +3 -3
- package/styles/components/segmented-control/segmented-control.css +61 -26
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +7 -7
- package/styles/components/select/select.css +17 -18
- package/styles/components/select/select.min.css +1 -1
- package/styles/components/select/select.scss +24 -29
- package/styles/components/summary-table/development/summary-table-example.scss +1 -1
- 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 +23 -13
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/system-message/system-message.scss +119 -108
- package/styles/components/table/_table-head.scss +1 -1
- package/styles/components/table/_table-row.scss +5 -3
- package/styles/components/table/table.css +6 -4
- package/styles/components/table/table.min.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.css +2 -2
- package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
- package/styles/components/table-of-contents/table-of-contents.scss +3 -3
- package/styles/components/tabs/tabs.css +5 -5
- package/styles/components/tabs/tabs.min.css +1 -1
- package/styles/components/tabs/tabs.scss +5 -6
- package/styles/components/tag/tag.css +16 -6
- package/styles/components/tag/tag.min.css +1 -1
- package/styles/components/tag/tag.scss +18 -7
- package/styles/components/text-area/text-area.css +12 -12
- package/styles/components/text-area/text-area.min.css +1 -1
- package/styles/components/text-input/text-input.css +12 -12
- package/styles/components/text-input/text-input.min.css +1 -1
- package/styles/components/toast/toast.css +20 -13
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/toast/toast.scss +19 -18
- package/styles/components/toggle-switch/_toggle-slider.scss +4 -4
- package/styles/components/toggle-switch/toggle-switch.css +15 -25
- package/styles/components/toggle-switch/toggle-switch.min.css +1 -3
- package/styles/components/toggle-switch/toggle-switch.scss +10 -22
- package/styles/components/tooltip/tooltip.css +5 -5
- package/styles/components/tooltip/tooltip.min.css +1 -1
- package/styles/components/tooltip/tooltip.scss +5 -5
- package/styles/components/typography/_index.scss +2 -0
- package/styles/components/typography/text.css +38 -0
- package/styles/components/typography/text.min.css +1 -0
- package/styles/components/typography/text.scss +54 -0
- package/styles/components/typography/title.css +55 -0
- package/styles/components/typography/title.min.css +1 -0
- package/styles/components/typography/title.scss +59 -0
- package/styles/components.css +684 -365
- package/styles/components.min.css +1 -3
- package/styles/components.scss +53 -52
- package/styles/core/utility/_paragraphs.scss +39 -0
- package/styles/global/_base-class.scss +2 -2
- package/styles/global/_top-layer.scss +1 -1
- package/styles/hooks/stories/styles.scss +3 -3
- package/styles/jkl/_ornaments.scss +1 -1
- package/styles/jkl/_tokens.scss +140 -66
- package/styles/jkl/_typography.scss +13 -21
- package/styles/shared/input/shared-input-styles.scss +11 -15
- package/styles/shared/track/track.scss +2 -2
- package/styles/tailwind.css +104 -60
- package/styles/theme/_color-scheme.scss +107 -60
- package/styles/theme/_dynamic-spacing.scss +6 -6
- package/styles/theme/_fonts.scss +24 -74
- package/styles/theme/_index.scss +4 -0
- package/styles/theme/_tokens.scss +3 -3
- package/styles/theme/brands/dnb/_color-scheme.scss +121 -0
- package/styles/theme/brands/dnb/_fonts.scss +46 -0
- package/styles/theme/brands/dnb/_index.scss +2 -0
- package/styles/theme/brands/eika/_color-scheme.scss +121 -0
- package/styles/theme/brands/eika/_fonts.scss +46 -0
- package/styles/theme/brands/eika/_index.scss +2 -0
- package/styles/theme/brands/fremtind/_color-scheme.scss +121 -0
- package/styles/theme/brands/fremtind/_fonts.scss +30 -0
- package/styles/theme/brands/fremtind/_index.scss +2 -0
- package/styles/theme/brands/sparebank1/_color-scheme.scss +121 -0
- package/styles/theme/brands/sparebank1/_fonts.scss +38 -0
- package/styles/theme/brands/sparebank1/_index.scss +2 -0
- package/styles/utility/_headings.scss +1 -1
- package/styles/utility/_paragraphs.scss +2 -2
- package/styles/utility/_screen-reader.scss +1 -1
- package/styles/utility/_spacing.scss +2 -2
- package/src/fonts/FremtindGrotesk-Bold-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Bold-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-BoldItalic-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-BoldItalic-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-Display-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Display-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-Italic-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Italic-Web.woff2 +0 -0
- package/src/fonts/FremtindGrotesk-Regular-Web.woff +0 -0
- package/src/fonts/FremtindGrotesk-Regular-Web.woff2 +0 -0
- package/src/fonts/FremtindGroteskMono-Regular-Web.woff +0 -0
- package/src/fonts/FremtindGroteskMono-Regular-Web.woff2 +0 -0
package/README.md
CHANGED
|
@@ -1,17 +1,40 @@
|
|
|
1
1
|
# @fremtind/jokul
|
|
2
2
|
|
|
3
|
-
-
|
|
4
|
-
-
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
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/
|
|
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
|
```
|
|
@@ -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å
|
|
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: "
|
|
144
|
+
font-family: "Jokul";
|
|
123
145
|
font-display: fallback;
|
|
124
|
-
font-weight:
|
|
146
|
+
font-weight: 400;
|
|
125
147
|
font-style: normal;
|
|
126
|
-
|
|
127
|
-
|
|
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
|
|
209
|
+
@import "@fremtind/jokul/styles/tailwind";
|
|
191
210
|
```
|
|
192
211
|
|
|
193
212
|
### 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
|
+
}
|