feat: Allow overriding onClick of ProgressStepper on child Steps (#2976)

* feat: forward props to ProgressStepper Step

In this way, it is possible to also set onClick to specific steps
and not only to the global component.

* feat: add example of cliackble steps with additional logic

* chore: update progress-stepper deps to alpha.3

* test: renders only a set of steps as clickable

* chore: bump package version from alpha pre-release

---------

Co-authored-by: Rémy Lenoir <remy.lenoir@contentful.com>

packages/components/progress-stepper/README.mdx

@@ -82,6 +82,14 @@ Example of the ProgressStepper with clickable steps.
 
 ```
 
+### Only previous steps clickable Example
+
+Example of the ProgressStepper with only previous steps clickable.
+
+```jsx file=./examples/ProgressStepperOnlyPreviousStepsClickableExample.tsx
+
+```
+
 ### Horizontal Label Width Limitation
 
 When the ProgressStepper renders in the horizontal orientation with labels, the component will have extra width on the sides of the first and last steps.

packages/components/progress-stepper/examples/ProgressStepperClickableExample.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ProgressStepper } from '@contentful/f36-progress-stepper';
 
-export default function ProgressStepperHorizontalExample() {
+export default function ProgressStepperClickableExample() {
   const [activeStep, setActiveStep] = useState(2);
 
   const handleStepClick = (stepNumber) => {

packages/components/progress-stepper/examples/ProgressStepperOnlyPreviousStepsClickableExample.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { ProgressStepper } from '@contentful/f36-progress-stepper';
+
+export default function ProgressStepperOnlyPreviousStepsClickableExample() {
+  const [activeStep, setActiveStep] = useState(2);
+
+  const handleStepClick = (stepNumber) => {
+    setActiveStep(stepNumber);
+  };
+
+  const steps = [
+    <ProgressStepper.Step state="complete" key="step-0" />,
+    <ProgressStepper.Step state="complete" key="step-1" />,
+    <ProgressStepper.Step state="active" key="step-2" />,
+    <ProgressStepper.Step key="step-3" />,
+    <ProgressStepper.Step key="step-4" />,
+  ];
+
+  const getStepState = (stepNumber) => {
+    if (stepNumber < activeStep) {
+      return 'complete';
+    } else if (stepNumber === activeStep) {
+      return 'active';
+    } else {
+      return 'incomplete';
+    }
+  };
+
+  const getSteps = () => {
+    return steps.map((step, index) => {
+      const onClickStep =
+        activeStep > index
+          ? (stepIndex) => handleStepClick(stepIndex)
+          : undefined;
+
+      return React.cloneElement(step, {
+        state: getStepState(index),
+        onClick: onClickStep,
+      });
+    });
+  };
+
+  return (
+    <ProgressStepper
+      activeStep={activeStep}
+      ariaLabel="Clickable progress stepper"
+    >
+      {getSteps()}
+    </ProgressStepper>
+  );
+}

packages/components/progress-stepper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-progress-stepper",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "description": "Forma 36: ProgressStepper component",
   "scripts": {
     "build": "tsup"

packages/components/progress-stepper/src/CompoundProgressStepper.test.tsx

@@ -101,4 +101,18 @@ describe('CompoundProgressStepper', function () {
 
     expect(links).toHaveLength(3);
   });
+
+  it('renders only a set of steps as clickable', () => {
+    render(
+      <ProgressStepper ariaLabel="Clickable progress stepper" activeStep={1}>
+        <ProgressStepper.Step state="complete" onClick={() => {}} />
+        <ProgressStepper.Step state="error" />
+        <ProgressStepper.Step state="warning" />
+      </ProgressStepper>,
+    );
+
+    const links = screen.queryAllByRole('button');
+
+    expect(links).toHaveLength(1);
+  });
 });

packages/components/progress-stepper/src/ProgressStepper.tsx

@@ -60,6 +60,7 @@ function _ProgressStepper(
         key: `steps-rendered-${index}`,
         stepNumber: index,
         onClick,
+        ...(child as React.ReactElement).props,
       });
       return stepChild;
     });

packages/website/components/Playground/SandpackRenderer.tsx

@@ -98,7 +98,7 @@ export function SandpackRenderer({
           '@contentful/f36-layout': '^4.0.0-alpha.0', // Remove when added to f36-components
           '@contentful/f36-multiselect': '^4.0.0', // Remove when added to f36-components
           '@contentful/f36-navlist': '^4.1.0-alpha.0', // Remove when added to f36-components
-          '@contentful/f36-progress-stepper': '^4.0.0-alpha.2', // Remove when added to f36-components
+          '@contentful/f36-progress-stepper': '^4.0.0-alpha.4', // Remove when added to f36-components
           '@contentful/f36-tokens': '^4.0.0',
           '@contentful/f36-icons': '^4.0.0',
           '@contentful/f36-core': '^4.0.0',

packages/website/package.json

@@ -21,7 +21,7 @@
     "@contentful/f36-layout": "^4.0.0-alpha.0",
     "@contentful/f36-multiselect": "^4.25.0",
     "@contentful/f36-navlist": "4.1.0-alpha.2",
-    "@contentful/f36-progress-stepper": "4.0.0-alpha.2",
+    "@contentful/f36-progress-stepper": "4.0.0-alpha.4",
     "@contentful/f36-tokens": "^4.2.0",
     "@contentful/f36-utils": "^4.24.3",
     "@contentful/rich-text-react-renderer": "^16.0.0",