Compare commits

..
Author SHA1 Message Date
github-actions[bot]andgithub-actions[bot] 2d4cb67643 Version Packages (#2403)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-10-20 10:52:13 +02:00
Ken f5533766c8 📝 Oppdatert link og linkpanel med nextjs eksempler 2023-10-20 10:28:24 +02:00
Ken 3d1b0ac204 🎨 Forms-border har nå outside shadow for background-bleed (#2388) 2023-10-20 09:21:42 +02:00
Ken a1678d3b19 🐛 Loader hadde legacyRef som ref-prop (#2391)
* 🐛 Loader hadde legacyRef som ref-prop

* Update .changeset/heavy-shoes-pay.md
2023-10-20 09:17:39 +02:00
25 changed files with 156 additions and 60 deletions

No files matched your search

+2
View File
@@ -1,5 +1,7 @@
# @navikt/aksel-icons
## 5.7.5
## 5.7.4
## 5.7.3
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/aksel-icons",
"version": "5.7.4",
"version": "5.7.5",
"author": "Aksel | NAV",
"homepage": "https://aksel.nav.no/ikoner",
"repository": {
+2
View File
@@ -1,5 +1,7 @@
# @navikt/aksel-stylelint
## 5.7.5
## 5.7.4
## 5.7.3
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/aksel-stylelint",
"version": "5.7.4",
"version": "5.7.5",
"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.7.4",
"@navikt/ds-tokens": "^5.7.4",
"@navikt/ds-css": "^5.7.5",
"@navikt/ds-tokens": "^5.7.5",
"@types/jest": "^29.0.0",
"concurrently": "7.2.1",
"copyfiles": "2.4.1",
+7
View File
@@ -1,5 +1,12 @@
# @navikt/aksel
## 5.7.5
### Patch Changes
- Updated dependencies [[`3d1b0ac20`](https://github.com/navikt/aksel/commit/3d1b0ac2041bbc289536fa5a0dc65b2170dfc6fa)]:
- @navikt/ds-css@5.7.5
## 5.7.4
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/aksel",
"version": "5.7.4",
"version": "5.7.5",
"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.7.4",
"@navikt/ds-css": "5.7.5",
"axios": "1.3.6",
"chalk": "4.1.0",
"clipboardy": "^2.3.0",
+6
View File
@@ -1,5 +1,11 @@
# @navikt/ds-css
## 5.7.5
### Patch Changes
- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
## 5.7.4
## 5.7.3
+38 -33
View File
@@ -31,11 +31,13 @@
.navds-radio__label::before {
content: "";
background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
width: 1.5rem;
height: 1.5rem;
border-radius: var(--a-border-radius-medium);
border-radius: var(--a-border-radius-small);
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
width: calc(1.5rem - 0.25rem);
height: calc(1.5rem - 0.25rem);
margin-block: 2px;
margin-inline: 2px;
}
.navds-radio__label::before {
@@ -64,36 +66,37 @@
.navds-checkbox--small > .navds-checkbox__label::before,
.navds-radio--small > .navds-radio__label::before {
width: 1.25rem;
height: 1.25rem;
width: calc(1.25rem - 0.25rem);
height: calc(1.25rem - 0.25rem);
}
.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
.navds-radio__input:focus-visible + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
}
@supports not selector(:focus-visible) {
.navds-checkbox__input:focus + .navds-checkbox__label::before,
.navds-radio__input:focus + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
}
}
.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
}
@supports not selector(:focus-visible) {
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
.navds-radio__input:hover:focus + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
}
}
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
box-shadow: none;
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
}
@@ -114,7 +117,7 @@
}
.navds-checkbox__input:checked + .navds-checkbox__label::before {
box-shadow: none;
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
}
@@ -146,31 +149,33 @@
.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
}
@supports not selector(:focus-visible) {
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
}
}
.navds-radio__input:checked + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
}
.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
}
@supports not selector(:focus-visible) {
.navds-radio__input:checked:focus + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
}
}
@@ -182,13 +187,13 @@
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+ .navds-checkbox__label::before,
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
}
@supports not selector(:focus-visible) {
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
}
}
@@ -201,14 +206,14 @@
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}
.navds-checkbox--error
> .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
}
@supports not selector(:focus-visible) {
@@ -216,7 +221,7 @@
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
}
}
@@ -225,7 +230,7 @@
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}
.navds-checkbox--error
@@ -233,7 +238,7 @@
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
}
@supports not selector(:focus-visible) {
@@ -242,7 +247,7 @@
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
}
.navds-checkbox--error
@@ -250,7 +255,7 @@
+ .navds-checkbox__label::before,
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
}
}
@@ -290,7 +295,7 @@
.navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
.navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
background-color: var(--__ac-radio-checkbox-readonly-bg);
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
}
.navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -299,8 +304,8 @@
}
.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
background-color: var(--__ac-radio-checkbox-readonly-bg);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
}
.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -308,12 +313,12 @@
}
.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
background-color: var(--a-icon-subtle);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
}
.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
background-color: var(--__ac-radio-checkbox-readonly-bg);
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css",
"version": "5.7.4",
"version": "5.7.5",
"description": "CSS for NAV Designsystem",
"author": "Aksel | NAV designsystem team",
"keywords": [
@@ -27,7 +27,7 @@
"css:get-version": "node config/get-version.js"
},
"devDependencies": {
"@navikt/ds-tokens": "^5.7.4",
"@navikt/ds-tokens": "^5.7.5",
"cssnano": "6.0.0",
"fast-glob": "3.2.11",
"lodash": "4.17.21",
+10
View File
@@ -1,5 +1,15 @@
# @navikt/ds-react
## 5.7.5
### Patch Changes
- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
- Updated dependencies []:
- @navikt/ds-tokens@5.7.5
- @navikt/aksel-icons@5.7.5
## 5.7.4
### Patch Changes
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react",
"version": "5.7.4",
"version": "5.7.5",
"description": "Aksel react-components for NAV designsystem",
"author": "Aksel | NAV designsystem team",
"license": "MIT",
@@ -38,8 +38,8 @@
},
"dependencies": {
"@floating-ui/react": "0.25.4",
"@navikt/aksel-icons": "^5.7.4",
"@navikt/ds-tokens": "^5.7.4",
"@navikt/aksel-icons": "^5.7.5",
"@navikt/ds-tokens": "^5.7.5",
"@radix-ui/react-tabs": "1.0.0",
"@radix-ui/react-toggle-group": "1.0.0",
"clsx": "^1.2.1",
+7 -1
View File
@@ -2,7 +2,7 @@ import cl from "clsx";
import React, { forwardRef, SVGProps } from "react";
import { omit, useId } from "../util";
export interface LoaderProps extends SVGProps<SVGSVGElement> {
export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
/**
* Changes Loader width/height
* 88px | 64px | 40px | 32px | 24px | 20px | 16px
@@ -31,6 +31,12 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
* @default "neutral"
*/
variant?: "neutral" | "interaction" | "inverted";
/**
* Allows getting a ref to the component instance.
* Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
* @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
*/
ref?: React.Ref<SVGSVGElement>;
}
/* Workaround for @types/react v17/v18 feil */
@@ -1,6 +1,6 @@
import React from "react";
import { Loader } from "..";
import { Meta } from "@storybook/react";
import React from "react";
import { Loader, LoaderProps } from "..";
export default {
title: "ds-react/Loader",
component: Loader,
@@ -29,7 +29,7 @@ export default {
} as Meta;
export const Default = {
render: (props: any) => {
render: (props: LoaderProps) => {
return <Loader {...props} />;
},
+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-tailwind
## 5.7.5
## 5.7.4
## 5.7.3
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tailwind",
"version": "5.7.4",
"version": "5.7.5",
"description": "Tailwind config based on @navikt/ds-tokens",
"author": "Aksel | NAV designsystem team",
"keywords": [
@@ -22,7 +22,7 @@
"directory": "@navikt/core/tailwind"
},
"devDependencies": {
"@navikt/ds-tokens": "^5.7.4",
"@navikt/ds-tokens": "^5.7.5",
"@types/jest": "^29.0.0",
"color": "4.2.3",
"jest": "^29.0.0",
+2
View File
@@ -1,5 +1,7 @@
# @navikt/ds-tokens
## 5.7.5
## 5.7.4
## 5.7.3
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-tokens",
"version": "5.7.4",
"version": "5.7.5",
"description": "Design-tokens for NAV designsystem",
"author": "Aksel | NAV designsystem team",
"keywords": [
+10
View File
@@ -1,5 +1,15 @@
# Changelog
## 5.7.5
### @navikt/ds-css
- Checkbox, Radio: Transparent-border fungerer nå bedre på mørkere bakgrunner ([#2388](https://github.com/navikt/aksel/pull/2388))
### @navikt/ds-react
- Loader: Har nå riktig `ref`-type. ([#2391](https://github.com/navikt/aksel/pull/2391))
## 5.7.4
### @navikt/ds-react
+5 -5
View File
@@ -15,11 +15,11 @@
"website"
],
"dependencies": {
"@navikt/aksel-icons": "^5.7.4",
"@navikt/ds-css": "^5.7.4",
"@navikt/ds-react": "^5.7.4",
"@navikt/ds-tailwind": "^5.7.4",
"@navikt/ds-tokens": "^5.7.4"
"@navikt/aksel-icons": "^5.7.5",
"@navikt/ds-css": "^5.7.5",
"@navikt/ds-react": "^5.7.5",
"@navikt/ds-tailwind": "^5.7.5",
"@navikt/ds-tokens": "^5.7.5"
},
"devDependencies": {
"prettier-plugin-tailwindcss": "^0.2.3"
@@ -23,5 +23,5 @@ export const Demo = {
};
export const args = {
index: 1,
index: 3,
};
@@ -26,5 +26,5 @@ export const Demo = {
};
export const args = {
index: 0,
index: 1,
};
@@ -0,0 +1,22 @@
import { Link } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";
import NextLink from "next/link";
const Example = () => {
return (
<Link href="#" as={NextLink}>
Lenke til ny side
</Link>
);
};
export default withDsExample(Example);
/* Storybook story */
export const Demo = {
render: Example,
};
export const args = {
index: 5,
};
@@ -21,5 +21,5 @@ export const Demo = {
};
export const args = {
index: 0,
index: 4,
};
@@ -25,5 +25,5 @@ export const Demo = {
};
export const args = {
index: 0,
index: 2,
};
@@ -0,0 +1,22 @@
import { LinkPanel } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";
import NextLink from "next/link";
const Example = () => {
return (
<LinkPanel href="#" border as={NextLink}>
<LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
</LinkPanel>
);
};
export default withDsExample(Example);
/* Storybook story */
export const Demo = {
render: Example,
};
export const args = {
index: 3,
};