vanilla-framework 3.4.0 → 3.5.0

package/package.json

@@ -45,7 +45,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.4.0",
+  "version": "3.5.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -56,10 +56,10 @@
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.3.0",
     "autoprefixer": "10.4.7",
-    "postcss": "8.4.13",
+    "postcss": "8.4.14",
     "postcss-cli": "9.1.0",
-    "postcss-scss": "4.0.3",
-    "sass": "1.51.0",
+    "postcss-scss": "4.0.4",
+    "sass": "1.52.2",
     "yaml": "1.10.2"
   },
   "devDependencies": {
@@ -68,7 +68,7 @@
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "prettier": "2.6.2",
-    "stylelint": "14.8.2",
+    "stylelint": "14.8.5",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_patterns_side-navigation.scss

@@ -41,6 +41,12 @@
         .p-side-navigation__toggle--in-drawer:
             Side navigation toggle button in drawer (to close navigation on small screens).
 
+    Items list heading:
+        .p-side-navigation__heading:
+            Heading for side navigation items group (text only).
+        .p-side-navigation__heading--linked:
+            Heading for side navigation items group that contains a link (`.p-side-navigation__link`).
+
     Items list:
         .p-side-navigation__list:
             Group of side navigation items (usually a `<ul>` element).
@@ -276,6 +282,18 @@
     padding-top: $spv--x-small;
   }
 
+  %side-navigation__heading {
+    @extend %side-navigation__text;
+
+    // reset heading styles
+    @extend %common-default-text-properties;
+    @extend %bold;
+
+    display: block;
+    font-size: map-get($base-font-sizes, base);
+    margin: 0;
+  }
+
   %side-navigation__link {
     @include vf-focus;
 
@@ -300,6 +318,7 @@
     @extend %side-navigation__link;
   }
 
+  .p-side-navigation__heading,
   .p-side-navigation__text,
   .p-side-navigation__link {
     @extend %side-navigation__text;
@@ -345,6 +364,15 @@
     padding-left: $spv--small;
   }
 
+  .p-side-navigation__heading,
+  .p-side-navigation__heading--linked {
+    @extend %side-navigation__heading;
+  }
+
+  .p-side-navigation__heading--linked {
+    padding: 0; // padding will come from the link in heading
+  }
+
   // Styles for markup in raw HTML docs variant
   .p-side-navigation--raw-html {
     // stylelint-disable selector-max-type -- we support raw HTML markup for discourse-generated side nav
@@ -353,14 +381,7 @@
     h4,
     h5,
     h6 {
-      @extend %side-navigation__text;
-
-      // reset heading styles
-      @extend %common-default-text-properties;
-      @extend %bold;
-
-      font-size: map-get($base-font-sizes, base);
-      margin: 0;
+      @extend %side-navigation__heading;
     }
 
     ul {
@@ -558,6 +579,8 @@
     }
   }
 
+  .p-side-navigation__heading,
+  .p-side-navigation__heading--linked .p-side-navigation__link,
   .p-side-navigation__item--title,
   .p-side-navigation__item--title .p-side-navigation__link {
     color: $color-sidenav-text-active;