feat: equal height grid row pattern

- Added equal height grid row pattern with full screen sized dividers

Signed-off-by: Mason Hu <mason.hu@canonical.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.9.1",
+  "version": "4.10.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.10.0
+  features:
+    - component: Equal height row
+      url: /docs/patterns/equal-height-row
+      status: New
+      notes: We've introduced new equal height row pattern using the css subgrid feature.
 - version: 4.9.0
   features:
     - component: Images

scss/_patterns_equal-height-row.scss

@@ -0,0 +1,151 @@
+@import 'settings';
+
+@mixin pseudo-border($width) {
+  background: var(--vf-color-border-default);
+  content: '';
+  display: block;
+  height: 1px;
+  position: absolute;
+  width: $width;
+}
+
+@mixin border-top {
+  border-top-color: $colors--theme--border-default;
+  border-top-style: solid;
+  border-top-width: 1px;
+  margin-top: -1px;
+}
+
+@mixin vf-p-equal-height-row {
+  .p-equal-height-row {
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+
+    .p-equal-height-col {
+      display: grid;
+      grid-column: span calc($grid-columns / 4);
+      grid-row: span 10;
+      grid-template-rows: subgrid;
+      position: relative;
+
+      @media screen and (width < $breakpoint-large) {
+        grid-column: span $grid-columns-medium;
+        grid-template-columns: subgrid;
+        @include border-top();
+
+        .p-equal-height-col-item {
+          grid-column: span calc($grid-columns-medium / 2);
+        }
+
+        .p-equal-height-col-item:first-child {
+          grid-row: span 100;
+        }
+      }
+
+      @media screen and (width < $breakpoint-small) {
+        grid-column: span $grid-columns-small;
+
+        .p-equal-height-col-item {
+          grid-column: span $grid-columns-small;
+        }
+
+        .p-equal-height-col-item:first-child {
+          grid-row: auto;
+        }
+      }
+    }
+
+    // divider base styles
+    &.has-divider-below-item-1::after,
+    &.has-divider-below-item-2::before,
+    &.has-divider-below-item-3:not(.has-divider-below-item-1)::after,
+    &.has-divider-below-item-3:not(.has-divider-below-item-2)::before {
+      @include pseudo-border(100%);
+      grid-column: span $grid-columns;
+    }
+
+    &.has-divider-below-item-1::after {
+      grid-row: 2;
+    }
+
+    &.has-divider-below-item-2::before {
+      grid-row: 3;
+    }
+
+    // Only have access to two pseudo elements at row level
+    // if item-1 (::after) is present, assume item-2 (::before) isn't, then item-3 must be (::before)
+    // if item-2 (::before) is present, assume item-1 (::after) isn't, then item-3 must be (::after)
+    &.has-divider-below-item-3:not(.has-divider-below-item-1)::after,
+    &.has-divider-below-item-3:not(.has-divider-below-item-2)::before {
+      grid-row: 4;
+    }
+
+    // For smaller screens, the divider pseudo elements are inserted at the column level
+    @media screen and (width < $breakpoint-large) {
+      // remove row level dividers
+      &[class*='has-divider-below-item-']::before,
+      &[class*='has-divider-below-item-']::after {
+        display: none;
+      }
+
+      // We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left
+      &.has-divider-below-item-2 .p-equal-height-col::before,
+      &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before,
+      &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after {
+        @include pseudo-border(100%);
+        grid-column: 4 / 7;
+      }
+
+      &.has-divider-below-item-2 .p-equal-height-col::before {
+        grid-row: 2;
+      }
+
+      &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before,
+      &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after {
+        grid-row: 3;
+      }
+    }
+
+    @media screen and (width < $breakpoint-small) {
+      &.has-divider-below-item-1 .p-equal-height-col::before,
+      &.has-divider-below-item-2 .p-equal-height-col::after,
+      &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before,
+      &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after {
+        @include pseudo-border(100%);
+        grid-column: span $grid-columns-small;
+      }
+
+      &.has-divider-below-item-1 .p-equal-height-col::before {
+        grid-row: 2;
+      }
+
+      &.has-divider-below-item-2 .p-equal-height-col::after {
+        grid-row: 3;
+      }
+
+      &.has-divider-below-item-3:not(.has-divider-below-item-1) .p-equal-height-col::before,
+      &.has-divider-below-item-3:not(.has-divider-below-item-2) .p-equal-height-col::after {
+        grid-row: 4;
+      }
+    }
+  }
+
+  // support for 25-75 split on large screen size for this pattern
+  .row--25-75-on-large > .col,
+  .row > .col-9 {
+    & .p-equal-height-row {
+      grid-gap: 0 map-get($grid-gutter-widths, default);
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+
+      @media screen and (width < $breakpoint-large) {
+        grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
+      }
+
+      @media screen and (width < $breakpoint-small) {
+        grid-gap: 0 map-get($grid-gutter-widths, small);
+        grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));
+      }
+    }
+  }
+}

scss/_vanilla.scss

@@ -4,18 +4,19 @@
 
 @import 'patterns_accordion';
 @import 'patterns_article-pagination';
+@import 'patterns_badge';
 @import 'patterns_breadcrumbs';
 @import 'patterns_buttons';
 @import 'patterns_card';
 @import 'patterns_chip';
-@import 'patterns_badge';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
 @import 'patterns_divider';
+@import 'patterns_equal-height-row';
 @import 'patterns_form-help-text';
-@import 'patterns_form-validation';
-@import 'patterns_form-tick-elements';
 @import 'patterns_form-password-toggle';
+@import 'patterns_form-tick-elements';
+@import 'patterns_form-validation';
 @import 'patterns_forms';
 @import 'patterns_grid';
 @import 'patterns_heading-icon';
@@ -39,22 +40,22 @@
 @import 'patterns_search-and-filter';
 @import 'patterns_search-box';
 @import 'patterns_section';
+@import 'patterns_segmented-control';
 @import 'patterns_separator';
-@import 'patterns_side-navigation';
 @import 'patterns_side-navigation-expandable';
+@import 'patterns_side-navigation';
 @import 'patterns_slider';
 @import 'patterns_status-label';
 @import 'patterns_strip';
+@import 'patterns_suru';
 @import 'patterns_switch';
-@import 'patterns_segmented-control';
-@import 'patterns_table-icons';
 @import 'patterns_table-expanding';
-@import 'patterns_table-of-contents';
+@import 'patterns_table-icons';
 @import 'patterns_table-mobile-card';
+@import 'patterns_table-of-contents';
 @import 'patterns_table-sortable';
 @import 'patterns_tabs';
 @import 'patterns_tooltips';
-@import 'patterns_suru';
 
 // Layouts
 @import 'layouts_application';
@@ -96,22 +97,23 @@
   // Patterns
   @include vf-p-accordion;
   @include vf-p-article-pagination;
+  @include vf-p-badge;
   @include vf-p-breadcrumbs;
   @include vf-p-buttons;
   @include vf-p-card;
   @include vf-p-chip;
-  @include vf-p-section;
-  @include vf-p-badge;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
   @include vf-p-divider;
+  @include vf-p-equal-height-row;
   @include vf-p-form-help-text;
-  @include vf-p-form-validation;
   @include vf-p-form-tick-elements;
+  @include vf-p-form-validation;
   @include vf-p-forms;
   @include vf-p-grid;
   @include vf-p-heading-icon;
   @include vf-p-headings;
+  @include vf-p-section;
 
   @include vf-p-form-password-toggle;
   @include vf-p-icons;

scss/standalone/patterns_equal-height-row.scss

@@ -0,0 +1,11 @@
+@import '../vanilla';
+@include vf-base;
+
+// dependencies needed for examples
+@include vf-p-buttons;
+@include vf-p-media-container;
+@include vf-p-headings;
+
+// vf-p-grid is needed for this pattern to work
+@include vf-p-grid;
+@include vf-p-equal-height-row;

side-navigation.yaml

@@ -30,6 +30,8 @@
   subheadings:
     - title: Accordion
       url: /docs/patterns/accordion
+    - title: Equal height row
+      url: /docs/patterns/equal-height-row
     - title: Badge
       url: /docs/patterns/badge
     - title: Breadcrumbs

templates/docs/examples/patterns/equal-height-row/25-75-grid.html

@@ -0,0 +1,106 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Equal height row / Use in 25-75 grid{% endblock %}
+
+{% block standalone_css %}patterns_equal-height-row{% endblock %}
+
+{% block content %}
+
+<div class="row--25-75-on-large">
+  <div class="col">
+    <a href="#">
+      <p class="p-muted-heading">Latest from our blog</p>
+    </a>
+  </div>
+  <div class="col">
+    <div class="p-equal-height-row">
+      <div class="p-equal-height-col">
+        <a href="#" class="p-equal-height-col-item">
+          <p>Unleash the power of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles</p>
+        </a>
+        <p class="p-equal-height-col-item">A few months ago, the OpenSSL Project announced the end of life of OpenSSL
+          1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with
+          many organisations relying on version 1.1.1....</p>
+        <div class="p-equal-height-col-item">
+          <hr class="p-rule" />
+          <a href="#">
+            <p>Learn more</p>
+          </a>
+        </div>
+      </div>
+      <div class="p-equal-height-col">
+        <a href="#" class="p-equal-height-col-item">
+          <p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p>
+        </a>
+        <p class="p-equal-height-col-item">If you&apos;ve been following my previous blog posts, you already know that
+          the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area
+          that&apos;s particularly challenging and in flux....</p>
+        <div class="p-equal-height-col-item">
+          <hr class="p-rule" />
+          <a href="#">
+            <p>Learn more</p>
+          </a>
+        </div>
+      </div>
+      <div class="p-equal-height-col">
+        <a href="#" class="p-equal-height-col-item">
+          <p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p>
+        </a>
+        <p class="p-equal-height-col-item">Today, around 96% of software projects utilize open source in some way. The
+          web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so
+          almost everything we do and work on can be found publicly on the Canonical Github org.</p>
+        <div class="p-equal-height-col-item">
+          <hr class="p-rule" />
+          <a href="#">
+            <p>Learn more</p>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="p-equal-height-row">
+      <div class="p-equal-height-col">
+        <a href="#" class="p-equal-height-col-item">
+          <p>Unleash the power of GPU: Ubuntu WorkSpaces now support Graphics G4dn bundles</p>
+        </a>
+        <p class="p-equal-height-col-item">A few months ago, the OpenSSL Project announced the end of life of OpenSSL
+          1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with
+          many organisations relying on version 1.1.1....</p>
+        <div class="p-equal-height-col-item">
+          <hr class="p-rule" />
+          <a href="#">
+            <p>Learn more</p>
+          </a>
+        </div>
+      </div>
+      <div class="p-equal-height-col">
+        <a href="#" class="p-equal-height-col-item">
+          <p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p>
+        </a>
+        <p class="p-equal-height-col-item">If you&apos;ve been following my previous blog posts, you already know that
+          the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area
+          that&apos;s particularly challenging and in flux....</p>
+        <div class="p-equal-height-col-item">
+          <hr class="p-rule" />
+          <a href="#">
+            <p>Learn more</p>
+          </a>
+        </div>
+      </div>
+      <div class="p-equal-height-col">
+        <a href="#" class="p-equal-height-col-item">
+          <p>Canonical joins SOAFEE SIG Ubuntu Desktop 23.10:Mantic Minotaur deep dive</p>
+        </a>
+        <p class="p-equal-height-col-item">Today, around 96% of software projects utilize open source in some way. The
+          web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so
+          almost everything we do and work on can be found publicly on the Canonical Github org.</p>
+        <div class="p-equal-height-col-item">
+          <hr class="p-rule" />
+          <a href="#">
+            <p>Learn more</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}