🆕 Sticker component

[julien-deramond]

Closes #440

Agreed with the designers that we can simply implement a container without placing elements with pixel perfect.

Live Previews

• Documentation
• Examples

DoD

Development

• 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 /about/overview/#custom-components if it is a new Orange custom component
  • in /getting-started/introduction/#components if it is a new Orange custom component that requires JavaScript (and Popper)
  • in /customize/overview#csps-and-embedded-svgs if it is a new Orange custom component that includes embedded SVGs in our CSS
  • in /forms/validation/?#supported-elements if it is a new Orange custom component that is a form control
  • in /forms/overview/ if it is a new Orange custom component that is a form control
• Check (and fix) RTL version
• Run linters
• Run compilers
• Manually run BrowserStack test
• Manually run Percy test
• Cross-browser test:
  • Firefox ESR
  • Latest Edge, Chrome, Firefox, Safari
  • iOS Safari
  • Chrome & Firefox on Android

Reviews

• Code review
• A11y review
• Design review
  • Update the thumbnails after the design review

[louismaximepiton]

Is the responsive size of font-size wanted ? -> Many spacing issues in small viewports
Maybe put a line to tell that utilities works on .sticker too ?

[louismaximepiton]

Sounds good to me.

[julien-deramond]

• A11y feedback from @Aniort: include the sticker's content within a <p> for semantics.

[julien-deramond]

• Last thing to do in this PR: explain that our example in not a responsive example and is just a simple example with utility classes that works for desktop.