vanilla-framework 4.18.5 → 4.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.5",
+  "version": "4.19.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/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 -#}