@madgex/design-system 14.3.1 → 14.4.0

package/src/js/index.js

@@ -1,6 +1,5 @@
 import './common';
 import tabs from '../components/tabs/tabs';
-import accordion from '../components/accordion/accordion';
 import subnavigation from '../components/subnavigation/subnavigation';
 import checkboxList from '../components/inputs/checkbox-list/checkbox-list';
 import popovers from '../components/popover/popover';
@@ -9,6 +8,7 @@ import { MdsFileUpload } from '../components/inputs/file-upload/file-upload';
 import characterCount from '../components/inputs/character-count/character-count';
 import button from '../components/button/button';
 import prose from '../helpers/prose/prose';
+import { MdsAccordion } from '../components/accordion/accordion';
 import { MdsDropdownNav } from '../components/dropdown-nav/dropdown-nav';
 import { MdsTimeoutDialog } from '../components/timeout-dialog/timeout-dialog';
 import { MdsCardLink } from '../components/card/card-link';
@@ -19,6 +19,10 @@ import { MdsScrollSpy } from '../components/scroll-spy/scroll-spy';
 import { MdsConsentGate } from '../components/consent-gate/consent-gate.js';
 export { setConsentAdapter } from '../components/consent-gate/consent-gate.js';
 
+if (!window.customElements.get('mds-accordion')) {
+  window.customElements.define('mds-accordion', MdsAccordion);
+}
+
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
 }
@@ -49,7 +53,6 @@ if (!window.customElements.get('mds-consent-gate')) {
 
 const initAll = () => {
   tabs.init();
-  accordion.init();
   subnavigation.init();
   checkboxList.init();
   modals.init();

package/src/layout/containers/index.njk

@@ -0,0 +1 @@
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/src/typography/index.njk

@@ -0,0 +1 @@
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/tasks/svgsprite.js

@@ -1,10 +1,10 @@
 const path = require('path');
 const fs = require('fs');
+const { createHash } = require('node:crypto');
 const { optimize } = require('svgo');
 const svgstore = require('svgstore');
 
-const filepath = path.resolve(__dirname, '../src/icons/');
-const prefix = path.basename(filepath, path.extname(filepath));
+const iconsDir = path.resolve(__dirname, '../src/icons/');
 
 const svgoOptions = {
   plugins: [
@@ -12,11 +12,9 @@ const svgoOptions = {
       name: 'preset-default',
       params: {
         overrides: {
-          cleanupIDs: {
-            prefix: `${prefix}-`,
+          cleanupIds: {
             minify: true,
           },
-          removeViewBox: false,
         },
       },
     },
@@ -26,57 +24,72 @@ const svgoOptions = {
         attrs: 'fill',
       },
     },
+    // ensure `id` attributes of different .svg files are different
+    // so that when a spritesheet is created they wont clash (many same named ids, sprites using the wrong reference!)
+    {
+      name: 'prefixIds',
+      params: {
+        delim: '',
+        // base the unique id prefix on the svg file path, this way it will be consistent inside the file, but unique to that file
+        prefix: (_, opt) => createHash('md5').update(opt.path).digest('hex').substring(0, 6) + '-',
+      },
+    },
   ],
 };
 
-let files = [];
-const icons = [];
-const sprites = svgstore();
-const inlineSprites = svgstore({
-  inline: true,
-  svgAttrs: {
-    id: 'spritesheet',
-    style: 'display: none',
-  },
-});
+/**
+ * load all icons data into a map, keyed by file path
+ *
+ * @returns {Map<string,string>} Map<iconFilePath, svgString>
+ */
+async function getIcons() {
+  const iconFilePaths = await Array.fromAsync(fs.promises.glob(path.join(iconsDir, '*.svg')));
+  const icons = new Map();
+  for (const iconFilePath of iconFilePaths) {
+    const svgString = await fs.promises.readFile(iconFilePath, 'utf8');
+    icons.set(iconFilePath, svgString);
+  }
+  return icons;
+}
+exports.getIcons = getIcons;
 
-async function createSvgStack() {
-  return new Promise((resolve, reject) => {
-    files = fs.readdirSync(filepath);
-    files.forEach((file) => {
-      // eslint-disable-next-line promise/param-names
-      new Promise((res) => {
-        const svgdata = fs.readFileSync(`${path.resolve(__dirname, filepath, file)}`, { encoding: 'utf8' });
-        const result = optimize(svgdata, {
-          path: `${path.resolve(__dirname, filepath, file)}`,
-          ...svgoOptions,
-        });
+/**
+ * @param  {Map<string,string>} icons
+ * @returns {{spritesheet:object, inlineSpritesheet:object, jsonSpritesheet:object}}
+ */
+async function generateSpritesheets(icons) {
+  // load all icon data
+  const spritesheet = svgstore();
+  const inlineSpritesheet = svgstore({ inline: true, svgAttrs: { id: 'spritesheet', style: 'display: none' } });
+  const jsonSpritesheet = {};
+  for (const [iconFilePath, svgString] of icons.entries()) {
+    // optimize icons - overwrite svgString data in icons map
+    const optimizedIcon = optimize(svgString, { path: iconFilePath, ...svgoOptions }).data;
+
+    // add icons to spritesheets
+    const nameFromFilename = path.basename(iconFilePath).replace(/.svg/i, '');
+    const prefixedName = `icon-${nameFromFilename}`;
 
-        res(result);
-      })
-        .then((icon) => {
-          const fileName = path.parse(file).name;
-          const prefixedName = `icon-${fileName}`;
+    spritesheet.add(prefixedName, optimizedIcon);
+    inlineSpritesheet.add(prefixedName, optimizedIcon);
+    jsonSpritesheet[prefixedName] = optimizedIcon;
+  }
+  return { spritesheet, inlineSpritesheet, jsonSpritesheet };
+}
+exports.generateSpritesheets = generateSpritesheets;
 
-          sprites.add(prefixedName, icon.data);
-          inlineSprites.add(prefixedName, icon.data);
+/**
+ * generate spritesheets, and write to disk
+ */
+async function createSvgStack() {
+  const icons = await getIcons();
+  const { spritesheet, inlineSpritesheet, jsonSpritesheet } = await generateSpritesheets(icons);
+  const ourDir = path.resolve(__dirname, '../dist/assets');
 
-          return fs.mkdir(path.resolve(__dirname, '../dist/assets'), { recursive: true }, async () => {
-            icons.push({ name: fileName });
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites.toString());
-            fs.writeFileSync(
-              `${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`,
-              inlineSprites.toString()
-            );
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.json')}`, JSON.stringify(icons));
-          });
-        })
-        .catch((err) => {
-          reject(err);
-        });
-      resolve('SVG Stack compiled');
-    });
-  });
+  await fs.promises.mkdir(ourDir, { recursive: true });
+  await fs.promises.writeFile(path.join(ourDir, 'icons.svg'), spritesheet.toString(), 'utf-8');
+  await fs.promises.writeFile(path.join(ourDir, 'icons-inline.svg'), inlineSpritesheet.toString(), 'utf-8');
+  await fs.promises.writeFile(path.join(ourDir, 'icons.json'), JSON.stringify(jsonSpritesheet), 'utf-8');
 }
 
 async function svgsprite() {

package/src/components/accordion/README.md

@@ -1,46 +0,0 @@
-## Callable
-
-Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
-
-## Parameters
-
-- `label`: The text inside the trigger button. Be as descriptive as you can as it will help for a11y. **required**
-- `labelOpen`: The text inside of the trigger button when accordion is expanded
-- `labelClasses`: class will be added to the trigger (useful to change the font size)
-- `icon`: override the default icon for the closed state
-- `iconOpen`: override the default icon for the open state
-- `noIcon`: Boolean, removes the icon from the accordion completely
-- `startsOpen`: if `true`, the accordion will be expanded by default. This will be overridden in JS when used as part of a checkbox list with pills, but is still recommended
-  as it will auto open the component for people not using JS surfacing the categories.
-- `nonClosing`: boolean to visually hide (for accessibility) the trigger and keep the accordion expanded
-- `breakpoint`: if a value (in px, em, rem) is passed, the accordion will be enabled only when screen size is smaller than the breakpoint
-- `leftAligned`: This will determine if the icon should sit on the left or the right of the trigger (default: false) - See design usage guidelines
-- `contentFirst`: Boolean, places the content above the trigger, pushing the trigger down below the content when open
-
-**Note:** Checkbox list with pills is a dependent component and should be checked and updated if any changes to this component are made.
-
-## Accessibility
-
-When using the non closing accordion, the trigger will be disabled and hidden from view so screenreaders can inform that the content has been expanded. The trigger is also removed from the navigation flow to make sure that it can't be tabbed into when using a keyboard.
-
-## Design usage guidelines
-
-Where possible, the defaults should remain as they are to ensure we remain consistent across the platform, though there are a few areas where you may need to step
-outside these guidelines, this offers an insight into the design decisions to best ensure you understand context and usage.
-
-- `icon`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of collapsable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `minus`
-- `iconOpen`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of expandable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `plus-small` (Plus is a little too big to align nicely with the content of the trigger)
-- `leftAligned`: Usage for this parameter depends largely on the content surrounding it. There are some cases where we have a list where some items are expandable while others are not so to avoid a misalignment due to the presence of icons or not, we've decided that when in a list the accordions would have the icons on the right. When used as a single component on the page, the icon is on the left instead.
-
-## Notes
-
-- 15/08/24 - Move to `details` broswer native accordion type component.
-
-- 09/12/20 - Non closing accordion - Moved `mds-visually-hidden` to trigger's parent. We noticed an issue on NVDA in Chrome, where the changes on the button like `aria-expanded` or `aria-disabled` were not announced when the button itself was visually hidden.
-
-- 02/11/20 - `aria-controls` attribute has been removed from the accordion as it is poorly supported and doesn't work as expected.
-
-References:
-
-- https://heydonworks.com/article/aria-controls-is-poop/ (that article's title says it all)
-- https://a11ysupport.io/tech/aria/aria-controls_attribute

package/src/components/button/README.md

@@ -1,27 +0,0 @@
-## Callable
-
-Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
-
-
-## Parameters
-
-- `href`: this sets the href and changes the button to an anchor element
-- `classes`: css classes to add on the button (for example `mds-width-full`)
-- `attributes`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
-
-## Full width button
-
-We have 2 helpers classes that can help you achieve full width buttons at different sizes.
-`.mds-width-full` and `.mds-width-auto`.
-
-For example, if you would like your button to be full width at mobile size and have `width: auto` at any wider size, add the following classes on the button (using the `classes` parameter): `mds-width-full mds-width-md-auto`.
-
-`mds-button--icon` can be used to adjust the padding to better fit around an icon button.
-
-Both helper classes are set with breakpoints. Just add the name of the class followed by the breakpoint name (`sm`, `md`, `lg`, `xl`) and the value (`full` or `auto`).
-
-## Prevent Double Submit
-
-Helper class `.js-mds-button-double-submit`
-
-If you click the form button twice in a row (slower than dobule click but faster than submitting), the browser can submit the form twice. Adding this class will disable the button for 1 second to prevent a double submission.

package/src/components/card/README.md

@@ -1,114 +0,0 @@
-The card component adds a border and padding around the content.
-
-## Callable
-
-Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) syntax to populate the main content
-
-## Parameters
-
-- `inList`: if `true`, the container element will be an `<li>` instead of a `<div>` (useful when used in listers) **optional**
-- `classes`: CSS classes to add to the container (`mds-card`) **optional**
-- `id`: used for the name of `data-test` attribute **optional**
-- `badges`: add badges at the top of the card, on the left or right (object) **optional**
-- `link`: add link parameters (object) **optional**
-  - `href`: the link URL **required**
-  - `title`: title of the link, appearing at the top of the card **required**
-  - `containerElement`: optional selection of element, defaults to a paragraph tag **optional**
-
-### `classes` parameter
-
-Use the class `mds-card--highlighted` in the `classes` parameter to apply a grey background to the card (colour: $constant-color-neutral-lightest)
-
-You can customise the `background`, `border` and add a `box-shadow` using the custom brand tokens and passing the class newly created as a parameter. `mds-card--[id of the custom style]`. In the example below, it would be `mds-card--1`. 
-
-In your brand.json, you would add for example:
-```
-{
-  ...(other tokens like color, font, size, etc)
-  "custom": {
-    "card": {
-      "1": {
-        "background": {
-          "value": "{color.brand.1.lightest.value}"
-        },
-        "border": {
-          "value": "{size.border.width.base.value} solid {color.brand.1.base.value}"
-        }
-      }
-    }
-  }
-}
-```
-
-Note: The styling above has been added to the design system defaults. So if you use the class `mds-card--1`, you will get by default the background in the "lightest" version of the brand colour 1 and a border of 1px in the colour of brand 1.
-
-### `badges` parameter
-
-Add your badge object to the `left` or `right` array, depending where you want it be displayed.
-The badge object is composed of the label you want to display and the css class you want to use for the styling of the badge.
-Example:
-```
-badges: {
-  left: [
-    {
-      label: 'Top Job',
-      styleId: '1',
-    },
-  ],
-  right: [
-    {
-      label: 'Approved Employer',
-      styleId: '1',
-    },
-    {
-      label: 'New',
-      styleId: '2',
-    },
-  ],
-}
-```
-Note: the `styleId` is used to create the class which will apply the styling to the badge i.e. `mds-badge--1`. It can be any string, it doesn't have to be a number and it obviously needs to match the name used when defining the tokens for the badge.
-
-## Badges default stylings
-
-The design system has some default styling for the badges.
-
-- `mds-badge--1`: black background, white text
-- `mds-badge--2`: green background, white text
-
-In the context of the jobseekers frontend, they will be used for the top job product and the new badge on the job card.
-
-The styling can be overridden or different ones can be added per project, using the `custom.badge` tokens.
-
-We only accept the following CSS properties: `background`, `color`, `font-size`, `font-weight`, `text-transform`, `padding`, `border`.
-
-Example: 
-You want to change the colour of the black badge and add a badge for a premium job product.
-
-In your brand.json, you would add:
-```
-{
-  ...(other tokens like color, font, size, etc)
-  "custom": {
-    "badge": {
-      "1": {
-        "background": { 
-          "value" : "#333" 
-        }
-      },
-      // the name can be whatever you want a number like `3` here or could be `premium-job` etc
-      "3": {
-        "background": { 
-          "value" : "#93c0f7" 
-        },
-        "color": { 
-          "value" : "#000" 
-        },
-        "border": {
-          "value": "#000"
-        }
-      }
-    }
-  }
-}
-```

package/src/components/icons/README.md

@@ -1,62 +0,0 @@
-## Setup
-
-**Default path of the icons file**:
-
-You need to set `defaultIconPath` as a Nunjucks global if you want to use an external file (for example, `/assets/icons/svg`).
-https://mozilla.github.io/nunjucks/api.html#addglobal
-
-If you prefer using inline svgs, don't set the path and include the file `icons-inline.svg` in your template instead.
-
-## Parameters
-
-- `iconName`: the name of the icon you want to use
-- `classes`: add extra CSS classes to the icon
-- `path`: if you need to use a different path than your default
-- `visuallyHiddenLabel`: add a visually hidden label (see Accessibility notes below)
-- `hasContainer`: `true/false` - used to add a container arount the icon _optional_
-- `containerClasses`: classes for the container (see Container notes below)
-
-## Accessibility
-
-The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead.
-
-If using the 'Icon' macro, simply pass the parameter `visuallyHiddenLabel` with the label you'd like as its value. It will add a `<span>` next to the SVG that will be visually hidden but accessible to screen readers (thanks to the class `mds-visually-hidden`).
-
-## Sizes
-
-By default, the icon size (width and height) is set to 1em.
-We also have 3 fixed sizes:
-
-- `.mds-icon--sm` : 16px
-- `.mds-icon--md` : 24px
-- `.mds-icon--lg` : 32px
-- `.mds-icon--xl` : 48px
-- `.mds-icon--xxl` : 72px
-
-### Next to text
-
-If using an icon next to some text, use classes `mds-icon--before` or `mds-icon--after` to add `margin-right` or `margin-left` to the icon.
-
-## Alignment
-
-To make sure that the icons have the same baseline as the text, we are adding `top: 0.125em` on them which corresponds to the icon offset divided by the size of the icon. Please see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 to see how it is calculated.
-
-## Container
-
-You can use the attributes `hasContainer` and `containerClasses` to add an icon within an container.
-We currently only have a circle.
-Add `mds-icon-container--circle` in `containerClasses`.
-
-To add a colour to the container, add one of the following classes:
-
-- `mds-icon-container--error` = `$constant-color-status-error-dark`
-- `mds-icon-container--success` = `$constant-color-status-success-dark`
-- `mds-icon-container--success` = `$constant-color-status-info-dark`
-
-Reference: [Colours tokens](/docs/tokens/colour)
-
-If the icon is next to some text, you can also add `mds-icon-container--before` or `mds-icon-container--before` to add `margin-right` or `margin-left` to the icon (It will be the same value as `mds-icon--before` or `mds-icon--after`).
-
-### IE support
-
-Internet Explorer doesn't support `<use href="url" />` if we use a URL in the href. We are using https://github.com/Keyamoon/svgxuse as a polyfill.

package/src/layout/containers/01-base-containers.njk

@@ -1,30 +0,0 @@
-<div class="mds-site-container container-example" style="margin: 80px 0;">
-  <main class="mds-main" role="main">
-    <div class="mds-wrapper">
-      <div class="mds-surface mds-margin-bottom-b5">
-        <div class="mds-surface__inner">
-          <h2>Content inside the site-container and wrapper</h2>
-          <p>site-container is 100%</p>
-          <p>wrapper is 97% - 20px (gutter width) and max-width 1240px</p>
-          <div style="height: 100px;"></div>
-        </div>
-      </div>
-      <div class="mds-grid-row mds-margin-bottom-b5">
-        <div class="mds-grid-col-12 mds-grid-col-sm-12 mds-grid-col-md-5 mds-grid-col-lg-8 mds-grid-col-xl-7">
-          <div class="mds-surface">
-            <div class="mds-surface__inner">Surface - test padding</div>
-          </div>
-        </div>
-        <div class="mds-grid-col-5 mds-grid-col-sm-5 mds-grid-col-md-7 mds-grid-col-lg-4 mds-grid-col-xl-5">
-          <div class="mds-surface">
-            <div class="mds-surface__inner">Surface - test padding</div>
-          </div>
-        </div>
-      </div>
-      <div class="mds-fixed-container mds-fixed-container--sticky mds-padding-b5 mds-text-align-center">This is a sticky container</div>
-    </div>
-  </main>
-</div>
-
-{# <div class="mds-fixed-container mds-padding-b5 mds-text-align-center">This a fixed container at the bottom</div> #}
-<div class="mds-fixed-container mds-fixed-container--top mds-padding-b5 mds-text-align-center">This a fixed container at the top</div>

package/src/layout/containers/02-branded-containers.njk

@@ -1,13 +0,0 @@
-{% from "../components/icons/_macro.njk" import MdsIcon %}
-{% from "../components/button/_macro.njk" import MdsButton %}
-
-<div class="mds-branded-container mds-branded-container--1 mds-padding-b4">
-  {{- MdsIcon({ iconName: 'email', classes: 'mds-icon--lg mds-margin-bottom-b2' }) -}}
-  <h3>Get job alerts</h3>
-  <p>Create a job alert and receive personalised <a href="/some-link">job recommendations</a> straight to your inbox</p>
-  {% call MdsButton({
-    href: '/somewhere'
-  }) -%}
-  Create alert
-  {%- endcall %}
-</div>

package/src/layout/containers/03-ad-containers.njk

@@ -1,6 +0,0 @@
-<div style="background-color: #ddd; padding: 20px;">
-  <div class="mds-ad-container mds-ad-container--leaderboard">
-    <div style="width:728px;height:90px;background-color:#f0f8ff;border:1px solid #14f;">ad example</div>
-  </div>
-  <div class="mds-ad-container mds-ad-container--leaderboard mds-padding-top-b3 mds-padding-bottom-b3"></div>
-</div>

package/src/layout/containers/04-highlighted-containers.njk

@@ -1,3 +0,0 @@
-<div class="mds-highlighted-container mds-padding-b4">
-  test
-</div>

package/src/layout/containers/README.md

@@ -1,30 +0,0 @@
-## Containers
-
-Class `mds-site-container` should be added right after the body, it contains all the visual elements of the site
-`mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages
-
-`mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.
-`mds-surface__inner` has a default padding of 16px but it doubles from the `md` breakpoint (600px). However, when using the grid, if the surface block is contained inside a grid column that is less than half the width of the grid, the padding will stay at 16px.
-
-To add a `position: fixed` container, use `mds-fixed-container`. By default it will be fixed at the bottom. Use `mds-fixed-container--top` to fix it at the top.
-
-To add a `position: sticky` to the container, use the modifier `mds-fixed-container--sticky`.
-
-When placed inside a `mds-wrapper` block, the container will stretch automatically to the full width of the container by default and will go back to be within the wrapper constraints from 600px.
-
-_Note: We don't currently use the sticky block inside a wrapper block at tablet/desktop size so it may have to be reviewed when we do._
-
-`mds-main` - this class is added to the HTML `<main>` element which represents the dominant content of the <body> of a document. (Note: A document mustn't have more than one `<main>` element that doesn't have the hidden attribute specified.)
-This class is there to be able to customise this container like adding a background, margin or padding with the help of branding tokens.
-
-## Branded Containers
-
-Use `mds-branded-container mds-branded-container--1` to get a container with the brand colour 1 as a background and white text (the background and the text are tokens that can be changed per project).
-The headings and links will inherit the colour set on the container (white by default).
-We currently only have brand colour 1 but we will add more if needed.
-
-## Ad Containers
-
-Use `mds-ad-container mds-ad-container--leaderboard` to get a container with ad-container-leaderboard-background token value (color-background-body by default)
-Use token `mds-color-ad-container-leaderboard-background` to set background color
-`mds-ad-container` won't display if empty

package/src/layout/containers/ad-containers.config.json

@@ -1,3 +0,0 @@
-{
-  "notes": "## Ad Containers\n\nUse `mds-ad-container mds-ad-container--leaderboard` to get a container with ad-container-leaderboard-background token value (color-background-body by default)\n\nUse token `mds-color-ad-container-leaderboard-background` to set background color\n`mds-ad-container` won't display if empty"
-}

package/src/layout/containers/base-containers.config.json

@@ -1,3 +0,0 @@
-{
-  "notes": "## Containers\n\nClass `mds-site-container` should be added right after the body, it contains all the visual elements of the site\n\n`mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages\n\n`mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.\n\n`mds-surface__inner` has a default padding of 16px but it doubles from the `md` breakpoint (600px). However, when using the grid, if the surface block is contained inside a grid column that is less than half the width of the grid, the padding will stay at 16px.\n\nTo add a `position: fixed` container, use `mds-fixed-container`. By default it will be fixed at the bottom. Use `mds-fixed-container--top` to fix it at the top.\n\nTo add a `position: sticky` to the container, use the modifier `mds-fixed-container--sticky`.\n\nWhen placed inside a `mds-wrapper` block, the container will stretch automatically to the full width of the container by default and will go back to be within the wrapper constraints from 600px.\n\n*Note: We don't currently use the sticky block inside a wrapper block at tablet/desktop size so it may have to be reviewed when we do.*\n\n`mds-main` - this class is added to the HTML `<main>` element which represents the dominant content of the <body> of a document. (Note: A document mustn't have more than one `<main>` element that doesn't have the hidden attribute specified.)\nThis class is there to be able to customise this container like adding a background, margin or padding with the help of branding tokens."
-}

package/src/layout/containers/branded-containers.config.json

@@ -1,3 +0,0 @@
-{
-  "notes": "## Branded Containers\n\nUse `mds-branded-container mds-branded-container--1` to get a container with the brand colour 1 as a background and white text (the background and the text are tokens that can be changed per project).\n\nThe headings and links will inherit the colour set on the container (white by default).\n\nWe currently only have brand colour 1 but we will add more if needed."
-}

package/src/layout/containers/highlighted-containers.config.json

@@ -1,3 +0,0 @@
-{
-  "notes": "## Highlighted Containers\n\nUse `mds-highlighted-container` to get a container with token `neutral lightest` as the background colour and the standard border radius."
-}

package/src/typography/font-types.config.json

@@ -1,3 +0,0 @@
-{
-  "notes": "We're using Utopia fluid type scale: https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.125,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12\n\nWe customised font `s-2` and `s-1` so they have a fixed value and don't change depending on the size of the viewport.\nThose 2 fonts being already quite small, we didn't want them getting smaller for accessibility or bigger as they would get too close to the base size and we would lose the visual hierarchy of the text."
-}

package/src/typography/font-types.njk

@@ -1,43 +0,0 @@
-{# Comments from https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.125,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 #}
-{% set fontSizesDoc = {
-  's-2': '12px',
-  's-1': '14px',
-  's0': '16px',
-  's1': '17.072px → 18px', 
-  's2': '18.2158px → 20.25px',
-  's3': '19.4363px → 22.7813px',
-  's4': '20.7385px → 25.6289px',
-  's5': '22.128px → 28.8325px',
-  's6': '23.6106px → 32.4366px',
-  's7': '25.1925px → 36.4912px',
-  's8': '26.8804px → 41.0526px',
-  's9': '28.6814px → 46.1841px'
-} %}
-
-<style>
-  .breakpoint-indicator { display: flex; width: 100%; position: sticky; top: 0; background: white; }
-  .example-copy { background-color: #f8f8f8; }
-  .example-copy:hover { background-color: #ececec; }
-</style>
-
-{% for fontName, item in tokens.font.type %}
-  <div class="mds-margin-bottom-b10">
-    <h2 class="mds-margin-bottom-b5"><strong>{{ fontName }}</strong></h2>
-    <ul>
-      <li>Size (in px): <strong>{{ fontSizesDoc[fontName] }}</strong> <span class="mds-font-s-1">(Viewport width: min 320px → max 1240px)</span></li>
-      <li>Line height: <strong>{{ item['line-height'].value }}</strong></li>
-    </ul>
-    <p class="mds-margin-bottom-b1" style="font-size: 16px;">Example:</p>
-    <div class="example-copy mds-highlighted-container" style="margin-bottom: 80px;">
-      <div class="mds-font-{{ fontName }}">
-        <p>
-          The quick brown fox jumps over the lazy dog
-        </p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend accumsan elementum. Praesent quis facilisis elit. Donec vel suscipit leo. Cras tincidunt lacus sed mauris fringilla sodales. Praesent quis facilisis elit. Donec vel suscipit leo. Cras tincidunt lacus sed mauris fringilla sodales.</p>
-      </div>
-    </div>
-
-    <hr style="border: 1px solid #eee; height: 0; margin-bottom: 80px;">
-
-  </div>
-{% endfor %}

package/src/typography/headings.njk

@@ -1,9 +0,0 @@
-<h1>The quick brown fox jumps over the lazy dog</h1>
-
-<h1><a>The quick brown link jumps over the lazy link</a></h1>
-
-<h2>The quick brown fox jumps over the lazy dog</h2>
-
-<h3>The quick brown fox jumps over the lazy dog</h3>
-
-<h4>The quick brown fox jumps over the lazy dog</h4>