@ons/design-system 70.0.7 → 70.0.8

package/package.json

@@ -1,131 +1,134 @@
 {
-  "name": "@ons/design-system",
-  "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "70.0.7",
-  "main": "index.js",
-  "license": "MIT",
-  "author": {
-    "name": "ONS Digital"
-  },
-  "scripts": {
-    "start": "gulp start",
-    "watch": "gulp watch",
-    "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",
-    "build-serve": "yarn build && gulp start-dev-server",
-    "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 && gulp run-backstop-tests",
-    "test-visual:reference": "yarn build && gulp run-backstop-reference",
-    "test-visual:approve": "gulp run-backstop-approve",
-    "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",
-    "lint-staged": "lint-staged",
-    "stylelint": "stylelint '**/*.scss'",
-    "stylelint-fix": "stylelint '**/*.scss' --fix",
-    "prepack": "pinst --disable",
-    "postpack": "pinst --enable"
-  },
-  "lint-staged": {
-    "*.js": [
-      "prettier --print-width 140 --single-quote --parser babel --write",
-      "eslint --fix"
+    "name": "@ons/design-system",
+    "description": "ONS Design System built CSS, JS, and Nunjucks templates",
+    "version": "70.0.8",
+    "main": "index.js",
+    "license": "MIT",
+    "author": {
+        "name": "ONS Digital"
+    },
+    "scripts": {
+        "start": "gulp start",
+        "watch": "gulp watch",
+        "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",
+        "build-serve": "yarn build && gulp start-dev-server",
+        "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 && gulp run-backstop-tests",
+        "test-visual:reference": "yarn build && gulp run-backstop-reference",
+        "test-visual:approve": "gulp run-backstop-approve",
+        "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",
+        "lint-staged": "lint-staged",
+        "stylelint": "stylelint '**/*.scss'",
+        "stylelint-fix": "stylelint '**/*.scss' --fix",
+        "prepack": "pinst --disable",
+        "postpack": "pinst --enable"
+    },
+    "lint-staged": {
+        "*.js": [
+            "prettier --write",
+            "eslint --fix"
+        ],
+        "*.md": [
+            "prettier --write",
+            "remark"
+        ],
+        "*.scss": [
+            "prettier --write",
+            "yarn run stylelint-fix"
+        ],
+        "*.{yml,yaml}": [
+            "prettier --write"
+        ]
+    },
+    "browserslist": [
+        "last 2 versions",
+        "not dead"
     ],
-    "*.md": [
-      "prettier --write",
-      "remark"
-    ],
-    "*.scss": [
-      "prettier --print-width 140 --single-quote --parser scss --write",
-      "yarn run stylelint-fix"
-    ]
-  },
-  "browserslist": [
-    "last 2 versions",
-    "not dead"
-  ],
-  "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/eslint-parser": "^7.22.9",
-    "@babel/node": "^7.14.7",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/register": "^7.14.5",
-    "@babel/runtime": "^7.14.6",
-    "abortcontroller-polyfill": "^1.2.3",
-    "autoprefixer": "10.4.14",
-    "babel-plugin-istanbul": "^6.0.0",
-    "babelify": "^10.0.0",
-    "backstopjs": "^6.1.4",
-    "browser-sync": "^2.27.3",
-    "browserify": "^17.0.0",
-    "chalk": "^4.1.2",
-    "cheerio": "^1.0.0-rc.10",
-    "codecov": "^3.8.3",
-    "core-js": "^3.21.1",
-    "cors": "^2.8.5",
-    "dialog-polyfill": "^0.5.6",
-    "eslint": "^8.45.0",
-    "eslint-cli": "^1.1.1",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-unused-imports": "^3.1.0",
-    "express": "^4.17.1",
-    "front-matter": "^4.0.2",
-    "fs-extra": "^11.1.1",
-    "fuse.js": "^3.6.1",
-    "glob": "^10.2.3",
-    "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
-    "gulp-cli": "^2.3.0",
-    "gulp-dart-sass": "^1.0.2",
-    "gulp-if": "^3.0.0",
-    "gulp-postcss": "^9.0.0",
-    "gulp-sourcemaps": "^3.0.0",
-    "gulp-terser": "^2.0.1",
-    "http-server": "^14.1.1",
-    "husky": "^8.0.3",
-    "jest": "^29.6.1",
-    "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.6.1",
-    "jest-puppeteer": "^9.0.0",
-    "lighthouse": "^11.0.0",
-    "lint-staged": "^15.2.0",
-    "lodash": "^4.17.21",
-    "mdn-polyfills": "^5.14.0",
-    "normalize.css": "^8.0.1",
-    "nunjucks": "^3.2.3",
-    "pinst": "^3.0.0",
-    "postcss": "^8.3.5",
-    "postcss-url": "^10.1.3",
-    "prepend-file": "^2.0.1",
-    "prettier": "^3.0.0",
-    "puppeteer": "^21.0.2",
-    "remark-cli": "^12.0.0",
-    "remark-lint": "^9.1.2",
-    "remark-preset-lint-recommended": "^6.1.3",
-    "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
-    "stylelint-config-sass-guidelines": "^10.0.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-order": "^6.0.3",
-    "stylelint-scss": "^5.0.1",
-    "through2": "^4.0.2",
-    "tick-manager": "^1.0.3",
-    "util": "^0.12.3",
-    "viewport-details": "^3.0.4",
-    "vinyl-buffer": "^1.0.1",
-    "vinyl-source-stream": "^2.0.0",
-    "whatwg-fetch": "^3.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+    "devDependencies": {
+        "@babel/core": "^7.14.6",
+        "@babel/eslint-parser": "^7.22.9",
+        "@babel/node": "^7.14.7",
+        "@babel/plugin-proposal-class-properties": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.14.5",
+        "@babel/plugin-transform-runtime": "^7.14.5",
+        "@babel/preset-env": "^7.14.7",
+        "@babel/register": "^7.14.5",
+        "@babel/runtime": "^7.14.6",
+        "abortcontroller-polyfill": "^1.2.3",
+        "autoprefixer": "10.4.14",
+        "babel-plugin-istanbul": "^6.0.0",
+        "babelify": "^10.0.0",
+        "backstopjs": "^6.1.4",
+        "browser-sync": "^2.27.3",
+        "browserify": "^17.0.0",
+        "chalk": "^4.1.2",
+        "cheerio": "^1.0.0-rc.10",
+        "codecov": "^3.8.3",
+        "core-js": "^3.21.1",
+        "cors": "^2.8.5",
+        "dialog-polyfill": "^0.5.6",
+        "eslint": "^8.45.0",
+        "eslint-cli": "^1.1.1",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "eslint-plugin-unused-imports": "^3.1.0",
+        "express": "^4.17.1",
+        "front-matter": "^4.0.2",
+        "fs-extra": "^11.1.1",
+        "fuse.js": "^3.6.1",
+        "glob": "^10.2.3",
+        "gulp": "^4.0.2",
+        "gulp-babel": "^8.0.0",
+        "gulp-cli": "^2.3.0",
+        "gulp-dart-sass": "^1.0.2",
+        "gulp-if": "^3.0.0",
+        "gulp-postcss": "^9.0.0",
+        "gulp-sourcemaps": "^3.0.0",
+        "gulp-terser": "^2.0.1",
+        "http-server": "^14.1.1",
+        "husky": "^8.0.3",
+        "jest": "^29.6.1",
+        "jest-axe": "^8.0.0",
+        "jest-environment-jsdom": "^29.6.1",
+        "jest-puppeteer": "^9.0.0",
+        "lighthouse": "^11.0.0",
+        "lint-staged": "^15.2.0",
+        "lodash": "^4.17.21",
+        "mdn-polyfills": "^5.14.0",
+        "normalize.css": "^8.0.1",
+        "nunjucks": "^3.2.3",
+        "pinst": "^3.0.0",
+        "postcss": "^8.3.5",
+        "postcss-url": "^10.1.3",
+        "prepend-file": "^2.0.1",
+        "prettier": "^3.0.0",
+        "puppeteer": "^21.0.2",
+        "remark-cli": "^12.0.0",
+        "remark-lint": "^9.1.2",
+        "remark-preset-lint-recommended": "^6.1.3",
+        "stylelint": "^16.6.0",
+        "stylelint-config-recommended-scss": "^14.0.0",
+        "stylelint-config-sass-guidelines": "^11.1.0",
+        "stylelint-config-standard": "^36.0.0",
+        "stylelint-order": "^6.0.4",
+        "stylelint-scss": "^6.3.0",
+        "through2": "^4.0.2",
+        "tick-manager": "^1.0.3",
+        "util": "^0.12.3",
+        "viewport-details": "^3.0.4",
+        "vinyl-buffer": "^1.0.1",
+        "vinyl-source-stream": "^2.0.0",
+        "whatwg-fetch": "^3.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
 }

package/scss/base/_forms.scss

@@ -1,29 +1,29 @@
 fieldset,
 legend {
-  border: 0;
-  margin: 0;
-  padding: 0;
+    border: 0;
+    margin: 0;
+    padding: 0;
 }
 
 fieldset {
-  width: 100%;
+    width: 100%;
 }
 
 input {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 ::-webkit-inner-spin-button {
-  display: none;
+    display: none;
 }
 
 input[type='text'],
 input[type='number'] {
-  appearance: none;
+    appearance: none;
 }
 
 select {
-  option[disabled][value=''] {
-    display: none;
-  }
+    option[disabled][value=''] {
+        display: none;
+    }
 }

package/scss/base/_global.scss

@@ -1,68 +1,69 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  word-wrap: break-word;
+    box-sizing: border-box;
+    word-wrap: break-word;
 }
 
 html {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
 }
 
 body {
-  height: 100%;
-  margin: 0;
-  position: relative;
+    height: 100%;
+    margin: 0;
+    position: relative;
 }
 
 img {
-  height: auto;
-  max-width: 100%;
-  vertical-align: middle;
+    height: auto;
+    max-width: 100%;
+    vertical-align: middle;
 }
 
 hr {
-  border: 0;
-  border-top: 1px solid var(--ons-color-borders);
-  margin: 2rem 0 0;
+    border: 0;
+    border-top: 1px solid var(--ons-color-borders);
+    margin: 2rem 0 0;
 }
 
 %a-focus {
-  background-color: var(--ons-color-focus);
-  box-decoration-break: clone;
-  box-shadow: 0 -2px var(--ons-color-focus),
-    0 4px var(--ons-color-text-link-focus);
-  color: var(--ons-color-text-link-focus);
-  outline: 3px solid transparent;
-  outline-offset: 1px;
-  text-decoration: none;
+    background-color: var(--ons-color-focus);
+    box-decoration-break: clone;
+    box-shadow:
+        0 -2px var(--ons-color-focus),
+        0 4px var(--ons-color-text-link-focus);
+    color: var(--ons-color-text-link-focus);
+    outline: 3px solid transparent;
+    outline-offset: 1px;
+    text-decoration: none;
 }
 
 a {
-  color: var(--ons-color-text-link);
-  text-decoration-thickness: 1px;
-  text-underline-position: under;
-  &:not(.ons-u-fs-r--b):hover {
-    .ons-u-fs-l &,
-    h2:not(.ons-u-fs-m) & {
-      text-decoration-thickness: 3px;
-    }
+    color: var(--ons-color-text-link);
+    text-decoration-thickness: 1px;
+    text-underline-position: under;
+    &:not(.ons-u-fs-r--b):hover {
+        .ons-u-fs-l &,
+        h2:not(.ons-u-fs-m) & {
+            text-decoration-thickness: 3px;
+        }
 
-    @include mq(m) {
-      .ons-u-fs-m &,
-      h2 &,
-      h3 & {
-        text-decoration-thickness: 3px;
-      }
+        @include mq(m) {
+            .ons-u-fs-m &,
+            h2 &,
+            h3 & {
+                text-decoration-thickness: 3px;
+            }
+        }
+    }
+    &:hover {
+        color: var(--ons-color-text-link-hover);
+        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+    }
+    &:focus:not(.ons-btn--link, .ons-btn--ghost, .ons-js-clear-btn, .ons-download__thumbnail--link, .ons-tab--row, .ons-skip-to-content) {
+        @extend %a-focus;
     }
-  }
-  &:hover {
-    color: var(--ons-color-text-link-hover);
-    text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
-  }
-  &:focus:not(.ons-btn--link, .ons-btn--ghost, .ons-js-clear-btn, .ons-download__thumbnail--link, .ons-tab--row, .ons-skip-to-content) {
-    @extend %a-focus;
-  }
 }

package/scss/base/_typography.scss

@@ -1,18 +1,18 @@
 html {
-  @include font-smoothing;
+    @include font-smoothing;
 
-  font-size: $base;
-  line-height: 1.6;
+    font-size: $base;
+    line-height: 1.6;
 }
 
 body {
-  color: var(--ons-color-text);
-  font-family: $font-sans;
-  font-feature-settings: 'ss01';
+    color: var(--ons-color-text);
+    font-family: $font-sans;
+    font-feature-settings: 'ss01';
 }
 
 p {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
 h1,
@@ -21,33 +21,33 @@ h3,
 h4,
 h5,
 h6 {
-  line-height: 1.2;
-  margin: 0 0 1rem;
-  strong {
-    @extend .ons-highlight;
-  }
+    line-height: 1.2;
+    margin: 0 0 1rem;
+    strong {
+        @extend .ons-highlight;
+    }
 }
 
 mark {
-  @extend .ons-highlight;
+    @extend .ons-highlight;
 
-  font-weight: $font-weight-bold;
+    font-weight: $font-weight-bold;
 }
 
 code {
-  font-size: 0.8rem;
+    font-size: 0.8rem;
 }
 
 ul {
-  margin: 0 0 1rem;
-  padding-left: 1.5rem;
+    margin: 0 0 1rem;
+    padding-left: 1.5rem;
 }
 
 li {
-  margin-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
 em {
-  font-style: normal;
-  font-weight: $font-weight-bold;
+    font-style: normal;
+    font-weight: $font-weight-bold;
 }

package/scss/helpers/_functions.scss

@@ -1,36 +1,39 @@
 @use 'sass:math';
+@use 'sass:string';
+@use 'sass:map';
 
 @function ems($pxval, $base: $base) {
-  $em-size: math.div($pxval, $base);
+    $em-size: math.div($pxval, $base);
 
-  @return #{$em-size}em;
+    @return #{$em-size}em;
 }
 
 @function rems($pxval, $base: $base) {
-  $rem-size: math.div($pxval, $base);
+    $rem-size: math.div($pxval, $base);
 
-  @return #{$rem-size}rem;
+    @return #{$rem-size}rem;
 }
 
 @function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
+    @return $num / ($num * 0 + 1);
 }
 
 @function map-set($map, $key, $value) {
-  $new: (
-    $key: $value,
-  );
+    $new: (
+        $key: $value,
+    );
 
-  @return map-merge($map, $new);
+    @return map.merge($map, $new);
 }
 
 @function str-replace($string, $search, $replace: '') {
-  $string: to-string($string);
-  $index: str-index($string, $search);
+    $string: to-string($string);
+    $index: string.index($string, $search);
 
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
+    @if $index {
+        @return string.slice($string, 1, $index - 1) + $replace +
+            str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
 
-  @return $string;
+    @return $string;
 }