Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b8bebace11 | ||
|
|
14379a02c3 | ||
|
|
d716ebbc40 | ||
|
|
f1c4c46ebb | ||
|
|
9d2cd9e7ff | ||
|
|
2fe5a0a0e2 | ||
|
|
db3846f5cd | ||
|
|
fa2ead912a | ||
|
|
11e9b9bef2 | ||
|
|
6f53b33e69 | ||
|
|
166ee5feb3 | ||
|
|
c29d2aba1b | ||
|
|
2568fe70b1 | ||
|
|
8790c5997e | ||
|
|
5b12778c96 | ||
|
|
3edb149b01 | ||
|
|
8c85590099 | ||
|
|
029d3c7719 | ||
|
|
7019898c09 | ||
|
|
36f4f5646a | ||
|
|
27b2b4a11c | ||
|
|
9c0174e206 | ||
|
|
b99a29f805 | ||
|
|
c03d53d5aa |
No files matched your search
@@ -1,5 +1,44 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
|
||||
|
||||
## 2.9.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- :bug: CheckmarkIcon
|
||||
|
||||
## 2.9.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1956](https://github.com/navikt/aksel/pull/1956) [`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset CheckmarkCircleIcon
|
||||
|
||||
## 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
|
||||
@@ -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="M19.0303 6.96967C19.3232 7.26256 19.3232 7.73744 19.0303 8.03033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L4.96967 12.0303C4.67678 11.7374 4.67678 11.2626 4.96967 10.9697C5.26256 10.6768 5.73744 10.6768 6.03033 10.9697L10 14.9393L17.9697 6.96967C18.2626 6.67678 18.7374 6.67678 19.0303 6.96967Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9983 6.93942C19.3079 7.21461 19.3357 7.68866 19.0606 7.99825L11.0606 16.9983C10.9233 17.1526 10.7285 17.2436 10.522 17.2497C10.3156 17.2557 10.1157 17.1764 9.96967 17.0303L4.96967 12.0303C4.67678 11.7374 4.67678 11.2625 4.96967 10.9696C5.26256 10.6768 5.73744 10.6768 6.03033 10.9696L10.4679 15.4072L17.9394 7.0017C18.2146 6.69212 18.6887 6.66423 18.9983 6.93942Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 487 B After Width: | Height: | Size: 538 B |
@@ -15,5 +15,5 @@ keywords:
|
||||
- fullføring
|
||||
- validering
|
||||
variant: Stroke
|
||||
updated_at: 14.04.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -15,5 +15,5 @@ keywords:
|
||||
- fullføring
|
||||
- validering
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 04.05.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="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM16.5725 9.48447C16.8401 9.16827 16.8007 8.69503 16.4845 8.42748C16.1683 8.15992 15.695 8.19935 15.4275 8.51556L10.454 14.3933L8.03033 11.9697C7.73744 11.6768 7.26256 11.6768 6.96967 11.9697C6.67678 12.2626 6.67678 12.7375 6.96967 13.0303L9.96967 16.0303C10.118 16.1787 10.3216 16.2581 10.5312 16.2494C10.7407 16.2407 10.9371 16.1446 11.0725 15.9845L16.5725 9.48447Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM16.9536 9.27485C17.2434 8.93229 17.2007 8.41962 16.8582 8.12977C16.5156 7.83991 16.0029 7.88263 15.7131 8.22519L10.3251 14.5928L7.69952 11.9672C7.38222 11.6499 6.86778 11.6499 6.55048 11.9672C6.23317 12.2845 6.23317 12.7989 6.55048 13.1162L9.80048 16.3662C9.96114 16.5269 10.1817 16.6129 10.4088 16.6035C10.6358 16.594 10.8485 16.49 10.9953 16.3165L16.9536 9.27485Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 689 B |
@@ -15,5 +15,5 @@ keywords:
|
||||
- fullføring
|
||||
- validering
|
||||
variant: Fill
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -9,5 +9,5 @@ keywords:
|
||||
- vise/skjule
|
||||
- bytte
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 02.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -10,5 +10,5 @@ keywords:
|
||||
- nettverk
|
||||
- network
|
||||
variant: Stroke
|
||||
updated_at: 18.04.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -13,5 +13,5 @@ keywords:
|
||||
- oppmerksomhet
|
||||
- viktig
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -15,5 +15,5 @@ keywords:
|
||||
- beskrivelse
|
||||
- forklaring
|
||||
variant: Stroke
|
||||
updated_at: 31.03.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -6,5 +6,5 @@ keywords:
|
||||
- chain
|
||||
- kobling
|
||||
variant: Stroke
|
||||
updated_at: 11.04.2023
|
||||
updated_at: 04.05.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
|
||||
@@ -20,5 +20,5 @@ keywords:
|
||||
- ansvar
|
||||
- paragraf
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 03.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -6,5 +6,5 @@ keywords:
|
||||
- legg til
|
||||
- more
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 03.05.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="M10.25 9.5C10.25 8.92044 10.4399 8.49575 10.7178 8.21783C10.9957 7.93991 11.4204 7.75 12 7.75C12.5796 7.75 13.0043 7.93991 13.2822 8.21783C13.5601 8.49575 13.75 8.92044 13.75 9.5C13.75 9.65777 13.6859 9.84934 13.4991 10.1109C13.3076 10.379 13.0426 10.6467 12.7197 10.9697L12.6985 10.9909C12.4009 11.2884 12.0511 11.6381 11.7803 12.0172C11.4984 12.4118 11.25 12.9078 11.25 13.5V14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14V13.5C12.75 13.3422 12.8141 13.1507 13.0009 12.8891C13.1924 12.621 13.4574 12.3533 13.7803 12.0303L13.8015 12.0091C14.0991 11.7116 14.4489 11.3619 14.7197 10.9828C15.0016 10.5882 15.25 10.0922 15.25 9.5C15.25 8.57956 14.9399 7.75425 14.3428 7.15717C13.7457 6.56009 12.9204 6.25 12 6.25C11.0796 6.25 10.2543 6.56009 9.65717 7.15717C9.06009 7.75425 8.75 8.57956 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5ZM12 15.5C11.4477 15.5 11 15.9477 11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5C13 15.9477 12.5523 15.5 12 15.5Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 847 B |
@@ -13,5 +13,5 @@ keywords:
|
||||
- veiledning
|
||||
- spørsmålstegn
|
||||
variant: Stroke
|
||||
updated_at: 31.03.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -6,5 +6,5 @@ keywords:
|
||||
- crystal
|
||||
- snø
|
||||
variant: Stroke
|
||||
updated_at: 08.03.2023
|
||||
updated_at: 04.05.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="M7.03033 5.96967C6.73744 5.67678 6.26256 5.67678 5.96967 5.96967C5.67678 6.26256 5.67678 6.73744 5.96967 7.03033L10.9393 12L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L12 13.0607L16.9697 18.0303C17.2626 18.3232 17.7374 18.3232 18.0303 18.0303C18.3232 17.7374 18.3232 17.2626 18.0303 16.9697L13.0607 12L18.0303 7.03033C18.3232 6.73744 18.3232 6.26256 18.0303 5.96967C17.7374 5.67678 17.2626 5.67678 16.9697 5.96967L12 10.9393L7.03033 5.96967Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0607L17.4697 18.5303C17.7626 18.8232 18.2374 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L12 10.9393L6.53033 5.46967Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 680 B After Width: | Height: | Size: 680 B |
@@ -15,5 +15,5 @@ keywords:
|
||||
- avvis
|
||||
- avslå
|
||||
variant: Stroke
|
||||
updated_at: 13.04.2023
|
||||
updated_at: 04.05.2023
|
||||
created_at: 07.03.2023
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "2.9.2",
|
||||
"version": "3.1.1",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,79 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
|
||||
- @navikt/ds-css@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
|
||||
- @navikt/ds-css@3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@2.9.7
|
||||
|
||||
## 2.9.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@2.9.6
|
||||
|
||||
## 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
|
||||
|
||||
@@ -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;
|
||||
@@ -1,23 +1,25 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "2.9.2",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods (planned) and more",
|
||||
"version": "3.1.1",
|
||||
"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": "3.1.1",
|
||||
"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>;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>;
|
||||
@@ -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;
|
||||
@@ -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();
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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."}`
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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[]) {
|
||||