feat(checkboxComponent): updated checkbox PF4 component according to …

…demo (patternfly#717)

packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.d.ts

@@ -1,11 +1,15 @@
-import { HTMLProps, FormEvent } from 'react';
+import PropTypes from 'prop-types';
+import { HTMLProps, FormEvent, ReactNode } from 'react';
 import { Omit } from '../../typeUtils';
 
 export interface CheckboxProps
   extends Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled'> {
   isDisabled?: boolean;
   isValid?: boolean;
   onChange?(checked: boolean, event: FormEvent<HTMLInputElement>): void;
+  id: string;
+  'aria-label': string;
+  label?: ReactNode;
 }
 
 declare const Checkbox: React.SFC<CheckboxProps>;

packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js

@@ -1,12 +1,13 @@
-import { Checkbox } from '@patternfly/react-core';
 import Controlled from './examples/ControlledCheckbox';
 import Uncontrolled from './examples/UncontrolledCheckbox';
 import Disabled from './examples/DisabledCheckbox';
+import Custom from './examples/CustomLabelCheckbox';
+import { Checkbox } from '@patternfly/react-core';
 
 export default {
   title: 'Checkbox',
   components: {
     Checkbox
   },
-  examples: [Controlled, Uncontrolled, Disabled]
+  examples: [Controlled, Uncontrolled, Disabled, Custom]
 };

packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.js

@@ -1,24 +1,31 @@
 import React from 'react';
 import styles from '@patternfly/patternfly-next/components/Check/check.css';
-import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
+import { css, getModifier } from '@patternfly/react-styles';
 
 const propTypes = {
-  /** additional classes added to the Checkbox */
+  /** Additional classes added to the Checkbox. */
   className: PropTypes.string,
   /** Flag to show if the Checkbox selection is valid or invalid. */
   isValid: PropTypes.bool,
   /** Flag to show if the Checkbox is disabled. */
   isDisabled: PropTypes.bool,
   /** A callback for when the Checkbox selection changes. */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /** Label text of the checkbox. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Id of the checkbox. */
+  id: PropTypes.string.isRequired,
+  /** Aria-label of the checkbox. */
+  'aria-label': PropTypes.any.isRequired
 };
 
 const defaultProps = {
   className: '',
   isValid: true,
   isDisabled: false,
-  onChange: () => undefined
+  onChange: () => undefined,
+  label: undefined
 };
 
 class Checkbox extends React.Component {
@@ -27,16 +34,23 @@ class Checkbox extends React.Component {
   };
 
   render() {
-    const { className, onChange, isValid, isDisabled, ...props } = this.props;
+    const { className, onChange, isValid, isDisabled, label, ...props } = this.props;
     return (
-      <input
-        {...props}
-        className={css(styles.check, className)}
-        type="checkbox"
-        onChange={this.handleChange}
-        aria-invalid={!isValid}
-        disabled={isDisabled}
-      />
+      <div className={css(styles.check, className)}>
+        <input
+          {...props}
+          className={css(styles.checkInput)}
+          type="checkbox"
+          onChange={this.handleChange}
+          aria-invalid={!isValid}
+          disabled={isDisabled}
+        />
+        {label && (
+          <label className={css(styles.checkLabel, getModifier(styles, isDisabled && 'disabled'))} htmlFor={props.id}>
+            {label}
+          </label>
+        )}
+      </div>
     );
   }
 }

packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.test.js

@@ -8,17 +8,43 @@ const props = {
 };
 
 test('controlled', () => {
-  const view = shallow(<Checkbox checked />);
+  const view = shallow(<Checkbox checked id="check" aria-label="check" />);
   expect(view).toMatchSnapshot();
 });
 
 test('uncontrolled', () => {
-  const view = shallow(<Checkbox />);
+  const view = shallow(<Checkbox id="check" aria-label="check" />);
   expect(view).toMatchSnapshot();
 });
 
 test('isDisabled', () => {
-  const view = shallow(<Checkbox isDisabled />);
+  const view = shallow(<Checkbox id="check" isDisabled aria-label="check" />);
+  expect(view).toMatchSnapshot();
+});
+
+test('label is string', () => {
+  const view = shallow(<Checkbox label="Label" id="check" checked aria-label="check" />);
+  expect(view).toMatchSnapshot();
+});
+
+test('label is function', () => {
+  const functionLabel = () => <h1>Header</h1>;
+  const view = shallow(<Checkbox label={functionLabel()} id="check" checked aria-label="check" />);
+  expect(view).toMatchSnapshot();
+});
+
+test('label is node', () => {
+  const view = shallow(<Checkbox label={<h1>Header</h1>} id="check" checked aria-label="check" />);
+  expect(view).toMatchSnapshot();
+});
+
+test('passing class', () => {
+  const view = shallow(<Checkbox label="label" className="class-123" id="check" checked aria-label="check" />);
+  expect(view).toMatchSnapshot();
+});
+
+test('passing HTML attribute', () => {
+  const view = shallow(<Checkbox label="label" aria-labelledby="labelId" id="check" checked aria-label="check" />);
   expect(view).toMatchSnapshot();
 });
 
@@ -27,7 +53,7 @@ test('checkbox passes value and event to onChange handler', () => {
   const event = {
     currentTarget: { checked: newValue }
   };
-  const view = shallow(<Checkbox {...props} />);
+  const view = shallow(<Checkbox id="check" {...props} aria-label="check" />);
   view.find('input').simulate('change', event);
   expect(props.onChange).toBeCalledWith(newValue, event);
 });