Update dependency vanilla-framework to v3

.stylelintignore

@@ -0,0 +1 @@
+static/sass/_hljs.scss

.stylelintrc

@@ -1,22 +1,31 @@
 {
-  "extends": "stylelint-config-standard",
-  "plugins": [
-    "stylelint-order"
-  ],
-  "ignoreFiles": ["static/sass/_hljs.scss"],
+  "extends": ["stylelint-config-recommended-scss"],
+  "plugins": ["stylelint-order"],
   "rules": {
+    "no-invalid-position-at-import-rule": null,
+    "scss/comment-no-empty": null,
+    "scss/no-global-function-names": null,
+    "scss/operator-no-unspaced": null,
+
+    "function-url-scheme-allowed-list": ["data"],
+    "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
+
+    "max-nesting-depth": 3,
+
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/at-import-no-partial-leading-underscore": true,
+    "scss/at-import-partial-extension": "never",
+
     "order/properties-alphabetical-order": true,
-    "at-rule-no-unknown": [ true, {
-      "ignoreAtRules": [
-        "extend",
-        "include",
-        "mixin",
-        "for",
-        "function",
-        "if",
-        "warn",
-        "return"
-        ]
-    } ],
+    "no-descending-specificity": [true, {"severity": "warning"}],
+
+    "property-no-vendor-prefix": true,
+    "value-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "at-rule-no-vendor-prefix": true
   }
-}
+}

package.json

@@ -23,9 +23,9 @@
   "author": "Canonical webteam",
   "license": "LGPL v3",
   "devDependencies": {
-    "stylelint": "13.13.1",
-    "stylelint-config-standard": "20.0.0",
-    "stylelint-order": "4.1.0"
+    "stylelint": "14.6.1",
+    "stylelint-config-recommended-scss": "5.0.2",
+    "stylelint-order": "5.0.0"
   },
   "dependencies": {
     "autoprefixer": "10.4.2",
@@ -36,7 +36,7 @@
     "postcss": "8.4.6",
     "postcss-cli": "9.1.0",
     "sass": "1.49.7",
-    "vanilla-framework": "2.37.1",
+    "vanilla-framework": "3.2.0",
     "venobox": "2.0.4"
   }
 }

static/sass/_layout_docs.scss

@@ -13,7 +13,7 @@
   }
 
   .l-docs-title,
-  .l-docs-title[class^='p-strip'] {
+  .l-docs-title[class^="p-strip"] {
     @media only screen and (min-width: 1030px) {
       background-color: transparent;
       padding-bottom: 0;
@@ -69,7 +69,7 @@
     padding: 0 $sp-xxx-large;
 
     @media only screen and (max-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph-outer--large;
+      padding-left: $sph--large + $sph--small;
     }
   }
 

static/sass/_patterns_contact-modal.scss

@@ -14,19 +14,19 @@
       .p-modal__dialog {
         margin-bottom: 0;
 
-        @media (min-width: $breakpoint-medium + 100px) {
-          max-width: $breakpoint-medium;
-          min-width: $breakpoint-medium;
+        @media (min-width: $breakpoint-large + 100px) {
+          max-width: $breakpoint-large;
+          min-width: $breakpoint-large;
         }
       }
 
       .p-modal__header {
         border-bottom: 1px solid $color-mid-light;
-        margin-bottom: $spv-inner--large;
+        margin-bottom: $spv--large;
       }
 
       .p-modal__title {
-        margin-bottom: $spv-inner--small;
+        margin-bottom: $spv--small;
       }
 
       &.thank-you {
@@ -39,15 +39,15 @@
         }
       }
 
-      @media only screen and (min-width: $breakpoint-medium) {
+      @media only screen and (min-width: $breakpoint-large) {
         .u-align {
           padding-bottom: 70px;
+        }
 
-          &--bottom {
-            bottom: 0;
-            margin-top: 1rem;
-            position: absolute;
-          }
+        .u-align--bottom {
+          bottom: 0;
+          margin-top: 1rem;
+          position: absolute;
         }
 
         .pagination__link--next,

static/sass/_patterns_lists.scss

@@ -39,7 +39,7 @@
     min-height: 2.3rem;
     padding-left: 55px;
 
-    @media (max-width: $breakpoint-medium) {
+    @media (max-width: $breakpoint-large) {
       padding: 0.5rem 0 0.5rem 50px;
     }
   }

static/sass/_patterns_modal.scss

@@ -86,7 +86,7 @@
     top: 20px;
     width: 100px;
 
-    @media screen and (max-width: $breakpoint-medium) {
+    @media screen and (max-width: $breakpoint-large) {
       background-position: top 20px right 20px;
     }
   }

static/sass/_patterns_sidenav.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin maas-p-sidenav {
   .p-sidenav__toggle {
     background-size: $sp-medium;
@@ -10,7 +12,7 @@
     // Fix p-sidebar-nav to understand
     // h3 headings, and not require any classes on the <ul>s and <li>s
     // Because the markup is pulled directly in from Discourse
-    padding: $sp-large / 2 $sp-large;
+    padding: math.div($sp-large, 2) $sp-large;
 
     a,
     a:visited {

static/sass/_patterns_takeunders.scss

@@ -5,7 +5,7 @@
     margin-right: -1 rem;
     padding: $sp-x-large;
 
-    @media only screen and (min-width: $breakpoint-medium) {
+    @media only screen and (min-width: $breakpoint-large) {
       padding: $sp-x-large $sp-medium $sp-medium $sp-medium;
     }
 
@@ -28,8 +28,8 @@
     }
 
     & + & {
-      @media only screen and (max-width: $breakpoint-medium) {
-        margin-top: $spv-outer--medium;
+      @media only screen and (max-width: $breakpoint-large) {
+        margin-top: $spv--large;
       }
     }
   }

static/sass/_patterns_tutorials.scss

@@ -85,15 +85,15 @@
   .p-tutorial__pagination-item--prev {
     @extend %p-tutorial-pagination-item;
 
-    .p-icon--contextual-menu {
+    .p-icon--chevron-down {
       transform: rotate(90deg);
     }
   }
 
   .p-tutorial__pagination-item--next {
     @extend %p-tutorial-pagination-item;
 
-    .p-icon--contextual-menu {
+    .p-icon--chevron-down {
       transform: rotate(-90deg);
     }
   }

static/sass/main.scss

@@ -45,7 +45,7 @@ $breakpoint-navigation-threshold: 960px;
   flex-wrap: wrap;
   width: 100%;
 
-  @media only screen and (min-width: $breakpoint-medium) {
+  @media only screen and (min-width: $breakpoint-large) {
     margin-bottom: 2rem;
   }
 }
@@ -57,14 +57,14 @@ $breakpoint-navigation-threshold: 960px;
 .p-heading-icon-block__icon {
   border-radius: 0;
   height: auto;
-  margin-bottom: $spv-inner--small;
-  margin-right: $sph-inner;
-  padding-right: $sph-inner;
-  width: ($sp-unit * 5) + $sph-inner;
+  margin-bottom: $spv--small;
+  margin-right: $sph--large;
+  padding-right: $sph--large;
+  width: ($sp-unit * 5) + $sph--large;
 }
 
 .u-indent {
-  @media only screen and (min-width: $breakpoint-medium) {
+  @media only screen and (min-width: $breakpoint-large) {
     float: right;
     width: calc(100% - 8.5rem);
   }

templates/500.html

@@ -8,7 +8,7 @@
   <div class="row">
     <div class="col-8">
       <h1>Server error</h1>
-      <p>You can make a fresh start at the <a href="/">MAAS home page</a>.<br> Still can't find what you're looking for? <a class="p-link--external" href="http://www.ubuntu.com/contact-us">Get in touch today</a>.</p>
+      <p>You can make a fresh start at the <a href="/">MAAS home page</a>.<br> Still can't find what you're looking for? <a href="http://www.ubuntu.com/contact-us">Get in touch today</a>.</p>
     </div>
   </div>
 </section>

templates/blog/index.html

@@ -55,12 +55,12 @@
       {% if current_page > 1 %}
         <li class="p-pagination__item">
           <a class="p-pagination__link--previous" href="/blog?page={{ current_page - 1 }}" title="Previous page">
-            <i class="p-icon--contextual-menu">Previous page</i>
+            <i class="p-icon--chevron-down">Previous page</i>
           </a>
         </li>
       {% else %}
         <li class="p-pagination__item">
-          <span class="p-pagination__link--previous is-disabled"><i class="p-icon--contextual-menu">Previous page</i></span>
+          <span class="p-pagination__link--previous is-disabled"><i class="p-icon--chevron-down">Previous page</i></span>
         </li>
       {% endif %}
 
@@ -121,12 +121,12 @@
       {% if current_page != total_pages %}
         <li class="p-pagination__item">
           <a class="p-pagination__link--next" href="/blog?page={{ current_page + 1 }}" title="Next page">
-            <i class="p-icon--contextual-menu">Next page</i>
+            <i class="p-icon--chevron-down">Next page</i>
           </a>
         </li>
       {% else %}
         <li class="p-pagination__item">
-          <span class="p-pagination__link--next is-disabled"><i class="p-icon--contextual-menu">Next page</i></span>
+          <span class="p-pagination__link--next is-disabled"><i class="p-icon--chevron-down">Next page</i></span>
         </li>
       {% endif %}
     </ol>

templates/contact-us.html

@@ -10,12 +10,12 @@
   <div class="row">
     <div class="col-8">
       <h1 itemprop="description">Contact Canonical</h1>
-      <p class="p-heading--four">Are you interested in adopting MAAS for enterprise use or partner with Canonical? Just fill in the form below and a member of our team will be in touch within one working day. </p>
+      <p class="p-heading--4">Are you interested in adopting MAAS for enterprise use or partner with Canonical? Just fill in the form below and a member of our team will be in touch within one working day. </p>
     </div>
     <div class="p-card col-4 u-no-margin--bottom">
       <h3 class="p-card__title">Looking for a little professional support?</h3>
       <p>If you are a small organisation, you can purchase packs of Ubuntu Advantage in our shop.</p>
-      <p><a href="https://buy.ubuntu.com" class="p-link--external" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'External link', 'eventAction' : 'Click', 'eventLabel' : 'Visit the Ubuntu Advantage shop' });">Visit the Ubuntu Advantage shop</a></p>
+      <p><a href="https://buy.ubuntu.com" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'External link', 'eventAction' : 'Click', 'eventLabel' : 'Visit the Ubuntu Advantage shop' });">Visit the Ubuntu Advantage shop</a></p>
     </div>
   </div>
 </section>

templates/docs/document.html

@@ -47,7 +47,7 @@ <h1 class="u-no-margin--bottom l-docs-title__heading">{{ document.title }}</h1>
       <div class="p-strip is-shallow u-no-padding--bottom u-sticky--bottom">
         <div class="l-docs-row row">
           <div class="p-notification--information">
-            <p class="p-notification__response">
+            <p class="p-notification__content">
               <a href="{{ forum_url }}{{ document.topic_path }}">Help improve this document in the forum</a>.
             </p>
           </div>

templates/docs/search.html

@@ -25,9 +25,9 @@
       <div class="row">
         <div class="col-12">
           {% if results and results.entries %}
-            <h1 class="p-heading--two u-no-margin--bottom">We've found these results for your search <strong>"{{ query }}"</strong></h1>
+            <h1 class="p-heading--2 u-no-margin--bottom">We've found these results for your search <strong>"{{ query }}"</strong></h1>
           {% else %}
-            <h1 class="p-heading--two u-no-margin--bottom">We haven't found any results for your search <strong>"{{ query }}"</strong>.</h1>
+            <h1 class="p-heading--2 u-no-margin--bottom">We haven't found any results for your search <strong>"{{ query }}"</strong>.</h1>
           {% endif %}
         </div>
       </div>

templates/how-it-works.html

@@ -131,17 +131,17 @@ <h2>The node lifecycle</h2>
             }}
         </div>
         <div class="col-7">
-            <h3 class="p-heading--four">New</h3>
+            <h3 class="p-heading--4">New</h3>
             <p>New machines which PXE-boot on a MAAS network will be enlisted automatically if MAAS can detect their BMC parameters. The easiest way to enlist standard <abbr>IPMI</abbr> servers is simply to PXE-boot them on the MAAS network.</p>
-            <h3 class="p-heading--four">Commissioning</h3>
+            <h3 class="p-heading--4">Commissioning</h3>
             <p>Detailed inventory of RAM, CPU, disks, NICs and accelerators like GPUs itemised and usable as constraints for machine selection. It is possible to run your own scripts for site-specific tasks such as firmware updates.</p>
-            <h3 class="p-heading--four">Ready</h3>
+            <h3 class="p-heading--4">Ready</h3>
             <p>A machine that is successfully commissioned is considered &ldquo;Ready&rdquo;. It will have configured BMC credentials (on IPMI based BMCs) for ongoing  power control, ensuring that MAAS can start or stop the machine and allocate or (re)deploy it with a fresh operating system.</p>
-            <h3 class="p-heading--four">Allocated</h3>
+            <h3 class="p-heading--4">Allocated</h3>
             <p>Ready machines can be allocated to users, who can configure network interface bonding and addressing, and disks, such as LVM, RAID, bcache or partitioning.</p>
-            <h3 class="p-heading--four">Deploying</h3>
+            <h3 class="p-heading--4">Deploying</h3>
             <p>Users then can ask MAAS to turn the machine on and install a complete server operating system from scratch without any manual intervention, configuring network interfaces, disk partitions and more.</p>
-            <h3 class="p-heading--four">Releasing</h3>
+            <h3 class="p-heading--4">Releasing</h3>
             <p>When a user has finished with the machine, they can release it back to the shared pool of capacity. You can ask MAAS to ensure that there is a full disk-wipe of the machine when that happens.</p>
         </div>
     </div>
@@ -150,7 +150,7 @@ <h3 class="p-heading--four">Releasing</h3>
 <section class="p-strip--accent is-shallow">
     <div class="row u-equal-height">
         <div class="col-10 u-sv3--small">
-            <h3 class="p-heading--four u-no-margin--bottom">MAAS is a bare-metal server provisioning tool. It is open source and&nbsp;free.</h3>
+            <h3 class="p-heading--4 u-no-margin--bottom">MAAS is a bare-metal server provisioning tool. It is open source and&nbsp;free.</h3>
             <br class="u-hide--medium u-hide--large" />
         </div>
         <div class="col-2 u-vertically-center">