mp-design-system 1.2.63 → 1.2.65

package/src/components/grid/generic.njk

@@ -1,99 +0,0 @@
----
-title: Generic grids
-layout: system-page
-sidebar: false
-crumb: ["/components/grid/", "Grid"]
----
-
-<div class="u-flow--l">
-  <p>All <code>o-grid</code>s are single-column, full width, below 22.4em/358px. Three- and four-column grids begin to split into columns above 38em/608px, and two-column grids split into columns above 40em/640px.</p>
-  <div class="u-flow--xs">
-    <p class="u-step--1"><code>.o-grid .o-grid--of-two</code></p>
-    <p class="u-step--1 u-grey-step-1">Two columns above 40em/640px</p>
-    <div class="o-grid o-grid--of-two">
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="u-flow--xs">
-    <p class="u-step--1"><code>.o-grid .o-grid--of-two-late</code></p>
-    <p class="u-step--1 u-grey-step-1">Two columns above 55em/880px</p>
-    <div class="o-grid o-grid--of-two-late">
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="u-flow--xs">
-    <p class="u-step--1"><code>.o-grid .o-grid--of-two-early</code></p>
-    <p class="u-step--1 u-grey-step-1">Two columns above 22.4em/358px</p>
-    <div class="o-grid o-grid--of-two-early">
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="u-flow--xs">
-    <p class="u-step--1"><code>.o-grid .o-grid--of-three</code></p>
-    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 55em/880px</p>
-    <div class="o-grid o-grid--of-three">
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="u-flow--xs">
-    <p class="u-step--1"><code>.o-grid .o-grid--of-three-late</code></p>
-    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 68em/1088px</p>
-    <div class="o-grid o-grid--of-three-late">
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-    </div>
-  </div>
-  
-  <div class="u-flow--xs">
-    <p class="u-step--1"><code>.o-grid .o-grid--of-four</code></p>
-    <p class="u-step--1 u-grey-step-1">Two columns above 38em/608px, then three columns above 60em/960px</p>
-    <div class="o-grid o-grid--of-four">
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-      <div>
-        <div class="c-library-grid"></div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/components/grid/index.njk

@@ -1,86 +0,0 @@
----
-title: Grid
-layout: system-page
-sidebar: components
----
-
-{% from "components/card/macro.njk" import card %}
-{% from "components/prose/macro.njk" import markdown %}
-
-<div class="o-grid o-grid--of-three-late u-margin-bottom-s">
-  {{ card({
-      theme: {
-        layout: 'single',
-        size: 'large',
-        border: true
-      },
-      header: {
-        title: 'Generic'
-      },
-      body: {
-        content: '<p>Grids to be nested inside layout grids, splitting content into equal columns.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/components/grid/generic/',
-          label: 'Read more'
-        }
-      }
-  }) }}
-  {{ card({
-      theme: {
-        layout: 'single',
-        size: 'large',
-        border: true
-      },
-      header: {
-        title: 'Layout'
-      },
-      body: {
-        content: '<p>Grids designed to lay out full pages, using the twelve column grid.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/components/grid/layout/',
-          label: 'Read more'
-        }
-      }
-  }) }}
-  {{ card({
-      theme: {
-        layout: 'single',
-        size: 'large',
-        border: true
-      },
-      header: {
-        title: 'Wrapper'
-      },
-      body: {
-        content: '<p>Site-width constraints.</p>'
-      },
-      footer: {
-        cta: {
-          link: '/components/grid/wrap/',
-          label: 'Read more'
-        }
-      }
-  }) }}
-</div>
-
-{% set content %}
-## Common breakpoints (mobile first)
-
-These are guidelines, not strict rules. In general you should add a breakpoint whenever the design requires it, not whenever these guidelines say so.
-
-| Ems | Px | What happens above this breakpoint: |
-|-----|----|--------|
-| 38em | 608px | [Generic grids](/components/grid/generic) expand from single- to multi-column (anything below this is considered "Mobile") |
-| 40em | 641px | Comparison tables expand from single- to multi-column |
-| 48em | 768px | Mobile menu becomes desktop menu |
-| 55em | 880px | [Layout grids](/components/grid/layout) expand from single- to multi-column |
-| 70em | 1120px | Column widths expand slightly (anything above this is considered "Desktop") |
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}

package/src/components/grid/layout.njk

@@ -1,56 +0,0 @@
----
-title: Layout grids
-layout: system-page
-sidebar: false
-crumb: ["/components/grid/", "Grid"]
----
-
-{% from "components/prose/macro.njk" import markdown %}
-
-{% set content %}
-All page layouts are composed to a 12-column grid which can be split in various ways to display different types of content.
-
-Options have been included to control component order when the layout is stacked at small viewport widths. For example in some instances sidebar content should appear above main body content, while in other instances it should appear below. This depends on which element is more critical for users to see first: Meta information about an event might come first, while a related content card might come last.
-{% endset %}
-
-{% set grids = [['9/3'], ['3/9'], ['8/4'], ['4/8'], ['8/3', 'o-grid--float'], ['8/3', 'o-grid--push'], ['3/8', 'o-grid--pull'], ['4/7', 'o-grid--push']] %}
-
-<div class="u-flow--xl">
-  {{ markdown({
-    content: content
-  }) }}
-  
-  {% for i in grids %}
-    {% set item = i[0] %}
-    {% set modifier = i[1] %}
-    <div class="u-flow">
-      <h2 class="c-h c-h--step-3">{{ item }} {{ '(' + modifier + ')' | replace('o-grid--', '') if modifier }}</h2>
-
-      <div class="u-flow--xs">
-        <p class="u-step--1"><code>o-grid o-grid--{{ item }} {{ modifier if modifier }}</code></p>
-        <div class="o-grid o-grid--layout o-grid--{{ item }} {{ modifier if modifier }}">
-          <main>
-            <div class="c-library-grid c-library-grid--first"></div>
-          </main>
-          <aside>
-            <div class="c-library-grid c-library-grid--alt"></div>
-          </aside>
-        </div>
-      </div>
-
-      <div class="u-flow--xs">
-        <p class="u-step--1"><code>o-grid o-grid--{{ item }}-switch {{ modifier if modifier }}</code></p>
-        <div class="o-grid o-grid--layout o-grid--{{ item }}-switch {{ modifier if modifier }}">
-          <main>
-            <div class="c-library-grid c-library-grid--first"></div>
-          </main>
-          <aside>
-            <div class="c-library-grid c-library-grid--alt"></div>
-          </aside>
-        </div>
-      </div>
-    </div>
-  {% endfor %}
-
-</div>
-

package/src/components/grid/wrap.njk

@@ -1,20 +0,0 @@
----
-title: Wrapper
-layout: system-page
-sidebar: false
-crumb: ["/components/grid/", "Grid"]
----
-
-<div class="u-flow--l">
-  <div class="u-flow">
-    <p class="u-step--1"><code>.u-wrap</code></p>
-    <div class="c-library-grid"></div>
-  </div>
-  
-  <div class="u-flow">
-    <p class="u-step--1"><code>.u-wrap--content</code></p>
-    <div class="u-wrap--content">
-      <div class="c-library-grid"></div>
-    </div>
-  </div>
-</div>

package/src/components/iconography.njk

@@ -1,92 +0,0 @@
----
-title: Iconography
-layout: system-page
-sidebar: components
----
-
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/icon/macro.njk" import icon %}
-
-{% set content %}
-Icons should add clarity or affordance to interface elements and should not be used purely decoratively.
-
-They are generally simple line icons drawn with a 2px stroke, and should fit inside a 24px container.
-
-New icons introduced should be visually consistent with the set pictured here.
-
-Icons add visual noise to designs and should be used sparingly.
-{% endset %}
-
-{% set icons = [
-  'arrow-left',
-  'arrow-right',
-  'chevron-down',
-  'chevron-up',
-  'cross',
-  'dash',
-  'facebook',
-  'file',
-  'info',
-  'instagram',
-  'linkedin',
-  'lock',
-  'log-out',
-  'monitor',
-  'pin',
-  'play',
-  'rss',
-  'search',
-  'shopping-cart',
-  'tick',
-  'twitter',
-  'warning',
-  'youtube'
-] %} 
-
-{% set content2 %}
-### Adding new icons
-
-Adding new icons to the SVG sprite is a manual process.
-
-1. Create (or copy-paste) your new icon on a 24px × 24px artboard in Illustrator
-2. Export as an SVG
-3. Copy into <a href="https://jakearchibald.github.io/svgomg/" target="_blank" rel="external noopener noreferrer nofollow">https://jakearchibald.github.io/svgomg/</a>
-   - Adjust the options to best reduce the file size
-   - Export from SVGOMG as code
-5. Paste into Franklin's /src/static/svg/sprite.svg
-   - Convert the \<svg> tag into a \<symbol>
-   - Add an id attribute
-   - Generally ensure your \<symbol> looks the same as existing ones
-
-Please remember to add your icon to this page!
-{% endset %}
-
-<div class="u-flow--l">
-  {{ markdown({
-    content: content
-  }) }}
-  
-  <table class="c-table c-table--center u-wrap--content">
-    <thead>
-      <tr>
-        <th>Icon</th>
-        <th>ID</th>
-        <th>Code (Nunjucks)</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for id in icons %}
-        <tr>
-          <td class="u-step-3">
-            {{ icon({ id: id }) }}
-          </td>
-          <td><code>{{ id }}</code></td>
-          <td><code>{{ "{{ icon({ id:" }} {{ id }} }) }}</code></td>
-        </tr>
-      {% endfor %}
-    </table>
-
-    {{ markdown({
-      content: content2
-    })}}
-</div>

package/src/components/index.njk

@@ -1,65 +0,0 @@
----
-title: Components
-description: Styles and resuable building blocks written in Sass and HTML.
-layout: system-page
-sidebar: components
-status: 'Development'
-version: 0.1.0
----
-
-{% from "components/prose/macro.njk" import markdown %}
-{% from "components/usp/macro.njk" import usp %}
-
-<div class="u-flow--l">
-{% set content %}
-Use these foundation styles and components to design and build consistent and usable interfaces.
-
-Also, review some example [patterns](/patterns/) and [pages](/prototype/home/) to see the components in practice.
-
-## About this system
-
-In order to maintain the integrity of the system it's important we all understand how to use and contribute to this system to meet our needs.
-{% endset %}
-
-{{ markdown({
-  content: content
-}) }}
-
-<div class="o-grid o-grid--of-three-late">
-  {{ usp({
-    title: 'A living resource',
-    content: '<p>A system that will constantly evolve to meet our needs.</p>',
-    classes: 'c-usp c-usp--bordered'
-  }) }}
-
-  {{ usp({
-    title: 'Centrally managed',
-    content: '<p>It will be managed and maintained by a central Design System Team, who will be on hand for questions and feedback.</p>',
-    classes: 'c-usp c-usp--bordered'
-  }) }}
-
-  {{ usp({
-    title: 'Reuse and follow',
-    content: '<p>Always start by using/following what exists and then speaking to the Design System Team if there are additional requirements.</p>',
-    classes: 'c-usp c-usp--bordered'
-  }) }}
-</div>
-
-{% set content %}
-  ## Contributing to the design system
-
-  In order to maintain a healthy system it's important we have a clear process for helping contributors decide when to create or modify a component, as well as tracking its progress and status via a single pattern backlog.
-
-  The following decision tree outlines this process.
-{% endset %}
-
-  {{ markdown({
-    content: content
-  }) }}
-
-  <figure>
-    <a href="/static/img/flow-2.png" target="_blank">
-      <img src="/static/img/flow-2.png" alt="Process flow diagram" />
-    </a>
-  </figure>
-</div>

package/src/components/installation.md

@@ -1,61 +0,0 @@
----
-title: Installing the design system
-layout: content-page
-sidebar: components
----
-
-## Consuming the design system via `link`
-
-The simplest way to consume the design system is with a `<link>` & `<script>` tag. Unpkg is a CDN of the built CSS & JavaScript, and can be included like so:
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/mp-design-system@latest/dist/build/scss/main.css" />
-
-<script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>
-```
-
-The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system. That version may not have been tested thoroughly - on the main website we stay a few versions behind the latest, and we specify a precise version of each asset by replacing "@latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.9.5/dist/build/scss/main.css`.
-
-N.B. the `<script>` tag needs to be placed near the closing `</body>` tag of your page; it won't run correctly if placed in the head.
-
-## Consuming the design system via NPM
-
-If you wish to integrate the design system into your own build system, or customise the files being served, you can install the `mp-design-system` [NPM package](https://www.npmjs.com/package/mp-design-system).
-
-```bash
-npm install mp-design-system
-```
-
-Within your `package.json` file, you can add an alias, allowing you to reference the system with the characters `mp`:
-
-```json
-{
-  ...
-  "alias": {
-    "mp": "./node_modules/mp-design-system/src/assets/scss"
-  }
-}
-```
-
-Now, within your main SCSS file, you can pull in the full system:
-
-```scss
-@import '~mp';
-```
-
-Pull in specific sections of the system:
-
-```scss
-@import '~mp/tools';
-@import '~mp/foundations';
-@import '~mp/elements';
-@import '~mp/objects';
-@import '~mp/components';
-@import '~mp/utilities';
-```
-
-Or even pull in specific components:
-
-```scss
-@import '~mp/components/button';
-```

package/src/components/publishing-the-system.md

@@ -1,25 +0,0 @@
----
-title: Publishing the system
-layout: content-page
-sidebar: components
----
-
-## This website
-
-To push changes to the live version of this website, simply `git push` the `master` branch. [Netlify](http://netlify.com/) will automatically rebuild the website with the latest code & design and redeploy it.
-
-Details on editing and updating this website are available in [Confluence](https://malvernpanalytical.atlassian.net/l/cp/mwMV1d1H) (Malvern Panalytical employees only).
-
-## NPM
-
-When you're ready to cut a new release to NPM, here are the steps you'll need to take:
-
-1. Ensure you're on the latest version of the `master` branch with no unstaged changes
-2. Go to `package.json` and bump the version number
-    1. For major releases, push the first number (and reset the following numbers)
-    2. For new features, push the next number
-    3. For fixes, push the final number
-3. Commit this change and push it up
-4. Run `npm publish`
-
-This will push the latest version up to [NPM](https://www.npmjs.com/package/mp-design-system).