chore/merge-main@195440f

[julien-deramond]

This PR only contains the merge of twbs/bootstrap@195440f which contains the v5.2.0 design refresh, plus responsive offcanvas classes. I'll do my best in this description to help the reviewers do their job.

Tracking

🔴 .bundlewatch.config.json

TODO at the end of the PR.

---

🟢 js/src/offcanvas.js

Copied as it is from Bootstrap (it just adds an event handler when the window is resized).

---

🟢 js/tests/unit/offcanvas.spec.js

Copied as it is from Bootstrap (corresponding tests after the slight modification of js/src/offcanvas.js).

---

🟢 scss/_navbar.scss

Nothing to do in Boosted for this file since we don't allow offcanvas in our navbars.

---

🟢 scss/_offcanvas.scss

Copied almost as it is from BS; just modified the .btn-close rule to have the same aspect for Boosted as before.

---

🟢 scss/_spinners.scss

Nothing to do here, the change was already in Boosted.

---

🟢 site/assets/js/application.js

Copied as it is in Bootstrap.

---

🟢 site/assets/js/code-examples.js

Copied as it is from Bootstrap.

---

🟢 site/assets/js/search.js

Copied as it is from Bootstrap: user can access the search input with Ctrl + K as well.

---

🟢 site/assets/scss/_ads.scss

Nothing to do, we don't have ads in Boosted.

---

🟡 site/assets/scss/_algolia.scss

Copied the modification as it is in Bootstrap

• Check the rendering at the end

---

🟢 site/assets/scss/_buttons.scss

Nothing to do, we don't have special buttons in Boosted, we reuse ours.

---

🟡 site/assets/scss/_callouts.scss

For this one I've used exactly the same SCSS code coming from Bootstrap. I've just changed the border color as it was already done in Boosted.

• Do we want to have colored background colors as well?
• Do we keep the new border width value or revert it?

Here are the different renderings:

	Before design refresh	After design refresh
Bootstrap
Boosted

I chose to remove the .highlight rule from Bootstrap to avoid having the following rendering in this special case:

---

🟡 site/assets/scss/_clipboard-js.scss

Copied as it is in Bootstrap

• Check the rendering at the end

---

🟡 site/assets/scss/_component-examples.scss

Added and modified .bd-example-snippet to have a gray border and a light gray background.

• Needs feat(utilities): reintroduce .text-uppercase #1216
• Design review needed for this part

• Finished the import
• Check the global rendering of this file

---

🟡 site/assets/scss/_content.scss

• Added as it is
• See Doc: Extra top padding after having clicked on anchor links twbs/bootstrap#36278
• Check the rendering in details

---

🟡 site/assets/scss/_layout.scss

• Added as it is exactly
• Check the rendering and the diff in details

---

🟡 site/assets/scss/_masthead.scss

• Background gradients have been removed in .bd-masthead
• Adaptations for large button and clipboard button
• Force icons (.masthead-followup-icon) to be black
• Removed .masthead-notice since we are rather using tags for that
• Need to check all the content of this file
• Need to check the previous content in comment at the end of this file for possible reintegration
• Check final rendering
• Design review

---

🟡 site/assets/scss/_navbar.scss

• No bd-navbar but check if we don't need to get some things from there

---

🟡 site/assets/scss/_search.scss

• For the moment I've just copied the content of _subnav.scss; need to merge with the new content

---

:jaune_circle: site/assets/scss/_sidebar.scss

• Imported the exact content of Bootstrap and commented Boosted one
• Merge Boosted and Bootstrap CSS rules

---

🟢 site/assets/scss/_subnav.scss

Is replaced by _search.css. All the content has been migrated to this file except .bd-subnavbar not used anymore.

---

🟢 site/assets/scss/_syntax.scss

Let's keep our rules!

---

🟡 site/assets/scss/_toc.scss

Kept the same structure than Bootstrap but reajusting some colors

• Added margin-bottom: 0 rule as it is
• .bd-toc-toggle uses some other colors
• .bd-toc-collapse was imported as it is
• Design review of the mobile part (focus, hover, etc.) with the new toggle button
• Check rendering (margins, paddings) when all the doc will be refreshed

---

🟡 site/assets/scss/_variables.scss

• $dropdown-active-icon is temporary commented for compilation
• $bd-{info|warning|danger} are replaced by $bd-callout-variants as in Bootstrap.

---

🟢 site/assets/scss/docs.scss

Copied as it is in Bootstrap

---

🟢 site/content/docs/5.1/components/offcanvas.md

Copied as it is in Bootstrap

---

🟢 site/content/docs/5.1/examples/_index.md

Copied as it from Bootstrap (just added a .mt-1 because of our callout)

---

🟡 site/content/docs/5.1/examples/navbars-offcanvas/index.html + site/content/docs/5.1/examples/navbars-offcanvas/navbar.css

Copied as it is from BS because they won't be displayed.

• Check this example that will still be analyzed by pa11y-ci

---

🟢 site/content/docs/5.1/utilities/api.md

Copied as it is from Bootstrap

---

🟢 site/content/docs/5.1/utilities/spacing.md

Copied as it is from Bootstrap

---

🟢 site/data/examples.yml

Added the new "Navbars offcanvas" example but commented. Note: after this PR we should remove all the examples instead of comment them (and the corresponding resources as well).

---

🟢 site/data/plugins.yml

Included the same list than Bootstrap to facilitate the graphical integration.

---

🟢 site/data/sidebar.yml

Included the same icon names and modified the color to always be black.

---

🟢 site/layouts/_default/baseof.html

---

🟡 site/layouts/_default/docs.html

• TODO
• .Page.Params.toc true was imported as it is in Bootstrap (just removed the `.text-muted)
• Imported .bd-sidebar as it is

---

🟡 site/layouts/_default/single.html

• Didn't apply the gap and flex new values from Bootstrap
• Included the new icon for the download button
• Check if .bd-gutter is useful here (this is the last step for this file)

---

🟡 site/layouts/partials/docs-navbar.html

• Included `partial "docs-versions"
• Removed download button
• Added search bar
• Content of the header shouldn't be displayed in mobile
• Don't display empty subnav in tablet mode
• Finish integration
• Missing role="search" in Bootstrap (check other PRs)

---

🟡 site/layouts/partials/docs-sidebar.html

• Imported Bootstrap content as it is
• Handle comments of Boosted version
• Look for each classes and rules in corresponding files

---

🟡 site/layouts/partials/docs-subnav.html

• Removed partial "docs-versions" now in the header
• TODO

---

🟡 site/layouts/partials/docs-versions.html

• Included the file as it is from Bootstrap
• Adapted the URLs and wording
• ⚠️ Waiting for information in [WIP] Fix documentation versions selection twbs/bootstrap#36221
• Adapted the rendering of the dropdown via 2c4c0a3
• Dropdown is displayed in the header in tablet mode and shouldn't
• Opening dropdown in mobile mode doesn't work
• TODO

---

🟢 site/layouts/partials/favicons.html

Nothing done here. The color changes are linked to the main color changes of BS.

---

🟢 site/layouts/partials/footer.html

Nothing done here. I haven't changed the padding values since we're gonna use the Orange footer from #970

---

🟡 site/layouts/partials/home/masthead-followup.html

• Removed icons and themes sections
• Removed .display-5 classes that don't apply a big size in Boosted
• Removed all .fw-semibold because bold is preferred in Boosted
• Merge new content with old content (reintroduced Design guidelines section)
• Replaced "Bootstrap" by "Boosted"
• Check that ALL the content is appropriate and work for Boosted
  • Modified "Install via package manager" via https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap
    chore/merge-main@195440f #1214/commits/56afb10011180a52b0470a8254475064a19a066c. ⚠️ Check if it is OK.
  • Kept exactly the same list in "Comprehensive set of plugins" + change the wording to indicate that Boosted has more plugins / JS components
• Check rendering
• Design review

---

🟡 site/layouts/partials/home/masthead.html

A first quick & very dirty adaptation has been pushed.

• Finish the adaptation
  • Adapt the rendering (classes) of the large button
  • Replaced the notice by the Tag component already used in added-in shortcode
• Remove commented code (and classes, unused CSS rules, etc. if needed)
• Design review

---

🟡 site/layouts/partials/icons.html

• Check or replace icons
• "chevron-expand": used in toc in mobile mode.
• "clipboard" + "lightning-charge-fill" for Copy and StackBlitz buttons.

---

🟢 site/layouts/partials/scripts.html

Imported as it is from Bootstrap

---

🟢 site/layouts/shortcodes/example.html

Almost imported the file as it is in Bootstrap.

• Removed the .bg-light in order to handle the color in site/assets/scss/_component-examples.scss

---

🟢 site/static/docs/5.1/assets/img/examples/navbars-offcanvas.png

Same file than in Bootstrap because won't be displayed.

---

🟢 site/static/docs/5.1/assets/img/examples/navbars-offcanvas@2x.png

Same file than in Bootstrap because won't be displayed.