@ons/design-system 62.0.1 → 62.1.0

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;
-}