vanilla-framework 4.18.5 → 4.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.5",
+  "version": "4.20.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -59,10 +59,10 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.5",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.30.3",
+    "@percy/cli": "1.30.6",
     "@testing-library/cypress": "10.0.2",
     "autoprefixer": "10.4.20",
-    "cypress": "13.16.0",
+    "cypress": "13.17.0",
     "jest": "29.7.0",
     "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
@@ -71,15 +71,15 @@
     "postcss": "8.4.49",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.4.1",
-    "sass": "1.81.0",
-    "style-dictionary": "4.2.0",
-    "stylelint": "16.11.0",
+    "prettier": "3.4.2",
+    "sass": "1.83.1",
+    "style-dictionary": "4.3.0",
+    "stylelint": "16.12.0",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.2",
     "svgo": "3.3.2",
-    "yaml": "2.6.1"
+    "yaml": "2.7.0"
   },
   "peerDependencies": {
     "sass": "^1.79.0"

package/scss/_base_icon-definitions.scss

@@ -1471,3 +1471,18 @@
 @mixin vf-icon-website-themed {
   @include vf-themed-icon($light-value: vf-icon-website-url($colors--light-theme--icon), $dark-value: vf-icon-website-url($colors--dark-theme--icon));
 }
+
+// ICONS ADDED IN JANUARY 2025 v4.19.0
+
+// credit card
+@function vf-icon-credit-card-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M13 4.5H3c-.27614 0-.5.22386-.5.5v.75h11V5c0-.27614-.2239-.5-.5-.5ZM2.5 11V7.25h11V11c0 .2761-.2239.5-.5.5H3c-.27614 0-.5-.2239-.5-.5ZM3 3c-1.10457 0-2 .89543-2 2v6c0 1.1046.89543 2 2 2h10c1.1046 0 2-.8954 2-2V5c0-1.10457-.8954-2-2-2H3Zm7.75 5.5c-.4142 0-.75.33579-.75.75v.5c0 .4142.3358.75.75.75h.5c.4142 0 .75-.3358.75-.75v-.5c0-.41421-.3358-.75-.75-.75h-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-credit-card($color) {
+  background-image: vf-icon-credit-card-url($color);
+}
+
+@mixin vf-icon-credit-card-themed {
+  @include vf-themed-icon($light-value: vf-icon-credit-card-url($colors--light-theme--icon), $dark-value: vf-icon-credit-card-url($colors--dark-theme--icon));
+}

package/scss/_patterns_icons.scss

@@ -2042,4 +2042,13 @@
   }
 }
 
+// ICONS ADDED IN JANUARY 2025
+
+@mixin vf-p-icon-credit-card {
+  .p-icon--credit-card {
+    @extend %icon;
+    @include vf-icon-credit-card-themed;
+  }
+}
+
 // **Base and Pattern mixins accurate as of October 2024**

package/scss/_patterns_lists.scss

@@ -134,6 +134,12 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
+  %vf-list-item-with-divisor-common-properties {
+    margin: 0;
+    padding-bottom: $sph--large;
+    padding-top: $sph--small;
+  }
+
   %vf-list-item-bullet {
     &::before {
       color: $colors--theme--text-default;
@@ -149,6 +155,7 @@ $list-step-bullet-margin: $sph--x-large;
   position: relative;
 
   > .p-list--divided,
+  > .p-list--horizontal-section,
   > .p-list {
     margin-left: 0;
   }
@@ -161,10 +168,9 @@ $list-step-bullet-margin: $sph--x-large;
 }
 
 @mixin vf-list-item-divided {
+  @extend %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;
 
   &:first-child {
     box-shadow: none;
@@ -175,6 +181,21 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
+@mixin vf-list-item-horizontal-section {
+  @extend %vf-list-item-with-divisor-common-properties;
+
+  // Allows list item pseudo-elements to be absolutely positioned relative to the list item
+  position: relative;
+}
+
+// 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,6 +220,87 @@ $list-step-bullet-margin: $sph--x-large;
   }
 }
 
+// Sets horizontal list section grid column count and makes list item borders span the full grid width.
+// $columns: Number of columns that the list items should be divided into.
+// $skip-cols: Number of columns at the start of each row to skip
+@mixin list-horizontal-section-row-width($columns, $skip-cols: 0) {
+  --columns: #{$columns + $skip-cols};
+  // List item borders span full grid width, not list item width.
+  // Multiply 100% width by the number of columns to create a border that spans the full grid width.
+  .p-list__item:nth-child(#{$columns}n + 1)::after {
+    background: $colors--theme--border-low-contrast;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    // 100% * columns = total width of all list item columns in a row
+    // (gutter width) * (columns - 1) = total width of all gutters in a row
+    // width = (width of list items) + (width of gutters)
+    width: calc(100% * #{$columns} + #{$columns - 1} * map-get($grid-gutter-widths, default));
+  }
+
+  @if $skip-cols > 0 {
+    @for $i from 1 through $skip-cols {
+      .p-list__item:nth-child(#{$columns}n + #{$i}) {
+        grid-column-start: #{($i + 1)};
+      }
+    }
+  }
+}
+
+@mixin vf-p-list-horizontal-section {
+  $horizontal-list-section-medium-content-width: 66ch;
+  $horizontal-list-section-large-content-width: 100ch;
+
+  .p-list--horizontal-section-wrapper {
+    container-type: inline-size;
+
+    .p-list--horizontal-section {
+      @extend %vf-list;
+      @extend %fixed-width-container;
+
+      display: grid;
+
+      @container (width >= #{$horizontal-list-section-medium-content-width}) {
+        grid-gap: 0 map-get($grid-gutter-widths, default);
+      }
+
+      @container (width < #{$horizontal-list-section-medium-content-width}) {
+        @include list-horizontal-section-row-width($columns: 1);
+      }
+
+      @container (#{$horizontal-list-section-medium-content-width} <= width < #{$horizontal-list-section-large-content-width}) {
+        @include list-horizontal-section-row-width($columns: 2);
+      }
+
+      // We cannot override the default behavior with modifiers, as each container query creates styles for different pseudo-element indices
+      // So, we need to negate variant selectors before applying any styling that does not apply to all variants
+      &:not(.is-25-75) {
+        @container (width >= #{$horizontal-list-section-large-content-width}) {
+          @include list-horizontal-section-row-width($columns: 4);
+        }
+      }
+
+      // --columns is set in the container queries above
+      grid-template-columns: repeat(var(--columns), 1fr);
+
+      .p-list__item {
+        @extend %vf-list-item;
+        @include vf-list-item-icon-divisor-offset;
+        @include vf-list-item-horizontal-section;
+      }
+    }
+
+    .p-list--horizontal-section.is-25-75 {
+      // skip first column on large
+      @container (width >= #{$horizontal-list-section-large-content-width}) {
+        @include list-horizontal-section-row-width($columns: 3, $skip-cols: 1);
+      }
+    }
+  }
+}
+
 // A list with separators between items
 @mixin vf-p-list-divided {
   .p-list--divided {
@@ -207,11 +309,7 @@ $list-step-bullet-margin: $sph--x-large;
     .p-list__item {
       @extend %vf-list-item;
       @include vf-list-item-divided;
-
-      &.is-ticked::before,
-      &.is-crossed::before {
-        top: $spv--medium;
-      }
+      @include vf-list-item-icon-divisor-offset;
     }
 
     & & {
@@ -226,7 +324,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;
 
@@ -489,6 +588,7 @@ $list-step-bullet-margin: $sph--x-large;
   @include vf-p-list-placeholders;
 
   @include vf-p-list;
+  @include vf-p-list-horizontal-section;
   @include vf-p-list-divided;
   @include vf-p-list-item-state;
   @include vf-p-inline-list;

package/templates/_macros/vf_hero.jinja

@@ -73,8 +73,10 @@
 
   {%- macro _hero_title_block() -%}
     {%- if has_full_width_image -%}
+      {%- if has_subtitle -%}
       {#- On full-width-image, the h1 and h2 are in separate columns, so there must be no margin-bottom to keep h1 close to h2 on smaller screens  -#}
-      {% set title_class = "u-no-margin--bottom" %}
+        {% set title_class = "u-no-margin--bottom" %}
+      {%- endif -%}
     {%- endif -%}
 
     {#- Only add a class attribute if needed -#}

package/templates/_macros/vf_tiered-list.jinja

@@ -19,7 +19,7 @@
   {%- set has_cta = cta_content|trim|length > 0 -%}
 
   <div class="u-fixed-width">
-    <hr class="u-hide--small">
+    <hr class="p-rule">
 
     {% if has_description == true -%}
       {%- if is_description_full_width_on_desktop == true -%}