mp-design-system 1.2.13 → 1.2.15

package/src/prototype/range.njk

@@ -4,10 +4,12 @@ tags: prototype
 tagTitle: Range
 ---
 
+{% from "components/internal-nav/macro.njk" import internalNav %}
 {% from "components/twi/macro.njk" import twi %}
 {% from "components/usp/macro.njk" import usp %}
 {% from "components/breadcrumb/macro.njk" import breadcrumb %}
 {% from "components/button/macro.njk" import button %}
+{% from "components/card/macro.njk" import productComparisonCard %}
 {% from "components/comparison-table/macro.njk" import comparisonTable %}
 {% from "components/hero/macro.njk" import hero %}
 
@@ -37,8 +39,21 @@ tagTitle: Range
   }
 }) }}
 
-<div class="c-slat--white">
-  <div class="mp u-wrap u-pad-top-s">
+{{ internalNav({
+  classes: 'u-sticky',
+  title: 'Mastersizer range',
+  links: [
+    { link: '#overview', label: 'Overview' },
+    { link: '#products', label: 'Products' },
+    { link: '#product-comparison-table', label: 'Compare' }
+  ],
+  button: {
+    link: '#',
+    label: 'Request a quote'
+  }
+}) }}
+
+<div id="overview" class="mp u-wrap u-pad-top-s u-margin-bottom-l-xl" style="scroll-margin-top:70px">
     <div class="o-grid o-grid--of-two-late u-pad-bottom-s">
       <div>
         <div class="mp o-prose u-flow--prose">
@@ -58,7 +73,7 @@ tagTitle: Range
       </figure>
     </div>
 
-    <div class="o-grid o-grid--of-three u-pad-top-m-l u-pad-bottom-l">
+    <div class="o-grid o-grid--of-three u-pad-top-m-l">
       {{ usp({
         title: 'Superior speed. Peerless precision.',
         content: '<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>'
@@ -72,57 +87,163 @@ tagTitle: Range
         content: '<p>Mastersizer 3000 eases your analytical workload, enabling you to develop and run a variety of methods efficiently</p>'
       }) }}
     </div>
+  </div>
+</div>
 
-    
-    {{ comparisonTable({
-      sections: [
+<div id="products" class="u-pad-y-xl" style="scroll-margin-top:70px">
+  <div class="o-grid o-grid--of-three u-wrap">
+    {{ productComparisonCard({
+      title: 'Mastersizer 3000',
+      description: 'Delivering the data you need for outcomes you can trust',
+      image: {
+        src: '/static/img/range-product-1.jpg',
+        alt: ''
+      },
+      features: [
+        {
+          icon: 'tick',
+          label: 'Particle size range from 0.01 to 3500µm'
+        },
         {
-          rows: ['Particle size range']
+          icon: 'tick',
+          label: 'Advanced method development'
         },
         {
-          title: 'Technology',
-          rows: ['Laser Diffraction']
+          icon: 'tick',
+          label: 'Automated dispersion'
         },
         {
-          title: 'Dispersion type',
-          rows: ['Wet', 'Dry']
+          icon: 'tick',
+          label: '21 CFR Part 11 support'
         }
       ],
-      products: [
-        {
-          title: 'Mastersizer 3000',
-          link: '/prototype/product/',
-          image: {
-            src: '/static/img/range-product-1.jpg',
-            alt: 'Mastersizer 3000'
+      footer: {
+        buttons: [
+          {
+            link: '#',
+            label: 'More details'
           },
-          description: 'Delivering the data you need for outcomes you can trust',
-          sections: [
-            ['0.01µm - 3500µm'],
-            [true],
-            [true, true]
-          ]
+          {
+            link: '/prototype/request-a-quote',
+            label: 'Request a quote'
+          }
+        ]
+      }
+    })}}
+    {{ productComparisonCard({
+      title: 'Mastersizer 3000E',
+      description: 'Entry level particle size analyzer',
+      image: {
+        src: '/static/img/range-product-1.jpg',
+        alt: ''
+      },
+      features: [
+        {
+          icon: 'tick',
+          label: 'Particle size range from 0.1 to 1000µm'
         },
         {
-          title: 'Mastersizer 3000E',
-          link: '/prototype/product/',
-          image: {
-            src: '/static/img/range-product-2.jpg',
-            alt: 'Mastersizer 3000E'
+          icon: 'tick',
+          label: 'Manual dispersion units only'
+        },
+        {
+          icon: 'tick',
+          label: 'Basic software'
+        },
+        {
+          icon: 'tick',
+          label: 'Anytime upgrade option'
+        }
+      ],
+      footer: {
+        buttons: [
+          {
+            link: '#',
+            label: 'More details'
           },
-          description: 'Entry level particle size analyzer',
-          sections: [
-            ['0.1µm - 1000µm'],
-            [true],
-            [true, false]
-          ]
+          {
+            link: '/prototype/request-a-quote',
+            label: 'Request a quote'
+          }
+        ]
+      }
+    })}}
+    <div class="u-flow u-margin-top-auto">
+      <h4 class="c-h c-h--step-4">Interested in a demonstration?</h4>
+      <div class="o-prose u-flow--prose">
+        <p>See the Mastersizer 3000 in action, speak with our product specialists and get answers to your questions.</p>
+      </div>
+      <a href="#" class="mp c-button c-button--outline-green c-button--inline">Request a demo</a>
+    </div>
+  </div>
+</div>
+
+{{ comparisonTable({
+  sections: [
+    {
+      rows: ['Particle size range']
+    },
+    {
+      title: 'Technology',
+      rows: ['Laser Diffraction']
+    },
+    {
+      title: 'Dispersion type',
+      rows: ['Wet', 'Dry']
+    }
+  ],
+  products: [
+    {
+      title: 'Mastersizer 3000',
+      link: '/prototype/product/',
+      image: {
+        src: '/static/img/range-product-1.jpg',
+        alt: 'Mastersizer 3000'
+      },
+      description: 'Delivering the data you need for outcomes you can trust',
+      buttons: [
+        {
+          link: '#',
+          label: 'More details'
+        },
+        {
+          link: '/prototype/request-a-quote',
+          label: 'Request a quote'
         }
+      ],
+      sections: [
+        ['0.01µm - 3500µm'],
+        [true],
+        [true, true]
       ]
-    }) }}
-
-  </div>
+    },
+    {
+      title: 'Mastersizer 3000E',
+      link: '/prototype/product/',
+      image: {
+        src: '/static/img/range-product-2.jpg',
+        alt: 'Mastersizer 3000E'
+      },
+      description: 'Entry level particle size analyzer',
+      buttons: [
+        {
+          link: '#',
+          label: 'More details'
+        },
+        {
+          link: '/prototype/request-a-quote',
+          label: 'Request a quote'
+        }
+      ],
+      sections: [
+        ['0.1µm - 1000µm'],
+        [true],
+        [true, false]
+      ]
+    }
+  ]
+}) }}
 
-  {% include "includes/resources.njk" %}
-</div>
+{% include "includes/resources.njk" %}
 
 {% endblock %}

package/src/prototype/webinars-3-2-1.njk

@@ -315,7 +315,7 @@ tagTitle: Webinars - featured layout
             switch: true
           },
           image: {
-            src: '/static/img/featured-event-1.jpg',
+            src: '/static/img/featured-event-3.jpg',
             alt: 'Alt'
           },
           header: {
@@ -350,6 +350,48 @@ tagTitle: Webinars - featured layout
           tag: 'Recorded webinar'
         }) }}
 
+    {{ card({
+          theme: {
+            layout: 'multi c-card--layout-multi-40-60',
+            name: 'featured'
+          },
+          image: {
+            src: '/static/img/featured-event-2.jpg',
+            alt: 'Alt'
+          },
+          header: {
+            title: 'Achieving method transfer from Mastersizer 2000 to Mastersizer 3000',
+            meta: ['English'],
+            date: {
+              date: '2021-02-09' | createDate,
+              time: '11:00 – 1200',
+              timezone: 'EST'
+            }
+          },
+          body: {
+            keySpecs: [
+              {
+                title: 'Products',
+                term: 'Mastersizer 3000'
+              },
+              {
+                title: 'Technologies',
+                term: 'Morphologically-Directed Raman Spectroscopy'
+              }
+            ]
+          },
+          footer: {
+            buttons: [
+              {
+                label: 'Book your place',
+                link: '/prototype/oma/',
+                colour: 'green'
+              }
+            ]
+          },
+          tag: 'Recorded webinar'
+        }) }}
+
   </div>
 </div>
 {% endblock %}

package/src/_includes/components/card/event-series-card.config.js

@@ -1,36 +0,0 @@
-const categories = require('../component/categories');
-
-module.exports = {
-  title: 'Event series card',
-  category: categories.card,
-  component: {
-    name: 'event-series-card',
-    folder: 'card'
-  },
-  preview: 'cards-three',
-  context: {
-    title: 'Part 1 - The theory of X-Ray Fluorescence (XRF)',
-    date: 'Oct 2023',
-    image: {
-      src: '/static/img/range-product-1.jpg',
-      alt: ''
-    },
-    footer: {
-      link: {
-        link: '#',
-        label: 'Watch now',
-        icon: 'play'
-      }
-    }
-  },
-  variants: [],
-  props: [
-    {
-      table: [
-        ['title', 'string'],
-        ['link', 'string'],
-        ['image', 'object', 'Image object']
-      ]
-    }
-  ]
-}

package/src/_includes/components/card/event-series-card.njk

@@ -1,45 +0,0 @@
-{%- from "components/twi/macro.njk" import twi -%}
-
-<article class="mp c-event-series-card" role="article" aria-label="Event series card">
-  <div class="c-event-series-card__body">
-    <header class="c-event-series-card__header u-flow--2xs">
-      <h3 class="c-h c-event-series-card__heading">{{ params.title }}</h3>
-      <time class="c-event-series-card__datetime">
-        <span>{{ params.date }}</span>
-      </time>
-    </header>
-    {% if footer.link | length %}
-      <footer class="c-event-series-card__footer u-flow--2xs">
-        {{ twi({
-          label: footer.link.label,
-          icon: footer.link.icon
-        }) }}
-      </footer>
-    {% endif %}
-  </div>
-  <figure class="c-event-series-card__image">
-    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
-  </figure>
-</article>
-
-<article class="mp c-event-series-card" role="article" aria-label="Event series card">
-  <div class="c-event-series-card__body">
-    <header class="c-event-series-card__header u-flow--2xs">
-      <h3 class="c-h c-event-series-card__heading">{{ params.title }}</h3>
-      <time class="c-event-series-card__datetime">
-        <span>{{ params.date }}</span>
-      </time>
-    </header>
-    {% if footer.link | length %}
-      <footer class="c-event-series-card__footer u-flow--2xs">
-        {{ twi({
-          label: footer.link.label,
-          icon: footer.link.icon
-        }) }}
-      </footer>
-    {% endif %}
-  </div>
-  <figure class="c-event-series-card__image">
-    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
-  </figure>
-</article>

package/src/_includes/components/card/event-series-card.scss

@@ -1,57 +0,0 @@
-.c-event-series-card {
-  @extend .u-flow--2xs;
-  display: flex;
-  flex-flow: column;
-  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
-    
-  & > * + * {
-    @include margin-top('2xs');
-  }
-
-  &__body {
-    @include padding('s-m');
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-  }
-
-  &__heading {
-
-  }
-
-  &__heading {
-    @extend .c-h;
-    font-size: var(--step-0);
-  }
-
-  &__datetime {
-    font-size: var(--step--1);
-    font-weight: normal;
-  }
-
-  &__footer {
-    @include margin-top('auto');
-    @include padding-top('s');
-    
-    & > * + * {
-      @include margin-top('2xs');
-    }
-
-    .c-twi {
-      color: color('utility-blue', 'step-1');
-      font-size: var(--step--1);
-    }
-  }
-
-  &__image {
-    height: 15.75em;
-    order: -1;
-    aspect-ratio: 2/1;
-
-    img {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-    }
-  }
-}

package/src/_includes/components/dynamic-form/dynamic-form.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  title: 'Dynamic form',
-  component: {
-    name: 'dynamic-form'
-  },
-  context: {
-    label: 'Find the perfect event for you'
-  },
-  props: [
-    {
-      table: [
-        ['label', 'string', 'Label the input']
-      ]
-    }
-  ]
-}