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 <[email protected]>

Author: nilloq

Diff for: 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;

Diff for: 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
 }

Diff for: 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.

Diff for: 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>

Diff for: 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 >}}
+

Diff for: 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
 

Diff for: 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

Diff for: 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.

Diff for: 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

Diff for: site/data/sidebar.yml

@@ -3,7 +3,7 @@
     <hr class="border-medium border-default m-none">
   </div>
   <div class="col-xl-4 pe-xl-jumbo">
-    <hr class="d-xl-none border-medium border-default m-none pb-scaled-short">
+    <hr class="d-xl-none border-medium m-none pb-scaled-short">
     <h2 class="text-brand-primary mb-scaled-shorter">Build and extend in real-time with CSS&nbsp;variables</h2>
     <p class="lead fw-bold bd-text-wrap-balance mb-scaled-shorter">
       OUDS Web is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.

Diff for: site/layouts/partials/home/css-variables.html

@@ -3,7 +3,7 @@
     <hr class="border-medium border-default m-none">
   </div>
   <div class="col-xl-4 pe-xl-jumbo">
-    <hr class="d-xl-none border-medium border-default m-none pb-scaled-short">
+    <hr class="d-xl-none border-medium m-none pb-scaled-short">
     <h2 class="text-brand-primary mb-scaled-shorter">Customize everything with&nbsp;Sass</h2>
     <p class="lead fw-bold bd-text-wrap-balance mb-scaled-shorter">
       OUDS Web utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.

Diff for: site/layouts/partials/home/customize.html

@@ -3,7 +3,7 @@
     <hr class="border-medium border-default m-none">
   </div>
   <div class="col-xl-4 pe-xl-jumbo">
-    <hr class="d-xl-none border-medium border-default m-none pb-scaled-short">
+    <hr class="d-xl-none border-medium m-none pb-scaled-short">
     <h2 class="text-brand-primary mb-scaled-shorter">Get started any way you&nbsp;want</h2>
     <p class="lead fw-bold bd-text-wrap-balance mb-scaled-shorter">
       Jump right into building with OUDS Web—use the CDN, install it via package manager, or download the source code.

Diff for: site/layouts/partials/home/get-started.html

@@ -20,9 +20,9 @@ <h1 class="display-medium text-brand-primary mb-scaled-short">OUDS Web</h1>
 
       <div class="hstack gap-short">
         <p class="mb-none">Currently v{{ .Site.Params.current_version }}</p>
-        <div class="vr"></div>
+        <div class="vr m-none border-always-on-black"></div>
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="fw-bold">Download</a>
-        <div class="vr"></div>
+        <div class="vr m-none border-always-on-black"></div>
         <a href="/docs/versions/" class="text-nowrap fw-bold">All releases</a>
       </div>
     </div>