feat: disabled cursor for form inputs

nl-design-system · Sep 19, 2021 · 0f5ada6 · 0f5ada6
1 parent 486e4ec
commit 0f5ada6
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 1 deletion.
diff --git a/components/button/bem.scss b/components/button/bem.scss
@@ -34,6 +34,7 @@
 .utrecht-button--disabled {
   background-color: var(--utrecht-button-disabled-background-color);
   color: var(--utrecht-button-disabled-color);
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-button--focus,

diff --git a/components/checkbox/bem.js b/components/checkbox/bem.js
@@ -11,7 +11,7 @@ export const defaultArgs = {
 };
 
 export const Checkbox = ({ checked = false, disabled = false }) =>
-  `<input type="checkbox"${checked ? ' checked' : ''} class="${clsx(
+  `<input type="checkbox"${checked ? ' checked' : ''}${disabled ? ' disabled' : ''} class="${clsx(
     'utrecht-checkbox',
     checked && 'utrecht-checkbox--checked',
     disabled && 'utrecht-checkbox--disabled',

diff --git a/components/checkbox/bem.scss b/components/checkbox/bem.scss
@@ -9,3 +9,7 @@
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
+
+.utrecht-checkbox--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
diff --git a/components/common/action.tokens.json b/components/common/action.tokens.json
@@ -0,0 +1,14 @@
+{
+  "utrecht": {
+    "action": {
+      "disabled": {
+        "cursor": {
+          "css": {
+            "syntax": "*",
+            "inherits": true
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/form-toggle/bem.scss b/components/form-toggle/bem.scss
@@ -53,6 +53,7 @@
   border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
   border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
   border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-form-toggle__thumb {

diff --git a/components/radio-button/bem.scss b/components/radio-button/bem.scss
@@ -10,3 +10,7 @@
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
+
+.utrecht-radio-button--disabled {
+  cursor: var(--utrecht-action-disabled-cursor);
+}
diff --git a/components/select/bem.scss b/components/select/bem.scss
@@ -54,6 +54,7 @@
     --utrecht-select-disabled-color,
     var(--utrecht-form-input-disabled-color, var(--utrecht-select-color, var(--utrecht-form-input-color)))
   );
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-select--focus {

diff --git a/components/textarea/bem.scss b/components/textarea/bem.scss
@@ -69,6 +69,7 @@
     --utrecht-textarea-disabled-color,
     var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color)))
   );
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textarea--focus {

diff --git a/components/textbox/bem.scss b/components/textbox/bem.scss
@@ -70,6 +70,7 @@
     --utrecht-textbox-disabled-color,
     var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color)))
   );
+  cursor: var(--utrecht-action-disabled-cursor);
 }
 
 .utrecht-textbox--focus {

diff --git a/proprietary/design-tokens/src/common/utrecht/action.tokens.json b/proprietary/design-tokens/src/common/utrecht/action.tokens.json
@@ -0,0 +1,7 @@
+{
+  "utrecht": {
+    "action": {
+      "disabled": { "cursor": { "value": "not-allowed" } }
+    }
+  }
+}