mp-design-system 1.2.64 → 1.2.65

package/src/_includes/components/card-new/card-new.scss

@@ -1,156 +0,0 @@
-// 'Breakpoints' for cards - 
-// Basically 'S' is usually portrait, and 'M' is usually landscape
-// This system can be replaced by style queries, when that has
-// better browser support
-$card-s: 25ch;
-$card-m: 45ch;
-$card-l: 70em;
-
-.c-card-new {
-    background-color: color('white');
-    container-name: card;
-    container-type: inline-size;
-    display: flex;
-    @include step(-1);
-    position: relative;
-}
-
-.c-card-new__inner {
-    display: flex;
-    flex-direction: column-reverse;
-    flex-grow: 1;
-    position: relative;
-    --layout: single;
-
-    @container card (width > #{$card-m}) {
-        --layout: multi;
-        flex-direction: row;
-        .c-card-new--product &,
-        .c-card-new--switch & {
-            flex-direction: row-reverse;
-        }
-    }
-
-    & > * {
-        flex: 1;
-    }
-    
-    // Color themes
-    .c-card-new--bordered & {
-        border: 1px solid color("petrol", "step-2");
-    }
-    
-    .c-card-new--alt & {
-        background-color: color('petrol','step-3');
-    }
-    
-    .c-card-new--dark & {
-        background-color: color('petrol');
-        color: color('white');
-
-        .c-card__datetime,
-        .c-card__meta {
-            color: color('petrol', 'step-2');
-        }
-    }
-    
-    .c-card-new--shadowed & {
-        @include space('--shadow-r', 'xs');
-        @include space('--shadow-b', 's');
-        box-shadow: 0 var(--shadow-r) var(--shadow-b) 0 rgba(color('grey'), 20%);
-    }
-}
-
-.c-card-new__header {
-    @include flow('xs');
-}
-
-:not(.c-card-new--resource).c-card-new--small .c-card__meta {
-    @container card (width < #{$card-m}) {
-        display: none;
-    }
-}
-
-.c-card-new__body {
-    @include flow('s');
-    @include padding('s-m');
-
-    display: flex;
-    flex-direction: column;
-
-    @container card (width > #{$card-m}) {
-        min-width: 30ch;
-    }
-
-    @container card (width > #{$card-l}) {
-        @include padding('m-l');
-    }
-    
-    .c-card-new--small & {
-        @include padding('xs');
-    }
-}
-
-.c-card-new__title {
-    @include step(0);
-
-    @container card (width > #{$card-m}) {
-        .c-card-new:not(.c-card-new--small) & {
-            @include step(3);
-        }
-    }
-}
-
-.c-card-new__image {
-    flex-grow: 0;
-    position: relative;
-
-    @container card (width > #{$card-m}) {
-        flex-basis: 33%;
-    }
-    
-    .c-card-new:not(.c-card-new--small) & {
-        @container (width > #{$card-l}) {
-            flex-basis: 61%;
-        }
-    }
-
-    img {
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-        position: absolute;
-        width: 100%;
-        
-        @container card (width < #{$card-m}) {
-            aspect-ratio: 2;
-            position: static !important;
-            // @include padding('s-m');
-            // padding-bottom: 0;
-        }
-
-        .c-card-new--small:not(.c-card-new--product) & {
-            @container card (width < #{$card-m}) {
-                aspect-ratio: 3;
-            }
-        }
-    }
-
-}
-
-.c-card-new__footer {
-    .o-grid & {
-        margin-top: auto;
-        @include padding-top('s');
-    }
-}
-
-.c-card-new .c-button {
-    @container card (width > #{$card-s}) {
-        white-space: nowrap;
-    }
-
-    @container card (width < #{$card-m}) {
-        flex: 1;
-    }
-}

package/src/_includes/components/card-new/macro.njk

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

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

@@ -1,92 +0,0 @@
-const products = [
-  {
-    title: 'Mastersizer 3000',
-    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: '#',
-        label: 'Request a quote'
-      }
-    ],
-    sections: [
-      ['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',
-    image: {
-      src: '/static/img/range-product-2.jpg',
-      alt: 'Mastersizer 3000E'
-    },
-    description: 'Entry level particle size analyzer',
-    buttons: [
-      {
-        link: '#',
-        label: 'More details'
-      },
-      {
-        link: '#',
-        label: 'Request a quote'
-      }
-    ],
-    sections: [
-      ['Laser diffraction', '0.1µm - 1000µm'],
-      [false, false, true, true],
-      [true, false, false, false, false],
-      ['-', '-']
-    ]
-  }
-]
-
-module.exports = {
-  title: 'Comparison table',
-  component: {
-    name: 'comparison-table',
-  },
-  context: {
-    sections: [
-      {
-        title: 'Technology',
-        rows: ['Technology', 'Particle size range']
-      },
-      {
-        title: 'Dispersion type',
-        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
-    ]
-  },
-  variants: [
-    {
-      title: 'Many products',
-      context: {
-        products: [
-          ...products,
-          ...products,
-          ...products,
-        ]
-      }
-    }
-  ]
-}

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

@@ -1,76 +0,0 @@
-{% from "components/button/macro.njk" import button %}
-{% from "components/icon/macro.njk" import icon %}
-
-<section id="product-comparison-table" class="mp u-bg-grey-step-3 u-pad-y-xl" style="scroll-margin-top:70px">
-  <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>
-              <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>
-              </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>
-      </thead>
-      <tbody>
-        {% for section in params.sections %}
-          {% if section.title != null %}
-            <tr class="c-comparison-table__title">
-              <th>
-                <span>{{ section.title }}</span>
-              </th>
-              <th colspan="{{ params.products | length }}"></th>
-            </tr>
-          {% endif %}
-
-          {% set sectionId = loop.index0 %}
-          {% for row in section.rows %}
-            {% set rowId = loop.index0 %}
-            <tr>
-              <td>{{ row }}</td>
-              {% for product in params.products %}
-                {%- set value = product.sections[sectionId][rowId] -%}
-                <td>
-                  {% if value == true %}
-                    {{ icon({ id: 'tick' }) }}
-                  {% elseif value == false %}
-                    {{ icon({ id: 'cross' }) }}
-                  {% else %}
-                    {{ value }}
-                  {% endif %}
-                </td>
-              {% endfor %}
-            </tr>
-          {% endfor %}
-        {% endfor %}
-
-      </tbody>
-    </table>
-  </div>
-</section>

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

@@ -1,187 +0,0 @@
-.c-comparison-table__desktop {
-  overflow: auto;
-  width: 100%;
-
-  .c-comparison-table {
-    width: calc(100% - 1px);
-
-    @media (min-width: 60em) {
-      tbody > tr > :first-child {
-        min-width: 300px;
-      }
-    }
-  }
-}
-
-.c-comparison-table__mobile {
-  display: none;
-
-  & > * + * {
-    @include margin-top('m-l');
-  }
-
-  .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;
-
-    & * + * {
-      @include margin-top('2xs');
-    }
-  }
-
-  &__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;
-        }
-      }
-    }
-  }
-
-  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');
-        }
-      }
-    }
-  }
-
-  @media (max-width: 40em) {
-    &__mobile {
-      display: block;
-    }
-
-    &__desktop {
-      display: none;
-    }
-  }
-}
-
-@media only screen and (min-width: 640px) {
-  .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-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-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-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-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-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/_includes/components/comparison-table/macro.njk

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

package/src/_includes/components/component/categories.js

@@ -1,5 +0,0 @@
-module.exports = {
-  component: 'Components',
-  card: 'Cards',
-  form: 'Forms'
-}

package/src/_includes/components/component/component.njk

@@ -1,71 +0,0 @@
-{% from "components/table/macro.njk" import tableRow %}
-
-{% macro c(comp, params) %}
-  {%- set root = comp.root if comp.root else '../' -%}
-  {%- set folder = (comp.folder + '/') if comp.folder else comp.name + '/' -%}
-  {%- set path = root + folder + comp.name + '.njk' -%}
-
-  {% include path %}
-{% endmacro %}
-
-{% macro code(comp, params) %}
-  {%- set root = comp.root if comp.root else '../' -%}
-  {%- set folder = (comp.folder + '/') if comp.folder else comp.name + '/' -%}
-  {%- set path = root + folder + comp.name + '.njk' -%}
-
-  {%- set html -%}{% highlight "html" %}{%- prettify -%}{%- include path -%}{%- endprettify -%}{% endhighlight %}{%- endset -%}
-  <article class="c-library-copy">
-    <div class="c-library-copy__clipboard">
-      {{ html | safe }}
-    </div>
-    <button type="button" class="c-button--reset c-h c-h--upper c-library-copy__trigger">Copy</button>
-  </article>
-{% endmacro %}
-
-{% macro context(context) %}
-  <article class="c-library-copy">
-    <div class="c-library-copy__clipboard">
-      {% highlight "json" %}{{ context | console | safe }}{% endhighlight %}
-    </div>
-    <button type="button" class="c-button--reset c-h c-h--upper c-library-copy__trigger">Copy</button>
-  </article>
-{% endmacro %}
-
-{% macro docs(comp) %}
-  {%- set root = comp.root if comp.root else '../' -%}
-  {%- set folder = (comp.folder + '/') if comp.folder else comp.name + '/' -%}
-  {%- set path = root + folder + comp.name + '.md' -%}
-  
-  {% markdown %}
-    {%- include path ignore missing -%}
-  {% endmarkdown %}
-{% endmacro %}
-
-{% macro props(propRows) %} 
-  <table class="c-table c-table--wide c-library-code">
-    <thead>
-      <tr>
-        <th>Name</th>
-        {% if propRows[0][1] %}<th>Type</th>{% endif %}
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for row in propRows %}
-        <tr>
-          <th>{{ row[0] }}</th>
-          {% if row[1] %}<td>{{ row[1] }}</td>{% endif %}
-          <td>{{ row[2] | safe }}</td>
-        </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-{% endmacro %}
-
-{% macro libraryList(label, link, currentPage = '') %}
-  <li>{{ libraryLink(label, link, currentPage) }}</li>
-{% endmacro %}
-
-{% macro libraryLink(label, link, currentPage = '') %}
-  <a href="{{ link }}" id="lib-{{ label | slug }}" class="{{ 'c-library-menu-active' if link == currentPage }}">{{ label }}</a>
-{% endmacro %}