From 27bbae1101531560d4a42cd92018dde4781170b9 Mon Sep 17 00:00:00 2001
From: markcytian <markcytian@tencent.com>
Date: Tue, 11 May 2021 14:21:01 +0800
Subject: [PATCH] feat(form): add form is-disabled storybook

---
 story/inputs/checkboxes.template.js |  6 +++++-
 story/inputs/input.template.js      | 10 +++++++++-
 story/inputs/radio.template.js      |  8 ++++++--
 story/select/select.template.js     |  4 +++-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/story/inputs/checkboxes.template.js b/story/inputs/checkboxes.template.js
index efa3d61..7230110 100644
--- a/story/inputs/checkboxes.template.js
+++ b/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>
diff --git a/story/inputs/input.template.js b/story/inputs/input.template.js
index 156cc51..5415439 100644
--- a/story/inputs/input.template.js
+++ b/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"
+    />
   `;
 };
diff --git a/story/inputs/radio.template.js b/story/inputs/radio.template.js
index a78dd99..651e8a1 100644
--- a/story/inputs/radio.template.js
+++ b/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>
diff --git a/story/select/select.template.js b/story/select/select.template.js
index e79c533..4ad9709 100644
--- a/story/select/select.template.js
+++ b/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>