mp-design-system 1.2.62 → 1.2.64

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/objects/prose.scss

@@ -37,6 +37,11 @@
     margin-left: 1em;
     padding-left: 0.5rem;
 
+    // Bizzabo reset
+    &::before {
+      display: none !important;
+    }
+
     h3,
     h4 {
       line-height: lh('prose');

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: [