@ons/design-system 59.0.0 → 60.0.0

package/scss/base/_typography.scss

@@ -8,6 +8,7 @@ html {
 body {
   color: var(--ons-color-text);
   font-family: $font-sans;
+  font-feature-settings: 'ss01';
 }
 
 p {

package/scss/main.scss

@@ -23,7 +23,6 @@
 @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';
 @import '../components/hero/hero';
@@ -42,7 +41,6 @@
 @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';

package/scss/patternlib.scss

@@ -1,4 +1,5 @@
 @import 'vars/grid';
+@import 'vars/typography';
 @import 'vars/vars';
 @import 'helpers/index';
 @import '../views/partials/example/example';
@@ -152,7 +153,7 @@
   color: var(--ons-color-text-inverse);
   display: inline-block;
   font-size: 0.7rem;
-  font-weight: 700;
+  font-weight: $font-weight-bold;
   letter-spacing: 0.1rem;
   margin-right: 0.5rem;
   outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background

package/scss/utilities/_typography.scss

@@ -46,7 +46,7 @@ h4 {
 }
 
 .ons-u-fw-b {
-  font-weight: 700;
+  font-weight: $font-weight-bold;
 }
 
 .ons-u-fw-n {

package/scss/vars/_colors.scss

@@ -55,18 +55,24 @@
   // Assignment
   // =============================================================================
 
-  // Headers, footers, banners, page
+  // Header
   --ons-color-header: var(--ons-color-branded);
-  --ons-color-header-light: var(--ons-color-white);
+  --ons-color-header-neutral: var(--ons-color-white);
   --ons-color-header-masthead: var(--ons-color-white);
-  --ons-color-header-masthead-dark: var(--ons-color-black);
   --ons-color-header-masthead-internal: var(--ons-color-branded-secondary);
+  --ons-color-header-masthead-neutral: var(--ons-color-black);
+  --ons-color-header-title: var(--ons-color-text);
+  --ons-color-header-navigation-links: var(--ons-color-text);
+  --ons-color-service-links: var(--ons-color-white);
+
+  // Banners, page
   --ons-color-cta-bg: var(--ons-color-branded-tint);
   --ons-color-banner-bg: var(--ons-color-grey-5);
   --ons-color-banner-bg-dark: var(--ons-color-grey-15);
   --ons-color-page-light: var(--ons-color-white);
   --ons-color-banner-browser-bg: var(--ons-color-black);
   --ons-color-hero-bg: var(--ons-color-branded-tint);
+  --ons-color-hero-bg-dark: var(--ons-color-branded);
 
   // Typography
   --ons-color-text: var(--ons-color-black);
@@ -124,7 +130,6 @@
   --ons-color-dead: var(--ons-color-grey-75);
   --ons-color-instruction: var(--ons-color-jaffa-orange);
   --ons-color-instruction-tint: var(--ons-color-jaffa-orange-tint);
-  --ons-color-tag-bg: var(--ons-color-leaf-green-tint);
   --ons-color-text-disabled: var(--ons-color-grey-35);
   --ons-color-border-disabled: var(--ons-color-grey-35);
 }

package/scss/vars/_typography.scss

@@ -6,7 +6,7 @@ $base-font-size: 1rem;
 $base-line-height: 1.5;
 
 $font-weight-regular: 400;
-$font-weight-bold: 600;
+$font-weight-bold: 700;
 $base: 18px;
 
 $type-matrix: (

package/components/find-a-support-centre/_find-a-support-centre.scss

@@ -1,9 +0,0 @@
-.ons-distance {
-  @extend .ons-u-fs-r;
-
-  background-color: var(--ons-color-tag-bg);
-  border: 1px solid transparent; // high contrast mode
-  display: inline-block;
-  padding: 0.3rem 0.5rem;
-  text-decoration: none;
-}

package/components/promotional-banner/_macro.njk

@@ -1,49 +0,0 @@
-{% macro onsPromoBanner(params) %}
-
-    <section class="ons-promo-banner{{ ' ' + 'ons-promo-banner--dark-theme' if params.darkTheme }}{{ ' ' + 'ons-promo-banner--has-image' if params.image }}">
-
-        <div class="ons-container">
-
-            <div class="ons-grid ons-grid--gutterless">
-
-            {% if params.image %}
-
-                <div class="ons-grid__col ons-col-7@s">
-
-                    <div class="ons-promo-banner__content">
-                        {{ params.content | safe }}{{ caller() if caller }}
-                    </div>
-
-                </div>
-
-                <div class="ons-grid__col ons-col-4@s ons-push-1@s ons-u-d-no@xxs@s">
-
-                    <div class="ons-promo-banner__image">
-                        {% if params.image.smallSrc %}
-                            <img srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}">
-                        {% else %}
-                            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}">
-                        {% endif %}
-                    </div>
-
-                </div>
-
-            {% else %}
-
-                <div class="ons-grid__col ons-col-7@m">
-
-                    <div class="ons-promo-banner__content">
-                        {{ params.content | safe }}{{ caller() if caller }}
-                    </div>
-
-                </div>
-
-            {% endif %}
-
-            </div>
-
-        </div>
-
-    </section>
-
-{% endmacro %}

package/components/promotional-banner/_macro.spec.js

@@ -1,97 +0,0 @@
-/** @jest-environment jsdom */
-
-import * as cheerio from 'cheerio';
-
-import axe from '../../tests/helpers/axe';
-import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_PROMOTIONAL_BANNER_MINIMAL = {
-  content: 'Example content with a <a href="#">link</a>',
-};
-
-const EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL = {
-  content: 'Example content with a <a href="#">link</a>',
-  image: {
-    src: 'example.png',
-    alt: 'Example image',
-  },
-};
-
-const EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE = {
-  content: 'Example content with a <a href="#">link</a>',
-  image: {
-    smallSrc: 'example-small.png',
-    largeSrc: 'example-large.png',
-    alt: 'Example image',
-  },
-};
-
-describe('macro: promotional-banner', () => {
-  describe.each([
-    ['without image', EXAMPLE_PROMOTIONAL_BANNER_MINIMAL],
-    ['with image url', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL],
-    ['with image small/large source', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE],
-  ])('mode: %s', (_, params) => {
-    it('passes jest-axe checks with', async () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', params));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has expected html content', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', params));
-
-      const htmlContent = $('.ons-promo-banner__content')
-        .html()
-        .trim();
-      expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
-    });
-
-    it('has expected html content when called', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', params, ['<p>Nested content</p>']));
-
-      const htmlContent = $('.ons-promo-banner__content').html();
-      expect(htmlContent).toContain('<p>Nested content</p>');
-    });
-  });
-
-  describe('mode: with image url', () => {
-    it('has expected `src` attribute', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL));
-
-      const src = $('.ons-promo-banner__image img').attr('src');
-      expect(src).toBe('example.png');
-    });
-
-    it('has expected `alt` attribute', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL));
-
-      const alt = $('.ons-promo-banner__image img').attr('alt');
-      expect(alt).toBe('Example image');
-    });
-  });
-
-  describe('mode: with image small/large source', () => {
-    it('has expected `srcset` attribute', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE));
-
-      const srcset = $('.ons-promo-banner__image img').attr('srcset');
-      expect(srcset).toBe('example-small.png 1x, example-large.png 2x');
-    });
-
-    it('has expected `src` attribute', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE));
-
-      const src = $('.ons-promo-banner__image img').attr('src');
-      expect(src).toBe('example-small.png');
-    });
-
-    it('has expected `alt` attribute', () => {
-      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE));
-
-      const alt = $('.ons-promo-banner__image img').attr('alt');
-      expect(alt).toBe('Example image');
-    });
-  });
-});

package/components/promotional-banner/_promo-banner.scss

@@ -1,72 +0,0 @@
-.ons-promo-banner {
-  background-color: var(--ons-color-branded);
-  background-image: linear-gradient(46deg, var(--ons-color-branded-tertiary) 0%, var(--ons-color-branded) 100%);
-  overflow: hidden;
-  padding-bottom: 5em;
-  padding-top: 3em;
-  position: relative;
-
-  &::after {
-    background-image: url(#{$static}/img/census-promo-banner.svg);
-    background-position: 50% 0;
-    background-repeat: no-repeat;
-    bottom: 0;
-    content: '';
-    height: 244px;
-    left: 50%;
-    max-width: none;
-    position: absolute;
-    transform: translate(-50%, 50%);
-    width: 100%;
-  }
-
-  &__content {
-    position: relative;
-    z-index: 1;
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__image {
-    text-align: center;
-
-    img {
-      height: auto;
-      width: 100%;
-    }
-  }
-
-  &--dark-theme {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    li,
-    p,
-    a {
-      color: var(--ons-color-white);
-    }
-
-    a {
-      &:hover {
-        text-decoration: underline solid var(--ons-color-white) 2px;
-      }
-    }
-
-    h3 {
-      a:hover {
-        text-decoration: underline solid var(--ons-color-white) 3px;
-      }
-    }
-  }
-
-  &--has-image {
-    padding-bottom: 3em;
-
-    &::after {
-      content: none;
-    }
-  }
-}

package/components/select/select.js

@@ -1,19 +0,0 @@
-(function() {
-  function installLanguageSelect(element) {
-    const languageSelect = element.getElementsByClassName('ons-js-language-filter__select')[0];
-    const languageContentElements = element.getElementsByClassName('ons-js-language-filter__content');
-
-    languageSelect.addEventListener('change', function(event) {
-      for (let languageContentElement of languageContentElements) {
-        if (languageContentElement.id === this.value) {
-          languageContentElement.classList.remove('ons-u-hidden');
-        } else {
-          languageContentElement.classList.add('ons-u-hidden');
-        }
-      }
-    });
-  }
-
-  let languageFilterElements = document.getElementsByClassName('ons-js-language-filter');
-  Array.from(languageFilterElements).forEach(installLanguageSelect);
-})();

package/components/select/select.spec.js

@@ -1,56 +0,0 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
-
-const EXAMPLE_LANGUAGE_FILTER_PAGE = `
-  <div class="ons-js-language-filter">
-    ${renderComponent('select', {
-      classes: 'ons-js-language-filter__select',
-      id: 'language-filter-select',
-      options: [
-        {
-          text: 'Native language',
-          value: 'language-native',
-        },
-        {
-          text: 'English',
-          value: 'language-english',
-        },
-      ],
-    })}
-    <div class="ons-js-language-filter__content" id="language-native"></div>
-    <div class="ons-js-language-filter__content ons-u-hidden" id="language-english"></div>
-  </div>
-`;
-
-describe('script: select', () => {
-  beforeEach(async () => {
-    await setTestPage('/test', EXAMPLE_LANGUAGE_FILTER_PAGE);
-  });
-
-  describe('language filter page with multiple views', () => {
-    it('shows first view by default', async () => {
-      const isFirstHidden = await page.$eval('#language-native', node => node.classList.contains('ons-u-hidden'));
-      expect(isFirstHidden).toBe(false);
-      const isSecondHidden = await page.$eval('#language-english', node => node.classList.contains('ons-u-hidden'));
-      expect(isSecondHidden).toBe(true);
-    });
-
-    it('shows second view when selection is changed to the second item', async () => {
-      await page.select('#language-filter-select', 'language-english');
-
-      const isFirstHidden = await page.$eval('#language-native', node => node.classList.contains('ons-u-hidden'));
-      expect(isFirstHidden).toBe(true);
-      const isSecondHidden = await page.$eval('#language-english', node => node.classList.contains('ons-u-hidden'));
-      expect(isSecondHidden).toBe(false);
-    });
-
-    it('shows first view when selection is changed back to the first item', async () => {
-      await page.select('#language-filter-select', 'language-english');
-      await page.select('#language-filter-select', 'language-native');
-
-      const isFirstHidden = await page.$eval('#language-native', node => node.classList.contains('ons-u-hidden'));
-      expect(isFirstHidden).toBe(false);
-      const isSecondHidden = await page.$eval('#language-english', node => node.classList.contains('ons-u-hidden'));
-      expect(isSecondHidden).toBe(true);
-    });
-  });
-});