aksel 6.4.0
Install from the command line:
Learn more about npm packages
$ npm install @navikt/aksel@6.4.0
Install via package.json:
"@navikt/aksel": "6.4.0"
About this version
CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
run:
npx @navikt/aksel
commands:
css-imports: Generate css-imports for all components from Aksel
codemod: Codemods for version-migrations related to Aksel
Codemods are code-transformations that patches breaking changes in your project. This helps when migrating without spending time doing it manually.
To get started:
npx @navikt/aksel codemod --help
In v4, we moved all the components from @navikt/ds-react-internal
to @navikt/ds-react
. This means that you will need to update all your imports to the new package. As a part of this, Header was renamed to InternalHeader
and all the CSS-classes was renamed to use navds
as a prefix instead of navdsi
.
npx @navikt/aksel codemod v4-internal-react ...
Rewrites all imports from @navikt/ds-react-internal
to @navikt/ds-react
. Remember to remove @navikt/ds-react-internal
as a dependency after migration.
- import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
- import { Button, CopyButton } from "@navikt/ds-react";
+ import { Button, CopyButton, Dropdown, Timeline, InternalHeader as Header } from "@navikt/ds-react";
npx @navikt/aksel codemod v4-internal-css ...
Rewrites all css with navdsi
-prefix to navds
-prefix. Rewrites all .navdsi-header
classes to .navds-internalheader
.
Remember to remove @navikt/ds-css-internal
as a dependency after migration + remove it from you lists of imports in the CSS-bundle.
- .navdsi-dropdown
+ .navds-dropdown
- .navdsi-header
+ .navds-internalheader
- .navdsi-timeline
+ .navds-timeline
Note: This is a "dumb" codemod that uses a simple regex to find and replace. This can lead to unknown sideeffects, so its reccomended to scope the codemod to spesific files.
`npx @navikt/aksel codemod v4-internal-css **/*.css`
There is no general codemods for migrating from v2 -> v3.
npx @navikt/aksel codemod v3-copybutton ...
<CopyToClipboard />
has been renamed to <CopyButton />
and refactored.
- Namechange
- removed props
popoverText
,iconPosition
,popoverPlacement
- changed variants
- refactored CSS and React-code.
⚠️ Overwritten CSS will not be migrated!
-import { CopyToClipboard } from "@navikt/ds-react-internal";
+import { CopyButton } from "@navikt/ds-react";
-<CopyToClipboard
+<CopyButton
- popoverText="popoverText"
- iconPosition="left"
- popoverPlacement="bottom-end"
copyText="Text to copy"
size="medium"
>
- text
+</CopyButton>
-</CopyToClipboard>
v2-css: Patches changed css-variables v2-js: Patches changed js-variables v2-sass: Patches changed sass-variables v2-less: Patches changed less-variables
npx @navikt/aksel codemod v2-css src
When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for --v2-migration__
will show all found instances where you had redefined a token.
.example{
- color: var(--navds-global-color-gray-900);
+ color: var(--a-gray-900);
- --navds-semantic-color-text: red;
+ --v2-migration__navds-semantic-color-text: red;
}
npx @navikt/aksel codemod v2-sass src
.example{
- color: $navds-global-color-gray-900;
+ color: $a-gray-900;
}
npx @navikt/aksel codemod v2-less src
.example{
- color: @navds-global-color-gray-900;
+ color: @a-gray-900;
}
npx @navikt/aksel codemod v2-js src
- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
+ import { AGray900 } from "@navikt/ds-tokens";
const styled = styled.p`
- color: ${NavdsGlobalColorGray900};
+ color: ${AGray900};
`
v1-preset: Runs all codemods for beta -> v1 v1-pagination: Fixes breaking API-changes for component v1-tabs: Fixes breaking API-changes for component v1-chat: Fixes breaking API-changes for (now ) component
Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
Includes these transforms
- v1-tabs
- v1-chat
- v1-pagination
npx @navikt/aksel codemod v1-tabs src
<Tabs
defaultValue="logg"
onChange={(x) => console.log(x)}
- loop
+ iconPosition="left"
>
<Tabs.List
- loop
>
<Tabs.Tab
value="logg"
label="logg"
- iconPosition="left"
/>
</Tabs.List>
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
</Tabs>
npx @navikt/aksel codemod v1-chat src
-<SpeechBubble
+<Chat
- illustration={<Illustration />}
- topText="Ola Normann 01.01.21 14:00"
- illustrationBgColor="blue"
+ avatar={<Illustration />}
+ name="Ola Normann 01.01.21 14:00"
+ avatarBgColor="blue"
backgroundColor="red"
>
- <SpeechBubble.Bubble>
+ <Chat.Bubble>
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
- </SpeechBubble.Bubble>
+ </Chat.Bubble>
-</SpeechBubble>
+</Chat>
npx @navikt/aksel codemod v1-pagination src
This codemod can only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
-<Pagiation />
+<Pagiation size="small"/>
-<Pagiation size="medium"/>
+<Pagiation size="small"/>
-<Pagiation size="small"/>
+<Pagiation size="xsmall"/>