Borders: add design callout messages

[isabellechanclou]

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

Related issues

Closes #2062
Closes #2063

Description

After a design review of all the card variants, the purpose of this PR is to fix the design of some variants in order to make them aligned on the Orange design specifications and to add design callout messages before the variants that should not be used because not suitable in Orange design system.

Motivation & Context

The goal here is to offer in Boosted more guidance on what can be used or not in Orange apps and to reduce discrepancies between Boosted documentation and the Orange design system one.

Types of change

• Bug fix (non-breaking which fixes an issue)
• New feature (non-breaking change which adds functionality)
• (NA) Refactoring (non-breaking change)
• (NA) Breaking change (fix or feature that would change existing functionality)

Live previews

• https://deploy-preview-2064--boosted.netlify.app/docs/utilities/borders

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)

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

After the merge

• (NA) Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	40082dd
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64ef25a1fad57d0008e728cc
😎 Deploy Preview	https://deploy-preview-2064--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]

I'm still not really convinced of the side effects these callouts could bring. However, here are my concerns

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[julien-deramond]

Some proposals for the wording. Tell me what you think, and I'll finalize + merge the PR based on your latest feedback.

[louismaximepiton]

Looks fine to me