mp-design-system 0.9.28 → 1.0.0

package/package.json

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

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

@@ -737,7 +737,45 @@ module.exports = {
       }
     },
     {
-      title: 'Event card (with image)',
+      title: 'In-person event card',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true,
+          corner: true,
+        },
+        header: {      
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            time: '11:00 – 12:00',
+            timezone: 'EST'
+          },
+          meta: [
+            'English'
+          ],
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ]
+        },
+        link: '#'
+      }
+    },
+    {
+      title: 'In-person event card with image',
       preview: 'content-width',
       context: {
         theme: {
@@ -778,9 +816,113 @@ module.exports = {
         link: '#'
       }
     },
+    {
+      title: 'On-demand event card',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true
+        },
+        header: {
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            duration: '36:01'
+          },
+          meta: [
+            'English'
+          ]
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ],
+        },
+        tag: 'Recorded webinar'
+      }
+    },
+    {
+      title: 'On-demand event card with image',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true
+        },
+        image: {
+          src: '/static/img/blog-page-image-1.jpg',
+          alt: 'Product image alt'
+        },
+        header: {
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            duration: '36:01'
+          },
+          meta: [
+            'English'
+          ]
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ],
+        },
+        tag: 'Recorded webinar'
+      }
+    },
     {
       title: 'Event series card',
       preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          layout: 'single',
+          name: 'event-series',
+          inlineSpecs: false,
+          corner: false,
+        },
+        header: {      
+          title: 'Part 1 - The theory of X-Ray Fluorescence (XRF)',
+          date: {
+            date: (new Date()).toLocaleString('default', { month: 'short', year: 'numeric' }),
+            formatted: true,
+          },
+        },
+        footer: {
+          cta: {
+            link: '#',
+            label: 'Watch now',
+            icon: 'play',
+          }
+        },
+        link: '#'
+      }
+    },
+    {
+      title: 'Event series card with image',
+      preview: 'content-width',
       context: {
         theme: {
           border: false,

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

@@ -408,6 +408,10 @@
   &--event.c-card--has-image {
     @extend .c-card--switch;
 
+    &.c-card--has-tag .c-card__tag {
+      z-index: 1;
+    }
+
     .c-card__wrapper {
       @include padding(0);
 
@@ -449,7 +453,18 @@
     box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
 
     .c-card__image img {
+      max-height: 252px;
       aspect-ratio: 2/1;
+      object-fit: cover;
+    }
+
+    .c-card__wrapper,
+    .c-card__primary {
+      height: 100%;
+    }
+
+    .c-card__primary {
+      flex-shrink: 1;
     }
 
     .c-card__header > * + * {