mp-design-system 1.0.2 → 1.0.3

package/package.json

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

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

@@ -85,7 +85,8 @@
   }
 
   &[disabled],
-  [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;

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