mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 17:22:02 +00:00
Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
029d3c7719 | ||
|
Ken
|
7019898c09 | ||
|
github-actions[bot]andgithub-actions[bot]
|
36f4f5646a | ||
|
Ken
|
27b2b4a11c | ||
|
Ken
|
9c0174e206 | ||
|
github-actions[bot]andgithub-actions[bot]
|
b99a29f805 | ||
|
Ken
|
c03d53d5aa |
No files matched your search
@@ -1,5 +1,18 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1950](https://github.com/navikt/aksel/pull/1950) [`c03d53d5a`](https://github.com/navikt/aksel/commit/c03d53d5aa2dc7f06a223d48069fa21ee39bb396) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
|
||||
|
||||
- :tada: BulletList
|
||||
- :tada: NumberList
|
||||
|
||||
## 2.9.2
|
||||
|
||||
## 2.9.1
|
||||
|
||||
@@ -11,5 +11,5 @@ keywords:
|
||||
- overføring
|
||||
- overgang
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 24.04.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -12,5 +12,5 @@ keywords:
|
||||
- ombestemt
|
||||
- back
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 21.04.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -13,5 +13,5 @@ keywords:
|
||||
- oppfrisking
|
||||
- oppdatering
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 25.04.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.75 18.1893L17.75 9.5C17.75 9.08579 17.4142 8.75 17 8.75C16.5858 8.75 16.25 9.08579 16.25 9.5L16.25 18.1893L14.0303 15.9697C13.7374 15.6768 13.2626 15.6768 12.9697 15.9697C12.6768 16.2626 12.6768 16.7374 12.9697 17.0303L16.4697 20.5303C16.5416 20.6022 16.6245 20.6565 16.7129 20.6931C16.8013 20.7298 16.8983 20.75 17 20.75C17.1017 20.75 17.1987 20.7298 17.2871 20.6931C17.3755 20.6565 17.4584 20.6022 17.5303 20.5303L21.0303 17.0303C21.3232 16.7374 21.3232 16.2626 21.0303 15.9697C20.7374 15.6768 20.2626 15.6768 19.9697 15.9697L17.75 18.1893ZM11.0303 6.96967L7.53033 3.46967C7.45842 3.39776 7.37555 3.34351 7.28709 3.30691C7.19866 3.27024 7.10169 3.25 7 3.25C6.80806 3.25 6.61612 3.32322 6.46967 3.46967L2.96967 6.96967C2.67678 7.26256 2.67678 7.73744 2.96967 8.03033C3.26256 8.32322 3.73744 8.32322 4.03033 8.03033L6.25 5.81066L6.25 14.5C6.25 14.9142 6.58579 15.25 7 15.25C7.41421 15.25 7.75 14.9142 7.75 14.5L7.75 5.81066L9.96967 8.03033C10.2626 8.32322 10.7374 8.32322 11.0303 8.03033C11.3232 7.73744 11.3232 7.26256 11.0303 6.96967Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5303 21.0303C17.2374 21.3232 16.7626 21.3232 16.4697 21.0303L12.9697 17.5303C12.6768 17.2374 12.6768 16.7626 12.9697 16.4697C13.2626 16.1768 13.7374 16.1768 14.0303 16.4697L16.25 18.6893L16.25 9.5C16.25 9.08579 16.5858 8.75 17 8.75C17.4142 8.75 17.75 9.08579 17.75 9.5L17.75 18.6893L19.9697 16.4697C20.2626 16.1768 20.7374 16.1768 21.0303 16.4697C21.3232 16.7626 21.3232 17.2374 21.0303 17.5303L17.5303 21.0303ZM11.0303 6.46967L7.53033 2.96967C7.23744 2.67678 6.76256 2.67678 6.46967 2.96967L2.96967 6.46967C2.67678 6.76256 2.67678 7.23744 2.96967 7.53033C3.26256 7.82322 3.73744 7.82322 4.03033 7.53033L6.25 5.31066L6.25 14.5C6.25 14.9142 6.58579 15.25 7 15.25C7.41421 15.25 7.75 14.9142 7.75 14.5L7.75 5.31066L9.96967 7.53033C10.2626 7.82322 10.7374 7.82322 11.0303 7.53033C11.3232 7.23744 11.3232 6.76256 11.0303 6.46967Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 999 B |
@@ -9,5 +9,5 @@ keywords:
|
||||
- sortering
|
||||
- sorting
|
||||
variant: Stroke
|
||||
updated_at: 12.04.2023
|
||||
updated_at: 24.04.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 5.75C3.86193 5.75 3.75 5.86193 3.75 6C3.75 6.13807 3.86193 6.25 4 6.25C4.13807 6.25 4.25 6.13807 4.25 6C4.25 5.86193 4.13807 5.75 4 5.75ZM2.25 6C2.25 5.0335 3.0335 4.25 4 4.25C4.9665 4.25 5.75 5.0335 5.75 6C5.75 6.9665 4.9665 7.75 4 7.75C3.0335 7.75 2.25 6.9665 2.25 6ZM3.75 12C3.75 11.8619 3.86193 11.75 4 11.75C4.13807 11.75 4.25 11.8619 4.25 12C4.25 12.1381 4.13807 12.25 4 12.25C3.86193 12.25 3.75 12.1381 3.75 12ZM4 10.25C3.0335 10.25 2.25 11.0335 2.25 12C2.25 12.9665 3.0335 13.75 4 13.75C4.9665 13.75 5.75 12.9665 5.75 12C5.75 11.0335 4.9665 10.25 4 10.25ZM3.75 18C3.75 17.8619 3.86193 17.75 4 17.75C4.13807 17.75 4.25 17.8619 4.25 18C4.25 18.1381 4.13807 18.25 4 18.25C3.86193 18.25 3.75 18.1381 3.75 18ZM4 16.25C3.0335 16.25 2.25 17.0335 2.25 18C2.25 18.9665 3.0335 19.75 4 19.75C4.9665 19.75 5.75 18.9665 5.75 18C5.75 17.0335 4.9665 16.25 4 16.25ZM9 17.25C8.58579 17.25 8.25 17.5858 8.25 18C8.25 18.4142 8.58579 18.75 9 18.75H21C21.4142 18.75 21.75 18.4142 21.75 18C21.75 17.5858 21.4142 17.25 21 17.25H9ZM8.25 12C8.25 11.5858 8.58579 11.25 9 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H9C8.58579 12.75 8.25 12.4142 8.25 12ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H9Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,10 +1,11 @@
|
||||
name: List
|
||||
name: BulletList
|
||||
category: Statistics and math
|
||||
sub_category: Tabular
|
||||
keywords:
|
||||
- liste
|
||||
- rekkefølge
|
||||
- order
|
||||
- punktliste
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 28.04.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -13,5 +13,5 @@ keywords:
|
||||
- oppmerksomhet
|
||||
- viktig
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 25.04.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.25C2.58579 4.25 2.25 4.58579 2.25 5V7C2.25 7.41421 2.58579 7.75 3 7.75H5C5.41421 7.75 5.75 7.41421 5.75 7V5C5.75 4.58579 5.41421 4.25 5 4.25H3ZM3.75 6.25V5.75H4.25V6.25H3.75ZM3 10.25C2.58579 10.25 2.25 10.5858 2.25 11V13C2.25 13.4142 2.58579 13.75 3 13.75H5C5.41421 13.75 5.75 13.4142 5.75 13V11C5.75 10.5858 5.41421 10.25 5 10.25H3ZM3.75 12.25V11.75H4.25V12.25H3.75ZM2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H5C5.41421 16.25 5.75 16.5858 5.75 17V19C5.75 19.4142 5.41421 19.75 5 19.75H3C2.58579 19.75 2.25 19.4142 2.25 19V17ZM3.75 17.75V18.25H4.25V17.75H3.75ZM8 17.25C7.58579 17.25 7.25 17.5858 7.25 18C7.25 18.4142 7.58579 18.75 8 18.75H21C21.4142 18.75 21.75 18.4142 21.75 18C21.75 17.5858 21.4142 17.25 21 17.25H8ZM7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12ZM8 5.25C7.58579 5.25 7.25 5.58579 7.25 6C7.25 6.41421 7.58579 6.75 8 6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H8Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.25C2.58579 4.25 2.25 4.58579 2.25 5V7C2.25 7.41421 2.58579 7.75 3 7.75H5C5.41421 7.75 5.75 7.41421 5.75 7V5C5.75 4.58579 5.41421 4.25 5 4.25H3ZM3 10.25C2.58579 10.25 2.25 10.5858 2.25 11V13C2.25 13.4142 2.58579 13.75 3 13.75H5C5.41421 13.75 5.75 13.4142 5.75 13V11C5.75 10.5858 5.41421 10.25 5 10.25H3ZM2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H5C5.41421 16.25 5.75 16.5858 5.75 17V19C5.75 19.4142 5.41421 19.75 5 19.75H3C2.58579 19.75 2.25 19.4142 2.25 19V17ZM8 17.25C7.58579 17.25 7.25 17.5858 7.25 18C7.25 18.4142 7.58579 18.75 8 18.75H21C21.4142 18.75 21.75 18.4142 21.75 18C21.75 17.5858 21.4142 17.25 21 17.25H8ZM7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12ZM8 5.25C7.58579 5.25 7.25 5.58579 7.25 6C7.25 6.41421 7.58579 6.75 8 6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H8Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 5C5.25 4.7234 5.09776 4.46926 4.8539 4.33875C4.61003 4.20823 4.31412 4.22254 4.08398 4.37596L2.58398 5.37596C2.23933 5.60573 2.1462 6.07138 2.37597 6.41603C2.60573 6.76067 3.07138 6.8538 3.41603 6.62404L3.75 6.40139V9.75H3C2.58579 9.75 2.25 10.0858 2.25 10.5C2.25 10.9142 2.58579 11.25 3 11.25H4.5H6C6.41422 11.25 6.75 10.9142 6.75 10.5C6.75 10.0858 6.41422 9.75 6 9.75H5.25V5ZM4.5 14.25C4.08579 14.25 3.75 14.5858 3.75 15C3.75 15.4142 3.41422 15.75 3 15.75C2.58579 15.75 2.25 15.4142 2.25 15C2.25 13.7574 3.25736 12.75 4.5 12.75H4.54007C5.76058 12.75 6.75 13.7394 6.75 14.9599C6.75 15.4875 6.56129 15.9976 6.21798 16.3981L4.63067 18.25H6C6.41422 18.25 6.75 18.5858 6.75 19C6.75 19.4142 6.41422 19.75 6 19.75H3C2.70711 19.75 2.44101 19.5795 2.31862 19.3134C2.19623 19.0473 2.23995 18.7343 2.43056 18.5119L5.07909 15.422C5.18938 15.2933 5.25 15.1294 5.25 14.9599C5.25 14.5679 4.93215 14.25 4.54007 14.25H4.5ZM9 17.25C8.58579 17.25 8.25 17.5858 8.25 18C8.25 18.4142 8.58579 18.75 9 18.75H21C21.4142 18.75 21.75 18.4142 21.75 18C21.75 17.5858 21.4142 17.25 21 17.25H9ZM8.25 12C8.25 11.5858 8.58579 11.25 9 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H9C8.58579 12.75 8.25 12.4142 8.25 12ZM9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H9Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,10 +1,11 @@
|
||||
name: ListFill
|
||||
name: NumberList
|
||||
category: Statistics and math
|
||||
sub_category: Tabular
|
||||
keywords:
|
||||
- liste
|
||||
- rekkefølge
|
||||
- order
|
||||
variant: Fill
|
||||
updated_at: 08.03.2023
|
||||
created_at: 07.03.2023
|
||||
- nummerliste
|
||||
variant: Stroke
|
||||
updated_at: 28.04.2023
|
||||
created_at: 28.04.2023
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.5",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,30 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 2.9.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
|
||||
|
||||
- `@navikt/ds-codemods` vil bli deprecated ettehvert.
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
+157
-1
@@ -1,6 +1,6 @@
|
||||
# Aksel command line interface
|
||||
|
||||
CLI tool for managing CSS-imports and more when consuming Aksel-packages.
|
||||
CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
|
||||
|
||||
[Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
|
||||
|
||||
@@ -10,6 +10,162 @@ npx @navikt/aksel
|
||||
|
||||
commands:
|
||||
css-imports: Generate css-imports for all components from Aksel
|
||||
codemod: Codemods for version-migrations related to Aksel
|
||||
```
|
||||
|
||||
## Codemods
|
||||
|
||||
Codemods are code-transformations that patches breaking changes in your project. This helps when migrating without spending time doing it manually.
|
||||
|
||||
```bash
|
||||
To get started:
|
||||
npx @navikt/aksel codemod --help
|
||||
```
|
||||
|
||||
### v1 -> v2
|
||||
|
||||
[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)
|
||||
|
||||
v2-css: Patches changed css-variables
|
||||
v2-js: Patches changed js-variables
|
||||
v2-sass: Patches changed sass-variables
|
||||
v2-less: Patches changed less-variables
|
||||
|
||||
#### css-tokens (--navds format)
|
||||
|
||||
`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.
|
||||
|
||||
```diff
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
#### sass/scss-tokens ($navds format)
|
||||
|
||||
`npx @navikt/aksel codemod v2-sass src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: $navds-global-color-gray-900;
|
||||
+ color: $a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
#### less-tokens (@navds format)
|
||||
|
||||
`npx @navikt/aksel codemod v2-less src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: @navds-global-color-gray-900;
|
||||
+ color: @a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
#### js-tokens
|
||||
|
||||
`npx @navikt/aksel codemod v2-js src`
|
||||
|
||||
```diff
|
||||
|
||||
- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
|
||||
+ import { AGray900 } from "@navikt/ds-tokens";
|
||||
|
||||
const styled = styled.p`
|
||||
- color: ${NavdsGlobalColorGray900};
|
||||
+ color: ${AGray900};
|
||||
`
|
||||
```
|
||||
|
||||
### beta -> v1
|
||||
|
||||
[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h50d54a5af8c1)
|
||||
|
||||
v1-preset: Runs all codemods for beta -> v1
|
||||
v1-pagination: Fixes breaking API-changes for <Pagination /> component
|
||||
v1-tabs: Fixes breaking API-changes for <Tabs /> component
|
||||
v1-chat: Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component
|
||||
|
||||
#### preset
|
||||
|
||||
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
|
||||
|
||||
#### tabs
|
||||
|
||||
`npx @navikt/aksel codemod v1-tabs src`
|
||||
|
||||
```diff
|
||||
<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>
|
||||
```
|
||||
|
||||
#### chat
|
||||
|
||||
`npx @navikt/aksel codemod v1-chat src`
|
||||
|
||||
```diff
|
||||
-<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>
|
||||
```
|
||||
|
||||
#### pagination
|
||||
|
||||
`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.
|
||||
|
||||
```diff
|
||||
-<Pagiation />
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="medium"/>
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="small"/>
|
||||
+<Pagiation size="xsmall"/>
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
const config = {
|
||||
transform: { "^.+\\.js?$": "ts-jest", "^.+\\.ts?$": "ts-jest" },
|
||||
testMatch: ["**/tests/*.test.ts"],
|
||||
verbose: true,
|
||||
rootDir: ".",
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
+19
-11
@@ -1,23 +1,25 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "2.9.2",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods (planned) and more",
|
||||
"version": "2.9.5",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"react",
|
||||
"command-line",
|
||||
"Commandline",
|
||||
"CLI",
|
||||
"css",
|
||||
"CDN"
|
||||
"CDN",
|
||||
"Codemods"
|
||||
],
|
||||
"files": [
|
||||
"dist"
|
||||
"dist",
|
||||
"!dist/**/tests"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rimraf dist",
|
||||
"build": "yarn clean && tsc -p tsconfig.json",
|
||||
"dev": "tsc --watch -p tsconfig.json"
|
||||
"dev": "tsc --watch -p tsconfig.json",
|
||||
"test": "yarn build && jest",
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"bin": "./dist/index.js",
|
||||
"repository": {
|
||||
@@ -25,22 +27,28 @@
|
||||
"url": "git+https://github.com/navikt/aksel.git",
|
||||
"directory": "@navikt/aksel"
|
||||
},
|
||||
"type": "module",
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "2.9.2",
|
||||
"@navikt/ds-css": "2.9.5",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^3.0.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
"commander": "10.0.1",
|
||||
"enquirer": "^2.3.6",
|
||||
"fast-glob": "3.2.11",
|
||||
"figlet": "1.6.0",
|
||||
"is-git-clean": "1.1.0",
|
||||
"jscodeshift": "0.13.1",
|
||||
"jscodeshift-add-imports": "1.0.10",
|
||||
"lodash": "4.17.21",
|
||||
"react-scanner": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/inquirer": "^9.0.3",
|
||||
"@types/jest": "^29.0.0",
|
||||
"jest": "^29.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"typescript": "^4.8.0"
|
||||
},
|
||||
"sideEffects": false,
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Command } from "commander";
|
||||
import figlet from "figlet";
|
||||
import chalk from "chalk";
|
||||
import { getMigrationString } from "./migrations.js";
|
||||
import { validateGit, validateMigration } from "./validation.js";
|
||||
import { runCodeshift } from "./run-codeshift.js";
|
||||
|
||||
const program = new Command();
|
||||
|
||||
export function codemodCommand() {
|
||||
program.name(`${chalk.blueBright(`npx @navikt/aksel`)}`);
|
||||
|
||||
program
|
||||
.command("codemod")
|
||||
.addHelpText("beforeAll", figlet.textSync("Codemods"))
|
||||
.addHelpText(
|
||||
"afterAll",
|
||||
chalk.gray(`\nAvailable migrations:\n${getMigrationString()}`)
|
||||
)
|
||||
.description("Migrations for Aksel components and more")
|
||||
.argument("<migration>", "Migration name")
|
||||
|
||||
.option("-e, --ext [extension]", "default: js,ts,jsx,tsx,css,scss,less")
|
||||
.option(
|
||||
"-g, --glob [glob]",
|
||||
"Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. "
|
||||
)
|
||||
.option("-d, --dry-run", "Dry run, no changes will be made")
|
||||
.option("-p, --print", "Print transformed files")
|
||||
.option(
|
||||
"-f, --force",
|
||||
"Forcibly run migrations without checking git-changes"
|
||||
)
|
||||
.addHelpText(
|
||||
"after",
|
||||
`\nExample:
|
||||
$ npx @navikt/aksel --dry-run v2-css`
|
||||
)
|
||||
.action((str, options) => {
|
||||
validateMigration(str, program);
|
||||
validateGit(options, program);
|
||||
runCodeshift(str, options, program);
|
||||
});
|
||||
|
||||
program.parse();
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import chalk from "chalk";
|
||||
|
||||
export const migrations: {
|
||||
[key: string]: { description: string; value: string; path: string }[];
|
||||
} = {
|
||||
"1.0.0": [
|
||||
{
|
||||
description: "Runs all codemods for beta -> v1 migration",
|
||||
value: "v1-preset",
|
||||
path: "v1.0.0/preset/preset",
|
||||
},
|
||||
{
|
||||
description: "Fixes breaking API-changes for <Pagination /> component",
|
||||
value: "v1-pagination",
|
||||
path: "v1.0.0/pagination/pagination",
|
||||
},
|
||||
{
|
||||
description: "Fixes breaking API-changes for <Tabs /> component",
|
||||
value: "v1-tabs",
|
||||
path: "v1.0.0/tabs/tabs",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component",
|
||||
value: "v1-chat",
|
||||
path: "v1.0.0/chat/chat",
|
||||
},
|
||||
],
|
||||
"2.0.0": [
|
||||
{
|
||||
description: "Patches changed css-variables",
|
||||
value: "v2-css",
|
||||
path: "v2.0.0/update-css-tokens/update-css-tokens",
|
||||
},
|
||||
{
|
||||
description: "Patches changed js-variables",
|
||||
value: "v2-js",
|
||||
path: "v2.0.0/update-js-tokens/update-js-tokens",
|
||||
},
|
||||
{
|
||||
description: "Patches changed sass-variables",
|
||||
value: "v2-sass",
|
||||
path: "v2.0.0/update-sass-tokens/update-sass-tokens",
|
||||
},
|
||||
{
|
||||
description: "Patches changed less-variables",
|
||||
value: "v2-less",
|
||||
path: "v2.0.0/update-less-tokens/update-less-tokens",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function getMigrationPath(str: string) {
|
||||
return Object.values(migrations)
|
||||
.reduce((acc, val) => [...val, ...acc], [])
|
||||
.find((x) => x.value === str)?.path;
|
||||
}
|
||||
|
||||
export function getMigrationNames() {
|
||||
return Object.values(migrations).reduce(
|
||||
(acc, val) => [...val.map((x) => x.value), ...acc],
|
||||
[] as string[]
|
||||
);
|
||||
}
|
||||
|
||||
export function getMigrationString() {
|
||||
let str = "";
|
||||
|
||||
Object.entries(migrations).forEach(([version, migrations]) => {
|
||||
str += `\n${chalk.underline(version)}\n`;
|
||||
migrations.forEach((migration) => {
|
||||
str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
|
||||
});
|
||||
});
|
||||
|
||||
return str;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Command } from "commander";
|
||||
import fg from "fast-glob";
|
||||
import * as jscodeshift from "jscodeshift/src/Runner";
|
||||
import path from "path";
|
||||
import { getMigrationPath } from "./migrations";
|
||||
import chalk from "chalk";
|
||||
|
||||
const ignoreNodeModules = [
|
||||
"**/node_modules/**",
|
||||
"**/dist/**",
|
||||
"**/build/**",
|
||||
"**/lib/**",
|
||||
"**/.next/**",
|
||||
];
|
||||
|
||||
export async function runCodeshift(
|
||||
input: string,
|
||||
options: any,
|
||||
program: Command
|
||||
) {
|
||||
const codemodPath = path.join(
|
||||
__dirname,
|
||||
`./transforms/${getMigrationPath(input)}.js`
|
||||
);
|
||||
|
||||
const filepaths = fg.sync([options.glob ?? getDefaultGlob(options?.ext)], {
|
||||
cwd: process.cwd(),
|
||||
ignore: ignoreNodeModules,
|
||||
});
|
||||
|
||||
console.log("\nRunning migration:", chalk.green("input"));
|
||||
|
||||
options?.glob && console.log(`Using glob: ${chalk.green(options.glob)}\n`);
|
||||
|
||||
try {
|
||||
await jscodeshift.run(codemodPath, filepaths, {
|
||||
babel: true,
|
||||
ignorePattern: ignoreNodeModules,
|
||||
extensions: "tsx,ts,jsx,js",
|
||||
parser: "tsx",
|
||||
verbose: 2,
|
||||
runInBand: true,
|
||||
silent: false,
|
||||
stdin: false,
|
||||
dry: options?.dryRun,
|
||||
force: options?.force,
|
||||
print: options?.print,
|
||||
});
|
||||
} catch (error) {
|
||||
program.error(chalk.red("Error:", error.message));
|
||||
}
|
||||
}
|
||||
|
||||
function getDefaultGlob(ext: string): string {
|
||||
const defaultExt = "js,ts,jsx,tsx,css,scss,less";
|
||||
return `**/*.{${cleanExtensions(ext ?? defaultExt).join(",")}}`;
|
||||
}
|
||||
|
||||
function cleanExtensions(ext: string): string[] {
|
||||
return ext
|
||||
.split(",")
|
||||
.map((e) => e.trim())
|
||||
.map((e) => e.replace(".", ""));
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { getMigrationNames, getMigrationPath } from "../migrations";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
|
||||
describe("migrations", () => {
|
||||
const values = getMigrationNames();
|
||||
const paths = values.map((x) => getMigrationPath(x));
|
||||
|
||||
paths.forEach((x) => {
|
||||
const checkPath = path.join(
|
||||
process.cwd(),
|
||||
"dist/codemod",
|
||||
`transforms/${x}.js`
|
||||
);
|
||||
test(`Check transform-path: ${checkPath}`, () => {
|
||||
expect(fs.existsSync(checkPath)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,368 @@
|
||||
/* prettier-ignore */
|
||||
const tokens = [
|
||||
["--navds-semantic-color-text-inverted", "--a-text-on-inverted"],
|
||||
["--navds-semantic-color-text-muted", "--a-text-subtle"],
|
||||
["--navds-semantic-color-text", "--a-text-default"],
|
||||
["--navds-semantic-color-feedback-danger-text", "--a-text-danger"],
|
||||
["--navds-semantic-color-link-visited", "--a-text-visited"],
|
||||
["--navds-semantic-color-link", "--a-text-action"],
|
||||
["--navds-spacing-32", "--a-spacing-32"],
|
||||
["--navds-spacing-24", "--a-spacing-24"],
|
||||
["--navds-spacing-20", "--a-spacing-20"],
|
||||
["--navds-spacing-18", "--a-spacing-18"],
|
||||
["--navds-spacing-16", "--a-spacing-16"],
|
||||
["--navds-spacing-14", "--a-spacing-14"],
|
||||
["--navds-spacing-12", "--a-spacing-12"],
|
||||
["--navds-spacing-11", "--a-spacing-11"],
|
||||
["--navds-spacing-10", "--a-spacing-10"],
|
||||
["--navds-spacing-9", "--a-spacing-9"],
|
||||
["--navds-spacing-8", "--a-spacing-8"],
|
||||
["--navds-spacing-7", "--a-spacing-7"],
|
||||
["--navds-spacing-6", "--a-spacing-6"],
|
||||
["--navds-spacing-5", "--a-spacing-5"],
|
||||
["--navds-spacing-4", "--a-spacing-4"],
|
||||
["--navds-spacing-3", "--a-spacing-3"],
|
||||
["--navds-spacing-2", "--a-spacing-2"],
|
||||
["--navds-spacing-1", "--a-spacing-1"],
|
||||
["--navds-global-color-purple-900", "--a-purple-900"],
|
||||
["--navds-global-color-purple-800", "--a-purple-800"],
|
||||
["--navds-global-color-purple-700", "--a-purple-700"],
|
||||
["--navds-global-color-purple-600", "--a-purple-600"],
|
||||
["--navds-global-color-purple-500", "--a-purple-500"],
|
||||
["--navds-global-color-purple-400", "--a-purple-400"],
|
||||
["--navds-global-color-purple-300", "--a-purple-300"],
|
||||
["--navds-global-color-purple-200", "--a-purple-200"],
|
||||
["--navds-global-color-purple-100", "--a-purple-100"],
|
||||
["--navds-global-color-purple-50", "--a-purple-50"],
|
||||
["--navds-global-color-orange-900", "--a-orange-900"],
|
||||
["--navds-global-color-orange-800", "--a-orange-800"],
|
||||
["--navds-global-color-orange-700", "--a-orange-700"],
|
||||
["--navds-global-color-orange-600", "--a-orange-600"],
|
||||
["--navds-global-color-orange-500", "--a-orange-500"],
|
||||
["--navds-global-color-orange-400", "--a-orange-400"],
|
||||
["--navds-global-color-orange-300", "--a-orange-300"],
|
||||
["--navds-global-color-orange-200", "--a-orange-200"],
|
||||
["--navds-global-color-orange-100", "--a-orange-100"],
|
||||
["--navds-global-color-orange-50", "--a-orange-50"],
|
||||
["--navds-global-color-limegreen-900", "--a-limegreen-900"],
|
||||
["--navds-global-color-limegreen-800", "--a-limegreen-800"],
|
||||
["--navds-global-color-limegreen-700", "--a-limegreen-700"],
|
||||
["--navds-global-color-limegreen-600", "--a-limegreen-600"],
|
||||
["--navds-global-color-limegreen-500", "--a-limegreen-500"],
|
||||
["--navds-global-color-limegreen-400", "--a-limegreen-400"],
|
||||
["--navds-global-color-limegreen-300", "--a-limegreen-300"],
|
||||
["--navds-global-color-limegreen-200", "--a-limegreen-200"],
|
||||
["--navds-global-color-limegreen-100", "--a-limegreen-100"],
|
||||
["--navds-global-color-limegreen-50", "--a-limegreen-50"],
|
||||
["--navds-global-color-lightblue-900", "--a-lightblue-900"],
|
||||
["--navds-global-color-lightblue-800", "--a-lightblue-800"],
|
||||
["--navds-global-color-lightblue-700", "--a-lightblue-700"],
|
||||
["--navds-global-color-lightblue-600", "--a-lightblue-600"],
|
||||
["--navds-global-color-lightblue-500", "--a-lightblue-500"],
|
||||
["--navds-global-color-lightblue-400", "--a-lightblue-400"],
|
||||
["--navds-global-color-lightblue-300", "--a-lightblue-300"],
|
||||
["--navds-global-color-lightblue-200", "--a-lightblue-200"],
|
||||
["--navds-global-color-lightblue-100", "--a-lightblue-100"],
|
||||
["--navds-global-color-lightblue-50", "--a-lightblue-50"],
|
||||
["--navds-global-color-green-900", "--a-green-900"],
|
||||
["--navds-global-color-green-800", "--a-green-800"],
|
||||
["--navds-global-color-green-700", "--a-green-700"],
|
||||
["--navds-global-color-green-600", "--a-green-600"],
|
||||
["--navds-global-color-green-500", "--a-green-500"],
|
||||
["--navds-global-color-green-400", "--a-green-400"],
|
||||
["--navds-global-color-green-300", "--a-green-300"],
|
||||
["--navds-global-color-green-200", "--a-green-200"],
|
||||
["--navds-global-color-green-100", "--a-green-100"],
|
||||
["--navds-global-color-green-50", "--a-green-50"],
|
||||
["--navds-global-color-deepblue-900", "--a-deepblue-900"],
|
||||
["--navds-global-color-deepblue-800", "--a-deepblue-800"],
|
||||
["--navds-global-color-deepblue-700", "--a-deepblue-700"],
|
||||
["--navds-global-color-deepblue-600", "--a-deepblue-600"],
|
||||
["--navds-global-color-deepblue-500", "--a-deepblue-500"],
|
||||
["--navds-global-color-deepblue-400", "--a-deepblue-400"],
|
||||
["--navds-global-color-deepblue-300", "--a-deepblue-300"],
|
||||
["--navds-global-color-deepblue-200", "--a-deepblue-200"],
|
||||
["--navds-global-color-deepblue-100", "--a-deepblue-100"],
|
||||
["--navds-global-color-deepblue-50", "--a-deepblue-50"],
|
||||
["--navds-global-color-red-900", "--a-red-900"],
|
||||
["--navds-global-color-red-800", "--a-red-800"],
|
||||
["--navds-global-color-red-700", "--a-red-700"],
|
||||
["--navds-global-color-red-600", "--a-red-600"],
|
||||
["--navds-global-color-red-500", "--a-red-500"],
|
||||
["--navds-global-color-red-400", "--a-red-400"],
|
||||
["--navds-global-color-red-300", "--a-red-300"],
|
||||
["--navds-global-color-red-200", "--a-red-200"],
|
||||
["--navds-global-color-red-100", "--a-red-100"],
|
||||
["--navds-global-color-red-50", "--a-red-50"],
|
||||
["--navds-global-color-blue-900", "--a-blue-900"],
|
||||
["--navds-global-color-blue-800", "--a-blue-800"],
|
||||
["--navds-global-color-blue-700", "--a-blue-700"],
|
||||
["--navds-global-color-blue-600", "--a-blue-600"],
|
||||
["--navds-global-color-blue-500", "--a-blue-500"],
|
||||
["--navds-global-color-blue-400", "--a-blue-400"],
|
||||
["--navds-global-color-blue-300", "--a-blue-300"],
|
||||
["--navds-global-color-blue-200", "--a-blue-200"],
|
||||
["--navds-global-color-blue-100", "--a-blue-100"],
|
||||
["--navds-global-color-blue-50", "--a-blue-50"],
|
||||
["--navds-global-color-gray-900", "--a-gray-900"],
|
||||
["--navds-global-color-gray-800", "--a-gray-800"],
|
||||
["--navds-global-color-gray-700", "--a-gray-700"],
|
||||
["--navds-global-color-gray-600", "--a-gray-600"],
|
||||
["--navds-global-color-gray-500", "--a-gray-500"],
|
||||
["--navds-global-color-gray-400", "--a-gray-400"],
|
||||
["--navds-global-color-gray-300", "--a-gray-300"],
|
||||
["--navds-global-color-gray-200", "--a-gray-200"],
|
||||
["--navds-global-color-gray-100", "--a-gray-100"],
|
||||
["--navds-global-color-gray-50", "--a-gray-50"],
|
||||
["--navds-global-color-nav-red", "--a-nav-red"],
|
||||
["--navds-global-color-white", "--a-white"],
|
||||
["--navds-global-color-transparent", "--a-transparent"],
|
||||
["--navds-border-radius-full", "--a-border-radius-full"],
|
||||
["--navds-border-radius-xlarge", "--a-border-radius-xlarge"],
|
||||
["--navds-border-radius-large", "--a-border-radius-large"],
|
||||
["--navds-border-radius-medium", "--a-border-radius-medium"],
|
||||
["--navds-border-radius-small", "--a-border-radius-small"],
|
||||
["--navds-z-index-tooltip", "--a-z-index-tooltip"],
|
||||
["--navds-z-index-focus", "--a-z-index-focus"],
|
||||
["--navds-z-index-popover", "--a-z-index-popover"],
|
||||
["--navds-z-index-modal", "--a-z-index-modal"],
|
||||
["--navds-font-weight-regular", "--a-font-weight-regular"],
|
||||
["--navds-font-weight-bold", "--a-font-weight-bold"],
|
||||
["--navds-font-size-small", "--a-font-size-small"],
|
||||
["--navds-font-size-medium", "--a-font-size-medium"],
|
||||
["--navds-font-size-large", "--a-font-size-large"],
|
||||
["--navds-font-size-xlarge", "--a-font-size-xlarge"],
|
||||
["--navds-font-size-heading-xsmall", "--a-font-size-heading-xsmall"],
|
||||
["--navds-font-size-heading-small", "--a-font-size-heading-small"],
|
||||
["--navds-font-size-heading-medium", "--a-font-size-heading-medium"],
|
||||
["--navds-font-size-heading-large", "--a-font-size-heading-large"],
|
||||
["--navds-font-size-heading-xlarge", "--a-font-size-heading-xlarge"],
|
||||
["--navds-font-size-heading-2xlarge", "--a-font-size-heading-2xlarge"],
|
||||
["--navds-font-line-height-medium", "--a-font-line-height-medium"],
|
||||
["--navds-font-line-height-large", "--a-font-line-height-large"],
|
||||
["--navds-font-line-height-xlarge", "--a-font-line-height-xlarge"],
|
||||
["--navds-font-line-height-heading-xsmall","--a-font-line-height-heading-xsmall"],
|
||||
["--navds-font-line-height-heading-small","--a-font-line-height-heading-small"],
|
||||
["--navds-font-line-height-heading-medium","--a-font-line-height-heading-medium"],
|
||||
["--navds-font-line-height-heading-large","--a-font-line-height-heading-large"],
|
||||
["--navds-font-line-height-heading-xlarge","--a-font-line-height-heading-xlarge"],
|
||||
["--navds-font-line-height-heading-2xlarge","--a-font-line-height-heading-2xlarge"],
|
||||
["--navds-font-family", "--a-font-family"],
|
||||
|
||||
["--navds-semantic-color-feedback-info-icon", "--a-icon-info"],
|
||||
["--navds-semantic-color-feedback-warning-icon", "--a-icon-warning"],
|
||||
["--navds-semantic-color-feedback-danger-icon", "--a-icon-danger"],
|
||||
["--navds-semantic-color-feedback-success-icon", "--a-icon-success"],
|
||||
|
||||
["--navds-semantic-color-feedback-info-background", "--a-surface-info-subtle"],
|
||||
["--navds-semantic-color-feedback-warning-background", "--a-surface-warning-subtle"],
|
||||
["--navds-semantic-color-interaction-danger-selected", "--a-surface-danger-active"],
|
||||
["--navds-semantic-color-interaction-danger-hover", "--a-surface-danger-hover"],
|
||||
["--navds-semantic-color-interaction-danger", "--a-surface-danger"],
|
||||
["--navds-semantic-color-feedback-danger-background", "--a-surface-danger-subtle"],
|
||||
["--navds-semantic-color-feedback-success-background", "--a-surface-success-subtle"],
|
||||
["--navds-semantic-color-interaction-primary-hover-subtle","--a-surface-action-subtle-hover"],
|
||||
["--navds-semantic-color-interaction-primary-selected","--a-surface-action-selected"],
|
||||
["--navds-semantic-color-interaction-primary-hover","--a-surface-action-hover"],
|
||||
["--navds-semantic-color-interaction-primary", "--a-surface-action"],
|
||||
["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
|
||||
["--navds-semantic-color-component-background-inverted", "--a-surface-inverted"],
|
||||
["--navds-semantic-color-component-background-alternate", "--a-surface-subtle"],
|
||||
["--navds-semantic-color-component-background-light", "--a-surface-default"],
|
||||
["--navds-semantic-color-canvas-background-light", "--a-bg-default"],
|
||||
["--navds-semantic-color-canvas-background", "--a-bg-subtle"],
|
||||
["--navds-semantic-color-border-inverted", "--a-border-on-inverted"],
|
||||
["--navds-semantic-color-border-muted", "--a-border-default"],
|
||||
["--navds-semantic-color-border", "--a-border-strong"],
|
||||
["--navds-semantic-color-focus-inverted", "--a-border-focus-on-inverted"],
|
||||
["--navds-semantic-color-focus", "--a-border-focus"],
|
||||
["--navds-semantic-color-feedback-info-border", "--a-border-info"],
|
||||
["--navds-semantic-color-feedback-warning-border", "--a-border-warning"],
|
||||
["--navds-semantic-color-feedback-danger-border", "--a-border-danger"],
|
||||
["--navds-semantic-color-feedback-success-border", "--a-border-success"],
|
||||
["--navds-semantic-color-divider", "--a-border-divider"],
|
||||
["--navds-shadow-focus-inverted", "--a-shadow-focus-inverted"],
|
||||
["--navds-shadow-focus", "--a-shadow-focus"],
|
||||
["--navds-shadow-xsmall", "--a-shadow-xsmall"],
|
||||
["--navds-shadow-small", "--a-shadow-small"],
|
||||
["--navds-shadow-medium", "--a-shadow-medium"],
|
||||
["--navds-shadow-large", "--a-shadow-large"],
|
||||
["--navds-shadow-xlarge", "--a-shadow-xlarge"],
|
||||
|
||||
/* Components */
|
||||
["--navds-modal-color-overlay", "--a-surface-backdrop"],
|
||||
["--navds-accordion-color-border", "--a-border-strong"],
|
||||
["--navds-accordion-color-text-hover", "--a-surface-action"],
|
||||
["--navds-accordion-color-border-hover", "--a-surface-action"],
|
||||
["--navds-accordion-color-background-open", "--a-surface-action-subtle"],
|
||||
["--navds-alert-color-error-border", "--a-border-danger"],
|
||||
["--navds-alert-color-error-background", "--a-surface-danger-subtle"],
|
||||
["--navds-alert-color-warning-border", "--a-border-warning"],
|
||||
["--navds-alert-color-warning-background", "--a-surface-warning-subtle"],
|
||||
["--navds-alert-color-info-border", "--a-border-info"],
|
||||
["--navds-alert-color-info-background", "--a-surface-info-subtle"],
|
||||
["--navds-alert-color-success-border", "--a-border-success"],
|
||||
["--navds-alert-color-success-background", "--a-surface-success-subtle"],
|
||||
["--navds-alert-color-border", "--a-border-default"],
|
||||
["--navds-chat-color-avatar-background", "--a-bg-subtle"],
|
||||
["--navds-chat-color-background", "--a-bg-subtle"],
|
||||
["--navds-chat-color-avatar", "--a-text-default"],
|
||||
["--navds-guide-panel-color-illustration-background", "--a-surface-action-subtle"],
|
||||
["--navds-guide-panel-color-background", "--a-surface-default"],
|
||||
["--navds-guide-panel-color-border", "--a-border-action"],
|
||||
["--navds-error-summary-color-background", "--a-surface-default"],
|
||||
["--navds-error-summary-color-border", "--a-border-danger"],
|
||||
["--navds-confirmation-panel-color-background-checked", "--a-surface-success-subtle"],
|
||||
["--navds-confirmation-panel-color-background-error", "--a-surface-danger-subtle"],
|
||||
["--navds-confirmation-panel-color-border-checked", "--a-border-success"],
|
||||
["--navds-confirmation-panel-color-border-error", "--a-border-danger"],
|
||||
["--navds-confirmation-panel-color-background", "--a-surface-warning-subtle"],
|
||||
["--navds-confirmation-panel-color-border", "--a-border-warning"],
|
||||
["--navds-radio-checkbox-color-background-hover", "--a-surface-action-subtle"],
|
||||
["--navds-radio-checkbox-color-background-checked", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-shadow-hover", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-shadow-checked", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-shadow-error", "--a-surface-danger"],
|
||||
["--navds-radio-checkbox-color-label-hover", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-background", "--a-surface-default"],
|
||||
["--navds-radio-checkbox-color-text", "--a-text-default"],
|
||||
["--navds-radio-checkbox-color-shadow", "--a-border-strong"],
|
||||
["--navds-select-color-border-hover", "--a-surface-action"],
|
||||
["--navds-select-color-border-error", "--a-surface-danger"],
|
||||
["--navds-select-color-shadow-error", "--a-surface-danger"],
|
||||
["--navds-select-color-border-disabled","--a-gray-400"],
|
||||
["--navds-select-color-background-disabled", "--a-surface-subtle"],
|
||||
["--navds-switch-color-label-hover", "--a-surface-action"],
|
||||
["--navds-select-color-background", "--a-surface-default"],
|
||||
["--navds-select-color-border", "--a-border-strong"],
|
||||
["--navds-switch-color-label", "--a-text-default"],
|
||||
["--navds-switch-color-track-background-hover-checked", "--a-icon-success"],
|
||||
["--navds-switch-color-track-shadow-inner-focus", "--a-surface-default"],
|
||||
["--navds-switch-color-track-background-checked", "--a-border-success"],
|
||||
["--navds-switch-color-track-background-hover", "--a-surface-neutral-hover"],
|
||||
["--navds-switch-color-track-background", "--a-surface-neutral"],
|
||||
["--navds-switch-color-thumb-icon-checked", "--a-border-success"],
|
||||
["--navds-switch-color-thumb-loader-checked", "--a-border-success"],
|
||||
["--navds-switch-color-thumb-icon", "--a-icon-subtle"],
|
||||
["--navds-switch-color-thumb", "--a-surface-default"],
|
||||
["--navds-textarea-color-counter-text-error", "--a-surface-danger"],
|
||||
["--navds-textarea-color-border-hover", "--a-surface-action"],
|
||||
["--navds-textarea-color-border-error", "--a-surface-danger"],
|
||||
["--navds-textarea-color-shadow-error", "--a-surface-danger"],
|
||||
["--navds-textarea-color-counter-text", "--a-text-subtle"],
|
||||
["--navds-textarea-color-text-disabled", "--a-text-default"],
|
||||
["--navds-textarea-color-border-disabled", "--a-gray-400"],
|
||||
["--navds-textarea-color-background-disabled", "--a-surface-subtle"],
|
||||
["--navds-textarea-color-background", "--a-surface-default"],
|
||||
["--navds-textarea-color-border", "--a-border-strong"],
|
||||
["--navds-help-text-color-popover-background", "--a-surface-info-subtle"],
|
||||
["--navds-help-text-color-background-hover", "--a-surface-action"],
|
||||
["--navds-help-text-color-background-focus", "--a-surface-action"],
|
||||
["--navds-help-text-color-shadow-hover", "--a-surface-action"],
|
||||
["--navds-help-text-color-hover", "--a-surface-default"],
|
||||
["--navds-help-text-color-focus", "--a-surface-default"],
|
||||
["--navds-help-text-color", "--a-surface-action"],
|
||||
["--navds-link-color-text-focus", "--a-text-on-action"],
|
||||
["--navds-link-color-text-active", "--a-text-on-action"],
|
||||
["--navds-link-color-text", "--a-text-action"],
|
||||
["--navds-link-color-icon", "--a-icon-action"],
|
||||
["--navds-link-color-icon-focus", "--a-icon-on-action"],
|
||||
["--navds-link-color-background-focus", "--a-border-focus"],
|
||||
["--navds-link-color-background-active", "--a-border-focus"],
|
||||
["--navds-link-color-on-info-background", "--a-text-default"],
|
||||
["--navds-link-color-on-error-background", "--a-text-default"],
|
||||
["--navds-loader-color-neutral-foreground", "--a-border-default"],
|
||||
["--navds-loader-color-interaction-foreground", "--a-surface-action"],
|
||||
["--navds-loader-color-inverted-foreground", "--a-surface-default"],
|
||||
["--navds-loader-color-transparent-background", "--a-surface-transparent"],
|
||||
["--navds-loader-color-foreground", "--a-border-default"],
|
||||
["--navds-loader-color-background", "--a-surface-active"],
|
||||
["--navds-modal-color-background", "--a-surface-default"],
|
||||
["--navds-pagination-color-text-selected", "--a-text-on-action"],
|
||||
["--navds-pagination-color-background-selected", "--a-surface-action-selected"],
|
||||
["--navds-popover-color-background", "--a-surface-default"],
|
||||
["--navds-popover-color-border", "--a-border-default"],
|
||||
["--navds-tag-color-info-background", "--a-surface-info-subtle"],
|
||||
["--navds-tag-color-info-border", "--a-border-info"],
|
||||
["--navds-tag-color-warning-background", "--a-surface-warning-subtle"],
|
||||
["--navds-tag-color-warning-border", "--a-border-warning"],
|
||||
["--navds-tag-color-success-background", "--a-surface-success-subtle"],
|
||||
["--navds-tag-color-success-border", "--a-border-success"],
|
||||
["--navds-tag-color-error-background", "--a-surface-danger-subtle"],
|
||||
["--navds-tag-color-error-border", "--a-border-danger"],
|
||||
["--navds-tag-color-border", "--a-border-default"],
|
||||
["--navds-tag-color-background", "--a-surface-subtle"],
|
||||
["--navds-toggle-group-color-background-hover", "--a-surface-action-subtle"],
|
||||
["--navds-toggle-group-color-text-hover", "--a-surface-action"],
|
||||
["--navds-toggle-group-color-background-pressed", "--a-surface-action-selected"],
|
||||
["--navds-toggle-group-color-text-pressed", "--a-text-on-action"],
|
||||
["--navds-toggle-group-color-background", "--a-surface-default"],
|
||||
["--navds-toggle-group-color-text", "--a-text-default"],
|
||||
["--navds-toggle-group-color-border", "--a-border-divider"],
|
||||
["--navds-panel-color-background", "--a-surface-default"],
|
||||
["--navds-panel-color-border", "--a-border-default"],
|
||||
["--navds-link-panel-color-border-hover", "--a-surface-action"],
|
||||
["--navds-link-panel-color-title-hover", "--a-text-action"],
|
||||
["--navds-link-panel-color-text", "--a-text-default"],
|
||||
["--navds-table-row-color-background-selected-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navds-table-row-color-background-hover", "--a-bg-subtle"],
|
||||
["--navds-table-row-color-background-selected", "--a-surface-action-subtle"],
|
||||
["--navds-table-row-color-background-zebra", "--a-surface-subtle"],
|
||||
["--navds-table-cell-color-border-hover", "--a-border-strong"],
|
||||
["--navds-table-cell-color-border", "--a-border-default"],
|
||||
|
||||
["--navds-button-color-primary-background-hover", "--a-surface-action-hover"],
|
||||
["--navds-button-color-primary-background-active", "--a-surface-action-active"],
|
||||
["--navds-button-color-primary-border-focus", "--a-surface-default"],
|
||||
["--navds-button-color-primary-text", "--a-text-on-action"],
|
||||
["--navds-button-color-primary-background", "--a-surface-action"],
|
||||
["--navds-button-color-secondary-border-focus-active-hover", "--a-surface-default"],
|
||||
["--navds-button-color-secondary-text-hover", "--a-text-action"],
|
||||
["--navds-button-color-secondary-text-active", "--a-text-on-action"],
|
||||
["--navds-button-color-secondary-background-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navds-button-color-secondary-background-active", "--a-surface-action-active"],
|
||||
["--navds-button-color-secondary-border", "--a-border-action"],
|
||||
["--navds-button-color-secondary-text", "--a-text-action"],
|
||||
["--navds-button-color-secondary-background", "--a-surface-default"],
|
||||
["--navds-button-color-tertiary-background-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navds-button-color-tertiary-border-focus", "--a-border-action"],
|
||||
["--navds-button-color-tertiary-border-active", "--a-surface-default"],
|
||||
["--navds-button-color-tertiary-background-active", "--a-surface-action-active"],
|
||||
["--navds-button-color-tertiary-text-active", "--a-text-on-action"],
|
||||
["--navds-button-color-tertiary-text", "--a-text-action"],
|
||||
["--navds-button-color-danger-background-hover", "--a-surface-danger-hover"],
|
||||
["--navds-button-color-danger-background-active", "--a-surface-danger-active"],
|
||||
["--navds-button-color-danger-border-focus", "--a-surface-default"],
|
||||
["--navds-button-color-danger-background", "--a-surface-danger"],
|
||||
["--navds-button-color-danger-text", "--a-text-on-danger"],
|
||||
["--navds-error-message-color-text", "--a-text-danger"],
|
||||
["--navds-search-color-border-hover", "--a-border-action"],
|
||||
["--navds-search-color-clear-hover", "--a-text-action"],
|
||||
["--navds-search-color-border-error", "--a-border-danger"],
|
||||
["--navds-search-color-text", "--a-text-default"],
|
||||
["--navds-search-color-border", "--a-border-default"],
|
||||
["--navds-text-field-color-border-hover", "--a-border-action"],
|
||||
["--navds-text-field-color-border-error", "--a-border-danger"],
|
||||
["--navds-text-field-color-shadow-error", "--a-border-danger"],
|
||||
["--navds-text-field-color-border-disabled", "--a-gray-400"],
|
||||
["--navds-text-field-color-background-disabled", "--a-surface-subtle"],
|
||||
["--navds-text-field-color-placeholder-text", "--a-text-subtle"],
|
||||
["--navds-text-field-color-text-disabled", "--a-text-default"],
|
||||
["--navds-text-field-color-text", "--a-text-default"],
|
||||
["--navds-text-field-color-background", "--a-surface-default"],
|
||||
["--navds-text-field-color-border", "--a-border-default"],
|
||||
|
||||
["--navds-dropdown-menu-color", "--a-text-default"],
|
||||
["--navdsi-dropdown-item-color-text", "--a-text-action"],
|
||||
["--navdsi-dropdown-item-color-background-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navdsi-dropdown-item-color-background-active", "--a-surface-action-active"],
|
||||
["--navds-dropdown-item-color-focus", "--a-border-focus"],
|
||||
["--navdsi-header-color-text", "--a-text-on-inverted"],
|
||||
["--navdsi-header-color-background", "--a-surface-inverted"],
|
||||
["--navdsi-header-color-border", "--a-gray-600"],
|
||||
["--navdsi-header-color-hover", "--a-surface-inverted-hover"],
|
||||
["--navdsi-header-color-active", "--a-surface-inverted-active"],
|
||||
["--navds-button-icon-adjustment", "--ac-button-icon-margin"]
|
||||
]
|
||||
|
||||
module.exports = { tokens };
|
||||
@@ -0,0 +1,18 @@
|
||||
import renameProps from "../../utils/rename-props";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
const root = j(file.source);
|
||||
|
||||
const printOptions = options.printOptions;
|
||||
|
||||
return renameProps({
|
||||
root,
|
||||
componentName: options.component,
|
||||
props: { [options.from]: options.to },
|
||||
}).toSource(printOptions);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { check } from "../../../utils/check";
|
||||
|
||||
const migration = "rename-prop";
|
||||
const fixtures = ["rename"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
options: {
|
||||
component: "SpeechBubble",
|
||||
from: "illustration",
|
||||
to: "avatar",
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<SpeechBubble illustration={<Illustration />}>
|
||||
<div />
|
||||
</SpeechBubble>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<SpeechBubble avatar={<Illustration />}>
|
||||
<div />
|
||||
</SpeechBubble>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import renameProps from "../../../utils/rename-props";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
let localName = "SpeechBubble";
|
||||
|
||||
const root = j(file.source);
|
||||
|
||||
/* Finds and replaces import from SpeechBubble -> Chat */
|
||||
root
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === "@navikt/ds-react")
|
||||
.forEach((imp) => {
|
||||
imp.value.specifiers.forEach((x) => {
|
||||
if (x.imported.name === "SpeechBubble") {
|
||||
if (x.local.name !== x.imported.name) {
|
||||
localName = x.local.name;
|
||||
x.imported.name = "Chat";
|
||||
} else {
|
||||
x.imported.name = "Chat";
|
||||
x.local.name = "Chat";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (j(file.source).findJSXElements(localName)) {
|
||||
renameProps({
|
||||
root,
|
||||
componentName: localName,
|
||||
props: {
|
||||
illustrationBgColor: "avatarBgColor",
|
||||
illustration: "avatar",
|
||||
topText: "name",
|
||||
},
|
||||
});
|
||||
|
||||
/* Find and replace name of all <SpeechBubble />*/
|
||||
const compRoot = root.find(j.JSXElement, {
|
||||
openingElement: { name: { name: localName } },
|
||||
});
|
||||
|
||||
compRoot.forEach((x) => {
|
||||
if (localName !== "SpeechBubble") return;
|
||||
x.node.openingElement.name.name = "Chat";
|
||||
x.node.closingElement.name.name = "Chat";
|
||||
});
|
||||
|
||||
/* Need to handle dot-notations differently */
|
||||
const child = root.find(j.JSXElement);
|
||||
|
||||
child.forEach((x) => {
|
||||
if (
|
||||
x.value.openingElement.name.type === "JSXMemberExpression" &&
|
||||
x.value.openingElement.name.object.name === "SpeechBubble"
|
||||
) {
|
||||
x.value.openingElement.name.object.name = "Chat";
|
||||
x.value.closingElement.name.object.name = "Chat";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return root.toSource(options.printOptions);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "chat";
|
||||
const fixtures = ["complete", "idempotent", "props", "renamed"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { SpeechBubble, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
{...testProps}
|
||||
>
|
||||
<SpeechBubble.Bubble {...testProps}>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</SpeechBubble.Bubble>
|
||||
</SpeechBubble>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
{...testProps}
|
||||
>
|
||||
<Chat.Bubble {...testProps}>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { SpeechBubble, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</SpeechBubble.Bubble>
|
||||
</SpeechBubble>
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</SpeechBubble.Bubble>
|
||||
</SpeechBubble>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { SpeechBubble as DsBubble, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
<DsBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Chat as DsBubble, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsBubble
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
<DsBubble
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
let localName = "Pagination";
|
||||
|
||||
const root = j(file.source);
|
||||
|
||||
function addMigrationTag(node) {
|
||||
const attributes = node.openingElement.attributes;
|
||||
const isMigrated = attributes.find(
|
||||
(node) =>
|
||||
node.type === "JSXAttribute" &&
|
||||
node.name.name === "data-version" &&
|
||||
node.value.value === "v1"
|
||||
);
|
||||
|
||||
if (!isMigrated) {
|
||||
attributes.push(
|
||||
j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
|
||||
function addExplicitStandardProp(node) {
|
||||
const attributes = node.openingElement.attributes;
|
||||
const variant = attributes.find(
|
||||
(node) => node.type === "JSXAttribute" && node.name.name === "size"
|
||||
);
|
||||
|
||||
if (!variant) {
|
||||
attributes.unshift(
|
||||
j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
|
||||
);
|
||||
addMigrationTag(node);
|
||||
}
|
||||
}
|
||||
|
||||
/* Finds locally used name for Pagination */
|
||||
root
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === "@navikt/ds-react")
|
||||
.forEach((imp) => {
|
||||
imp.value.specifiers.forEach((x) => {
|
||||
if (
|
||||
x.imported.name === "Pagination" &&
|
||||
x.local.name !== x.imported.name
|
||||
) {
|
||||
localName = x.local.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (j(file.source).findJSXElements(localName)) {
|
||||
root.findJSXElements(`${localName}`).forEach((parent) => {
|
||||
const skip = !!parent.value.openingElement?.attributes.find(
|
||||
(x) => x.name.name === "data-version" && x.value.value === "v1"
|
||||
);
|
||||
|
||||
parent.value.openingElement?.attributes.forEach((x, index) => {
|
||||
let didUpdate = false;
|
||||
if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
|
||||
/* addExplicitStandardProp */
|
||||
if (x.value.value === "medium") {
|
||||
x.value = j.literal("small");
|
||||
didUpdate = true;
|
||||
} else if (x.value.value === "small") {
|
||||
x.value = j.literal("xsmall");
|
||||
didUpdate = true;
|
||||
}
|
||||
|
||||
didUpdate && addMigrationTag(parent.value);
|
||||
}
|
||||
});
|
||||
addExplicitStandardProp(parent.value);
|
||||
});
|
||||
}
|
||||
|
||||
return root.toSource(options.printOptions);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination
|
||||
size="small"
|
||||
onPageChange={setPage}
|
||||
data-version="v1"
|
||||
{...testProps}
|
||||
/>
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination onPageChange={setPage} />
|
||||
<Pagination size="small" onPageChange={setPage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination
|
||||
size="small"
|
||||
onPageChange={setPage}
|
||||
data-version="v1"
|
||||
{...testProps}
|
||||
/>
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination as DsPagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsPagination onPageChange={setPage} />
|
||||
<DsPagination size="medium" onPageChange={setPage} />
|
||||
<DsPagination size="small" onPageChange={setPage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination as DsPagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsPagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<DsPagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "pagination";
|
||||
const fixtures = ["size", "idempotent", "import"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination onPageChange={setPage} />
|
||||
<Pagination size="medium" onPageChange={setPage} />
|
||||
<Pagination size="small" onPageChange={setPage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
import transformTabs from "../tabs/tabs";
|
||||
import transformChat from "../chat/chat";
|
||||
import transformPagination from "../pagination/pagination";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
file.source = transformTabs(file, api, options);
|
||||
file.source = transformChat(file, api, options);
|
||||
file.source = transformPagination(file, api, options);
|
||||
|
||||
return file.source;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import renameProps from "../../../utils/rename-props";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
let localName = "Tabs";
|
||||
let iconPositionProp = null;
|
||||
|
||||
const root = j(file.source);
|
||||
|
||||
/* Finds used name for Tabs component */
|
||||
root
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === "@navikt/ds-react")
|
||||
.forEach((imp) => {
|
||||
imp.value.specifiers.forEach((x) => {
|
||||
if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
|
||||
localName = x.local.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (j(file.source).findJSXElements(localName)) {
|
||||
renameProps({
|
||||
root,
|
||||
componentName: `${localName}.List`,
|
||||
props: {
|
||||
loop: "null",
|
||||
},
|
||||
});
|
||||
|
||||
root.findJSXElements(`${localName}`).forEach((parent) => {
|
||||
parent.value.children.forEach((el) => {
|
||||
const openingEl = el.openingElement;
|
||||
if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
|
||||
if (
|
||||
openingEl.name.object.name === localName &&
|
||||
openingEl.name.property.name === "List"
|
||||
) {
|
||||
/* Move loop-prop */
|
||||
el.openingElement.attributes.forEach((x, index) => {
|
||||
if (x.name?.name === "loop" && x.type === "JSXAttribute") {
|
||||
parent.value.openingElement.attributes.push(x);
|
||||
delete el.openingElement.attributes[index];
|
||||
}
|
||||
});
|
||||
|
||||
/* Find and move iconPosition-prop to <Tabs/> */
|
||||
el.children.forEach((tab) => {
|
||||
const tabEl = tab.openingElement;
|
||||
if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
|
||||
if (
|
||||
tabEl.name.object.name === localName &&
|
||||
tabEl.name.property.name === "Tab"
|
||||
) {
|
||||
tabEl?.attributes.forEach((x, index) => {
|
||||
if (
|
||||
x.name?.name === "iconPosition" &&
|
||||
x.type === "JSXAttribute"
|
||||
) {
|
||||
if (!iconPositionProp) {
|
||||
iconPositionProp = x;
|
||||
}
|
||||
delete tabEl.attributes[index];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
iconPositionProp &&
|
||||
parent.value.openingElement.attributes.push(iconPositionProp);
|
||||
iconPositionProp = null;
|
||||
});
|
||||
}
|
||||
|
||||
return root.toSource(options.printOptions);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<div>
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
|
||||
<Tabs.List loop={false} {...testProps}>
|
||||
<Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
|
||||
<Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<div>
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
{...testProps}
|
||||
loop={false}
|
||||
iconPosition={props.left}>
|
||||
<Tabs.List {...testProps}>
|
||||
<Tabs.Tab value="logg" label="logg" {...testProps} />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
loop
|
||||
iconPosition="left">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
loop
|
||||
iconPosition="left">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
|
||||
<Tabs.List loop>
|
||||
<Tabs.Tab value="logg" iconPosition="left" label="logg" />
|
||||
<Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
loop
|
||||
iconPosition="left">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "tabs";
|
||||
const fixtures = ["complete", "idempotent", "props"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.test {
|
||||
color: var(--navds-global-color-blue-100);
|
||||
color: var(--navds-global-color-red-100);
|
||||
|
||||
--navds-global-color-red-100: var(--navds-global-color-green-100);
|
||||
--navds-global-color-blue-100: red;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
const StyledDiv = styled`
|
||||
--navds-global-color-red-100: var(--navds-global-color-green-100);
|
||||
--navds-global-color-blue-100: red;
|
||||
|
||||
.test{
|
||||
color: var(--navds-global-color-blue-100);
|
||||
}
|
||||
`;
|
||||
|
||||
<style>
|
||||
{`
|
||||
.test{
|
||||
color: var(--navds-global-color-blue-100);
|
||||
}
|
||||
`}
|
||||
</style>;
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
.test {
|
||||
color: var(--a-blue-100);
|
||||
color: var(--a-red-100);
|
||||
|
||||
--v2-migration__navds-global-color-red-100: var(--a-green-100);
|
||||
--v2-migration__navds-global-color-blue-100: red;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
const StyledDiv = styled`
|
||||
--v2-migration__navds-global-color-red-100: var(--a-green-100);
|
||||
--v2-migration__navds-global-color-blue-100: red;
|
||||
|
||||
.test{
|
||||
color: var(--a-blue-100);
|
||||
}
|
||||
`;
|
||||
|
||||
<style>
|
||||
{`
|
||||
.test{
|
||||
color: var(--a-blue-100);
|
||||
}
|
||||
`}
|
||||
</style>;
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-css-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "css",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api) {
|
||||
let src = file.source;
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
// eslint-disable-next-line no-useless-concat
|
||||
const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm");
|
||||
src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`);
|
||||
});
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
const rgx = new RegExp("(" + tok[0] + ")", "gm");
|
||||
src = src.replace(rgx, tok[1]);
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
NavdsGlobalColorBlue400 as abc132,
|
||||
NavdsGlobalColorGray100,
|
||||
NavdsGlobalColorGray400,
|
||||
NavdsSemanticColorLink,
|
||||
} from "@navikt/ds-tokens/dist/tokens";
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
border-bottom: 5px solid white;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
:hover {
|
||||
border-bottom: 5px solid ${abc132};
|
||||
p {
|
||||
color: ${NavdsSemanticColorLink};
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: ${NavdsGlobalColorGray100};
|
||||
border-bottom: 5px solid ${NavdsSemanticColorLink};
|
||||
|
||||
.typo-normal {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLenketekst = styled(BodyShort)`
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledTekst = styled(BodyShort)`
|
||||
border-bottom: 5px solid white;
|
||||
color: ${NavdsGlobalColorGray400};
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
`;
|
||||
|
||||
const Fane = ({ side, behandlingId, index, deaktivert }) => {
|
||||
const { gåTilUrl } = useApp();
|
||||
const fanenavn = side.navn;
|
||||
return (
|
||||
<>
|
||||
{deaktivert && (
|
||||
<StyledTekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledTekst>
|
||||
)}
|
||||
{!deaktivert && (
|
||||
<StyledNavLink
|
||||
key={side.navn}
|
||||
to={`/behandling/${behandlingId}/${side.href}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
|
||||
}}
|
||||
>
|
||||
<StyledLenketekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledLenketekst>
|
||||
</StyledNavLink>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Fane;
|
||||
@@ -0,0 +1,88 @@
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
ABlue400,
|
||||
AGray100,
|
||||
AGray400,
|
||||
ATextAction,
|
||||
} from "@navikt/ds-tokens/dist/tokens";
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
border-bottom: 5px solid white;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
:hover {
|
||||
border-bottom: 5px solid ${ABlue400};
|
||||
p {
|
||||
color: ${ATextAction};
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: ${AGray100};
|
||||
border-bottom: 5px solid ${ATextAction};
|
||||
|
||||
.typo-normal {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLenketekst = styled(BodyShort)`
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledTekst = styled(BodyShort)`
|
||||
border-bottom: 5px solid white;
|
||||
color: ${AGray400};
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
`;
|
||||
|
||||
const Fane = ({ side, behandlingId, index, deaktivert }) => {
|
||||
const { gåTilUrl } = useApp();
|
||||
const fanenavn = side.navn;
|
||||
return (
|
||||
<>
|
||||
{deaktivert && (
|
||||
<StyledTekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledTekst>
|
||||
)}
|
||||
{!deaktivert && (
|
||||
<StyledNavLink
|
||||
key={side.navn}
|
||||
to={`/behandling/${behandlingId}/${side.href}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
|
||||
}}
|
||||
>
|
||||
<StyledLenketekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledLenketekst>
|
||||
</StyledNavLink>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Fane;
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-js-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { JSCodeshift } from "jscodeshift";
|
||||
import {
|
||||
getImportSpecifier,
|
||||
getImportSpecifierName,
|
||||
renameImportSpecifier,
|
||||
} from "../../../utils/imports";
|
||||
import { translateToken } from "../../../utils/translate-token";
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file: JSCodeshift, api) {
|
||||
let src = file.source;
|
||||
|
||||
const j = api.jscodeshift as JSCodeshift;
|
||||
|
||||
let root = j(file.source);
|
||||
|
||||
const jsImport = root.find(j.ImportDeclaration).filter((x) => {
|
||||
return ["@navikt/ds-tokens/dist/tokens"].includes(
|
||||
x.node.source.value as string
|
||||
);
|
||||
});
|
||||
|
||||
if (!jsImport) {
|
||||
return src;
|
||||
}
|
||||
|
||||
tokens.forEach((x) => {
|
||||
const name = translateToken(x[0], "js");
|
||||
const out = translateToken(x[1], "js");
|
||||
|
||||
let foundName: string = "";
|
||||
|
||||
getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
|
||||
(x) => (foundName = x.node.imported.name)
|
||||
);
|
||||
|
||||
if (name === foundName) {
|
||||
const localName =
|
||||
getImportSpecifierName(
|
||||
j,
|
||||
root,
|
||||
name,
|
||||
"@navikt/ds-tokens/dist/tokens"
|
||||
) || name;
|
||||
|
||||
renameImportSpecifier(
|
||||
j,
|
||||
root,
|
||||
name,
|
||||
out,
|
||||
"@navikt/ds-tokens/dist/tokens"
|
||||
);
|
||||
|
||||
let code = root.toSource();
|
||||
|
||||
const rgx = new RegExp("(" + localName + ")", "gm");
|
||||
code = code.replace(rgx, out);
|
||||
root = j(code);
|
||||
}
|
||||
});
|
||||
|
||||
return root.toSource();
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
.filtersMenu {
|
||||
box-shadow: @navds-global-color-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: @navds-global-color-green-100;
|
||||
border: 1px solid @navds-global-color-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
border: 1px solid @navds-semantic-color-link;
|
||||
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: @navds-semantic-color-link;
|
||||
}
|
||||
|
||||
background-color: @navds-global-color-gray-600;
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
.filtersMenu {
|
||||
box-shadow: @a-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: @a-green-100;
|
||||
border: 1px solid @a-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
border: 1px solid @a-text-action;
|
||||
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: @a-text-action;
|
||||
}
|
||||
|
||||
background-color: @a-gray-600;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-less-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "less",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { translateToken } from "../../../utils/translate-token";
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api) {
|
||||
let src = file.source;
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
const lessToken = translateToken(tok[0], "less");
|
||||
|
||||
const rgx = new RegExp("(\\" + lessToken + ")", "gm");
|
||||
src = src.replace(rgx, translateToken(tok[1], "less"));
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
.filtersMenu {
|
||||
box-shadow: common.$navds-global-color-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: common.$navds-global-color-green-100;
|
||||
border: 1px solid common.$navds-global-color-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
&:global(.navds-link-panel) {
|
||||
border: 1px solid common.$navds-semantic-color-link;
|
||||
}
|
||||
|
||||
:global {
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: common.$navds-semantic-color-link;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: common.$navds-global-color-gray-600;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
.filtersMenu {
|
||||
box-shadow: common.$a-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: common.$a-green-100;
|
||||
border: 1px solid common.$a-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
&:global(.navds-link-panel) {
|
||||
border: 1px solid common.$a-text-action;
|
||||
}
|
||||
|
||||
:global {
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: common.$a-text-action;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: common.$a-gray-600;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-sass-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "scss",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { translateToken } from "../../../utils/translate-token";
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api) {
|
||||
let src = file.source;
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
const scssToken = translateToken(tok[0], "scss");
|
||||
|
||||
const rgx = new RegExp("(\\" + scssToken + ")", "gm");
|
||||
src = src.replace(rgx, translateToken(tok[1], "scss"));
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
import prettier from "prettier";
|
||||
|
||||
const applyTransform = require("jscodeshift/dist/testUtils").applyTransform;
|
||||
|
||||
interface TestT {
|
||||
fixture: string;
|
||||
migration: string;
|
||||
extension?: "js" | "scss" | "less" | "css";
|
||||
options?: { [option: string]: any };
|
||||
}
|
||||
|
||||
export function check(
|
||||
dirName: string,
|
||||
{ fixture, migration, extension = "js", options = {} }: TestT
|
||||
) {
|
||||
describe(migration, () => {
|
||||
it(fixture, async () => {
|
||||
const fixtureDir = path.join(dirName);
|
||||
const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
|
||||
const parser = extension;
|
||||
const source = fs.readFileSync(inputPath, "utf8");
|
||||
const expected = fs.readFileSync(
|
||||
path.join(fixtureDir, `${fixture}.output.${extension}`),
|
||||
"utf8"
|
||||
);
|
||||
// Assumes transform is one level up from tests directory
|
||||
const module = await import(path.join(dirName, "..", migration));
|
||||
const output = applyTransform({ ...module, parser: "tsx" }, options, {
|
||||
source,
|
||||
});
|
||||
|
||||
// Format output and expected with prettier for white spaces and line breaks consistency
|
||||
expect(
|
||||
prettier.format(output, {
|
||||
parser: parser === "js" ? "typescript" : parser,
|
||||
})
|
||||
).toBe(
|
||||
prettier.format(expected, {
|
||||
parser: parser === "js" ? "typescript" : parser,
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import core, { Collection } from "jscodeshift";
|
||||
|
||||
export function getImportSpecifier(
|
||||
j: core.JSCodeshift,
|
||||
source: Collection<any>,
|
||||
specifier: string,
|
||||
sourcePath: string
|
||||
) {
|
||||
return source
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === sourcePath)
|
||||
.find(j.ImportSpecifier)
|
||||
.filter((path) => path.value.imported.name === specifier);
|
||||
}
|
||||
|
||||
export function renameImportSpecifier(
|
||||
j: core.JSCodeshift,
|
||||
source: Collection<any>,
|
||||
specifier: string,
|
||||
newSpecifier: string,
|
||||
sourcePath: string
|
||||
) {
|
||||
getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
|
||||
j.importSpecifier(j.identifier(newSpecifier))
|
||||
);
|
||||
}
|
||||
|
||||
export function getImportSpecifierName(
|
||||
j: core.JSCodeshift,
|
||||
source: Collection<any>,
|
||||
specifier: string,
|
||||
sourcePath: string
|
||||
) {
|
||||
const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
|
||||
|
||||
return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export default function renameProps({ root, componentName, props }) {
|
||||
return root.findJSXElements(componentName).forEach((path) => {
|
||||
path.node.openingElement.attributes.forEach((node) => {
|
||||
if (
|
||||
node.type === "JSXAttribute" &&
|
||||
Object.keys(props).includes(node.name.name)
|
||||
) {
|
||||
node.name.name = props[node.name.name];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { translateToken } from "../translate-token";
|
||||
|
||||
export {};
|
||||
|
||||
jest.autoMockOff();
|
||||
|
||||
const tokens = [
|
||||
{
|
||||
name: "--navds-global-color-red-100",
|
||||
scss: "$navds-global-color-red-100",
|
||||
less: "@navds-global-color-red-100",
|
||||
js: "NavdsGlobalColorRed100",
|
||||
},
|
||||
{
|
||||
name: "--a-blue-100",
|
||||
scss: "$a-blue-100",
|
||||
less: "@a-blue-100",
|
||||
js: "ABlue100",
|
||||
},
|
||||
];
|
||||
|
||||
describe("Translating tokens to correct format", () => {
|
||||
test("To scss", () => {
|
||||
tokens.forEach((x) =>
|
||||
expect(translateToken(x.name, "scss")).toEqual(x.scss)
|
||||
);
|
||||
});
|
||||
test("To less", () => {
|
||||
tokens.forEach((x) =>
|
||||
expect(translateToken(x.name, "less")).toEqual(x.less)
|
||||
);
|
||||
});
|
||||
test("To js", () => {
|
||||
tokens.forEach((x) => expect(translateToken(x.name, "js")).toEqual(x.js));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import _ from "lodash";
|
||||
|
||||
export const translateToken = (token: string, type: "scss" | "less" | "js") => {
|
||||
switch (type) {
|
||||
case "scss":
|
||||
return token.replace("--", "$");
|
||||
case "less":
|
||||
return token.replace("--", "@");
|
||||
case "js":
|
||||
return _.startCase(token).split(" ").join("");
|
||||
|
||||
default:
|
||||
return token;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,58 @@
|
||||
import chalk from "chalk";
|
||||
import { Command } from "commander";
|
||||
import isGitClean from "is-git-clean";
|
||||
import {
|
||||
getMigrationString,
|
||||
getMigrationNames,
|
||||
getMigrationPath,
|
||||
} from "./migrations.js";
|
||||
|
||||
export function validateMigration(str: string, program: Command) {
|
||||
if (!getMigrationNames().includes(str)) {
|
||||
program.error(
|
||||
chalk.red(
|
||||
`Migration <${str}> not found!\n${chalk.gray(
|
||||
`\nAvailable migrations:\n${getMigrationString()}`
|
||||
)}`
|
||||
)
|
||||
);
|
||||
}
|
||||
const path = getMigrationPath(str);
|
||||
if (!path) {
|
||||
program.error(
|
||||
chalk.red(
|
||||
`Code for migration <${str}> not found!\n${chalk.gray(
|
||||
`\nContact creator (Aksel) to get it fixed!\n`
|
||||
)}`
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function validateGit(options: any, program: Command) {
|
||||
if (options.dryRun) {
|
||||
return;
|
||||
}
|
||||
if (options.force) {
|
||||
console.log(chalk.yellow("Forcing migration without git check"));
|
||||
return;
|
||||
}
|
||||
|
||||
let clean = false;
|
||||
|
||||
try {
|
||||
clean = isGitClean.sync(process.cwd());
|
||||
} catch (err: any) {
|
||||
if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
|
||||
clean = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!clean) {
|
||||
program.error(
|
||||
`${chalk.yellow(
|
||||
"\nBefore we continue, please stash or commit your git changes."
|
||||
)}${"\nYou can use the --force flag to override this safety check."}`
|
||||
);
|
||||
}
|
||||
}
|
||||
File renamed without changes.
+2
-2
@@ -7,8 +7,8 @@ import {
|
||||
componentDir,
|
||||
rootDir,
|
||||
globalDir,
|
||||
} from "@navikt/ds-css/config/_mappings.js";
|
||||
import { inquiry } from "./inquiry.js";
|
||||
} from "@navikt/ds-css/config/_mappings";
|
||||
import { inquiry } from "./inquiry";
|
||||
import clipboard from "clipboardy";
|
||||
import lodash from "lodash";
|
||||
import chalk from "chalk";
|
||||
File renamed without changes.
+1
-1
@@ -7,7 +7,7 @@ export async function getAllVersions() {
|
||||
);
|
||||
return Object.keys(npmPackageData.data["versions"]);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.error(e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,13 @@
|
||||
import { StyleMappings } from "@navikt/ds-css/config/_mappings.js";
|
||||
import { generateImportOutput } from "./generate-output.js";
|
||||
import { AnswersT, ComponentPrefix } from "./config.js";
|
||||
import { StyleMappings } from "@navikt/ds-css/config/_mappings";
|
||||
import { generateImportOutput } from "./generate-output";
|
||||
import { AnswersT, ComponentPrefix } from "./config";
|
||||
|
||||
import { inquiry } from "./inquiry.js";
|
||||
import { inquiry } from "./inquiry";
|
||||
import { exec } from "child_process";
|
||||
import { fileURLToPath } from "url";
|
||||
import { dirname } from "path";
|
||||
import { getAllVersions } from "./get-version.js";
|
||||
import chalk from "chalk";
|
||||
import { getDirectories } from "./get-directories.js";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
import chalk from "chalk";
|
||||
import { getDirectories } from "./get-directories";
|
||||
import { getAllVersions } from "./get-version";
|
||||
|
||||
export async function cssImportsCommand() {
|
||||
let answers: AnswersT = {
|
||||
@@ -1,5 +1,5 @@
|
||||
import Enquirer from "enquirer";
|
||||
import { AnswersT } from "./config.js";
|
||||
import { AnswersT } from "./config";
|
||||
import chalk from "chalk";
|
||||
|
||||
export async function inquiry(answers: AnswersT, questions: any[]) {
|
||||
File renamed without changes.
@@ -14,5 +14,11 @@ export function helpCommand() {
|
||||
✔︎ Helps with CSS imports for all Aksel components
|
||||
✔︎ Supports Static and CDN-imports
|
||||
✔︎ Handles cascading, tailwind and @layer rules
|
||||
|
||||
- ${chalk.cyan(
|
||||
`npx @navikt/aksel ${chalk.green("codemod")} ${chalk.gray("<migration>")}`
|
||||
)}
|
||||
✔︎ Code-transformations for breaking changes when updating Aksel
|
||||
✔︎ Run with ${chalk.cyan(`${chalk.green("--help")}`)} to get started!
|
||||
`);
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
#!/usr/bin/env node
|
||||
import chalk from "chalk";
|
||||
import { helpCommand } from "./help.js";
|
||||
import { cssImportsCommand } from "./css-imports/index.js";
|
||||
import { helpCommand } from "./help";
|
||||
import { cssImportsCommand } from "./css-imports/index";
|
||||
import { codemodCommand } from "./codemod/index";
|
||||
import fs from "fs";
|
||||
|
||||
run();
|
||||
|
||||
@@ -12,6 +14,15 @@ async function run() {
|
||||
} else if (process.argv[2] === "css-imports") {
|
||||
await cssImportsCommand();
|
||||
return;
|
||||
} else if (process.argv[2] === "codemod") {
|
||||
codemodCommand();
|
||||
return;
|
||||
} else if (process.argv[2] === "-v" || process.argv[2] === "--version") {
|
||||
const pkg = JSON.parse(
|
||||
fs.readFileSync("./package.json").toString()
|
||||
).version;
|
||||
console.log(pkg);
|
||||
return;
|
||||
} else {
|
||||
console.log(
|
||||
chalk.red(
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "Node16",
|
||||
"module": "CommonJS",
|
||||
"sourceMap": false,
|
||||
"esModuleInterop": true,
|
||||
"target": "es2015",
|
||||
@@ -8,9 +8,10 @@
|
||||
"declaration": false,
|
||||
"types": ["node", "jest"],
|
||||
"outDir": "dist",
|
||||
"rootDir": "./",
|
||||
"resolveJsonModule": true
|
||||
"rootDir": "./src",
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["**/*.ts"],
|
||||
"exclude": ["node_modules", "dist", "jest.config.js", "__tests__"]
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": ["node_modules", "dist", "jest.config.js", "**/tests/**"]
|
||||
}
|
||||
@@ -1,5 +1,17 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
|
||||
|
||||
- `@navikt/ds-codemods` vil bli deprecated ettehvert.
|
||||
|
||||
## 2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
## 2.9.1
|
||||
|
||||
+3
-169
@@ -1,170 +1,4 @@
|
||||
# Aksel Codemods
|
||||
# Deperecation!
|
||||
|
||||
Collection of Codemods for easier migration between breaking changes in NAVs designsystem-packages.
|
||||
|
||||
## Usage
|
||||
|
||||
Codemod runs code-transformations programmatically in your project. This helps when migrating breaking changes without spending hours doing it manually.
|
||||
|
||||
NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (ex `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) can lead to bugs when using codemod.
|
||||
|
||||
```javascript
|
||||
npx @navikt/ds-codemod <migration> <path>
|
||||
```
|
||||
|
||||
migraton - name of migraton, see available migraton below.
|
||||
|
||||
path - files or directory to transform
|
||||
|
||||
```sh
|
||||
--dry Do a dry-run, no code will be edited
|
||||
--print Prints the changed output for comparison
|
||||
--force Runs even if there are uncommited changes (use with caution)
|
||||
```
|
||||
|
||||
## V1 -> V2
|
||||
|
||||
V2.0.0 updated the token-prefix of all tokens + names of all semantic-colors. The migrations below helps when migrating from the formats css, scss, less and js.
|
||||
|
||||
### css-tokens (--navds format)
|
||||
|
||||
`npx @navikt/ds-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.
|
||||
|
||||
```diff
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
### sass/scss-tokens ($navds format)
|
||||
|
||||
`npx @navikt/ds-codemod v2/sass src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: $navds-global-color-gray-900;
|
||||
+ color: $a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
### less-tokens (@navds format)
|
||||
|
||||
`npx @navikt/ds-codemod v2/less src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: @navds-global-color-gray-900;
|
||||
+ color: @a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
### js-tokens
|
||||
|
||||
`npx @navikt/ds-codemod v2/js src`
|
||||
|
||||
```diff
|
||||
|
||||
- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
|
||||
+ import { AGray900 } from "@navikt/ds-tokens";
|
||||
|
||||
const styled = styled.p`
|
||||
- color: ${NavdsGlobalColorGray900};
|
||||
+ color: ${AGray900};
|
||||
`
|
||||
```
|
||||
|
||||
## Beta (0.19.x) -> v1
|
||||
|
||||
`npx @navikt/ds-codemod v1/preset src`
|
||||
|
||||
### preset
|
||||
|
||||
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
|
||||
|
||||
### tabs
|
||||
|
||||
`npx @navikt/ds-codemod v1/tabs src`
|
||||
|
||||
```diff
|
||||
<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>
|
||||
```
|
||||
|
||||
### chat
|
||||
|
||||
`npx @navikt/ds-codemodmod v1/chat src`
|
||||
|
||||
```diff
|
||||
-<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>
|
||||
```
|
||||
|
||||
### pagination
|
||||
|
||||
`npx @navikt/ds-codemod v1/pagination src`
|
||||
|
||||
This codemod should only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
|
||||
|
||||
```diff
|
||||
-<Pagiation />
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="medium"/>
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="small"/>
|
||||
+<Pagiation size="xsmall"/>
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
|
||||
|
||||
#
|
||||
|
||||
Inspired by both MUI and NEXT
|
||||
|
||||
- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
|
||||
- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)
|
||||
This package will be been deprecated in favor of [@navikt/aksel](...)
|
||||
Run `npx @navikt/aksel codemod --help` to get started
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.5",
|
||||
"description": "Aksel codemods for NAVs designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^2.9.2",
|
||||
"@navikt/ds-react": "^2.9.2",
|
||||
"@navikt/ds-icons": "^2.9.5",
|
||||
"@navikt/ds-react": "^2.9.5",
|
||||
"clsx": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
## 2.9.1
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.5",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -27,7 +27,7 @@
|
||||
"css:get-version": "node config/get-version.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^2.9.2",
|
||||
"@navikt/ds-tokens": "^2.9.5",
|
||||
"cssnano": "6.0.0",
|
||||
"fast-glob": "3.2.11",
|
||||
"lodash": "4.17.21",
|
||||
|
||||
@@ -1,5 +1,29 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 2.9.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@2.9.5
|
||||
- @navikt/ds-icons@2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@2.9.4
|
||||
- @navikt/ds-icons@2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`c03d53d5a`](https://github.com/navikt/aksel/commit/c03d53d5aa2dc7f06a223d48069fa21ee39bb396)]:
|
||||
- @navikt/aksel-icons@2.9.3
|
||||
- @navikt/ds-icons@2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.5",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -38,8 +38,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.17.0",
|
||||
"@navikt/aksel-icons": "^2.9.2",
|
||||
"@navikt/ds-icons": "^2.9.2",
|
||||
"@navikt/aksel-icons": "^2.9.5",
|
||||
"@navikt/ds-icons": "^2.9.5",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
## 2.9.1
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.5",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^2.9.2",
|
||||
"@navikt/ds-tokens": "^2.9.5",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
## 2.9.1
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "2.9.2",
|
||||
"version": "2.9.5",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
Loaded 100 of 116 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user