docs: improve and add design or Bootstrap callouts (#2625)

Co-authored by: Isabelle Chanclou <[email protected]>
Co-authored by: Hannah Issermann <[email protected]>
Co-authored by: Julien Déramond <[email protected]>

site/assets/scss/_content.scss

@@ -54,12 +54,7 @@
 
   > details {
     padding: 5px 10px; // static even when zoomed
-    border: transparent solid calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
-
-    // stylelint-disable-next-line selector-no-qualifying-type
-    &[open] {
-      border-color: var(--bs-border-color);
-    }
+    border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
   }
   // End mod
 }

site/content/docs/5.3/components/badge.md

@@ -15,10 +15,10 @@ Badges scale to match the size of the immediate parent element by using relative
 ### Headings
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-This component variant should not be used because it does not exist in the Orange Design System specifications.
+These variants should not be used because they do not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -36,10 +36,10 @@ This component variant should not be used because it does not exist in the Orang
 Badges can be used as part of links or buttons to provide a counter.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-This component should not be used because it does not exist in the Orange Design System specifications.
+This variant should not be used because it does not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -60,9 +60,9 @@ Unless the context is clear (as with the "Notifications" example, where it is un
 Use utilities to modify a `.badge` and position it in the corner of a link with an icon.
 
 {{< design-callout-alert >}}
-This component variant should be used **only** inside a header component.
+This variant should be used **only** inside a header component.
 
-Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >}}). You can also refer to the [Global headers](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) guidelines on the Orange Design System website.
+Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >}}). You can also refer to the [Global headers guidelines](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -86,13 +86,13 @@ Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >
 
 {{< added-in "5.2.0" >}}
 
-Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
+Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) utilities and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-These component variants should not be used because they do not exist in the Orange Design System specifications.
+These variants should not be used because they do not respect in the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -111,15 +111,15 @@ These component variants should not be used because they do not exist in the Ora
 
 Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
 
-Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead.
+Consider using our [Tags component]({{< docsref "/components/tags" >}}) instead.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-This component should not be used because it does not exist in the Orange Design System specifications.
+These variants should not be used because they do not respect in the Orange Design System specifications.
 
-Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). You can also refer to the [Tags](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) guidelines on the Orange Design System website.
+Instead, consider using our [Tags component]({{< docsref "/components/tags" >}}). You can also refer to the [Tags guidelines](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}

site/content/docs/5.3/components/breadcrumb.md

@@ -74,12 +74,12 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/
 ```
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.
 
-Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website.
+Please refer to the [Local Headers/Breadcrumb guidelines](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.

site/content/docs/5.3/components/button-group.md

@@ -37,12 +37,12 @@ These classes can also be added to groups of links, as an alternative to the [`.
 ## Mixed styles
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-outline-secondary`.
 
-Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples" >}}) secondary variant component. You can also refer to the [Buttons: standard](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) guidelines on the Orange Design System website.
+Please refer to our [Outline buttons secondary variant]({{< docsref "/components/buttons#outline-buttons" >}}). You can also refer to the [Buttons: standard guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -69,12 +69,12 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
 Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
 
 <details class="mb-3">
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 This **checkbox** variant should not be used because it does not respect the Orange Design System specifications.
 
-From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website.
+From the Orange Design System point of view, checkboxes should be represented like in our [Checks component]({{< docsref "/forms/checks-radios#checks" >}}). You can also refer to the [Checkbox guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -101,18 +101,18 @@ From the Orange Design System point of view, checkboxes should be represented li
 
   <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
   <label class="btn btn-toggle" for="btnradio3">Radio 3</label>
- </div>
- {{< /example >}}
+</div>
+{{< /example >}}
 
 ## Button toolbar
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
-This variant should not be used because it does not respect the Orange Design System specifications.
+These variants should not be used because they do not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -169,6 +169,15 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
+<details>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+The **first size variant (50px height) and the last one (30px height)** should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Toggle buttons guidelines](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
   <button type="button" class="btn btn-outline-secondary">Left</button>
@@ -188,13 +197,14 @@ Instead of applying button sizing classes to every button in a group, just add `
   <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
+</details>
 
 ## Nesting
 
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -224,7 +234,7 @@ This variant should not be used because it does not respect the Orange Design Sy
 Make a set of buttons appear vertically stacked rather than horizontally.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 These 3 vertical variants should not be used because they do not respect the Orange Design System specifications.

site/content/docs/5.3/components/buttons.md

@@ -34,12 +34,12 @@ Boosted includes several button variants, each serving its own semantic purpose,
 {{< /example >}}
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 Warning, info, light and dark variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -193,12 +193,12 @@ In need of a button, but not the hefty background colors they bring? Replace the
 {{< /example >}}
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -231,12 +231,12 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 You can even roll your own custom sizing with CSS variables:
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -284,12 +284,12 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
 Create responsive stacks of full-width, "block buttons" like those in Boosted 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
 
 <details class="mb-3">
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications.
 
-Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+Please refer to the [Buttons guidelines](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -340,12 +340,12 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
 Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
 
 <details>
-<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<summary>See Bootstrap examples that are incompatible with Orange Design System.</summary>
 <br>
 {{< design-callout-alert >}}
 These variants with only **one toggle button** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a toggle button should not be used alone.
 
-Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
+Instead, consider using our [Checks component]({{< docsref "/forms/checks-radios#checks" >}}), [Radios component]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons component]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}).
 {{< /design-callout-alert >}}
 
 {{< example >}}