Breadcrumb: Add the mobile version

[louismaximepiton]

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

Related issues

Closes #891. Linked to https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/537.

Description

Add a small version of the breadcrumb. Accepted by a11y with ux doubts, but fine from a11y pov.

Rebrand a bit the Breadcrumb so it has no underline. From design point of view, it was asked:

We only use underline for breadcrumbs on rollover. Will this be a problem to change?

Motivation & Context

The brand and help people to have breadcrumb in their sites.

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-2003--boosted.netlify.app/docs/components/breadcrumb The change is done regarding the mobile version. Please check that the mobile version looks like the design. Please compare to https://main--boosted.netlify.app/docs/components/breadcrumb to make sure the desktop version doesn't change in any case.

Checklist

Contribution

• [x] I have read the contributing guidelines

Accessibility

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

Design

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

Development

• [x] 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

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

Checklist (for Core Team only)

• [x] 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)
• [x] Code review
• [x] Design review
• [x] A11y review

After the merge

• [ ] Manually launch Percy tests

[netlify[bot]]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	2707be8e41740ec1744d794b65efe28be9eaad93
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65967d5d4838f60008051c97
😎 Deploy Preview	https://deploy-preview-2003--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.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[Franco-Riccitelli]

All looks good me. Thanks

[julien-deramond]

@louismaximepiton I haven't checked this PR yet but we need to check if https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/520#issuecomment-1639546456 can be useful here or not at all. I mean, is a link with chevron usable here, or would it be a completely separate component?

[louismaximepiton]

We probably can use a kind of link with chevron but it means changing the markup to get some utilities (.d-none.d-md-block or something like that). Not quite sure it's better in migration and usability terms.

[julien-deramond]

We probably can use a kind of link with chevron but it means changing the markup to get some utilities (.d-none.d-md-block or something like that). Not quite sure it's better in migration and usability terms.

Got the same feeling so let's keep this separate issue to maybe provide this kind of links if they can be used outside the context of breadcrumbs.

[julien-deramond]

There's something we need to clarify in this PR in one of our weekly sessions, the links are no longer underlined contrary to our main branch. This is compliant with the DSM but was what's inside the DSM validated with the a11y team...? Based on that, it should be mentioned in the description of this PR or modified in the DSM.

[Aniort]

ok, good to me !