mp-design-system 1.2.3 → 1.2.5

package/package.json

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

package/src/_headers

@@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' polyfill.io; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: p3.aprimocdn.net; font-src 'self' fonts.gstatic.com; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; sandbox allow-forms allow-same-origin allow-scripts;
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' polyfill.io; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: p3.aprimocdn.net img.youtube.com; font-src 'self' fonts.gstatic.com; frame-src 'self' brand.malvernpanalytical.com www.youtube.com; frame-ancestors 'self' brand.malvernpanalytical.com; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; sandbox allow-forms allow-same-origin allow-scripts;
   X-Content-Type-Options: nosniff
   X-Frame-Options: SAMEORIGIN
   X-XSS-Protection: 1; mode=block

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

@@ -3,6 +3,7 @@ module.exports = {
     component: {
         name: 'accordion'
     },
+    figma: 'https://www.figma.com/file/szD8e7jNeWIfKpt6y41isi/Franklin-design-system?type=design&node-id=6879%3A3616&mode=design&t=vh7UGUcY3zjfbgUR-1',
     docs: true,
     context: {
         items: [

package/src/_includes/components/accordion/accordion.md

@@ -1,3 +1,5 @@
+- To make an item display in its opened state when the page loads, add the class `c-accordion--item__open`
+- The classnames `o-prose` and `u-flow--prose` on the content are optional
 ## Blank HTML template
 ```html
 <dl class="c-accordion">
@@ -10,6 +12,4 @@
         <dd class="c-accordion__content o-prose u-flow--prose">Content two</dd>
     </div>
 </dl>
-```
-- To make an item display in its opened state when the page loads, add the class `c-accordion--item__open`
-- The classnames `o-prose` and `u-flow--prose` on the content are optional
+```

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/_includes/system-home-page.njk

@@ -19,7 +19,7 @@ index: true
       classes: 'c-library__hero'
     }) }}
 
-    <div class="u-wrap u-flow--l">
+    <div class="u-wrap u-flow--l u-pad-right-xl">
       {{ content | safe }}
     </div>
   </div>

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/js/imports/gallery.js

@@ -38,6 +38,17 @@ function Gallery() {
         if(slideImg.srcset != '') {
           slideImg.removeAttribute('srcset');
         }
+        var slideImgSrc = slideImg.getAttribute('src');
+        if (slideImgSrc) {
+          if (slideImgSrc.indexOf('?') !== -1) {
+            slideImg.setAttribute('src', slideImgSrc.split("?")[0] + '?quality=90&width=2176');
+          } else {
+            slideImg.setAttribute('src', slideImgSrc + '?quality=90&width=2176');
+          }
+        } else {
+          console.log(slideImg);
+          console.log('has no src defined...');
+        }
       }
       slide.classList.add('c-lightbox__slide');
       slide.classList.remove('c-gallery__slide');

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/brand/resources.njk

@@ -10,7 +10,7 @@ tags: brand
 {% from "components/twi/macro.njk" import twi %}
 
 {% set content %}
-## UI design kit
+## Figma
 
 Franklin is available as a UI design kit in Figma. It contains text and color styles, grids and spacing, icons, and a complete library of components.
 

package/src/index.njk

@@ -11,7 +11,7 @@ renderData:
 {% from "components/card/macro.njk" import card %}
 {% from "components/usp/macro.njk" import usp %}
 
-<div class="o-grid o-grid--of-four u-pad-right-xl">
+<div class="o-grid o-grid--of-four">
   {{ card({
     theme: {
       layout: 'single',
@@ -94,6 +94,7 @@ renderData:
 </div>
 
 {% set content %}
+
 ## What is Franklin?
 
 Franklin is Malvern Panalytical's **design system** for web-based marketing materials.
@@ -103,6 +104,28 @@ Franklin is Malvern Panalytical's **design system** for web-based marketing mate
 A set of brand guidelines and a library of HTML/CSS/JS components. Using this system is the quickest and easiest way to ensure your website or web-app is on brand.
 
 The [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook) by InVision is a great (free) way to learn more about design systems.
+
+## Are there other design systems in use?
+
+There are two other design systems in use at Malvern Panalytical.
+
+- [Sencillo](https://confluence.systems.mp/pages/viewpage.action?spaceKey=FA&title=MP+Sencillo+-+Design+System) (pronounced *sehn-see-yoh*) is a design system used in Smart Manager, Agrilytics, and other web-based customer-facing software applications.
+- [Malvern Panalytical User Interface Guidelines](https://malvern.sharepoint.com/sites/o365-sw-ebl/SitePages/User%20Interface%20Guidelines/Malvern-Panalytical-User-Interface-Guidelines.aspx) (also known as the XBL) is the Design System that is used in our desktop software, including the new OmniTrust. At the time of writing, it hasn't been rolled out to all platforms but it should be the go to Design System for any new software that we create for our products. It is also backed up with a reusable framework that provides the styles and controls within a fixed layout base application.
+
+## Where does Franklin come in?
+
+<div class="ds-table c-table c-table--responsive">
+
+| Design system | [MP User Interface Guidelines (XBL)](https://malvern.sharepoint.com/sites/o365-sw-ebl/SitePages/User%20Interface%20Guidelines/Malvern-Panalytical-User-Interface-Guidelines.aspx) | [MP Sencillo](https://confluence.systems.mp/pages/viewpage.action?spaceKey=FA&title=MP+Sencillo+-+Design+System) | Franklin |
+|---------------|------------------------------------|-------------|----------|
+| Target | Desktop and tablet based software for our products | Web-based apps that are part of the Smart Manager platform | Commercial websites |
+| Goal | A common look and feel with a consistent user experience across all of our product software | Bridge the gap between our desktop software and our web sites, providing a familiar and branded experience | A common look and feel with a consistent user experience across all of our web sites |
+| Framework technologies | .NET C# and WPF/Xaml | .NET Blazor (C#), CSS and HTML | CSS, HTML and JavaScript |
+| Devices | Desktops and tablets | Desktops, tablets and mobiles | Desktops, tablets and mobiles |
+| Target Content Type | Fast changing, short textual elements, data visualisations and high user interactivity | Frequently changing, short textual elements, data visualisations and medium user interactivity | Infrequently changing, blocks of copy, marketing/product photos and low user interactivity |
+
+</div>
+
 {% endset %}
 
 {% set latest %}
@@ -115,12 +138,37 @@ The [Design Systems Handbook](https://www.designbetter.co/design-systems-handboo
 - Misc. fixes
 {% endset %}
 
+<div class="o-grid o-grid--layout o-grid--8/4">
+
 {{ markdown({
   content: content
 }) }}
 
-<div class="c-slat c-slat--crystal u-bg-blue-step-3 u-pad-x-l">
+<div><div class="c-slat c-slat--crystal u-bg-blue-step-3 u-pad-x-l">
   {{ markdown({
     content: latest
   }) }}
-</div>
+</div></div>
+
+</div>
+
+<style>
+  .ds-table {
+    border-left: 1px solid #ebf1f2;
+  }  
+  .ds-table table th:nth-child(1),
+  .ds-table table td:nth-child(1) {
+    background-color: #fff;
+    border-color: #ebf1f2;
+    color: #333;
+  }
+  .ds-table table th:nth-child(2) {
+    background-color: #00a2c2;
+  }
+  .ds-table table th:nth-child(3) {
+    background-color: #005461;
+  }
+  .ds-table table th:nth-child(4) {
+    background-color: #003039;
+  }
+</style>

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 %}