feat: Stepped Process: add the component from v4

[klediouron]

Stepbar is being ported into v5 as "stepped process" component.

Everything has been adapted according to this change

---

Closes #524

---

• Should match specs (eg. either the Web UI Kit or any pattern from the WAI — or both…)
• Docs added:
  • including the "Sass" part using scss-docs shortcode
  • in Design Guidelines probably
  • in Cheatsheet / Cheatsheet RTL examples
• Check (and fix) RTL version
  • Beware of clip-path in RTL, which would need some attention—and maybe the loop setting z-index too, might even be dropped?
• Run linters
• Run compilers
• Run tests
• Cross-browser test:
  • Firefox ESR
  • Latest Edge, Chrome, Firefox, Safari
  • iOS Safari
  • Chrome & Firefox on Android
• Clean up the branch using rebase -i
• Commited with feat(…): … message
• Mention it
  • in Ship List
  • in Migration Guide (if back-from-v4): renamed variables, changes in markup requirement, etc.

---

• Preview: https://deploy-preview-636--boosted.netlify.app/docs/5.0/components/stepped-process/
• X-ref v4: https://boosted.orange.com/docs/4.6/components/stepbar/

[ffoodd]

New side topic here, now that we merged main recently: add a "Sass# part in the docs, using the scss-docs shortcode to display at least variables.

[ffoodd]

Design

From my first understanding, the design published in Zeplin uses a smaller font-size (my guess: .875rem) and probably smaller vertical padding too, since the bar is only 30px tall on Zeplin and 38px in Boosted.

Improvements

Also the intermediary display (between sm and lg), the last item does not have enough space. Here's my recommendation:

• drop the &:last-child part L80 that sets padding-right
• drop max-width on ..stepped-process-item (L69, L96, L118)
• add an exception for the .active item between sm and lg breakpoints:

@include media-breakpoint-between('sm', 'lg') {
  .stepped-process-item.active {
    flex: $stepped-process-max-items - 1;
  }
}

This should output flex: 4 with the current settings — and we only rely on flexbox. 🎉

Docs

• In the guidelines, please tend to re-use UI Kit / Zeplin's wording for your examples, in order to match as much as possible the UI Kit. So your items should be "Sign in", "Review", Delivery", "*Payment", "Place order".
• In cheatsheets, please stick to alphabetical order (in english) to add a new component's link in the sidebar: your "Stepped process" link is a bit lost for now :D