import React, { Component } from 'react';
import { storiesOf } from '@storybook/react';

import { Box, Button, Grommet, CheckBox, Text } from 'grommet';
import { grommet } from 'grommet/themes';

class CheckBoxInsideButton extends Component {
  state = {
    checked: false,
  };

  render() {
    const { checked } = this.state;
    return (
      <Grommet theme={grommet}>
        <Box align="center" pad="large">
          <Button
            hoverIndicator="background"
            onClick={() => {
              this.setState({ checked: !checked });
            }}
          >
            <CheckBox
              tabIndex="-1"
              checked={checked}
              label={<Text>Hi</Text>}
              onChange={() => {}}
            />
          </Button>
        </Box>
      </Grommet>
    );
  }
}

storiesOf('CheckBox', module).add('Inside a Button', () => (
  <CheckBoxInsideButton />
));

@@ -9,25 +9,24 @@
 eact, %7B 
-Component
+useState
  %7D from 
@@ -80,17 +80,16 @@
 react';%0A
-%0A
 import %7B
@@ -106,25 +106,25 @@
 on, 
-Grommet, CheckBox
+CheckBox, Grommet
 , Te
@@ -192,12 +192,12 @@
 ;%0A%0Ac
-lass
+onst
  Che
@@ -218,89 +218,127 @@
 ton 
-extends Component %7B%0A  state
+= ()
  =
+%3E
  %7B%0A  
-  checked: 
+const %5Bchecked, setChecked%5D = useState(
 false
-,%0A  %7D;%0A%0A  render() %7B%0A  
+);%0A  const onButtonClick = () =%3E setChecked(!checked);%0A
   const 
 %7B ch
@@ -337,36 +337,38 @@
 nst 
-%7B c
+onC
 heck
-ed %7D = this.state;%0A  
+boxChange = () =%3E %7B%7D;%0A%0A
   re
@@ -378,18 +378,16 @@
 n (%0A    
-  
 %3CGrommet
@@ -404,18 +404,16 @@
 ommet%7D%3E%0A
-  
       %3CB
@@ -455,29 +455,15 @@
     
-  
 %3CButton
-%0A           
  hov
@@ -490,119 +490,34 @@
 und%22
-%0A            onClick=%7B() =%3E %7B%0A              this.setState(%7B checked: !checked %7D);%0A            %7D%7D%0A          %3E%0A  
+ onClick=%7BonButtonClick%7D%3E%0A
     
@@ -544,18 +544,16 @@
         
-  
 tabIndex
@@ -558,18 +558,16 @@
 ex=%22-1%22%0A
-  
         
@@ -600,18 +600,16 @@
         
-  
 label=%7B%3C
@@ -636,18 +636,16 @@
         
-  
 onChange
@@ -646,24 +646,32 @@
 Change=%7B
-() =%3E %7B%7D
+onCheckboxChange
 %7D%0A      
@@ -678,15 +678,11 @@
     
-  
 /%3E%0A
-  
     
@@ -705,19 +705,15 @@
     
-  
 %3C/Box%3E%0A
-  
     
@@ -727,20 +727,15 @@
 et%3E%0A
-  
   );%0A
-  %7D%0A
 %7D
+;
 %0A%0Ast

Refactor CheckBoxInsideButton story in CheckBox using Hooks (#3401)