Add rule component

releases.yml

@@ -4,6 +4,10 @@
       url: /docs/patterns/grid#common-grid-patterns
       status: New
       notes: "We've added new classes: <code>.row--50-50</code>, <code>.row--25-75</code>, <code>.row--25-25-50</code>, <code>.row--25-25-25-25</code> as an alias for common grid layouts."
+    - component: Rule
+      url: /docs/patterns/rule
+      status: New
+      notes: We've added a new horizontal bar component.
     - component: Deep strip
       url: /docs/patterns/strip#deep-strip
       status: Updated

scss/_base_hr.scss

@@ -1,5 +1,27 @@
 @import 'settings';
 
+%fixed-width-hr {
+  @mixin adjusted-width($size) {
+    $gutters-sizes: 2 * map-get($grid-margin-widths, $size);
+
+    max-width: calc($grid-max-width - $gutters-sizes);
+    width: calc(100% - $gutters-sizes);
+  }
+
+  margin-left: auto;
+  margin-right: auto;
+  @include adjusted-width(small);
+
+  @media (min-width: $threshold-4-6-col) {
+    @include adjusted-width(default);
+  }
+
+  .row &,
+  .u-fixed-width & {
+    width: 100%;
+  }
+}
+
 // Horizontal rule
 @mixin vf-b-hr {
   // stylelint-disable selector-max-type -- base styles can use type selectors
@@ -18,25 +40,7 @@
     }
 
     &.is-fixed-width {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, small));
-      width: calc(100% - 2 * map-get($grid-margin-widths, small));
-
-      @media (min-width: $threshold-4-6-col) {
-        max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
-        width: calc(100% - 2 * map-get($grid-margin-widths, default));
-      }
-
-      @media (min-width: $threshold-6-12-col) {
-        max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
-        width: calc(100% - 2 * map-get($grid-margin-widths, default));
-      }
-
-      .row &,
-      .u-fixed-width & {
-        width: 100%;
-      }
+      @extend %fixed-width-hr;
     }
   }
 

scss/_patterns_rule.scss

@@ -0,0 +1,12 @@
+@import 'settings';
+
+@mixin vf-p-rule {
+  .p-rule,
+  .p-rule--highlight {
+    @extend %u-no-margin--bottom--hr;
+  }
+
+  .p-rule--highlight {
+    @include vf-highlight-bar($color-dark);
+  }
+}

scss/_vanilla.scss

@@ -34,6 +34,7 @@
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pull-quotes';
+@import 'patterns_rule';
 @import 'patterns_search-and-filter';
 @import 'patterns_search-box';
 @import 'patterns_separator';
@@ -119,6 +120,7 @@
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pull-quotes;
+  @include vf-p-rule;
   @include vf-p-search-and-filter;
   @include vf-p-search-box;
   @include vf-p-segmented-control;

scss/standalone/patterns_rule.scss

@@ -0,0 +1,9 @@
+@import '../vanilla';
+@include vf-base;
+
+@include vf-p-rule;
+
+// needed for examples
+@include vf-p-grid;
+@include vf-p-muted-heading;
+@include vf-p-headings;

side-navigation.yaml

@@ -76,6 +76,8 @@
       url: /docs/patterns/pagination
     - title: Quotes
       url: /docs/patterns/pull-quote
+    - title: Rule
+      url: /docs/patterns/rule
     - title: Search and filter
       url: /docs/patterns/search-and-filter
     - title: Search box

templates/docs/examples/layouts/brochure-site/_25-25-50.html

@@ -1,5 +1,7 @@
 <section class="p-strip u-no-padding--top">
-  <hr class="is-fixed-width u-no-margin--bottom">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row--25-25-50">
     <div class="col">
       <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_158,h_40/https://assets.ubuntu.com/v1/f34edb1f-Google+Cloud+logo+158x40.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_316,h_80/https://assets.ubuntu.com/v1/f34edb1f-Google+Cloud+logo+158x40.png 2x" alt="" width="158" height="40" loading="lazy">
@@ -23,7 +25,9 @@
       </i>
     </div>
   </div>
-  <hr class="is-fixed-width u-no-margin--bottom">
+  <div class="row">
+   <hr class="p-rule">
+  </div>
   <div class="row--25-25-50">
     <div class="col">
       <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_158,h_40/https://assets.ubuntu.com/v1/9257d79e-tenable+logo+158x40.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_316,h_80/https://assets.ubuntu.com/v1/9257d79e-tenable+logo+158x40.png 2x" alt="" width="158" height="40" loading="lazy">

templates/docs/examples/layouts/brochure-site/_25-75-nested.html

@@ -1,18 +1,23 @@
 <section class="p-strip is-shallow u-no-padding--top">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
     <div class="row--25-75">
-      <hr class="u-no-margin--bottom">
       <div class="col">
         <h3 class="p-muted-heading">We’re Canonical</h3>
       </div>
       <div class="col">
         <div class="row">
           <div class="col-medium-2 col-3">
-            <h4 class="p-heading--2"><strong>950+</strong><br>Employees</h4>
+            <hr class="p-rule--highlight">
+            <h4 class="p-heading--2"><strong>950+</strong><br>Employes</h4>
           </div>
           <div class="col-medium-2 col-3">
+            <hr class="p-rule--highlight">
             <h4 class="p-heading--2"><strong>89</strong><br>Countries</h4>
           </div>
           <div class="col-medium-2 col-3">
+            <hr class="p-rule--highlight">
             <h4 class="p-heading--2"><strong>78</strong><br>Languages</h4>
           </div>
           <div class="col-9">

templates/docs/examples/layouts/brochure-site/_50-50.html

@@ -1,19 +1,23 @@
 <section class="p-strip is-shallow u-no-padding--top">
-    <hr class="is-fixed-width u-no-margin--bottom">
-    <div class="row--50-50">
-      <div class="col">
-        <h2>Become a customer</h2>
-      </div>
-      <div class="col">
-        <p>For enterprices to cover their Ubuntu estate - servers and workstations.<br/>
-          <a href="#">See Ubuntu Pro pricing</a>
-        </p>
-        <button class="p-button--positive">Buy</button>
-      </div>
+  <div class="row">
+    <hr class="p-rule">
+  </div>
+  <div class="row--50-50">
+    <div class="col">
+      <h2>Become a customer</h2>
     </div>
+    <div class="col">
+      <p>For enterprices to cover their Ubuntu estate - servers and workstations.<br/>
+        <a href="#">See Ubuntu Pro pricing</a>
+      </p>
+      <button class="p-button--positive">Buy</button>
+    </div>
+  </div>
 </section>
 <section class="p-strip is-shallow u-no-padding--top">
-  <hr class="is-fixed-width u-no-margin--bottom">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row--50-50">
     <div class="col">
       <h2>Free for personal use</h2>
@@ -26,7 +30,9 @@ <h2>Free for personal use</h2>
   </div>
 </section>
 <section class="p-strip is-shallow u-no-padding--top">
-  <hr class="is-fixed-width u-no-margin--bottom">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row--50-50">
     <div class="col">
       <h2>Trial at no extra cost for existing Ubuntu Advantage customers</h2>

templates/docs/examples/layouts/brochure-site/index.html

@@ -58,8 +58,9 @@ <h1>
 </section>
 
 <section class="p-strip is-shallow">
-  <hr class="is-muted is-fixed-width u-no-margin--bottom">
-
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row">
     <div class="col-6 col-medium-3">
       <h2>Layouts</h2>
@@ -97,7 +98,9 @@ <h5 class="p-muted-heading">Example</h5>
 <div class="u-fixed-width">
   <h5 class="p-muted-heading">Example</h5>
 </div>
-<hr class="is-fixed-width u-no-margin--bottom">
+<div class="row">
+  <hr class="p-rule">
+</div>
 
 {% include "/docs/examples/layouts/brochure-site/_25-75.html" %}
 
@@ -109,7 +112,9 @@ <h5 class="p-muted-heading">Example</h5>
 
 <div class="u-fixed-width">
   <h5 class="p-muted-heading">Example</h5>
-  <hr>
+  <div class="row">
+    <hr class="p-rule">
+  </div>
 </div>
 
 {% include "/docs/examples/layouts/brochure-site/_25-75-offset.html" %}

templates/docs/examples/patterns/rule/default.html

@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rule / Default{% endblock %}
+
+{% block standalone_css %}patterns_rule{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/layouts/brochure-site/_50-50.html" %}
+
+{% endblock %}

templates/docs/examples/patterns/rule/highlight.html

@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rule / Highlight{% endblock %}
+
+{% block standalone_css %}patterns_rule{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/layouts/brochure-site/_25-75-nested.html" %}
+
+{% endblock %}

templates/docs/layouts/brochure.md

@@ -30,7 +30,9 @@ context:
 </div>
 
 <div class="p-strip u-no-padding--top">
-  <hr class="is-fixed-width">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row">
     <div class="col-9 col-start-large-4">
       <h2>
@@ -60,7 +62,9 @@ context:
 </div>
 
 <div class="p-strip u-no-padding--top">
-  <hr class="is-fixed-width">
+  <div class="row">
+    <hr class="p-rule">
+  </div>
   <div class="row">
     <div class="col-3">
       <h3 class="p-muted-heading">The 25% rule</h3>
@@ -86,7 +90,9 @@ context:
   </div>
 </div>
 
-<hr class="is-fixed-width">
+<div class="row">
+  <hr class="p-rule">
+</div>
 
 <div class="p-strip u-no-padding--top">
   <div class="row">
@@ -103,7 +109,9 @@ context:
   </div>
 </div>
 
-<hr class="is-fixed-width">
+<div class="row">
+  <hr class="p-rule">
+</div>
 
 <div class="p-strip u-no-padding--top">
   <div class="row">
@@ -141,7 +149,9 @@ it is very compact - as the headings do not push the body text down.</li>
 <div class="p-strip u-no-padding--top">
   <div class="row">
     <div class="col-9 col-start-large-4">
-      <hr>
+      <div class="row">
+    <hr class="p-rule">
+  </div>
       <h2>
           The 25/25/50 split
       </h2>
@@ -164,7 +174,9 @@ it is very compact - as the headings do not push the body text down.</li>
 <div class="p-strip u-no-padding--top">
   <div class="row">
     <div class="col-9 col-start-large-4">
-      <hr>
+      <div class="row">
+    <hr class="p-rule">
+  </div>
       <h2>
           The 25/75 split
       </h2>

templates/docs/patterns/rule.md

@@ -0,0 +1,44 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+  title: Rule | Components
+---
+
+# Rule
+
+<hr>
+
+The rule component indicates the beginning of a new group of elements. This might be at the section level, or between more granular elements, like paragraphs.
+
+It "anchors" elements that are far apart, and at risk of appearing floating in space.
+
+It indicates the direction in which we want the viewer to read the content.
+
+### Default
+
+<div class="embedded-example"><a href="/docs/examples/patterns/rule/default" class="js-example">
+View example of a default horizontal rule
+</a></div>
+
+### Highlighted
+
+You can add a highlight to a rule to make it stand out more. This is useful for drawing attention to a section of content.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/rule/highlight" class="js-example">
+View example of a highlighted rule
+</a></div>
+
+## Import
+
+To add a rule into your project, copy the snippet below and include it in your main Sass file.
+
+```scss
+// import Vanilla and include base mixins
+// this only needs to happen once in a given project
+@import 'vanilla-framework';
+@include vf-base;
+
+@include vf-p-rule;
+```
+
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.