Introduce Stepper component

[kuasha420]

Feature Description

A new Stepper component should be introduced to the codebase as part of the work for Ad Blocker Detection, based on the design.

While there's no official mention of the component in V2/V3 of Material design, there is a V1 doc available and prior arts available in MUI or elsewhere.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new component should be introduced: Stepper, as a generic/UI component that can be given "steps".
• The component should allow the developer to introduce an arbitrary number of "steps" with headings, contents, and a "next action"/CTA button as shown in the design.
  • It isn't currently a requirement to allow the stepper to go backward.
  • The API can be kept somewhat flexible for now, it is acceptable to require each step to be largely rendered by the developer rather than having dedicated "Heading", "contents", etc. props
• The Stepper should follow the design/style in the Figma mocks. It should be responsive and work on mobile, or can use a dedicated style for mobile if available.

Implementation Brief

• Create the Stepper component. This should accept one or more Step components as its children.
  • It should have an activeStep prop, which is the zero-based index of the Step component to display.
  • This Stepper container component should render the following:
    • The step numbers with the connecting line between them as per the design.
    • Its Step child components, passing the isActiveStep prop to them with the appropriate value. In order to pass this prop, it will likely be be necessary to clone the child element(s) using cloneElement(), iterating over them with Children via Children.map().
  • Note the individual CTAs to switch from one step to the next will be rendered in the content of the Step components. This will keep things more flexible, although we could always create an additional wrapper around Stepper which provides CTAs as well. We can make that determination when it comes to using Stepper in a subsequent issue.
• Create the Step component which takes the individual step content as its children.
  • It should have two props: title and isActiveStep.
    • title: Title of the step.
    • isActiveStep: When true, Step should render both the title and children. When false, only the title should be rendered. This prop will not usually be specified by the calling code, but rather provided by Stepper.
• Styling - the Stepper and Step components should be styled as per the design. Additionally, the current step should fade in/out when it changes (see the AdSense Connect CTA for an example of content fading in/out, although a simpler transition may be suitable here). It should be ensured that it displays correctly at all viewports.

File locations:

• Stepper: assets/js/components/Stepper/index.js
• Step: assets/js/components/Stepper/Step.js
• Styles: assets/sass/components/global/_googlesitekit-stepper.scss

// Example usage:

<Stepper activeStep={ 0 }>
  <Step title="First Step"> // `isActiveStep` prop to be added by `Stepper`.
    { firstStepContent }
  </Step>
  <Step title="Second Step">
    { secondStepContent }
  </Step>
</Stepper>

Test Coverage

• Add test coverage for combined usage of Stepper and Step using React Testing Library.
• Add a Storybook story or stories making use of the new components.
• Include VRT scenarios for the new stories.

QA Brief

• This is a standalone component that is only testable in Storybook.
• Verify the Stepper looks and behaves as expected via the stories under Components > Stepper.
• Note that, while the AC mentions that it should be responsive and work on mobile, there's no clear requirement for the design to change at mobile viewports so it simply remains the same at all viewports.

Changelog entry

• Add new Stepper component.

[tofumatt]

IB ✅

I like the API here 👍🏻

[mohitwp]

QA Update ❌

@techanvil

• Tested Storybook.
• I've noticed that in Figma design inner paragraph font color is different from implementation. In Figma color is #6C726E and implemented color is #161B18.

[techanvil]

Hi @mohitwp, thanks for raising this. In hindsight it should have been made more clear, but this issue is only about creating the generic component, with the titles, and the left-hand progress indicator to be styled as per Figma, and the content to be displayed for the active step. However the actual content itself will be supplied by whatever component is making use of the Stepper in future, so it doesn't need to follow the Figma styling.

[mohitwp]

QA Update ✅

Thank you @techanvil !

• Tested Storybook.
• Verified a new component should be introduced: Stepper, as a generic/UI component that can be given "steps".
• Verified The Stepper follow the design/style in the Figma mocks. It is responsive and work on mobile.