mp-design-system 1.0.0 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "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/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,18 @@
     @include step(-1);
     color: var(--error-state);
   }
+
+  &[disabled],
+  [disabled],
+  .u-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';

package/src/assets/scss/objects/off-canvas.scss

@@ -0,0 +1,85 @@
+.o-off-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  z-index: 9999;
+
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(color("grey"), 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(5px);
+  }
+
+  &__content {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: calc(100% - var(--space-m));
+    height: 100%;
+    background-color: color("white");
+    transition: right 0.3s ease;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    @extend .c-h--step-3;
+    @include padding('s', 's', 0);
+
+    & > * {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  &__header + &__main {
+    @include margin-top('m');
+  }
+
+  &__main {
+    @include margin-bottom('m');
+    @include padding(0, 's');
+    overflow-y: scroll;
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding(0, 's', 's');
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  &__close {
+    @extend .u-link;
+    @include margin(0, 'auto');
+    @include padding('s');
+  }
+
+  &--open {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.3s ease;
+
+    .o-off-canvas__backdrop {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .o-off-canvas__content {
+      right: 0;
+    }
+  }
+}

package/src/assets/scss/utilities/disabled.scss

@@ -0,0 +1,8 @@
+.u-disabled {
+    cursor: not-allowed;
+  
+    input,
+    button {
+      pointer-events: none;
+    }
+}

package/src/assets/scss/utilities/index.scss

@@ -3,6 +3,7 @@ html body {
 @import './typography.scss';
 @import './link.scss';
 @import './colour.scss';
+@import './disabled.scss';
 @import './wrap.scss';
 @import './flex.scss';
 @import './display.scss';

package/src/assets/scss/utilities/link.scss

@@ -2,6 +2,7 @@
 .mp .u-link,
 .u-link {
   color: color('utility-blue');
+  cursor: pointer;
 
   &:hover {
     text-decoration: underline;

package/src/components/iconography.njk

@@ -21,6 +21,7 @@ Icons add visual noise to designs and should be used sparingly.
   'arrow-left',
   'arrow-right',
   'chevron-down',
+  'chevron-up',
   'cross',
   'dash',
   'facebook',
@@ -28,12 +29,14 @@ Icons add visual noise to designs and should be used sparingly.
   'info',
   'instagram',
   'linkedin',
+  'lock',
   'log-out',
   'play',
   'rss',
   'search',
   'tick',
   'twitter',
+  'warning',
   'youtube'
 ] %} 
 

package/src/components/utilities.md

@@ -50,6 +50,14 @@ More typography utility classes are documented on the [typography page](/compone
 <div class="u-revealed">The opposite of u-hidden, useful for e.g. accordions</div>
 ```
 
+```html
+<div class="u-disabled">
+    <label class="c-label" for="text_input">
+        Disabled input, without using the [disabled] attribute</label>
+    <input type="text" class="c-input">
+</div>
+```
+
 ---
 
 ## Layout

package/src/index.njk

@@ -11,7 +11,7 @@ renderData:
 {% from "components/card/macro.njk" import card %}
 {% from "components/usp/macro.njk" import usp %}
 
-<div class="o-grid o-grid--of-four">
+<div class="o-grid o-grid--of-four u-pad-right-xl">
   {{ card({
     theme: {
       layout: 'single',
@@ -99,18 +99,25 @@ renderData:
 A combination of brand guidelines and a library of HTML/CSS/JS components.
 
 As Malvern Panalytical has grown, our online experiences have become disparate and inconsistent. The goal of this design system is to address this by creating a single source of truth. It will rely on us all using and contributing to it, with the ongoing support of the Design System Team.
+{% endset %}
 
+{% set latest %}
 ## Latest updates
-##### V.{{ config.dsVersion }} - Jan 2022
+##### V.{{ config.dsVersion }} - May 2023
 
-- New Features Table component
-- New Gallery component
-- New illustration documentation
-- Fix IE11 navigation bug
+- Add new toggle components
+- Add new breadcrumb component
+- Add button with loading indicator
+- Update event card styles
 - Misc. fixes
-- Misc. documentation improvements
 {% endset %}
 
 {{ markdown({
   content: content
 }) }}
+
+<div class="c-slat c-slat--crystal u-bg-blue-step-3 u-pad-x-l">
+  {{ markdown({
+    content: latest
+  }) }}
+</div>