mp-design-system 1.2.4 → 1.2.5

package/package.json

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

package/src/_includes/components/{industry-card → card}/industry-card.config.js

@@ -5,6 +5,7 @@ module.exports = {
   category: categories.card,
   component: {
     name: 'industry-card',
+    folder: 'card'
   },
   preview: 'cards-three',
   context: {

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

@@ -3,3 +3,11 @@
 {% macro card(params) %}
   {{ c({ name: 'card' }, params) }}
 {% endmacro %}
+
+{% macro industryCard(params) %}
+  {{ c({ name: 'industry-card', folder: 'card' }, params) }}
+{% endmacro %}
+
+{% macro productComparisonCard(params) %}
+  {{ c({ name: 'product-comparison-card', folder: 'card' }, params) }}
+{% endmacro %}

package/src/_includes/components/card/product-comparison-card.config.js

@@ -0,0 +1,90 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Product comparison card',
+  category: categories.card,
+  component: {
+    name: 'product-comparison-card',
+    folder: 'card'
+  },
+  preview: 'cards-three',
+  context: {
+    title: 'Zetasizer Pro',
+    description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
+    image: {
+      src: '/static/img/range-product-1.jpg',
+      alt: ''
+    },
+    features: [
+      {
+        icon: 'cross',
+        label: 'Classic 90° DLS'
+      },
+      {
+        icon: 'tick',
+        label: 'Dynamic light scattering'
+      },
+      {
+        icon: 'tick',
+        label: 'Static light scattering'
+      },
+      {
+        icon: 'tick',
+        label: 'Non-Invasive Back Scatter DLS'
+      },
+      {
+        icon: 'cross',
+        label: 'Multi-Angle Dynamic Light Scattering'
+      }
+    ],
+    footer: {
+      buttons: [
+        {
+          link: '#',
+          label: 'More details'
+        },
+        {
+          link: '#',
+          label: 'Request a quote'
+        }
+      ]
+    }
+  },
+  variants: [
+    {
+      title: 'Without features list',
+      preview: 'cards-three',
+      context: {
+        title: 'Zetasizer Pro',
+        description: 'The Zetasizer Pro is your go-to instrument to measure a wide range of sample types and concentrations.',
+        image: {
+          src: '/static/img/range-product-1.jpg',
+          alt: ''
+        },
+        features: [
+        ],
+        footer: {
+          buttons: [
+            {
+              link: '#',
+              label: 'More details'
+            },
+            {
+              link: '#',
+              label: 'Request a quote'
+            }
+          ]
+        }
+      },
+    }
+  ],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['link', 'string'],
+        ['image', 'object', 'Image object']
+      ]
+    }
+  ]
+}

package/src/_includes/components/card/product-comparison-card.njk

@@ -0,0 +1,37 @@
+{%- from "components/button/macro.njk" import button -%}
+{%- from "components/twi/macro.njk" import twi -%}
+
+<article class="mp c-product-comparison-card" role="article" aria-label="Product card">
+  <div class="c-product-comparison-card__body">
+    <h3 class="c-product-comparison-card__heading">{{ params.title }}</h3>
+    <p>{{ params.description }}</p>
+    {% if params.features | length %}
+      <p class="c-product-comparison-card__features-list-heading">Features include</p>
+      <ul class="c-product-comparison-card__features-list">
+        {% for feature in params.features %}
+          <li class="c-product-comparison-card__feature--{{ feature.icon }}">
+            {{ twi({
+              label: feature.label,
+              icon: feature.icon
+            }) }}
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    <footer class="c-product-comparison-card__footer">
+      {% if params.footer.buttons | length %}
+        {% for item in params.footer.buttons %}
+          {{ button({
+            link: item.link,
+            label: item.label,
+            colour: 'outline-green' if loop.index0 == 0 else 'green'
+          }) }}
+        {% endfor %}
+      {% endif %}
+    </footer>
+  </div>
+  <figure class="c-product-comparison-card__image">
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+  </figure>
+</article>
+

package/src/_includes/components/card/product-comparison-card.scss

@@ -0,0 +1,74 @@
+.c-product-comparison-card {
+  @extend .u-flow--2xs;
+  display: flex;
+  flex-flow: column;
+  border: 1px solid color('petrol', 'step-2');
+    
+  & > * + * {
+    @include margin-top('2xs');
+  }
+
+  &__body {
+    @include padding('s-m');
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    
+    & > * + * {
+      @include margin-top('xs');
+    }
+  }
+
+  &__heading {
+    @extend .c-h;
+    @extend .c-h--step-1;
+  }
+
+  &__features-list {
+    @include margin-top('2xs');
+    list-style: none;
+
+    &-heading {
+      @include margin-top('s');
+      font-weight: weight("bold");
+    }
+
+    & > * + * {
+      @include margin-top('3xs');
+    }
+  }
+
+  &__feature {
+
+    &--tick {
+      svg {
+        color: color('green');
+      }
+    }
+
+    &--cross {
+      color: color('grey', 'step-2');
+    }
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding-top('s');
+    
+    & > * + * {
+      @include margin-top('2xs');
+    }
+  }
+
+  &__image {
+    height: 10em;
+    order: -1;
+    aspect-ratio: 16/9;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+}

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

@@ -1,29 +1,25 @@
 {% from "components/component/component.njk" import c %}
 
-{% macro combobox(params, type = 'combobox') %}
-  {{ c({ name: 'combobox', folder: 'input' }, params) }}
+{% macro input(params) %}
+  {{ c({ name: 'input' }, params) }}
 {% endmacro %}
 
-{% macro checkbox(params, type = 'checkbox') %}
-  {{ c({ name: 'checkbox', folder: 'input' }, params) }}
+{% macro select(params) %}
+  {{ c({ name: 'select', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro input(params) %}
-  {{ c({ name: 'input' }, params) }}
+{% macro textarea(params) %}
+  {{ c({ name: 'textarea', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro radio(params) %}
-  {{ c({ name: 'radio', folder: 'input' }, params) }}
+{% macro checkbox(params, type = 'checkbox') %}
+  {{ c({ name: 'checkbox', folder: 'input' }, params) }}
 {% endmacro %}
 
-{% macro select(params) %}
-  {{ c({ name: 'select', folder: 'input' }, params) }}
+{% macro radio(params) %}
+  {{ c({ name: 'radio', folder: 'input' }, params) }}
 {% endmacro %}
 
 {% macro toggle(params, type='toggle') %}
   {{ c({ name: 'toggle', folder: 'input' }, params) }}
 {% endmacro %}
-
-{% macro textarea(params) %}
-  {{ c({ name: 'textarea', folder: 'input' }, params) }}
-{% endmacro %}

package/src/_includes/components/twi/twi.scss

@@ -8,7 +8,7 @@
 
   &:hover,
   &:focus {
-    text-decoration: underline;
+    text-decoration: inherit;
   }
 
   svg {

package/src/assets/js/app.js

@@ -1,7 +1,6 @@
 import Accordion from './imports/accordion';
 import Carousel from './imports/carousel';
 import ClearForm from './imports/clear-form';
-import Combobox from './imports/combobox';
 import Comparison from './imports/comparison';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
@@ -23,7 +22,6 @@ import Tabs from './imports/tabs';
   Accordion();
   Carousel();
   ClearForm();
-  Combobox();
   Comparison();
   Gallery();
   HeroPattern();

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

@@ -4,6 +4,8 @@
 @import '~comp/button/button.scss';
 @import '~comp/campaign/campaign.scss';
 @import '~comp/card/card.scss';
+@import '~comp/card/industry-card.scss';
+@import '~comp/card/product-comparison-card.scss';
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
@@ -14,7 +16,6 @@
 @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/input/toggle.scss';

package/src/prototype/index.njk

@@ -7,7 +7,7 @@ tags: prototype
 {% from "components/prose/macro.njk" import prose %}
 {% from "components/signpost/macro.njk" import signpost %}
 {% from "components/button/macro.njk" import button %}
-{% from "components/industry-card/macro.njk" import industryCard %}
+{% from "components/card/macro.njk" import industryCard %}
 {% from "components/campaign/macro.njk" import campaign %}
 {% from "components/card/macro.njk" import card %}
 {% from "components/option-list/macro.njk" import optionList %}

package/src/prototype/sections.njk

@@ -15,7 +15,7 @@ tagTitle: Industry
 {% from "components/card/macro.njk" import card %}
 {% from "components/hero/macro.njk" import hero %}
 {% from "components/prose/macro.njk" import prose, markdown %}
-{% from "components/industry-card/macro.njk" import industryCard %}
+{% from "components/card/macro.njk" import industryCard %}
 {% from "components/accordion/macro.njk" import accordion %}
 
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}

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

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