mirror of
https://github.com/navikt/aksel.git
synced 2026-10-14 17:52:02 +00:00
Compare commits
14
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
4742f2f580 | ||
|
Ken
|
9f2052e1c2 | ||
|
Julian Nymark
|
f6fcf0c4fd | ||
|
|
83c9194a48 | ||
|
github-actions[bot]andgithub-actions[bot]
|
f5f859f845 | ||
|
Ken
|
2eaf531cfe | ||
|
Halvor Haugan
|
a9a17ce050 | ||
|
Trong Huu Nguyen
|
c5644da130 | ||
|
Julian NymarkandKen
|
3af95c4c1f | ||
|
Ken
|
d1bd13f4d1 | ||
|
Ken
|
9f048877e4 | ||
|
Ken
|
39b2ef49b2 | ||
|
Ken
|
ccf3f30ab4 | ||
|
Ken
|
3592f04eab |
No files matched your search
@@ -16,7 +16,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -16,7 +16,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
@@ -51,7 +51,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -21,7 +21,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: Login to GitHub Container Registry
|
||||
uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
|
||||
|
||||
@@ -13,7 +13,7 @@ jobs:
|
||||
fetch-depth: 0 # Required to retrieve git history
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 14
|
||||
node-version: "20"
|
||||
|
||||
- name: Restore cache
|
||||
uses: actions/cache@v3
|
||||
|
||||
@@ -26,7 +26,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.13.0
|
||||
node-version: "20"
|
||||
cache: yarn
|
||||
|
||||
- name: Restore cache
|
||||
|
||||
@@ -22,7 +22,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.13.0
|
||||
node-version: "20"
|
||||
cache: yarn
|
||||
|
||||
- name: Restore cache
|
||||
|
||||
@@ -18,7 +18,7 @@ jobs:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
node-version: "20"
|
||||
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -25,7 +25,7 @@ jobs:
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.13.0
|
||||
node-version: "20"
|
||||
cache: yarn
|
||||
|
||||
- uses: denoland/setup-deno@v1
|
||||
|
||||
@@ -18,7 +18,7 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: "16"
|
||||
node-version: "20"
|
||||
- uses: actions/checkout@v3
|
||||
- name: add tokens to .env
|
||||
run: |
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 5.5.0
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
"@vitejs/plugin-react": "^3.1.0",
|
||||
"postcss": "^8.4.0",
|
||||
"postcss-url": "^10.1.3",
|
||||
"typescript": "^4.8.0",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-singlefile": "^0.13.3",
|
||||
"vite-plugin-svgr": "^2.4.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
@@ -76,7 +76,7 @@
|
||||
"lodash.startcase": "4.4.0",
|
||||
"react": "^18.0.0",
|
||||
"rehype-parse": "8.0.4",
|
||||
"typescript": "^4.8.0",
|
||||
"typescript": "^5.1.6",
|
||||
"unified": "10.1.2"
|
||||
},
|
||||
"jest": {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-stylelint
|
||||
|
||||
## 5.5.0
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-stylelint",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
|
||||
"repository": {
|
||||
@@ -35,8 +35,8 @@
|
||||
"dev": "yarn watch:lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-css": "^5.4.0",
|
||||
"@navikt/ds-tokens": "^5.4.0",
|
||||
"@navikt/ds-css": "^5.5.0",
|
||||
"@navikt/ds-tokens": "^5.5.0",
|
||||
"@types/jest": "^29.0.0",
|
||||
"concurrently": "7.2.1",
|
||||
"copyfiles": "2.4.1",
|
||||
@@ -45,7 +45,8 @@
|
||||
"postcss-selector-parser": "^6.0.13",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"stylelint": "^14.8.5",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-jest": "^29.0.0",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-preset-stylelint",
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 5.5.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9f2052e1c`](https://github.com/navikt/aksel/commit/9f2052e1c2f31735896d082f3fece66b080a4f4e), [`83c9194a4`](https://github.com/navikt/aksel/commit/83c9194a480fd3d184f673815522f230ed5d77bb)]:
|
||||
- @navikt/ds-css@5.5.0
|
||||
|
||||
## 5.4.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "5.4.0",
|
||||
"@navikt/ds-css": "5.5.0",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"jest": "^29.0.0",
|
||||
"rimraf": "3.0.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"typescript": "^4.8.0"
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"sideEffects": false,
|
||||
"engines": {
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 5.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
.navds-sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
@@ -50,6 +51,7 @@
|
||||
.navds-sr-only.focusable:active,
|
||||
.navds-sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
clip-path: none;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
|
||||
@@ -31,6 +31,34 @@ const StyleMappings = {
|
||||
},
|
||||
],
|
||||
components: [
|
||||
{
|
||||
component: "Box",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "HGrid",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "HStack",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "VStack",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Spacer",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Show",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Hide",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Accordion",
|
||||
main: "accordion.css",
|
||||
@@ -100,10 +128,6 @@ const StyleMappings = {
|
||||
main: "help-text.css",
|
||||
dependencies: ["popover.css"],
|
||||
},
|
||||
{
|
||||
component: "HGrid",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{ component: "Ingress", main: typoCss },
|
||||
{
|
||||
component: "InternalHeader",
|
||||
@@ -139,26 +163,6 @@ const StyleMappings = {
|
||||
{ component: "Select", main: formCss, dependencies: [typoCss] },
|
||||
{ component: "Skeleton", main: "skeleton.css", dependencies: [] },
|
||||
{ component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
|
||||
{
|
||||
component: "HStack",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "VStack",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Spacer",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Show",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{
|
||||
component: "Hide",
|
||||
main: primitivesCss,
|
||||
},
|
||||
{ component: "Switch", main: formCss, dependencies: [typoCss] },
|
||||
{ component: "Table", main: "table.css", dependencies: [typoCss] },
|
||||
{ component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -27,7 +27,7 @@
|
||||
"css:get-version": "node config/get-version.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^5.4.0",
|
||||
"@navikt/ds-tokens": "^5.5.0",
|
||||
"cssnano": "6.0.0",
|
||||
"fast-glob": "3.2.11",
|
||||
"lodash": "4.17.21",
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
.navds-box {
|
||||
--__ac-box-padding-xs: initial;
|
||||
--__ac-box-padding-sm: initial;
|
||||
--__ac-box-padding-md: initial;
|
||||
--__ac-box-padding-lg: initial;
|
||||
--__ac-box-padding-xl: initial;
|
||||
--__ac-box-padding-block-xs: initial;
|
||||
--__ac-box-padding-inline-xs: initial;
|
||||
--__ac-box-padding-block-sm: initial;
|
||||
--__ac-box-padding-inline-sm: initial;
|
||||
--__ac-box-padding-block-md: initial;
|
||||
--__ac-box-padding-inline-md: initial;
|
||||
--__ac-box-padding-block-lg: initial;
|
||||
--__ac-box-padding-inline-lg: initial;
|
||||
--__ac-box-padding-block-xl: initial;
|
||||
--__ac-box-padding-inline-xl: initial;
|
||||
--__ac-box-padding: var(--__ac-box-padding-xs);
|
||||
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
|
||||
--__ac-box-padding-block: var(--__ac-box-padding-block-xs);
|
||||
--__ac-box-background: initial;
|
||||
--__ac-box-border-color: initial;
|
||||
--__ac-box-shadow: initial;
|
||||
--__ac-box-border-width: initial;
|
||||
--__ac-box-border-radius-xs: initial;
|
||||
--__ac-box-border-radius-sm: initial;
|
||||
--__ac-box-border-radius-md: initial;
|
||||
--__ac-box-border-radius-lg: initial;
|
||||
--__ac-box-border-radius-xl: initial;
|
||||
--__ac-box-border-radius: var(--__ac-box-border-radius-xs);
|
||||
|
||||
padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
|
||||
padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
|
||||
background-color: var(--__ac-box-background);
|
||||
border-style: solid;
|
||||
border-color: var(--__ac-box-border-color);
|
||||
border-radius: var(--__ac-box-border-radius);
|
||||
box-shadow: var(--__ac-box-shadow);
|
||||
border-width: var(--__ac-box-border-width, 0);
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.navds-box {
|
||||
--__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
|
||||
--__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
|
||||
--__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
|
||||
--__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navds-box {
|
||||
--__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
|
||||
--__ac-box-padding-inline: var(
|
||||
--__ac-box-padding-inline-md,
|
||||
var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
|
||||
);
|
||||
--__ac-box-padding-block: var(
|
||||
--__ac-box-padding-block-md,
|
||||
var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
|
||||
);
|
||||
--__ac-box-border-radius: var(
|
||||
--__ac-box-border-radius-md,
|
||||
var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navds-box {
|
||||
--__ac-box-padding: var(
|
||||
--__ac-box-padding-lg,
|
||||
var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
|
||||
);
|
||||
--__ac-box-padding-inline: var(
|
||||
--__ac-box-padding-inline-lg,
|
||||
var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
|
||||
);
|
||||
--__ac-box-padding-block: var(
|
||||
--__ac-box-padding-block-lg,
|
||||
var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
|
||||
);
|
||||
--__ac-box-border-radius: var(
|
||||
--__ac-box-border-radius-lg,
|
||||
var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.navds-box {
|
||||
--__ac-box-padding: var(
|
||||
--__ac-box-padding-xl,
|
||||
var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
|
||||
);
|
||||
--__ac-box-padding-inline: var(
|
||||
--__ac-box-padding-inline-xl,
|
||||
var(
|
||||
--__ac-box-padding-inline-lg,
|
||||
var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
|
||||
)
|
||||
);
|
||||
--__ac-box-padding-block: var(
|
||||
--__ac-box-padding-block-xl,
|
||||
var(
|
||||
--__ac-box-padding-block-lg,
|
||||
var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
|
||||
)
|
||||
);
|
||||
--__ac-box-border-radius: var(
|
||||
--__ac-box-border-radius-xl,
|
||||
var(
|
||||
--__ac-box-border-radius-lg,
|
||||
var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
@import "box.css";
|
||||
@import "hgrid.css";
|
||||
@import "stack.css";
|
||||
@import "responsive.css";
|
||||
Vendored
+4
@@ -5,6 +5,10 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navds-skeleton--inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navds-skeleton--has-children {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,28 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 5.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
|
||||
|
||||
- Updated dependencies [[`83c9194a4`](https://github.com/navikt/aksel/commit/83c9194a480fd3d184f673815522f230ed5d77bb)]:
|
||||
- @navikt/ds-tokens@5.5.0
|
||||
- @navikt/aksel-icons@5.5.0
|
||||
|
||||
## 5.4.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -38,7 +38,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.24.1",
|
||||
"@navikt/aksel-icons": "^5.4.0",
|
||||
"@navikt/aksel-icons": "^5.5.0",
|
||||
"@navikt/ds-tokens": "^5.5.0",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
@@ -63,8 +64,8 @@
|
||||
"rimraf": "3.0.2",
|
||||
"swr": "^1.1.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.30 || ^18.0.0",
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import cl from "clsx";
|
||||
import format from "date-fns/format";
|
||||
import isSameMonth from "date-fns/isSameMonth";
|
||||
import isSameYear from "date-fns/isSameYear";
|
||||
import compareAsc from "date-fns/compareAsc";
|
||||
import compareDesc from "date-fns/compareDesc";
|
||||
import setYear from "date-fns/setYear";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useDayPicker } from "react-day-picker";
|
||||
@@ -20,13 +21,13 @@ interface MonthType {
|
||||
const disableMonth = (month: Date, fromDate?: Date, toDate?: Date) => {
|
||||
if (fromDate && toDate) {
|
||||
return (
|
||||
(isSameMonth(month, fromDate) && isSameYear(month, fromDate)) ||
|
||||
(isSameMonth(month, toDate) && isSameYear(month, toDate))
|
||||
(compareAsc(month, fromDate) === -1 && !isSameMonth(month, fromDate)) ||
|
||||
(compareDesc(month, toDate) === -1 && !isSameMonth(month, toDate))
|
||||
);
|
||||
} else if (fromDate) {
|
||||
return isSameMonth(month, fromDate) && isSameYear(month, fromDate);
|
||||
return compareAsc(month, fromDate) === -1 && !isSameMonth(month, fromDate);
|
||||
} else if (toDate) {
|
||||
return isSameMonth(month, toDate) && isSameYear(month, toDate);
|
||||
return compareDesc(month, toDate) === -1 && !isSameMonth(month, toDate);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
@@ -46,7 +46,7 @@ export const dropdownCaption = () => {
|
||||
return (
|
||||
<MonthPicker.Standalone
|
||||
dropdownCaption
|
||||
fromDate={new Date("Jan 1 2019")}
|
||||
fromDate={new Date("Feb 10 2019")}
|
||||
toDate={new Date("Sep 27 2032")}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import { BodyLong, Grid, Cell, ContentContainer } from "../index";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Grid",
|
||||
title: "ds-react/Primitives/Grid",
|
||||
component: { Grid, Cell },
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
|
||||
@@ -32,6 +32,7 @@ export * from "./toggle-group";
|
||||
export * from "./tooltip";
|
||||
export * from "./typography";
|
||||
export * from "./util";
|
||||
export * from "./layout/box";
|
||||
export * from "./layout/stack";
|
||||
export * from "./layout/grid";
|
||||
export * from "./layout/content-container";
|
||||
|
||||
@@ -0,0 +1,384 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import type { Meta } from "@storybook/react";
|
||||
import { BodyLong, Detail, Heading } from "../../typography";
|
||||
import { Box } from "./Box";
|
||||
import { HGrid, HStack, VStack } from "../..";
|
||||
import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
|
||||
import { ChevronRightIcon } from "@navikt/aksel-icons";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Primitives/Box",
|
||||
component: Box,
|
||||
} satisfies Meta<typeof Box>;
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
<Box>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
|
||||
nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
|
||||
Proident pariatur proident pariatur magna consequat velit id commodo
|
||||
quis sunt tempor ullamco aliquip pariatur.
|
||||
</BodyLong>
|
||||
</Box>
|
||||
),
|
||||
};
|
||||
|
||||
const Card = ({
|
||||
background,
|
||||
borderRadius = "xlarge",
|
||||
children,
|
||||
}: {
|
||||
background?: BackgroundToken;
|
||||
borderRadius?: BorderRadiiToken;
|
||||
children: ReactNode;
|
||||
}) => (
|
||||
<Box
|
||||
padding="4"
|
||||
background={background}
|
||||
borderColor="border-subtle"
|
||||
borderRadius={borderRadius}
|
||||
shadow="xsmall"
|
||||
>
|
||||
<div style={{ width: "20rem" }}>{children}</div>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const AsCard = {
|
||||
render: () => {
|
||||
return (
|
||||
<HStack gap="4" justify="center">
|
||||
<Card>
|
||||
<h1>Card one</h1>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat
|
||||
aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
|
||||
</BodyLong>
|
||||
</Card>
|
||||
<Card>
|
||||
<h1>Card two</h1>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat
|
||||
aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
|
||||
</BodyLong>
|
||||
</Card>
|
||||
<Card>
|
||||
<h1>Card three</h1>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat
|
||||
aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
|
||||
</BodyLong>
|
||||
</Card>
|
||||
</HStack>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const ThemingDemo = {
|
||||
render: () => {
|
||||
const LinkCard = () => {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
.link-card {
|
||||
color: var(--navds-color-text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-card:hover {
|
||||
border-color: var(--a-border-action);
|
||||
box-shadow: var(--a-shadow-small);
|
||||
}
|
||||
.link-card:hover .navds-heading {
|
||||
color: var(--a-text-action);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-card:hover .link-card__chevron,
|
||||
.link-card:focus-within .link-card__chevron {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.link-card__chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Box
|
||||
as="a"
|
||||
href="#"
|
||||
className="link-card"
|
||||
borderRadius="small"
|
||||
borderColor="border-default"
|
||||
padding="4"
|
||||
onClick={() => alert("Clicked!")}
|
||||
>
|
||||
<HStack gap="4" align="center">
|
||||
<VStack gap="2">
|
||||
<Heading size="medium">
|
||||
LinkCard som bruker Box, HStack og VStack
|
||||
</Heading>
|
||||
<BodyLong>This truly is inside a box!</BodyLong>
|
||||
</VStack>
|
||||
<ChevronRightIcon fontSize={24} className="link-card__chevron" />
|
||||
</HStack>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ChatBubble = () => {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
background="surface-neutral-subtle"
|
||||
shadow="xsmall"
|
||||
padding="4"
|
||||
borderRadius="xlarge xlarge xlarge 0"
|
||||
>
|
||||
<VStack gap="2">
|
||||
<Detail>BOX • 01.01.21 14:00</Detail>
|
||||
<BodyLong>
|
||||
Hei! Dette er en chatbobble som bruker Box som base!
|
||||
</BodyLong>
|
||||
</VStack>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const PricePill = () => {
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
.old-price {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<HStack>
|
||||
<Box
|
||||
background="surface-success-subtle"
|
||||
shadow="xsmall"
|
||||
padding="4"
|
||||
borderRadius="full 0 0 full"
|
||||
>
|
||||
<VStack align="center">
|
||||
<Detail>Episk ny pris</Detail>
|
||||
<Heading size="medium">889.99 kr</Heading>
|
||||
</VStack>
|
||||
</Box>
|
||||
<Box
|
||||
background="surface-danger-subtle"
|
||||
shadow="xsmall"
|
||||
padding="4"
|
||||
borderRadius="0 full full 0"
|
||||
>
|
||||
<VStack align="center">
|
||||
<Detail>Førpris</Detail>
|
||||
<Heading className="old-price" size="medium">
|
||||
399.99 kr
|
||||
</Heading>
|
||||
</VStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<VStack gap="8">
|
||||
<Card>Dette er et Card som bruker Box som base</Card>
|
||||
<LinkCard />
|
||||
<ChatBubble />
|
||||
<PricePill />
|
||||
</VStack>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const PaddingBreakpoints = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Box
|
||||
padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
|
||||
borderColor="border-default"
|
||||
>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
|
||||
nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
|
||||
Proident pariatur proident pariatur magna consequat velit id commodo
|
||||
quis sunt tempor ullamco aliquip pariatur.
|
||||
</BodyLong>
|
||||
</Box>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const PaddingBreakpointsInherit1 = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Box
|
||||
padding={{ xs: "2" }}
|
||||
paddingInline={{ md: "24 0" }}
|
||||
borderColor="border-default"
|
||||
>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
|
||||
nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
|
||||
Proident pariatur proident pariatur magna consequat velit id commodo
|
||||
quis sunt tempor ullamco aliquip pariatur.
|
||||
</BodyLong>
|
||||
</Box>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
export const PaddingBreakpointsInherit2 = {
|
||||
render: () => (
|
||||
<div>
|
||||
<Box
|
||||
padding={{ xs: "2", sm: "3" }}
|
||||
paddingInline={{ sm: "4 0", md: "24 0" }}
|
||||
borderColor="border-default"
|
||||
>
|
||||
<BodyLong>
|
||||
This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
|
||||
nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
|
||||
Proident pariatur proident pariatur magna consequat velit id commodo
|
||||
quis sunt tempor ullamco aliquip pariatur.
|
||||
</BodyLong>
|
||||
</Box>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
export const Padding = {
|
||||
render: () => (
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
.navds-box {
|
||||
width: fit-content;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<VStack align="center">
|
||||
<Box padding="20" borderColor="border-default">
|
||||
<BodyLong>Padding all around</BodyLong>
|
||||
</Box>
|
||||
<Box padding="1" paddingBlock="20 0" borderColor="border-default">
|
||||
<BodyLong>Padding to the North</BodyLong>
|
||||
</Box>
|
||||
<Box padding="1" paddingInline="0 20" borderColor="border-default">
|
||||
<BodyLong>Padding to the East</BodyLong>
|
||||
</Box>
|
||||
<Box padding="1" paddingBlock="0 20" borderColor="border-default">
|
||||
<BodyLong>Padding to the South</BodyLong>
|
||||
</Box>
|
||||
<Box padding="1" paddingInline="20 0" borderColor="border-default">
|
||||
<BodyLong>Padding to the West</BodyLong>
|
||||
</Box>
|
||||
</VStack>
|
||||
</>
|
||||
),
|
||||
};
|
||||
|
||||
export const WithHGrid = () => {
|
||||
return (
|
||||
<Box background="bg-subtle" padding="10">
|
||||
<HGrid
|
||||
gap="6"
|
||||
columns={{ xs: "repeat(auto-fit, minmax(10rem, 1fr))", md: 4 }}
|
||||
>
|
||||
<Box padding="4" background="bg-default">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
</Box>
|
||||
<Box padding="4" background="bg-default">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
</Box>
|
||||
<Box padding="4" background="bg-default">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
</Box>
|
||||
<Box padding="4" background="bg-default">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
||||
</Box>
|
||||
</HGrid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const BorderWidth = () => {
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Box
|
||||
background="bg-subtle"
|
||||
padding="10"
|
||||
borderWidth="2"
|
||||
borderColor="border-strong"
|
||||
>
|
||||
Box
|
||||
</Box>
|
||||
<Box
|
||||
background="bg-subtle"
|
||||
padding="10"
|
||||
borderWidth="1 2 3 4"
|
||||
borderColor="border-strong"
|
||||
>
|
||||
Box
|
||||
</Box>
|
||||
<Box
|
||||
background="bg-subtle"
|
||||
padding="10"
|
||||
borderWidth="5 2 4 1"
|
||||
borderColor="border-strong"
|
||||
borderRadius="large"
|
||||
>
|
||||
Box
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export const BorderRadius = () => {
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Box
|
||||
background="bg-subtle"
|
||||
padding="10"
|
||||
borderWidth="2"
|
||||
borderColor="border-strong"
|
||||
borderRadius="small medium large xlarge"
|
||||
>
|
||||
Box
|
||||
</Box>
|
||||
<Box
|
||||
background="bg-subtle"
|
||||
padding="10"
|
||||
borderWidth="2"
|
||||
borderColor="border-strong"
|
||||
borderRadius={{
|
||||
xs: "small medium large xlarge",
|
||||
md: "medium small large full",
|
||||
lg: "xlarge large",
|
||||
}}
|
||||
>
|
||||
Box
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export const PaddingDemo = () => {
|
||||
return (
|
||||
<VStack gap="4">
|
||||
<Box
|
||||
background="bg-subtle"
|
||||
padding="0"
|
||||
paddingInline={{ xs: "20", lg: "10" }}
|
||||
>
|
||||
Box
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,148 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef } from "react";
|
||||
import { OverridableComponent } from "../../util/OverridableComponent";
|
||||
import { BorderRadiiToken } from "../utilities/types";
|
||||
import {
|
||||
SpaceDelimitedAttribute,
|
||||
ResponsiveProp,
|
||||
SpacingScale,
|
||||
getResponsiveProps,
|
||||
} from "../utilities/css";
|
||||
import {
|
||||
BackgroundToken,
|
||||
BorderColorToken,
|
||||
ShadowToken,
|
||||
} from "../utilities/types";
|
||||
|
||||
export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/** Background color. Accepts a color token. */
|
||||
background?: BackgroundToken;
|
||||
/** Border color. Accepts a color token. */
|
||||
borderColor?: BorderColorToken;
|
||||
/** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
|
||||
* @example
|
||||
* borderRadius='full'
|
||||
* borderRadius='0 full large small'
|
||||
* borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
|
||||
*/
|
||||
borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
|
||||
/**
|
||||
* Border-width. If this is not set there will be no border.
|
||||
* @example
|
||||
* borderWidth='2'
|
||||
* borderWidth='1 2 3 4'
|
||||
*/
|
||||
borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
|
||||
/** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
|
||||
* @example
|
||||
* padding='4'
|
||||
* padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
||||
*/
|
||||
padding?: ResponsiveProp<SpacingScale>;
|
||||
/** Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
|
||||
* @example
|
||||
* paddingInline='4'
|
||||
* paddingInline='4 5'
|
||||
* paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
|
||||
*/
|
||||
paddingInline?: ResponsiveProp<
|
||||
SpacingScale | `${SpacingScale} ${SpacingScale}`
|
||||
>;
|
||||
/** Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
|
||||
* @example
|
||||
* paddingBlock='4'
|
||||
* paddingBlock='4 5'
|
||||
* paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
||||
*/
|
||||
paddingBlock?: ResponsiveProp<
|
||||
SpacingScale | `${SpacingScale} ${SpacingScale}`
|
||||
>;
|
||||
/** Shadow on box. Accepts a shadow token.
|
||||
* @example
|
||||
* shadow='small'
|
||||
*/
|
||||
shadow?: ShadowToken;
|
||||
}
|
||||
|
||||
/**
|
||||
* Foundational Layout-primitive for generic encapsulation & styling.
|
||||
*
|
||||
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
|
||||
* @see 🏷️ {@link BoxProps}
|
||||
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
|
||||
*
|
||||
* @example
|
||||
* <Box padding="4">
|
||||
* <BodyShort>Hei</BodyShort>
|
||||
* </Box>
|
||||
*
|
||||
* @example
|
||||
* <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
|
||||
* <BodyShort>Hei</BodyShort>
|
||||
* </Box>
|
||||
*
|
||||
* @example
|
||||
* <VStack gap="8">
|
||||
* <Box padding="4">
|
||||
* <BodyShort>Hei</BodyShort>
|
||||
* </Box>
|
||||
* <Box padding="4">
|
||||
* <BodyShort>Hei</BodyShort>
|
||||
* </Box>
|
||||
* </VStack>
|
||||
*/
|
||||
export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
|
||||
(
|
||||
{
|
||||
as: Component = "div",
|
||||
background,
|
||||
borderColor,
|
||||
borderWidth,
|
||||
borderRadius,
|
||||
className,
|
||||
padding,
|
||||
paddingInline,
|
||||
paddingBlock,
|
||||
shadow,
|
||||
style: _style,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const style: React.CSSProperties = {
|
||||
..._style,
|
||||
"--__ac-box-background": background
|
||||
? `var(--a-${background})`
|
||||
: undefined,
|
||||
"--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined,
|
||||
"--__ac-box-border-color": borderColor
|
||||
? `var(--a-${borderColor})`
|
||||
: undefined,
|
||||
"--__ac-box-border-width": borderWidth
|
||||
? borderWidth
|
||||
.split(" ")
|
||||
.map((x) => `${x}px`)
|
||||
.join(" ")
|
||||
: undefined,
|
||||
...getResponsiveProps(
|
||||
"box",
|
||||
"border-radius",
|
||||
"border-radius",
|
||||
borderRadius,
|
||||
["0"]
|
||||
),
|
||||
...getResponsiveProps("box", "padding", "spacing", padding),
|
||||
...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
|
||||
...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
|
||||
};
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...rest}
|
||||
className={cl("navds-box", className)}
|
||||
ref={ref}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export { Box, type BoxProps } from "./Box";
|
||||
@@ -9,7 +9,7 @@ const columnsVariants = {
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "ds-react/HGrid",
|
||||
title: "ds-react/Primitives/HGrid",
|
||||
component: HGrid,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
|
||||
import { VStack } from "../stack";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Responsive/Hide",
|
||||
title: "ds-react/Primitives/Hide",
|
||||
component: Hide,
|
||||
} satisfies Meta<typeof Hide>;
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
|
||||
import { VStack } from "../stack";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Responsive/Show",
|
||||
title: "ds-react/Primitives/Show",
|
||||
component: Show,
|
||||
} satisfies Meta<typeof Show>;
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react";
|
||||
import { HStack, VStack, Spacer } from ".";
|
||||
|
||||
export default {
|
||||
title: "ds-react/Stack",
|
||||
title: "ds-react/Primitives/Stack",
|
||||
component: HStack,
|
||||
} satisfies Meta<typeof HStack>;
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
|
||||
|
||||
export type SpacingScale =
|
||||
| "0"
|
||||
| "05"
|
||||
@@ -21,43 +22,23 @@ export type SpacingScale =
|
||||
| "24"
|
||||
| "32";
|
||||
|
||||
type ResponsivePropConfig<T = string> = {
|
||||
export type SpaceDelimitedAttribute<T extends string> =
|
||||
| T
|
||||
| `${T} ${T}`
|
||||
| `${T} ${T} ${T}`
|
||||
| `${T} ${T} ${T} ${T}`;
|
||||
|
||||
type FixedResponsiveT<T> = {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
[Breakpoint in BreakpointsAlias]?: T;
|
||||
};
|
||||
|
||||
export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
|
||||
|
||||
export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
|
||||
|
||||
export function getResponsiveProps<T = string>(
|
||||
componentName: string,
|
||||
componentProp: string,
|
||||
tokenSubgroup: string,
|
||||
responsiveProp?: ResponsiveProp<T>
|
||||
) {
|
||||
if (!responsiveProp) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (typeof responsiveProp === "string") {
|
||||
return {
|
||||
[`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
|
||||
};
|
||||
}
|
||||
|
||||
return Object.fromEntries(
|
||||
Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
|
||||
`--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
|
||||
`var(--a-${tokenSubgroup}-${aliasOrScale})`,
|
||||
])
|
||||
);
|
||||
}
|
||||
export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
|
||||
|
||||
export function getResponsiveValue<T = string>(
|
||||
componentName: string,
|
||||
componentProp: string,
|
||||
responsiveProp?: ResponsiveValue<T>
|
||||
responsiveProp?: ResponsiveProp<T>
|
||||
) {
|
||||
if (!responsiveProp) {
|
||||
return {};
|
||||
@@ -76,3 +57,40 @@ export function getResponsiveValue<T = string>(
|
||||
])
|
||||
);
|
||||
}
|
||||
|
||||
export function getResponsiveProps<T extends string>(
|
||||
componentName: string,
|
||||
componentProp: string,
|
||||
tokenSubgroup: string,
|
||||
responsiveProp?: ResponsiveProp<T>,
|
||||
tokenExceptions: string[] = []
|
||||
) {
|
||||
if (!responsiveProp) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (typeof responsiveProp === "string") {
|
||||
return {
|
||||
[`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
|
||||
.split(" ")
|
||||
.map((x) =>
|
||||
tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
|
||||
)
|
||||
.join(" "),
|
||||
};
|
||||
}
|
||||
|
||||
return Object.fromEntries(
|
||||
Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
|
||||
return [
|
||||
`--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
|
||||
aliasOrScale
|
||||
.split(" ")
|
||||
.map((x) =>
|
||||
tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
|
||||
)
|
||||
.join(" "),
|
||||
];
|
||||
})
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
|
||||
import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
|
||||
import borderColors from "@navikt/ds-tokens/src/colors-border.json";
|
||||
import borderRadii from "@navikt/ds-tokens/src/border.json";
|
||||
import shadows from "@navikt/ds-tokens/src/shadow.json";
|
||||
|
||||
export type BackgroundToken =
|
||||
| keyof typeof bgColors.a
|
||||
| keyof typeof surfaceColors.a;
|
||||
export type BorderColorToken = keyof typeof borderColors.a;
|
||||
export type BorderRadiiToken =
|
||||
| keyof (typeof borderRadii.a)["border-radius"]
|
||||
| "0";
|
||||
export type ShadowToken = keyof typeof shadows.a.shadow;
|
||||
@@ -57,6 +57,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
|
||||
"navds-skeleton--has-children": Boolean(children),
|
||||
"navds-skeleton--no-height": !height,
|
||||
"navds-skeleton--no-width": !width,
|
||||
"navds-skeleton--inline": As === "span",
|
||||
}
|
||||
)}
|
||||
style={{ ...style, width, height }}
|
||||
|
||||
@@ -121,9 +121,10 @@ export const InlineText = {
|
||||
render: () => (
|
||||
<BodyLong>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
|
||||
voluptas sint dolore <Skeleton as="span">omnis quia consequatur</Skeleton>{" "}
|
||||
beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis
|
||||
rerum. Nulla, magnam? Saepe, eveniet?
|
||||
voluptas sint dolore <Skeleton width="40px" as="span" variant="text" />{" "}
|
||||
beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis{" "}
|
||||
<Skeleton as="span">test text</Skeleton> rerum. Nulla, magnam? Saepe,
|
||||
eveniet?
|
||||
</BodyLong>
|
||||
),
|
||||
};
|
||||
@@ -85,7 +85,9 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
|
||||
|
||||
if (typeof initHeight === "number") {
|
||||
// Reset negative height to 0
|
||||
initHeight = height < 0 ? 0 : height;
|
||||
if (typeof height !== "string") {
|
||||
initHeight = height < 0 ? 0 : height;
|
||||
}
|
||||
initOverflow = "hidden";
|
||||
} else if (isPercentage(initHeight)) {
|
||||
// If value is string "0%" make sure we convert it to number 0
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 5.5.0
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
## 5.3.5
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,14 +22,14 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^5.4.0",
|
||||
"@navikt/ds-tokens": "^5.5.0",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 5.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
||||
|
||||
## 5.4.1
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "5.4.0",
|
||||
"version": "5.5.0",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -36,8 +36,8 @@
|
||||
"nodemon": "^3.0.1",
|
||||
"style-dictionary": "^3.0.2",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
{
|
||||
"a": {
|
||||
"border": {
|
||||
"radius": {
|
||||
"small": { "value": "2px" },
|
||||
"medium": { "value": "4px" },
|
||||
"large": { "value": "8px" },
|
||||
"xlarge": { "value": "12px" },
|
||||
"full": { "value": "9999px" }
|
||||
}
|
||||
"border-radius": {
|
||||
"small": { "value": "2px" },
|
||||
"medium": { "value": "4px" },
|
||||
"large": { "value": "8px" },
|
||||
"xlarge": { "value": "12px" },
|
||||
"full": { "value": "9999px" }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"a": {
|
||||
"bg-default": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"bg-subtle": {
|
||||
"value": "{a.gray.100.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"a": {
|
||||
"border-subtle-hover": {
|
||||
"value": "{a.grayalpha.400.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"a": {
|
||||
"border-default": {
|
||||
"value": "{a.grayalpha.500.value}"
|
||||
},
|
||||
"border-strong": {
|
||||
"value": "{a.grayalpha.700.value}"
|
||||
},
|
||||
"border-divider": {
|
||||
"value": "{a.grayalpha.300.value}"
|
||||
},
|
||||
"border-subtle": {
|
||||
"value": "{a.grayalpha.300.value}"
|
||||
},
|
||||
"border-action-selected": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"border-action": {
|
||||
"value": "{a.blue.500.value}"
|
||||
},
|
||||
"border-selected": {
|
||||
"value": "{a.blue.500.value}"
|
||||
},
|
||||
"border-success": {
|
||||
"value": "{a.green.500.value}"
|
||||
},
|
||||
"border-danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"border-warning": {
|
||||
"value": "{a.orange.600.value}"
|
||||
},
|
||||
"border-info": {
|
||||
"value": "{a.lightblue.700.value}"
|
||||
},
|
||||
"border-focus-on-inverted": {
|
||||
"value": "{a.blue.200.value}"
|
||||
},
|
||||
"border-focus": {
|
||||
"value": "{a.blue.800.value}"
|
||||
},
|
||||
"border-on-inverted": {
|
||||
"value": "{a.gray.200.value}"
|
||||
},
|
||||
"border-on-inverted-subtle": {
|
||||
"value": "{a.gray.700.value}"
|
||||
},
|
||||
"border-alt-1": {
|
||||
"value": "{a.purple.400.value}"
|
||||
},
|
||||
"border-alt-2": {
|
||||
"value": "{a.limegreen.700.value}"
|
||||
},
|
||||
"border-alt-3": {
|
||||
"value": "{a.deepblue.500.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
{
|
||||
"a": {
|
||||
"icon-default": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"icon-subtle": {
|
||||
"value": "{a.grayalpha.700.value}"
|
||||
},
|
||||
"icon-action-selected": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"icon-action-on-action-subtle": {
|
||||
"value": "{a.blue.600.value}"
|
||||
},
|
||||
"icon-action": {
|
||||
"value": "{a.blue.500.value}"
|
||||
},
|
||||
"icon-success": {
|
||||
"value": "{a.green.500.value}"
|
||||
},
|
||||
"icon-danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"icon-warning": {
|
||||
"value": "{a.orange.600.value}"
|
||||
},
|
||||
"icon-info": {
|
||||
"value": "{a.lightblue.800.value}"
|
||||
},
|
||||
"icon-alt-1": {
|
||||
"value": "{a.purple.500.value}"
|
||||
},
|
||||
"icon-alt-2": {
|
||||
"value": "{a.limegreen.700.value}"
|
||||
},
|
||||
"icon-alt-3": {
|
||||
"value": "{a.deepblue.500.value}"
|
||||
},
|
||||
"icon-on-neutral": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"icon-on-inverted": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"icon-on-action": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"icon-on-success": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"icon-on-danger": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"icon-on-warning": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"icon-on-info": {
|
||||
"value": "{a.gray.900.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"a": {
|
||||
"surface-hover": {
|
||||
"value": "{a.grayalpha.100.value}"
|
||||
},
|
||||
"surface-active": {
|
||||
"value": "{a.grayalpha.200.value}"
|
||||
},
|
||||
"surface-inverted-hover": {
|
||||
"value": "{a.gray.800.value}"
|
||||
},
|
||||
"surface-inverted-active": {
|
||||
"value": "{a.gray.700.value}"
|
||||
},
|
||||
"surface-action-subtle-hover": {
|
||||
"value": "{a.blue.100.value}"
|
||||
},
|
||||
"surface-action-hover": {
|
||||
"value": "{a.blue.600.value}"
|
||||
},
|
||||
"surface-action-active": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"surface-action-selected-hover": {
|
||||
"value": "{a.blue.800.value}"
|
||||
},
|
||||
"surface-neutral-subtle-hover": {
|
||||
"value": "{a.grayalpha.200.value}"
|
||||
},
|
||||
"surface-neutral-active": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"surface-neutral-hover": {
|
||||
"value": "{a.gray.800.value}"
|
||||
},
|
||||
"surface-success-subtle-hover": {
|
||||
"value": "{a.green.200.value}"
|
||||
},
|
||||
"surface-success-hover": {
|
||||
"value": "{a.green.600.value}"
|
||||
},
|
||||
"surface-danger-subtle-hover": {
|
||||
"value": "{a.red.200.value}"
|
||||
},
|
||||
"surface-danger-hover": {
|
||||
"value": "{a.red.600.value}"
|
||||
},
|
||||
"surface-danger-active": {
|
||||
"value": "{a.red.700.value}"
|
||||
},
|
||||
"surface-warning-subtle-hover": {
|
||||
"value": "{a.orange.200.value}"
|
||||
},
|
||||
"surface-info-subtle-hover": {
|
||||
"value": "{a.lightblue.200.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
{
|
||||
"a": {
|
||||
"surface-default": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"surface-selected": {
|
||||
"value": "{a.blue.50.value}"
|
||||
},
|
||||
"surface-subtle": {
|
||||
"value": "{a.gray.50.value}"
|
||||
},
|
||||
"surface-transparent": {
|
||||
"value": "{a.transparent.value}"
|
||||
},
|
||||
"surface-backdrop": {
|
||||
"value": "{a.grayalpha.500.value}"
|
||||
},
|
||||
"surface-inverted": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"surface-action-subtle": {
|
||||
"value": "{a.blue.50.value}"
|
||||
},
|
||||
"surface-action-selected": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"surface-action": {
|
||||
"value": "{a.blue.500.value}"
|
||||
},
|
||||
"surface-neutral-subtle": {
|
||||
"value": "{a.grayalpha.100.value}"
|
||||
},
|
||||
"surface-neutral-moderate": {
|
||||
"value": "{a.grayalpha.200.value}"
|
||||
},
|
||||
"surface-neutral-selected": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"surface-neutral": {
|
||||
"value": "{a.gray.700.value}"
|
||||
},
|
||||
"surface-success-subtle": {
|
||||
"value": "{a.green.100.value}"
|
||||
},
|
||||
"surface-success-moderate": {
|
||||
"value": "{a.green.200.value}"
|
||||
},
|
||||
"surface-success": {
|
||||
"value": "{a.green.500.value}"
|
||||
},
|
||||
"surface-danger-subtle": {
|
||||
"value": "{a.red.100.value}"
|
||||
},
|
||||
"surface-danger-moderate": {
|
||||
"value": "{a.red.200.value}"
|
||||
},
|
||||
"surface-danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"surface-warning-subtle": {
|
||||
"value": "{a.orange.100.value}"
|
||||
},
|
||||
"surface-warning-moderate": {
|
||||
"value": "{a.orange.200.value}"
|
||||
},
|
||||
"surface-warning": {
|
||||
"value": "{a.orange.500.value}"
|
||||
},
|
||||
"surface-info-subtle": {
|
||||
"value": "{a.lightblue.100.value}"
|
||||
},
|
||||
"surface-info-moderate": {
|
||||
"value": "{a.lightblue.200.value}"
|
||||
},
|
||||
"surface-info": {
|
||||
"value": "{a.lightblue.500.value}"
|
||||
},
|
||||
"surface-alt-1-subtle": {
|
||||
"value": "{a.purple.100.value}"
|
||||
},
|
||||
"surface-alt-1-moderate": {
|
||||
"value": "{a.purple.200.value}"
|
||||
},
|
||||
"surface-alt-1": {
|
||||
"value": "{a.purple.400.value}"
|
||||
},
|
||||
"surface-alt-2-subtle": {
|
||||
"value": "{a.limegreen.100.value}"
|
||||
},
|
||||
"surface-alt-2-moderate": {
|
||||
"value": "{a.limegreen.200.value}"
|
||||
},
|
||||
"surface-alt-2": {
|
||||
"value": "{a.limegreen.400.value}"
|
||||
},
|
||||
"surface-alt-3-subtle": {
|
||||
"value": "{a.deepblue.100.value}"
|
||||
},
|
||||
"surface-alt-3-moderate": {
|
||||
"value": "{a.deepblue.200.value}"
|
||||
},
|
||||
"surface-alt-3-strong": {
|
||||
"value": "{a.deepblue.800.value}"
|
||||
},
|
||||
"surface-alt-3": {
|
||||
"value": "{a.deepblue.500.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"a": {
|
||||
"text-default": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"text-subtle": {
|
||||
"value": "{a.grayalpha.700.value}"
|
||||
},
|
||||
"text-visited": {
|
||||
"value": "{a.purple.500.value}"
|
||||
},
|
||||
"text-danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"text-action-selected": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"text-action-on-action-subtle": {
|
||||
"value": "{a.blue.600.value}"
|
||||
},
|
||||
"text-action": {
|
||||
"value": "{a.blue.500.value}"
|
||||
},
|
||||
"text-on-inverted": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"text-on-neutral": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"text-on-action": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"text-on-success": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"text-on-danger": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"text-on-warning": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"text-on-info": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"text-on-alt-1": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"text-on-alt-2": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"text-on-alt-3": {
|
||||
"value": "{a.white.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,346 +0,0 @@
|
||||
{
|
||||
"a": {
|
||||
"text": {
|
||||
"default": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"subtle": {
|
||||
"value": "{a.grayalpha.700.value}"
|
||||
},
|
||||
"visited": {
|
||||
"value": "{a.purple.500.value}"
|
||||
},
|
||||
"danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"action": {
|
||||
"selected": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"on": {
|
||||
"action": {
|
||||
"subtle": {
|
||||
"value": "{a.blue.600.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
"@": {
|
||||
"value": "{a.blue.500.value}"
|
||||
}
|
||||
},
|
||||
"on": {
|
||||
"inverted": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"neutral": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"action": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"success": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"danger": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"warning": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"info": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"alt1": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"alt2": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"alt3": {
|
||||
"value": "{a.white.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
"bg": {
|
||||
"default": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"subtle": {
|
||||
"value": "{a.gray.100.value}"
|
||||
}
|
||||
},
|
||||
"surface": {
|
||||
"default": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"hover": {
|
||||
"value": "{a.grayalpha.100.value}"
|
||||
},
|
||||
"active": {
|
||||
"value": "{a.grayalpha.200.value}"
|
||||
},
|
||||
"selected": {
|
||||
"value": "{a.blue.50.value}"
|
||||
},
|
||||
"subtle": {
|
||||
"value": "{a.gray.50.value}"
|
||||
},
|
||||
"transparent": {
|
||||
"value": "{a.transparent.value}"
|
||||
},
|
||||
"backdrop": {
|
||||
"value": "{a.grayalpha.500.value}"
|
||||
},
|
||||
"inverted": {
|
||||
"hover": {
|
||||
"value": "{a.gray.800.value}"
|
||||
},
|
||||
"active": {
|
||||
"value": "{a.gray.700.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{a.gray.900.value}"
|
||||
}
|
||||
},
|
||||
"action": {
|
||||
"subtle": {
|
||||
"hover": {
|
||||
"value": "{a.blue.100.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{a.blue.50.value}"
|
||||
}
|
||||
},
|
||||
"hover": {
|
||||
"value": "{a.blue.600.value}"
|
||||
},
|
||||
"active": {
|
||||
"value": "{a.blue.700.value}"
|
||||
},
|
||||
"selected": {
|
||||
"hover": {
|
||||
"value": "{a.blue.800.value}"
|
||||
},
|
||||
"@": { "value": "{a.blue.700.value}" }
|
||||
},
|
||||
"@": {
|
||||
"value": "{a.blue.500.value}"
|
||||
}
|
||||
},
|
||||
|
||||
"neutral": {
|
||||
"subtle": {
|
||||
"hover": {
|
||||
"value": "{a.grayalpha.200.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{a.grayalpha.100.value}"
|
||||
}
|
||||
},
|
||||
"moderate": {
|
||||
"value": "{a.grayalpha.200.value}"
|
||||
},
|
||||
"hover": {
|
||||
"value": "{a.gray.800.value}"
|
||||
},
|
||||
"selected": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"active": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"@": {
|
||||
"value": "{a.gray.700.value}"
|
||||
}
|
||||
},
|
||||
|
||||
"success": {
|
||||
"subtle": {
|
||||
"hover": { "value": "{a.green.200.value}" },
|
||||
"@": { "value": "{a.green.100.value}" }
|
||||
},
|
||||
"moderate": {
|
||||
"value": "{a.green.200.value}"
|
||||
},
|
||||
"@": { "value": "{a.green.500.value}" },
|
||||
"hover": { "value": "{a.green.600.value}" }
|
||||
},
|
||||
|
||||
"danger": {
|
||||
"subtle": {
|
||||
"hover": { "value": "{a.red.200.value}" },
|
||||
"@": { "value": "{a.red.100.value}" }
|
||||
},
|
||||
"moderate": {
|
||||
"value": "{a.red.200.value}"
|
||||
},
|
||||
"hover": {
|
||||
"value": "{a.red.600.value}"
|
||||
},
|
||||
"active": {
|
||||
"value": "{a.red.700.value}"
|
||||
},
|
||||
"@": { "value": "{a.red.500.value}" }
|
||||
},
|
||||
|
||||
"warning": {
|
||||
"subtle": {
|
||||
"hover": { "value": "{a.orange.200.value}" },
|
||||
"@": { "value": "{a.orange.100.value}" }
|
||||
},
|
||||
"moderate": {
|
||||
"value": "{a.orange.200.value}"
|
||||
},
|
||||
"@": { "value": "{a.orange.500.value}" }
|
||||
},
|
||||
|
||||
"info": {
|
||||
"subtle": {
|
||||
"hover": { "value": "{a.lightblue.200.value}" },
|
||||
"@": { "value": "{a.lightblue.100.value}" }
|
||||
},
|
||||
"moderate": {
|
||||
"value": "{a.lightblue.200.value}"
|
||||
},
|
||||
"@": { "value": "{a.lightblue.500.value}" }
|
||||
},
|
||||
|
||||
"alt1": {
|
||||
"subtle": { "value": "{a.purple.100.value}" },
|
||||
"moderate": { "value": "{a.purple.200.value}" },
|
||||
"@": { "value": "{a.purple.400.value}" }
|
||||
},
|
||||
"alt2": {
|
||||
"subtle": { "value": "{a.limegreen.100.value}" },
|
||||
"moderate": { "value": "{a.limegreen.200.value}" },
|
||||
"@": { "value": "{a.limegreen.400.value}" }
|
||||
},
|
||||
"alt3": {
|
||||
"subtle": { "value": "{a.deepblue.100.value}" },
|
||||
"moderate": { "value": "{a.deepblue.200.value}" },
|
||||
"strong": { "value": "{a.deepblue.800.value}" },
|
||||
"@": { "value": "{a.deepblue.500.value}" }
|
||||
}
|
||||
},
|
||||
"border": {
|
||||
"default": {
|
||||
"value": "{a.grayalpha.500.value}"
|
||||
},
|
||||
"strong": {
|
||||
"value": "{a.grayalpha.700.value}"
|
||||
},
|
||||
"divider": {
|
||||
"value": "{a.grayalpha.300.value}"
|
||||
},
|
||||
"subtle": {
|
||||
"hover": { "value": "{a.grayalpha.400.value}" },
|
||||
"@": { "value": "{a.grayalpha.300.value}" }
|
||||
},
|
||||
"action": {
|
||||
"selected": { "value": "{a.blue.700.value}" },
|
||||
"@": { "value": "{a.blue.500.value}" }
|
||||
},
|
||||
"selected": {
|
||||
"value": "{a.blue.500.value}"
|
||||
},
|
||||
"success": {
|
||||
"value": "{a.green.500.value}"
|
||||
},
|
||||
"danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"warning": {
|
||||
"value": "{a.orange.600.value}"
|
||||
},
|
||||
"info": {
|
||||
"value": "{a.lightblue.700.value}"
|
||||
},
|
||||
"focus": {
|
||||
"on": {
|
||||
"inverted": {
|
||||
"value": "{a.blue.200.value}"
|
||||
}
|
||||
},
|
||||
"@": { "value": "{a.blue.800.value}" }
|
||||
},
|
||||
"on": {
|
||||
"inverted": {
|
||||
"@": { "value": "{a.gray.200.value}" },
|
||||
"subtle": { "value": "{a.gray.700.value}" }
|
||||
}
|
||||
},
|
||||
"alt1": {
|
||||
"value": "{a.purple.400.value}"
|
||||
},
|
||||
"alt2": {
|
||||
"value": "{a.limegreen.700.value}"
|
||||
},
|
||||
"alt3": {
|
||||
"value": "{a.deepblue.500.value}"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"default": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"subtle": {
|
||||
"value": "{a.grayalpha.700.value}"
|
||||
},
|
||||
"action": {
|
||||
"selected": { "value": "{a.blue.700.value}" },
|
||||
"on": {
|
||||
"action": {
|
||||
"subtle": {
|
||||
"value": "{a.blue.600.value}"
|
||||
}
|
||||
}
|
||||
},
|
||||
"@": { "value": "{a.blue.500.value}" }
|
||||
},
|
||||
"success": {
|
||||
"value": "{a.green.500.value}"
|
||||
},
|
||||
"danger": {
|
||||
"value": "{a.red.500.value}"
|
||||
},
|
||||
"warning": {
|
||||
"value": "{a.orange.600.value}"
|
||||
},
|
||||
"info": {
|
||||
"value": "{a.lightblue.800.value}"
|
||||
},
|
||||
"alt1": {
|
||||
"value": "{a.purple.500.value}"
|
||||
},
|
||||
"alt2": {
|
||||
"value": "{a.limegreen.700.value}"
|
||||
},
|
||||
"alt3": {
|
||||
"value": "{a.deepblue.500.value}"
|
||||
},
|
||||
"on": {
|
||||
"neutral": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"inverted": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"action": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"success": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"danger": {
|
||||
"value": "{a.white.value}"
|
||||
},
|
||||
"warning": {
|
||||
"value": "{a.gray.900.value}"
|
||||
},
|
||||
"info": {
|
||||
"value": "{a.gray.900.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"a": {
|
||||
"shadow": {
|
||||
"focus": {
|
||||
"value": "0 0 0 3px {a.border-focus.value}"
|
||||
},
|
||||
"focus-inverted": {
|
||||
"value": "0 0 0 3px {a.border-focus-on-inverted.value}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,12 +15,6 @@
|
||||
},
|
||||
"xlarge": {
|
||||
"value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
|
||||
},
|
||||
"focus": {
|
||||
"inverted": {
|
||||
"value": "0 0 0 3px {a.border.focus.on.inverted.value}"
|
||||
},
|
||||
"@": { "value": "0 0 0 3px {a.border.focus.@.value}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+216
-188
@@ -1,7 +1,43 @@
|
||||
# Changelog
|
||||
|
||||
## 5.5.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
||||
|
||||
<!---->
|
||||
|
||||
- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
||||
|
||||
<!---->
|
||||
|
||||
- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
|
||||
|
||||
## 5.4.1
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- MonthPicker: Fikset kalkulering av fromDate/toDate ([#2269](https://github.com/navikt/aksel/pull/2269))
|
||||
|
||||
## 5.4.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
|
||||
<!---->
|
||||
|
||||
- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
@@ -14,14 +50,6 @@
|
||||
|
||||
- Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
|
||||
|
||||
<!---->
|
||||
|
||||
- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
|
||||
|
||||
## 5.3.5
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -40,26 +68,32 @@
|
||||
|
||||
## 5.3.3
|
||||
|
||||
### @navikt/ds-react
|
||||
### @navikt/ds-css
|
||||
|
||||
- HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
|
||||
|
||||
### @navikt/ds-css
|
||||
### @navikt/ds-react
|
||||
|
||||
- HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
|
||||
|
||||
## 5.3.2
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
|
||||
|
||||
## 5.3.1
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
|
||||
|
||||
- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fix bug in monthpicker, only compare year and month for equality on date object ([#2231](https://github.com/navikt/aksel/pull/2231))
|
||||
@@ -68,13 +102,11 @@
|
||||
|
||||
- :bug: DatePicker: Riktig skriftstørrelse på small input ([#2232](https://github.com/navikt/aksel/pull/2232))
|
||||
|
||||
## 5.3.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
|
||||
|
||||
- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
|
||||
|
||||
## 5.3.0
|
||||
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -88,10 +120,6 @@
|
||||
|
||||
- :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
## 5.2.1
|
||||
|
||||
### @navikt/ds-css
|
||||
@@ -104,6 +132,12 @@
|
||||
|
||||
- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
|
||||
|
||||
- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Button: Ved bruk av `as`-prop vil `role="button"` nå bli lagt til. Native `onKeyUp` for `Space` er også implementert slik at standard `button`-interaksjon vil være likere uansett html-tag. ([#2154](https://github.com/navikt/aksel/pull/2154))
|
||||
@@ -112,13 +146,13 @@
|
||||
|
||||
- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
|
||||
|
||||
## 5.1.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
|
||||
- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
|
||||
|
||||
- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
|
||||
|
||||
## 5.1.0
|
||||
- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -130,13 +164,13 @@
|
||||
|
||||
- Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))
|
||||
|
||||
## 5.0.3
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
|
||||
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
|
||||
|
||||
- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
|
||||
|
||||
## 5.0.3
|
||||
- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -148,12 +182,6 @@
|
||||
|
||||
- Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
|
||||
|
||||
- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))
|
||||
|
||||
## 5.0.2
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -168,6 +196,19 @@
|
||||
|
||||
## 5.0.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
|
||||
|
||||
- :sparkles: Støtte for header og footer
|
||||
- :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
|
||||
|
||||
<!---->
|
||||
|
||||
- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
|
||||
|
||||
- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
|
||||
@@ -188,30 +229,29 @@
|
||||
|
||||
- Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))
|
||||
|
||||
## 4.12.1
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
|
||||
|
||||
- :sparkles: Støtte for header og footer
|
||||
- :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
|
||||
|
||||
<!---->
|
||||
|
||||
- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
|
||||
|
||||
- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
|
||||
|
||||
## 4.12.1
|
||||
- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
|
||||
|
||||
## 4.12.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
|
||||
- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
|
||||
|
||||
## 4.12.0
|
||||
<!---->
|
||||
|
||||
- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
|
||||
|
||||
- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
|
||||
|
||||
- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -233,18 +273,6 @@
|
||||
|
||||
- Combobox: Lukker nå nedtrekksmeny hvis man legger til ny option i singleselect ([#2177](https://github.com/navikt/aksel/pull/2177))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
|
||||
|
||||
<!---->
|
||||
|
||||
- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
|
||||
|
||||
- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
|
||||
|
||||
- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
|
||||
|
||||
## 4.11.2
|
||||
|
||||
### @navikt/ds-css
|
||||
@@ -259,16 +287,6 @@
|
||||
|
||||
## 4.11.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
|
||||
|
||||
<!---->
|
||||
|
||||
- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
|
||||
|
||||
- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
|
||||
@@ -279,6 +297,16 @@
|
||||
|
||||
- Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
|
||||
|
||||
<!---->
|
||||
|
||||
- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
|
||||
|
||||
- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
|
||||
|
||||
## 4.10.2
|
||||
|
||||
### @navikt/ds-css
|
||||
@@ -287,56 +315,56 @@
|
||||
|
||||
## 4.10.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
|
||||
|
||||
## 4.9.1
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Button: Fikset aria-live bug der knapp alltid ble lest opp av skjermleser ved render ([#2143](https://github.com/navikt/aksel/pull/2143))
|
||||
|
||||
- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
|
||||
|
||||
## 4.9.0
|
||||
|
||||
### @navikt/ds-react
|
||||
### @navikt/ds-css
|
||||
|
||||
- Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))
|
||||
|
||||
### @navikt/ds-css
|
||||
### @navikt/ds-react
|
||||
|
||||
- Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))
|
||||
|
||||
## 4.8.0
|
||||
|
||||
### @navikt/ds-react
|
||||
### @navikt/ds-css
|
||||
|
||||
- Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))
|
||||
|
||||
### @navikt/ds-css
|
||||
### @navikt/ds-react
|
||||
|
||||
- Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))
|
||||
|
||||
## 4.7.4
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Oppdatert bruk av REM i komponenter for forbedret utrykk ved font-scaling i browser ([#2126](https://github.com/navikt/aksel/pull/2126))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
|
||||
|
||||
## 4.7.3
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -345,11 +373,11 @@
|
||||
|
||||
## 4.7.2
|
||||
|
||||
### @navikt/ds-react
|
||||
### @navikt/ds-css
|
||||
|
||||
- Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))
|
||||
|
||||
### @navikt/ds-css
|
||||
### @navikt/ds-react
|
||||
|
||||
- Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))
|
||||
|
||||
@@ -361,6 +389,10 @@
|
||||
|
||||
## 4.7.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
|
||||
@@ -371,35 +403,27 @@
|
||||
|
||||
- Combobox post-release tweaks ([#2112](https://github.com/navikt/aksel/pull/2112))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
|
||||
|
||||
## 4.6.1
|
||||
|
||||
### @navikt/ds-react
|
||||
### @navikt/ds-css
|
||||
|
||||
- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
|
||||
|
||||
### @navikt/ds-css
|
||||
### @navikt/ds-react
|
||||
|
||||
- Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))
|
||||
|
||||
## 4.6.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
|
||||
|
||||
## 4.5.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
|
||||
- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
|
||||
|
||||
## 4.5.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
@@ -409,6 +433,10 @@
|
||||
|
||||
- - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
|
||||
|
||||
## 4.4.2
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -423,14 +451,6 @@
|
||||
|
||||
## 4.4.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
@@ -441,11 +461,15 @@
|
||||
|
||||
- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
## 4.3.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
|
||||
- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
## 4.3.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
@@ -455,16 +479,20 @@
|
||||
|
||||
- ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))
|
||||
|
||||
## 4.2.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
|
||||
- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
|
||||
|
||||
## 4.2.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
|
||||
|
||||
## 4.1.7
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -521,6 +549,16 @@
|
||||
|
||||
- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
|
||||
|
||||
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Chips: `neutral` og `action`-varianter for Chips.Toggle. `checkmark`-prop for Chips.Toggle ([PR](https://github.com/navikt/aksel/pull/2035))
|
||||
@@ -539,24 +577,8 @@
|
||||
|
||||
- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
|
||||
|
||||
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
|
||||
|
||||
## 4.0.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
@@ -567,6 +589,12 @@
|
||||
|
||||
- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
@@ -591,11 +619,11 @@
|
||||
|
||||
- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
|
||||
|
||||
### @navikt/ds-react
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
|
||||
|
||||
### @navikt/ds-css
|
||||
### @navikt/ds-react
|
||||
|
||||
- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
|
||||
|
||||
@@ -623,18 +651,18 @@
|
||||
|
||||
- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
|
||||
|
||||
- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))
|
||||
|
||||
- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
|
||||
|
||||
- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
|
||||
|
||||
## 3.2.2
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -655,10 +683,6 @@
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
|
||||
@@ -667,6 +691,10 @@
|
||||
|
||||
- Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -677,16 +705,16 @@
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))
|
||||
|
||||
- Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
|
||||
|
||||
## 2.9.8
|
||||
|
||||
### @navikt/aksel-icons
|
||||
@@ -781,14 +809,14 @@
|
||||
|
||||
## 2.8.7
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fikset typografi-bruk for `Radio` og `Checkbox`.
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Button: token for tertiary
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fikset typografi-bruk for `Radio` og `Checkbox`.
|
||||
|
||||
## 2.8.6
|
||||
|
||||
### @navikt/ds-css
|
||||
@@ -817,14 +845,14 @@
|
||||
|
||||
## 2.8.2
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
|
||||
|
||||
## 2.8.1
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -887,14 +915,14 @@
|
||||
|
||||
## 2.5.0
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
|
||||
|
||||
## 2.4.3
|
||||
|
||||
### @navikt/ds-css
|
||||
@@ -903,14 +931,14 @@
|
||||
|
||||
## 2.4.2
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
|
||||
|
||||
## 2.4.1
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -941,6 +969,12 @@
|
||||
|
||||
## 2.2.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
|
||||
|
||||
- Button: `Neutral`-variant.
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
|
||||
@@ -953,12 +987,6 @@
|
||||
|
||||
- Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
|
||||
|
||||
- Button: `Neutral`-variant.
|
||||
|
||||
## 2.1.7
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1073,14 +1101,6 @@
|
||||
|
||||
## 2.0.0
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fonter blir bruk i all typografi blir nå lastet fra CDN
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Fontlasting: Fonter lastes nå fra NAV-CDN
|
||||
@@ -1091,6 +1111,14 @@
|
||||
|
||||
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fonter blir bruk i all typografi blir nå lastet fra CDN
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
|
||||
|
||||
## 1.5.10
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1135,16 +1163,16 @@
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
|
||||
|
||||
- Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
|
||||
|
||||
## 1.4.4
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1171,6 +1199,10 @@
|
||||
|
||||
## 1.3.39
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Fikset bruk av `:watch` for diverse parsere (less, parcel)
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- useId-bug fikset ved bruk i både react 17 og 18
|
||||
@@ -1193,10 +1225,6 @@
|
||||
|
||||
- Stepper: `interactive` og `completed`-props for wizard-løsninger
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Fikset bruk av `:watch` for diverse parsere (less, parcel)
|
||||
|
||||
## 1.3.24
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
AZURE_APP_CLIENT_ID=notfound
|
||||
AZURE_OPENID_CONFIG_TOKEN_ENDPOINT=https://fakedings.dev-gcp.nais.io/fake/aad?NAVIdent=A123456&aud=testbruker-aksel" >> website/.env
|
||||
AZURE_OPENID_CONFIG_TOKEN_ENDPOINT=https://fakedings.intern.dev.nav.no/fake/aad?NAVIdent=A123456&aud=testbruker-aksel" >> website/.env
|
||||
AZURE_APP_CLIENT_SECRET=secret
|
||||
AZURE_OPENID_CONFIG_ISSUER=https://fakedings.dev-gcp.nais.io/fake
|
||||
AZURE_OPENID_CONFIG_JWKS_URI=https://fakedings.dev-gcp.nais.io/fake/jwks
|
||||
AZURE_APP_JWK=https://fakedings.dev-gcp.nais.io/fake/jwk
|
||||
AZURE_OPENID_CONFIG_ISSUER=https://fakedings.intern.dev.nav.no/fake
|
||||
AZURE_OPENID_CONFIG_JWKS_URI=https://fakedings.intern.dev.nav.no/fake/jwks
|
||||
AZURE_APP_JWK=https://fakedings.intern.dev.nav.no/fake/jwk
|
||||
@@ -15,11 +15,11 @@
|
||||
"website"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^5.4.0",
|
||||
"@navikt/ds-css": "^5.4.0",
|
||||
"@navikt/ds-react": "^5.4.0",
|
||||
"@navikt/ds-tailwind": "^5.4.0",
|
||||
"@navikt/ds-tokens": "^5.4.0"
|
||||
"@navikt/aksel-icons": "^5.5.0",
|
||||
"@navikt/ds-css": "^5.5.0",
|
||||
"@navikt/ds-react": "^5.5.0",
|
||||
"@navikt/ds-tailwind": "^5.5.0",
|
||||
"@navikt/ds-tokens": "^5.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.2.3"
|
||||
|
||||
@@ -22,10 +22,10 @@ const config: StorybookConfig = {
|
||||
const exampleIndexer = async (fileName: string, opts) => {
|
||||
let code = readFileSync(fileName, "utf-8").toString();
|
||||
|
||||
code = code
|
||||
.split("\n")
|
||||
.filter((line) => !line.includes("withDsExample"))
|
||||
.join("\n");
|
||||
code = code.replace(
|
||||
/^\s*export default withDsExample\(Example[\s\S]*?;\s*/gm,
|
||||
""
|
||||
);
|
||||
|
||||
code = code.replace("export const args =", "const args =");
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
"showdown": "^2.1.0",
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"ts-jest": "^29.0.0",
|
||||
"ts-node": "10.9.0",
|
||||
"typescript": "^4.8.0"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6"
|
||||
}
|
||||
}
|
||||
@@ -25,7 +25,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -20,7 +20,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -26,7 +26,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -22,7 +22,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -5,7 +5,7 @@ const Example = () => {
|
||||
return <BodyLong as="span">Dette er nå en span!</BodyLong>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -26,7 +26,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -17,7 +17,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -13,7 +13,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -17,7 +17,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -24,7 +24,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -19,7 +19,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -25,7 +25,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -21,7 +21,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -5,7 +5,7 @@ const Example = () => {
|
||||
return <BodyShort as="span">Dette er nå en span!</BodyShort>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -25,7 +25,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -12,7 +12,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -24,7 +24,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -19,7 +19,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -21,7 +21,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -5,7 +5,7 @@ const Example = () => {
|
||||
return <Detail as="span">Dette er nå en span!</Detail>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -12,7 +12,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -7,7 +7,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -9,7 +9,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -20,5 +20,4 @@ export const Demo = {
|
||||
|
||||
export const args = {
|
||||
index: 0,
|
||||
desc: "Hvis 'poster'-propen ikke er satt, brukes poster-varianten automatisk på mobil (<480px).",
|
||||
};
|
||||
@@ -30,7 +30,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -23,7 +23,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -51,7 +51,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -9,7 +9,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -16,7 +16,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example);
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -20,7 +20,7 @@ const Example = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -8,7 +8,7 @@ const Example = () => {
|
||||
return <Label>{lorem}</Label>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
@@ -5,7 +5,7 @@ const Example = () => {
|
||||
return <Label as="span">Dette er nå en span!</Label>;
|
||||
};
|
||||
|
||||
export default withDsExample(Example, { variant: "static" });
|
||||
export default withDsExample(Example, { variant: "full" });
|
||||
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
|
||||
Loaded 100 of 126 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user