mp-design-system 0.9.25 → 0.9.27

package/package.json

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

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

@@ -353,6 +353,7 @@
     text-align: right;
     font-size: 1.5rem;
     transition: 300ms color;
+    z-index: 1;
 
     .c-icon {
       position: relative;
@@ -406,7 +407,7 @@
 
   &--event.c-card--has-image {
     @extend .c-card--switch;
-    
+
     .c-card__wrapper {
       @include padding(0);
 
@@ -415,28 +416,49 @@
       }
 
       .c-card__image {
+        position: relative;
+        width: 100%;
+
         img {
+          max-height: 200px;
           height: 100%;
-          width: auto;
           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(30% - 18px);
+        width: calc(30% - var(--space-s-m));
 
-        .c-card__image {
-          width: calc(40% - 18px) !important;
-          width: calc(40% - var(--space-s-m)) !important;
+        img {
+          max-height: none !important;
         }
       }
     }
   }
 }
 
+.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
 // This forces IE11 to use display:block instead of flex for single-column cards
 _:-ms-fullscreen, :root .c-card, :root .c-card--layout-single .c-card__wrapper { display:block; }

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/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,7 @@
+
+
+<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>