mp-design-system 0.9.16 → 0.9.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

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

@@ -1,4 +1,122 @@
 const 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',
+    range: '0.01µm - 3500µm',
+    checklist: [
+      {
+        title: 'Automated wet',
+        value: true,
+      },
+      {
+        title: 'Automated dry powder',
+        value: true,
+      },
+      {
+        title: 'Manual wet',
+        value: true,
+      },
+      {
+        title: 'Manual dry powder',
+        value: false,
+      },
+      {
+        title: '21 CFR Part 11 support',
+        value: true,
+      },
+      {
+        title: 'IQ/OQ validation',
+        value: true,
+      },
+      {
+        title: 'Data quality assessment',
+        value: true,
+      }
+    ]
+  },
+  {
+    title: 'Mastersizer 3000E',
+    link: '/prototype/product/',
+    image: {
+      src: '/static/img/range-product-2.jpg',
+      alt: 'Mastersizer 3000E'
+    },
+    description: 'Entry level particle size analyzer',
+    checklist: [
+      {
+        title: 'Automated wet',
+        value: true,
+      },
+      {
+        title: 'Automated dry powder',
+        value: true,
+      },
+      {
+        title: 'Manual wet',
+        value: true,
+      },
+      {
+        title: 'Manual dry powder',
+        value: false,
+      },
+      {
+        title: '21 CFR Part 11 support',
+        value: true,
+      },
+      {
+        title: 'IQ/OQ validation',
+        value: true,
+      },
+      {
+        title: 'Data quality assessment',
+        value: true,
+      }
+    ]
+  },
+  {
+    title: 'Mastersizer 3000E',
+    link: '/prototype/product/',
+    image: {
+      src: '/static/img/range-product-2.jpg',
+      alt: 'Mastersizer 3000E'
+    },
+    description: 'Entry level particle size analyzer',
+    checklist: [
+      {
+        title: 'Automated wet',
+        value: true,
+      },
+      {
+        title: 'Automated dry powder',
+        value: true,
+      },
+      {
+        title: 'Manual wet',
+        value: true,
+      },
+      {
+        title: 'Manual dry powder',
+        value: false,
+      },
+      {
+        title: '21 CFR Part 11 support',
+        value: true,
+      },
+      {
+        title: 'IQ/OQ validation',
+        value: true,
+      },
+      {
+        title: 'Data quality assessment',
+        value: true,
+      }
+    ]
+  }
 ]
 
 module.exports = {
@@ -8,6 +126,9 @@ module.exports = {
   },
   context: {
     sections: [
+      {
+        title: 'Compatible sample dispersions',
+      }
     ],
     products: [
       ...products

package/src/_includes/components/features-table/features-table.njk

@@ -143,7 +143,7 @@
             <tfoot>
               <tr>
                 <td>
-                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
+                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
                 </td>
               </tr>
             </tfoot>
@@ -197,7 +197,7 @@
             <tfoot>
               <tr>
                 <td>
-                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
+                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
                 </td>
               </tr>
             </tfoot>
@@ -348,11 +348,15 @@
       </tbody>
       <tfoot>
         <tr>
-          {% for product in params.products %}
-            <td>
-              {{ button({ label: 'Request a quote', type: 'span', inline: true }) }}
-            </td>
-          {% endfor %}
+          <td>
+            <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
+          </td>
+          <td>
+            <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
+          </td>
+          <td>
+            <a href="/en/products/product-range/mastersizer-range/mastersizer-3000e" class="mp c-button c-button--inline">Request a quote</a>
+          </td>
         </tr>
       </tfoot>
     </table>

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

@@ -39,20 +39,15 @@
   }
 
   &__checklist-title th {
-    color: inherit;
+    color: color('grey') !important;
     background: transparent !important;
     padding-bottom: 0 !important;
   }
 
-  tr.c-features__checklist:nth-last-child {
-    background: red;
-    @include padding-bottom('m');
-  }
-
   &__checklist {
     td {
-      @include padding-top('3xs');
-      padding-bottom: 0;
+      padding-top: var(--space-3xs) !important;
+      padding-bottom: 0 !important;
       vertical-align: middle;
       line-height: 20px;
 
@@ -67,7 +62,7 @@
 
     &--last {
       td {
-        @include padding-bottom('m');
+        padding-bottom: var(--space-s) !important;
       }
     }
   }

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

@@ -0,0 +1,29 @@
+module.exports = {
+    title: 'Gallery',
+    component: {
+        name: 'gallery'
+    },
+    // docs: true,
+    context: {
+        images: [
+            {
+                src: '/static/img/slide-1.jpg',
+                title: 'Mastersizer slide 1'
+            },
+            {
+                src: '/static/img/slide-2.jpg',
+                title: 'Mastersizer slide 2'
+            },
+            {
+                src: '/static/img/slide-3.jpg',
+                title: 'Mastersizer slide 3'
+            }
+        ],
+        videos: [
+            {
+                title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
+                id: 'Q4H7EdHFghs'
+            }
+        ]
+    }
+}

package/src/_includes/components/gallery/gallery.njk

@@ -0,0 +1,52 @@
+{% from "components/embed/macro.njk" import youtube %}
+
+{% set count = 1 %}
+
+<div class="u-flow c-gallery">
+    <div class="c-gallery__main">
+        {% if params.images | length %}
+            {% for image in params.images %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="{{image.src}}" alt="{{image.title}}" >
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+        {% if params.videos | length %}
+            {% for video in params.videos %}
+                <div class="c-gallery__slide c-gallery__video" data-slide="{{count}}">
+                    {{ youtube({
+                        title: video.title,
+                        id: video.id
+                    }) }}
+                </div>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+    </div>
+
+{% set count = 1 %}
+
+    <div class="c-gallery__thumbnails">
+        {% if params.images | length %}
+            {% for image in params.images %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="{{image.src}}" alt="{{image.title}}" loading="lazy" width="102">
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+        {% if params.videos | length %}
+            {% for video in params.videos %}
+                {% set active = (count == 1) %}
+                <figure class="c-gallery__slide {{"active" if active}}" data-slide="{{count}}">
+                    <img src="https://img.youtube.com/vi/{{video.id}}/default.jpg" alt="{{video.title}}" loading="lazy" width="102">
+                </figure>
+                {% set count = count+1 %}
+            {% endfor %}
+        {% endif %}
+    </div>
+    </div>
+</div>

package/src/_includes/components/gallery/macro.njk

@@ -0,0 +1,5 @@
+{% from "components/component/component.njk" import c %}
+
+{% macro gallery(params) %}
+  {{ c({ name: 'gallery' }, params) }}
+{% endmacro %}

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

@@ -1,35 +1,35 @@
+@import '~comp/accordion/accordion.scss';
+@import '~comp/alert/alert.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';