Security News
UK Officials Consider Banning Ransomware Payments from Public Entities
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
@navikt/aksel
Advanced tools
Aksel command line interface. Handles css-imports, codemods and more
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.
popoverText
, iconPosition
, popoverPlacement
-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
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"/>
FAQs
Aksel command line interface. Handles css-imports, codemods and more
The npm package @navikt/aksel receives a total of 39 weekly downloads. As such, @navikt/aksel popularity was classified as not popular.
We found that @navikt/aksel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.