Merge dbf04e2 into 1d43710

navikt · Jul 19, 2023 · 4db97ee · 4db97ee
2 parents 1d43710 + dbf04e2
commit 4db97ee
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 20 deletions.
diff --git a/.changeset/calm-foxes-watch.md 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
@@ -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
@@ -114,7 +114,15 @@ export const Stepper: StepperComponent = forwardRef<
           {React.Children.map(children, (step, index) => {
             return (
               <li
-                className={cl("navds-stepper__item")}
+                className={cl("navds-stepper__item", {
+                  "navds-stepper__item--behind": activeStep > index,
+                  "navds-stepper__item--completed":
+                    React.isValidElement<StepperStepProps>(step) &&
+                    step?.props?.completed,
+                  "navds-stepper__item--non-interactive":
+                    React.isValidElement<StepperStepProps>(step) &&
+                    !(step?.props?.interactive ?? interactive),
+                })}
                 key={index + (children?.toString?.() ?? "")}
               >
                 <span className="navds-stepper__line navds-stepper__line--1" />

diff --git 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
@@ -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