mp-design-system 0.9.27 → 0.9.28

package/package.json

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

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

@@ -81,7 +81,8 @@ module.exports = {
         footer: {
           cta: {
             link: '#',
-            label: 'Read more'
+            label: 'Read more',
+            icon: 'arrow-right',
           }
         }
       }
@@ -159,7 +160,8 @@ module.exports = {
         footer: {
           cta: {
             link: '#',
-            label: 'View full details'
+            label: 'View full details',
+            icon: 'arrow-right',
           },
         },
         shop: {
@@ -200,7 +202,8 @@ module.exports = {
         footer: {
           cta: {
             link: '#',
-            label: 'Read the whitepaper'
+            label: 'Read the whitepaper',
+            icon: 'arrow-right',
           },
         },
         tag: 'Whitepaper'
@@ -254,7 +257,7 @@ module.exports = {
           date: {
             date: new Date(),
             time: '11:00 – 12:00',
-            timezone: 'EST'
+            timezone: 'EST',
           },
           meta: [
             'English'
@@ -676,7 +679,8 @@ module.exports = {
         footer: {
           cta: {
             link: '#',
-            label: 'Read the whitepaper'
+            label: 'Read the whitepaper',
+            icon: 'arrow-right',
           }
         },
         tag: 'Whitepaper',
@@ -774,6 +778,38 @@ module.exports = {
         link: '#'
       }
     },
+    {
+      title: 'Event series card',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          layout: 'single',
+          name: 'event-series',
+          inlineSpecs: false,
+          corner: false,
+        },
+        image: {
+          src: '/static/img/blog-page-image-1.jpg',
+          alt: 'Product image alt'
+        },
+        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: '#'
+      }
+    },
   ],
 
   props: [

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

@@ -14,6 +14,7 @@
 {% set hasImage = params.image.src %}
 {% set isInPast = header.date.duration %}
 {% set hasDate = header.date.date %}
+{% set hasFormat = header.date.formatted %}
 {% set hasTime = header.date.time %}
 {% set hasTimezone = header.date.timezone %}
 {% set hasMeta = header.meta | length %}
@@ -68,17 +69,21 @@
         </a>
       </figure>
     {% endif %}
-
     <div class="c-card__primary">
-
       {% if header %}
         <header class="c-card__header u-flow--2xs">
-          {% if hasDate and not isInPast %}
+          {% if hasDate and not isInPast and hasFormat == false %}
             <time class="c-card__datetime">
               <span class="c-card__day">{{ header.date.date.getDate() }} </span>
               <span class="c-card__month">{{ header.date.date.getMonth() | months }}</span>
             </time>
           {% endif %}
+
+          {% if hasDate and hasFormat == true %}
+            <time class="c-card__datetime">
+              <span>{{ header.date.date }}</span>
+            </time>
+          {% endif %}
           
           {% if not params.theme.metaLast and (hasTime or hasTimezone or isInPast or hasMeta) %}
             {{ meta() }}
@@ -144,7 +149,7 @@
                 link: footer.cta.link,
                 label: footer.cta.label,
                 classes: 'u-link',
-                icon: 'arrow-right'
+                icon: footer.cta.icon
               }) }}
             </div>
           {% endif %}

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

@@ -444,6 +444,33 @@
       }
     }
   }
+
+  &--event-series {
+    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
+
+    .c-card__image img {
+      aspect-ratio: 2/1;
+    }
+
+    .c-card__header > * + * {
+      @include margin('s', 0, 0, 0);
+    }
+
+    .c-card__datetime {
+      font-size: var(--step--1);
+      font-weight: normal;
+    }
+
+    .c-card__title {
+      font-size: var(--step-0);
+    }
+
+    .c-card__footer .u-link,
+    .c-card__footer .u-link svg {
+      color: color('utility-blue', 'step-1');
+      font-size: var(--step--1);
+    }
+  }
 }
 
 .grid-view > .c-card--event.c-card--has-image .c-card__wrapper {

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

@@ -19,3 +19,7 @@
 {% macro radio(params) %}
   {{ c({ name: 'radio', folder: 'input' }, params) }}
 {% endmacro %}
+
+{% macro toggle(params, type='toggle') %}
+  {{ c({ name: 'toggle', folder: 'input' }, params) }}
+{% endmacro %}

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

@@ -1,5 +1,3 @@
-
-
 <label for="{{ params.id }}" class="c-toggle">
   <input type="checkbox" class="c-toggle__checkbox" id="{{ params.id }}" value="{{ params.value }}" role="switch" aria-checked="false" aria-label="{{ params.label }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} />
   <span class="c-toggle__slider"></span>

package/src/patterns/form.njk

@@ -8,6 +8,7 @@ layout: patterns-page
 {% from "components/input/macro.njk" import textarea %}
 {% from "components/input/macro.njk" import checkbox %}
 {% from "components/input/macro.njk" import radio %}
+{% from "components/input/macro.njk" import toggle %}
 {% from "components/alert/macro.njk" import alert %}
 
 <div class="u-flow">
@@ -73,6 +74,15 @@ layout: patterns-page
                     </div>
                 {% endfor %}
 
+                <label class="c-label">Toggle</label>
+                {{ toggle({
+                    label: 'Toggle',
+                    name: 'toggle',
+                    id: 'toggle',
+                    type: 'toggle',
+                    placeholder: 'Toggle?'
+                })}}
+
                 <br>
                 <legend><code>&lt;input&gt;</code> variations</legend>