[FEATURE] Stepper med interactive, completed-option (#1626)

Co-authored-by: Martin Berglund <[email protected]>

Author: KenAJoh

@navikt/core/css/stepper.css

@@ -36,6 +36,11 @@
   grid-column: 1;
 }
 
+.navds-stepper__step--behind.navds-stepper__step--completed
+  + .navds-stepper__line {
+  background-color: var(--navds-global-color-blue-500);
+}
+
 .navds-stepper__line--1 {
   grid-row: line-1;
   display: none;
@@ -55,7 +60,6 @@
   display: grid;
   grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
   gap: var(--navds-spacing-2);
-  align-items: baseline;
   justify-content: flex-start;
   text-decoration: none;
   cursor: pointer;
@@ -73,6 +77,11 @@ button.navds-stepper__step {
   text-align: inherit;
 }
 
+.navds-stepper__step--non-interactive {
+  color: var(--navds-global-color-gray-600);
+  cursor: default;
+}
+
 :where(.navds-stepper__step):focus {
   outline: none;
   box-shadow: var(--navds-shadow-focus);
@@ -91,10 +100,17 @@ button.navds-stepper__step {
   line-height: 1;
 }
 
+.navds-stepper__circle--success {
+  border: none;
+  background: none;
+  font-size: 28px;
+}
+
 .navds-stepper__content {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
+  padding-top: 0.035rem;
 }
 
 /* Horizontal */
@@ -161,11 +177,15 @@ button.navds-stepper__step {
   color: var(--navds-semantic-color-interaction-primary-selected);
 }
 
-:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
-  .navds-stepper__content {
+:where(.navds-stepper__step:hover) .navds-stepper__content {
   text-decoration: underline;
 }
 
+:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover)
+  .navds-stepper__content {
+  text-decoration: none;
+}
+
 :where(.navds-stepper__step--active) .navds-stepper__circle {
   background-color: var(--navds-semantic-color-interaction-primary-selected);
   border-color: var(--navds-semantic-color-interaction-primary-selected);
@@ -178,3 +198,41 @@ button.navds-stepper__step {
     --navds-semantic-color-interaction-primary-hover-subtle
   );
 }
+
+/* Non-interactive */
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__content {
+  color: var(--navds-global-color-gray-900);
+}
+
+.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed
+  + .navds-stepper__line {
+  background-color: var(--navds-global-color-gray-600);
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__circle {
+  background-color: var(--navds-global-color-gray-900);
+  border-color: var(--navds-global-color-gray-900);
+  color: var(--navds-global-color-white);
+}
+
+:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
+  background-color: transparent;
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover)
+  .navds-stepper__circle {
+  background-color: var(--navds-global-color-gray-900);
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active)
+  .navds-stepper__circle {
+  background-color: inherit;
+  color: var(--navds-global-color-deepblue-500);
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle {
+  color: var(--navds-global-color-gray-900);
+}

@navikt/core/icons/svg/Success.svg

@@ -1,7 +1,8 @@
+import { SuccessFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { StepperContext } from "./Stepper";
 import { Label, OverridableComponent } from "..";
+import { StepperContext } from "./Stepper";
 
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -14,6 +15,16 @@ export interface StepperStepProps
    * @private
    */
   unsafe_index?: number;
+  /**
+   * Makes step-indicator a checkmark
+   * @default false
+   */
+  completed?: boolean;
+  /**
+   * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+   * @default true
+   */
+  interactive?: boolean;
 }
 
 export interface StepperStepType
@@ -24,7 +35,15 @@ export const StepComponent: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(
   (
-    { className, children, as: Component = "a", unsafe_index = 0, ...rest },
+    {
+      className,
+      children,
+      as: Component = "a",
+      unsafe_index = 0,
+      completed = false,
+      interactive,
+      ...rest
+    },
     ref
   ) => {
     const context = useContext(StepperContext);
@@ -34,26 +53,40 @@ export const StepComponent: OverridableComponent<
     }
     const { activeStep } = context;
 
+    const isInteractive = interactive ?? context?.interactive;
+
+    const Comp = isInteractive ? Component : "div";
+
     return (
-      <Component
+      <Comp
         {...rest}
         aria-current={activeStep === unsafe_index}
         ref={ref}
         className={cl("navds-stepper__step", className, {
           "navds-stepper__step--active": activeStep === unsafe_index,
+          "navds-stepper__step--behind": activeStep > unsafe_index,
+          "navds-stepper__step--non-interactive": !isInteractive,
+          "navds-stepper__step--completed": completed,
         })}
         onClick={(e) => {
-          context.onStepChange(unsafe_index + 1);
+          isInteractive && context.onStepChange(unsafe_index + 1);
           rest?.onClick?.(e);
         }}
       >
-        <Label className="navds-stepper__circle" as="span" aria-hidden="true">
-          {unsafe_index + 1}
-        </Label>
+        {completed ? (
+          <SuccessFilled
+            aria-hidden
+            className="navds-stepper__circle navds-stepper__circle--success"
+          />
+        ) : (
+          <Label className="navds-stepper__circle" as="span" aria-hidden="true">
+            {unsafe_index + 1}
+          </Label>
+        )}
         <Label as="span" className="navds-stepper__content">
           {children}
         </Label>
-      </Component>
+      </Comp>
     );
   }
 );

@navikt/core/react/src/stepper/Step.tsx

@@ -22,6 +22,11 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
    * @note Stepper index starts at 1, not 0
    */
   onStepChange?: (step: number) => void;
+  /**
+   * Makes stepper non-interactive if false
+   * @default true
+   */
+  interactive?: boolean;
 }
 
 interface StepperComponent
@@ -36,6 +41,7 @@ interface StepperContextProps {
   onStepChange: (step: number) => void;
   lastIndex: number;
   orientation: "horizontal" | "vertical";
+  interactive: boolean;
 }
 
 export const StepperContext = createContext<StepperContextProps | null>(null);
@@ -51,6 +57,7 @@ export const Stepper: StepperComponent = forwardRef<
       activeStep,
       orientation = "vertical",
       onStepChange = () => {},
+      interactive = true,
       ...rest
     },
     ref
@@ -72,6 +79,7 @@ export const Stepper: StepperComponent = forwardRef<
             onStepChange,
             lastIndex: React.Children.count(children),
             orientation,
+            interactive,
           }}
         >
           {React.Children.map(children, (step, index) => {