{"size": 1735, "ext": "js", "max_stars_repo_path": "stories/checkbox.stories.js", "max_stars_repo_name": "pbrocks/wp-storybook", "max_stars_repo_stars_event_min_datetime": "2019-01-02T16:06:34.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-01T15:23:41.000Z", "max_issues_repo_path": "stories/checkbox.stories.js", "max_issues_repo_name": "pbrocks/wp-storybook", "max_issues_repo_issues_event_min_datetime": "2019-01-03T12:39:35.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-17T19:23:16.000Z", "max_forks_repo_path": "stories/checkbox.stories.js", "max_forks_repo_name": "pbrocks/wp-storybook", "max_forks_repo_forks_event_min_datetime": "2019-01-02T15:45:07.000Z", "max_forks_repo_forks_event_max_datetime": "2020-07-31T16:53:10.000Z"}
{"max_stars_count": 101, "max_issues_count": 15, "max_forks_count": 9, "avg_line_length": 24.7857142857, "max_line_length": 89, "alphanum_fraction": 0.6570605187}
/**
 * External Dependencies
 */
import React from 'react';

/**
 * Storybook Dependencies
 */
import { storiesOf } from '@storybook/react';
import { withReadme } from 'storybook-readme';

/**
 * WordPress Dependencies
 */
import { CheckboxControl } from "@wordpress/components";
import { withState } from '@wordpress/compose';
import CheckboxControlReadme from '@wordpress/components/src/checkbox-control/README.md';

/**
 * Stories
 */
const CheckboxControlBasic = withState({
  isChecked: false,
})(({ isChecked, setState }) => (
  <CheckboxControl
    label="Is author"
    checked={isChecked}
    onChange={(isChecked) => { setState({ isChecked }) }}
  />
));

const CheckboxControlChecked = withState({
  isChecked: true,
})(({ isChecked, setState }) => (
  <CheckboxControl
    label="Is author"
    checked={isChecked}
    onChange={(isChecked) => { setState({ isChecked }) }}
  />
));

const CheckboxControlHeading = withState({
  isChecked: true,
})(({ isChecked, setState }) => (
  <CheckboxControl
    heading="User"
    label="Is author"
    checked={isChecked}
    onChange={(isChecked) => { setState({ isChecked }) }}
  />
));

const CheckboxControlHelp = withState({
  isChecked: true,
})(({ isChecked, setState }) => (
  <CheckboxControl
    heading="User"
    label="Is author"
    help="Is the user a author or not?"
    checked={isChecked}
    onChange={(isChecked) => { setState({ isChecked }) }}
  />
));

storiesOf('Components|CheckboxControl', module)
  .addDecorator(withReadme(CheckboxControlReadme))
  .add('Basic', () => <CheckboxControlBasic />)
  .add('Checked', () => <CheckboxControlChecked />)
  .add('With Heading', () => <CheckboxControlHeading />)
  .add('With Help', () => <CheckboxControlHelp />);