mp-design-system 0.7.3 → 0.8.2

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: "/static/pdf/FINAL Tone of voice guidelines April 2021.pdf",
-    label: "Tone of voice guidelines",
+    link: "/static/zip/MP_logo.zip",
+    label: "Malvern Panalytical logo",
     classes: "u-link",
     icon: "file"
 }) }}
+
 <br>
 
 {{ twi({
@@ -26,10 +26,20 @@ 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({
-    link: "/static/ppt/MP Elevator pitch.pptx",
+    link: "https://malvern.sharepoint.com/:p:/r/sites/SVP/Shared%20Documents/Elevator%20Pitch%20(different%20languages)/Elevator%20pitch%20PPT%20(internal-external).pptx?d=w5ae5e5afa8c042f9968f95878a910471&csf=1&web=1&e=ui0qAk",
     label: "Elevator pitch - Powerpoint presentation",
     classes: "u-link",
     icon: "file"

package/src/brand/visual/images.md

@@ -42,39 +42,39 @@ The images we use can have a great effect on how people perceive our company. Ju
 <div class="c-library__photo-grid grid-1">
 <div class="u-bg-petrol u-white"><h2>Captivate</h2></div>
 <img src="/static/img/grid-captivate-1.jpg" alt="A silhouette of a woman's face, overlaid with plotted lines and charts of data" loading="lazy">
-<img src="/static/img/grid-captivate-3.jpg" alt="Looking up through tree branches at the Milky Way, filling the night sky" loading="lazy">
-<img src="/static/img/grid-captivate-4.jpg" alt="A glowing Malvern Panalytical logo floats amongst trees in a misty forest " loading="lazy">
-<img src="/static/img/grid-captivate-2.jpg" alt="A network of brass pins embedded in a wooden surface, connected with fine wire" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/f4c97a0a-bb44-417d-a935-adea010bdf70/shutterstock_600381020_Low-res.JPG" alt="Looking up through tree branches at the Milky Way, filling the night sky" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/519c5d77-203b-433f-a8d6-adf600fd4f42/shutterstock_1729372963_Low-res.JPG" alt="A glowing Malvern Panalytical logo floats amongst trees in a misty forest " loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/d3e8fca9-b331-4798-ac4e-adea010d1c42/shutterstock_455077471_Low-res.JPG" alt="A network of brass pins embedded in a wooden surface, connected with fine wire" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-1">
 <div class="u-bg-red u-white"><h2>Inspire</h2></div>
-<img src="/static/img/grid-inspire-1.jpg" alt="A scientist wearing protective gear leans in, using a pipette to fill a cuvette" loading="lazy">
-<img src="/static/img/grid-inspire-2.jpg" alt="An extreme close-up of tiny underwater plants, glowing in sunlight" loading="lazy">
-<img src="/static/img/grid-inspire-4.jpg" alt="An industrial pipeline silhouetted against the dawn sky" loading="lazy">
-<img src="/static/img/grid-inspire-3.jpg" alt="A CNC machine cuts into a piece of metal, sending sparks flying" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/981276ff-0ab9-4be9-aedd-adea010bf005/shutterstock_145005193_Low-res.JPG" alt="A scientist wearing protective gear leans in, using a pipette to fill a cuvette" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/372bcddb-261b-4272-a3fd-adea010c01ad/shutterstock_1408636658_Low-res.JPG" alt="An extreme close-up of tiny underwater plants, glowing in sunlight" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/d80bfeb7-1b0c-40cf-97e8-adea010bea98/shutterstock_174607778_Low-res.JPG" alt="An industrial pipeline silhouetted against the dawn sky" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/7f424ea8-8443-444a-8c91-adea010bee72/shutterstock_712297567_Low-res.JPG" alt="A CNC machine cuts into a piece of metal, sending sparks flying" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-2">
 <div class="u-bg-blue u-white"><h2>Inform - Applications</h2></div>
-<img src="/static/img/grid-inform-applications-1.jpg" alt="An engineer in a hard hat crouches down to install solar panels on a roof" loading="lazy">
-<img src="/static/img/grid-inform-applications-2.jpg" alt="A deep sea oil rig lit up against the evening sky" loading="lazy">
-<img src="/static/img/grid-inform-applications-3.jpg" alt="A scientist collects a water sample from a stream and checks it against a touchscreen device" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/971f54df-cdb3-43d8-ac63-adea010af455/shutterstock_1515878372_Low-res.JPG" alt="Three engineers in a workshop building a robotic device" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/1f20be8d-61fc-465b-b67d-adea010a3cad/shutterstock_717797560_Low-res.JPG" alt="A deep sea oil rig lit up against the evening sky" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/86aad13f-9f20-4a18-8a2e-adea010ae3d9/shutterstock_111870260_Low-res.JPG" alt="An aerial view of a water treatment plant in the sunshine" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-2">
 <div class="u-bg-blue u-white"><h2>Inform - Technology</h2></div>
-<img src="/static/img/grid-inform-tech-2.jpg" alt="An engineer types on a laptop, surrounded by server racks, with cable bundles covering the walls and ceiling" loading="lazy">
-<img src="/static/img/grid-inform-tech-1.jpg" alt="A scientist wearing protective gear looks into a microscope" loading="lazy">
-<img src="/static/img/grid-inform-tech-4.jpg" alt="A network of glass spheres, some lit from within, connected by metal rods, suspended in darkness" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/b7f2beab-a7e1-48f7-83e1-adea010ca426/shutterstock_1921649444_Low-res.JPG" alt="An engineer in a data center typing on a laptop, surrounded by server racks" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/523373f2-3a26-45b4-9b1b-adea010caab1/shutterstock_1073659409_Low-res.JPG" alt="A scientist wearing protective gear looks into a microscope" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/5b80c088-2b69-4bb9-a705-adea010d0fb1/shutterstock_1770220811_Low-res.JPG" alt="A network of glass spheres, some lit from within, connected by metal rods, suspended in darkness" loading="lazy">
 </div>
 
 <div class="c-library__photo-grid grid-1">
 <div class="u-bg-green u-white"><h2>Convince</h2></div>
-<img src="/static/img/grid-convince-1.jpg" alt="A woman holds a mobile phone to her ear, and smiles at the camera" loading="lazy">
-<img src="/static/img/grid-convince-2.jpg" alt="Liquid is mixed inside a scientific machine, lit from within" loading="lazy">
-<img src="/static/img/grid-convince-3.jpg" alt="Plants with green leaves growing out of glass containers in a laboratory" loading="lazy">
-<img src="/static/img/grid-convince-4.jpg" alt="An aerial view of farmland, with buildings connected by CGI arcs of light in the air" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/fb25d412-a13c-47fa-8740-adea010b4722/shutterstock_1522368992_Low-res.JPG" alt="A birds-eye view of people raising their glasses around a dinner table" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/87714d0a-16c8-43f5-a7e0-adea01143f6a/shutterstock_326505566_Low-res.JPG" alt="A barista pours steamed milk into a latte, creating a heart pattern" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/2d6b4793-692f-4ff8-ab51-adea010c6f71/shutterstock_128581706_Low-res.JPG" alt="Plants with green leaves growing out of glass containers in a laboratory" loading="lazy">
+<img src="https://p3.aprimocdn.net/malvernpanalytical/fe398dc5-a0db-4801-a680-adea010c65e1/shutterstock_1898110876_Low-res.JPG" alt="An aerial view of farmland, with buildings connected by CGI arcs of light in the air" loading="lazy">
 </div>
 
 <div class="u-wrap--content u-margin-top-xl">

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/src/prototype/product.njk

@@ -31,7 +31,7 @@ tagTitle: Product
         <h2 class="c-h c-h--page-subtitle u-margin-top-s-m">Delivering the data you need for outcomes you can trust</h2>
         <div class="mp o-prose u-margin-top-s-m u-flow--m">
           <p>From pharma to food, manufacturing to environmental monitoring, organisations the world over trust the Mastersizer 3000 laser diffraction particle size analyser for fast, accurate and reliable analysis. The instrument’s ease of use and versatility means it’s valued for both scientific research and manufacturing quality control.</p>
-          {{ twi({ classes: 'u-link', label: 'Download brochure', link: '/static/pdf/Mastersizer 3000.pdf', attrs: 'download', icon: 'file', inline: true, colour: 'white' }) }}
+          {{ twi({ classes: 'u-link', label: 'Download brochure', link: 'https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf', attrs: 'download', icon: 'file', inline: true, colour: 'white' }) }}
         </div>
         <div class="u-margin-top-s-m">
           {{ button({ link: '/prototype/request-a-quote', label: 'Request a quote', inline: true }) }}
@@ -84,6 +84,7 @@ tagTitle: Product
         links: [
           { link: '#features-and-benefits', label: 'Features and benefits' },
           { link: '#key-components', label: 'Key components' },
+          { link: '#faqs', label: 'FAQs' },
           { link: '#use-cases', label: 'Use cases' },
           { link: '#specifications', label: 'Specifications' },
           { link: '#accessories', label: 'Accessories' },
@@ -150,6 +151,28 @@ tagTitle: Product
         </ul>
       </div>
 
+      <div class="mp o-prose u-flow--prose" id="faqs">
+        <h2>Frequently asked questions</h2>
+        <dl class="c-accordion">
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">Do I need to prepare the workspace prior to installation?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose">All instruments need a power source, and some have additional requirements such as a water supply or waste extraction. Where this the case, we will advise you prior to shipping your instrument.</dd>
+          </div>
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">What specialist skills or knowledge are required?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose">You don't need any specialist skills or knowledge to perform a Smart Install. Simply follow the instructions provided.</dd>
+          </div>
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">Do I need specialist tools or equipment to Smart Install a new instrument?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose"><ul><li>For installation of a Mastersizer or Zetasizer system, you will need a computer with internet access in order to view the installation guides. For installation of an Epsilon 1 XRF instrument, you will also need a smartphone or tablet to connect with our support personnel via a secure, augmented reality (AR) platform.</li><li>Everything else you need to install your new instrument will be provided.</li></ul></dd>
+          </div>
+          <div class="c-accordion__item ">
+            <dt class="c-accordion__title">What languages are available for the Smart Install guides?</dt>
+            <dd class="c-accordion__content o-prose u-flow--prose"><ul><li>Mastersizer: English, Chinese, Korean, French, German and Japanese</li><li>Zetasizer: English, Chinese, Korean, French, German and Japanese</li><li>Epsilon 1: English, French, German and Japanese, Spanish and Portuguese</li></ul></dd>
+          </div>
+        </dl>
+      </div>
+
       <div class="mp o-prose u-flow--prose" id="use-cases">
         <h2>What customers use the Mastersizer 3000 for</h2>
         <p>The Mastersizer 3000 lets users find the particle size ‘sweet spot’ for a vast array of processes – helping them create substances that behave more <strong>predictably</strong>, more <strong>safely</strong> and to a higher <strong>quality</strong>. Mastersizers are frequently used for:</p>

package/src/prototype/range.njk

@@ -31,7 +31,7 @@ tagTitle: Range
   },
   cta: {
     label: 'Download brochure',
-    link: '/static/pdf/Mastersizer 3000.pdf',
+    link: 'https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf',
     attrs: 'download',
     icon: 'file'
   }

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>