mp-design-system 0.9.29 → 1.0.2

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/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/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>

package/src/patterns/form.njk

@@ -13,161 +13,334 @@ layout: patterns-page
 
 <div class="u-flow">
     <form>
-        <fieldset class="c-fieldset">
-            <div class="u-flow--m u-wrap--fields">
-                {{ input({
-                    label: 'Text',
-                    name: 'text_input',
-                    id: 'text_input',
-                    type: 'text',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ select({
-                    label: "Select",
-                    name: "select",
-                    id: "select",
-                    placeholder: "Placeholder",
-                    required: true,
-                    options: [
-                        [
-                            "option-1",
-                            "Option 1"
-                        ],
-                        [
-                            "Option 2"
-                        ],
-                        [
-                            "option-3",
-                            "Option 3"
-                        ]
+        <fieldset class="c-fieldset u-flow--m u-wrap--fields">
+            {{ input({
+                label: 'Text',
+                name: 'text_input',
+                id: 'text_input',
+                type: 'text',
+                placeholder: 'Placeholder'
+            })}}
+
+            {{ select({
+                label: "Select",
+                name: "select",
+                id: "select",
+                placeholder: "Placeholder",
+                options: [
+                    [
+                        "option-1",
+                        "Option 1"
+                    ],
+                    [
+                        "Option 2"
+                    ],
+                    [
+                        "option-3",
+                        "Option 3"
+                    ]
+                ]
+            })}}
+            
+            {{ textarea({
+                label: 'Textarea',
+                name: 'textarea',
+                id: 'textarea',
+                type: 'textarea',
+                placeholder: 'Placeholder'
+            })}}
+
+            <label class="c-label">Checkboxes</label>
+            {% for _ in ["Live","Laugh","Love"] %}
+                <div>
+                    {{ checkbox({
+                        label: _,
+                        name: 'tenets',
+                        id: _,
+                        value: _
+                    })}}
+                </div>
+            {% endfor %}
+            
+            <label class="c-label">Radio buttons</label>
+            {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
+                <div>
+                    {{ radio({
+                        label: _,
+                        name: 'facts',
+                        id: _,
+                        value: _
+                    })}}
+                </div>
+            {% endfor %}
+
+            <label class="c-label">Toggle</label>
+            {{ toggle({
+                label: 'Toggle',
+                name: 'toggle',
+                id: 'toggle',
+                type: 'toggle',
+                placeholder: 'Toggle?'
+            })}}
+        </fieldset>
+
+        <hr>
+
+        {# MISC FIELD TYPES EXAMPLES #}
+        <fieldset class="c-fieldset u-flow--m u-wrap--fields">
+            <legend id="variations"><code>&lt;input&gt;</code> variations</legend>
+            
+            {{ input({
+                label: 'Email',
+                name: 'email_input',
+                id: 'email_input',
+                type: 'email',
+                placeholder: 'Placeholder'
+            })}}
+            
+            {{ input({
+                label: 'Password',
+                name: 'password_input',
+                id: 'password_input',
+                type: 'password'
+            })}}
+            
+            {{ input({
+                label: 'Date',
+                name: 'date_input',
+                id: 'date_input',
+                type: 'date',
+                placeholder: 'Placeholder'
+            })}}
+
+            {{ input({
+                label: 'Search',
+                name: 'search_input',
+                id: 'search_input',
+                type: 'search',
+                placeholder: 'Placeholder'
+            })}}
+            
+            {{ input({
+                label: 'Telephone',
+                name: 'tel_input',
+                id: 'tel_input',
+                type: 'tel',
+                placeholder: 'Placeholder'
+            })}}
+            
+            {{ input({
+                label: 'Number',
+                name: 'number_input',
+                id: 'number_input',
+                type: 'number',
+                placeholder: 'Placeholder'
+            })}}
+
+            {{ input({
+                label: 'File',
+                name: 'file_input',
+                id: 'file_input',
+                type: 'file',
+                classes: 'c-input--file'
+            })}}
+            
+            {{ input({
+                label: 'Range',
+                name: 'range_input',
+                id: 'range_input',
+                type: 'range',
+                placeholder: 'Placeholder'
+            })}}
+            
+            {{ input({
+                label: 'URL',
+                name: 'url_input',
+                id: 'url_input',
+                type: 'url',
+                placeholder: 'Placeholder'
+            })}}
+
+            {{ input({
+                label: 'Color',
+                name: 'color_input',
+                id: 'color_input',
+                type: 'color',
+                placeholder: 'Placeholder'
+            })}}
+        </fieldset>
+
+        <hr>
+
+        {# DISABLED EXAMPLES #}
+        <fieldset class="c-fieldset u-flow--m u-wrap--fields">
+            <legend id="disabled">Disabled</legend>
+            {{ input({
+                label: 'Text',
+                name: 'text_input',
+                id: 'text_input',
+                type: 'text',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+
+            {{ select({
+                label: "Select",
+                name: "select",
+                id: "select",
+                placeholder: "Placeholder",
+                disabled: true,
+                options: [
+                    [
+                        "option-1",
+                        "Option 1"
+                    ],
+                    [
+                        "Option 2"
+                    ],
+                    [
+                        "option-3",
+                        "Option 3"
                     ]
-                })}}
-                
-                {{ textarea({
-                    label: 'Textarea',
-                    name: 'textarea',
-                    id: 'textarea',
-                    type: 'textarea',
-                    placeholder: 'Placeholder'
-                })}}
-
-                <label class="c-label">Checkboxes</label>
-                {% for _ in ["Live","Laugh","Love"] %}
-                    <div>
-                        {{ checkbox({
-                            label: _,
-                            name: 'tenets',
-                            id: _
-                        })}}
-                    </div>
-                {% endfor %}
-                
-                <label class="c-label">Radio buttons</label>
-                {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
-                    <div>
-                        {{ radio({
-                            label: _,
-                            name: 'facts',
-                            id: _
-                        })}}
-                    </div>
-                {% endfor %}
-
-                <label class="c-label">Toggle</label>
-                {{ toggle({
-                    label: 'Toggle',
-                    name: 'toggle',
-                    id: 'toggle',
-                    type: 'toggle',
-                    placeholder: 'Toggle?'
-                })}}
-
-                <br>
-                <legend><code>&lt;input&gt;</code> variations</legend>
-                
-                {{ input({
-                    label: 'Email',
-                    name: 'email_input',
-                    id: 'email_input',
-                    type: 'email',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'Password',
-                    name: 'password_input',
-                    id: 'password_input',
-                    type: 'password'
-                })}}
-                
-                {{ input({
-                    label: 'Date',
-                    name: 'date_input',
-                    id: 'date_input',
-                    type: 'date',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ input({
-                    label: 'Search',
-                    name: 'search_input',
-                    id: 'search_input',
-                    type: 'search',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'Telephone',
-                    name: 'tel_input',
-                    id: 'tel_input',
-                    type: 'tel',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'Number',
-                    name: 'number_input',
-                    id: 'number_input',
-                    type: 'number',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ input({
-                    label: 'File',
-                    name: 'file_input',
-                    id: 'file_input',
-                    type: 'file',
-                    classes: 'c-input--file'
-                })}}
-                
-                {{ input({
-                    label: 'Range',
-                    name: 'range_input',
-                    id: 'range_input',
-                    type: 'range',
-                    placeholder: 'Placeholder'
-                })}}
-                
-                {{ input({
-                    label: 'URL',
-                    name: 'url_input',
-                    id: 'url_input',
-                    type: 'url',
-                    placeholder: 'Placeholder'
-                })}}
-
-                {{ input({
-                    label: 'Color',
-                    name: 'color_input',
-                    id: 'color_input',
-                    type: 'color',
-                    placeholder: 'Placeholder'
-                })}}
-            </div>
+                ]
+            })}}
+            
+            {{ textarea({
+                label: 'Textarea',
+                name: 'textarea',
+                id: 'textarea',
+                type: 'textarea',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+
+            <label class="c-label">Checkboxes</label>
+            {% for _ in ["Live","Laugh","Love"] %}
+                <div>
+                    {{ checkbox({
+                        label: _,
+                        name: 'tenets--disabled',
+                        id: _+'--disabled',
+                        disabled: true
+                    })}}
+                </div>
+            {% endfor %}
+            
+            <label class="c-label">Radio buttons</label>
+            {% for _ in ["Bears","Beets","Battlestar Galactica"] %}
+                <div>
+                    {{ radio({
+                        label: _,
+                        name: 'facts--disabled',
+                        id: _+'--disabled',
+                        disabled: true
+                    })}}
+                </div>
+            {% endfor %}
+            
+            <label class="c-label">Toggle</label>
+            {{ toggle({
+                label: 'Toggle',
+                name: 'toggle--disabled',
+                id: 'toggle--disabled',
+                type: 'toggle',
+                placeholder: 'Toggle?',
+                disabled: true
+            })}}
+
+            {{ input({
+                label: 'Email',
+                name: 'email_input',
+                id: 'email_input',
+                type: 'email',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+            
+            {{ input({
+                label: 'Password',
+                name: 'password_input',
+                id: 'password_input',
+                type: 'password',
+                disabled: true
+            })}}
+            
+            {{ input({
+                label: 'Date',
+                name: 'date_input',
+                id: 'date_input',
+                type: 'date',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+
+            {{ input({
+                label: 'Search',
+                name: 'search_input',
+                id: 'search_input',
+                type: 'search',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+            
+            {{ input({
+                label: 'Telephone',
+                name: 'tel_input',
+                id: 'tel_input',
+                type: 'tel',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+            
+            {{ input({
+                label: 'Number',
+                name: 'number_input',
+                id: 'number_input',
+                type: 'number',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+
+            {{ input({
+                label: 'File',
+                name: 'file_input',
+                id: 'file_input',
+                type: 'file',
+                classes: 'c-input--file',
+                disabled: true
+            })}}
+            
+            {{ input({
+                label: 'Range',
+                name: 'range_input',
+                id: 'range_input',
+                type: 'range',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+            
+            {{ input({
+                label: 'URL',
+                name: 'url_input',
+                id: 'url_input',
+                type: 'url',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
+
+            {{ input({
+                label: 'Color',
+                name: 'color_input',
+                id: 'color_input',
+                type: 'color',
+                placeholder: 'Placeholder',
+                disabled: true
+            })}}
         </fieldset>
     </form>
 
+    <hr>
+
     {{ alert({
         type: 'info',
         content: '<h3>To do:</h3>