rename horizontal list to horizontal section | various cleanup

releases.yml

@@ -1,9 +1,9 @@
 - version: 4.19.0
   features:
     - component: List
-      url: /docs/patterns/lists#horizontal-new
+      url: /docs/patterns/lists#horizontal-section-new
       status: New
-      notes: We've introduced the <code>.p-list--horizontal</code> list variant.
+      notes: We've introduced the <code>.p-list--horizontal-section</code> list variant.
 - version: 4.18.0
   features:
     - component: Quote wrapper

scss/_base_placeholders.scss

@@ -67,17 +67,6 @@
     padding-left: 0;
   }
 
-  %vf-list-with-state-icons {
-    @extend %vf-list;
-
-    .p-list__item {
-      &.is-ticked::before,
-      &.is-crossed::before {
-        top: $spv--medium;
-      }
-    }
-  }
-
   // Bars and borders
   %vf-pseudo-border {
     background-color: $colors--theme--border-default;

scss/_patterns_lists.scss

@@ -134,6 +134,13 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
+  %vf-list-item-with-divisor-common-properties {
+    box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
+    margin: 0;
+    padding-bottom: $sph--large;
+    padding-top: $sph--small;
+  }
+
   %vf-list-item-bullet {
     &::before {
       color: $colors--theme--text-default;
@@ -149,6 +156,7 @@ $list-step-bullet-margin: $sph--x-large;
   position: relative;
 
   > .p-list--divided,
+  > .p-list--horizontal-section,
   > .p-list {
     margin-left: 0;
   }
@@ -161,10 +169,7 @@ $list-step-bullet-margin: $sph--x-large;
 }
 
 @mixin vf-list-item-divided {
-  box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
-  margin: 0;
-  padding-bottom: $sph--large;
-  padding-top: $sph--small;
+  @extend %vf-list-item-with-divisor-common-properties;
 
   &:first-child {
     box-shadow: none;
@@ -175,6 +180,18 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
+@mixin vf-list-item-horizontal-section {
+  @extend %vf-list-item-with-divisor-common-properties;
+}
+
+// Offset a list item icon (tick or cross) away from the divisor above it
+@mixin vf-list-item-icon-divisor-offset {
+  &.is-ticked::before,
+  &.is-crossed::before {
+    top: $spv--medium;
+  }
+}
+
 // Mixin for inline list items
 @mixin vf-inline-list-item {
   display: inline;
@@ -199,14 +216,15 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
-@mixin vf-p-list-horizontal {
-  .p-list--horizontal {
-    @extend %vf-list-with-state-icons;
+@mixin vf-p-list-horizontal-section {
+  .p-list--horizontal-section {
     @extend %vf-grid-row;
+    @extend %vf-list;
 
     .p-list__item {
       @extend %vf-list-item;
-      border-top: $border;
+      @include vf-list-item-icon-divisor-offset;
+      @include vf-list-item-horizontal-section;
 
       grid-column-end: span $grid-8-columns-small;
 
@@ -219,7 +237,7 @@ $list-step-bullet-margin: $sph--x-large;
       }
     }
   }
-  .p-list--horizontal.is-3-cols-on-large {
+  .p-list--horizontal-section.is-25-75 {
     .p-list__item {
       // Skip the first two columns on large
       @media (min-width: $threshold-6-12-col) {
@@ -240,11 +258,12 @@ $list-step-bullet-margin: $sph--x-large;
 // A list with separators between items
 @mixin vf-p-list-divided {
   .p-list--divided {
-    @extend %vf-list-with-state-icons;
+    @extend %vf-list;
 
     .p-list__item {
       @extend %vf-list-item;
       @include vf-list-item-divided;
+      @include vf-list-item-icon-divisor-offset;
     }
 
     & & {
@@ -259,7 +278,8 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   // stylelint-disable selector-max-type -- we want to target ordered lists
-  ol.p-list--divided {
+  ol.p-list--divided,
+  ol.p-list--horizontal-section {
     counter-reset: p-list-divided-counter;
     list-style: none;
 
@@ -522,7 +542,7 @@ $list-step-bullet-margin: $sph--x-large;
   @include vf-p-list-placeholders;
 
   @include vf-p-list;
-  @include vf-p-list-horizontal;
+  @include vf-p-list-horizontal-section;
   @include vf-p-list-divided;
   @include vf-p-list-item-state;
   @include vf-p-inline-list;

templates/docs/examples/patterns/lists/_list-horizontal-section-example.jinja

@@ -0,0 +1,45 @@
+{%  macro list_horizontal_section_example(list_item_style="", layout_variant_class="") %}
+  {% set list_item_style = list_item_style | trim %}
+  {% set layout_variant_class = layout_variant_class | trim %}
+
+  {% set list_classes = "p-list--horizontal-section" %}
+  {% if layout_variant_class | length > 0 %}
+    {% set list_classes = list_classes + " " + layout_variant_class %}
+  {% endif %}
+
+  {% set list_tag = "ul" %}
+  {% if list_item_style == "ordered" %}
+    {% set list_tag = "ol" %}
+    {% set list_item_style = "" %}
+  {% endif %}
+
+  {% set list_item_classes = "p-list__item" %}
+  {% if list_item_style | length > 0 %}
+    {% set list_item_classes = list_item_classes + " " + list_item_style %}
+  {% endif %}
+
+  <{{ list_tag }} class="{{ list_classes }}">
+    <li class="{{ list_item_classes }}">
+      10 year security maintenance and CVE Patching
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">Kernel Livepatch</a> for 24/7 patching with no downtime
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">Expanded security</a> for infrastructure and applications
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">FIPS 140-2</a> cryptographic modules certified by NIST
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">Common Criteria EAL2</a>: ISO/IEC IS 15408 validated by CSEC
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">DISA/STIG</a> hardening for <abbr title="Department of Defence, USA">DoD</abbr>
+      compliance
+    </li>
+    <li class="{{ list_item_classes }}">
+      <a href="#">CIS profiles</a> for cyber defence and malware prevention
+    </li>
+  </{{ list_tag }}>
+{% endmacro %}

templates/docs/examples/patterns/lists/combined.html

@@ -26,7 +26,13 @@
 <section>{% include 'docs/examples/patterns/lists/lists-stepped-heading-classes.html' %}</section>
 <section>{% include 'docs/examples/patterns/lists/lists-stepped-headings.html' %}</section>
 <section>{% include 'docs/examples/patterns/lists/lists-stepped-without-headings.html' %}</section>
-<section>{% include 'docs/examples/patterns/lists/lists-horizontal-responsive.html' %}</section>
-<section>{% include 'docs/examples/patterns/lists/lists-horizontal-3-cols-on-large-responsive.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-bulleted.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-crossed.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-ordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-responsive-ticked.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-bulleted.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-crossed.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ordered.html' %}</section>
+<section>{% include 'docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ticked.html' %}</section>
 {% endwith %}
 {% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-bulleted.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Bulleted{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('has-bullet', 'is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-crossed.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Crossed{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('is-crossed', 'is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ordered.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Ordered{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('ordered', 'is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-25-75-responsive-ticked.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / 25/75 / Ticked{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('is-ticked', 'is-25-75') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-responsive-bulleted.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / Bulleted{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('has-bullet') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-responsive-crossed.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / Crossed{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('is-crossed') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-responsive-ordered.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / Ordered{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('ordered') }}
+{% endblock %}

templates/docs/examples/patterns/lists/lists-horizontal-section-responsive-ticked.html

@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal section / Ticked{% endblock %}
+{% from "docs/examples/patterns/lists/_list-horizontal-section-example.jinja" import list_horizontal_section_example %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+{{ list_horizontal_section_example('is-ticked') }}
+{% endblock %}