mp-design-system 0.9.29 → 1.0.2

package/package.json

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

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

@@ -55,6 +55,12 @@ module.exports = {
       context: {
         classes: 'c-button--loading'
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        attrs: 'disabled'
+      }
     }
   ],
   props: [

package/src/_includes/components/button/button.scss

@@ -44,6 +44,13 @@
     text-decoration: none;
     color: color("white");
   }
+
+  &[disabled],
+  [disabled] & {
+    filter: saturate( 0.4 );
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 }
 
 .mp.c-button,

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

@@ -737,7 +737,45 @@ module.exports = {
       }
     },
     {
-      title: 'Event card (with image)',
+      title: 'In-person event card',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true,
+          corner: true,
+        },
+        header: {      
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            time: '11:00 – 12:00',
+            timezone: 'EST'
+          },
+          meta: [
+            'English'
+          ],
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ]
+        },
+        link: '#'
+      }
+    },
+    {
+      title: 'In-person event card with image',
       preview: 'content-width',
       context: {
         theme: {
@@ -778,9 +816,113 @@ module.exports = {
         link: '#'
       }
     },
+    {
+      title: 'On-demand event card',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true
+        },
+        header: {
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            duration: '36:01'
+          },
+          meta: [
+            'English'
+          ]
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ],
+        },
+        tag: 'Recorded webinar'
+      }
+    },
+    {
+      title: 'On-demand event card with image',
+      preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          size: 'small',
+          layout: 'multi',
+          name: 'event',
+          inlineSpecs: true
+        },
+        image: {
+          src: '/static/img/blog-page-image-1.jpg',
+          alt: 'Product image alt'
+        },
+        header: {
+          title: 'Discover how on-line particle sizing optimises mining analytics.',
+          date: {
+            date: new Date(),
+            duration: '36:01'
+          },
+          meta: [
+            'English'
+          ]
+        },
+        body: {
+          keySpecs: [
+            {
+              title: 'Products',
+              term: 'Morphologi G3-ID'
+            },
+            {
+              title: 'Technologies',
+              term: 'Morphologically-Directed Raman Spectroscopy'
+            }
+          ],
+        },
+        tag: 'Recorded webinar'
+      }
+    },
     {
       title: 'Event series card',
       preview: 'content-width',
+      context: {
+        theme: {
+          border: false,
+          layout: 'single',
+          name: 'event-series',
+          inlineSpecs: false,
+          corner: false,
+        },
+        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: '#'
+      }
+    },
+    {
+      title: 'Event series card with image',
+      preview: 'content-width',
       context: {
         theme: {
           border: false,

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

@@ -408,6 +408,10 @@
   &--event.c-card--has-image {
     @extend .c-card--switch;
 
+    &.c-card--has-tag .c-card__tag {
+      z-index: 1;
+    }
+
     .c-card__wrapper {
       @include padding(0);
 
@@ -454,6 +458,15 @@
       object-fit: cover;
     }
 
+    .c-card__wrapper,
+    .c-card__primary {
+      height: 100%;
+    }
+
+    .c-card__primary {
+      flex-shrink: 1;
+    }
+
     .c-card__header > * + * {
       @include margin('s', 0, 0, 0);
     }

package/src/_includes/components/input/checkbox.config.js

@@ -20,6 +20,12 @@ module.exports = {
       context: {
         checked: true
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
     }
   ],
   props: [

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

@@ -1,2 +1,2 @@
-<input type="checkbox" class="c-checkbox" name="{{ params.name or params.id }}" id="{{ params.id }}" value="{{ params.value }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} />
-<label for="{{ params.id }}">{{ params.label }}</label>
+<input type="checkbox" class="c-checkbox" name="{{ params.name or params.id }}" id="{{ params.id }}" value="{{ params.value }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
+<label for="{{ params.id }}">{{ params.label }}</label>

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

@@ -35,6 +35,12 @@ module.exports = {
         button: true,
         buttontext: 'Search'
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
     }
   ],
   props: [

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

@@ -3,7 +3,7 @@
   {% if params.button %}
   <div class="u-flex u-border">
   {% endif %}
-  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} />
+  <input type="{{ params.type or 'text' }}" class="c-input {{ 'c-input--with-button' if params.button }}{{ params.classes }}" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
   {% if params.button %}
   <button type="button" class="mp c-button--white">Search</button>
   {% endif %}

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

@@ -83,6 +83,17 @@
     @include step(-1);
     color: var(--error-state);
   }
+
+  &[disabled],
+  [disabled] & {
+    background-color: color('petrol', 'step-2');
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="lock" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.45 4.17A4 4 0 0 1 16.28 7v3h-8V7a4 4 0 0 1 1.17-2.83ZM6.28 10V7a6 6 0 1 1 12 0v3h.22c1.64 0 2.78 1.46 2.78 3v7c0 1.54-1.14 3-2.78 3H6.06c-1.65 0-2.78-1.46-2.78-3v-7c0-1.54 1.13-3 2.78-3h.22Zm1 2H6.06c-.33 0-.78.33-.78 1v7c0 .67.45 1 .78 1H18.5c.32 0 .78-.33.78-1v-7c0-.67-.46-1-.78-1H7.28Zm3 3.35a2 2 0 1 1 3 1.73v1.77a1 1 0 1 1-2 0v-1.77a2 2 0 0 1-1-1.73Z"/></svg>');
+    background-position: right var(--space-2xs) center;
+    background-repeat: no-repeat;
+    @include space('background-size', 's');
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 }
 
 .c-input--with-button {

package/src/_includes/components/input/radio.config.js

@@ -20,6 +20,12 @@ module.exports = {
       context: {
         checked: true
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
     }
   ],
   props: [

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

@@ -1,2 +1,2 @@
-<input type="radio" class="c-radio" name="{{ params.name or params.id }}" id="{{ params.id }}" value="{{ params.value }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} />
-<label for="{{ params.id }}">{{ params.label }}</label>
+<input type="radio" class="c-radio" name="{{ params.name or params.id }}" id="{{ params.id }}" value="{{ params.value }}" {{ 'checked' if params.checked }} {{ 'required' if params.required }} {{ 'disabled' if params.disabled }} />
+<label for="{{ params.id }}">{{ params.label }}</label>

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

@@ -25,6 +25,19 @@
   &:focus + input[type=hidden] + label:before {
     outline: 2px solid;
   }
+
+  &[disabled],
+  [disabled] & {
+    & + label:before {
+      background-color: color('petrol', 'step-2');
+      cursor: not-allowed;
+      opacity: 0.6;
+
+    }
+    &:hover + label:before {
+      background-color: color('petrol', 'step-2');
+    }
+  }
 }
 
 .c-checkbox {

package/src/_includes/components/input/select.config.js

@@ -39,6 +39,12 @@ module.exports = {
       context: {
         error: 'This field is required'
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
     }
   ],
   props: [

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

@@ -1,6 +1,6 @@
 {% inputWrapper params.error %}
   <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
-  <select class="c-input c-input--select" name="{{ params.name or params.id }}" id="{{ params.id }}" {{ 'required' if params.required }}>
+  <select class="c-input c-input--select" name="{{ params.name or params.id }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }}>
     {% if params.placeholder %}<option value="">{{ params.placeholder }}</option>{% endif %}
     {% if params.options | length %}
       {% for option in params.options %}

package/src/_includes/components/input/textarea.config.js

@@ -28,6 +28,12 @@ module.exports = {
       context: {
         error: 'This field is required'
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
     }
   ],
   props: [

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

@@ -1,4 +1,4 @@
 {% inputWrapper params.error %}
   <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}{{ params.classes }}" for="{{ params.id }}">{{ params.label }}</label>
-  <textarea class="c-input c-input--textarea" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }}></textarea>
+  <textarea class="c-input c-input--textarea" name="{{ params.name or params.id }}" placeholder="{{ params.placeholder }}" id="{{ params.id }}" {{ 'required' if params.required }} {{ 'disabled' if params.disabled }}></textarea>
 {% endinputWrapper %}

package/src/_includes/components/input/toggle.config.js

@@ -20,6 +20,12 @@ module.exports = {
       context: {
         checked: true
       }
+    },
+    {
+      title: 'Disabled',
+      context: {
+        disabled: true
+      }
     }
   ],
   props: [

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

@@ -1,5 +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 }} />
+  <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 }} {{ 'disabled' if params.disabled }} />
   <span class="c-toggle__slider"></span>
-  {{ params.label }}
+  <span class="c-toggle__label">{{ params.label }}</span>
 </label>

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

@@ -56,4 +56,20 @@
   &__checkbox:checked + &__slider::before {
     transform: translateX(1rem);
   }
+
+  input[disabled] {
+    & + .c-toggle__slider {
+      background-color: color('petrol', 'step-2');
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      &:before {
+        background-color: color('petrol', 'step-3');
+      }
+    }
+    & ~ .c-toggle__label {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
 }

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

@@ -8,11 +8,11 @@ module.exports = {
   context: {
     type: 'anchor',
     tabs: [
-      { id: 'tab-1', label: 'Primary materials', content: '<h2 class="c-h c-h--step-3">Primary materials</h2>', active: true },
-      { id: 'tab-2', label: 'Pharmaceuticals', content: '<h2 class="c-h c-h--step-3">Pharmaceuticals</h2>' },
-      { id: 'tab-3', label: 'Advanced materials', content: '<h2 class="c-h c-h--step-3">Advanced materials</h2>' },
-      { id: 'tab-4', label: 'Academia', content: '<h2 class="c-h c-h--step-3">Academia</h2>' },
-      { id: 'tab-5', label: 'Connected world', content: '<h2 class="c-h c-h--step-3">Connected world</h2>' },
+      { id: 'tab-1', label: 'Primary materials', content: '<strong>Primary materials</strong> lorem ipsum a maecenas parturient ipsum at nisl id nisi a imperdiet platea dui venenatis sit euismod.', active: true },
+      { id: 'tab-2', label: 'Pharmaceuticals', content: '<strong>Pharmaceuticals</strong> lorem ipsum parturient a ullamcorper nisl parturient cum ullamcorper augue arcu a feugiat mus imperdiet curae suspendisse rhoncus sit id parturient cubilia adipiscing ad ullamcorper aliquet mi.' },
+      { id: 'tab-3', label: 'Advanced materials', content: '<strong>Advanced materials</strong> lorem ipsum fringilla eros cum facilisis id ullamcorper pretium sociosqu a eu vestibulum cras vivamus inceptos sed potenti a.' },
+      { id: 'tab-4', label: 'Academia', content: '<strong>Academia</strong> lorem ipsum augue et vestibulum ut luctus ut vestibulum proin eros mauris sodales penatibus euismod a sem eleifend suspendisse litora fringilla habitasse suspendisse.' },
+      { id: 'tab-5', label: 'Connected world', content: '<strong>Connected world</strong> lorem ipsum eros a parturient libero ullamcorper natoque vestibulum turpis egestas suspendisse parturient et adipiscing arcu a.' },
     ]
   },
   props: [

package/src/_includes/components/tabs/tabs.njk

@@ -10,7 +10,7 @@
   <div class="c-tabs__content">
     {% for tab in params.tabs %}
       <div id="{{ tab.id }}" class="c-tab {{ 'c-tab--active' if tab.active }}">
-        {{ tab.content | safe }}
+        <div class="o-prose"><p>{{ tab.content | safe }}</p></div>
       </div>
     {% endfor %}
   </div>

package/src/_includes/components/tabs/tabs.scss

@@ -66,6 +66,10 @@
     @media screen and (max-width:55em) {
       white-space: nowrap;
     }
+
+    .c-tabs__controls-list > li:last-child & {
+      @include margin-right(0);
+    }
     
     &.c-twi {
       display: flex;

package/src/_includes/components/twi/twi.njk

@@ -21,7 +21,7 @@
 {%- endif -%}
 
   <span>{{ params.label }}</span>
-  {{ icon({ id: params.icon }) }}
+  {{ icon({ id: params.icon or 'arrow-right' }) }}
 
 {%- if params.link != null -%}
   </a>

package/src/_includes/includes/system-scripts.njk

@@ -67,7 +67,7 @@
       function toggleBackgroundColour(event) {
         const iframe = event.currentTarget.parentNode.parentNode.querySelector('iframe');
         if (iframe) {
-          iframe.classList.toggle('u-bg-petrol-step-2');
+          iframe.classList.toggle('u-bg-petrol-step-3');
           iframe.classList.toggle('u-pad-s');
         }
       }

package/src/_includes/layout.njk

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ fullTitle }}</title>
     {% if description %} <meta name="description" content="{{ description }}" /> {% endif %}
+    {% if not index %}<meta name="robots" content="noindex" />{% endif %}
     <meta name="theme-color" content="#005461">
     <meta property="og:type" content="website" />
     <meta property="og:title" content="{{ fullTitle }}" />

package/src/_includes/system-home-page.njk

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+index: true
 ---
 
 {% extends "library.njk" %}

package/src/assets/js/app.js

@@ -5,6 +5,7 @@ import Comparison from './imports/comparison';
 import Gallery from './imports/gallery';
 import HeroPattern from './imports/hero-pattern';
 import HeroVideo from './imports/hero-video';
+import OffCanvas from './imports/off-canvas';
 import ResponsiveTable from './imports/responsive-table';
 import ScrollbarWidth from './imports/scrollbar-width';
 import ScrollSpy from './imports/scroll-spy';
@@ -25,6 +26,7 @@ import Tabs from './imports/tabs';
   Gallery();
   HeroPattern();
   HeroVideo();
+  OffCanvas();
   ResponsiveTable();
   ScrollbarWidth();
   ScrollSpy();

package/src/assets/js/imports/off-canvas.js

@@ -0,0 +1,97 @@
+// Add click event listeners to each toggle button
+function OffCanvas() {
+  const toggleButtons = Array.from(document.querySelectorAll('.c-button--off-canvas-toggle'));
+  toggleButtons.forEach((button) => {
+    button.addEventListener('click', handleToggleClick);
+  });
+}
+
+// Function to handle the toggle button click
+function handleToggleClick() {
+  const target = this.getAttribute('data-target');
+  const offCanvas = document.getElementById(target);
+  openOffCanvas(offCanvas);
+}
+
+// Function to open the off-canvas drawer
+function openOffCanvas(offCanvas) {
+  const offCanvasList = document.querySelectorAll('.o-off-canvas');
+  const isOpen = offCanvas.classList.contains('o-off-canvas--open');
+
+  // Close other off-canvas drawers only if the target is not already open
+  if (!isOpen) {
+    offCanvasList.forEach((drawer) => {
+      if (drawer !== offCanvas) {
+        closeOffCanvas(drawer);
+      }
+    });
+  }
+
+  // Open the target off-canvas drawer
+  offCanvas.classList.add('o-off-canvas--open');
+  offCanvas.setAttribute('aria-hidden', 'false');
+
+  // Add click event listener to the backdrop to close the off-canvas drawer
+  const backdrop = offCanvas.querySelector('.o-off-canvas__backdrop');
+  backdrop.addEventListener('click', handleBackdropClick);
+
+  // Add keydown event listener to close the off-canvas drawer with the Esc key
+  document.addEventListener('keydown', handleKeyDown);
+}
+
+// Function to handle the backdrop click
+function handleBackdropClick() {
+  const offCanvas = this.closest('.o-off-canvas');
+  closeOffCanvas(offCanvas);
+}
+
+// Function to handle the keydown event
+function handleKeyDown(event) {
+  if (event.key === 'Escape') {
+    const openDrawer = document.querySelector('.o-off-canvas--open');
+    if (openDrawer) {
+      closeOffCanvas(openDrawer);
+    }
+  }
+}
+
+// Function to close the off-canvas drawer
+function closeOffCanvas(offCanvas) {
+  offCanvas.classList.remove('o-off-canvas--open');
+  offCanvas.setAttribute('aria-hidden', 'true');
+
+  // Remove backdrop click event listener when closing the off-canvas drawer
+  const backdrop = offCanvas.querySelector('.o-off-canvas__backdrop');
+  backdrop.removeEventListener('click', handleBackdropClick);
+
+  // Remove keydown event listener when closing the off-canvas drawer
+  document.removeEventListener('keydown', handleKeyDown);
+}
+
+// Update button functionality
+const updateButton = document.querySelectorAll('.o-off-canvas__update');
+updateButton.forEach((button) => {
+  button.addEventListener('click', handleUpdateButtonClick);
+});
+
+// Handle the update button click
+function handleUpdateButtonClick() {
+  // Save the options somewhere
+  const offCanvas = this.closest('.o-off-canvas');
+  closeOffCanvas(offCanvas);
+}
+
+// Close button functionality
+const closeButton = document.querySelectorAll('.o-off-canvas__close');
+closeButton.forEach((button) => {
+  button.addEventListener('click', handleCloseButtonClick);
+});
+
+// Handle the close button click
+function handleCloseButtonClick() {
+  const offCanvas = this.closest('.o-off-canvas');
+  closeOffCanvas(offCanvas);
+};
+
+
+export default OffCanvas;

package/src/assets/scss/elements/reset.scss

@@ -118,13 +118,6 @@ button {
   font: inherit;
 }
 
-[disabled],
-.mp.c-button[disabled] {
-  cursor: not-allowed;
-  filter: saturate(0.4);
-  opacity: 0.6;
-}
-
 label {
   cursor: pointer;
 }

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

@@ -1,2 +1,3 @@
+@import './off-canvas.scss';
 @import './prose.scss';
 @import './grid.scss';