mp-design-system 0.8.0 → 0.8.2

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "mp-design-system",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "",
-  "main": "app.js",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",
     "bundle:eleventy": "eleventy --serve --quiet",
-    "bundle:parcel": "parcel src/assets/js/*.js src/assets/scss/*.scss -d dist/build --public-url ../",
+    "bundle:parcel": "parcel src/assets/js/*.js src/assets/scss/*.scss --dist-dir ./dist/build",
     "build": "run-s prod:*",
     "prod:eleventy": "eleventy",
-    "prod:parcel": "rimraf dist/build && parcel build src/assets/js/*.js src/assets/scss/*.scss -d dist/build --public-url ../",
+    "prod:parcel": "rimraf dist/build && parcel build src/assets/js/*.js src/assets/scss/*.scss --dist-dir ./dist/build",
     "prepublishOnly": "rimraf dist && npm run prod:parcel"
   },
   "files": [
@@ -22,12 +21,13 @@
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
+    "@parcel/transformer-sass": "^2.4.0",
     "dotenv": "^8.6.0",
     "html-prettify": "^1.0.3",
     "markdown-it": "^12.1.0",
     "markdown-it-prism": "^2.1.8",
     "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.12.5",
+    "parcel": "^2.4.0",
     "require-glob": "^3.2.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.2",
@@ -36,6 +36,5 @@
   "alias": {
     "mp": "./node_modules/mp-design-system/src/assets/scss",
     "comp": "./src/_includes/components"
-  },
-  "dependencies": {}
+  }
 }

package/src/_includes/includes/system-footer.njk

@@ -5,11 +5,9 @@
 {% markdown %}
 ### Get in touch
 
-This system is maintained by the Design System Team.
+This system is maintained by the Design System Team. Any feedback, questions or ideas are welcome, so please share your thoughts.
 
-Any feedback, questions or ideas are welcome, so please share your thoughts.
-
-- For all enquiries please contact [will.wallace@malvernpanalytical.com](mailto:will.wallace@malvernpanalytical.com).
+- For all enquiries please contact [will.wallace@malvernpanalytical.com](mailto:will.wallace@malvernpanalytical.com) via email or Teams.
 {% endmarkdown %}
 
   </nav>

package/src/assets/js/imports/gallery.js

@@ -33,6 +33,12 @@ function Gallery() {
       if(slide.classList.contains('c-gallery__video')) {
         slide.remove();
       }
+      if(!slide.classList.contains('c-gallery__video')) {
+        var slideImg = slide.querySelector('img');
+        if(slideImg.srcset != '') {
+          slideImg.removeAttribute('srcset');
+        }
+      }
       slide.classList.add('c-lightbox__slide');
       slide.classList.remove('c-gallery__slide');
     });

package/src/assets/scss/components/lightbox.scss

@@ -58,5 +58,6 @@
 
   &__video {
     width: 100%;
+    max-height: 80vh;
   }
 }

package/src/assets/scss/objects/grid.scss

@@ -185,13 +185,15 @@ $grid-gutter-width: 36;
       flex-wrap: nowrap;
       overflow-x: scroll;
       scroll-snap-type: x mandatory;
+      scroll-padding: var(--gutter);
       -webkit-overflow-scrolling: touch;
 
       & > * {
         flex: 0 0 auto;
         max-width: 23em;
         width: calc(85vw - var(--gutter)*2.333); // !important
-        scroll-snap-align: center;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
       }
 
       & > * + * {

package/src/brand/downloads.njk

@@ -2,22 +2,22 @@
 title: Downloads
 layout: content-page
 sidebar: brand
-status: 'Development'
-version: 0.0.1
+status: 'Ready'
 tags: brand
 ---
 {% from "components/prose/macro.njk" import markdown %}
 {% from "components/card/macro.njk" import card %}
 {% from "components/twi/macro.njk" import twi %}
 
-<div class="u-flow--l">
+<div class="u-flow--l u-margin-top-xl">
 
 {{ twi({
-    link: "https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs",
-    label: "Tone of voice guidelines",
+    link: "/static/zip/MP_logo.zip",
+    label: "Malvern Panalytical logo",
     classes: "u-link",
     icon: "file"
 }) }}
+
 <br>
 
 {{ twi({
@@ -26,6 +26,16 @@ label: 'Brand guidelines quick-start guide',
 classes: 'u-link',
 icon: 'file'
 }) }}
+
+<br>
+
+{{ twi({
+    link: "https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs",
+    label: "Tone of voice guidelines",
+    classes: "u-link",
+    icon: "file"
+}) }}
+
 <br>
 
 {{ twi({

package/src/brand/visual/logo.md

@@ -7,6 +7,8 @@ version: 1.0.0
 status: 'Ready'
 ---
 
+<a href="/static/zip/MP_logo.zip" class="mp c-twi u-link c-twi--left"><span>Download: Malvern Panalytical logo</span><svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--file"><use xlink:href="/static/svg/sprite.svg#file"></use></svg></a>
+
 The Malvern Panalytical logo is available in two formats: 
 
 - Standard, with the text alongside the 'X' brandmark;

package/src/components/iconography.njk

@@ -18,23 +18,23 @@ Icons add visual noise to designs and should be used sparingly.
 {% endset %}
 
 {% set icons = [
-  'file',
-  'arrow-right',
   'arrow-left',
+  'arrow-right',
   'chevron-down',
-  'search',
+  'cross',
+  'dash',
   'facebook',
-  'twitter',
-  'rss',
+  'file',
+  'info',
   'instagram',
   'linkedin',
-  'youtube',
-  'play',
-  'info',
   'log-out',
-  'cross',
+  'play',
+  'rss',
+  'search',
   'tick',
-  'dash'
+  'twitter',
+  'youtube'
 ] %} 
 
 {% set content2 %}
@@ -63,7 +63,7 @@ Adding new icons to the SVG sprite is a manual process.
       <tr>
         <th>Icon</th>
         <th>ID</th>
-        <th>Code</th>
+        <th>Code (Nunjucks)</th>
       </tr>
     </thead>
     <tbody>
@@ -73,7 +73,7 @@ Adding new icons to the SVG sprite is a manual process.
             {{ icon({ id: id }) }}
           </td>
           <td><code>{{ id }}</code></td>
-          <td><code>{{ "{{ icon({ id: id }) }}" }}</code></td>
+          <td><code>{{ "{{ icon({ id:" }} {{ id }} }) }}</code></td>
         </tr>
       {% endfor %}
     </table>

package/src/content/index.njk

@@ -34,7 +34,7 @@ Which is why we’ve created these guidelines. They contain simple, practical ad
   }) }}
 
   {{ twi({
-    link: '/static/pdf/FINAL Tone of voice guidelines April 2021.pdf',
+    link: 'https://malvern.sharepoint.com/:b:/r/sites/Intranet/Shared%20Documents/FINAL%20Tone%20of%20voice%20guidelines%20April%202021.pdf?csf=1&web=1&e=vW1Qzs',
     label: 'Download this guide as a PDF',
     classes: 'u-link',
     icon: 'file',

package/src/index.njk

@@ -14,7 +14,7 @@ renderData:
   {{ card({
     theme: {
       layout: 'single',
-      size: 'medium',
+      size: 'large',
       border: true
     },
     header: {
@@ -34,7 +34,7 @@ renderData:
   {{ card({
     theme: {
       layout: 'single',
-      size: 'medium',
+      size: 'large',
       border: true
     },
     header: {
@@ -54,7 +54,7 @@ renderData:
   {{ card({
     theme: {
       layout: 'single',
-      size: 'medium',
+      size: 'large',
       border: true
     },
     header: {
@@ -73,9 +73,17 @@ renderData:
 </div>
 
 {% set content %}
+## Latest
+##### V.{{ config.dsVersion }} - Feb 17 2020
+
+- Create [accordion component](/components/accordion)
+- Create background-video variant for hero component
+- Add downloadable copy of the [Malvern Panalytical logo](/brand/downloads)
+- Misc. library improvements
+
 ## A living resource for everyone
 
-As we've grown, our 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.
+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.
 {% endset %}
 
 {{ markdown({

package/dist/build/concentric.797defa2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="1012" opacity="0.075" fill="none" viewBox="0 0 641 1012"><circle cx="641" cy="506" r="80" stroke="#004157"/><circle cx="641" cy="506" r="20" stroke="#004157"/><circle cx="641" cy="506" r="160" stroke="#004157"/><circle cx="641" cy="506" r="240" stroke="#004157"/><circle cx="641" cy="506" r="320" stroke="#004157"/><circle cx="641" cy="506" r="400" stroke="#004157"/><circle cx="641" cy="506" r="480" stroke="#004157"/><circle cx="641" cy="506" r="560" stroke="#004157"/><circle cx="641" cy="506" r="640" stroke="#004157"/></svg>

package/dist/build/dots-pattern.7a77e237.svg

@@ -1 +0,0 @@
-<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>