Footer component

[louismaximepiton]

Previews :
https://deploy-preview-970--boosted.netlify.app/docs/5.1/examples/footers/
https://deploy-preview-970--boosted.netlify.app/docs/5.1/components/footer/

Closes #892

Note : Issue with Follow us get bigger on lg viewport (not on md)

First review from Julien :

• Check where to insert Orange footer references.
• Check for changes in Migration page.
• Do the 2 thumbnails.
• Check for the baseline (1px shift in WEB-FTR-STD-005).
• Check with accessibility for more padding when outline with links (for WEB-FTR-STD-005 only ?).

---

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
• Tests added for JS-side
• Run tests
• Manually run BrowserStack test
• Manually run Percy test
• 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 Migration Guide (if back-from-v4): renamed variables, changes in markup requirement, etc.

Reviews

• Code review
• A11y review
• Design review

[julien-deramond]

1st serie of comments regarding the doc.

[julien-deramond]

Here is my design review after the last fixes we talked about. I compared directly the last example to the WEB-FTR-STD-003 reference. I used Firefox 95.0.1 (64-bit) for Ubuntu.

Sign up part

• Every breakpoints: "Sign up to our mailing list" text is a bit off by 1px (top/bottom).
• 768px breakpoint: Height is different than the one defined in the design sepcs but I would say the issue is in the design specs (check with the designers).
• The behavior developed in this PR for the input + button seems good for me but is different than in the design specs where the width varies between breakpoints. Check with the designers what's the real behavior to develop. Note: in their 768px breakpoint the input is larger than in the 1024px and it looks like an issue.

Follow us part

• Every breakpoints: "Follow us" text is a bit off by 1px (top/bottom).
• 768px breakpoint: Height is different than the one defined in the design sepcs but I would say the issue is in the design specs (check with the designers).

Categories part

• 480px: "Category" texts are a bit off by 1px (top/bottom).

Store locator part

• Every breakpoints: "Locate a store" text is a bit off by 1px (top/bottom).
• 768px breakpoint: Height is different than the one defined in the design sepcs but I would say the issue is in the design specs (check with the designers).
• Icons + texts are a bit off (left/right) by few pixels

Copyright part

• Icons + texts are a bit off (left/right) by few pixels

1. Regarding the elements off by 1px pixel I let you check if you have the same behavior with Chrome and other browsers and if it worth a modification.
2. Regarding the 768px multiple issues in the design specs I let you contact the designers to see if those are real issues
3. Regarding the input size in the "Sign up" part I let you contact the designers and maybe show them what you've done and see if it is accepted or if you need to handle different widths.

Good job on the rendering. The result is already great as it is IMO.

I'll continue the review with the source code and the architecture while you're tackling those topics.

[Lausselloic]

Thanks for this work that is really needed to help all project implemented specific footers. I thinks there's maybe too many spacing and text sizing customization that will be loaded by all project but maybe not used. Need to find a good way to lightweight the overload and keep this footer Showroom

[julien-deramond]

Good job! LGTM 🚀