mp-design-system 0.9.16 → 0.9.24

package/src/components/iconography.njk

@@ -44,7 +44,7 @@ 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 https://jakearchibald.github.io/svgomg/
+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

package/src/components/installation.md

@@ -14,7 +14,9 @@ The simplest way to consume the design system is with a `<link>` & `<script>` ta
 <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. You can access previous versions by replacing "latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.8.2/dist/build/scss/main.css`
+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
 

package/src/components/utilities.md

@@ -28,7 +28,7 @@ More typography utility classes are documented on the [typography page](/compone
 
 ---
 
-## Display
+## Visibility & display
 
 ```html
 <div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>
@@ -67,11 +67,11 @@ More typography utility classes are documented on the [typography page](/compone
 ```
 
 ```html
-<p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
+<div class="u-sticky">This will "stick" to the top of the screen while scrolling</div>
 ```
 
 ```html
-<div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
+<div class="u-sticky--gutter">To create a small gap above a sticky element</div>
 ```
 
 ```html
@@ -91,14 +91,16 @@ The two child items will be aligned in a horizontal row
 ## Padding and margins
 
 #### Syntax: 
-`u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
+`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-y-xl">Extra large margin on top and bottom</div>
+<div class="u-margin-x-xs">Extra small margin on left and right</div>
 ```
 
 ```html
@@ -106,8 +108,8 @@ The two child items will be aligned in a horizontal row
 ```
 
 ```html
-<div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
-Grows from small padding on small screens, to xl padding on large screens
+<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
@@ -131,18 +133,42 @@ More padding and margin utility classes are documented on the [space page](/comp
 
 ## 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)`
+`u-cutoff`-`(optional direction; can be bottom-left, top-left, or top-right)`-`(size, optional)`
 
-N.B. The diagonal size is based on `var(--gutter)`.
+N.B. The default diagonal size is based on `var(--gutter)`.
 
 ```html
 <div class="u-cutoff">Cutoff effect on the bottom-right corner</div>
-```
 
-```html
 <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/index.njk

@@ -100,11 +100,14 @@ A combination of brand guidelines and a library of HTML/CSS/JS components.
 As Malvern Panalytical has grown, our online experiences have become disparate and inconsistent. The goal of this design system is to address this by creating a single source of truth. It will rely on us all using and contributing to it, with the ongoing support of the Design System Team.
 
 ## Latest updates
-##### V.{{ config.dsVersion }} - 04 Aug 2022
+##### V.{{ config.dsVersion }} - Jan 2022
 
-- Update MP Charcoal colours for better contrast and legibility
-- Add cutoff utility
-- Tweak campaign design
+- New Features Table component
+- New Gallery component
+- New illustration documentation
+- Fix IE11 navigation bug
+- Misc. fixes
+- Misc. documentation improvements
 {% endset %}
 
 {{ markdown({

package/src/prototype/product.njk

@@ -13,6 +13,7 @@ tagTitle: Product
 {% from "components/scroll-spy/macro.njk" import scrollSpy %}
 {% from "components/embed/macro.njk" import youtube %}
 {% from "components/card/macro.njk" import card %}
+{% from "components/gallery/macro.njk" import gallery %}
 
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
 
@@ -26,6 +27,34 @@ tagTitle: Product
     </nav>
 
     <div class="o-grid o-grid--of-two-late">
+
+      {{ gallery({
+        images: [
+          {
+            src: '/static/img/slide-4.webp',
+            title: 'Zetasizer slide 1'
+          },
+          {
+            src: '/static/img/slide-5.webp',
+            title: 'Zetasizer slide 2'
+          },
+          {
+            src: '/static/img/slide-6.webp',
+            title: 'Zetasizer slide 3'
+          },
+          {
+            src: '/static/img/slide-7.webp',
+            title: 'Zetasizer slide 4'
+          }
+        ],
+        videos: [
+          {
+            title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
+            id: 'Q4H7EdHFghs'
+          }
+        ]
+      })}}
+
       <div>
         <h1 class="c-h c-h--page-title">Mastersizer 3000</h1>
         <h2 class="c-h c-h--page-subtitle u-margin-top-s-m">Delivering the data you need for outcomes you can trust</h2>
@@ -39,25 +68,6 @@ tagTitle: Product
           <br />
         </div>
       </div>
-
-      <div class="u-flow c-gallery">
-        {{ youtube({
-          title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
-          id: 'Q4H7EdHFghs'
-        }) }}
-
-        <div class="c-gallery__thumbnails">
-          <figure class="c-gallery__slide active">
-            <img src="/static/img/slide-1.jpg" alt="Alt" />
-          </figure>
-          <figure class="c-gallery__slide">
-            <img src="/static/img/slide-2.jpg" alt="Alt" />
-          </figure>
-          <figure class="c-gallery__slide">
-            <img src="/static/img/slide-3.jpg" alt="Alt" />
-          </figure>
-        </div>
-      </div>
     </div>
 
     <div class="o-grid o-grid--of-three u-pad-top-m-l">

package/dist/build/dots-pattern.3c9c2a26.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none"><g stroke="#004157" opacity=".075"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>

package/src/_includes/components/campaign/campaign.md

@@ -1,2 +0,0 @@
-## Color options
-In the CMS for the main website (Tridion), users can select from four color options for a campaign component. This is implemented with utility classes in HTML, and is therefore not documented here.