mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 01:02:02 +00:00
Compare commits
13
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
6f53b33e69 | ||
|
KenandJulian Nymark
|
166ee5feb3 | ||
|
AndreasDybdahl
|
c29d2aba1b | ||
|
github-actions[bot]andgithub-actions[bot]
|
2568fe70b1 | ||
|
Ken
|
8790c5997e | ||
|
Ken
|
5b12778c96 | ||
|
github-actions[bot]andgithub-actions[bot]
|
3edb149b01 | ||
|
Ken
|
8c85590099 | ||
|
github-actions[bot]andgithub-actions[bot]
|
029d3c7719 | ||
|
Ken
|
7019898c09 | ||
|
github-actions[bot]andgithub-actions[bot]
|
36f4f5646a | ||
|
Ken
|
27b2b4a11c | ||
|
Ken
|
9c0174e206 |
No files matched your search
@@ -1,5 +1,29 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 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
|
||||
|
||||
@@ -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: 25.04.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
|
||||
@@ -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.3",
|
||||
"version": "3.0.0",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,51 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 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
|
||||
|
||||
+157
-1
@@ -1,6 +1,6 @@
|
||||
# Aksel command line interface
|
||||
|
||||
CLI tool for managing CSS-imports and more when consuming Aksel-packages.
|
||||
CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
|
||||
|
||||
[Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
|
||||
|
||||
@@ -10,6 +10,162 @@ npx @navikt/aksel
|
||||
|
||||
commands:
|
||||
css-imports: Generate css-imports for all components from Aksel
|
||||
codemod: Codemods for version-migrations related to Aksel
|
||||
```
|
||||
|
||||
## Codemods
|
||||
|
||||
Codemods are code-transformations that patches breaking changes in your project. This helps when migrating without spending time doing it manually.
|
||||
|
||||
```bash
|
||||
To get started:
|
||||
npx @navikt/aksel codemod --help
|
||||
```
|
||||
|
||||
### v1 -> v2
|
||||
|
||||
[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)
|
||||
|
||||
v2-css: Patches changed css-variables
|
||||
v2-js: Patches changed js-variables
|
||||
v2-sass: Patches changed sass-variables
|
||||
v2-less: Patches changed less-variables
|
||||
|
||||
#### css-tokens (--navds format)
|
||||
|
||||
`npx @navikt/aksel codemod v2-css src`
|
||||
|
||||
When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for `--v2-migration__` will show all found instances where you had redefined a token.
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: var(--navds-global-color-gray-900);
|
||||
+ color: var(--a-gray-900);
|
||||
|
||||
- --navds-semantic-color-text: red;
|
||||
+ --v2-migration__navds-semantic-color-text: red;
|
||||
}
|
||||
```
|
||||
|
||||
#### sass/scss-tokens ($navds format)
|
||||
|
||||
`npx @navikt/aksel codemod v2-sass src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: $navds-global-color-gray-900;
|
||||
+ color: $a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
#### less-tokens (@navds format)
|
||||
|
||||
`npx @navikt/aksel codemod v2-less src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: @navds-global-color-gray-900;
|
||||
+ color: @a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
#### js-tokens
|
||||
|
||||
`npx @navikt/aksel codemod v2-js src`
|
||||
|
||||
```diff
|
||||
|
||||
- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
|
||||
+ import { AGray900 } from "@navikt/ds-tokens";
|
||||
|
||||
const styled = styled.p`
|
||||
- color: ${NavdsGlobalColorGray900};
|
||||
+ color: ${AGray900};
|
||||
`
|
||||
```
|
||||
|
||||
### beta -> v1
|
||||
|
||||
[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h50d54a5af8c1)
|
||||
|
||||
v1-preset: Runs all codemods for beta -> v1
|
||||
v1-pagination: Fixes breaking API-changes for <Pagination /> component
|
||||
v1-tabs: Fixes breaking API-changes for <Tabs /> component
|
||||
v1-chat: Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component
|
||||
|
||||
#### preset
|
||||
|
||||
Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
|
||||
|
||||
Includes these transforms
|
||||
|
||||
- v1-tabs
|
||||
- v1-chat
|
||||
- v1-pagination
|
||||
|
||||
#### tabs
|
||||
|
||||
`npx @navikt/aksel codemod v1-tabs src`
|
||||
|
||||
```diff
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
- loop
|
||||
+ iconPosition="left"
|
||||
>
|
||||
<Tabs.List
|
||||
- loop
|
||||
>
|
||||
<Tabs.Tab
|
||||
value="logg"
|
||||
label="logg"
|
||||
- iconPosition="left"
|
||||
/>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
#### chat
|
||||
|
||||
`npx @navikt/aksel codemod v1-chat src`
|
||||
|
||||
```diff
|
||||
-<SpeechBubble
|
||||
+<Chat
|
||||
- illustration={<Illustration />}
|
||||
- topText="Ola Normann 01.01.21 14:00"
|
||||
- illustrationBgColor="blue"
|
||||
+ avatar={<Illustration />}
|
||||
+ name="Ola Normann 01.01.21 14:00"
|
||||
+ avatarBgColor="blue"
|
||||
backgroundColor="red"
|
||||
>
|
||||
- <SpeechBubble.Bubble>
|
||||
+ <Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
- </SpeechBubble.Bubble>
|
||||
+ </Chat.Bubble>
|
||||
-</SpeechBubble>
|
||||
+</Chat>
|
||||
```
|
||||
|
||||
#### pagination
|
||||
|
||||
`npx @navikt/aksel codemod v1-pagination src`
|
||||
|
||||
This codemod can only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
|
||||
|
||||
```diff
|
||||
-<Pagiation />
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="medium"/>
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="small"/>
|
||||
+<Pagiation size="xsmall"/>
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
const config = {
|
||||
transform: { "^.+\\.js?$": "ts-jest", "^.+\\.ts?$": "ts-jest" },
|
||||
testMatch: ["**/tests/*.test.ts"],
|
||||
verbose: true,
|
||||
rootDir: ".",
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
+19
-11
@@ -1,23 +1,25 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "2.9.3",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods (planned) and more",
|
||||
"version": "3.0.0",
|
||||
"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.3",
|
||||
"@navikt/ds-css": "3.0.0",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^3.0.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
"commander": "10.0.1",
|
||||
"enquirer": "^2.3.6",
|
||||
"fast-glob": "3.2.11",
|
||||
"figlet": "1.6.0",
|
||||
"is-git-clean": "1.1.0",
|
||||
"jscodeshift": "0.13.1",
|
||||
"jscodeshift-add-imports": "1.0.10",
|
||||
"lodash": "4.17.21",
|
||||
"react-scanner": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/inquirer": "^9.0.3",
|
||||
"@types/jest": "^29.0.0",
|
||||
"jest": "^29.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"typescript": "^4.8.0"
|
||||
},
|
||||
"sideEffects": false,
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Command } from "commander";
|
||||
import figlet from "figlet";
|
||||
import chalk from "chalk";
|
||||
import { getMigrationString } from "./migrations.js";
|
||||
import { validateGit, validateMigration } from "./validation.js";
|
||||
import { runCodeshift } from "./run-codeshift.js";
|
||||
|
||||
const program = new Command();
|
||||
|
||||
export function codemodCommand() {
|
||||
program.name(`${chalk.blueBright(`npx @navikt/aksel`)}`);
|
||||
|
||||
program
|
||||
.command("codemod")
|
||||
.addHelpText("beforeAll", figlet.textSync("Codemods"))
|
||||
.addHelpText(
|
||||
"afterAll",
|
||||
chalk.gray(`\nAvailable migrations:\n${getMigrationString()}`)
|
||||
)
|
||||
.description("Migrations for Aksel components and more")
|
||||
.argument("<migration>", "Migration name")
|
||||
|
||||
.option("-e, --ext [extension]", "default: js,ts,jsx,tsx,css,scss,less")
|
||||
.option(
|
||||
"-g, --glob [glob]",
|
||||
"Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. "
|
||||
)
|
||||
.option("-d, --dry-run", "Dry run, no changes will be made")
|
||||
.option("-p, --print", "Print transformed files")
|
||||
.option(
|
||||
"-f, --force",
|
||||
"Forcibly run migrations without checking git-changes"
|
||||
)
|
||||
.addHelpText(
|
||||
"after",
|
||||
`\nExample:
|
||||
$ npx @navikt/aksel --dry-run v2-css`
|
||||
)
|
||||
.action((str, options) => {
|
||||
validateMigration(str, program);
|
||||
validateGit(options, program);
|
||||
runCodeshift(str, options, program);
|
||||
});
|
||||
|
||||
program.parse();
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import chalk from "chalk";
|
||||
|
||||
export const migrations: {
|
||||
[key: string]: { description: string; value: string; path: string }[];
|
||||
} = {
|
||||
"1.0.0": [
|
||||
{
|
||||
description: "Runs all codemods for beta -> v1 migration",
|
||||
value: "v1-preset",
|
||||
path: "v1.0.0/preset/preset",
|
||||
},
|
||||
{
|
||||
description: "Fixes breaking API-changes for <Pagination /> component",
|
||||
value: "v1-pagination",
|
||||
path: "v1.0.0/pagination/pagination",
|
||||
},
|
||||
{
|
||||
description: "Fixes breaking API-changes for <Tabs /> component",
|
||||
value: "v1-tabs",
|
||||
path: "v1.0.0/tabs/tabs",
|
||||
},
|
||||
{
|
||||
description:
|
||||
"Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component",
|
||||
value: "v1-chat",
|
||||
path: "v1.0.0/chat/chat",
|
||||
},
|
||||
],
|
||||
"2.0.0": [
|
||||
{
|
||||
description: "Patches changed css-variables",
|
||||
value: "v2-css",
|
||||
path: "v2.0.0/update-css-tokens/update-css-tokens",
|
||||
},
|
||||
{
|
||||
description: "Patches changed js-variables",
|
||||
value: "v2-js",
|
||||
path: "v2.0.0/update-js-tokens/update-js-tokens",
|
||||
},
|
||||
{
|
||||
description: "Patches changed sass-variables",
|
||||
value: "v2-sass",
|
||||
path: "v2.0.0/update-sass-tokens/update-sass-tokens",
|
||||
},
|
||||
{
|
||||
description: "Patches changed less-variables",
|
||||
value: "v2-less",
|
||||
path: "v2.0.0/update-less-tokens/update-less-tokens",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function getMigrationPath(str: string) {
|
||||
return Object.values(migrations)
|
||||
.reduce((acc, val) => [...val, ...acc], [])
|
||||
.find((x) => x.value === str)?.path;
|
||||
}
|
||||
|
||||
export function getMigrationNames() {
|
||||
return Object.values(migrations).reduce(
|
||||
(acc, val) => [...val.map((x) => x.value), ...acc],
|
||||
[] as string[]
|
||||
);
|
||||
}
|
||||
|
||||
export function getMigrationString() {
|
||||
let str = "";
|
||||
|
||||
Object.entries(migrations).forEach(([version, migrations]) => {
|
||||
str += `\n${chalk.underline(version)}\n`;
|
||||
migrations.forEach((migration) => {
|
||||
str += `${chalk.blue(migration.value)}: ${migration.description}\n`;
|
||||
});
|
||||
});
|
||||
|
||||
return str;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Command } from "commander";
|
||||
import fg from "fast-glob";
|
||||
import * as jscodeshift from "jscodeshift/src/Runner";
|
||||
import path from "path";
|
||||
import { getMigrationPath } from "./migrations";
|
||||
import chalk from "chalk";
|
||||
|
||||
const ignoreNodeModules = [
|
||||
"**/node_modules/**",
|
||||
"**/dist/**",
|
||||
"**/build/**",
|
||||
"**/lib/**",
|
||||
"**/.next/**",
|
||||
];
|
||||
|
||||
export async function runCodeshift(
|
||||
input: string,
|
||||
options: any,
|
||||
program: Command
|
||||
) {
|
||||
const codemodPath = path.join(
|
||||
__dirname,
|
||||
`./transforms/${getMigrationPath(input)}.js`
|
||||
);
|
||||
|
||||
const filepaths = fg.sync([options.glob ?? getDefaultGlob(options?.ext)], {
|
||||
cwd: process.cwd(),
|
||||
ignore: ignoreNodeModules,
|
||||
});
|
||||
|
||||
console.log("\nRunning migration:", chalk.green("input"));
|
||||
|
||||
options?.glob && console.log(`Using glob: ${chalk.green(options.glob)}\n`);
|
||||
|
||||
try {
|
||||
await jscodeshift.run(codemodPath, filepaths, {
|
||||
babel: true,
|
||||
ignorePattern: ignoreNodeModules,
|
||||
extensions: "tsx,ts,jsx,js",
|
||||
parser: "tsx",
|
||||
verbose: 2,
|
||||
runInBand: true,
|
||||
silent: false,
|
||||
stdin: false,
|
||||
dry: options?.dryRun,
|
||||
force: options?.force,
|
||||
print: options?.print,
|
||||
});
|
||||
} catch (error) {
|
||||
program.error(chalk.red("Error:", error.message));
|
||||
}
|
||||
}
|
||||
|
||||
function getDefaultGlob(ext: string): string {
|
||||
const defaultExt = "js,ts,jsx,tsx,css,scss,less";
|
||||
return `**/*.{${cleanExtensions(ext ?? defaultExt).join(",")}}`;
|
||||
}
|
||||
|
||||
function cleanExtensions(ext: string): string[] {
|
||||
return ext
|
||||
.split(",")
|
||||
.map((e) => e.trim())
|
||||
.map((e) => e.replace(".", ""));
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { getMigrationNames, getMigrationPath } from "../migrations";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
|
||||
describe("migrations", () => {
|
||||
const values = getMigrationNames();
|
||||
const paths = values.map((x) => getMigrationPath(x));
|
||||
|
||||
paths.forEach((x) => {
|
||||
const checkPath = path.join(
|
||||
process.cwd(),
|
||||
"dist/codemod",
|
||||
`transforms/${x}.js`
|
||||
);
|
||||
test(`Check transform-path: ${checkPath}`, () => {
|
||||
expect(fs.existsSync(checkPath)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,368 @@
|
||||
/* prettier-ignore */
|
||||
const tokens = [
|
||||
["--navds-semantic-color-text-inverted", "--a-text-on-inverted"],
|
||||
["--navds-semantic-color-text-muted", "--a-text-subtle"],
|
||||
["--navds-semantic-color-text", "--a-text-default"],
|
||||
["--navds-semantic-color-feedback-danger-text", "--a-text-danger"],
|
||||
["--navds-semantic-color-link-visited", "--a-text-visited"],
|
||||
["--navds-semantic-color-link", "--a-text-action"],
|
||||
["--navds-spacing-32", "--a-spacing-32"],
|
||||
["--navds-spacing-24", "--a-spacing-24"],
|
||||
["--navds-spacing-20", "--a-spacing-20"],
|
||||
["--navds-spacing-18", "--a-spacing-18"],
|
||||
["--navds-spacing-16", "--a-spacing-16"],
|
||||
["--navds-spacing-14", "--a-spacing-14"],
|
||||
["--navds-spacing-12", "--a-spacing-12"],
|
||||
["--navds-spacing-11", "--a-spacing-11"],
|
||||
["--navds-spacing-10", "--a-spacing-10"],
|
||||
["--navds-spacing-9", "--a-spacing-9"],
|
||||
["--navds-spacing-8", "--a-spacing-8"],
|
||||
["--navds-spacing-7", "--a-spacing-7"],
|
||||
["--navds-spacing-6", "--a-spacing-6"],
|
||||
["--navds-spacing-5", "--a-spacing-5"],
|
||||
["--navds-spacing-4", "--a-spacing-4"],
|
||||
["--navds-spacing-3", "--a-spacing-3"],
|
||||
["--navds-spacing-2", "--a-spacing-2"],
|
||||
["--navds-spacing-1", "--a-spacing-1"],
|
||||
["--navds-global-color-purple-900", "--a-purple-900"],
|
||||
["--navds-global-color-purple-800", "--a-purple-800"],
|
||||
["--navds-global-color-purple-700", "--a-purple-700"],
|
||||
["--navds-global-color-purple-600", "--a-purple-600"],
|
||||
["--navds-global-color-purple-500", "--a-purple-500"],
|
||||
["--navds-global-color-purple-400", "--a-purple-400"],
|
||||
["--navds-global-color-purple-300", "--a-purple-300"],
|
||||
["--navds-global-color-purple-200", "--a-purple-200"],
|
||||
["--navds-global-color-purple-100", "--a-purple-100"],
|
||||
["--navds-global-color-purple-50", "--a-purple-50"],
|
||||
["--navds-global-color-orange-900", "--a-orange-900"],
|
||||
["--navds-global-color-orange-800", "--a-orange-800"],
|
||||
["--navds-global-color-orange-700", "--a-orange-700"],
|
||||
["--navds-global-color-orange-600", "--a-orange-600"],
|
||||
["--navds-global-color-orange-500", "--a-orange-500"],
|
||||
["--navds-global-color-orange-400", "--a-orange-400"],
|
||||
["--navds-global-color-orange-300", "--a-orange-300"],
|
||||
["--navds-global-color-orange-200", "--a-orange-200"],
|
||||
["--navds-global-color-orange-100", "--a-orange-100"],
|
||||
["--navds-global-color-orange-50", "--a-orange-50"],
|
||||
["--navds-global-color-limegreen-900", "--a-limegreen-900"],
|
||||
["--navds-global-color-limegreen-800", "--a-limegreen-800"],
|
||||
["--navds-global-color-limegreen-700", "--a-limegreen-700"],
|
||||
["--navds-global-color-limegreen-600", "--a-limegreen-600"],
|
||||
["--navds-global-color-limegreen-500", "--a-limegreen-500"],
|
||||
["--navds-global-color-limegreen-400", "--a-limegreen-400"],
|
||||
["--navds-global-color-limegreen-300", "--a-limegreen-300"],
|
||||
["--navds-global-color-limegreen-200", "--a-limegreen-200"],
|
||||
["--navds-global-color-limegreen-100", "--a-limegreen-100"],
|
||||
["--navds-global-color-limegreen-50", "--a-limegreen-50"],
|
||||
["--navds-global-color-lightblue-900", "--a-lightblue-900"],
|
||||
["--navds-global-color-lightblue-800", "--a-lightblue-800"],
|
||||
["--navds-global-color-lightblue-700", "--a-lightblue-700"],
|
||||
["--navds-global-color-lightblue-600", "--a-lightblue-600"],
|
||||
["--navds-global-color-lightblue-500", "--a-lightblue-500"],
|
||||
["--navds-global-color-lightblue-400", "--a-lightblue-400"],
|
||||
["--navds-global-color-lightblue-300", "--a-lightblue-300"],
|
||||
["--navds-global-color-lightblue-200", "--a-lightblue-200"],
|
||||
["--navds-global-color-lightblue-100", "--a-lightblue-100"],
|
||||
["--navds-global-color-lightblue-50", "--a-lightblue-50"],
|
||||
["--navds-global-color-green-900", "--a-green-900"],
|
||||
["--navds-global-color-green-800", "--a-green-800"],
|
||||
["--navds-global-color-green-700", "--a-green-700"],
|
||||
["--navds-global-color-green-600", "--a-green-600"],
|
||||
["--navds-global-color-green-500", "--a-green-500"],
|
||||
["--navds-global-color-green-400", "--a-green-400"],
|
||||
["--navds-global-color-green-300", "--a-green-300"],
|
||||
["--navds-global-color-green-200", "--a-green-200"],
|
||||
["--navds-global-color-green-100", "--a-green-100"],
|
||||
["--navds-global-color-green-50", "--a-green-50"],
|
||||
["--navds-global-color-deepblue-900", "--a-deepblue-900"],
|
||||
["--navds-global-color-deepblue-800", "--a-deepblue-800"],
|
||||
["--navds-global-color-deepblue-700", "--a-deepblue-700"],
|
||||
["--navds-global-color-deepblue-600", "--a-deepblue-600"],
|
||||
["--navds-global-color-deepblue-500", "--a-deepblue-500"],
|
||||
["--navds-global-color-deepblue-400", "--a-deepblue-400"],
|
||||
["--navds-global-color-deepblue-300", "--a-deepblue-300"],
|
||||
["--navds-global-color-deepblue-200", "--a-deepblue-200"],
|
||||
["--navds-global-color-deepblue-100", "--a-deepblue-100"],
|
||||
["--navds-global-color-deepblue-50", "--a-deepblue-50"],
|
||||
["--navds-global-color-red-900", "--a-red-900"],
|
||||
["--navds-global-color-red-800", "--a-red-800"],
|
||||
["--navds-global-color-red-700", "--a-red-700"],
|
||||
["--navds-global-color-red-600", "--a-red-600"],
|
||||
["--navds-global-color-red-500", "--a-red-500"],
|
||||
["--navds-global-color-red-400", "--a-red-400"],
|
||||
["--navds-global-color-red-300", "--a-red-300"],
|
||||
["--navds-global-color-red-200", "--a-red-200"],
|
||||
["--navds-global-color-red-100", "--a-red-100"],
|
||||
["--navds-global-color-red-50", "--a-red-50"],
|
||||
["--navds-global-color-blue-900", "--a-blue-900"],
|
||||
["--navds-global-color-blue-800", "--a-blue-800"],
|
||||
["--navds-global-color-blue-700", "--a-blue-700"],
|
||||
["--navds-global-color-blue-600", "--a-blue-600"],
|
||||
["--navds-global-color-blue-500", "--a-blue-500"],
|
||||
["--navds-global-color-blue-400", "--a-blue-400"],
|
||||
["--navds-global-color-blue-300", "--a-blue-300"],
|
||||
["--navds-global-color-blue-200", "--a-blue-200"],
|
||||
["--navds-global-color-blue-100", "--a-blue-100"],
|
||||
["--navds-global-color-blue-50", "--a-blue-50"],
|
||||
["--navds-global-color-gray-900", "--a-gray-900"],
|
||||
["--navds-global-color-gray-800", "--a-gray-800"],
|
||||
["--navds-global-color-gray-700", "--a-gray-700"],
|
||||
["--navds-global-color-gray-600", "--a-gray-600"],
|
||||
["--navds-global-color-gray-500", "--a-gray-500"],
|
||||
["--navds-global-color-gray-400", "--a-gray-400"],
|
||||
["--navds-global-color-gray-300", "--a-gray-300"],
|
||||
["--navds-global-color-gray-200", "--a-gray-200"],
|
||||
["--navds-global-color-gray-100", "--a-gray-100"],
|
||||
["--navds-global-color-gray-50", "--a-gray-50"],
|
||||
["--navds-global-color-nav-red", "--a-nav-red"],
|
||||
["--navds-global-color-white", "--a-white"],
|
||||
["--navds-global-color-transparent", "--a-transparent"],
|
||||
["--navds-border-radius-full", "--a-border-radius-full"],
|
||||
["--navds-border-radius-xlarge", "--a-border-radius-xlarge"],
|
||||
["--navds-border-radius-large", "--a-border-radius-large"],
|
||||
["--navds-border-radius-medium", "--a-border-radius-medium"],
|
||||
["--navds-border-radius-small", "--a-border-radius-small"],
|
||||
["--navds-z-index-tooltip", "--a-z-index-tooltip"],
|
||||
["--navds-z-index-focus", "--a-z-index-focus"],
|
||||
["--navds-z-index-popover", "--a-z-index-popover"],
|
||||
["--navds-z-index-modal", "--a-z-index-modal"],
|
||||
["--navds-font-weight-regular", "--a-font-weight-regular"],
|
||||
["--navds-font-weight-bold", "--a-font-weight-bold"],
|
||||
["--navds-font-size-small", "--a-font-size-small"],
|
||||
["--navds-font-size-medium", "--a-font-size-medium"],
|
||||
["--navds-font-size-large", "--a-font-size-large"],
|
||||
["--navds-font-size-xlarge", "--a-font-size-xlarge"],
|
||||
["--navds-font-size-heading-xsmall", "--a-font-size-heading-xsmall"],
|
||||
["--navds-font-size-heading-small", "--a-font-size-heading-small"],
|
||||
["--navds-font-size-heading-medium", "--a-font-size-heading-medium"],
|
||||
["--navds-font-size-heading-large", "--a-font-size-heading-large"],
|
||||
["--navds-font-size-heading-xlarge", "--a-font-size-heading-xlarge"],
|
||||
["--navds-font-size-heading-2xlarge", "--a-font-size-heading-2xlarge"],
|
||||
["--navds-font-line-height-medium", "--a-font-line-height-medium"],
|
||||
["--navds-font-line-height-large", "--a-font-line-height-large"],
|
||||
["--navds-font-line-height-xlarge", "--a-font-line-height-xlarge"],
|
||||
["--navds-font-line-height-heading-xsmall","--a-font-line-height-heading-xsmall"],
|
||||
["--navds-font-line-height-heading-small","--a-font-line-height-heading-small"],
|
||||
["--navds-font-line-height-heading-medium","--a-font-line-height-heading-medium"],
|
||||
["--navds-font-line-height-heading-large","--a-font-line-height-heading-large"],
|
||||
["--navds-font-line-height-heading-xlarge","--a-font-line-height-heading-xlarge"],
|
||||
["--navds-font-line-height-heading-2xlarge","--a-font-line-height-heading-2xlarge"],
|
||||
["--navds-font-family", "--a-font-family"],
|
||||
|
||||
["--navds-semantic-color-feedback-info-icon", "--a-icon-info"],
|
||||
["--navds-semantic-color-feedback-warning-icon", "--a-icon-warning"],
|
||||
["--navds-semantic-color-feedback-danger-icon", "--a-icon-danger"],
|
||||
["--navds-semantic-color-feedback-success-icon", "--a-icon-success"],
|
||||
|
||||
["--navds-semantic-color-feedback-info-background", "--a-surface-info-subtle"],
|
||||
["--navds-semantic-color-feedback-warning-background", "--a-surface-warning-subtle"],
|
||||
["--navds-semantic-color-interaction-danger-selected", "--a-surface-danger-active"],
|
||||
["--navds-semantic-color-interaction-danger-hover", "--a-surface-danger-hover"],
|
||||
["--navds-semantic-color-interaction-danger", "--a-surface-danger"],
|
||||
["--navds-semantic-color-feedback-danger-background", "--a-surface-danger-subtle"],
|
||||
["--navds-semantic-color-feedback-success-background", "--a-surface-success-subtle"],
|
||||
["--navds-semantic-color-interaction-primary-hover-subtle","--a-surface-action-subtle-hover"],
|
||||
["--navds-semantic-color-interaction-primary-selected","--a-surface-action-selected"],
|
||||
["--navds-semantic-color-interaction-primary-hover","--a-surface-action-hover"],
|
||||
["--navds-semantic-color-interaction-primary", "--a-surface-action"],
|
||||
["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
|
||||
["--navds-semantic-color-component-background-inverted", "--a-surface-inverted"],
|
||||
["--navds-semantic-color-component-background-alternate", "--a-surface-subtle"],
|
||||
["--navds-semantic-color-component-background-light", "--a-surface-default"],
|
||||
["--navds-semantic-color-canvas-background-light", "--a-bg-default"],
|
||||
["--navds-semantic-color-canvas-background", "--a-bg-subtle"],
|
||||
["--navds-semantic-color-border-inverted", "--a-border-on-inverted"],
|
||||
["--navds-semantic-color-border-muted", "--a-border-default"],
|
||||
["--navds-semantic-color-border", "--a-border-strong"],
|
||||
["--navds-semantic-color-focus-inverted", "--a-border-focus-on-inverted"],
|
||||
["--navds-semantic-color-focus", "--a-border-focus"],
|
||||
["--navds-semantic-color-feedback-info-border", "--a-border-info"],
|
||||
["--navds-semantic-color-feedback-warning-border", "--a-border-warning"],
|
||||
["--navds-semantic-color-feedback-danger-border", "--a-border-danger"],
|
||||
["--navds-semantic-color-feedback-success-border", "--a-border-success"],
|
||||
["--navds-semantic-color-divider", "--a-border-divider"],
|
||||
["--navds-shadow-focus-inverted", "--a-shadow-focus-inverted"],
|
||||
["--navds-shadow-focus", "--a-shadow-focus"],
|
||||
["--navds-shadow-xsmall", "--a-shadow-xsmall"],
|
||||
["--navds-shadow-small", "--a-shadow-small"],
|
||||
["--navds-shadow-medium", "--a-shadow-medium"],
|
||||
["--navds-shadow-large", "--a-shadow-large"],
|
||||
["--navds-shadow-xlarge", "--a-shadow-xlarge"],
|
||||
|
||||
/* Components */
|
||||
["--navds-modal-color-overlay", "--a-surface-backdrop"],
|
||||
["--navds-accordion-color-border", "--a-border-strong"],
|
||||
["--navds-accordion-color-text-hover", "--a-surface-action"],
|
||||
["--navds-accordion-color-border-hover", "--a-surface-action"],
|
||||
["--navds-accordion-color-background-open", "--a-surface-action-subtle"],
|
||||
["--navds-alert-color-error-border", "--a-border-danger"],
|
||||
["--navds-alert-color-error-background", "--a-surface-danger-subtle"],
|
||||
["--navds-alert-color-warning-border", "--a-border-warning"],
|
||||
["--navds-alert-color-warning-background", "--a-surface-warning-subtle"],
|
||||
["--navds-alert-color-info-border", "--a-border-info"],
|
||||
["--navds-alert-color-info-background", "--a-surface-info-subtle"],
|
||||
["--navds-alert-color-success-border", "--a-border-success"],
|
||||
["--navds-alert-color-success-background", "--a-surface-success-subtle"],
|
||||
["--navds-alert-color-border", "--a-border-default"],
|
||||
["--navds-chat-color-avatar-background", "--a-bg-subtle"],
|
||||
["--navds-chat-color-background", "--a-bg-subtle"],
|
||||
["--navds-chat-color-avatar", "--a-text-default"],
|
||||
["--navds-guide-panel-color-illustration-background", "--a-surface-action-subtle"],
|
||||
["--navds-guide-panel-color-background", "--a-surface-default"],
|
||||
["--navds-guide-panel-color-border", "--a-border-action"],
|
||||
["--navds-error-summary-color-background", "--a-surface-default"],
|
||||
["--navds-error-summary-color-border", "--a-border-danger"],
|
||||
["--navds-confirmation-panel-color-background-checked", "--a-surface-success-subtle"],
|
||||
["--navds-confirmation-panel-color-background-error", "--a-surface-danger-subtle"],
|
||||
["--navds-confirmation-panel-color-border-checked", "--a-border-success"],
|
||||
["--navds-confirmation-panel-color-border-error", "--a-border-danger"],
|
||||
["--navds-confirmation-panel-color-background", "--a-surface-warning-subtle"],
|
||||
["--navds-confirmation-panel-color-border", "--a-border-warning"],
|
||||
["--navds-radio-checkbox-color-background-hover", "--a-surface-action-subtle"],
|
||||
["--navds-radio-checkbox-color-background-checked", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-shadow-hover", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-shadow-checked", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-shadow-error", "--a-surface-danger"],
|
||||
["--navds-radio-checkbox-color-label-hover", "--a-surface-action"],
|
||||
["--navds-radio-checkbox-color-background", "--a-surface-default"],
|
||||
["--navds-radio-checkbox-color-text", "--a-text-default"],
|
||||
["--navds-radio-checkbox-color-shadow", "--a-border-strong"],
|
||||
["--navds-select-color-border-hover", "--a-surface-action"],
|
||||
["--navds-select-color-border-error", "--a-surface-danger"],
|
||||
["--navds-select-color-shadow-error", "--a-surface-danger"],
|
||||
["--navds-select-color-border-disabled","--a-gray-400"],
|
||||
["--navds-select-color-background-disabled", "--a-surface-subtle"],
|
||||
["--navds-switch-color-label-hover", "--a-surface-action"],
|
||||
["--navds-select-color-background", "--a-surface-default"],
|
||||
["--navds-select-color-border", "--a-border-strong"],
|
||||
["--navds-switch-color-label", "--a-text-default"],
|
||||
["--navds-switch-color-track-background-hover-checked", "--a-icon-success"],
|
||||
["--navds-switch-color-track-shadow-inner-focus", "--a-surface-default"],
|
||||
["--navds-switch-color-track-background-checked", "--a-border-success"],
|
||||
["--navds-switch-color-track-background-hover", "--a-surface-neutral-hover"],
|
||||
["--navds-switch-color-track-background", "--a-surface-neutral"],
|
||||
["--navds-switch-color-thumb-icon-checked", "--a-border-success"],
|
||||
["--navds-switch-color-thumb-loader-checked", "--a-border-success"],
|
||||
["--navds-switch-color-thumb-icon", "--a-icon-subtle"],
|
||||
["--navds-switch-color-thumb", "--a-surface-default"],
|
||||
["--navds-textarea-color-counter-text-error", "--a-surface-danger"],
|
||||
["--navds-textarea-color-border-hover", "--a-surface-action"],
|
||||
["--navds-textarea-color-border-error", "--a-surface-danger"],
|
||||
["--navds-textarea-color-shadow-error", "--a-surface-danger"],
|
||||
["--navds-textarea-color-counter-text", "--a-text-subtle"],
|
||||
["--navds-textarea-color-text-disabled", "--a-text-default"],
|
||||
["--navds-textarea-color-border-disabled", "--a-gray-400"],
|
||||
["--navds-textarea-color-background-disabled", "--a-surface-subtle"],
|
||||
["--navds-textarea-color-background", "--a-surface-default"],
|
||||
["--navds-textarea-color-border", "--a-border-strong"],
|
||||
["--navds-help-text-color-popover-background", "--a-surface-info-subtle"],
|
||||
["--navds-help-text-color-background-hover", "--a-surface-action"],
|
||||
["--navds-help-text-color-background-focus", "--a-surface-action"],
|
||||
["--navds-help-text-color-shadow-hover", "--a-surface-action"],
|
||||
["--navds-help-text-color-hover", "--a-surface-default"],
|
||||
["--navds-help-text-color-focus", "--a-surface-default"],
|
||||
["--navds-help-text-color", "--a-surface-action"],
|
||||
["--navds-link-color-text-focus", "--a-text-on-action"],
|
||||
["--navds-link-color-text-active", "--a-text-on-action"],
|
||||
["--navds-link-color-text", "--a-text-action"],
|
||||
["--navds-link-color-icon", "--a-icon-action"],
|
||||
["--navds-link-color-icon-focus", "--a-icon-on-action"],
|
||||
["--navds-link-color-background-focus", "--a-border-focus"],
|
||||
["--navds-link-color-background-active", "--a-border-focus"],
|
||||
["--navds-link-color-on-info-background", "--a-text-default"],
|
||||
["--navds-link-color-on-error-background", "--a-text-default"],
|
||||
["--navds-loader-color-neutral-foreground", "--a-border-default"],
|
||||
["--navds-loader-color-interaction-foreground", "--a-surface-action"],
|
||||
["--navds-loader-color-inverted-foreground", "--a-surface-default"],
|
||||
["--navds-loader-color-transparent-background", "--a-surface-transparent"],
|
||||
["--navds-loader-color-foreground", "--a-border-default"],
|
||||
["--navds-loader-color-background", "--a-surface-active"],
|
||||
["--navds-modal-color-background", "--a-surface-default"],
|
||||
["--navds-pagination-color-text-selected", "--a-text-on-action"],
|
||||
["--navds-pagination-color-background-selected", "--a-surface-action-selected"],
|
||||
["--navds-popover-color-background", "--a-surface-default"],
|
||||
["--navds-popover-color-border", "--a-border-default"],
|
||||
["--navds-tag-color-info-background", "--a-surface-info-subtle"],
|
||||
["--navds-tag-color-info-border", "--a-border-info"],
|
||||
["--navds-tag-color-warning-background", "--a-surface-warning-subtle"],
|
||||
["--navds-tag-color-warning-border", "--a-border-warning"],
|
||||
["--navds-tag-color-success-background", "--a-surface-success-subtle"],
|
||||
["--navds-tag-color-success-border", "--a-border-success"],
|
||||
["--navds-tag-color-error-background", "--a-surface-danger-subtle"],
|
||||
["--navds-tag-color-error-border", "--a-border-danger"],
|
||||
["--navds-tag-color-border", "--a-border-default"],
|
||||
["--navds-tag-color-background", "--a-surface-subtle"],
|
||||
["--navds-toggle-group-color-background-hover", "--a-surface-action-subtle"],
|
||||
["--navds-toggle-group-color-text-hover", "--a-surface-action"],
|
||||
["--navds-toggle-group-color-background-pressed", "--a-surface-action-selected"],
|
||||
["--navds-toggle-group-color-text-pressed", "--a-text-on-action"],
|
||||
["--navds-toggle-group-color-background", "--a-surface-default"],
|
||||
["--navds-toggle-group-color-text", "--a-text-default"],
|
||||
["--navds-toggle-group-color-border", "--a-border-divider"],
|
||||
["--navds-panel-color-background", "--a-surface-default"],
|
||||
["--navds-panel-color-border", "--a-border-default"],
|
||||
["--navds-link-panel-color-border-hover", "--a-surface-action"],
|
||||
["--navds-link-panel-color-title-hover", "--a-text-action"],
|
||||
["--navds-link-panel-color-text", "--a-text-default"],
|
||||
["--navds-table-row-color-background-selected-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navds-table-row-color-background-hover", "--a-bg-subtle"],
|
||||
["--navds-table-row-color-background-selected", "--a-surface-action-subtle"],
|
||||
["--navds-table-row-color-background-zebra", "--a-surface-subtle"],
|
||||
["--navds-table-cell-color-border-hover", "--a-border-strong"],
|
||||
["--navds-table-cell-color-border", "--a-border-default"],
|
||||
|
||||
["--navds-button-color-primary-background-hover", "--a-surface-action-hover"],
|
||||
["--navds-button-color-primary-background-active", "--a-surface-action-active"],
|
||||
["--navds-button-color-primary-border-focus", "--a-surface-default"],
|
||||
["--navds-button-color-primary-text", "--a-text-on-action"],
|
||||
["--navds-button-color-primary-background", "--a-surface-action"],
|
||||
["--navds-button-color-secondary-border-focus-active-hover", "--a-surface-default"],
|
||||
["--navds-button-color-secondary-text-hover", "--a-text-action"],
|
||||
["--navds-button-color-secondary-text-active", "--a-text-on-action"],
|
||||
["--navds-button-color-secondary-background-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navds-button-color-secondary-background-active", "--a-surface-action-active"],
|
||||
["--navds-button-color-secondary-border", "--a-border-action"],
|
||||
["--navds-button-color-secondary-text", "--a-text-action"],
|
||||
["--navds-button-color-secondary-background", "--a-surface-default"],
|
||||
["--navds-button-color-tertiary-background-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navds-button-color-tertiary-border-focus", "--a-border-action"],
|
||||
["--navds-button-color-tertiary-border-active", "--a-surface-default"],
|
||||
["--navds-button-color-tertiary-background-active", "--a-surface-action-active"],
|
||||
["--navds-button-color-tertiary-text-active", "--a-text-on-action"],
|
||||
["--navds-button-color-tertiary-text", "--a-text-action"],
|
||||
["--navds-button-color-danger-background-hover", "--a-surface-danger-hover"],
|
||||
["--navds-button-color-danger-background-active", "--a-surface-danger-active"],
|
||||
["--navds-button-color-danger-border-focus", "--a-surface-default"],
|
||||
["--navds-button-color-danger-background", "--a-surface-danger"],
|
||||
["--navds-button-color-danger-text", "--a-text-on-danger"],
|
||||
["--navds-error-message-color-text", "--a-text-danger"],
|
||||
["--navds-search-color-border-hover", "--a-border-action"],
|
||||
["--navds-search-color-clear-hover", "--a-text-action"],
|
||||
["--navds-search-color-border-error", "--a-border-danger"],
|
||||
["--navds-search-color-text", "--a-text-default"],
|
||||
["--navds-search-color-border", "--a-border-default"],
|
||||
["--navds-text-field-color-border-hover", "--a-border-action"],
|
||||
["--navds-text-field-color-border-error", "--a-border-danger"],
|
||||
["--navds-text-field-color-shadow-error", "--a-border-danger"],
|
||||
["--navds-text-field-color-border-disabled", "--a-gray-400"],
|
||||
["--navds-text-field-color-background-disabled", "--a-surface-subtle"],
|
||||
["--navds-text-field-color-placeholder-text", "--a-text-subtle"],
|
||||
["--navds-text-field-color-text-disabled", "--a-text-default"],
|
||||
["--navds-text-field-color-text", "--a-text-default"],
|
||||
["--navds-text-field-color-background", "--a-surface-default"],
|
||||
["--navds-text-field-color-border", "--a-border-default"],
|
||||
|
||||
["--navds-dropdown-menu-color", "--a-text-default"],
|
||||
["--navdsi-dropdown-item-color-text", "--a-text-action"],
|
||||
["--navdsi-dropdown-item-color-background-hover", "--a-surface-action-subtle-hover"],
|
||||
["--navdsi-dropdown-item-color-background-active", "--a-surface-action-active"],
|
||||
["--navds-dropdown-item-color-focus", "--a-border-focus"],
|
||||
["--navdsi-header-color-text", "--a-text-on-inverted"],
|
||||
["--navdsi-header-color-background", "--a-surface-inverted"],
|
||||
["--navdsi-header-color-border", "--a-gray-600"],
|
||||
["--navdsi-header-color-hover", "--a-surface-inverted-hover"],
|
||||
["--navdsi-header-color-active", "--a-surface-inverted-active"],
|
||||
["--navds-button-icon-adjustment", "--ac-button-icon-margin"]
|
||||
]
|
||||
|
||||
module.exports = { tokens };
|
||||
@@ -0,0 +1,18 @@
|
||||
import renameProps from "../../utils/rename-props";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
const root = j(file.source);
|
||||
|
||||
const printOptions = options.printOptions;
|
||||
|
||||
return renameProps({
|
||||
root,
|
||||
componentName: options.component,
|
||||
props: { [options.from]: options.to },
|
||||
}).toSource(printOptions);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { check } from "../../../utils/check";
|
||||
|
||||
const migration = "rename-prop";
|
||||
const fixtures = ["rename"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
options: {
|
||||
component: "SpeechBubble",
|
||||
from: "illustration",
|
||||
to: "avatar",
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<SpeechBubble illustration={<Illustration />}>
|
||||
<div />
|
||||
</SpeechBubble>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<SpeechBubble avatar={<Illustration />}>
|
||||
<div />
|
||||
</SpeechBubble>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import renameProps from "../../../utils/rename-props";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
let localName = "SpeechBubble";
|
||||
|
||||
const root = j(file.source);
|
||||
|
||||
/* Finds and replaces import from SpeechBubble -> Chat */
|
||||
root
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === "@navikt/ds-react")
|
||||
.forEach((imp) => {
|
||||
imp.value.specifiers.forEach((x) => {
|
||||
if (x.imported.name === "SpeechBubble") {
|
||||
if (x.local.name !== x.imported.name) {
|
||||
localName = x.local.name;
|
||||
x.imported.name = "Chat";
|
||||
} else {
|
||||
x.imported.name = "Chat";
|
||||
x.local.name = "Chat";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (j(file.source).findJSXElements(localName)) {
|
||||
renameProps({
|
||||
root,
|
||||
componentName: localName,
|
||||
props: {
|
||||
illustrationBgColor: "avatarBgColor",
|
||||
illustration: "avatar",
|
||||
topText: "name",
|
||||
},
|
||||
});
|
||||
|
||||
/* Find and replace name of all <SpeechBubble />*/
|
||||
const compRoot = root.find(j.JSXElement, {
|
||||
openingElement: { name: { name: localName } },
|
||||
});
|
||||
|
||||
compRoot.forEach((x) => {
|
||||
if (localName !== "SpeechBubble") return;
|
||||
x.node.openingElement.name.name = "Chat";
|
||||
x.node.closingElement.name.name = "Chat";
|
||||
});
|
||||
|
||||
/* Need to handle dot-notations differently */
|
||||
const child = root.find(j.JSXElement);
|
||||
|
||||
child.forEach((x) => {
|
||||
if (
|
||||
x.value.openingElement.name.type === "JSXMemberExpression" &&
|
||||
x.value.openingElement.name.object.name === "SpeechBubble"
|
||||
) {
|
||||
x.value.openingElement.name.object.name = "Chat";
|
||||
x.value.closingElement.name.object.name = "Chat";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return root.toSource(options.printOptions);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "chat";
|
||||
const fixtures = ["complete", "idempotent", "props", "renamed"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { SpeechBubble, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
{...testProps}
|
||||
>
|
||||
<SpeechBubble.Bubble {...testProps}>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</SpeechBubble.Bubble>
|
||||
</SpeechBubble>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
{...testProps}
|
||||
>
|
||||
<Chat.Bubble {...testProps}>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
|
||||
labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { SpeechBubble, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</SpeechBubble.Bubble>
|
||||
</SpeechBubble>
|
||||
<SpeechBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<SpeechBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</SpeechBubble.Bubble>
|
||||
<SpeechBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</SpeechBubble.Bubble>
|
||||
</SpeechBubble>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Chat, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
<Chat
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</Chat.Bubble>
|
||||
<Chat.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</Chat.Bubble>
|
||||
</Chat>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { SpeechBubble as DsBubble, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
<DsBubble
|
||||
illustration={<Illustration />}
|
||||
topText="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
illustrationBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Chat as DsBubble, Button } from "@navikt/ds-react";
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
export const Page = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsBubble
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
<DsBubble
|
||||
avatar={<Illustration />}
|
||||
name="Ola Normann 01.01.21 14:00"
|
||||
backgroundColor="red"
|
||||
avatarBgColor="blue"
|
||||
>
|
||||
<DsBubble.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
|
||||
do.
|
||||
</DsBubble.Bubble>
|
||||
<DsBubble.Bubble>
|
||||
Adipisicing laborum est eu laborum est sit in commodo enim sint
|
||||
laboris labore nisi ut.
|
||||
</DsBubble.Bubble>
|
||||
</DsBubble>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
let localName = "Pagination";
|
||||
|
||||
const root = j(file.source);
|
||||
|
||||
function addMigrationTag(node) {
|
||||
const attributes = node.openingElement.attributes;
|
||||
const isMigrated = attributes.find(
|
||||
(node) =>
|
||||
node.type === "JSXAttribute" &&
|
||||
node.name.name === "data-version" &&
|
||||
node.value.value === "v1"
|
||||
);
|
||||
|
||||
if (!isMigrated) {
|
||||
attributes.push(
|
||||
j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
|
||||
function addExplicitStandardProp(node) {
|
||||
const attributes = node.openingElement.attributes;
|
||||
const variant = attributes.find(
|
||||
(node) => node.type === "JSXAttribute" && node.name.name === "size"
|
||||
);
|
||||
|
||||
if (!variant) {
|
||||
attributes.unshift(
|
||||
j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
|
||||
);
|
||||
addMigrationTag(node);
|
||||
}
|
||||
}
|
||||
|
||||
/* Finds locally used name for Pagination */
|
||||
root
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === "@navikt/ds-react")
|
||||
.forEach((imp) => {
|
||||
imp.value.specifiers.forEach((x) => {
|
||||
if (
|
||||
x.imported.name === "Pagination" &&
|
||||
x.local.name !== x.imported.name
|
||||
) {
|
||||
localName = x.local.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (j(file.source).findJSXElements(localName)) {
|
||||
root.findJSXElements(`${localName}`).forEach((parent) => {
|
||||
const skip = !!parent.value.openingElement?.attributes.find(
|
||||
(x) => x.name.name === "data-version" && x.value.value === "v1"
|
||||
);
|
||||
|
||||
parent.value.openingElement?.attributes.forEach((x, index) => {
|
||||
let didUpdate = false;
|
||||
if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
|
||||
/* addExplicitStandardProp */
|
||||
if (x.value.value === "medium") {
|
||||
x.value = j.literal("small");
|
||||
didUpdate = true;
|
||||
} else if (x.value.value === "small") {
|
||||
x.value = j.literal("xsmall");
|
||||
didUpdate = true;
|
||||
}
|
||||
|
||||
didUpdate && addMigrationTag(parent.value);
|
||||
}
|
||||
});
|
||||
addExplicitStandardProp(parent.value);
|
||||
});
|
||||
}
|
||||
|
||||
return root.toSource(options.printOptions);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination
|
||||
size="small"
|
||||
onPageChange={setPage}
|
||||
data-version="v1"
|
||||
{...testProps}
|
||||
/>
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination onPageChange={setPage} />
|
||||
<Pagination size="small" onPageChange={setPage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination
|
||||
size="small"
|
||||
onPageChange={setPage}
|
||||
data-version="v1"
|
||||
{...testProps}
|
||||
/>
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination as DsPagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsPagination onPageChange={setPage} />
|
||||
<DsPagination size="medium" onPageChange={setPage} />
|
||||
<DsPagination size="small" onPageChange={setPage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination as DsPagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<DsPagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<DsPagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "pagination";
|
||||
const fixtures = ["size", "idempotent", "import"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination onPageChange={setPage} />
|
||||
<Pagination size="medium" onPageChange={setPage} />
|
||||
<Pagination size="small" onPageChange={setPage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Pagination, Button } from "@navikt/ds-react";
|
||||
|
||||
export const Demo = () => {
|
||||
return (
|
||||
<div>
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="small" onPageChange={setPage} data-version="v1" />
|
||||
<Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
import transformTabs from "../tabs/tabs";
|
||||
import transformChat from "../chat/chat";
|
||||
import transformPagination from "../pagination/pagination";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
file.source = transformTabs(file, api, options);
|
||||
file.source = transformChat(file, api, options);
|
||||
file.source = transformPagination(file, api, options);
|
||||
|
||||
return file.source;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import renameProps from "../../../utils/rename-props";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api, options) {
|
||||
const j = api.jscodeshift;
|
||||
let localName = "Tabs";
|
||||
let iconPositionProp = null;
|
||||
|
||||
const root = j(file.source);
|
||||
|
||||
/* Finds used name for Tabs component */
|
||||
root
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === "@navikt/ds-react")
|
||||
.forEach((imp) => {
|
||||
imp.value.specifiers.forEach((x) => {
|
||||
if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
|
||||
localName = x.local.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (j(file.source).findJSXElements(localName)) {
|
||||
renameProps({
|
||||
root,
|
||||
componentName: `${localName}.List`,
|
||||
props: {
|
||||
loop: "null",
|
||||
},
|
||||
});
|
||||
|
||||
root.findJSXElements(`${localName}`).forEach((parent) => {
|
||||
parent.value.children.forEach((el) => {
|
||||
const openingEl = el.openingElement;
|
||||
if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
|
||||
if (
|
||||
openingEl.name.object.name === localName &&
|
||||
openingEl.name.property.name === "List"
|
||||
) {
|
||||
/* Move loop-prop */
|
||||
el.openingElement.attributes.forEach((x, index) => {
|
||||
if (x.name?.name === "loop" && x.type === "JSXAttribute") {
|
||||
parent.value.openingElement.attributes.push(x);
|
||||
delete el.openingElement.attributes[index];
|
||||
}
|
||||
});
|
||||
|
||||
/* Find and move iconPosition-prop to <Tabs/> */
|
||||
el.children.forEach((tab) => {
|
||||
const tabEl = tab.openingElement;
|
||||
if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
|
||||
if (
|
||||
tabEl.name.object.name === localName &&
|
||||
tabEl.name.property.name === "Tab"
|
||||
) {
|
||||
tabEl?.attributes.forEach((x, index) => {
|
||||
if (
|
||||
x.name?.name === "iconPosition" &&
|
||||
x.type === "JSXAttribute"
|
||||
) {
|
||||
if (!iconPositionProp) {
|
||||
iconPositionProp = x;
|
||||
}
|
||||
delete tabEl.attributes[index];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
iconPositionProp &&
|
||||
parent.value.openingElement.attributes.push(iconPositionProp);
|
||||
iconPositionProp = null;
|
||||
});
|
||||
}
|
||||
|
||||
return root.toSource(options.printOptions);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<div>
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
|
||||
<Tabs.List loop={false} {...testProps}>
|
||||
<Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
|
||||
<Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<div>
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
{...testProps}
|
||||
loop={false}
|
||||
iconPosition={props.left}>
|
||||
<Tabs.List {...testProps}>
|
||||
<Tabs.Tab value="logg" label="logg" {...testProps} />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
loop
|
||||
iconPosition="left">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
loop
|
||||
iconPosition="left">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
|
||||
<Tabs.List loop>
|
||||
<Tabs.Tab value="logg" iconPosition="left" label="logg" />
|
||||
<Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Tabs } from "@navikt/ds-react";
|
||||
|
||||
const TabComp = () => {
|
||||
return (
|
||||
/* prettier-ignore */
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
loop
|
||||
iconPosition="left">
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="logg" label="logg" />
|
||||
<Tabs.Tab value="logg2" label="logg2medlangtekst" />
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
<Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "tabs";
|
||||
const fixtures = ["complete", "idempotent", "props"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.test {
|
||||
color: var(--navds-global-color-blue-100);
|
||||
color: var(--navds-global-color-red-100);
|
||||
|
||||
--navds-global-color-red-100: var(--navds-global-color-green-100);
|
||||
--navds-global-color-blue-100: red;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
const StyledDiv = styled`
|
||||
--navds-global-color-red-100: var(--navds-global-color-green-100);
|
||||
--navds-global-color-blue-100: red;
|
||||
|
||||
.test{
|
||||
color: var(--navds-global-color-blue-100);
|
||||
}
|
||||
`;
|
||||
|
||||
<style>
|
||||
{`
|
||||
.test{
|
||||
color: var(--navds-global-color-blue-100);
|
||||
}
|
||||
`}
|
||||
</style>;
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
.test {
|
||||
color: var(--a-blue-100);
|
||||
color: var(--a-red-100);
|
||||
|
||||
--v2-migration__navds-global-color-red-100: var(--a-green-100);
|
||||
--v2-migration__navds-global-color-blue-100: red;
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
const StyledDiv = styled`
|
||||
--v2-migration__navds-global-color-red-100: var(--a-green-100);
|
||||
--v2-migration__navds-global-color-blue-100: red;
|
||||
|
||||
.test{
|
||||
color: var(--a-blue-100);
|
||||
}
|
||||
`;
|
||||
|
||||
<style>
|
||||
{`
|
||||
.test{
|
||||
color: var(--a-blue-100);
|
||||
}
|
||||
`}
|
||||
</style>;
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-css-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "css",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api) {
|
||||
let src = file.source;
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
// eslint-disable-next-line no-useless-concat
|
||||
const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm");
|
||||
src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`);
|
||||
});
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
const rgx = new RegExp("(" + tok[0] + ")", "gm");
|
||||
src = src.replace(rgx, tok[1]);
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
NavdsGlobalColorBlue400 as abc132,
|
||||
NavdsGlobalColorGray100,
|
||||
NavdsGlobalColorGray400,
|
||||
NavdsSemanticColorLink,
|
||||
} from "@navikt/ds-tokens/dist/tokens";
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
border-bottom: 5px solid white;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
:hover {
|
||||
border-bottom: 5px solid ${abc132};
|
||||
p {
|
||||
color: ${NavdsSemanticColorLink};
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: ${NavdsGlobalColorGray100};
|
||||
border-bottom: 5px solid ${NavdsSemanticColorLink};
|
||||
|
||||
.typo-normal {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLenketekst = styled(BodyShort)`
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledTekst = styled(BodyShort)`
|
||||
border-bottom: 5px solid white;
|
||||
color: ${NavdsGlobalColorGray400};
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
`;
|
||||
|
||||
const Fane = ({ side, behandlingId, index, deaktivert }) => {
|
||||
const { gåTilUrl } = useApp();
|
||||
const fanenavn = side.navn;
|
||||
return (
|
||||
<>
|
||||
{deaktivert && (
|
||||
<StyledTekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledTekst>
|
||||
)}
|
||||
{!deaktivert && (
|
||||
<StyledNavLink
|
||||
key={side.navn}
|
||||
to={`/behandling/${behandlingId}/${side.href}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
|
||||
}}
|
||||
>
|
||||
<StyledLenketekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledLenketekst>
|
||||
</StyledNavLink>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Fane;
|
||||
@@ -0,0 +1,88 @@
|
||||
import styled from "styled-components";
|
||||
import {
|
||||
ABlue400,
|
||||
AGray100,
|
||||
AGray400,
|
||||
ATextAction,
|
||||
} from "@navikt/ds-tokens/dist/tokens";
|
||||
import { BodyShort } from "@navikt/ds-react";
|
||||
|
||||
const StyledNavLink = styled(NavLink)`
|
||||
border-bottom: 5px solid white;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
:hover {
|
||||
border-bottom: 5px solid ${ABlue400};
|
||||
p {
|
||||
color: ${ATextAction};
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: ${AGray100};
|
||||
border-bottom: 5px solid ${ATextAction};
|
||||
|
||||
.typo-normal {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLenketekst = styled(BodyShort)`
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledTekst = styled(BodyShort)`
|
||||
border-bottom: 5px solid white;
|
||||
color: ${AGray400};
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
`;
|
||||
|
||||
const Fane = ({ side, behandlingId, index, deaktivert }) => {
|
||||
const { gåTilUrl } = useApp();
|
||||
const fanenavn = side.navn;
|
||||
return (
|
||||
<>
|
||||
{deaktivert && (
|
||||
<StyledTekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledTekst>
|
||||
)}
|
||||
{!deaktivert && (
|
||||
<StyledNavLink
|
||||
key={side.navn}
|
||||
to={`/behandling/${behandlingId}/${side.href}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
|
||||
}}
|
||||
>
|
||||
<StyledLenketekst size={"small"}>
|
||||
{index + 1}. {fanenavn}
|
||||
</StyledLenketekst>
|
||||
</StyledNavLink>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Fane;
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-js-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "js",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { JSCodeshift } from "jscodeshift";
|
||||
import {
|
||||
getImportSpecifier,
|
||||
getImportSpecifierName,
|
||||
renameImportSpecifier,
|
||||
} from "../../../utils/imports";
|
||||
import { translateToken } from "../../../utils/translate-token";
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file: JSCodeshift, api) {
|
||||
let src = file.source;
|
||||
|
||||
const j = api.jscodeshift as JSCodeshift;
|
||||
|
||||
let root = j(file.source);
|
||||
|
||||
const jsImport = root.find(j.ImportDeclaration).filter((x) => {
|
||||
return ["@navikt/ds-tokens/dist/tokens"].includes(
|
||||
x.node.source.value as string
|
||||
);
|
||||
});
|
||||
|
||||
if (!jsImport) {
|
||||
return src;
|
||||
}
|
||||
|
||||
tokens.forEach((x) => {
|
||||
const name = translateToken(x[0], "js");
|
||||
const out = translateToken(x[1], "js");
|
||||
|
||||
let foundName: string = "";
|
||||
|
||||
getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
|
||||
(x) => (foundName = x.node.imported.name)
|
||||
);
|
||||
|
||||
if (name === foundName) {
|
||||
const localName =
|
||||
getImportSpecifierName(
|
||||
j,
|
||||
root,
|
||||
name,
|
||||
"@navikt/ds-tokens/dist/tokens"
|
||||
) || name;
|
||||
|
||||
renameImportSpecifier(
|
||||
j,
|
||||
root,
|
||||
name,
|
||||
out,
|
||||
"@navikt/ds-tokens/dist/tokens"
|
||||
);
|
||||
|
||||
let code = root.toSource();
|
||||
|
||||
const rgx = new RegExp("(" + localName + ")", "gm");
|
||||
code = code.replace(rgx, out);
|
||||
root = j(code);
|
||||
}
|
||||
});
|
||||
|
||||
return root.toSource();
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
.filtersMenu {
|
||||
box-shadow: @navds-global-color-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: @navds-global-color-green-100;
|
||||
border: 1px solid @navds-global-color-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
border: 1px solid @navds-semantic-color-link;
|
||||
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: @navds-semantic-color-link;
|
||||
}
|
||||
|
||||
background-color: @navds-global-color-gray-600;
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
.filtersMenu {
|
||||
box-shadow: @a-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: @a-green-100;
|
||||
border: 1px solid @a-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
border: 1px solid @a-text-action;
|
||||
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: @a-text-action;
|
||||
}
|
||||
|
||||
background-color: @a-gray-600;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-less-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "less",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { translateToken } from "../../../utils/translate-token";
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api) {
|
||||
let src = file.source;
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
const lessToken = translateToken(tok[0], "less");
|
||||
|
||||
const rgx = new RegExp("(\\" + lessToken + ")", "gm");
|
||||
src = src.replace(rgx, translateToken(tok[1], "less"));
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
.filtersMenu {
|
||||
box-shadow: common.$navds-global-color-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: common.$navds-global-color-green-100;
|
||||
border: 1px solid common.$navds-global-color-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
&:global(.navds-link-panel) {
|
||||
border: 1px solid common.$navds-semantic-color-link;
|
||||
}
|
||||
|
||||
:global {
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: common.$navds-semantic-color-link;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: common.$navds-global-color-gray-600;
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
.filtersMenu {
|
||||
box-shadow: common.$a-blue-200 inset 0 0 0 8px;
|
||||
border-radius: 0.2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterExplanationHighlight {
|
||||
background-color: common.$a-green-100;
|
||||
border: 1px solid common.$a-green-500;
|
||||
transition: all 0.4s linear;
|
||||
}
|
||||
|
||||
.lenkepanelNavno {
|
||||
&:global(.navds-link-panel) {
|
||||
border: 1px solid common.$a-text-action;
|
||||
}
|
||||
|
||||
:global {
|
||||
.navds-link-panel__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navds-link-panel__title,
|
||||
.navds-link-panel__chevron {
|
||||
color: common.$a-text-action;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: common.$a-gray-600;
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { check } from "../../../../utils/check";
|
||||
|
||||
const migration = "update-sass-tokens";
|
||||
const fixtures = ["complete"];
|
||||
|
||||
for (const fixture of fixtures) {
|
||||
check(__dirname, {
|
||||
fixture,
|
||||
migration,
|
||||
extension: "scss",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { translateToken } from "../../../utils/translate-token";
|
||||
import { tokens } from "../../../tokens-map.mjs";
|
||||
|
||||
/**
|
||||
* @param {import('jscodeshift').FileInfo} file
|
||||
* @param {import('jscodeshift').API} api
|
||||
*/
|
||||
export default function transformer(file, api) {
|
||||
let src = file.source;
|
||||
|
||||
tokens.forEach((tok) => {
|
||||
const scssToken = translateToken(tok[0], "scss");
|
||||
|
||||
const rgx = new RegExp("(\\" + scssToken + ")", "gm");
|
||||
src = src.replace(rgx, translateToken(tok[1], "scss"));
|
||||
});
|
||||
|
||||
return src;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
import prettier from "prettier";
|
||||
|
||||
const applyTransform = require("jscodeshift/dist/testUtils").applyTransform;
|
||||
|
||||
interface TestT {
|
||||
fixture: string;
|
||||
migration: string;
|
||||
extension?: "js" | "scss" | "less" | "css";
|
||||
options?: { [option: string]: any };
|
||||
}
|
||||
|
||||
export function check(
|
||||
dirName: string,
|
||||
{ fixture, migration, extension = "js", options = {} }: TestT
|
||||
) {
|
||||
describe(migration, () => {
|
||||
it(fixture, async () => {
|
||||
const fixtureDir = path.join(dirName);
|
||||
const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
|
||||
const parser = extension;
|
||||
const source = fs.readFileSync(inputPath, "utf8");
|
||||
const expected = fs.readFileSync(
|
||||
path.join(fixtureDir, `${fixture}.output.${extension}`),
|
||||
"utf8"
|
||||
);
|
||||
// Assumes transform is one level up from tests directory
|
||||
const module = await import(path.join(dirName, "..", migration));
|
||||
const output = applyTransform({ ...module, parser: "tsx" }, options, {
|
||||
source,
|
||||
});
|
||||
|
||||
// Format output and expected with prettier for white spaces and line breaks consistency
|
||||
expect(
|
||||
prettier.format(output, {
|
||||
parser: parser === "js" ? "typescript" : parser,
|
||||
})
|
||||
).toBe(
|
||||
prettier.format(expected, {
|
||||
parser: parser === "js" ? "typescript" : parser,
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import core, { Collection } from "jscodeshift";
|
||||
|
||||
export function getImportSpecifier(
|
||||
j: core.JSCodeshift,
|
||||
source: Collection<any>,
|
||||
specifier: string,
|
||||
sourcePath: string
|
||||
) {
|
||||
return source
|
||||
.find(j.ImportDeclaration)
|
||||
.filter((path) => path.node.source.value === sourcePath)
|
||||
.find(j.ImportSpecifier)
|
||||
.filter((path) => path.value.imported.name === specifier);
|
||||
}
|
||||
|
||||
export function renameImportSpecifier(
|
||||
j: core.JSCodeshift,
|
||||
source: Collection<any>,
|
||||
specifier: string,
|
||||
newSpecifier: string,
|
||||
sourcePath: string
|
||||
) {
|
||||
getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
|
||||
j.importSpecifier(j.identifier(newSpecifier))
|
||||
);
|
||||
}
|
||||
|
||||
export function getImportSpecifierName(
|
||||
j: core.JSCodeshift,
|
||||
source: Collection<any>,
|
||||
specifier: string,
|
||||
sourcePath: string
|
||||
) {
|
||||
const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
|
||||
|
||||
return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export default function renameProps({ root, componentName, props }) {
|
||||
return root.findJSXElements(componentName).forEach((path) => {
|
||||
path.node.openingElement.attributes.forEach((node) => {
|
||||
if (
|
||||
node.type === "JSXAttribute" &&
|
||||
Object.keys(props).includes(node.name.name)
|
||||
) {
|
||||
node.name.name = props[node.name.name];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { translateToken } from "../translate-token";
|
||||
|
||||
export {};
|
||||
|
||||
jest.autoMockOff();
|
||||
|
||||
const tokens = [
|
||||
{
|
||||
name: "--navds-global-color-red-100",
|
||||
scss: "$navds-global-color-red-100",
|
||||
less: "@navds-global-color-red-100",
|
||||
js: "NavdsGlobalColorRed100",
|
||||
},
|
||||
{
|
||||
name: "--a-blue-100",
|
||||
scss: "$a-blue-100",
|
||||
less: "@a-blue-100",
|
||||
js: "ABlue100",
|
||||
},
|
||||
];
|
||||
|
||||
describe("Translating tokens to correct format", () => {
|
||||
test("To scss", () => {
|
||||
tokens.forEach((x) =>
|
||||
expect(translateToken(x.name, "scss")).toEqual(x.scss)
|
||||
);
|
||||
});
|
||||
test("To less", () => {
|
||||
tokens.forEach((x) =>
|
||||
expect(translateToken(x.name, "less")).toEqual(x.less)
|
||||
);
|
||||
});
|
||||
test("To js", () => {
|
||||
tokens.forEach((x) => expect(translateToken(x.name, "js")).toEqual(x.js));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import _ from "lodash";
|
||||
|
||||
export const translateToken = (token: string, type: "scss" | "less" | "js") => {
|
||||
switch (type) {
|
||||
case "scss":
|
||||
return token.replace("--", "$");
|
||||
case "less":
|
||||
return token.replace("--", "@");
|
||||
case "js":
|
||||
return _.startCase(token).split(" ").join("");
|
||||
|
||||
default:
|
||||
return token;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,58 @@
|
||||
import chalk from "chalk";
|
||||
import { Command } from "commander";
|
||||
import isGitClean from "is-git-clean";
|
||||
import {
|
||||
getMigrationString,
|
||||
getMigrationNames,
|
||||
getMigrationPath,
|
||||
} from "./migrations.js";
|
||||
|
||||
export function validateMigration(str: string, program: Command) {
|
||||
if (!getMigrationNames().includes(str)) {
|
||||
program.error(
|
||||
chalk.red(
|
||||
`Migration <${str}> not found!\n${chalk.gray(
|
||||
`\nAvailable migrations:\n${getMigrationString()}`
|
||||
)}`
|
||||
)
|
||||
);
|
||||
}
|
||||
const path = getMigrationPath(str);
|
||||
if (!path) {
|
||||
program.error(
|
||||
chalk.red(
|
||||
`Code for migration <${str}> not found!\n${chalk.gray(
|
||||
`\nContact creator (Aksel) to get it fixed!\n`
|
||||
)}`
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function validateGit(options: any, program: Command) {
|
||||
if (options.dryRun) {
|
||||
return;
|
||||
}
|
||||
if (options.force) {
|
||||
console.log(chalk.yellow("Forcing migration without git check"));
|
||||
return;
|
||||
}
|
||||
|
||||
let clean = false;
|
||||
|
||||
try {
|
||||
clean = isGitClean.sync(process.cwd());
|
||||
} catch (err: any) {
|
||||
if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
|
||||
clean = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!clean) {
|
||||
program.error(
|
||||
`${chalk.yellow(
|
||||
"\nBefore we continue, please stash or commit your git changes."
|
||||
)}${"\nYou can use the --force flag to override this safety check."}`
|
||||
);
|
||||
}
|
||||
}
|
||||
File renamed without changes.
+2
-2
@@ -7,8 +7,8 @@ import {
|
||||
componentDir,
|
||||
rootDir,
|
||||
globalDir,
|
||||
} from "@navikt/ds-css/config/_mappings.js";
|
||||
import { inquiry } from "./inquiry.js";
|
||||
} from "@navikt/ds-css/config/_mappings";
|
||||
import { inquiry } from "./inquiry";
|
||||
import clipboard from "clipboardy";
|
||||
import lodash from "lodash";
|
||||
import chalk from "chalk";
|
||||
File renamed without changes.
+1
-1
@@ -7,7 +7,7 @@ export async function getAllVersions() {
|
||||
);
|
||||
return Object.keys(npmPackageData.data["versions"]);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.error(e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,13 @@
|
||||
import { StyleMappings } from "@navikt/ds-css/config/_mappings.js";
|
||||
import { generateImportOutput } from "./generate-output.js";
|
||||
import { AnswersT, ComponentPrefix } from "./config.js";
|
||||
import { StyleMappings } from "@navikt/ds-css/config/_mappings";
|
||||
import { generateImportOutput } from "./generate-output";
|
||||
import { AnswersT, ComponentPrefix } from "./config";
|
||||
|
||||
import { inquiry } from "./inquiry.js";
|
||||
import { inquiry } from "./inquiry";
|
||||
import { exec } from "child_process";
|
||||
import { fileURLToPath } from "url";
|
||||
import { dirname } from "path";
|
||||
import { getAllVersions } from "./get-version.js";
|
||||
import chalk from "chalk";
|
||||
import { getDirectories } from "./get-directories.js";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
import chalk from "chalk";
|
||||
import { getDirectories } from "./get-directories";
|
||||
import { getAllVersions } from "./get-version";
|
||||
|
||||
export async function cssImportsCommand() {
|
||||
let answers: AnswersT = {
|
||||
@@ -1,5 +1,5 @@
|
||||
import Enquirer from "enquirer";
|
||||
import { AnswersT } from "./config.js";
|
||||
import { AnswersT } from "./config";
|
||||
import chalk from "chalk";
|
||||
|
||||
export async function inquiry(answers: AnswersT, questions: any[]) {
|
||||
File renamed without changes.
@@ -14,5 +14,11 @@ export function helpCommand() {
|
||||
✔︎ Helps with CSS imports for all Aksel components
|
||||
✔︎ Supports Static and CDN-imports
|
||||
✔︎ Handles cascading, tailwind and @layer rules
|
||||
|
||||
- ${chalk.cyan(
|
||||
`npx @navikt/aksel ${chalk.green("codemod")} ${chalk.gray("<migration>")}`
|
||||
)}
|
||||
✔︎ Code-transformations for breaking changes when updating Aksel
|
||||
✔︎ Run with ${chalk.cyan(`${chalk.green("--help")}`)} to get started!
|
||||
`);
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
#!/usr/bin/env node
|
||||
import chalk from "chalk";
|
||||
import { helpCommand } from "./help.js";
|
||||
import { cssImportsCommand } from "./css-imports/index.js";
|
||||
import { helpCommand } from "./help";
|
||||
import { cssImportsCommand } from "./css-imports/index";
|
||||
import { codemodCommand } from "./codemod/index";
|
||||
import fs from "fs";
|
||||
|
||||
run();
|
||||
|
||||
@@ -12,6 +14,15 @@ async function run() {
|
||||
} else if (process.argv[2] === "css-imports") {
|
||||
await cssImportsCommand();
|
||||
return;
|
||||
} else if (process.argv[2] === "codemod") {
|
||||
codemodCommand();
|
||||
return;
|
||||
} else if (process.argv[2] === "-v" || process.argv[2] === "--version") {
|
||||
const pkg = JSON.parse(
|
||||
fs.readFileSync("./package.json").toString()
|
||||
).version;
|
||||
console.log(pkg);
|
||||
return;
|
||||
} else {
|
||||
console.log(
|
||||
chalk.red(
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "Node16",
|
||||
"module": "CommonJS",
|
||||
"sourceMap": false,
|
||||
"esModuleInterop": true,
|
||||
"target": "es2015",
|
||||
@@ -8,9 +8,10 @@
|
||||
"declaration": false,
|
||||
"types": ["node", "jest"],
|
||||
"outDir": "dist",
|
||||
"rootDir": "./",
|
||||
"resolveJsonModule": true
|
||||
"rootDir": "./src",
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["**/*.ts"],
|
||||
"exclude": ["node_modules", "dist", "jest.config.js", "__tests__"]
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": ["node_modules", "dist", "jest.config.js", "**/tests/**"]
|
||||
}
|
||||
@@ -1,5 +1,23 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
## 2.9.6
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
|
||||
|
||||
- `@navikt/ds-codemods` vil bli deprecated ettehvert.
|
||||
|
||||
## 2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
+3
-169
@@ -1,170 +1,4 @@
|
||||
# Aksel Codemods
|
||||
# Deperecation!
|
||||
|
||||
Collection of Codemods for easier migration between breaking changes in NAVs designsystem-packages.
|
||||
|
||||
## Usage
|
||||
|
||||
Codemod runs code-transformations programmatically in your project. This helps when migrating breaking changes without spending hours doing it manually.
|
||||
|
||||
NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (ex `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) can lead to bugs when using codemod.
|
||||
|
||||
```javascript
|
||||
npx @navikt/ds-codemod <migration> <path>
|
||||
```
|
||||
|
||||
migraton - name of migraton, see available migraton below.
|
||||
|
||||
path - files or directory to transform
|
||||
|
||||
```sh
|
||||
--dry Do a dry-run, no code will be edited
|
||||
--print Prints the changed output for comparison
|
||||
--force Runs even if there are uncommited changes (use with caution)
|
||||
```
|
||||
|
||||
## V1 -> V2
|
||||
|
||||
V2.0.0 updated the token-prefix of all tokens + names of all semantic-colors. The migrations below helps when migrating from the formats css, scss, less and js.
|
||||
|
||||
### css-tokens (--navds format)
|
||||
|
||||
`npx @navikt/ds-codemod v2/css src`
|
||||
|
||||
When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for `--v2-migration__` will show all found instances where you had redefined a token.
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: var(--navds-global-color-gray-900);
|
||||
+ color: var(--a-gray-900);
|
||||
|
||||
- --navds-semantic-color-text: red;
|
||||
+ --v2-migration__navds-semantic-color-text: red;
|
||||
}
|
||||
```
|
||||
|
||||
### sass/scss-tokens ($navds format)
|
||||
|
||||
`npx @navikt/ds-codemod v2/sass src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: $navds-global-color-gray-900;
|
||||
+ color: $a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
### less-tokens (@navds format)
|
||||
|
||||
`npx @navikt/ds-codemod v2/less src`
|
||||
|
||||
```diff
|
||||
.example{
|
||||
- color: @navds-global-color-gray-900;
|
||||
+ color: @a-gray-900;
|
||||
}
|
||||
```
|
||||
|
||||
### js-tokens
|
||||
|
||||
`npx @navikt/ds-codemod v2/js src`
|
||||
|
||||
```diff
|
||||
|
||||
- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
|
||||
+ import { AGray900 } from "@navikt/ds-tokens";
|
||||
|
||||
const styled = styled.p`
|
||||
- color: ${NavdsGlobalColorGray900};
|
||||
+ color: ${AGray900};
|
||||
`
|
||||
```
|
||||
|
||||
## Beta (0.19.x) -> v1
|
||||
|
||||
`npx @navikt/ds-codemod v1/preset src`
|
||||
|
||||
### preset
|
||||
|
||||
Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
|
||||
|
||||
Includes these transforms
|
||||
|
||||
- v1/tabs
|
||||
- v1/chat
|
||||
- v1/pagination
|
||||
|
||||
### tabs
|
||||
|
||||
`npx @navikt/ds-codemod v1/tabs src`
|
||||
|
||||
```diff
|
||||
<Tabs
|
||||
defaultValue="logg"
|
||||
onChange={(x) => console.log(x)}
|
||||
- loop
|
||||
+ iconPosition="left"
|
||||
>
|
||||
<Tabs.List
|
||||
- loop
|
||||
>
|
||||
<Tabs.Tab
|
||||
value="logg"
|
||||
label="logg"
|
||||
- iconPosition="left"
|
||||
/>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### chat
|
||||
|
||||
`npx @navikt/ds-codemodmod v1/chat src`
|
||||
|
||||
```diff
|
||||
-<SpeechBubble
|
||||
+<Chat
|
||||
- illustration={<Illustration />}
|
||||
- topText="Ola Normann 01.01.21 14:00"
|
||||
- illustrationBgColor="blue"
|
||||
+ avatar={<Illustration />}
|
||||
+ name="Ola Normann 01.01.21 14:00"
|
||||
+ avatarBgColor="blue"
|
||||
backgroundColor="red"
|
||||
>
|
||||
- <SpeechBubble.Bubble>
|
||||
+ <Chat.Bubble>
|
||||
Aute minim nisi sunt mollit duis sunt nulla minim non proident.
|
||||
- </SpeechBubble.Bubble>
|
||||
+ </Chat.Bubble>
|
||||
-</SpeechBubble>
|
||||
+</Chat>
|
||||
```
|
||||
|
||||
### pagination
|
||||
|
||||
`npx @navikt/ds-codemod v1/pagination src`
|
||||
|
||||
This codemod should only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
|
||||
|
||||
```diff
|
||||
-<Pagiation />
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="medium"/>
|
||||
+<Pagiation size="small"/>
|
||||
|
||||
-<Pagiation size="small"/>
|
||||
+<Pagiation size="xsmall"/>
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
|
||||
|
||||
#
|
||||
|
||||
Inspired by both MUI and NEXT
|
||||
|
||||
- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
|
||||
- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)
|
||||
This package will be been deprecated in favor of [@navikt/aksel](...)
|
||||
Run `npx @navikt/aksel codemod --help` to get started
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "2.9.3",
|
||||
"version": "3.0.0",
|
||||
"description": "Aksel codemods for NAVs designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^2.9.3",
|
||||
"@navikt/ds-react": "^2.9.3",
|
||||
"@navikt/ds-icons": "^3.0.0",
|
||||
"@navikt/ds-react": "^3.0.0",
|
||||
"clsx": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,5 +1,41 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - **Accordion**
|
||||
|
||||
- Accordion oppdatet til å ha chevron left-aligned.
|
||||
- Neutral-variant lagt til
|
||||
- Diverse nye size-options for heading og paddinger.
|
||||
- Deler av Accordion-CSS er refaktorert. Dette vil kunne brekke overskrevne stiler.
|
||||
|
||||
- [#1964](https://github.com/navikt/aksel/pull/1964) [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Aksels løsninger bruker nå `@navikt/aksel-icons`
|
||||
|
||||
**Sideeffects av ikonendringer**
|
||||
|
||||
- Komponenter som tidligere brukte Expand-ikon har fått oppdatert animasjon (table, readmore og accordion)
|
||||
- Alert bruker samme ikonstørrelse for alle størrelser
|
||||
- Chips har justert padding/ikonstørrelser
|
||||
- Datepicker hover-bug på knapper er fikset
|
||||
- Helptekst bruker nå et custom-ikon.
|
||||
- Select har fått justert padding rundt ikon
|
||||
- Switch bruker samme checkmark som checkbox, er nå avrundet
|
||||
- ReadMore har justert margin for alignment med ikon, fjernet content-animasjon
|
||||
- Tabs bruker default text-default nå
|
||||
- Stepper har endret hvordan den styler checkmark-ikon.
|
||||
|
||||
## 2.9.8
|
||||
|
||||
## 2.9.7
|
||||
|
||||
## 2.9.6
|
||||
|
||||
## 2.9.5
|
||||
|
||||
## 2.9.4
|
||||
|
||||
## 2.9.3
|
||||
|
||||
## 2.9.2
|
||||
|
||||
+130
-33
@@ -2,30 +2,78 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Header *
|
||||
*************************/
|
||||
.navds-accordion__header {
|
||||
--__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
|
||||
--__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
|
||||
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: var(--a-spacing-2);
|
||||
padding: 14px var(--a-spacing-3) var(--a-spacing-3);
|
||||
padding: var(--a-spacing-3);
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
position: relative;
|
||||
box-shadow: var(--__ac-accordion-header-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover {
|
||||
color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
|
||||
border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
|
||||
background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
|
||||
background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
|
||||
text-decoration: underline;
|
||||
color: var(--ac-accordion-header-text-hover, inherit);
|
||||
}
|
||||
|
||||
.navds-accordion--small .navds-accordion__header {
|
||||
padding: var(--a-spacing-2) var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-accordion--medium .navds-accordion__header {
|
||||
padding: var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-accordion--large .navds-accordion__header {
|
||||
padding: var(--a-spacing-4) var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
||||
box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
}
|
||||
|
||||
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
||||
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
||||
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
}
|
||||
|
||||
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
||||
box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
|
||||
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > :where(.navds-accordion__header) {
|
||||
box-shadow: var(--__ac-accordion-header-shadow);
|
||||
}
|
||||
|
||||
.navds-accordion__header:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
border-radius: var(--a-border-radius-large);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-accordion__header:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
border-radius: var(--a-border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-accordion__header-content {
|
||||
@@ -33,42 +81,91 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header {
|
||||
background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
|
||||
border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
|
||||
/*************************
|
||||
* Icon *
|
||||
*************************/
|
||||
.navds-accordion__icon-wrapper {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
height: var(--a-spacing-6);
|
||||
width: var(--a-spacing-6);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
|
||||
background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
|
||||
.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
|
||||
background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-accordion__content {
|
||||
padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
|
||||
border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
|
||||
border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon {
|
||||
.navds-accordion__header-chevron {
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
font-size: 1.5rem;
|
||||
height: 1.75rem;
|
||||
flex-shrink: 0;
|
||||
transition: transform 150ms ease-in-out;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
|
||||
transform: rotateZ(180deg);
|
||||
:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-accordion__expand-icon--filled {
|
||||
.navds-accordion__item--open
|
||||
> :where(.navds-accordion__header)
|
||||
> :where(.navds-accordion__icon-wrapper)
|
||||
> :where(.navds-accordion__header-chevron) {
|
||||
transform: translateY(0) rotate(-180deg);
|
||||
}
|
||||
|
||||
.navds-accordion__item--open
|
||||
> :where(.navds-accordion__header):hover
|
||||
> :where(.navds-accordion__icon-wrapper)
|
||||
> :where(.navds-accordion__header-chevron) {
|
||||
transform: translateY(-1px) rotate(-180deg);
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Variant/Default *
|
||||
*************************/
|
||||
.navds-accordion__item--open {
|
||||
background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Variant/Neutral *
|
||||
*************************/
|
||||
.navds-accordion__item--open.navds-accordion__item--neutral {
|
||||
background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
|
||||
}
|
||||
|
||||
/*************************
|
||||
* Content *
|
||||
*************************/
|
||||
.navds-accordion__content {
|
||||
padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
|
||||
animation: fadeAccordionContent 250ms ease;
|
||||
}
|
||||
|
||||
.navds-accordion__content--closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
|
||||
display: inherit;
|
||||
.navds-accordion__item--no-animation :where(.navds-accordion__content) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.navds-accordion__header:hover > .navds-accordion__expand-icon {
|
||||
display: none;
|
||||
@keyframes fadeAccordionContent {
|
||||
0% {
|
||||
opacity: 0.25;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -28,7 +28,6 @@
|
||||
}
|
||||
|
||||
.navds-alert--small > .navds-alert__icon {
|
||||
font-size: 1.25rem;
|
||||
height: var(--a-font-line-height-large);
|
||||
}
|
||||
|
||||
|
||||
Loaded 100 of 182 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user