@madgex/design-system 14.3.1 → 14.4.1

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>

package/src/typography/lists.njk

@@ -1,111 +0,0 @@
-<h2>Unordered list</h2>
-<ul class="mds-list mds-list--bullet">
-  <li class="mds-list__item">
-    <a href="#one">one</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">two</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#three">three</a>
-  </li>
-</ul>
-<h2>Ordered list</h2>
-<ol class="mds-list mds-list--number">
-  <li class="mds-list__item">one</li>
-  <li class="mds-list__item">two</li>
-  <li class="mds-list__item">three</li>
-</ol>
-<h2>Definition List with border</h2>
-<dl class="mds-list mds-list--definition mds-list--border">
-  <dt class="mds-list__key">Recruiter</dt>
-  <dd class="mds-list__value">The National Aeronautics and Space Association</dd>
-  <dt class="mds-list__key">Reference</dt>
-  <dd class="mds-list__value">98798HWV74IU3G</dd>
-  <dt class="mds-list__key">Expires</dt>
-  <dd class="mds-list__value">12pm, 25th November 1983</dd>
-</dl>
-<h2>Inline list</h2>
-<ul class="mds-list mds-list--inline">
-  <li class="mds-list__item">One</li>
-  <li class="mds-list__item">Two</li>
-  <li class="mds-list__item">Three</li>
-</ul>
-<h2>Bordered inline list (separated)</h2>
-<ul class="mds-list mds-list--inline mds-list--pipe">
-  <li class="mds-list__item">Four</li>
-  <li class="mds-list__item">Five</li>
-  <li class="mds-list__item">Six</li>
-</ul>
-<h2>Multilevel list</h2>
-<ol class="mds-list mds-list--number mds-list--multilevel">
-  <li class="mds-list__item">
-    one
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">two</a>
-  </li>
-  <li class="mds-list__item">three
-    <ul class="mds-list mds-list--bullet">
-      <li class="mds-list__item">first</li>
-      <li class="mds-list__item">second</li>
-      <li class="mds-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget metus nisi. Morbi
-        sollicitudin, erat sed elementum suscipit, dolor nibh sagittis dui, at ultrices massa erat non ipsum. Nam euismod
-        dapibus augue, sit amet efficitur urna malesuada vitae. Sed tincidunt felis a turpis vulputate, vitae sodales nibh
-        imperdiet. Donec ullamcorper risus quis convallis mollis. Nullam nec magna lectus. Etiam in lobortis purus. Duis
-        vestibulum, nibh sit amet commodo porttitor, nunc metus eleifend magna, at venenatis tortor justo at eros. Vivamus eu
-        tincidunt mi, vel fermentum tortor. Aenean tempus, magna a scelerisque consequat, libero tortor porttitor neque, nec
-        aliquam lorem purus sodales diam. Pellentesque a orci vitae orci fringilla sollicitudin quis vitae leo.
-        <ul class="mds-list mds-list--bullet">
-          <li class="mds-list__item">once</li>
-          <li class="mds-list__item">twice</li>
-        </ul>
-      </li>
-    </ul>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">four</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">five</a>
-  </li>
-</ol>
-<h2>List with no indent</h2>
-<ul class="mds-list mds-list--bullet mds-list--noindent">
-  <li class="mds-list__item">
-    <a href="#one">one</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#two">two</a>
-  </li>
-  <li class="mds-list__item">
-    <a href="#three">three</a>
-  </li>
-</ul>
-<h2>Step List</h2>
-<ol class="mds-step-list">
-  <li class="mds-step-list__item">Step 1</li>
-  <li class="mds-step-list__item">Step 2</li>
-  <li class="mds-step-list__item">Step 3</li>
-</ol>
-<h2>Step List with page progress</h2>
-<ol class="mds-step-list">
-  <li class="mds-step-list__item">
-    <a href="https://www.google.com">Past page with link</a>
-  </li>
-  <li class="mds-step-list__item mds-step-list__item--current mds-step-list__item--has-subnav" aria-current="page">Current
-    page
-    <ul class="mds-step-list-subnav">
-      <li class="mds-step-list-subnav__item">
-        <a class="mds-step-list-subnav__link" href="#section-1">Section 1</a>
-      </li>
-      <li class="mds-step-list-subnav__item">
-        <a class="mds-step-list-subnav__link" href="#section-2" aria-current="location">Section 2</a>
-      </li>
-      <li class="mds-step-list-subnav__item">
-        <a class="mds-step-list-subnav__link" href="#section-3">Section 3</a>
-      </li>
-    </ul>
-  </li>
-  <li class="mds-step-list__item mds-step-list__item--future">Ghost of pages future</li>
-</ol>