Merge pull request #458 from loo41/features/form-disabled

feat(form): add "is-disabled" class

Author: guastallaigor

scss/form/checkboxes.scss

@@ -103,4 +103,32 @@
       color: $color-white;
     }
   }
+  &.is-disabled {
+    $color: map-get($disabled-colors, "normal");
+    $colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+
+    + span {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    + span::before {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:checked + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+
+    &:checked:focus + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+  }
 }

scss/form/inputs.scss

@@ -28,6 +28,12 @@
   &.is-error {
     @include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
   }
+  &.is-disabled {
+    @include border-style(map-get($disabled-colors, "normal"), map-get($disabled-colors, "shadow"));
+
+    color: map-get($disabled-colors, "normal");
+    cursor: not-allowed;
+  }
 }
 
 .nes-field {

scss/form/radios.scss

@@ -73,4 +73,39 @@
       color: $color-white;
     }
   }
+  &.is-disabled {
+    $color: map-get($disabled-colors, "normal");
+    $colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+
+    + span {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    + span::before {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    &:checked:hover,
+    &:checked:focus {
+      & + span::before {
+        animation: unset;
+      }
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:checked + span::before {
+      @include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+
+    &:checked:focus + span::before {
+      @include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+  }
 }

scss/form/selects.scss

@@ -50,7 +50,8 @@
     "dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
     "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
     "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
-    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
+    "disable" map-get($disabled-colors, "normal") map-get($disabled-colors, "shadow");
   @each $type in $types {
     &.is-#{nth($type, 1)} {
       $color: nth($type, 2);
@@ -66,4 +67,11 @@
       }
     }
   }
+  &.is-disabled {
+    @extend .is-disable;
+    select {
+      color: map-get($disabled-colors, "normal");
+      cursor: not-allowed;
+    }
+  }
 }

story/inputs/checkboxes.template.js

@@ -3,18 +3,22 @@ import classNames from 'classnames';
 
 export default () => {
   const isDark = boolean('is-dark', false);
+  const isDisabled = boolean('is-disabled', false);
 
   const checkBoxClasses = classNames(
     'nes-checkbox',
     {
       'is-dark': isDark,
     },
+    {
+      'is-disabled': isDisabled,
+    },
   );
 
   return `
     <div style="${isDark ? 'background-color: black;' : ''}">
       <label>
-        <input type="checkbox" class="${checkBoxClasses}" checked />
+        <input type="checkbox" ${isDisabled && 'disabled'} class="${checkBoxClasses}" checked />
         <span>Enable</span>
       </label>
     </div>

story/inputs/input.template.js

@@ -4,9 +4,11 @@ import classNames from 'classnames';
 import sharedOptions from '../_helpers/shared';
 
 export default () => {
+  const disabled = 'is-disabled';
   const inputOptions = select('Input Classes', {
     default: '',
     ...sharedOptions,
+    [disabled]: disabled,
   }, '');
 
   const inputClasses = classNames(
@@ -15,6 +17,12 @@ export default () => {
   );
 
   return `
-    <input type="text" id="name_field" class="${inputClasses}" placeholder="NES.css">
+    <input 
+      type="text" 
+      id="name_field" 
+      ${inputOptions.includes(disabled) && 'disabled'}  
+      class="${inputClasses}" 
+      placeholder="NES.css"
+    />
   `;
 };

story/inputs/radio.template.js

@@ -4,22 +4,26 @@ import classNames from 'classnames';
 
 export default () => {
   const isDark = boolean('is-dark', false);
+  const isDisabled = boolean('is-disabled', false);
 
   const radioClasses = classNames(
     'nes-radio',
     {
       'is-dark': isDark,
     },
+    {
+      'is-disabled': isDisabled,
+    },
   );
 
   return `
     <div style="${isDark ? 'background-color: black;' : ''}">
       <label>
-        <input type="radio" class="${radioClasses}" name="answer" checked />
+        <input type="radio" ${isDisabled && 'disabled'} class="${radioClasses}" name="answer" checked />
         <span>Yes</span>
       </label>
       <label>
-        <input type="radio" class="${radioClasses}" name="answer" />
+        <input type="radio" ${isDisabled && 'disabled'} class="${radioClasses}" name="answer" />
         <span>No</span>
       </label>
     </div>

story/select/select.template.js

@@ -5,9 +5,11 @@ import sharedOptions from '../_helpers/shared';
 
 export default () => {
   const isDark = boolean('is-dark', false);
+  const disabled = 'is-disabled';
   const selectOptions = select('class', {
     default: '',
     ...sharedOptions,
+    [disabled]: disabled,
   }, '');
 
   const selectedClasses = classNames(
@@ -18,7 +20,7 @@ export default () => {
 
   return `
     <div class="${selectedClasses}">
-      <select required>
+      <select required ${selectOptions.includes(disabled) && 'disabled'} >
         <option value="" disabled selected hidden>Select...</option>
         <option value="0">To be</option>
         <option value="1">Not to be</option>