Add disabled form control components to stories

[MAILPOET-2773]

assets/js/src/common/form/checkbox/_stories/checkbox.tsx

@@ -14,6 +14,11 @@ const options = [
   { value: 2, label: 'Group option 2' },
 ];
 
+const optionsDisabled = [
+  { value: 1, label: 'Group option 1', disabled: true },
+  { value: 2, label: 'Group option 2' },
+];
+
 export const Checkboxes = () => (
   <>
     <Heading level={3}>Inline individual checkboxes</Heading>
@@ -65,6 +70,14 @@ export const Checkboxes = () => (
     />
     <br />
 
+    <Heading level={3}>Disabled inline group checkboxes</Heading>
+    <CheckboxGroup
+      name="story-group-disabled"
+      onChange={action('checkbox-group-disabled')}
+      options={optionsDisabled}
+    />
+    <br />
+
     <Heading level={3}>Full-width group checkboxes</Heading>
     <CheckboxGroup
       name="story-group-full"

assets/js/src/common/form/input/_stories/input.tsx

@@ -67,6 +67,12 @@ export const Inputs = () => (
         iconStart={icon}
         iconEnd={icon}
       />
+      <div className="mailpoet-gap" />
+      <Input
+        disabled
+        type="text"
+        placeholder="Disabled input"
+      />
     </div>
     <br />
     <Heading level={3}>Full-width inputs</Heading>

assets/js/src/common/form/radio/_stories/radio.tsx

@@ -14,6 +14,11 @@ const options = [
   { value: 2, label: 'Group option 2' },
 ];
 
+const optionsDisabled = [
+  { value: 1, label: 'Group option 1' },
+  { value: 2, label: 'Group option 2', disabled: true },
+];
+
 export const Radios = () => (
   <>
     <Heading level={3}>Inline individual radios</Heading>
@@ -65,6 +70,14 @@ export const Radios = () => (
     />
     <br />
 
+    <Heading level={3}>Disabled inline group radios</Heading>
+    <RadioGroup
+      name="story-group-disabled"
+      onChange={action('radio-group-disabled')}
+      options={optionsDisabled}
+    />
+    <br />
+
     <Heading level={3}>Full-width group radios</Heading>
     <RadioGroup
       name="story-group-full"

assets/js/src/common/form/react_select/_stories/react_select.tsx

@@ -83,6 +83,13 @@ export const ReactSelect = () => {
           defaultValue={[options[2], options[1]]}
           onChange={action('regular multi')}
         />
+        <div className="mailpoet-gap" />
+        <Select
+          disabled
+          options={options}
+          placeholder="Disabled select"
+          onChange={action('regular single')}
+        />
       </div>
       <br />
       <Heading level={3}>Full-width select boxes</Heading>

assets/js/src/common/form/select/_stories/select.tsx

@@ -42,6 +42,10 @@ export const NativeSelect = () => (
         <option value="2">Option 2</option>
         <option value="3">Option 3</option>
       </Select>
+      <div className="mailpoet-gap" />
+      <Select disabled>
+        <option value="1">Disabled</option>
+      </Select>
     </div>
     <br />
     <Heading level={3}>Full-width select boxes</Heading>

assets/js/src/common/form/toggle/_stories/toggle.tsx

@@ -31,6 +31,16 @@ export const Toggles = () => (
           name="toggle-2"
         />
       </Grid.SpaceBetween>
+      <div className="mailpoet-gap" />
+      <Grid.SpaceBetween>
+        <label htmlFor="toggle-3">Toggle disabled</label>
+        <Toggle
+          disabled
+          onCheck={action('toggle-3')}
+          id="toggle-3"
+          name="toggle-3"
+        />
+      </Grid.SpaceBetween>
     </Grid.Column>
   </>
 );

assets/js/src/common/form/yesno/_stories/yesno.tsx

@@ -33,6 +33,17 @@ export const YesNos = () => (
           name="yesno-2"
         />
       </Grid.SpaceBetween>
+      <div className="mailpoet-gap" />
+      <Grid.SpaceBetween verticalAlign="center">
+        <div>
+          YesNo disabled
+        </div>
+        <YesNo
+          disabled
+          onCheck={action('yesno-3')}
+          name="yesno-3"
+        />
+      </Grid.SpaceBetween>
     </Grid.Column>
   </>
 );