mp-design-system 1.0.2 → 1.0.4

package/package.json

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

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

@@ -39,7 +39,7 @@ module.exports = {
     {
       title: 'Disabled',
       context: {
-        disabled: true
+        disabled: false
       }
     }
   ],

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

@@ -1,4 +1,5 @@
 {% inputWrapper params.error %}
+<div class="c-form-row u-disabled">
   <label class="{{ 'u-hidden' if params.hideLabel else 'c-label' }}" for="{{ params.id }}">{{ params.label }}</label>
   {% if params.button %}
   <div class="u-flex u-border">
@@ -10,4 +11,5 @@
   {% if params.button %}
   </div>
   {% endif %}
+  </div>
 {% endinputWrapper %}

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

@@ -85,7 +85,8 @@
   }
 
   &[disabled],
-  [disabled] & {
+  [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;
@@ -96,6 +97,10 @@
   }
 }
 
+.u-disabled > .c-input {
+  @extend .c-input--disabled;
+}
+
 .c-input--with-button {
   // padding-right: 44px;
   border: 0;

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

@@ -37,6 +37,9 @@ function openOffCanvas(offCanvas) {
 
   // Add keydown event listener to close the off-canvas drawer with the Esc key
   document.addEventListener('keydown', handleKeyDown);
+
+  // Prevent background scroll
+  document.body.style.overflowY = 'hidden';
 }
 
 // Function to handle the backdrop click
@@ -66,6 +69,9 @@ function closeOffCanvas(offCanvas) {
 
   // Remove keydown event listener when closing the off-canvas drawer
   document.removeEventListener('keydown', handleKeyDown);
+
+  // Allow background scroll
+  document.body.style.overflowY = '';
 }
 
 // Update button functionality

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

@@ -50,7 +50,7 @@
 
   &__main {
     @include margin-bottom('m');
-    @include padding(0, 's');
+    @include padding('3xs', 's');
     overflow-y: scroll;
   }
 

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