mp-design-system 0.9.16 → 0.9.24

package/src/_includes/components/table/table.config.js

@@ -1,13 +1,14 @@
 module.exports = {
   title: 'Table',
+  docs: true,
   component: {
     name: 'table'
   },
   context: {
     headers: ['Name', 'Description'],
     rows: [
-      ['Name 1', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.'],
-      ['Name 2', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
+      ['Aeris', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.'],
+      ['OMNISEC', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
     ]
   },
   variants: [
@@ -34,8 +35,8 @@ module.exports = {
       context: {
         classes: 'c-table--center',
         rows: [
-          ['Name 1', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis.'],
-          ['Name 2', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
+          ['Aeris', 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br />Vestibulum id ligula porta felis euismod semper.<br />Sed posuere consectetur est at lobortis.'],
+          ['OMNISEC', 'Nullam quis risus eget urna mollis ornare vel eu leo.']
         ]
       }
     },
@@ -51,8 +52,8 @@ module.exports = {
         classes: 'c-table--responsive',
         headers: ['Name', 'Type', 'Description'],
         rows: [
-          ['Name 1', 'Value 1.1', 'Value 1.2'],
-          ['Name 2', 'Value 2.1', 'Value 2.2'],
+          ['Aeris', 'Value 1.1', 'Value 1.2'],
+          ['OMNISEC', 'Value 2.1', 'Value 2.2'],
         ]
       }
     },

package/src/_includes/components/table/table.md

@@ -0,0 +1,16 @@
+## Responsive variant
+
+For the `.c-table--responsive` variant to display correctly, give each `<td>` element a `data-responsive-title` attribute, corresponding to the column headers. E.g. for a two-column table where the column headers are "Name" and "Description", the `<td>`s should be marked up as follows:
+
+```html
+<tbody>
+    <tr>
+        <td data-responsive-title="Name">Aeris</td>
+        <td data-responsive-title="Description">Vivamus sagittis lacus vel</td>
+    </tr>
+    <tr>
+        <td data-responsive-title="Name">OMNISEC</td>
+        <td data-responsive-title="Description">Nullam quis risus eget urna</td>
+    </tr>
+</tbody>
+```

package/src/_includes/components/table/table.scss

@@ -19,6 +19,15 @@
     border-top: 2px solid color('white');
     vertical-align: top;
     color: inherit;
+
+  }
+
+  // Allow setting 'u-bg' background colours on table rows
+  tr[class*='u-bg'] {
+    td,
+    th {
+      background-color: inherit;
+    }
   }
 
   th {

package/src/_includes/components/tabs/tabs.config.js

@@ -8,8 +8,11 @@ module.exports = {
   context: {
     type: 'anchor',
     tabs: [
-      { id: 'tab-1', label: 'Tab 1', content: '<h2 class="c-h c-h--step-3">Tab 1</h2>', active: true },
-      { id: 'tab-2', label: 'Tab 2', content: '<h2 class="c-h c-h--step-3">Tab 2</h2>' }
+      { id: 'tab-1', label: 'Primary materials', content: '<h2 class="c-h c-h--step-3">Primary materials</h2>', active: true },
+      { id: 'tab-2', label: 'Pharmaceuticals', content: '<h2 class="c-h c-h--step-3">Pharmaceuticals</h2>' },
+      { id: 'tab-3', label: 'Advanced materials', content: '<h2 class="c-h c-h--step-3">Advanced materials</h2>' },
+      { id: 'tab-4', label: 'Academia', content: '<h2 class="c-h c-h--step-3">Academia</h2>' },
+      { id: 'tab-5', label: 'Connected world', content: '<h2 class="c-h c-h--step-3">Connected world</h2>' },
     ]
   },
   props: [
@@ -31,8 +34,24 @@ module.exports = {
     {
       title: 'CSS modifiers',
       table: [
-        ['c-tabs--flex', '', 'Instead of \'block\', display the active tabs as \'flex\'']
+        ['c-tabs--flex', '', 'Instead of \'block\', display the active tabs as \'flex\''],
+        ['c-tabs--persist', '', 'Add a URL fragment (aka hashtag) to the browser URL']
       ]
+    },
+    {
+      title: 'Utilities',
+      table: [
+        ['u-scroll-shadows--h','','When the tab row is too wide for the screen, scroll indicators are displayed']
+      ]
+    }
+  ],
+  variants: [
+    {
+      title: 'Scroll shadows',
+      context: {
+        shadows: true
+      },
+      preview: 'cards-three'
     }
   ]
 }

package/src/_includes/components/tabs/tabs.njk

@@ -1,5 +1,5 @@
 <div class="mp c-tabs {{ 'c-tabs--' + params.type if params.type }}">
-  <nav class="c-tabs__controls">
+  <nav class="c-tabs__controls {{ "u-scroll-shadows--h" if params.shadows }}">
     <ul class="c-tabs__controls-list">
       {% for tab in params.tabs %}
         <li><a class="c-tabs__control {{ 'c-tabs__control--active' if tab.active }}" href="#{{ tab.id }}">{{ tab.label }}</a></li>

package/src/_includes/components/tabs/tabs.scss

@@ -62,6 +62,10 @@
     margin-bottom: -4px;
     position: relative;
     z-index: 1;
+
+    @media screen and (max-width:55em) {
+      white-space: nowrap;
+    }
     
     &.c-twi {
       display: flex;

package/src/_includes/layout.njk

@@ -35,7 +35,8 @@
         };
       };
       var resizeSidebar = debounce(function() {
-        var headerHeight = document.querySelector('.c-library__header').offsetHeight + 'px';
+        var header = document.querySelector('.c-library__header');
+        var headerHeight = header && header.offsetHeight + 'px';
         document.documentElement.style.setProperty('--headerHeight', headerHeight)
       }, 250); 
     </script>

package/src/_includes/library-navigation/brand-nav.njk

@@ -12,6 +12,7 @@
     {{ libraryList('Typography', '/brand/typography/', page.url) }}
     {{ libraryList('Photography', '/brand/images/', page.url) }}
     {{ libraryList('Illustration', '/brand/illustration/', page.url) }}
+    {{ libraryList('Patterns', '/brand/patterns/', page.url) }}
   </ul>
   {# <h3>Brand identity</h3>
   <ul>

package/src/_includes/library-navigation/components-nav.njk

@@ -31,6 +31,7 @@
     {{ libraryList('Flow', '/components/flow/', page.url) }}
     {{ libraryList('Iconography', '/components/iconography/', page.url) }}
     {{ libraryList('Approach to CSS', '/components/css/', page.url) }}
+    {{ libraryList('Utilities', '/components/utilities/', page.url) }}
   </ul>
 </div>
 

package/src/assets/js/imports/accordion.js

@@ -9,9 +9,7 @@ function setupAccordions(title) {
 
 function titleClick() {
     return (event) => {
-        console.log(event)
         var item = event.currentTarget.parentElement;
-        console.log(item)
         item.classList.toggle('c-accordion__item--open');
     }
 }

package/src/assets/scss/components/index.scss

@@ -1,35 +1,36 @@
+@import '~comp/accordion/accordion.scss';
+@import '~comp/alert/alert.scss';
+@import '~comp/breadcrumb/breadcrumb.scss';
 @import '~comp/button/button.scss';
-@import '~comp/icon/icon.scss';
-@import '~comp/twi/twi.scss';
-@import '~comp/table/table.scss';
-@import '~comp/post-meta/post-meta.scss';
-@import '~comp/header/header.scss';
-@import '~comp/footer/footer.scss';
-@import '~comp/input/input.scss';
-@import '~comp/product-signpost/product-signpost.scss';
-@import '~comp/usp/usp.scss';
 @import '~comp/campaign/campaign.scss';
-@import '~comp/signpost/signpost.scss';
-@import '~comp/industry-card/industry-card.scss';
-@import '~comp/alert/alert.scss';
+@import '~comp/card/card.scss';
+@import '~comp/comparison-table/comparison-table.scss';
+@import '~comp/embed/embed.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
-@import '~comp/internal-nav/internal-nav.scss';
-@import '~comp/input/radio.scss';
+@import '~comp/features-table/features-table.scss';
 @import '~comp/filter-search/filter-search.scss';
-@import '~comp/embed/embed.scss';
-@import '~comp/tabs/tabs.scss';
+@import '~comp/footer/footer.scss';
+@import '~comp/gallery/gallery.scss';
+@import '~comp/header/header.scss';
+@import '~comp/hero/hero.scss';
+@import '~comp/icon/icon.scss';
+@import '~comp/industry-card/industry-card.scss';
+@import '~comp/input/input.scss';
+@import '~comp/input/radio.scss';
+@import '~comp/internal-nav/internal-nav.scss';
+@import '~comp/meta-box/meta-box.scss';
 @import '~comp/option-list/option-list.scss';
-@import '~comp/card/card.scss';
+@import '~comp/post-meta/post-meta.scss';
+@import '~comp/product-signpost/product-signpost.scss';
+@import '~comp/quote/quote.scss';
 @import '~comp/scroll-spy/scroll-spy.scss';
 @import '~comp/series/series.scss';
-@import '~comp/comparison-table/comparison-table.scss';
-@import '~comp/features-table/features-table.scss';
-@import '~comp/meta-box/meta-box.scss';
+@import '~comp/signpost/signpost.scss';
 @import '~comp/slat/slat.scss';
-@import '~comp/hero/hero.scss';
-@import '~comp/quote/quote.scss';
-@import '~comp/accordion/accordion.scss';
+@import '~comp/table/table.scss';
+@import '~comp/tabs/tabs.scss';
+@import '~comp/twi/twi.scss';
+@import '~comp/usp/usp.scss';
 
 @import './headings.scss';
-@import './gallery.scss';
 @import './lightbox.scss';

package/src/assets/scss/library.scss

@@ -75,7 +75,7 @@
 
   @media only screen and (min-width: 600px) {
     &--components &__body > * {
-      overflow-y: scroll;
+      overflow-y: auto;
       height: calc( 100vh - var(--headerHeight) - 1px );
     }
   }
@@ -253,7 +253,10 @@
       width: 100%;
       left: 0;
       top: 0;
-      transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+      transition: 
+        padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
+        background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+      resize: both;
 
       @media only screen and (min-width: 600px) {
         position: absolute;
@@ -579,7 +582,7 @@
       grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
       gap:var(--gutter);
       
-      & :nth-child(odd):nth-last-child(3) {
+      & :nth-child(odd):nth-last-child(5) {
           grid-column: 1/-1;
       }
   }

package/src/assets/scss/objects/syntax-highlighting.scss

@@ -19,6 +19,10 @@ pre[class*="language-"] {
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
+
+	.c-alert & {
+		background: transparent;
+	}
 }
 
 code[class*="language-"]::-moz-selection,

package/src/assets/scss/tools/cutoff.scss

@@ -1,42 +1,28 @@
 // Cutoff corner effect
+@mixin cutoff($corner:"bottom-right", $size:var(--gutter)) {
+    
+    $offset : calc(100% - $size);
 
-$g : var(--gutter);
-$og : calc(100% - var(--gutter));
+    // Co-ordinates for the polygon
+    $co1: "0 0";
+    $co2: "100% 0";
+    $co3: "100% 100%";
+    $co4: "0 100%";
 
-@mixin cutoff($corner:"bottom-right") {
+    // Override the basic co-ordinates
     @if $corner == "top-left" {
-        clip-path: polygon( 
-            $g 0,
-            100% 0,
-            100% 100%,
-            0 100%,
-            0 $g 
-        );
+        $co1: "0 #{$size}, #{$size} 0";
     } @else if $corner == "top-right" {
-        clip-path: polygon( 
-            0 0,
-            $og 0,
-            100% $g,
-            100% 100%,
-            0 100% 
-        );
+        $co2: "#{$offset} 0, 100% #{$size}";
     } @else if $corner == "bottom-left" {
-        clip-path: polygon( 
-            0 0,
-            100% 0,
-            100% 100%,
-            $g 100%,
-            0 $og 
-        );
+        $co4: "#{$size} 100%, 0 #{$offset}";
     } @else {
-        clip-path: polygon( 
-            0 0,
-            100% 0,
-            100% $og,
-            $og 100%,
-            0 100% 
-        );
+        $co3: "100% #{$offset}, #{$offset} 100%";
     }
+
+    clip-path: polygon(
+        #{$co1}, #{$co2}, #{$co3}, #{$co4}
+    );
 }
 
 .u-cutoff {
@@ -53,4 +39,8 @@ $og : calc(100% - var(--gutter));
 
 .u-cutoff--bottom-left {
     @include cutoff("bottom-left")
+}
+
+.u-cutoff--xl {
+    @include cutoff($size: var(--space-xl))
 }

package/src/assets/scss/utilities/flow.scss

@@ -63,6 +63,7 @@
       @include padding-top('m-xl');
       @include margin-top('m-xl');
       border-top: 1px solid color('petrol', 'step-2');
+      clear: both;
     }
   }
 }

package/src/assets/svg/arc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity="0.075"><g clip-path="url(#a)"><path stroke="#3D7B87" d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path stroke="#3D7B87" d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path stroke="#3D7B87" d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path stroke="#3D7B87" d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path stroke="#3D7B87" d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path stroke="#3D7B87" d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path stroke="#3D7B87" d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path stroke="#3D7B87" d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path stroke="#3D7B87" d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path stroke="#3D7B87" d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path stroke="#3D7B87" d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/><circle cx="545.73" cy="65.7" r="6.7" fill="#3D7B87" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" fill="#3D7B87" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" fill="#3D7B87" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" fill="#3D7B87" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" fill="#3D7B87" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" fill="#3D7B87" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" fill="#3D7B87" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" fill="#3D7B87" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" fill="#3D7B87" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" fill="#3D7B87" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" fill="#3D7B87" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" fill="#3D7B87" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" fill="#3D7B87" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" fill="#3D7B87" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" fill="#3D7B87" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" fill="#3D7B87" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" fill="#3D7B87" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" fill="#3D7B87" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5.02" cy="6.18" fill="#3D7B87" rx="5.02" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" fill="#3D7B87" rx="5.02" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" fill="#3D7B87" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" fill="#3D7B87" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" fill="#3D7B87" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" fill="#3D7B87" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" fill="#3D7B87" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" fill="#3D7B87" rx="5.02" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" fill="#3D7B87" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" fill="#3D7B87" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" fill="#3D7B87" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" fill="#3D7B87" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" fill="#3D7B87" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" fill="#3D7B87" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" fill="#3D7B87" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" fill="#3D7B87" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" fill="#3D7B87" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" fill="#3D7B87" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" fill="#3D7B87" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs></svg>

package/src/assets/svg/crystal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity="0.075" ><g clip-path="url(#a)"><path stroke="#3D7B87" d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path stroke="#3D7B87" d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path stroke="#3D7B87" d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path stroke="#3D7B87" d="m521 406 20 77-62 61-82-14"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 205 131)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 263 359)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 268 68)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 327 295)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 306 221)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 364 449)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 324 585)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 181 631)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 60 179)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 121 405)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 125 115)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 183 343)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 39 390)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 161 269)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 19 315)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 223 494)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 80 541)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 347 84)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 407 311)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 410 22)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 470 249)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 449 175)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 508 401)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 465 539)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 493 36)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 225 205)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 284 433)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 241 571)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 98 618)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 81 253)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 141 481)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 369 158)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 428 385)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 385 523)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 511 113)"/><path stroke="#3D7B87" d="m41 177 23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs></svg>

package/src/assets/svg/dots-pattern.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><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>
+<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#004157" opacity=".1"><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/brand/illustration.md

@@ -19,7 +19,7 @@ Our illustration style is still a work-in-progress; currently it follows a few s
 - White background
 
 ## Resources
-We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make the available on this site in future.
+We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make them available on this site in future.
 
 ## Examples
 
@@ -35,10 +35,16 @@ We have a library of pre-made characters which can be adapted for new designs, a
 
 ![alt text][opt-in]
 
+![alt text][404]
+
+![alt text][500]
+
 </div>
 
 [login]: https://www.malvernpanalytical.com/resource/svg/login3.svg
 [thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
 [support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
 [opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg
-[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg
+[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg
+[404]: https://p3.aprimocdn.net/malvernpanalytical/d88d7c64-76b2-4fa4-8ce0-af7300ce1dd2/error-404_Original%20file.svg
+[500]: https://p3.aprimocdn.net/malvernpanalytical/7d24fb59-5c5f-463a-9bb2-af7300d05c5a/error-500_Original%20file.svg

package/src/brand/patterns.njk

@@ -0,0 +1,43 @@
+---
+title: Patterns
+layout: content-page
+sidebar: brand
+tags: brand
+version: 1.0.0
+status: 'Ready'
+---
+{% from "components/header/macro.njk" import header %}
+
+<p>We can make our digital designs a bit more visually appealing by adding background patterns and decorative gradients.</p>
+
+<div class="o-grid xo-grid--of-two">
+    <div class="c-slat c-slat--concentric vh50 u-bg-blue-step-3">
+        <div class="o-prose u-flow--prose u-pad-x-s">
+            <p>This section has the <strong>concentric rings</strong> background pattern.</p>
+            <p>See the <a href="/components/slat-concentric">Slat</a> component for more details.</p>
+        </div>
+    </div>
+    <div class="c-slat c-slat--dots vh50 u-bg-green-step-3">
+        <div class="o-prose u-pad-x-s">
+            <p>This section has the <strong>dots</strong> background pattern.</p>
+        </div>
+    </div>
+    <div class="c-slat c-slat--crystal vh50 u-bg-utility-blue-step-3">
+        <div class="o-prose u-pad-x-s">
+            <p>This section has the <strong>crystal</strong> background pattern.</p>
+        </div>
+    </div>
+    <div class="c-slat c-slat--arc vh50 u-bg-petrol-step-3">
+        <div class="o-prose u-pad-x-s">
+            <p>This section has the <strong>arc</strong> background pattern.</p>
+        </div>
+    </div>
+</div>
+
+<style>
+    .vh50 {
+        height: 20em;
+        height: clamp(10em, 50vh, 30em);
+    }
+</style>
+    

package/src/brand/typography.md

@@ -7,7 +7,7 @@ version: 1.0.2
 status: 'Ready'
 ---
 
-## Font
+## Inter
 
 Our brand font is [Inter](https://rsms.me/inter). This typeface has been selected for its;
 - Excellent clarity and legibility
@@ -19,10 +19,15 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
 
 {% button 'Download Inter font' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
 
-<br>
+Inter is also available from [Google Fonts](https://fonts.google.com/specimen/Inter).
 
-#### Google Fonts
-[Inter is also available from Google Fonts](https://fonts.google.com/specimen/Inter).
+## Calibri
+
+We use Calibri for office documents (e.g. Powerpoint, Word). Calibri is available on all Windows computers by default.
+
+## Noto
+
+For languages which don't use the Latin alphabet (such as Arabic or Chinese languages), we use the [Noto](https://fonts.google.com/noto) font family, which aims to cover the majority of the world's written scripts. N.B. Inter and Calibri both include Greek and Cyrillic characters.
 
 ---
 
@@ -31,7 +36,9 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789  
 abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
 
-- Inter Light for printed materials, Inter Regular for digital (e.g. Powerpoint)
+- Inter Light for printed materials
+- Inter Regular for web/software
+- Arial for office (e.g. Powerpoint)
 - Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
 - <span class="c-library__semi">Inter Semi Bold</span> for emphasis
 - Recommended font sizes for body text:

package/src/components/creating-a-component.md

@@ -73,7 +73,7 @@ This `c` component takes two parameters:
 
 This `SCSS` file has access to all the mixins, functions and foundational elements documented in {{ config.name }}. To add it to the main bundle, head to `src/assets/scss/components/index.scss` and add a new line pointing to your file:
 
-```
+```scss
 @import '~comp/filter-bar/filter-bar.scss';
 ```
 

package/src/components/flow.njk

@@ -10,14 +10,15 @@ sidebar: components
 <div class="u-flow--m">
   {% set content %}
   Add the class `u-flow` to any container, to space its contents.
-  ```
+  ```html
   <div class="u-flow">
     <h1>Flow</h1>
-    <img />
-    <div></div>
-    <a class="c-button"></a>
+    <p>Example</p>
+    <img src="example.jpg" />
+    <div>Example</div>
   </div>
   ```
+
   Spacing content effectively is imperative to good component composition. Taking learnings from broader CSS spacing paradigms, rather than dictate spacing at a child-level, we set the rules at a parent-level, overriding at a child-level where appropriate.
 
   With this approach, we can add any number of new children to a parent without breaking this existing variants. This mindset is crucial to extending the design system over time.
@@ -25,7 +26,7 @@ sidebar: components
   To achieve this, we use the **flow** concept. The [lobotomised owl selector](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/) `* + *` does the heavy lifting here. Rather than every element 'pushing down', any children that follow another child 'push up'.
   
   {% set dont %}
-  ```
+  ```scss
   .parent > * {
     margin-bottom: 1rem;
 
@@ -41,7 +42,7 @@ sidebar: components
   }) }}
 
   {% set do %}
-  ```
+  ```scss
   .parent > * + * {
     margin-top: 1rem;
   }
@@ -61,7 +62,7 @@ sidebar: components
   `.u-flow` will produce a 'small' space, and `.u-flow--l` a 'large' one.
 
   {% set dont %}
-  ```
+  ```html
   <div class="c-component">
     <h2 class="c-component__title u-margin-top-m">...</h2>
   </div>
@@ -73,7 +74,7 @@ sidebar: components
   }) }}
 
   {% set do %}
-  ```
+  ```html
   <div class="c-component u-flow--m">
     <h2 class="c-component__title">...</h2>
   </div>
@@ -100,16 +101,28 @@ sidebar: components
     </thead>
     <tbody>
       <tr>
-        <td><pre><code>.c-component {
-  @include flow('l');
-}</code></pre></td>
-        <td><pre><code>.c-component > * + * {
-  margin-top: 36px;
-  margin-top: var(--space-l);
-}</code></pre></td>
-      </tr>
-    </tbody>
-  </table>
+        <td>
+
+  ```scss
+  .c-component {
+    @include flow('l');
+  }
+  ```
+
+</td>
+<td>
+
+  ```scss
+  .c-component > * + * {
+    margin-top: 36px;
+    margin-top: var(--space-l);
+  }
+  ```
+
+</td>
+</tr>
+</tbody>
+</table>
   {% endset %}
   {{ markdown({
     content: content