feat: support hiding content and jumping ahead on stepper (#1279)

* feat(stepper): support hiding content and jumping ahead

* refactor(stepper): align stories/tests and substep navigation

* test(stepper-provider): complete coverage

* fix: linting

* fix(stepper): make story variants respect args

Author: Rotshrek

src/molecules/Stepper/Step/Step.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { FC, KeyboardEvent, useMemo } from 'react';
 
 import { Typography } from '@equinor/eds-core-react';
 import { TypographyVariants } from '@equinor/eds-core-react/dist/types/components/Typography/Typography.tokens';
@@ -43,44 +43,70 @@ interface StepProps {
   index: number;
   onlyShowCurrentStepLabel?: boolean;
   children?: string;
+  allowJumpingAhead?: boolean;
 }
 
 export const Step: FC<StepProps> = ({
   index,
   onlyShowCurrentStepLabel = false,
   children,
+  allowJumpingAhead = false,
 }) => {
   const { currentStep, setCurrentStep, isStepAtIndexDisabled } = useStepper();
 
   const isDisabled = isStepAtIndexDisabled(index);
 
   const textVariant = useMemo((): TypographyVariants => {
     if (index < currentStep) return 'body_short';
+    if (allowJumpingAhead && index > currentStep) return 'body_short_bold';
     return 'body_short_bold';
-  }, [currentStep, index]);
+  }, [currentStep, index, allowJumpingAhead]);
 
   const textColor = useMemo((): string | undefined => {
-    if (index > currentStep || isDisabled)
+    if (isDisabled) return colors.interactive.disabled__text.rgba;
+    if (index > currentStep && !allowJumpingAhead)
       return colors.interactive.disabled__text.rgba;
     return colors.text.static_icons__default.rgba;
-  }, [currentStep, index, isDisabled]);
+  }, [currentStep, index, isDisabled, allowJumpingAhead]);
+
+  const isClickable = useMemo((): boolean => {
+    if (isDisabled) return false;
+    if (index < currentStep) return true;
+    if (allowJumpingAhead && index > currentStep) return true;
+    return false;
+  }, [index, currentStep, isDisabled, allowJumpingAhead]);
 
   const handleOnClick = () => {
-    if (index < currentStep && !isDisabled) {
+    if (isClickable) {
+      setCurrentStep(index);
+    }
+  };
+
+  const handleOnKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!isClickable) return;
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
       setCurrentStep(index);
     }
   };
 
   return (
     <Container
       data-testid="step"
-      $clickable={index < currentStep}
+      $clickable={isClickable}
       onClick={handleOnClick}
+      onKeyDown={handleOnKeyDown}
       $disabled={isDisabled}
-      aria-disabled={isDisabled}
+      aria-disabled={!isClickable}
       role="button"
+      tabIndex={isClickable ? 0 : -1}
     >
-      <StepIcon index={index} disabled={isDisabled} />
+      <StepIcon
+        index={index}
+        disabled={isDisabled}
+        allowJumpingAhead={allowJumpingAhead}
+      />
       {(!onlyShowCurrentStepLabel || currentStep === index) && (
         <Typography variant={textVariant} color={textColor}>
           {children}

src/molecules/Stepper/Step/StepIcon.tsx

@@ -30,10 +30,12 @@ const IconWrapper = styled.span<IconWrapperProps>`
   > p {
     // Ensure text icons are not squished
     padding: 8px;
-    color: ${(props) =>
-      props.$filled
+    color: ${({ $filled, $outlined }) =>
+      $filled
         ? colors.text.static_icons__primary_white.rgba
-        : colors.interactive.disabled__text.rgba};
+        : $outlined
+          ? colors.interactive.primary__resting.rgba
+          : colors.interactive.disabled__text.rgba};
   }
   > svg {
     transform: scale(0.9);
@@ -43,15 +45,28 @@ const IconWrapper = styled.span<IconWrapperProps>`
 interface StepIconProps {
   index: number;
   disabled?: boolean;
+  allowJumpingAhead?: boolean;
 }
 
-export const StepIcon: FC<StepIconProps> = ({ index, disabled }) => {
+export const StepIcon: FC<StepIconProps> = ({
+  index,
+  disabled,
+  allowJumpingAhead,
+}) => {
   const { currentStep } = useStepper();
 
   if (disabled) {
     return <Icon data={lock} color={colors.interactive.disabled__text.rgba} />;
   }
 
+  if (index > currentStep && allowJumpingAhead) {
+    return (
+      <IconWrapper $outlined>
+        <Typography variant="caption">{index + 1}</Typography>
+      </IconWrapper>
+    );
+  }
+
   if (index >= currentStep) {
     return (
       <IconWrapper $filled={index === currentStep}>

src/molecules/Stepper/Stepper.jsdom.test.tsx

@@ -20,6 +20,9 @@ function fakeSteps(): StepperProviderProps['steps'] {
     {
       label: faker.string.uuid(),
     },
+    {
+      label: faker.string.uuid(),
+    },
   ];
   let i = 0;
   const stepAmount = faker.number.int({ min: 0, max: 30 });
@@ -98,3 +101,30 @@ test('maxWidth works as expected', async () => {
     `max-width: ${maxWidth}`
   );
 });
+
+test('Future step icon is outlined and primary when allowJumpingAhead is true', async () => {
+  const steps: StepperProviderProps['steps'] = [
+    { label: 'Step 1' },
+    { label: 'Step 2' },
+    { label: 'Step 3' },
+  ];
+
+  await renderWithRouter(
+    <StepperProvider steps={steps}>
+      <Stepper allowJumpingAhead />
+    </StepperProvider>,
+    {
+      routes: ['/'],
+      initialEntries: ['/'],
+    }
+  );
+
+  const secondStepButton = screen
+    .getByText('Step 2')
+    .closest('[data-testid="step"]');
+  const secondStepNumber = secondStepButton?.querySelector('p');
+
+  expect(secondStepNumber).toHaveStyle(
+    `color: ${colors.interactive.primary__resting.rgba}`
+  );
+});