feat(form): add form is-disabled storybook

Author: markcytian

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>