Local navigation: Add component

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Closes #890.

Description

Add a component: Local navigation.

Motivation & Context

Missing to Boosted compared to the design specs.

Types of change

• New feature (non-breaking which fixes add functionality)

Live previews

• https://deploy-preview-1468--boosted.netlify.app/docs/components/local-navigation

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• My new component is added in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

• https://deploy-preview-1468--boosted.netlify.app/docs/components/local-navigation

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	8db5bee
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64eef59ce0f3680008042705
😎 Deploy Preview	https://deploy-preview-1468--boosted.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 configuration.

[louismaximepiton]

Adding what was said in design spec meeting::

• The local navigation should behaves like a collapse.

[hannahiss]

• some minor comments about elements' labels
• missing migration guide
• a11y issue? The active item's color is orange, with a font size of 16px bold, which is in contradiction with our own recommendations (should be at least 19px bold, see https://a11y-guidelines.orange.com/fr/web/tester/#test-couleurs-et-contrastes)... It's even more serious in the reduced version, where the active item is only indicated by the color (no thick line below item). I'm avare that this presentation comes from another component (navbar nav-link) but shouldn't we try to find a better solution ? (probably not in this PR)

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[hannahiss]

• a11y issue? The active item's color is orange, with a font size of 16px bold, which is in contradiction with our own recommendations (should be at least 19px bold, see https://a11y-guidelines.orange.com/fr/web/tester/#test-couleurs-et-contrastes)... It's even more serious in the reduced version, where the active item is only indicated by the color (no thick line below item). I'm avare that this presentation comes from another component (navbar nav-link) but shouldn't we try to find a better solution ? (probably not in this PR)

Created a design task about this

[hannahiss]

Ok except for active state accessibility that should be viewed on accessibility review

[julien-deramond]

Haven't checked everything but there's at least this issue regarding the mobile rendering:

Missing left padding/margin

[louismaximepiton]

It's due to the doc, it renders well if you move the local navigation outside the example. Try to put it right after the header for example. For design review, there was some more code in a commit. Try reverting this locally: ded5ba8.

[julien-deramond]

Here's the first batch of comments. I haven't reviewed the CSS part in detail yet.

I'm wondering if we shouldn't integrate a disabled link in the examples like it's done in https://deploy-preview-1468--boosted.netlify.app/docs/5.3/components/navs-tabs/#underline just for easier maintenance.

In https://deploy-preview-1468--boosted.netlify.app/docs/5.3/components/navs-tabs/#underline, maybe it worth mentioning that if the user needs this nav to wrap, local navigation must be used.

[julien-deramond]

Waiting for the confirmation about the disabled link color, and let's merge! Good job!