From ea2c445a1198d3fd5127eeb7d319adc8c0604879 Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Mon, 8 Oct 2018 11:37:45 +0200
Subject: [PATCH] feat(checkboxComponent): updated checkbox PF4 component
 according to demo

---
 .../src/components/Checkbox/Checkbox.d.ts     |   6 +-
 .../src/components/Checkbox/Checkbox.docs.js  |   5 +-
 .../src/components/Checkbox/Checkbox.js       |  40 ++-
 .../src/components/Checkbox/Checkbox.test.js  |  34 ++-
 .../__snapshots__/Checkbox.test.js.snap       | 235 ++++++++++++++++--
 .../Checkbox/examples/ControlledCheckbox.js   |   8 +-
 .../Checkbox/examples/CustomLabelCheckbox.js  |  11 +
 .../Checkbox/examples/DisabledCheckbox.js     |  10 +-
 .../Checkbox/examples/UncontrolledCheckbox.js |   2 +-
 9 files changed, 308 insertions(+), 43 deletions(-)
 create mode 100644 packages/patternfly-4/react-core/src/components/Checkbox/examples/CustomLabelCheckbox.js

diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.d.ts b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.d.ts
index a6ad043da7c..3622e7a135f 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.d.ts
@@ -1,4 +1,5 @@
-import { HTMLProps, FormEvent } from 'react';
+import PropTypes from 'prop-types';
+import { HTMLProps, FormEvent, ReactNode } from 'react';
 import { Omit } from '../../typeUtils';
 
 export interface CheckboxProps
@@ -6,6 +7,9 @@ export interface CheckboxProps
   isDisabled?: boolean;
   isValid?: boolean;
   onChange?(checked: boolean, event: FormEvent<HTMLInputElement>): void;
+  id: string;
+  'aria-label': string;
+  label?: ReactNode;
 }
 
 declare const Checkbox: React.SFC<CheckboxProps>;
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js
index 3fd0d0d4e1e..6506dc9f88b 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.docs.js
+++ b/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]
 };
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.js
index 72c4d39821c..f21d492bc83 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.js
+++ b/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>
     );
   }
 }
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.test.js b/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.test.js
index f7696f3db1b..e0a65fd20ca 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.test.js
+++ b/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);
 });
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/__snapshots__/Checkbox.test.js.snap b/packages/patternfly-4/react-core/src/components/Checkbox/__snapshots__/Checkbox.test.js.snap
index dccad3f9938..fd5f8354c8a 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/__snapshots__/Checkbox.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/__snapshots__/Checkbox.test.js.snap
@@ -1,44 +1,241 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`controlled 1`] = `
+.pf-c-check__input {
+  display: block;
+}
 .pf-c-check {
   display: block;
 }
 
-<input
-  aria-invalid={false}
-  checked={true}
+<div
   className="pf-c-check"
-  disabled={false}
-  onChange={[Function]}
-  type="checkbox"
-/>
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    checked={true}
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+</div>
 `;
 
 exports[`isDisabled 1`] = `
+.pf-c-check__input {
+  display: block;
+}
+.pf-c-check {
+  display: block;
+}
+
+<div
+  className="pf-c-check"
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    className="pf-c-check__input"
+    disabled={true}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+</div>
+`;
+
+exports[`label is function 1`] = `
+.pf-c-check__input {
+  display: block;
+}
+.pf-c-check__label {
+  display: block;
+}
 .pf-c-check {
   display: block;
 }
 
-<input
-  aria-invalid={false}
+<div
   className="pf-c-check"
-  disabled={true}
-  onChange={[Function]}
-  type="checkbox"
-/>
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    checked={true}
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <label
+    className="pf-c-check__label"
+    htmlFor="check"
+  >
+    <h1>
+      Header
+    </h1>
+  </label>
+</div>
+`;
+
+exports[`label is node 1`] = `
+.pf-c-check__input {
+  display: block;
+}
+.pf-c-check__label {
+  display: block;
+}
+.pf-c-check {
+  display: block;
+}
+
+<div
+  className="pf-c-check"
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    checked={true}
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <label
+    className="pf-c-check__label"
+    htmlFor="check"
+  >
+    <h1>
+      Header
+    </h1>
+  </label>
+</div>
+`;
+
+exports[`label is string 1`] = `
+.pf-c-check__input {
+  display: block;
+}
+.pf-c-check__label {
+  display: block;
+}
+.pf-c-check {
+  display: block;
+}
+
+<div
+  className="pf-c-check"
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    checked={true}
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <label
+    className="pf-c-check__label"
+    htmlFor="check"
+  >
+    Label
+  </label>
+</div>
+`;
+
+exports[`passing HTML attribute 1`] = `
+.pf-c-check__input {
+  display: block;
+}
+.pf-c-check__label {
+  display: block;
+}
+.pf-c-check {
+  display: block;
+}
+
+<div
+  className="pf-c-check"
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    aria-labelledby="labelId"
+    checked={true}
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <label
+    className="pf-c-check__label"
+    htmlFor="check"
+  >
+    label
+  </label>
+</div>
+`;
+
+exports[`passing class 1`] = `
+.pf-c-check__input {
+  display: block;
+}
+.pf-c-check__label {
+  display: block;
+}
+.pf-c-check.class-123 {
+  display: block;
+}
+
+<div
+  className="pf-c-check class-123"
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    checked={true}
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <label
+    className="pf-c-check__label"
+    htmlFor="check"
+  >
+    label
+  </label>
+</div>
 `;
 
 exports[`uncontrolled 1`] = `
+.pf-c-check__input {
+  display: block;
+}
 .pf-c-check {
   display: block;
 }
 
-<input
-  aria-invalid={false}
+<div
   className="pf-c-check"
-  disabled={false}
-  onChange={[Function]}
-  type="checkbox"
-/>
+>
+  <input
+    aria-invalid={false}
+    aria-label="check"
+    className="pf-c-check__input"
+    disabled={false}
+    id="check"
+    onChange={[Function]}
+    type="checkbox"
+  />
+</div>
 `;
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js
index d7bb9c67b50..9c7d2a1f030 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/examples/ControlledCheckbox.js
@@ -14,7 +14,13 @@ class ControlledCheckbox extends React.Component {
 
   render() {
     return (
-      <Checkbox checked={this.state.checked} onChange={this.handleChange} aria-label="controlled checkbox example" />
+      <Checkbox
+        label="Controlled CheckBox"
+        checked={this.state.checked}
+        onChange={this.handleChange}
+        aria-label="controlled checkbox example"
+        id="check-1"
+      />
     );
   }
 }
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/CustomLabelCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/CustomLabelCheckbox.js
new file mode 100644
index 00000000000..22d86097d50
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/examples/CustomLabelCheckbox.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox, Badge } from '@patternfly/react-core';
+
+class CustomLabelCheckbox extends React.Component {
+  static title = 'Custom label Checkbox';
+  render() {
+    return <Checkbox label={<Badge>Badge here!</Badge>} aria-label="uncontrolled checkbox example" id="check-5" />;
+  }
+}
+
+export default CustomLabelCheckbox;
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js
index af72d075ea5..c49605f33fa 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/examples/DisabledCheckbox.js
@@ -6,8 +6,14 @@ class DisabledCheckbox extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <Checkbox aria-label="disabled checked checkbox example" defaultChecked isDisabled />{' '}
-        <Checkbox aria-label="disabled checkbox example" isDisabled />
+        <Checkbox
+          id="check-3"
+          label="Disabled CheckBox"
+          aria-label="disabled checked checkbox example"
+          defaultChecked
+          isDisabled
+        />{' '}
+        <Checkbox id="check-4" label="Disabled CheckBox" aria-label="disabled checkbox example" isDisabled />
       </React.Fragment>
     );
   }
diff --git a/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js b/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js
index b01f49d0167..b0d581f64ce 100644
--- a/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js
+++ b/packages/patternfly-4/react-core/src/components/Checkbox/examples/UncontrolledCheckbox.js
@@ -4,7 +4,7 @@ import { Checkbox } from '@patternfly/react-core';
 class UncontrolledCheckbox extends React.Component {
   static title = 'Uncontrolled Checkbox';
   render() {
-    return <Checkbox aria-label="uncontrolled checkbox example" />;
+    return <Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-2" />;
   }
 }