mp-design-system 0.9.17 → 0.9.25

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/content/index.njk

@@ -1,5 +1,6 @@
 ---
 title: Tone of voice
+description: Guidelines to help us make our writing clearer, simpler and more inspiring.
 layout: system-page
 sidebar: content
 status: 'Ready'

package/src/index.njk

@@ -1,6 +1,7 @@
 ---
 title: "Welcome"
 subtitle: Our design system helps us create consistent experiences across our websites and beyond. It also makes the design and development process faster, more efficient and scalable.
+description: Franklin is Malvern Panalytical's design system for public-facing websites and digital products.
 layout: system-home-page
 renderData:
   title: "Welcome to the Franklin design system"
@@ -100,11 +101,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.