vanilla-framework 3.2.0 → 3.5.0

package/package.json

@@ -27,10 +27,11 @@
   },
   "scripts": {
     "start": "yarn build && yarn serve",
-    "build": "yarn build-scss && yarn build-js",
-    "build-scss": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build": "yarn build-scss && yarn build-js && yarn build-class-references",
+    "build-scss": "sass --load-path=node_modules --embed-sources --style=compressed 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 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",
+    "build-class-references": "node scripts/create-class-references.js",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
     "test-spelling": "mdspell templates/docs/**/*.md -r -n -a --en-gb",
@@ -44,7 +45,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.2.0",
+  "version": "3.5.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -54,10 +55,12 @@
   "dependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.3.0",
-    "autoprefixer": "10.4.4",
-    "postcss": "8.4.12",
+    "autoprefixer": "10.4.7",
+    "postcss": "8.4.14",
     "postcss-cli": "9.1.0",
-    "sass": "1.49.11"
+    "postcss-scss": "4.0.4",
+    "sass": "1.52.2",
+    "yaml": "1.10.2"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
@@ -65,7 +68,7 @@
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "prettier": "2.6.2",
-    "stylelint": "14.6.1",
+    "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_accordion.scss

@@ -16,48 +16,45 @@
   }
 
   .p-accordion__tab {
-    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
-    // and offset to align it with baseline of accordion tab text element
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
-
     @extend %single-border-text-vpadding--scaling;
     @include vf-focus;
 
-    background: {
-      color: inherit;
-      position: top $icon-top-position left $sph--large;
-      repeat: no-repeat;
-    }
-
+    background-color: inherit;
     border: 0;
     border-radius: 0;
     font-size: inherit;
     justify-content: flex-start;
     margin-bottom: 0;
-    padding-left: $sph--large + $icon-size + $sph--large;
     padding-right: $sph--large;
+    position: relative;
     text-align: left;
     transition-duration: 0s;
     width: 100%;
     z-index: 2;
 
+    &::before {
+      @include vf-icon-chevron($color-mid-dark);
+      @include vf-animation($property: transform, $duration: fast);
+      @extend %icon;
+
+      content: '';
+      margin-right: $sph--large;
+    }
+
     // aria-selected controls the open and closed state for the accordion tab
     &[aria-expanded='true'] {
-      @include vf-icon-minus($color-mid-dark);
-
       // override base expanded button styles
       background-color: inherit;
+
       &:hover {
         background-color: $colors--light-theme--background-hover;
       }
-
-      background-size: $icon-size;
     }
 
     &[aria-expanded='false'] {
-      @include vf-icon-plus($color-mid-dark);
-
-      background-size: $icon-size;
+      &::before {
+        transform: rotate(-90deg);
+      }
     }
   }
 
@@ -74,25 +71,17 @@
   }
 
   // stylelint-disable selector-max-type
-  h2.p-accordion__heading > .p-accordion__tab,
-  .p-heading--2 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h2) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
+  .p-heading--2 > .p-accordion__tab::before,
+  h2.p-accordion__heading > .p-accordion__tab::before {
+    @include vf-icon-size($x-height);
+    vertical-align: 0;
   }
 
-  h3.p-accordion__heading > .p-accordion__tab,
-  .p-heading--3 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h3) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
-  }
-
-  h4.p-accordion__heading > .p-accordion__tab,
-  .p-heading--4 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h4) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
+  .p-heading--3 > .p-accordion__tab::before,
+  .p-heading--4 > .p-accordion__tab::before,
+  h3.p-accordion__heading > .p-accordion__tab::before,
+  h4.p-accordion__heading > .p-accordion__tab::before {
+    vertical-align: 0;
   }
   // stylelint-enable selector-max-type
 

package/scss/_patterns_code-snippet.scss

@@ -1,3 +1,49 @@
+/*
+  @classreference
+  code-snippet:
+    Root element:
+        .p-code-snippet:
+            Main element of the code snippet component.
+        "&.is-bordered":
+            Bordered variant, to be used when additional content (such as iframes) is used inside the code snippet component.
+
+    Code block:
+        .p-code-snippet__block:
+            Code block without any additonal styling elements.
+        "&.is-wrapped":
+            Code block with wrapped content in lines.
+        .p-code-snippet__block--icon:
+            Code block that starts with an icon. Default icon is a UNIX prompt. To be used with Linux CLI examples.
+        "&.is-windows-prompt":
+            Changes the `.p-code-snippet__block--icon` to use a Windows prompt icon. To be used with Windows CLI examples.
+        "&.is-url":
+            Changes the `.p-code-snippet__block--icon` to use a link icon. To be used with URLs.
+        .p-code-snippet__block--numbered:
+            Code block with numbered lines of code (to be used with longer pieces of code examples). Requires `.p-code-snippet__line`.
+
+    Code line:
+        .p-code-snippet__line:
+            A wrapper around single line of code. Needed with numbered variant of a code block.
+
+    Code block header:
+        .p-code-snippet__header:
+            A header of a code block. Contains a title and optional dropdowns.
+        "&.is-stacked":
+            A stacked version of a header (with a title displayed above the dropdowns). To be used when there are multiple dropdowns with a long title.
+
+    Code block title:
+        .p-code-snippet__title:
+            The title of a code block.
+
+    Dropdowns container:
+        .p-code-snippet__dropdowns:
+            The container element for any dropdowns in the header.
+
+    Dropdown:
+        .p-code-snippet__dropdown:
+            An individual dropdown in code block header.
+*/
+
 @import 'settings';
 
 $color-snippet-heading-bg: rgba($color-x-dark, 0.08);

package/scss/_patterns_navigation.scss

@@ -68,11 +68,13 @@ $spv-navigation-logo: 0.3125rem;
     display: block;
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: 0;
+    margin: 0;
     overflow: hidden;
     position: relative;
+    text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
+    width: 100%;
 
     &::before {
       content: '';

package/scss/_patterns_notifications.scss

@@ -1,5 +1,57 @@
 @import 'settings';
 
+/*
+  @classreference
+  notification:
+    Root element:
+        .p-notification:
+            Notification in default variant. Same as `.p-notification--information`.
+        .p-notification--information:
+            Information notification. Same as default `.p-notification`.
+        .p-notification--positive:
+            Positive notification.
+        .p-notification--caution:
+            Caution notification.
+        .p-notification--negative:
+            Negative notification.
+        "&.is-borderless":
+            Borderless variant of notification. Used when notification is embeded into another container element.
+        "&.is-inline":
+            Inline version of notification with title and message rendered side by side.
+
+    Content container:
+        .p-notification__content:
+            Container element for notification content (title and message).
+
+    Title:
+        .p-notification__title:
+            The notification title.
+
+    Message:
+        .p-notification__message:
+            Text of the notification message.
+
+    Close button:
+        .p-notification__close:
+            The button to close the notification.
+
+    Meta-data container:
+        .p-notification__meta:
+            The container element for notification meta-data (timestamp and action buttons).
+
+    Timestamp:
+        .p-notification__timestamp:
+            Notification timestamp or date.
+
+    Actions container:
+        .p-notification__actions:
+            Container element for notification action buttons.
+
+    Action button:
+        .p-notification__action:
+            Single action button.
+*/
+
 // space on the left of the icon + icon width + space on the right of the icon
 $notification-content-icon-space: 2 * $sph--large + map-get($icon-sizes, default);
 

package/scss/_patterns_pagination.scss

@@ -13,7 +13,11 @@
     }
   }
 
-  .p-pagination {
+  // .p-pagination on the <ol> element is deprecated. It should be used on the wrapping <nav> element instead, and .p-pagination__items on the <ol> or <ul> element.
+
+  // stylelint-disable selector-max-type
+  .p-pagination:not(nav),
+  .p-pagination__items {
     display: flex;
     flex-direction: row;
     list-style: none;

package/scss/{_patterns_tab-buttons.scss → _patterns_segmented-control.scss}

@@ -1,9 +1,14 @@
-@mixin vf-p-tab-buttons {
+@mixin vf-p-segmented-control {
+  .p-segmented-control,
+  // p-tab-buttons is deprecated,
+  // please use p-segmented-control instead 
   .p-tab-buttons {
+    .p-segmented-control__list,
     .p-tab-buttons__list {
       display: flex;
     }
 
+    .p-segmented-control__button,
     .p-tab-buttons__button {
       @extend %vf-button-has-icon;
 
@@ -41,8 +46,14 @@
       }
     }
 
+    &.is-dense .p-segmented-control__button,
     &.is-dense .p-tab-buttons__button {
       @extend %vf-button-dense-vertical-padding;
     }
   }
 }
+
+// Deprecated mixin kept for compatibility
+@mixin vf-p-tab-buttons {
+  @include vf-p-segmented-control;
+}

package/scss/_patterns_side-navigation.scss

@@ -1,5 +1,81 @@
 @import 'settings';
 
+/*
+  @classreference
+  side-navigation:
+    Root element:
+        .p-side-navigation:
+            Side navigation in default variant.
+        .p-side-navigation--icons:
+            Side navigation with item icons.
+        .p-side-navigation--raw-html:
+            Raw HTML version of side navigation (used with links generated by an external service).
+        "&.is-drawer-expanded":
+            Set `.is-drawer-expanded` when side navigation drawer is open on small screens.
+        "&.is-drawer-collapsed":
+            Set `.is-drawer-collapsed` when side navigation drawer is closed on small screens.
+        "&.is-drawer-hidden":
+            Set `.is-drawer-hidden` when side navigation drawer is closed on small screens.
+        "&.is-sticky":
+            Sticky version of side navigation.
+        "&.is-dark":
+            Side navigation in dark theme (if default is light).
+        "&.is-light":
+            Side navigation in light theme (if default is dark).
+
+    Overlay:
+        .p-side-navigation__overlay:
+            Screen overlay to display when side navigation drawer is open on small screens.
+
+    Drawer:
+        .p-side-navigation__drawer:
+            Side navigation drawer (to allow expanding and collapsing the navigation on small screens).
+
+    Drawer header:
+        .p-side-navigation__drawer-header:
+            Header of the side navigation drawer.
+
+    Toggle button:
+        .p-side-navigation__toggle:
+            Side navigation toggle button (to open side navigation on small screens).
+        .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).
+
+    Item element:
+        .p-side-navigation__item:
+            Single item in side navigation (usually a `<li>` element). May contain nested items lists.
+        .p-side-navigation__item--title:
+            Single title item in side navigation (usually a `<li>` element).
+        "&.has-active-child":
+            Set `.has-active-child` on a item that contains an active nested item. This is used in collapsible side navigation in application layout.
+
+    Item link:
+        .p-side-navigation__link:
+            Single link in the side navigation.
+
+    Item text:
+        .p-side-navigation__text:
+            Single text item in side navigation (for items that are not linked).
+
+    Item icon:
+        .p-side-navigation__icon:
+            An icon in side navigation item (used with `.p-side-navigation--icons` variant).
+
+    Item status:
+        .p-side-navigation__status:
+            A container for status icon or label inside the navigation item.
+*/
+
 @mixin vf-p-side-navigation {
   // STYLING OF SIDE NAVIGATION RESPONSIVE DRAWER
 
@@ -35,8 +111,11 @@
 
     .p-side-navigation:target &,
     [class*='p-side-navigation--']:target &,
+    // is-expanded and is-collapsed are deprecated and replaced by is-drawer-expanded and is-drawer-collapsed
     .p-side-navigation.is-expanded &,
-    [class*='p-side-navigation--'].is-expanded & {
+    .p-side-navigation.is-drawer-expanded &,
+    [class*='p-side-navigation--'].is-expanded &,
+    [class*='p-side-navigation--'].is-drawer-expanded & {
       @extend %vf-has-box-shadow;
 
       animation: vf-p-side-navigation-expand map-get($animation-duration, brisk);
@@ -44,10 +123,20 @@
     }
 
     .p-side-navigation.is-collapsed &,
-    [class*='p-side-navigation--'].is-collapsed & {
+    .p-side-navigation.is-drawer-collapsed &,
+    [class*='p-side-navigation--'].is-collapsed &,
+    [class*='p-side-navigation--'].is-drawer-collapsed & {
       animation: vf-p-side-navigation-collapse map-get($animation-duration, brisk);
     }
 
+    .p-side-navigation.is-drawer-hidden &,
+    [class*='p-side-navigation--'].is-drawer-hidden & {
+      display: none;
+      @media (min-width: $threshold-6-12-col) {
+        display: block;
+      }
+    }
+
     @media (min-width: $breakpoint-x-small) {
       max-width: 20rem;
     }
@@ -68,7 +157,9 @@
     .p-side-navigation:target &,
     [class*='p-side-navigation--']:target &,
     .p-side-navigation.is-expanded &,
-    [class*='p-side-navigation--'].is-expanded & {
+    .p-side-navigation.is-drawer-expanded &,
+    [class*='p-side-navigation--'].is-expanded &,
+    [class*='p-side-navigation--'].is-drawer-expanded & {
       opacity: 1;
       pointer-events: all;
     }
@@ -134,7 +225,9 @@
     .p-side-navigation:target .p-side-navigation__drawer,
     [class*='p-side-navigation--']:target .p-side-navigation__drawer,
     .p-side-navigation.is-expanded .p-side-navigation__drawer,
-    [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer {
+    .p-side-navigation.is-drawer-expanded .p-side-navigation__drawer,
+    [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer,
+    [class*='p-side-navigation--'].is-drawer-expanded .p-side-navigation__drawer {
       box-shadow: none;
       display: block;
       max-width: none;
@@ -189,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;
 
@@ -213,6 +318,7 @@
     @extend %side-navigation__link;
   }
 
+  .p-side-navigation__heading,
   .p-side-navigation__text,
   .p-side-navigation__link {
     @extend %side-navigation__text;
@@ -258,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
@@ -266,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 {
@@ -416,6 +524,15 @@
     &::before {
       @include vf-icon-chevron($color-sidenav-toggle-icon);
     }
+
+    &[aria-expanded='true'] {
+      background-color: $color-transparent;
+
+      &:hover {
+        background: $color-sidenav-item-background-hover;
+        color: $color-sidenav-text-active;
+      }
+    }
   }
 
   .p-side-navigation__drawer {
@@ -462,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;

package/scss/_patterns_status-label.scss

@@ -55,3 +55,8 @@
     color: $color-x-light;
   }
 }
+
+// Deprecated mixin kept for compatibility
+@mixin vf-p-label {
+  @include vf-p-status-label;
+}

package/scss/_vanilla.scss

@@ -41,7 +41,7 @@
 @import 'patterns_status-label';
 @import 'patterns_strip';
 @import 'patterns_switch';
-@import 'patterns_tab-buttons';
+@import 'patterns_segmented-control';
 @import 'patterns_table-icons';
 @import 'patterns_table-expanding';
 @import 'patterns_table-of-contents';
@@ -116,13 +116,13 @@
   @include vf-p-pull-quotes;
   @include vf-p-search-and-filter;
   @include vf-p-search-box;
+  @include vf-p-segmented-control;
   @include vf-p-separator;
   @include vf-p-side-navigation;
   @include vf-p-slider;
   @include vf-p-status-label;
   @include vf-p-strip;
   @include vf-p-switch;
-  @include vf-p-tab-buttons;
   @include vf-p-table-icons;
   @include vf-p-table-expanding;
   @include vf-p-table-of-contents;