mp-design-system 1.2.61 → 1.2.63

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

@@ -0,0 +1,49 @@
+// Extend the basic card scss
+@import '../card-new/card-new.scss';
+
+.c-card-new--event {
+
+    // Colour themes
+    &.c-card-new--dark {
+        .c-card__day {
+            color: color('white');
+        }
+        .c-card__specs {
+            color: color('petrol', 'step-2');
+        }
+    }
+    &.c-card-new--alt {
+        .c-card__specs {
+            color: color('petrol', 'step-1');
+        }
+    }
+
+    .c-card__meta {
+        line-height: lh('prose');
+    }
+
+    &:not(.c-card-new--small) .c-card__datetime {
+        @container card (width > #{$card-s}) {
+            .c-card__day {
+                font-size: var(--step-4);
+            }
+            .c-card__month {
+                font-size: var(--step-2);
+            }
+        }
+        @container card (width > #{$card-m}) {
+            .c-card__day {
+                font-size: var(--step-5);
+            }
+            .c-card__month {
+                font-size: var(--step-3);
+            }
+        }
+    }
+
+    @container card (width < #{$card-s}) {
+        .c-card__specs {
+            display: none;
+        }
+    }
+}

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

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

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

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

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

@@ -0,0 +1,84 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'NEW Product card',
+  component: {
+      name: 'product-card',
+  },
+  category: categories.card,
+  context: {
+    type: 'product',
+    theme: 'bordered',
+    size: 'medium',
+    header: {
+      title: 'Product card medium',
+      subtitle: 'Lorem ipsum dolor sit amet'
+    },
+    body: {
+      content: `<p>Nam duis leo phasellus quisque ac a volutpat euismod ultrices condimentum sociosqu et natoque volutpat eros.</p>`
+    },
+    footer: {
+      buttons: [
+        {
+          link: '#',
+          label: 'View product'
+        },
+        {
+          link: '#',
+          label: 'Request a quote',
+          colour: 'outline-green'
+        }
+      ]
+    },
+    image: {
+      src: '/static/img/aeris.jpg',
+      alt: 'Alt text'
+    }
+  },
+  variants: [
+    {
+      title: 'With features list',
+      context: {
+        list: [
+          {
+            label: 'Classic 90° DLS',
+            icon: 'cross',
+            classes: 'c-twi--grey'
+          },
+          {
+            label: 'Dynamic light scattering',
+            icon: 'tick',
+            classes: 'c-twi--green'
+          },
+          {
+            label: 'Static light scattering',
+            icon: 'tick',
+            classes: 'c-twi--green'
+          },
+          {
+            label: 'Non-invasive back scatter DLS',
+            icon: 'tick',
+            classes: 'c-twi--green'
+          },
+          {
+            label: 'Multi-angle dynamic light scattering',
+            icon: 'cross',
+            classes: 'c-twi--grey'
+          }
+        ],
+      }
+    },
+    {
+      title: 'Small',
+      context: {
+        size: 'small',
+        url: '#',
+        footer: false,
+        header: {
+          title: 'Product card small',
+          subtitle: 'Lorem ipsum dolor sit amet'
+        },
+      },
+    },
+  ]
+}

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

@@ -0,0 +1 @@
+{% extends "components/card-new/card-new.njk" %}

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

@@ -0,0 +1,36 @@
+// Extend the basic card scss
+@import '../card-new/card-new.scss';
+
+// Complex CSS to make images work in both portrait and landscape
+// Separate it out into a li'l mixin
+@mixin productCardImage($size: 's-m') {
+    @include space('top', $size);
+    @include space('left', $size);
+    position: absolute;
+    // height: 100%;
+    height: calc(100% - (var(--space-#{$size}) *2) );
+    // width: 100%;
+    width: calc(100% - var(--space-#{$size}));
+}
+
+.c-card-new--product {
+    .c-card-new__image {
+        img {
+            margin-inline: auto;
+            object-fit: contain;
+            object-position: top center;
+        }
+
+        @container card (width > #{$card-m}) {
+            flex-basis: 50%;
+            
+            img {
+                @include productCardImage('s-m');
+
+                .c-card-new--small & {
+                    @include productCardImage('xs')
+                }
+            }
+        }
+    }
+}

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

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

package/src/_includes/components/resource-card/resource-card.config.js

@@ -0,0 +1,59 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'NEW Resource card',
+  component: {
+      name: 'resource-card',
+  },
+  category: categories.card,
+  context: {
+    type: 'resource',
+    theme: 'bordered',
+    size: 'medium',
+    tag: 'Whitepaper',
+    header: {
+      title: 'Accelerating the deformation workflow for oral solid dosage forms',
+      date: {
+        date: new Date(2015,0,12)
+      },
+      language: 'English'
+    },
+    body: {
+      content: `<p>This whitepaper on Oral Solid Dose (OSD) deformulation demonstrates how the analytical technique of Morphologically Directed Raman Spectroscopy (MDRS) can be used to accelerate the development of generic products to a successful conclusion.</p>`
+    },
+    body: {
+      keySpecs: [
+        {
+          title: 'Products',
+          term: 'Epsilon 4'
+        },
+        {
+          title: 'Technology',
+          term: 'X-ray fluorescence (XRF)'
+        },
+        {
+          title: 'Industry',
+          term: 'Metals, Advanced manufacturing'
+        },
+      ]
+    },
+    link: {
+      url: '#',
+      label: 'Read the whitepaper'
+    }
+  },
+  variants: [
+    {
+      title: 'Small',
+      context: {
+        size: 'small',
+        url: '#',
+        footer: false,
+        specs: false,
+        link: {
+          label: false
+        }
+      },
+    },
+  ]
+}

package/src/_includes/components/resource-card/resource-card.njk

@@ -0,0 +1 @@
+{% extends "components/card-new/card-new.njk" %}

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

@@ -28,3 +28,17 @@
     @include step(-1);
   }
 }
+
+.c-twi--grey {
+  color: color('grey', 'step-1');
+
+  svg {
+    color: color('grey', 'step-2');
+  }
+}
+
+.c-twi--green {
+  svg {
+    color: color('green');
+  }
+}

package/src/_includes/includes/system-scripts.njk

@@ -71,5 +71,18 @@
           iframe.classList.toggle('u-pad-s');
         }
       }
+
+      // Show iframe width
+      const iframeWrap = document.getElementById('iframe-wrap');
+      function reportIframeWidth(entry){
+        const width = (entry.contentBoxSize) ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width;
+        iframeWrap.style.setProperty('--width',width);
+      };
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          reportIframeWidth(entry);
+        }
+      });
+      resizeObserver.observe(iframeWrap);
     })();
   </script>

package/src/_includes/layout.njk

@@ -1,4 +1,4 @@
-{%- set fullTitle = (renderData.title or title) + " | " + config.name + " | " + config.creator -%}
+{%- set fullTitle = title + " | " + config.name + " | " + config.creator -%}
 <!DOCTYPE html>
 <html lang="en" class="no-js">
   <head>

package/src/_includes/system-home-page.njk

@@ -10,7 +10,7 @@ index: true
 {% block content %}
   <div class="u-pad-bottom-xl">
     {{ hero({
-      title: renderData.title or title,
+      title: title,
       subtitle: subtitle,
       cover: true,
       gradient: true,

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

@@ -11,8 +11,10 @@
 @import '~comp/card/product-card.scss';
 @import '~comp/card/search-result-card.scss';
 @import '~comp/card/technology-card.scss';
+@import '~comp/card-new/card-new.scss';
 @import '~comp/comparison-table/comparison-table.scss';
 @import '~comp/embed/embed.scss';
+@import '~comp/event-card/event-card.scss';
 @import '~comp/eyebrow/eyebrow.scss';
 @import '~comp/facet/facet.scss';
 @import '~comp/featured-article-card/featured-article-card.scss';
@@ -32,6 +34,7 @@
 @import '~comp/off-canvas/off-canvas.scss';
 @import '~comp/option-list/option-list.scss';
 @import '~comp/post-meta/post-meta.scss';
+@import '~comp/product-card/product-card.scss';
 @import '~comp/product-signpost/product-signpost.scss';
 @import '~comp/quote/quote.scss';
 @import '~comp/scroll-spy/scroll-spy.scss';