mp-design-system 1.2.63 → 1.2.65

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

@@ -1,364 +0,0 @@
-{% from "components/button/macro.njk" import button %}
-{% from "components/icon/macro.njk" import icon %}
-
-<div id="product-features-table" class="mp c-features u-pad-bottom-l">
-  <div class="c-features__mobile">
-    <div class="mp c-tabs c-tabs--anchor">
-      <nav class="c-tabs__controls">
-        <ul class="c-tabs__controls-list">
-          <li><a class="c-tabs__control c-tabs__control--active" href="#tab-1">Mastersizer 3000</a></li>
-          <li><a class="c-tabs__control" href="#tab-2">Mastersizer 3000E</a></li>
-          <li><a class="c-tabs__control" href="#tab-3">Mastersizer 3000E</a></li>
-        </ul>
-      </nav>
-      <div class="c-tabs__content">
-        <div id="tab-1" class="c-tab c-tab--active">
-          <table class="c-table c-table--features">
-            <thead>
-              <tr>
-                <th class="c-features__product u-flow--prose">
-                  <img alt="Mastersizer 3000" src="/static/img/range-product-1.jpg" />
-                  <h3 class="c-h c-h--step-0">Mastersizer 3000</h3>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="c-features__introduction">
-                <td>Advanced features</td>
-              </tr>
-              <tr class="c-features__label-text">
-                <td>
-                  <span class="u-strong">0.01µm to 3500µm</span>
-                  <span>Extended particle size range</span>
-                </td>
-              </tr>
-              <tr class="c-features__checklist-title">
-                <th>Compatible sample dispersions</th>
-              </tr>
-              <tr class="c-features__checklist">
-                <td>
-                  {{ icon({ id: 'tick' }) }}Automated wet
-                </td>
-              </tr>
-              <tr class="c-features__checklist">
-                <td>
-                  {{ icon({ id: 'tick' }) }}Automated dry powder
-                </td>
-              </tr>
-              <tr class="c-features__checklist">
-                <td>
-                  {{ icon({ id: 'tick' }) }}Manual wet
-                </td>
-              </tr>
-              <tr class="c-features__checklist c-features__checklist--last">
-                <td class="u-grey-step-1">
-                  {{ icon({ id: 'cross' }) }}Manual dry powder
-                </td>
-              </tr>
-              <tr class="c-features__text">
-                <td>
-                  Advanced method development and comparison software
-                </td>
-              </tr>
-              <tr class="c-features__text">
-                <td>
-                  Advanced data quality assessment and reporting software
-                </td>
-              </tr>
-              <tr class="c-features__text">
-                <td>
-                  IQ/OQ validation
-                </td>
-              </tr>
-              <tr class="c-features__text">
-                <td>
-                  21 CFR Part 11 support
-                </td>
-              </tr>
-            </tbody>
-            <tfoot>
-              <tr>
-                <td>
-                  <a href="/en/products/product-range/mastersizer-range/mastersizer-3000" class="mp c-button c-button--inline">Request a quote</a>
-                </td>
-              </tr>
-            </tfoot>
-          </table>
-        </div>
-        <div id="tab-2" class="c-tab">
-          <table class="c-table c-table--features">
-            <thead>
-              <tr>
-                <th class="c-features__product u-flow--prose">
-                  <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
-                  <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
-                  <span>with Extended software</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="c-features__introduction">
-                <td>Flexible features</td>
-              </tr>
-              <tr class="c-features__label-text">
-                <td>
-                  <span class="u-strong">0.1µm to 1000µm</span>
-                  <span>Standard particle size range</span>
-                </td>
-              </tr>
-              <tr class="c-features__checklist-title">
-                <th>Compatible sample dispersions</th>
-              </tr>
-              <tr class="c-features__checklist">
-                <td>
-                  {{ icon({ id: 'tick' }) }}Automated wet
-                </td>
-              </tr>
-              <tr class="c-features__checklist">
-                <td class="u-grey-step-1">
-                  {{ icon({ id: 'cross' }) }}Automated dry powder
-                </td>
-              </tr>
-              <tr class="c-features__checklist">
-                <td>
-                  {{ icon({ id: 'tick' }) }}Manual wet
-                </td>
-              </tr>
-              <tr class="c-features__checklist c-features__checklist--last">
-                <td>
-                  {{ icon({ id: 'tick' }) }}Manual dry powder
-                </td>
-              </tr>
-              <tr class="c-features__text">
-                <td>
-                  Advanced method development and comparison software
-                </td>
-              </tr>
-              <tr class="c-features__text">
-                <td>
-                  Advanced data quality assessment and reporting software
-                </td>
-              </tr>
-            </tbody>
-            <tfoot>
-              <tr>
-                <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>
-        </div>
-        <div id="tab-3" class="c-tab">
-          <table class="c-table c-table--features">
-            <thead>
-              <tr>
-                <th class="c-features__product u-flow--prose">
-                  <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
-                  <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
-                  <span>with Basic software</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="c-features__introduction">
-                <td>Entry-level features</td>
-              </tr>
-              <tr class="c-features__label-text">
-                <td>
-                  <span class="u-strong">0.1µm to 1000µm</span>
-                  <span>Standard particle size range</span>
-                </td>
-              </tr>
-              <tr class="c-features__checklist-title">
-                <th>Compatible sample dispersions</th>
-              </tr>
-              <tr class="c-features__checklist">
-                <td class="u-grey-step-1">
-                  {{ icon({ id: 'cross' }) }}Automated wet
-                </td>
-              </tr>
-              <tr class="c-features__checklist">
-                <td class="u-grey-step-1">
-                  {{ icon({ id: 'cross' }) }}Automated dry powder
-                </td>
-              </tr>
-              <tr class="c-features__checklist">
-                <td>
-                  {{ icon({ id: 'tick' }) }} Manual wet
-                </td>
-              </tr>
-              <tr class="c-features__checklist c-features__checklist--last">
-                <td>
-                  {{ icon({ id: 'tick' }) }} Manual dry powder
-                </td>
-              </tr>
-            </tbody>
-            <tfoot>
-              <tr>
-                <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>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="c-features__wrapper">
-    <table class="c-table c-table--features">
-      <thead>
-        <tr>
-          <th class="c-features__product u-flow--prose">
-            <img alt="Mastersizer 3000" src="/static/img/range-product-1.jpg" />
-            <h3 class="c-h c-h--step-0">Mastersizer 3000</h3>
-          </th>
-          <th class="c-features__product u-flow--prose">
-            <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
-            <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
-            <span>with Extended software</span>
-          </th>
-          <th class="c-features__product u-flow--prose">
-            <img alt="Mastersizer 3000E" src="/static/img/range-product-2.jpg" />
-            <h3 class="c-h c-h--step-0">Mastersizer 3000E</h3>
-            <span>with Basic software</span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="c-features__introduction">
-          <td>
-            Advanced features
-          </td>
-          <td>
-            Flexible features
-          </td>
-          <td>
-            Entry-level features
-          </td>
-        </tr>
-        <tr class="c-features__label-text">
-          <td>
-            <span class="u-strong">0.01µm to 3500µm</span>
-            <span>Extended particle size range</span>
-          </td>
-          <td>
-            <span class="u-strong">0.1µm to 1000µm</span>
-            <span>Standard particle size range</span>
-          </td>
-          <td>
-            <span class="u-strong">0.1µm to 1000µm</span>
-            <span>Standard particle size range</span>
-          </td>
-        </tr>
-        <tr class="c-features__checklist-title">
-          <th>Compatible sample dispersions</th>
-          <th>Compatible sample dispersions</th>
-          <th>Compatible sample dispersions</th>
-        </tr>
-        <tr class="c-features__checklist">
-          <td>
-            {{ icon({ id: 'tick' }) }} Automated wet
-          </td>
-          <td>
-            {{ icon({ id: 'tick' }) }} Automated wet
-          </td>
-          <td class="u-grey-step-1">
-            {{ icon({ id: 'cross' }) }} Automated wet
-          </td>
-        </tr>
-        <tr class="c-features__checklist">
-          <td>
-            {{ icon({ id: 'tick' }) }} Automated dry powder
-          </td>
-          <td class="u-grey-step-1">
-            {{ icon({ id: 'cross' }) }} Automated dry powder
-          </td>
-          <td class="u-grey-step-1">
-            {{ icon({ id: 'cross' }) }} Automated dry powder
-          </td>
-        </tr>
-        <tr class="c-features__checklist">
-          <td>
-            {{ icon({ id: 'tick' }) }} Manual wet
-          </td>
-          <td>
-            {{ icon({ id: 'tick' }) }} Manual wet
-          </td>
-          <td>
-            {{ icon({ id: 'tick' }) }} Manual wet
-          </td>
-        </tr>
-        <tr class="c-features__checklist c-features__checklist--last">
-          <td class="u-grey-step-1">
-            {{ icon({ id: 'cross' }) }} Manual dry powder
-          </td>
-          <td>
-            {{ icon({ id: 'tick' }) }} Manual dry powder
-          </td>
-          <td>
-            {{ icon({ id: 'tick' }) }} <span>Manual dry powder</span>
-          </td>
-        </tr>
-        <tr class="c-features__text">
-          <td>
-            Advanced method development and comparison software
-          </td>
-          <td>
-            Advanced method development and comparison software
-          </td>
-          <td>
-            -
-          </td>
-        </tr>
-        <tr class="c-features__text">
-          <td>
-            Advanced data quality assessment and reporting software
-          </td>
-          <td>
-            Advanced data quality assessment and reporting software
-          </td>
-          <td>
-            -
-          </td>
-        </tr>
-        <tr class="c-features__text">
-          <td>
-            IQ/OQ validation
-          </td>
-          <td>
-            -
-          </td>
-          <td>
-            -
-          </td>
-        </tr>
-        <tr class="c-features__text">
-          <td>
-            21 CFR Part 11 support
-          </td>
-          <td>
-            -
-          </td>
-          <td>
-            -
-          </td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <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>
-  </div>
-</div>

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

@@ -1,96 +0,0 @@
-.c-features {
-  max-width: $wrapper;
-  @include step(-1);
-
-  &__wrapper {
-    overflow: auto;
-    width: 100%;
-  }
-  
-  &__wrapper .c-table {
-    width: 100%;
-    table-layout: fixed;
-
-    @media (min-width: 60em) {
-      min-width: $wrapper;
-    }
-  }
-
-  &__title {
-    @include step();
-  }
-
-  &__product {
-    padding-bottom: 0 !important;
-  }
-
-  &__introduction td {
-    color: color('green');
-    font-weight: weight('bold');
-    @include padding-top('2xs');
-  }
-
-  &__label-text td {
-    @include flow('3xs');
-
-    span {
-      display: block;
-    }
-  }
-
-  &__checklist-title th {
-    color: color('grey') !important;
-    background: transparent !important;
-    padding-bottom: 0 !important;
-  }
-
-  &__checklist {
-    td {
-      padding-top: var(--space-3xs) !important;
-      padding-bottom: 0 !important;
-      vertical-align: middle;
-      line-height: 20px;
-
-      svg {
-        height: 16px;
-        width: 16px;
-        vertical-align: middle;
-        display: inline-block;
-        margin-bottom: 2px;
-      }
-    }
-
-    &--last {
-      td {
-        padding-bottom: var(--space-s) !important;
-      }
-    }
-  }
-
-  &__mobile {
-    display: none;
-
-    & > * + * {
-      @include margin-top('m-l');
-    }
-
-    .c-table {
-      table-layout: fixed;
-    }
-  }
-
-  @media (max-width: 40em) {
-    &__mobile {
-      display: block;
-    }
-
-    &__wrapper {
-      display: none;
-    }
-  }
-
-  thead img {
-    @include space('max-height', '3xl');
-    object-fit: contain;
-  }
-}

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

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

package/src/_includes/components/filter-search/filter-search.config.js

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

package/src/_includes/components/filter-search/filter-search.njk

@@ -1,11 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-
-<div class="mp c-filter-search">
-  <label class="u-step-1 u-strong" for="event-keyword">Find the perfect event for you</label>
-  <div class="c-filter-search__fields">
-    <input class="c-input c-input--with-button" type="text" name="q" id="event-keyword" placeholder="Search by keyword" />
-    <button type="button" class="c-button--reset u-blue">
-      {{ icon({ id: 'search' }) }}
-    </button>
-  </div>
-</div>

package/src/_includes/components/filter-search/filter-search.scss

@@ -1,33 +0,0 @@
-.c-filter-search {
-  background: color('blue', 'step-2');
-  @include padding('m-l');
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  @include gap('s');
-
-  & > * {
-    flex-grow: 1;
-  }
-  
-  &__fields {
-    background-color: color('white');
-    display: flex;
-    max-width: 792px;
-    flex-grow: 8;
-
-    fieldset {
-      border: 0;
-      font-size: 0;
-    }
-
-    .c-icon {
-      font-size: 1.375rem;
-    }
-
-    @media only screen and (min-width: 30em) {
-      min-width: 360px;
-    }
-  }
-}

package/src/_includes/components/filter-search/macro.njk

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

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

@@ -1,7 +0,0 @@
-module.exports = {
-  title: 'Footer',
-  component: {
-    name: 'footer',
-  },
-  figma: 'https://www.figma.com/file/rUQ6aPQAfBX55o3hH0Lqb3/Design-exploration?node-id=66%3A9171'
-}

package/src/_includes/components/footer/footer.njk

@@ -1,81 +0,0 @@
-{% from "components/icon/macro.njk" import icon %}
-{% from "components/back-to-top/macro.njk" import backToTop %}
-
-<footer class="mp c-footer" role="contentinfo">
-  <nav class="c-footer__primary u-wrap" aria-label="Footer">
-    <ul class="c-footer__sections">
-      <li>
-        <h4 class="c-h c-h--step--1 c-footer__subtitle">Popular links</h4>
-        <ul>
-          <li><a href="">Mastersizer range</a></li>
-          <li><a href="">Zetasizer range</a></li>
-          <li><a href="">Particle size analyzers</a></li>
-          <li><a href="">Phase identification</a></li>
-          <li><a href="">X-ray diffraction (XRD)</a></li>
-          <li><a href="">X-ray fluorescence (XRF)</a></li>
-          <li><a href="">Zeta potential</a></li>
-        </ul>
-      </li>
-
-      <li>
-        <h4 class="c-h c-h--step--1 c-footer__subtitle">Support and services</h4>
-        <ul>
-          <li><a href="">Product support</a></li>
-          <li><a href="">Events and training</a></li>
-          <li><a href="">Knowledge center</a></li>
-          <li><a href="">Software downloads</a></li>
-          <li><a href="">Compliance services</a></li>
-          <li><a href="">Maintenance services</a></li>
-          <li><a href="">COVID-19 and beyond</a></li>
-        </ul>
-      </li>
-
-      <li>
-        <h4 class="c-h c-h--step--1 c-footer__subtitle">Company profile</h4>
-        <ul>
-          <li><a href="">About Malvern Panalytical</a></li>
-          <li><a href="">Careers</a></li>
-          <li><a href="">Brands</a></li>
-          <li><a href="">Anti-slavery and human trafficking statement</a></li>
-          <li><a href="">Code of business ethics</a></li>
-          <li><a href="">Press releases</a></li>
-        </ul>
-      </li>
-
-      <li>
-        <h4 class="c-h c-h--step--1 c-footer__subtitle">Legal information</h4>
-        <ul>
-          <li><a href="">Website disclaimer</a></li>
-          <li><a href="">Terms of sale and service</a></li>
-          <li><a href="">Cookie notice</a></li>
-          <li><a href="">Third-party privacy notice</a></li>
-          <li><a href="">Trademarks</a></li>
-        </ul>
-      </li>
-    </ul>
-    <div class="c-footer__identity">
-      <a href="/prototype" class="c-footer__logo"><img src="/static/svg/logo.svg" alt="Home" width="162" /></a>
-        <ul class="c-footer__social">
-          <li><a href="" aria-label="Facebook">{{ icon({ id: 'facebook' }) }}</a></li>
-          <li><a href="" aria-label="Twitter">{{ icon({ id: 'twitter' }) }}</a></li>
-          <li><a href="/prototype/blog-post" aria-label="Blog">{{ icon({ id: 'rss' }) }}</a></li>
-          <li><a href="" aria-label="Instagram">{{ icon({ id: 'instagram' }) }}</a></li>
-          <li><a href="" aria-label="LinkedIn">{{ icon({ id: 'linkedin' }) }}</a></li>
-          <li><a href="" aria-label="YouTube">{{ icon({ id: 'youtube' }) }}</a></li>
-        </ul>
-    </div>
-  </nav>
-  <div class="c-footer__secondary">
-    <div class="u-wrap">
-      <ul class="c-footer__h-links">
-        <li><a href="">Website feedback</a></li>
-        <li><a href="">Site map</a></li>
-        <li><a href="">Cookie settings</a></li>
-      </ul>
-
-      <span>&copy; Copyright 2021. Malvern Panalytical Ltd is a <a href="https://www.spectris.com/">Spectris</a> company</span>
-    </div>
-  </div>
-</footer>
-
-{{ backToTop({}) }}