[BD-46] DRAFT: make steps clickable in Steper component

[PKulkoRaccoonGang]

Description

Make steps clickable after the user visits them, clicking should navigate the user to clicked step.

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

• [x] If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• [x] Does your change adhere to the documented style conventions?
• [x] Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• [x] Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• [x] Were your changes tested in the example app?
• [x] Is there adequate test coverage for your changes?
• [x] Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• [ ] Verify your changes were released to NPM at the expected version.
• [ ] If you'd like, share your contribution in #show-and-tell.
• [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[netlify[bot]]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	93d1d826d3f8c1f4902234dc30dd6e7c60fcb97b
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/63d8c31f2f51d10008fad0ba
😎 Deploy Preview	https://deploy-preview-1712--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov[bot]]

Codecov Report

Patch coverage: 100.00% and project coverage change: +0.04 :tada:

Comparison is base (f630e09) 90.77% compared to head (93d1d82) 90.81%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1712      +/-   ##
==========================================
+ Coverage   90.77%   90.81%   +0.04%     
==========================================
  Files         212      233      +21     
  Lines        3739     4095     +356     
  Branches      882      972      +90     
==========================================
+ Hits         3394     3719     +325     
- Misses        343      369      +26     
- Partials        2        7       +5     

Impacted Files	Coverage Δ
src/Stepper/StepperHeader.jsx	100.00% <ø> (ø)
src/Stepper/StepperStep.jsx	100.00% <ø> (ø)
src/Stepper/StepperContext.jsx	100.00% <100.00%> (ø)
src/Stepper/StepperHeaderStep.jsx	100.00% <100.00%> (ø)

... and 41 files with indirect coverage changes

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[adamstankiewicz]

Overall, this looks good! I like the simplicity of opting into to clickable header steps with a single prop. I did notice a possible bug, though. Steps to reproduce:

1. Go to the error state example, and add the handleStepClick prop.
2. Check the box and go to the second step.
3. Go back to the first step and uncheck the box.
4. Now, click the second header step. You can get to the second step without the validation of ensuring the checkbox is checked.
5. Go back to first step.
6. Click "Next" button with the checkbox still unchecked and note the error validation, but the second header step is still clickable.

@PKulkoRaccoonGang Bumping this bug from the previous PR review as the behavior between clicking "Next" and the next step's header title is different when it comes to handling a step with an error that is supposed to prevent navigating to the next step.

[PKulkoRaccoonGang]

@adamstankiewicz please review this pull request. I have added error handling and displayed this in an additional example on the documentation site. Thank you :)

[viktorrusakov]

@adamstankiewicz I've refactored out solution to add onClick handler for StepperStep component instead of StepperHeader component. I don't really see any other way to adequately handle error state 😞 . The downside is you have to provide onClick handler for every step separately, but I don't think it's too bad of a requirement. And you also get more control over click behaviour this way.

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

:tada: This PR is included in version 20.34.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[edx-semantic-release]

:tada: This PR is included in version 21.0.0-alpha.25 :tada:

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: