feat(component): add Divider component (#2932)

* feat: first divider components implementation

* fix: following LMP review

* docs: update hr usage in docs

* fix: final review

---------

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>

Author: nilloq

scss/_variables.scss

@@ -787,20 +787,20 @@ $blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: in
 $blockquote-footer-color:     var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600`
 // OUDS mod: no `$blockquote-footer-font-size`
 
-$hr-margin-y:                 $ouds-space-fixed-medium !default;
-$hr-color:                    inherit !default;
+$hr-margin-y:                 $ouds-space-fixed-medium !default; // OUDS mod: instead of `$spacer !default;`
+$hr-color:                    $ouds-color-border-default !default; // OUDS mod: instead of `inherit !default;`
 
 // fusv-disable
 $hr-bg-color:                 null !default; // Deprecated in Bootstrap v5.2.0
 $hr-height:                   null !default; // Deprecated in Bootstrap v5.2.0
 // fusv-enable
 
 $hr-border-color:             null !default; // Allows for inherited colors
-$hr-border-width:             var(--#{$prefix}border-width) !default;
+$hr-border-width:             $ouds-divider-border-width !default; // OUDS mod: instead of `var(--#{$prefix}border-width) !default;`
 $hr-opacity:                  null !default;
 
 // scss-docs-start vr-variables
-$vr-border-width:             2px !default; // OUDS mod: instead of `var(--#{$prefix}border-width)`
+$vr-border-width:             $ouds-divider-border-width !default; // OUDS mod: instead of `var(--#{$prefix}border-width)`
 // scss-docs-end vr-variables
 
 $legend-margin-bottom:        $spacer * .25 !default;

scss/helpers/_vr.scss

@@ -1,8 +1,12 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: $vr-border-width;
+  // OUDS mod: no width
   min-height: 1em;
-  background-color: currentcolor;
-  opacity: $hr-opacity;
+  margin: 0 $ouds-space-fixed-medium; // OUDS mod
+  color: $hr-color; // OUDS mod
+  // OUDS mod: no background color
+  border: 0; // OUDS mod
+  border-left: $vr-border-width solid currentcolor; // OUDS mod
+  // OUDS mod: no opacity
 }

site/content/docs/0.3/content/reboot.md

@@ -174,21 +174,14 @@ On colored backgrounds, links should have a different style. Visited links don't
 
 ## Horizontal rules
 
-The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
-
-<!-- TODO: Check once the dividers have been designed -->
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top` and automatically inherit their `border-color` via `color`.
 
 {{< example >}}
 <hr>
-
-<div class="text-status-positive">
-  <hr>
-</div>
-
-<hr class="border border-emphasized border-medium opacity-medium">
-<hr class="border border-brand-primary border-thick opacity-strong">
 {{< /example >}}
 
+The `<hr>` style can be modified with border utilities. See some customization examples in the [dividers helpers]({{< docsref "/helpers/dividers" >}}) documentation.
+
 <!-- ## Lists
 
 All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 16px`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.

site/content/docs/0.3/customize/color-palette.md

@@ -40,7 +40,7 @@ This section exposes all the existing colors inside the OUDS Web palette. These
         </button>
         <figcaption class="py-shortest">
           <code class="user-select-all">{{ $color.hex }}</code>
-          <hr class="my-shortest border-top" style="border-color:{{ $color.hex }} !important">
+          <hr class="my-shortest" style="border-color:{{ $color.hex }} !important">
           <var class="user-select-all">{{- $color.variable -}}</var>
         </figcaption>
       </figure>

site/content/docs/0.3/helpers/dividers.md

@@ -0,0 +1,86 @@
+---
+layout: docs
+title: Dividers
+description: Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections.
+group: helpers
+aliases:
+  - "/docs/helpers/dividers/"
+  - "/docs/helpers/vertical-rule/"
+toc: true
+---
+
+## Horizontal rules
+
+Horizontal rules should use the `<hr>` tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, prefer using a border CSS property on a `<div>` or our [border utilities]({{< docsref "/utilities/borders" >}}), or even ensure to hide it from assistive technologies (e.g., `aria-hidden="true"`).
+
+{{< example >}}
+<hr>
+<hr class="border-brand-primary">
+<div class="border-top border-default my-medium"></div>
+<div class="border-top border-emphasized border-thick my-medium"></div>
+{{< /example >}}
+
+The `<hr>` color is automatically adjusted according to the color modes or on colored backgrounds.
+
+{{< example class="p-none">}}
+<div class="bg-brand-primary p-tall">
+  <div data-bs-theme="light">
+    <hr class="border-thick">
+  </div>
+</div>
+<div class="bg-status-negative-emphasized p-tall">
+  <div data-bs-theme="root-inverted">
+    <hr class="border-thicker">
+  </div>
+</div>
+{{< /example >}}
+
+
+{{< bootstrap-compatibility >}}
+The `<hr>` color can be set using [colors utilities]({{< docsref "/utilities/colors" >}})
+{{< example >}}
+<hr class="text-brand-primary">
+{{< /example >}}
+{{< /bootstrap-compatibility >}}
+
+## Vertical rules
+
+Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements. They have `min-height` of `1em`.
+
+{{< example >}}
+<div class="vr"></div>
+
+{{< /example >}}
+
+Vertical rules scale their height in flex layouts:
+
+{{< example >}}
+<div class="d-flex" style="height: 200px;">
+  <div class="vr"></div>
+  <div class="vr border-brand-primary"></div>
+  <div class="vr border-thicker"></div>
+</div>
+{{< /example >}}
+
+The `.vr` color is automatically adjusted according to the color modes or on colored backgrounds.
+
+{{< example class="p-none">}}
+<div class="bg-brand-primary p-tall">
+  <div data-bs-theme="light">
+    <div class="vr border-thick"></div>
+  </div>
+</div>
+<div class="bg-status-negative-emphasized p-tall">
+  <div data-bs-theme="root-inverted">
+    <div class="vr border-thicker"></div>
+  </div>
+</div>
+{{< /example >}}
+
+{{< bootstrap-compatibility >}}
+The `.vr` color can be set using [colors utilities]({{< docsref "/utilities/colors" >}})
+{{< example >}}
+  <div class="vr text-brand-primary"></div>
+{{< /example >}}
+{{< /bootstrap-compatibility >}}
+

site/content/docs/0.3/helpers/stacks.md

@@ -48,7 +48,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
 </div>
 {{< /example >}}
 
-<!--And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
+And with [vertical rules]({{< docsref "/helpers/dividers" >}}):
 
 {{< example class="bd-example-flex" >}}
 <div class="hstack gap-tall">
@@ -57,7 +57,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
   <div class="vr"></div>
   <div class="p-short">Third item</div>
 </div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Examples
 

site/content/docs/0.3/helpers/vertical-rule.md

@@ -274,6 +274,10 @@ See [our new Switch page]({{< docsref "/forms/switch" >}}) for more information.
 
 - <span class="badge text-bg-status-negative-emphasized">Breaking</span> All colored links helpers are unstyled in OUDS Web. Classes still exist for Bootstrap compatibility.
 
+### Dividers
+
+- <span class="badge text-bg-status-positive-emphasized">New</span> Horizontal or vertical rule helpers to create dividers.
+
 ### Icon link
 
 - <span class="badge text-bg-status-info-emphasized">Info</span> `.icon-link` and `.link-chevron` are now documented in link component. See [icon link]({{< docsref "/components/links/#icon-link" >}}) and [link chevron]({{< docsref "/components/links/#link-chevron" >}}).
@@ -293,6 +297,10 @@ See [our new Switch page]({{< docsref "/forms/switch" >}}) for more information.
 
 - <span class="badge text-bg-status-positive-emphasized">New</span> Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`.
 
+### Vertical rule
+
+- <span class="badge text-bg-status-warning-emphasized">Warning</span> The vertical rule documentation has been merged into the new [Dividers helper]({{< docsref "/helpers/dividers" >}}) documentation.
+
 ## Utilities
 
 ### Background

site/content/docs/0.3/migration-from-boosted.md

@@ -12,6 +12,8 @@ toc: true
 
 ## v0.4.0
 
+<hr>
+
 ### Forms
 
 #### Checkboxes
@@ -26,6 +28,11 @@ toc: true
 
 - <span class="badge text-bg-status-positive-emphasized">New</span> Switch component has been implemented.
 
+### Helpers
+
+#### Dividers
+- <span class="badge text-bg-status-positive-emphasized">New</span> Horizontal and vertical rule helpers to create dividers.
+
 ### CSS and Sass variables
 
 - <span class="badge text-bg-status-positive-emphasized">New</span> A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.
@@ -66,6 +73,8 @@ toc: true
 
 ## v0.3.0
 
+<hr>
+
 ### Content styles
 
 #### Reboot
@@ -147,6 +156,8 @@ toc: true
 
 ## v0.2.0
 
+<hr>
+
 ### Components
 
 #### Buttons
@@ -303,6 +314,8 @@ toc: true
 
 ## v0.1.0
 
+<hr>
+
 ### Foundations
 
 - <span class="badge text-bg-status-warning-emphasized">Warning</span> The root selector have been tweaked for more flexibility on JS frameworks. Please don't hesitate to contact us if you find any issue with it.
@@ -1922,6 +1935,8 @@ toc: true
 
 ## v0.0.3
 
+<hr>
+
 ### Pre-compiled versions
 
 From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers, utilities, variables, components variants, etc.) that do not comply with Orange Unified Design System. However, you can still use our Bootstrap compatibility mode by using `ouds-web-bootstrap.css` and `ouds-web-bootstrap.min.css`. [Learn more about Bootstrap compatibility]({{< docsref "/extend/approach/#bootstrap-compatibility" >}}).
@@ -1988,14 +2003,14 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
 
 ## v0.0.1
 
-<hr class="mb-tall">
+<hr>
 
 OUDS Web v0.0.1 has landed, and is based and compatible with Bootstrap v5.3.3.
 
 If you need more details about the changes, please refer to the [v0.0.1 release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/tag/v0.0.1-ouds-web).
 
 ## v0.0.0
 
-<hr class="mb-tall">
+<hr>
 
 OUDS Web v0.0.0 has landed, and is based and compatible with Bootstrap v5.3.3.

site/content/docs/0.3/migration.md

@@ -171,15 +171,14 @@
     - title: Clearfix
     - title: Color & background
     - title: Colored links
+    - title: Dividers
     - title: Focus ring
       draft: true
     - title: Position
     - title: Ratio
     - title: Stacks
     - title: Stretched link
     - title: Text truncation
-    - title: Vertical rule
-      draft: true
     - title: Visually hidden
 
 - title: Utilities