mp-design-system 0.9.26 → 0.9.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "0.9.26",
+  "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

@@ -417,31 +417,73 @@
 
       .c-card__image {
         position: relative;
+        width: 100%;
 
         img {
+          max-height: 200px;
           height: 100%;
           object-fit: cover;
           aspect-ratio: 16 / 9;
         }
       }
+    }
+  
+    @media (min-width: 55em) {
+      .c-card__primary {
+        width: calc(70% - 18px);
+        width: calc(70% - var(--space-s-m));
+      }
 
-      @media (min-width: 55em) {
-        .c-card__primary {
-          width: calc(60% - 18px) !important;
-          width: calc(60% - var(--space-s-m)) !important;
-        }
-
-        .c-card__image {
-          width: calc(40% - 18px) !important;
-          width: calc(40% - var(--space-s-m)) !important;
+      .c-card__image {
+        width: calc(30% - 18px);
+        width: calc(30% - var(--space-s-m));
 
-          img {
-            position: absolute;
-          }
+        img {
+          max-height: none !important;
         }
       }
     }
   }
+
+  &--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 {
+  @include gap("s");
+  flex-direction: column;
+
+  .c-card__primary {
+    width: 100%;
+  }
+
+  .c-card__image {
+    width: 100%;
+  }
 }
 
 // IE11 fix

package/src/_includes/components/component/preview-default.njk

@@ -1,3 +1,3 @@
-<div>
+<div class="u-pad-3xs">
   {{ comp | safe }}
 </div>

package/src/_includes/components/component/preview-form.njk

@@ -1,3 +1,3 @@
-<form class="mp o-grid o-grid--of-two">
+<form class="mp o-grid o-grid--of-two u-pad-3xs">
   {{ comp | safe }}
 </form>

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.config.js

@@ -0,0 +1,35 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Toggle',
+  category: categories.form,
+  component: {
+    name: 'toggle',
+    folder: 'input'
+  },
+  figma: 'https://www.figma.com/file/szD8e7jNeWIfKpt6y41isi/Franklin-design-system?node-id=213-918',
+  preview: 'form',
+  context: {
+    label: 'Label',
+    name: 'name',
+    id: 'id'
+  },
+  variants: [
+    {
+      title: 'Toggled on',
+      context: {
+        checked: true
+      }
+    }
+  ],
+  props: [
+    {
+      table: [
+        ['label', 'string'],
+        ['id', 'string', 'ID attribute'],
+        ['name', 'string', 'Name attribute (falls back to ID)'],
+        ['checked', 'bool', 'Is this input checked?']
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,5 @@
+<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>
+  {{ params.label }}
+</label>

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

@@ -0,0 +1,59 @@
+.c-toggle {
+  position: relative;
+  @include step(-1);
+  display: inline-block;
+  white-space: nowrap;
+
+  &__checkbox {
+    @extend .u-hidden;
+  }
+
+  &__slider {
+    @include margin-right('2xs');
+    @include margin-left('2xs');
+    position: relative;
+    display: inline-block;
+    height: 1.25rem;
+    width: 2.25rem;
+    border: 1px solid color('petrol', 'step-2');
+    border-radius: 1.25rem;
+    vertical-align: text-bottom;
+
+    &::before {
+      position: absolute;
+      content: "";
+      background-color: color('white');
+      border: 1px solid color('petrol', 'step-2');
+      height: 0.75rem;
+      width: 0.75rem;
+      top: 0;
+      bottom: 0;
+      left: 0.25rem;
+      margin: auto 0;
+      border-radius: 50%;
+      transition: .1s;
+    }
+  }
+
+  &:hover &__slider,
+  &:focus-within &__slider {
+    background-color: color('petrol', 'step-3');
+  }
+  
+  &:focus-within &__slider {
+    outline: 2px solid;
+  }
+
+  &__checkbox:checked + &__slider {
+    background-color: color('utility-blue');
+  }
+
+  &:hover &__checkbox:checked + &__slider,
+  &:focus-within &__checkbox:checked + &__slider {
+    background-color: color('utility-blue', 'step--1');
+  }
+
+  &__checkbox:checked + &__slider::before {
+    transform: translateX(1rem);
+  }
+}

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

@@ -17,6 +17,7 @@
 @import '~comp/industry-card/industry-card.scss';
 @import '~comp/input/input.scss';
 @import '~comp/input/radio.scss';
+@import '~comp/input/toggle.scss';
 @import '~comp/internal-nav/internal-nav.scss';
 @import '~comp/meta-box/meta-box.scss';
 @import '~comp/option-list/option-list.scss';

package/src/assets/scss/library.scss

@@ -251,8 +251,8 @@
     iframe {
       height: 100%;
       width: 100%;
-      left: 0;
-      top: 0;
+      left: -4px;
+      top: -4px;
       transition: 
         padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
         background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -261,6 +261,10 @@
       @media only screen and (min-width: 600px) {
         position: absolute;
       }
+
+      body {
+        border: 2px solid red;
+      }
     }
   }
 

package/src/assets/scss/objects/grid.scss

@@ -26,7 +26,7 @@ $grid-gutter-width: 36;
   $width: math.div(100%, $columns);
   
   & > * {
-    width: calc(($width - (($columns - 1) * #{space-unit()} / $columns)) - 0.1px);
+    width: calc(($width - (($columns - 1) * space-unit() / $columns)) - 0.1px);
     width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);
     
     & + * {
@@ -43,7 +43,7 @@ $grid-gutter-width: 36;
   display: flex;
   flex-wrap: wrap;
   justify-content: stretch;
-  margin-bottom: calc(-1 * #{space-unit()});
+  margin-bottom: calc(-1 * space-unit());
   margin-bottom: calc(-1 * var(--gutter));
   width: 100%;
 

package/src/assets/scss/utilities/space.scss

@@ -84,6 +84,9 @@
 .u-pad-0 {
   padding: 0;
 }
+.u-pad-3xs {
+  @include padding('3xs');
+}
 .u-pad-s {
   @include padding('s');
 }

package/src/components-pages.njk

@@ -20,13 +20,15 @@ renderData:
   <div class="c-library-stretch u-wrap mp c-tabs c-tabs--flex c-tabs--anchor c-tabs--persist u-pad-y-m-l">
     <header class="u-wrap u-flow--s-l u-margin-bottom-s">
       <div class="u-split">
-        <h1 class="c-h c-h--step-3">{{ component.title }}</h1>
+        <h1 class="c-h c-h--step-4">{{ component.title }}</h1>
         <div>
           {% if component.version %}<span class="c-library-version">Version {{ component.version }}</span>{% endif %}
           {% if component.status %}<span class="u-margin-left-xs c-library-status c-library-status--{{ component.status | slug }}">{{ component.status }}</span>{% endif %}
         </div>
       </div>
 
+      {% if component.description %}<p>{{ component.description }}</p>{% endif %}
+
       <nav class="c-tabs__controls">
         <ul class="c-tabs__controls-list">
           <li><a class="c-tabs__control c-tabs__control--active" href="#component-example">Example</a></li>

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>