@ons/design-system 62.0.2 → 62.1.0

package/css/print.css

@@ -1 +1 @@
-html{--ons-color-black: #222}.ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumb{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:transparent}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}details,details>summary{display:block !important}.ons-hero{-webkit-print-color-adjust:exact;color-adjust:exact}.ons-grid__col{display:block}
+.ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumb,.ons-u-ph{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:transparent}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}details,details>summary{display:block !important}.ons-hero{-webkit-print-color-adjust:exact;color-adjust:exact}.ons-grid__col{display:block}.ons-panel,h1,h2,h3,h4,h5,h6,p{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}

package/layout/_template.njk

@@ -16,9 +16,6 @@
     {% set cdn_url = (pageConfig.cdn.url if pageConfig.cdn and pageConfig.cdn.url) or "https://cdn.ons.gov.uk/sdc/design-system" %}
     {% set slash = "" if cdn_url | last == "/" else "/" %}
     {% set assetsURL = cdn_url + slash + ((pageConfig.cdn.version if pageConfig.cdn and pageConfig.cdn.version) or release_version or designSystemVersion) %}
-{% elif pageInfo and pageInfo.version %}
-    {# Prototype kits #}
-    {% set assetsURL = "/" + pageInfo.version %}
 {% elif pageConfig.assetsURL %}
     {# Runner Dev #}
     {% set assetsURL = pageConfig.assetsURL %}
@@ -29,8 +26,6 @@
 
 {% if pageConfig and pageConfig.title %}
     {% set page_title = pageConfig.title %}
-{% elif pageInfo and pageInfo.title %}
-    {% set page_title = pageInfo.title %}
 {% elif page and page.title %}
     {% set page_title = page.title %}
 {% else %}
@@ -225,15 +220,9 @@
             {% block bodyEnd %}{% endblock %}
         {% endblock %}
 
-        {% if isPatternLib %}
-            {% set scripts = assetsURL + "/scripts/main.js," + assetsURL + "/scripts/patternlib.js" %}
-        {% else %}
-            {% set scripts = assetsURL + "/scripts/main.js" %}
-        {% endif %}
-
         <script{% if pageConfig.cspNonce %} nonce="{{ pageConfig.cspNonce }}"{% elif pageConfig.cspNonce is not defined and csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
             (function() {
-                var s = '{{ scripts | safe }}'.split(','),
+                var s = [ '{{ assetsURL }}/scripts/main.js' ],
                 c = document.createElement('script');
 
                 if (!('noModule' in c)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "62.0.2",
+  "version": "62.1.0",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -10,14 +10,13 @@
   "scripts": {
     "start": "gulp start",
     "watch": "gulp watch",
-    "test": "gulp build-assets-for-testing && TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
+    "test": "gulp build-assets && TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
     "test:no-build": "TEST_PORT=3020 TEST_WITH_PUPPETEER=1 jest '.*\\.spec\\.js'",
     "test:with-log": "yarn test --no-color 2>test.log",
     "test:start-server": "TEST_PORT=3020 gulp start-dev-server",
     "build": "yarn && yarn tidy-clean && NODE_ENV=production gulp build",
     "npm-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/generate-npm-package.js",
     "cdn-bundle": "NODE_ENV=production yarn tidy-clean && NODE_ENV=production gulp build-package && babel-node ci/prepare-templates-for-zip.js",
-    "test-visual": "yarn build && npx percy exec -- babel-node src/tests/visual/percy.snapshots.js",
     "tidy-clean": "rm -rf build css favicons fonts img components layout scripts coverage scss js",
     "check-unused": "npx npm-check-unused",
     "dedupe-deps": "npx yarn-deduplicate yarn.lock",
@@ -101,7 +100,6 @@
     "gulp-terser": "^2.0.1",
     "http-server": "^0.12.3",
     "husky": "^1.2.0",
-    "iframe-resizer": "4.2.11",
     "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
     "jest-puppeteer": "^6.1.0",
@@ -109,7 +107,6 @@
     "lighthouse": "^7.5.0",
     "lint-staged": "^8.1.0",
     "lodash": "^4.17.21",
-    "marked": "^2.1.3",
     "mdn-polyfills": "^5.14.0",
     "minimist": "^1.2.5",
     "normalize.css": "^8.0.1",
@@ -118,7 +115,6 @@
     "postcss-url": "^8.0.0",
     "prepend-file": "^1.3.1",
     "prettier": "^1.15.2",
-    "prismjs": "1.24.0",
     "puppeteer": "^13.5.1",
     "remark-cli": "^9.0.0",
     "remark-lint": "^8.0.0",
@@ -137,8 +133,7 @@
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "watchify": "^3.0.0",
-    "whatwg-fetch": "^3.0.0",
-    "yaml": "^1.10.2"
+    "whatwg-fetch": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"

package/scss/base/_typography.scss

@@ -1,7 +1,7 @@
 html {
+  @include font-smoothing;
+
   font-size: $base;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   line-height: 1.6;
 }
 

package/scss/main.scss

@@ -59,7 +59,6 @@
 @import '../components/timeline/timeline';
 @import '../components/upload/upload';
 @import '../components/video/video';
-@import '../foundations/style/typography/highlighting/highlight';
 @import 'utilities/index';
 
 // Right to left

package/scss/print.scss

@@ -1,14 +1,11 @@
-html {
-  --ons-color-black: #222;
-}
-
 .ons-btn,
 .ons-navigation-search,
 .ons-summary__actions,
 .ons-footer,
 .ons-cookies-banner,
 .ons-language-links,
-.ons-breadcrumb {
+.ons-breadcrumb,
+.ons-u-ph {
   display: none !important;
 }
 
@@ -60,3 +57,14 @@ details > summary {
 .ons-grid__col {
   display: block; // Prevents page breaking before grid col when printing from Chrome see: https://github.com/ONSdigital/design-system/issues/2584
 }
+
+.ons-panel,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  break-inside: avoid;
+}

package/scss/utilities/_highlight.scss

@@ -0,0 +1,6 @@
+.ons-highlight {
+  background-color: var(--ons-color-highlight);
+  box-shadow: 0 4px 0 0 var(--ons-color-text-link-focus);
+  font-style: normal;
+  padding: 0 2px;
+}

package/scss/utilities/_index.scss

@@ -3,6 +3,7 @@
 @import './display';
 @import './float';
 @import './grid';
+@import './highlight';
 @import './margin';
 @import './pad';
 @import './typography';

package/components/code-highlight/_macro.njk

@@ -1,5 +0,0 @@
-{% macro onsCodeHighlight(params) %}
-    <pre class="ons-patternlib-example__pre">{#
-        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language else 'markup' }}">{{ params.code }}</code>{#
-    #}</pre>
-{% endmacro %}

package/components/code-highlight/_macro.spec.js

@@ -1,56 +0,0 @@
-/** @jest-environment jsdom */
-
-import * as cheerio from 'cheerio';
-
-import axe from '../../tests/helpers/axe';
-import { renderComponent } from '../../tests/helpers/rendering';
-
-describe('macro: code-highlight', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('code-highlight', {
-        language: 'js',
-        code: 'let a = 42;',
-      }),
-    );
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the default language modifier style class "markup" when not specified', () => {
-    const $ = cheerio.load(
-      renderComponent('code-highlight', {
-        code: '<p>Example paragraph...</p>',
-      }),
-    );
-
-    expect($('.ons-patternlib-example__code').hasClass('ons-language-markup')).toBe(true);
-  });
-
-  it('has the provided language modifier style class "markup" when not specified', () => {
-    const $ = cheerio.load(
-      renderComponent('code-highlight', {
-        language: 'js',
-        code: 'let a = 42;',
-      }),
-    );
-
-    expect($('.ons-patternlib-example__code').hasClass('ons-language-js')).toBe(true);
-  });
-
-  it('has the provided code', () => {
-    const $ = cheerio.load(
-      renderComponent('code-highlight', {
-        language: 'js',
-        code: 'let a = 42;',
-      }),
-    );
-
-    expect(
-      $('.ons-patternlib-example__code')
-        .text()
-        .trim(),
-    ).toBe('let a = 42;');
-  });
-});

package/components/code-highlight/code-highlight.spec.js

@@ -1,18 +0,0 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
-
-describe('script: code-highlight', () => {
-  describe('mode: link', () => {
-    it('highlights tokens in code', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('code-highlight', {
-          language: 'js',
-          code: 'let a = 42;',
-        }),
-      );
-
-      const tokenCount = await page.$$eval('.ons-patternlib-example__code .token', elements => elements.length);
-      expect(tokenCount).toBeGreaterThanOrEqual(1);
-    });
-  });
-});

package/scss/patternlib.scss

@@ -1,148 +0,0 @@
-@import '../views/partials/example/example';
-@import '../foundations/style/colours/colours';
-@import '../foundations/style/icons/icon-swatch';
-@import 'prism-tomorrow';
-
-.ons-patternlib-page {
-  height: 100vh;
-
-  &--example {
-    display: block;
-    height: auto;
-    padding: 1.5rem;
-
-    .ons-page,
-    .ons-page__content {
-      overflow-x: visible;
-    }
-  }
-
-  &__header {
-    margin: 0;
-  }
-
-  &__sub-nav {
-    .ons-nav {
-      width: 100%;
-    }
-  }
-
-  &__body {
-    overflow: hidden;
-  }
-
-  &__content {
-    width: 100%;
-    p,
-    li,
-    h3,
-    h4,
-    h5,
-    h6 {
-      max-width: 40rem;
-    }
-
-    code:not(.ons-patternlib-example__code) {
-      background: var(--ons-color-grey-5);
-      color: var(--ons-color-ruby-red);
-      padding: 0.05rem 0.25rem;
-    }
-
-    table {
-      border-collapse: collapse;
-      border-spacing: 0;
-      margin: 0;
-      width: 100%;
-    }
-
-    th {
-      border-bottom: 2px solid var(--ons-color-grey-100);
-      padding: 0.5rem 0 0.5rem 1rem;
-      text-align: left;
-      vertical-align: top;
-    }
-
-    th,
-    td {
-      line-height: 1.6;
-      padding: 0.5rem 0 0.5rem 1rem;
-      &:first-child {
-        padding-left: 0;
-      }
-    }
-
-    td {
-      background: transparent;
-      border-bottom: 1px solid var(--ons-color-borders);
-    }
-
-    tr:last-child td {
-      border: 0;
-    }
-  }
-
-  &__content,
-  &__sub-nav {
-    > {
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        &:not(:first-child) {
-          margin-top: 2rem;
-        }
-      }
-
-      h5,
-      h6 {
-        font-size: 1rem;
-      }
-
-      @for $i from 1 through 6 {
-        @for $c from 1 through 6 {
-          h#{$i} + h#{$c}:not(:first-child) {
-            margin-top: 0;
-          }
-        }
-      }
-    }
-  }
-
-  &__content-header {
-    margin-bottom: 1rem;
-    position: relative;
-  }
-
-  .ons-panel + .ons-patternlib-example {
-    margin-top: 2rem;
-  }
-}
-
-.ons-patternlib-example__iframe {
-  padding-right: 1px;
-}
-
-.ons-patternlib-hero {
-  background: var(--ons-color-grey-5);
-  padding: 2rem 0 1rem;
-  width: 100%;
-
-  &__title {
-    max-width: 30rem;
-  }
-}
-
-.ons-pl-experimental-tag {
-  background: var(--ons-color-info);
-  color: var(--ons-color-text-inverse);
-  display: inline-block;
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.1rem;
-  margin-right: 0.5rem;
-  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
-  padding: 0.3rem 0.5rem;
-  text-transform: uppercase;
-}