vanilla-framework 4.18.4 → 4.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.4",
+  "version": "4.19.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -30,8 +30,8 @@
     "start": "yarn build && yarn serve",
     "build": "yarn build-scss && yarn build-js && yarn build-class-references",
     "build-tokens": "((style-dictionary build --verbose --config ./sd.config.json) || true)",
-    "build-scss": "yarn build-tokens && sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
-    "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build-scss": "yarn build-tokens && sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls,import,global-builtin scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls,import,global-builtin scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules && cp node_modules/js-beautify/js/lib/beautify.js node_modules/js-beautify/js/lib/beautify-html.js node_modules/js-beautify/js/lib/beautify-css.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
     "cypress:open": "cypress open",
@@ -42,8 +42,8 @@
     "test": "yarn lint-scss && yarn lint-prettier &&  yarn test-spelling && yarn test-scss && yarn jest",
     "lint-prettier": "prettier -c .",
     "lint-scss": "stylelint 'scss/**/*.scss'",
-    "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss:build/css --watch",
-    "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss/build.scss:build/css/build.css --watch",
+    "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls,import,global-builtin scss:build/css --watch",
+    "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls,import,global-builtin scss/build.scss:build/css/build.css --watch",
     "watch": "yarn build && yarn watch:scss",
     "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
     "percy": "percy snapshot snapshots.js",
@@ -57,12 +57,12 @@
     "/templates/_macros"
   ],
   "devDependencies": {
-    "@canonical/cookie-policy": "3.6.4",
+    "@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 -#}
@@ -142,9 +144,11 @@
           {{ _hero_title_block() }}
         </div>
         <div class="{{ col_classes[1] }}">
-          <div class="p-section--shallow">
-            {{- _hero_subtitle_block() -}}
-          </div>
+          {% if has_subtitle %}
+            <div class="p-section--shallow">
+              {{- _hero_subtitle_block() -}}
+            </div>
+          {% endif %}
           {{- _hero_description_block() -}}
           {{- _hero_cta_block() -}}
         </div>