mp-design-system 1.2.7 → 1.2.9

package/package.json

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

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

@@ -1,30 +1,50 @@
 const products = [
   {
     title: 'Mastersizer 3000',
-    link: '/prototype/product/',
+    buttons: [
+      {
+        link: '#',
+        label: 'More details'
+      },
+      {
+        link: '#',
+        label: 'Request a quote'
+      }
+    ],
     image: {
       src: '/static/img/range-product-1.jpg',
       alt: 'Mastersizer 3000'
     },
     description: 'Delivering the data you need for outcomes you can trust',
     sections: [
-      ['0.01µm - 3500µm'],
-      [true],
-      [true, true]
+      ['Laser diffraction', '0.01µm - 3500µm'],
+      [true, true, true, false],
+      [true, true, true, true, true],
+      ['IQ/OQ validation', '21 CFR Part 11 support']
     ]
   },
   {
     title: 'Mastersizer 3000E',
-    link: '/prototype/product/',
+    buttons: [
+      {
+        link: '#',
+        label: 'More details'
+      },
+      {
+        link: '#',
+        label: 'Request a quote'
+      }
+    ],
     image: {
       src: '/static/img/range-product-2.jpg',
       alt: 'Mastersizer 3000E'
     },
     description: 'Entry level particle size analyzer',
     sections: [
-      ['0.1µm - 1000µm'],
-      [true],
-      [true, false]
+      ['Laser diffraction', '0.1µm - 1000µm'],
+      [false, false, true, true],
+      [true, false, false, false, false],
+      ['-', '-']
     ]
   }
 ]
@@ -36,17 +56,22 @@ module.exports = {
   },
   context: {
     sections: [
-      {
-        rows: ['Particle size range']
-      },
       {
         title: 'Technology',
-        rows: ['Laser Diffraction']
+        rows: ['Technology', 'Particle size range']
       },
       {
         title: 'Dispersion type',
-        rows: ['Wet', 'Dry']
-      }
+        rows: ['Automated wet', 'Automated dry powder', 'Manual wet', 'Manual dry powder']
+      },
+      {
+        title: 'Software',
+        rows: ['Basic software', 'Advanced method development', 'Comparison software', 'Advanced data quality assessment', 'Reporting']
+      },
+      {
+        title: 'Compliance',
+        rows: ['Installation', 'Compliance']
+      },
     ],
     products: [
       ...products
@@ -60,7 +85,6 @@ module.exports = {
           ...products,
           ...products,
           ...products,
-          ...products,
         ]
       }
     }

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

@@ -1,21 +1,39 @@
 {% from "components/button/macro.njk" import button %}
 {% from "components/icon/macro.njk" import icon %}
 
-<div id="product-comparison-table" class="mp c-comparison u-pad-bottom-l">
-  <div class="c-comparison__mobile"></div>
-  <div class="c-comparison__wrapper">
-    <table class="c-table c-table--comparison">
+<section id="product-comparison-table" class="mp u-bg-grey-step-3 u-pad-bottom-l">
+  <div class="c-comparison-table__mobile u-wrap"></div>
+  <div class="c-comparison-table__desktop u-wrap">
+    <table class="c-comparison-table">
       <thead>
         <tr>
           <th></th>
           {% for product in params.products %}
             <th>
-              <a href="/prototype/product" class="c-comparison__link u-flow--prose">
+              <div class="c-comparison-table__product">
                 <img alt="{{ product.image.alt }}" src="{{ product.image.src }}" />
                 <h3 class="c-h c-h--step-0">{{ product.title }}</h3>
                 <p>{{ product.description }}</p>
-                {{ button({ label: 'More details', type: 'span', inline: true }) }}
-              </a>
+              </div>
+            </th>
+          {% endfor %}
+        </tr>
+        <tr>
+          <th></th>
+          {% for product in params.products %}
+            <th>
+              {% if product.buttons | length %}
+                <div class="c-comparison-table__buttons">
+                  {% for item in product.buttons %}
+                    {{ button({
+                      link: item.link,
+                      label: item.label,
+                      colour: 'outline-green' if loop.index0 == 0 else 'green',
+                      classes: 'c-button--small'
+                    }) }}
+                  {% endfor %}
+                </div>
+              {% endif %}
             </th>
           {% endfor %}
         </tr>
@@ -23,8 +41,11 @@
       <tbody>
         {% for section in params.sections %}
           {% if section.title != null %}
-            <tr class="c-table__title">
-              <th colspan="{{ params.products | length + 1 }}">{{ section.title }}</th>
+            <tr class="c-comparison-table__title">
+              <th>
+                <span>{{ section.title }}</span>
+              </th>
+              <th colspan="{{ params.products | length }}"></th>
             </tr>
           {% endif %}
 
@@ -39,7 +60,7 @@
                   {% if value == true %}
                     {{ icon({ id: 'tick' }) }}
                   {% elseif value == false %}
-                    {{ icon({ id: 'dash' }) }}
+                    {{ icon({ id: 'cross' }) }}
                   {% else %}
                     {{ value }}
                   {% endif %}
@@ -52,4 +73,4 @@
       </tbody>
     </table>
   </div>
-</div>
+</section>

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

@@ -1,44 +1,145 @@
-.c-comparison {
-  max-width: $wrapper;
-  @include step(-1);
+.c-comparison-table__desktop {
+  overflow: auto;
+  width: 100%;
 
-  &__wrapper {
-    overflow: auto;
-    width: 100%;
-  }
-  
-  &__wrapper .c-table {
+  .c-comparison-table {
     width: calc(100% - 1px);
-    // min-width: $wrapper;
 
     @media (min-width: 60em) {
-      min-width: $wrapper;
-
       tbody > tr > :first-child {
         min-width: 300px;
       }
     }
   }
+}
 
-  &__title {
-    @include step();
+.c-comparison-table__mobile {
+  display: none;
+
+  & > * + * {
+    @include margin-top('m-l');
   }
 
-  &__link {
-    display: block;
-    @include padding-bottom('xs');
-    @include padding-right('s');
+  .c-comparison-table {
+    width: 100%;
+    table-layout: fixed;
+
+    &__product {
+      img {
+        @include margin(0);
+      }
+    }
+  }
+}
+
+.c-comparison-table {
+  @include step(-1);
+  border-collapse: collapse;
+
+  thead {
+    th {
+      @include padding(0, '2xs');
+      border: 0;
+      text-align: center;
+      vertical-align: top;
+    }
+  }
+
+  &__product {
+    @extend .u-flow--2xs;
+
+    img {
+      @include space('max-height', '3xl');
+      @include margin(0, 'auto');
+      object-fit: contain;
+      mix-blend-mode: multiply;
+    }
+
+    p {
+      font-weight: 400;
+    }
   }
+    
+  &__buttons {
+    @include margin(0, 'auto');
+    @include padding-bottom('xs');
+    margin-top: 1.25rem !important;
+    display: inline-flex;
+    flex-direction: column;
 
-  &__mobile {
-    display: none;
+    & * + * {
+      @include margin-top('2xs');
+    }
+  }
 
-    & > * + * {
-      @include margin-top('m-l');
+  &__title {    
+    th {
+      @include padding-top('xs');
+      text-align: left;
+      
+      span {
+        @include padding('2xs');
+        background-color: color('grey');
+        color: color('white');  
+        max-width: 20em;
+        width: 100%;
+        display: inline-block;
+        position: relative;
+        text-align: center;
+        font-weight: 600;
+
+        &::after {
+          @include space('border-width', 'xs', 0, 0, 'xs');
+          content: "";
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-color: color('grey', 'step-3') transparent transparent transparent;
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
     }
+  }
 
-    .c-table {
-      table-layout: fixed;
+  tbody {
+    tr {
+      &:first-child th {
+        @include padding(0);
+        vertical-align: bottom;
+      }
+      
+      &:not(.c-comparison-table__title) {
+        height: 48px;
+      }
+
+      td:first-child {
+        text-align: left;
+        font-weight: 600;
+      }
+
+      td {
+        @include padding('2xs');
+        background-color: color('white');
+        border: 2px solid color('grey', 'step-3');
+        border-right: 0;
+        border-left: 0;
+        text-align: center;
+        vertical-align: middle;
+
+        .c-icon {
+          font-size: 1.5rem;
+        }
+        
+        .c-icon--tick {
+          color: color('green');
+        }
+        
+        .c-icon--cross {
+          color: color('grey', 'step-2');
+        }
+      }
     }
   }
 
@@ -47,48 +148,40 @@
       display: block;
     }
 
-    &__wrapper {
+    &__desktop {
       display: none;
     }
   }
-
-  thead img {
-    @include space('max-height', '3xl');
-    object-fit: contain;
-  }
-
 }
 
 @media only screen and (min-width: 640px) {
-
-  .c-table--comparison thead th:nth-last-child(1):nth-child(2),
-  .c-table--comparison thead th:nth-last-child(1):nth-child(2) ~ th {
+  .c-comparison-table thead th:nth-last-child(1):nth-child(2),
+  .c-comparison-table thead th:nth-last-child(1):nth-child(2) ~ th {
       width: 85%;
   }
 
-  .c-table--comparison thead th:nth-last-child(2):nth-child(2),
-  .c-table--comparison thead th:nth-last-child(2):nth-child(2) ~ th {
+  .c-comparison-table thead th:nth-last-child(2):nth-child(2),
+  .c-comparison-table thead th:nth-last-child(2):nth-child(2) ~ th {
       width: 42.5%;
   }
 
-  .c-table--comparison thead th:nth-last-child(3):nth-child(2),
-  .c-table--comparison thead th:nth-last-child(3):nth-child(2) ~ th {
+  .c-comparison-table thead th:nth-last-child(3):nth-child(2),
+  .c-comparison-table thead th:nth-last-child(3):nth-child(2) ~ th {
       width: 28.33333%;
   }
 
-  .c-table--comparison thead th:nth-last-child(4):nth-child(2),
-  .c-table--comparison thead th:nth-last-child(4):nth-child(2) ~ th {
+  .c-comparison-table thead th:nth-last-child(4):nth-child(2),
+  .c-comparison-table thead th:nth-last-child(4):nth-child(2) ~ th {
       width: 21.25%;
   }
 
-  .c-table--comparison thead th:nth-last-child(5):nth-child(2),
-  .c-table--comparison thead th:nth-last-child(5):nth-child(2) ~ th {
+  .c-comparison-table thead th:nth-last-child(5):nth-child(2),
+  .c-comparison-table thead th:nth-last-child(5):nth-child(2) ~ th {
       width: 17%;
   }
 
-  .c-table--comparison thead th:nth-last-child(6):nth-child(2),
-  .c-table--comparison thead th:nth-last-child(6):nth-child(2) ~ th {
+  .c-comparison-table thead th:nth-last-child(6):nth-child(2),
+  .c-comparison-table thead th:nth-last-child(6):nth-child(2) ~ th {
       width: 14.16667%;
   }
-
 }

package/src/assets/js/imports/comparison.js

@@ -1,11 +1,13 @@
 function Comparison() {
-  document.querySelectorAll('.c-comparison').forEach(extractMobileComparison)
+  console.log(document.querySelectorAll('.c-comparison-table').parentElement)
+  document.querySelectorAll('.c-comparison-table').forEach(extractMobileComparison)
 }
 
 function extractMobileComparison(container) {
-  const body = container.querySelector('.c-table tbody');
-  const head = container.querySelector('.c-table thead');
-  const mobile = container.querySelector('.c-comparison__mobile');
+  const parent = container.parentNode.parentNode;
+  const body = parent.querySelector('.c-comparison-table tbody');
+  const head = parent.querySelector('.c-comparison-table thead');
+  const mobile = parent.parentElement.querySelector('.c-comparison-table__mobile');
 
   if (!body || !head || !mobile) return;
 
@@ -16,7 +18,7 @@ function extractMobileComparison(container) {
 
   Array.from(body.children).forEach(row => {
     // For table row headers, push to all products
-    if (row.classList.contains('c-table__title')) {
+    if (row.classList.contains('c-comparison-table__title')) {
       products.forEach(x => {
         x.table.push({ type: 'title', title: row.children[0].textContent })
       })
@@ -43,13 +45,11 @@ function extractMobileComparison(container) {
 
 function createMobileProduct(product) {
   const parent = document.createElement('article');
-  parent.innerHTML = `<div class="c-comparison__content">
-    ${product.info}
-  </div>
-  <table class="c-table">
+  parent.innerHTML = `${product.info}
+  <table class="c-comparison-table">
     ${product.table.map(x => {
       if (x.type === 'title') {
-        return `<tr class="c-table__title"><th colspan="2">${x.title}</th></tr>`;
+        return `<tr class="c-comparison-table__title"><th><span>${x.title}</span></th><th></th></tr>`;
       } else {
         return `<tr>
           <td>${x.key}</td>