mp-design-system 1.2.61 → 1.2.63

package/src/assets/scss/library.scss

@@ -11,7 +11,7 @@
   display: grid;
   min-height: 100vh;
   grid-template-rows: auto 1fr auto;
-  
+
   &--components {
     grid-template-rows: auto 1fr;
   }
@@ -21,18 +21,18 @@
     @include padding('2xs');
     flex-direction: column;
     align-items: flex-start;
-    
+
     background: color('petrol');
     color: color('white');
     font-weight: weight('bold');
-    
-    @media only screen and (min-width:650px) {
+
+    @media only screen and (min-width: 650px) {
       @include step(-2);
       flex-direction: row;
       align-items: center;
     }
 
-    @media only screen and (min-width:1000px) {
+    @media only screen and (min-width: 1000px) {
       @include step(-1);
       @include padding('s', 's-l');
     }
@@ -57,7 +57,8 @@
 
   &__hero {
     color: white;
-    background: linear-gradient(color('petrol'), transparent), linear-gradient(45deg, color('blue'), color('petrol'));
+    background: linear-gradient(color('petrol'), transparent),
+      linear-gradient(45deg, color('blue'), color('petrol'));
   }
 
   &__body {
@@ -67,7 +68,7 @@
     @media only screen and (min-width: 600px) {
       grid-template-columns: 10em 1fr;
     }
-    
+
     @media only screen and (min-width: 800px) {
       grid-template-columns: 17em 1fr;
     }
@@ -76,7 +77,7 @@
   @media only screen and (min-width: 600px) {
     &--components &__body > * {
       overflow-y: auto;
-      height: calc( 100vh - var(--headerHeight) - 1px );
+      height: calc(100vh - var(--headerHeight) - 1px);
     }
   }
 
@@ -85,7 +86,7 @@
     border-right: 1px solid color('petrol', 'step-3');
     grid-row: -1;
     scroll-behavior: none;
-  
+
     @media only screen and (min-width: 600px) {
       grid-row: auto;
     }
@@ -119,7 +120,7 @@
       @include padding('xs');
       padding-bottom: 0;
 
-      li + li  {
+      li + li {
         @include margin-top('2xs');
       }
     }
@@ -127,7 +128,7 @@
 
   &__skip-link {
     @include padding('xs');
-    
+
     @media only screen and (min-width: 600px) {
       display: none;
     }
@@ -140,10 +141,10 @@
     max-width: 15%;
     min-width: 100px;
 
-    @media only screen and (min-width:650px) {
+    @media only screen and (min-width: 650px) {
       justify-content: flex-start;
     }
-    
+
     &-name {
       @include padding-left('xs-s');
       @include margin-left('xs-s');
@@ -167,7 +168,7 @@
         }
 
         // &:nth-last-child(3) {
-          // color: color('petrol', 'step-1');
+        // color: color('petrol', 'step-1');
         // }
       }
     }
@@ -198,7 +199,7 @@
     padding: 0.25rem;
   }
 
-  &-menu-active  {
+  &-menu-active {
     font-weight: weight('bold');
     position: relative;
 
@@ -227,14 +228,15 @@
   &__frame {
     position: relative;
     width: 100%;
-    
+
     &-links {
       position: absolute;
       right: 0;
       top: calc(-1 * (var(--space-m) + var(--space-s)));
       z-index: 1;
 
-      a, button {
+      a,
+      button {
         border-radius: 0 0 0.25em 0.25em;
         @include step(-1);
         padding: 0.25em 0.666em;
@@ -248,25 +250,42 @@
       top: 0;
     }
 
-    iframe {
-      --negative-padding: calc( var(--space-m) * -1 );
+    &-wrap {
+      --width: '';
       height: 100%;
-      width: 100%;
-      width: calc( 100% - var(--negative-padding) *2 );
-      left: var(--negative-padding);
-      top: var(--negative-padding);
-      transition: 
-        padding .3s cubic-bezier(0.22, 0.61, 0.36, 1),
-        background-color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
+      overflow: hidden;
+      position: relative;
       resize: both;
 
-      @media only screen and (min-width: 600px) {
+      &:after {
+        background: color('petrol', 'step-3');
+        bottom: 0;
+        color: color('petrol', 'step-1');
+        counter-reset: width var(--width);
+        content: counter(width);
+        @include step(-2);
+        mix-blend-mode: multiply;
+        padding: 0.5ch 1ch;
         position: absolute;
+        right: 0;
       }
+    }
 
-      body {
-        border: 2px solid red;
-      }
+    iframe {
+      --negative-padding: calc(var(--space-m) * -1);
+      height: 100%;
+      width: 100%;
+      width: calc(100% - var(--negative-padding) * 2);
+      left: var(--negative-padding);
+      top: var(--negative-padding);
+      position: relative;
+      transition:
+        padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
+        background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+
+      // @media only screen and (min-width: 600px) {
+      //   position: absolute;
+      // }
     }
   }
 
@@ -321,51 +340,51 @@
     gap: 0 1em;
     grid-auto-rows: minmax(4em, auto);
     margin-bottom: var(--space-m);
-    
+
     @media only screen and (min-width: 680px) {
       gap: 0;
       grid-template-columns: repeat(5, auto);
       grid-template-rows: 5em auto;
     }
   }
-  
+
   &__swatch-grid--has-labels {
     grid-auto-flow: row;
-    
+
     @media only screen and (min-width: 40em) {
       grid-template-columns: minmax(15%, 15em) auto;
       grid-template-rows: auto;
     }
-    
-    @media only screen and (min-width:1000px) {
+
+    @media only screen and (min-width: 1000px) {
       grid-auto-flow: column;
       grid-template-columns: repeat(5, 1fr);
       grid-template-rows: 5em auto;
     }
   }
-  
+
   &__swatches,
   &__swatch-labels {
     display: grid;
     grid-template-columns: repeat(auto-fit, 165px);
   }
-  
+
   &__swatch {
     display: flex;
-    
+
     & > * {
       justify-content: center;
       font-weight: weight('bold');
       margin: auto;
     }
   }
-  
+
   &__swatches {
     & > * {
       height: 0;
       padding-bottom: 50%;
       position: relative;
-      
+
       & > * {
         display: flex;
         justify-content: center;
@@ -381,16 +400,16 @@
       }
     }
   }
-  
+
   &__swatch-grid table {
     @include step(-2);
-    
+
     td,
     th {
       @include padding('2xs', 0, '2xs', '3xs');
     }
     th {
-      widtH: 3em;
+      width: 3em;
     }
     td {
       font-family: monospace;
@@ -417,7 +436,12 @@
     display: block;
 
     span {
-      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);
+      background: linear-gradient(
+          45deg,
+          rgba(255, 255, 255, 0.2) 0%,
+          rgba(255, 255, 255, 0) 100%
+        ),
+        rgba(206, 0, 88, 0.5);
       height: 0;
       padding-bottom: 100%;
       position: relative;
@@ -447,7 +471,7 @@
     &--alt {
       background: color('petrol', 'step-1');
       padding: 2rem 1rem;
-  
+
       &:before {
         content: '\00a0';
         display: block;
@@ -457,7 +481,7 @@
     &--first {
       background: color('petrol');
       padding: 2rem 1rem;
-  
+
       &:before {
         content: 'First on mobile';
       }
@@ -476,7 +500,7 @@
       @include step(-1);
       @include padding('3xs', '2xs');
       letter-spacing: ls('2%');
-      
+
       &:hover {
         color: color('red');
       }
@@ -484,22 +508,20 @@
   }
 
   hr {
-    @extend .u-hr
+    @extend .u-hr;
   }
 
   &__typo {
-
     &__sidebar {
       width: grid-column(2);
 
       span {
         display: block;
-
       }
 
       .x2 {
         margin-top: 4.25em;
-        border: 1px solid color("grey");
+        border: 1px solid color('grey');
         border-width: 1px 0;
         height: 2em;
         line-height: 2em;
@@ -545,17 +567,17 @@
         grid-template-columns: 40% 20% 40%;
         grid-template-rows: var(--space-2xl) 400px 400px;
 
-        img {  
+        img {
           &:nth-child(2) {
             grid-row: 2/3;
             grid-column: 1/3;
           }
-  
+
           &:nth-child(3) {
             grid-column: 3/4;
             grid-row: 1/3;
           }
-  
+
           &:nth-child(5) {
             grid-column: 2/4;
           }
@@ -580,21 +602,21 @@
         }
       }
     }
-
   }
 
   &__illustration-grid {
-      display:grid;
-      grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
-      gap:var(--gutter);
-      
-      & :nth-child(odd):nth-last-child(5) {
-          grid-column: 1/-1;
-      }
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: var(--gutter);
+
+    & :nth-child(odd):nth-last-child(5) {
+      grid-column: 1/-1;
+    }
   }
 
   .c-alert ul li {
-    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;    
+    list-style: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>')
+      outside;
     margin-left: 1em;
     padding-left: 0.5rem;
 
@@ -624,7 +646,7 @@
 }
 
 @media only screen and (min-width: 650px) and (max-width: 700px),
-            screen and (max-width: 450px) {
+  screen and (max-width: 450px) {
   .c-library__header nav .u-row {
     @include space('gap', '2xs');
     @include step(-2);
@@ -634,12 +656,17 @@
 .c-library__header {
   @media only screen and (max-width: 650px) {
     nav a {
-      @include padding('2xs',0);
+      @include padding('2xs', 0);
       display: block;
     }
 
     .c-library-page-active:after {
-      @include space('bottom','3xs');
+      @include space('bottom', '3xs');
     }
   }
-}
+}
+
+.u-resize {
+  overflow: hidden;
+  resize: both;
+}

package/src/assets/scss/objects/button-wrap.scss

@@ -0,0 +1,18 @@
+@mixin button-wrap {
+    display: flex;
+    flex-flow: row wrap;
+    @include space('gap', '2xs');
+
+    & > .c-button,
+    & > button,
+    & > input[type='button'],
+    & > input[type='submit'] {
+        &:not(:only-child) {
+            flex-grow: 1;
+        }
+    }
+}
+
+.o-button-wrap {
+    @include button-wrap;
+}

package/src/assets/scss/objects/clickable-parent.scss

@@ -0,0 +1,3 @@
+.o-clickable-parent {
+    @include clickable-parent;
+}

package/src/assets/scss/objects/index.scss

@@ -1,2 +1,4 @@
+@import './button-wrap.scss';
+@import './clickable-parent.scss';
 @import './prose.scss';
 @import './grid.scss';

package/src/assets/scss/tools/index.scss

@@ -167,5 +167,6 @@
     inset: 0;
     cursor: pointer !important;
     display: flex;
+    z-index: 1;
   }
 }

package/src/components-full-pages.njk

@@ -4,9 +4,8 @@ pagination:
     size: 1
     alias: component
 permalink: "components/full/{{ component.slug }}/"
-title: 'Components'
-renderData:
-  title: '{{ component.title }}'
+eleventyComputed:
+  title: "{{ component.title }}"
 ---
 
 {% extends "layout.njk" %}

package/src/components-pages.njk

@@ -4,10 +4,9 @@ pagination:
     size: 1
     alias: component
 permalink: "components/{{ component.slug }}/"
-title: "Components"
 sidebar: components
-renderData:
-  title: '{{ component.title }}'
+eleventyComputed:
+  title: "{{ component.title }}"
 ---
 
 {% extends "library.njk" %}
@@ -53,7 +52,9 @@ renderData:
             <button type="button" class="c-library__frame-background">Toggle background</button>
             <a href="/components/full/{{ component.slug }}" target="_blank">Open fullscreen</a>
           </div>
-          <iframe src="/components/full/{{ component.slug }}" sandbox="allow-same-origin allow-scripts allow-forms allow-modals" style="" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes"></iframe>
+          <div class="c-library__frame-wrap" id="iframe-wrap">
+            <iframe src="/components/full/{{ component.slug }}" sandbox="allow-same-origin allow-scripts allow-forms allow-modals" style="" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes"></iframe>
+          </div>
         </div>
       </div>
 

package/src/index.njk

@@ -1,9 +1,8 @@
 ---
-title: "Welcome"
 subtitle: Our design system helps us create consistent experiences across our websites and beyond. It also makes the design and development process faster, more efficient and scalable.
 description: Franklin is Malvern Panalytical's design system for public-facing websites and digital products.
 layout: system-home-page
-renderData:
+eleventyComputed:
   title: "Welcome to the Franklin design system"
 ---
 
@@ -73,90 +72,6 @@ renderData:
   </div>
 </div>
 
-
-
-{# <div class="o-grid o-grid--of-four">
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'large',
-      border: true
-    },
-    header: {
-      title: 'Quick start'
-    },
-    body: {
-      content: '<p>The basics of how to make a digital product \'feel\' like Malvern Panalytical.</p>'
-    },
-    footer: {
-      cta: {
-        link: '/quickstart',
-        label: 'Read the quick start guide'
-      }
-    }
-  }) }}
-  
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'large',
-      border: true
-    },
-    header: {
-      title: 'Brand and visual identity'
-    },
-    body: {
-      content: '<p>Colors, fonts, logos; it\'s all here.</p>'
-    },
-    footer: {
-      cta: {
-        link: '/brand/',
-        label: 'Read brand guidelines'
-      }
-    }
-  }) }}
-
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'large',
-      border: true
-    },
-    header: {
-      title: 'Tone of voice'
-    },
-    body: {
-      content: '<p>Guidelines to help us make our writing clearer, simpler and more inspiring.</p>'
-    },
-    footer: {
-      cta: {
-        link: '/content/',
-        label: 'Read tone of voice guidelines'
-      }
-    }
-  }) }}
-
-  {{ card({
-    theme: {
-      layout: 'single',
-      size: 'large',
-      border: true
-    },
-    header: {
-      title: 'Component library'
-    },
-    body: {
-      content: '<p>Styles and reusable building blocks of the system.</p>'
-    },
-    footer: {
-      cta: {
-        link: '/components/',
-        label: 'Browse components'
-      }
-    }
-  }) }}
-</div> #}
-
 {% set content %}
 
 ## What is Franklin?

package/src/prototype/events-hub.njk

@@ -10,6 +10,8 @@ tagTitle: Events hub
 {% from "components/product-signpost/macro.njk" import productSignpost %}
 {% from "components/signpost/macro.njk" import signpost %}
 {% from "components/twi/macro.njk" import twi %}
+{% from "components/twi/macro.njk" import twi %}
+{% from "components/event-card/macro.njk" import eventCardNew %}
 
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
 
@@ -110,12 +112,10 @@ tagTitle: Events hub
             <h2 class="c-h c-h--step-5">This week</h2>
         </header>
 
-        {{ card({
-            theme: {
-                layout: 'multi c-card--layout-multi-40-60',
-                name: 'featured',
-                switch: false
-            },
+        {{ eventCardNew({
+            type: 'event',
+            theme: 'dark',
+            layout: 'switch',
             image: {
                 src: 'https://p3.aprimocdn.net/malvernpanalytical/346cf3ca-b1a0-4725-8ba4-adea00c33589/shutterstock_1099481945_Original%20file.jpg?quality=60&width=810',
                 alt: 'Alt'
@@ -124,10 +124,11 @@ tagTitle: Events hub
                 title: 'Does your nasal spray have the right droplet size?',
                 meta: ['English'],
                 date: {
-                    date: '2021-02-09' | createDate,
-                    time: '11:00 – 1200',
+                    date: '2024-08-09' | createDate,
+                    time: '11:00 – 12:00',
                     timezone: 'EST'
-                }
+                },
+                location: 'Virtual'
             },
             body: {
                 keySpecs: [