@ons/design-system 43.0.0 → 44.1.1

package/scss/base/_global.scss

@@ -29,6 +29,14 @@ hr {
   margin: 2rem 0 0;
 }
 
+%a-focus {
+  background-color: $color-focus;
+  box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus;
+  color: $color-text-link-focus;
+  outline: 3px solid transparent;
+  text-decoration: none;
+}
+
 a {
   color: $color-text-link;
   text-decoration-thickness: 1px;
@@ -52,10 +60,6 @@ a {
     text-decoration: underline solid $color-text-link-hover 2px;
   }
   &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
-    background-color: $color-focus;
-    box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus;
-    color: $color-text-link-focus;
-    outline: 3px solid transparent;
-    text-decoration: none;
+    @extend %a-focus;
   }
 }

package/scss/error.scss

@@ -1,7 +1,5 @@
 @import 'normalize';
 
-@include normalize();
-
 body {
   background: #222;
   color: #fff;

package/scss/helpers/_functions.scss

@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 @function ems($pxval, $base: $base) {
-  $em-size: $pxval / $base;
+  $em-size: math.div($pxval, $base);
 
   @return #{$em-size}em;
 }
 
 @function rems($pxval, $base: $base) {
-  $rem-size: $pxval / $base;
+  $rem-size: math.div($pxval, $base);
 
   @return #{$rem-size}rem;
 }

package/scss/main.scss

@@ -1,18 +1,74 @@
 @import 'normalize';
-
-@include normalize();
-
 @import 'vars/index';
 @import 'helpers/index';
 @import 'base/index';
 @import 'objects/index';
-@import '../components/**/*.scss';
-@import '../patterns/**/*.scss';
-@import '../foundations/**/*.scss';
+@import '../components/access-code/uac';
+@import '../components/address-output/address-output';
+@import '../components/articles/articles';
+@import '../components/autosuggest/autosuggest';
+@import '../components/breadcrumbs/breadcrumbs';
+@import '../components/button/button';
+@import '../components/call-to-action/call-to-action';
+@import '../components/card/card';
+@import '../components/checkboxes/checkbox';
+@import '../components/checkboxes/checkboxes';
+@import '../components/collapsible/collapsible';
+@import '../components/content-pagination/content-pagination';
+@import '../components/cookies-banner/cookies-banner';
+@import '../components/download-resources/download-resources';
+@import '../components/downloads/downloads';
+@import '../components/external-link/external-link';
+@import '../components/feedback/feedback';
+@import '../components/field/field-group';
+@import '../components/field/field';
+@import '../components/fieldset/fieldset';
+@import '../components/find-a-support-centre/find-a-support-centre';
+@import '../components/footer/footer';
+@import '../components/header/header-nav';
+@import '../components/header/header';
+@import '../components/hero/hero';
+@import '../components/icons/icons';
+@import '../components/images/images';
+@import '../components/input/input-type';
+@import '../components/input/input';
+@import '../components/label/label';
+@import '../components/language-selector/language';
+@import '../components/lists/list';
+@import '../components/message-list/message-list';
+@import '../components/message/message';
+@import '../components/metadata/metadata';
+@import '../components/pagination/pagination';
+@import '../components/panel/panel';
+@import '../components/phase-banner/phase-banner';
+@import '../components/promotional-banner/promo-banner';
+@import '../components/question/question';
+@import '../components/quote/quote';
+@import '../components/radios/radio';
+@import '../components/radios/radios';
+@import '../components/related-content/related-content';
+@import '../components/relationships/relationships';
+@import '../components/search/search';
+@import '../components/section-navigation/section-navigation';
+@import '../components/skip-to-content/skip';
+@import '../components/status/status';
+@import '../components/summary/summary';
+@import '../components/table-of-contents/toc';
+@import '../components/table/table';
+@import '../components/tabs/tabs';
+@import '../components/text-indent/text-indent';
+@import '../components/timeline/timeline';
+@import '../components/upload/upload';
+@import '../components/video/video';
+@import '../patterns/help-users-to/see-important-information/src/_highlight';
+@import '../patterns/pages/question/examples/question-anatomy/pl-question-anatomy';
+@import '../foundations/layout/page-template/examples/block-areas/block-areas';
+@import '../foundations/style/colours/colours';
+@import '../foundations/style/icons/icon-swatch';
 @import 'utilities/index';
 
 // Right to left
-@import 'overrides/rtl.scss';
+@import 'overrides/rtl';
 
 // High Contrast Mode
-@import 'overrides/hcm.scss';
+@import 'overrides/hcm';

package/scss/overrides/rtl.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .ons-rtl .ons-page__container > .ons-grid {
   direction: rtl;
 
@@ -97,7 +99,7 @@
   // Flip push and pull
   @each $breakpoint-min, $size in $grid-bp {
     @for $column from 1 through $grid-cols {
-      $width: percentage($column / $grid-cols);
+      $width: percentage(math.div($column, $grid-cols));
 
       @include mq($breakpoint-min) {
         .ons-push-#{$column}\@#{$breakpoint-min} {
@@ -112,7 +114,7 @@
 
     @each $breakpoint-max, $size in $grid-bp {
       @for $column from 1 through $grid-cols {
-        $width: percentage($column / $grid-cols);
+        $width: percentage(math.div($column, $grid-cols));
 
         @include mq($breakpoint-min, $breakpoint-max) {
           .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {

package/scss/patternlib.scss

@@ -1,6 +1,7 @@
 @import 'vars/index';
-@import 'helpers/*.scss';
-@import '../views/partials/**/*.scss';
+@import 'helpers/index';
+@import '../views/partials/example/example';
+@import '../views/partials/sub-navigation/sub-navigation';
 @import '../foundations/layout/page-template/examples/block-areas/block-areas';
 @import '../patterns/pages/question/examples/question-anatomy/pl-question-anatomy';
 @import 'prism-tomorrow';

package/scss/utilities/_colors.scss

@@ -1,16 +1,16 @@
 @each $label, $color in (blue: $color-night-blue, green: $color-leaf-green) {
-  .ons-u-#{$label} {
+  .ons-u-#{'' + $label} {
     color: $color;
   }
-  .ons-u-bg-#{$label} {
+  .ons-u-bg-#{'' + $label} {
     background-color: $color;
   }
 
   @for $tint from 1 through 10 {
-    .ons-u-#{$label}-#{$tint*10} {
+    .ons-u-#{'' + $label}-#{$tint*10} {
       color: tint($color, $tint * 10);
     }
-    .ons-u-bg-#{$label}-#{$tint*10} {
+    .ons-u-bg-#{'' + $label}-#{$tint*10} {
       background-color: tint($color, $tint * 10);
     }
   }

package/scss/utilities/_grid.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .ons-grid {
   box-sizing: border-box;
   font-size: 0;
@@ -32,7 +34,7 @@
   }
   &.ons-grid--tight {
     .ons-grid__col {
-      margin-bottom: $grid-gutters/2;
+      margin-bottom: math.div($grid-gutters, 2);
     }
   }
 }
@@ -53,9 +55,9 @@
 }
 
 .ons-grid--tight {
-  margin-left: -$grid-gutters/2;
+  margin-left: math.div(-$grid-gutters, 2);
   .ons-grid__col {
-    padding-left: $grid-gutters/2;
+    padding-left: math.div($grid-gutters, 2);
   }
 }
 
@@ -157,7 +159,7 @@
 
 @each $breakpoint-min, $size in $grid-bp {
   @for $column from 1 through $grid-cols {
-    $width: percentage($column / $grid-cols);
+    $width: percentage(math.div($column, $grid-cols));
 
     @include mq($breakpoint-min) {
       .ons-col-#{$column}\@#{$breakpoint-min} {
@@ -179,7 +181,7 @@
 
   @each $breakpoint-max, $size in $grid-bp {
     @for $column from 1 through $grid-cols {
-      $width: percentage($column / $grid-cols);
+      $width: percentage(math.div($column, $grid-cols));
 
       @include mq($breakpoint-min, $breakpoint-max) {
         .ons-col-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {

package/src/js/domready.js

@@ -0,0 +1,17 @@
+let callbacks = [];
+
+const onReady = () => {
+  callbacks.forEach(fn => fn.call());
+  callbacks = [];
+  window.onsDOMReady = true;
+};
+
+export default function ready(fn) {
+  if (document.readyState === 'loading') {
+    callbacks.push(fn);
+  } else {
+    fn.call();
+  }
+}
+
+document.addEventListener('DOMContentLoaded', onReady);

package/components/related-links/_macro.njk

@@ -1,14 +0,0 @@
-{% macro onsRelatedLinks(params) %}
-  {% from "components/lists/_macro.njk" import onsList %}
-  <div class="ons-related-links">
-    <h2 class="ons-related-links__title ons-u-fs-r--b ons-u-mb-xs" id="{{ params.id }}">{{ params.title }}</h2>
-    <nav class="ons-related-links__navigation" aria-labelledby="{{ params.id }}">
-      {{
-          onsList({
-              "variants": 'bare',
-              "itemsList": params.itemsList
-          })
-      }}
-    </nav>
-  </div>
-{% endmacro %}

package/components/related-links/_related-links.scss

@@ -1,6 +0,0 @@
-.ons-related-links {
-  @extend .ons-u-mt-m;
-
-  border-top: 5px solid $color-branded;
-  padding: 1rem 0;
-}