mp-design-system 1.2.64 → 1.2.65

package/src/components/space.njk

@@ -1,191 +0,0 @@
----
-title: Space
-layout: system-page
----
-
-{% from "components/prose/macro.njk" import markdown %}
-
-{% set base = 18 %}
-{% set sizes = {
-  3xs: 0.25,
-  2xs: 0.5,
-  xs: 0.75,
-  s: 1,
-  m: 1.5,
-  l: 2,
-  xl: 3,
-  2xl: 4,
-  3xl: 6,
-  4xl: 8
-} %}
-
-{% set interpolated = [
-  ['3xs', '2xs'],
-  ['2xs', 'xs'],
-  ['xs', 's'],
-  ['s', 'm'],
-  ['m', 'l'],
-  ['l', 'xl'],
-  ['xl', '2xl'],
-  ['2xl', '3xl'],
-  ['3xl', '4xl'],
-  ['s', 'l'],
-  ['s', 'xl'],
-  ['m', 'xl'],
-  ['l', '2xl'],
-  ['l', '3xl'],
-  ['xl', '3xl'],
-  ['l', '4xl']
-] %}
-
-{% set content %}
-Space is a key component of design, not an accidental gap which appears between components. It helps users understand how components relate to each other, and find and focus on the content they want to consume.
-
-A series of space values enables more efficient design decision making. The space palette comprises multiples of the body font size of `18px`.
-
-These values can be combined to create fluid spaces whose size depends on the browser’s current viewport width. This is a very code-efficient way to ensure designs always make the most of the available screen space and feel at home on any device.
-
-To see this in action, resize your browser window and watch the red squares below scale at different rates.
-{% endset %}
-<div class="u-flow--gutter">
-  {{ markdown({
-    content: content
-  }) }}
-  
-  <div class="u-flow">
-    <h3 class="c-h c-h--step-2">Base sizes</h3>
-    <table class="c-table c-table--fixed">
-      <thead>
-        <tr>
-          <th>Example</th>
-          <th>Name</th>
-          <th>Size</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for size, multiplier in sizes %}
-          {% set px = multiplier * base %}
-          <tr>
-            <td>
-              <span style="width: var(--space-{{ size }});" class="c-library__space"><span></span></span>
-            </td>
-            <td>{{ size }}</td>
-            <td>{{ px }}px</td>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-
-  <div class="u-flow">
-    <h3 class="c-h c-h--step-2">Interpolated sizes</h3>
-    <table class="c-table c-table--fixed">
-      <thead>
-        <tr>
-          <th>Example</th>
-          <th>Name</th>
-          <th>From</th>
-          <th>To</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for group in interpolated %}
-          {% set from = group[0] %}
-          {% set to = group[1] %}
-          {% set fromPx = sizes[from] * base %}
-          {% set toPx = sizes[to] * base %}
-          <tr>
-            <td>
-              <span style="width: var(--space-{{ from }}-{{ to }});" class="c-library__space"><span></span></span>
-            </td>
-            <td>{{ from }}-{{ to }}</td>
-            <td>{{ fromPx }}px</td>
-            <td>{{ toPx }}px</td>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-
-{% set content %}
-### CSS custom properties
-
-Underpinning the fluid space system is a set of calculations made by CSS custom properties. Using the [CSS lock](https://utopia.fyi/blog/fluid-custom-properties) technique, these fluid space units can be used with the following syntax:
-
-```scss
-.c-component {
-  padding: var(--space-s);
-}
-```
-
-**However**, this syntax should be avoided if at all possible. Unless there are `calc()` calculations to be made (`calc(var(--space-xs) + 10px)`), you should use the SCSS or utility class syntax. This provides a sensible fallback for older browsers.
-
-### SCSS mixin
-
-Fluid space is exposed via a number of mixins. As IE support is required and CSS Custom Properties are doing most of the heavy lifting in this fluid system, we need to be able to fallback to sensible defaults, without including an absurd number of media queries, as is usually achieved with CSS locks.
-
-There is a `space()` mixin that allows you to pass a property and up to four arguments. These map directly to the padding/margin shorthand arguments of top, right, bottom, and left:
-
-```scss
-.c-component {
-  @include padding('s', 0);
-}
-```
-
-There are also mixins for the four direction properties:
-
-```scss
-.c-component {
-  @include margin-left('s');
-}
-```
-
-Space units can also be interpolated to give a sliding scale from smaller to larger screens. This example runs the top margin between 'small' and 'medium', the right & left as 'large', and the bottom as `4rem`:
-
-```scss
-.c-component {
-  @include margin('s-m', 'l', 4rem);
-}
-```
-
-### Source → Compiled
-
-<table class="c-table">
-  <thead>
-    <tr>
-      <th>Source</th>
-      <th>Compiled</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>@include margin-left('s')</code></td>
-      <td><code>margin-left: 18px;</code><br />
-      <code>margin-left: var(--space-s);</code></td>
-    </tr>
-    <tr>
-      <td><code>@include padding('l', 0)</code></td>
-      <td><code>padding: 36px 0;</code><br />
-      <code>padding: var(--space-l) 0;</code></td>
-    </tr>
-    <tr>
-      <td><code>@include margin('s-m', 'l', 4rem)</code></td>
-      <td><code>margin: 18px 36px 4rem;</code><br />
-      <code>margin: var(--space-s-m) var(--space-l) 4rem;</code></td>
-    </tr>
-  </tbody>
-</table>
-
-### Utility classes
-
-As well as custom properties, space units can be applied using utility classes, with one set for padding and another for margins.
-
-```html
-<div class="u-margin-bottom-s"></div> // Small margin bottom
-<div class="u-pad-y-l"></div> // Large padding top and bottom
-<div class="u-margin-bottom-l-xl"></div> // Large to Extra Large margin bottom
-```
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}
-</div>

package/src/components/typography.njk

@@ -1,135 +0,0 @@
----
-title: Typography
-layout: system-page
-sidebar: components
----
-
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/alert/macro.njk" import alert %}
-
-{% set content %}
-## Typographic scale
-
-The typographic system is based on [utopia.fyi](https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2,) – a method of scaling type and space without breakpoints. The benefit is that websites built this way feel at home on any device.
-
-[An introduction to the what and why of Utopia](https://utopia.fyi/blog/designing-with-fluid-type-scales).
-{% endset %}
-
-<div class="u-flow--l">
-  {{ markdown({
-    content: content
-  }) }}
-
-  <div class="u-flow">
-    <h2 class="u-step--2">Step -2 <code class="u-step--1 u-grey-step-1 u-normal">.u-step--2</code></h2>
-    <h2 class="u-step--1">Step -1 <code class="u-step--1 u-grey-step-1 u-normal">.u-step--1</code></h2>
-    <h2 class="u-step-0">Step 0 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-0</code></h2>
-    <h2 class="u-step-1">Step 1 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-1</code></h2>
-    <h2 class="u-step-2">Step 2 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-2</code></h2>
-    <h2 class="u-step-3">Step 3 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-3</code></h2>
-    <h2 class="u-step-4">Step 4 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-4</code></h2>
-    <h2 class="u-step-5">Step 5 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-5</code></h2>
-    <h2 class="u-step-6">Step 6 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-6</code></h2>
-    <h2 class="u-step-7">Step 7 <code class="u-step--1 u-grey-step-1 u-normal">.u-step-7</code></h2>
-
-    <p>Generated with <a class="u-link" href="https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2,">Utopia</a></p>
-  </div>
-
-  {{ alert({
-    content: '<p><strong>Note:</strong> these classes affect the <code>font-size</code> and <code>letter-spacing</code>, not the weight. Check out the headings further down the page for those classes.</p>'
-  }) }}
-
-{% set content %}
-### SCSS mixin
-
-Fluid typography is exposed via a SCSS mixin with the `step($number)` syntax. This allows us to fall back to a sensible default if the browser doesn't support custom properties For example:
-
-```scss
-.c-component {
-  @include step(2);
-
-  /* Generates */
-  letter-spacing: -0.02em;
-  font-size: 25.92px;
-  font-size: var(--step-2);
-}
-```
-
-For this font, `letter-spacing` is tightly coupled to the `font-size`, so this mixin covers that for you.
-
-### Utility classes
-
-As well as the mixin, typographical units can be applied using utility classes:
-
-```html
-<p class="u-step--1">Step -1</p>
-```
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}
-
-<hr class="u-hr" />
-
-{% set content %}
-## Typeface
-
-The website currently uses a single font family: [Inter](https://rsms.me/inter/). This typeface has been selected for its;
-- Excellent clarity and legibility
-- Extensive character set
-- Comprehensive weight and style options
-- Understated authority
-
-Unless there’s a specific reason;
-- Text is regular weight and grey
-- Headings are bold and grey
-- Links are utility blue
-- Links within copy are underlined
-
-### Hierarchy
-
-Page titles use the largest heading size: Step 6. Section headings use the next size down: Step 5, and so on. Designers and content authors should follow this convention to ensure consistency.
-
-**However**, other than in [prose](/components/prose/), there is no automatic relation between the HTML heading elements (`<h2>`), and the size of the text. This is an intentional semantic decision to allow us to control the page flow **and** the design, and not be hamstrung by one or the other.
-
-### Site-specific variation
-
-The blog uses the “stylistic alternates” character set to subtly soften the formal aesthetic of the Inter UI typeface.
-
-![Stylistic alternates demonstration](/static/img/salt.png)
-
-## Headings
-
-Headings by default are bold and grey. In some contexts colour and weight variation can be used to highlight a specific element, for example a tagline on a product page. This option is used sparingly in order to maintain overall consistency.
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}
-
-{% set headings = [
-  ['Page title'],
-  ['Step 6'],
-  ['Step 5'],
-  ['Step 4'],
-  ['Step 3'],
-  ['Step 2'],
-  ['Step 1'],
-  ['Step 0'],
-  ['Step -1', 'step--1'],
-  ['Page subtitle'],
-  ['Upper'],
-  ['Event date'],
-  ['Reset']
-] %}
-
-<div class="u-flow--m">
-  {% for h in headings %}
-    {% set heading = h[0] %}
-    {% set class = h[1] or heading | slug %}
-    <h2 class="c-h c-h--{{ class }}">{{ heading }}</h2> <code class="u-step--1 u-grey-step-1">c-h c-h--{{ class }}</code>
-  {% endfor %}
-</div>
-
-</div>

package/src/components/utilities.md

@@ -1,182 +0,0 @@
----
-title: Utilities
-layout: content-page
-sidebar: components
----
-
-These utility classes each do a single, simple job. They can be applied to any HTML element, and are designed to be used in a wide variety of contexts, when creating a new component or variant might not be required.
-
-## Typography
-
-```html
-<div class="u-strong">Bold text</div>
-```
-
-```html
-<div class="u-normal">Regular-weight (non-bold) text</div>
-```
-
-```html
-<div class="u-text-center">Center-aligned text</div>
-```
-
-```html
-<div class="u-ls">Standard letter-spacing (-0.01em)</div>
-```
-
-More typography utility classes are documented on the [typography page](/components/typography).
-
----
-
-## Visibility & display
-
-```html
-<div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>
-```
-
-```html
-<div class="u-display-none">Entirely hidden</div>
-```
-
-```html
-<div class="u-display-block">Block-level layout</div>
-```
-
-```html
-<div class="u-display-inline-block">Inline-block-level layout</div>
-```
-
-```html
-<div class="u-revealed">The opposite of u-hidden, useful for e.g. accordions</div>
-```
-
-```html
-<div class="u-disabled">
-    <label class="c-label" for="text_input">
-        Disabled input, without using the [disabled] attribute</label>
-    <input type="text" class="c-input">
-</div>
-```
-
----
-
-## Layout
-
-```html
-<div class="u-float-right">Floated right</div>
-```
-
-```html
-<div class="u-clear-both">Cleared from floats</div>
-```
-
-```html
-<div class="u-relative">Relative positioning</div>
-```
-
-```html
-<div class="u-sticky">This will "stick" to the top of the screen while scrolling</div>
-```
-
-```html
-<div class="u-sticky--gutter">To create a small gap above a sticky element</div>
-```
-
-```html
-<div class="u-split">
-    <p>Split: aligned left</p>
-    <a class="u-link">Aligned right</a>
-</div>
-The two child items will be aligned in a horizontal row
-```
-<div class="u-split u-pad-s u-border">
-    <p>Split: aligned left</p>
-    <a class="u-link">Aligned right</a>
-</div>
-
----
-
-## Padding and margins
-
-#### Syntax: 
-`u`-`(pad or margin)`-`(size)`
-
-`u`-`(pad or margin)`-`(direction, optional)`-`(size)`-`(flex size, optional)`
-
-```html
-<div class="u-pad-s">Small padding on all sides</div>
-```
-
-```html
-<div class="u-margin-x-xs">Extra small margin on left and right</div>
-```
-
-```html
-<div class="u-margin-left-m">Medium margin on left side only</div>
-```
-
-```html
-<div class="u-pad-y-l-xl">Flexible (large to XL) padding on top and bottom</div>
-Grows from large padding on small screens, to xl padding on large screens
-```
-
-Sizes | Directions
-------|-----------
-3xs | top
-2xs | bottom
-xs | left
-s | right
-m | y
-l | x
-xl | 
-2xl | 
-3xl | 
-4xl | 
-
-N.B. Not all permutations are available in the existing CSS, as that would amount to over 4800 extra lines of code. Currently we've only implemented a handful - but we can add more as needed.
-
-More padding and margin utility classes are documented on the [space page](/components/space).
-
----
-
-## Miscellaneous
-
-```html
-<div class="u-link-inside">Links inside will have underline styling</div>
-```
-
-```html
-<div class="u-border">Element will have a subtle border</div>
-```
-
-<br>
-
-#### Cutoff
-
-`u-cutoff`-`(optional direction; can be bottom-left, top-left, or top-right)`-`(size, optional)`
-
-N.B. The default diagonal size is based on `var(--gutter)`.
-
-```html
-<div class="u-cutoff">Cutoff effect on the bottom-right corner</div>
-
-<div class="u-cutoff--top-left">Top left cutoff</div>
-
-<div class="u-cutoff--xl">XL size cutoff</div>
-```
-
-<div class="u-bg-blue-step-2 u-pad-xl u-cutoff">Cutoff effect on the bottom-right corner</div>
-
-<div class="u-bg-blue-step-2 u-pad-xl u-cutoff--top-left">Top left cutoff</div>
-
-<div class="u-bg-blue-step-2 u-pad-xl u-cutoff--xl">XL size cutoff</div>
-
-<br>
-
-#### Scroll shadows
-
-When a tab row is too wide for the screen, this displays shadows which indicate that scrolling/swiping is available. Horizontal and vertical options are available. [See example](/components/tabs-scroll-shadows).
-
-```html
-<nav class="c-tabs__controls u-scroll-shadows--h">
-```

package/src/components-full-pages.njk

@@ -1,24 +0,0 @@
----
-pagination:
-    data: components.components
-    size: 1
-    alias: component
-permalink: "components/full/{{ component.slug }}/"
-eleventyComputed:
-  title: "{{ component.title }}"
----
-
-{% extends "layout.njk" %}
-
-{% from "components/component/component.njk" import c %}
-
-{% block head %}
-  <link rel="stylesheet" href="/build/scss/library.css" />
-{% endblock %}
-
-{% block inner %}
-  {% set comp %}
-    {{ c(component.component, component.context) }}
-  {% endset %}
-  {% include "components/component/preview-" + component.preview + ".njk" %}
-{% endblock %}

package/src/components-pages.njk

@@ -1,103 +0,0 @@
----
-pagination:
-    data: components.components
-    size: 1
-    alias: component
-permalink: "components/{{ component.slug }}/"
-sidebar: components
-eleventyComputed:
-  title: "{{ component.title }}"
----
-
-{% extends "library.njk" %}
-
-{% from "components/component/component.njk" import c, code, docs, props, context %}
-{% from "components/twi/macro.njk" import twi %}
-{% from "components/prose/macro.njk" import prose %}
-
-{% block content %}
-  <div class="c-library-stretch u-wrap mp c-tabs c-tabs--flex c-tabs--anchor c-tabs--persist u-pad-y-m-l">
-    <header class="u-wrap u-flow--s-l u-margin-bottom-s">
-      <div class="u-split">
-        <h1 class="c-h c-h--step-4">{{ component.title }}</h1>
-        <div>
-          {% if component.version %}<span class="c-library-version">Version {{ component.version }}</span>{% endif %}
-          {% if component.status %}<span class="u-margin-left-xs c-library-status c-library-status--{{ component.status | slug }}">{{ component.status }}</span>{% endif %}
-        </div>
-      </div>
-
-      {% if component.description %}<p>{{ component.description }}</p>{% endif %}
-
-      <nav class="c-tabs__controls">
-        <ul class="c-tabs__controls-list">
-          <li><a class="c-tabs__control c-tabs__control--active" href="#component-example">Example</a></li>
-          <li><a class="c-tabs__control" href="#component-code">Code</a></li>
-          <li><a class="c-tabs__control" href="#component-context">Context</a></li>
-          {% if component.siblings | length > 1 %}<li><a class="c-tabs__control" href="#component-variants">Variants</a></li>{% endif %}
-          {% if component.docs or component.props %}<li><a class="c-tabs__control" href="#component-docs">Documentation</a></li>{% endif %}
-          {% if component.figma %}<li>
-            {{ twi({ icon: 'log-out', align: 'right', label: 'Figma', link: component.figma, classes: 'c-tabs__control', attrs: 'target="_blank"' }) }}
-          </li>{% endif %}
-          <li>
-          {{ twi({ icon: 'log-out', align: 'right', label: 'BitBucket', link: "https://bitbucket.org/mp-website/mp-design-system/src/master/src/_includes/components/" + (component.component.folder or component.component.name), classes: 'c-tabs__control', attrs: 'target="_blank"' }) }}
-          </li>
-        </ul>
-      </nav>
-    </header>
-
-    <div class="c-library-stretch c-tabs__content">
-      <div class="c-tab c-tab--active c-library-stretch" id="component-example">
-        <div class="c-library__frame c-library-stretch">
-          <div class="c-library__frame-links">
-            <button type="button" class="c-library__frame-background">Toggle background</button>
-            <a href="/components/full/{{ component.slug }}" target="_blank">Open fullscreen</a>
-          </div>
-          <div class="c-library__frame-wrap" id="iframe-wrap">
-            <iframe src="/components/full/{{ component.slug }}" sandbox="allow-same-origin allow-scripts allow-forms allow-modals" style="" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="c-tab" id="component-code">
-        <div class="u-wrap--content">
-          {{ code(component.component, component.context) }}
-        </div>
-      </div>
-
-      <div class="c-tab" id="component-context">
-        <div class="u-wrap--content">
-          {{ context(component.context) }}
-        </div>
-      </div>
-
-      <div class="c-tab" id="component-docs">
-        <div class="u-flow--l">
-          {% if component.docs %}
-            {{ prose({
-              content: docs(component.component)
-            }) }}
-          {% endif %}
-
-          {% if component.props | length %}
-            <div class="u-flow--l">
-              {% for table in component.props %}
-                <div class="u-flow--2xs">
-                  <h3 class="c-h c-h--step-2">{{ table.title | safe if table.title else 'Props' }}</h3>
-                  {{ props(table.table) }}
-                </div>
-              {% endfor %}
-            </div>
-          {% endif %}
-        </div>
-      </div>
-
-      <div class="c-tab u-wrap mp o-prose" id="component-variants">
-        <ul>
-          {% for sibling in component.siblings %}
-            <li><a href="/components/{{ sibling.slug }}">{{ sibling.title }}</a></li>
-          {% endfor %}
-        </ul>
-      </div>
-    </div>
-  </div>
-{% endblock %}

package/src/content/and-so/please-write-responsibly.md

@@ -1,15 +0,0 @@
----
-title: Please write responsibly
-layout: content-page
-sidebar: content
-tags: content
-date: 2020-03-02
----
-
-We hope you now have a clear idea of how we write at Malvern Panalytical.
-
-We’ve tried to give a broad range of examples – but it’s never possible to capture everything, and there will occasionally be exceptions to every rule.
-
-So, it’s up to you to use your good judgment and use the spirit of our tone of voice – that we focus on what really matters, that we’re clear, confident and credible – as your guide.
-
-**Now it’s over to you.**

package/src/content/and-so/sitting-down.md

@@ -1,13 +0,0 @@
----
-title: Sitting down to write
-layout: content-page
-sidebar: content
-tags: content
-date: 2020-03-01
----
-1. **Make a plan.** Think about the points you want to make. Do some of them naturally group together into themes? What’s the most important thing? Are they all necessary? What’s the best order for them to go in?
-2. **Picture a real person.** Think of an intelligent friend or family member who doesn’t work in science. By making it clear enough for them, you’ll make it clear for everyone.
-3. **Write with your ears.** Writing doesn’t have to happen on paper or keyboard. Try recording yourself speaking off-the-cuff first, then transcribe it, noticing what words and phrases you use. Read your final version out loud to yourself or someone else and listen to what it sounds like.
-4. **Do the ‘at a glance’ test.** Even before you read your piece, does it look inviting or off-putting? Is it broken up into short, simple sections with lots of white space? Or does it look dense and like it’s going to be hard work?
-5. **Cut your first draft by 25%.** Setting yourself a target forces you to be more ruthless at cutting unnecessary words.
-6. **Keep a list.** When you hear a useful expression or explanation of a subject you write about a lot, make a note of it. Pretty soon you’ll have a collection of useful ‘thought starters’ and you’ll never have to start with a blank page ever again.