From dbf04e2baeaf491003434d0ce6db219c39baffef Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 19 Jul 2023 18:17:22 +0200 Subject: [PATCH] :bug: Fikset stepper-bug --- .changeset/calm-foxes-watch.md | 6 ++++ @navikt/core/css/stepper.css | 10 ++++++ @navikt/core/react/src/stepper/Stepper.tsx | 10 +++++- .../react/src/stepper/stepper.stories.tsx | 2 +- yarn.lock | 36 +++++++++---------- 5 files changed, 44 insertions(+), 20 deletions(-) create mode 100644 .changeset/calm-foxes-watch.md diff --git a/.changeset/calm-foxes-watch.md b/.changeset/calm-foxes-watch.md new file mode 100644 index 00000000000..3562217a29a --- /dev/null +++ b/.changeset/calm-foxes-watch.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-css": patch +"@navikt/ds-react": patch +--- + +Stepper: Fikset `hotizontal`-bug når step var `completed` diff --git a/@navikt/core/css/stepper.css b/@navikt/core/css/stepper.css index 7f9a85605fb..0fbd4daab23 100644 --- a/@navikt/core/css/stepper.css +++ b/@navikt/core/css/stepper.css @@ -40,6 +40,10 @@ background-color: var(--ac-stepper-line-completed, var(--a-border-selected)); } +.navds-stepper__item--behind.navds-stepper__item--completed + .navds-stepper__item > .navds-stepper__line--1 { + background-color: var(--ac-stepper-line-completed, var(--a-border-selected)); +} + .navds-stepper__line--1 { grid-row: line-1; display: none; @@ -213,6 +217,12 @@ button.navds-stepper__step { background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong)); } +.navds-stepper__item--non-interactive.navds-stepper__item--behind.navds-stepper__item--completed + + .navds-stepper__item + > .navds-stepper__line--1 { + background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong)); +} + :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle { background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted)); border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted)); diff --git a/@navikt/core/react/src/stepper/Stepper.tsx b/@navikt/core/react/src/stepper/Stepper.tsx index 9e862ba060b..ec169a7b3af 100644 --- a/@navikt/core/react/src/stepper/Stepper.tsx +++ b/@navikt/core/react/src/stepper/Stepper.tsx @@ -114,7 +114,15 @@ export const Stepper: StepperComponent = forwardRef< {React.Children.map(children, (step, index) => { return (
  • index, + "navds-stepper__item--completed": + React.isValidElement(step) && + step?.props?.completed, + "navds-stepper__item--non-interactive": + React.isValidElement(step) && + !(step?.props?.interactive ?? interactive), + })} key={index + (children?.toString?.() ?? "")} > diff --git a/@navikt/core/react/src/stepper/stepper.stories.tsx b/@navikt/core/react/src/stepper/stepper.stories.tsx index 49ecb99f104..3de2c955338 100644 --- a/@navikt/core/react/src/stepper/stepper.stories.tsx +++ b/@navikt/core/react/src/stepper/stepper.stories.tsx @@ -11,8 +11,8 @@ export default { orientation: { control: { type: "radio", - options: ["horizontal", "vertical"], }, + options: ["horizontal", "vertical"], }, activeStep: { control: { diff --git a/yarn.lock b/yarn.lock index 78426ee02c6..b82ecea242f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3796,7 +3796,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^4.6.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^4.7.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3823,8 +3823,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^4.6.1 - "@navikt/ds-tokens": ^4.6.1 + "@navikt/ds-css": ^4.7.0 + "@navikt/ds-tokens": ^4.7.0 "@types/jest": ^29.0.0 concurrently: 7.2.1 copyfiles: 2.4.1 @@ -3841,7 +3841,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 4.6.1 + "@navikt/ds-css": 4.7.0 "@types/inquirer": ^9.0.3 "@types/jest": ^29.0.0 axios: 1.3.6 @@ -3865,11 +3865,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@4.6.1, @navikt/ds-css@^4.6.1, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@4.7.0, @navikt/ds-css@^4.7.0, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^4.6.1 + "@navikt/ds-tokens": ^4.7.0 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3882,12 +3882,12 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@4.6.1, @navikt/ds-react@^4.6.1, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@4.7.0, @navikt/ds-react@^4.7.0, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.24.1 - "@navikt/aksel-icons": ^4.6.1 + "@navikt/aksel-icons": ^4.7.0 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3923,11 +3923,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^4.6.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^4.7.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^4.6.1 + "@navikt/ds-tokens": ^4.7.0 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -3938,7 +3938,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^4.6.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^4.7.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -7926,11 +7926,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^4.6.1 - "@navikt/ds-css": ^4.6.1 - "@navikt/ds-react": ^4.6.1 - "@navikt/ds-tailwind": ^4.6.1 - "@navikt/ds-tokens": ^4.6.1 + "@navikt/aksel-icons": ^4.7.0 + "@navikt/ds-css": ^4.7.0 + "@navikt/ds-react": ^4.7.0 + "@navikt/ds-tailwind": ^4.7.0 + "@navikt/ds-tokens": ^4.7.0 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft @@ -22201,8 +22201,8 @@ __metadata: version: 0.0.0-use.local resolution: "shadow-dom@workspace:examples/shadow-dom" dependencies: - "@navikt/ds-css": 4.6.1 - "@navikt/ds-react": 4.6.1 + "@navikt/ds-css": 4.7.0 + "@navikt/ds-react": 4.7.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 "@vitejs/plugin-react": ^2.1.0