feat(checkbox,formState): issues/240 form components (#246)

* checkbox, pf wrapper component, emulated event obj
* formState, maintain a forms state
* select, group form components

.eslintrc

@@ -100,6 +100,12 @@
     "react/state-in-constructor": [ 1, "never" ],
     "space-before-function-paren": 0,
     "jsx-a11y/anchor-is-valid": 1,
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "labelComponents": ["CustomInputLabel"],
+      "labelAttributes": ["label"],
+      "controlComponents": ["CustomInput"],
+      "depth": 3
+    }],
     "jsx-a11y/label-has-for": [ 2, {
       "components": [ "Label" ],
       "required": {

src/components/form/__tests__/__snapshots__/checkbox.test.js.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox Component should handle children as a label: children label checkbox 1`] = `
+<div
+  class="pf-c-check"
+>
+  <input
+    aria-invalid="false"
+    aria-label="lorem ipsum"
+    class="pf-c-check__input"
+    id="generatedid-"
+    name="generatedid-"
+    type="checkbox"
+    value=""
+  />
+  <label
+    class="pf-c-check__label"
+    for="generatedid-"
+  >
+    lorem ipsum
+  </label>
+</div>
+`;
+
+exports[`Checkbox Component should handle readOnly as isDisabled: active checkbox 1`] = `
+<div
+  class="pf-c-check"
+>
+  <input
+    aria-invalid="false"
+    aria-label=""
+    class="pf-c-check__input"
+    id="generatedid-"
+    name="generatedid-"
+    type="checkbox"
+    value=""
+  />
+</div>
+`;
+
+exports[`Checkbox Component should handle readOnly as isDisabled: isDisabled checkbox 1`] = `
+<div
+  class="pf-c-check"
+>
+  <input
+    aria-invalid="false"
+    aria-label=""
+    class="pf-c-check__input"
+    disabled=""
+    id="generatedid-"
+    name="generatedid-"
+    type="checkbox"
+    value=""
+  />
+</div>
+`;
+
+exports[`Checkbox Component should handle readOnly as isDisabled: readOnly checkbox 1`] = `
+<div
+  class="pf-c-check"
+>
+  <input
+    aria-invalid="false"
+    aria-label=""
+    class="pf-c-check__input"
+    disabled=""
+    id="generatedid-"
+    name="generatedid-"
+    readonly=""
+    type="checkbox"
+    value=""
+  />
+</div>
+`;
+
+exports[`Checkbox Component should render a basic component: basic checkbox 1`] = `
+<div
+  class="pf-c-check"
+>
+  <input
+    aria-invalid="false"
+    aria-label=""
+    class="pf-c-check__input"
+    id="generatedid-"
+    name="generatedid-"
+    type="checkbox"
+    value=""
+  />
+</div>
+`;
+
+exports[`Checkbox Component should return an emulated onchange event: emulated event 1`] = `
+Object {
+  "checked": false,
+  "currentTarget": <input
+    aria-invalid="false"
+    aria-label="lorem ipsum"
+    class="pf-c-check__input"
+    id="generatedid-"
+    name="generatedid-"
+    type="checkbox"
+    value=""
+  />,
+  "id": "generatedid-",
+  "name": "generatedid-",
+  "persist": [Function],
+  "target": <input
+    aria-invalid="false"
+    aria-label="lorem ipsum"
+    class="pf-c-check__input"
+    id="generatedid-"
+    name="generatedid-"
+    type="checkbox"
+    value=""
+  />,
+  "value": undefined,
+}
+`;

src/components/form/__tests__/__snapshots__/formState.test.js.snap

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormState Component should clone returned values to avoid mutation by consumer: not mutated 1`] = `
+Object {
+  "lorem": "ipsum",
+}
+`;
+
+exports[`FormState Component should do a basic validation check: basic validation 1`] = `
+Object {
+  "lorem": "required",
+}
+`;
+
+exports[`FormState Component should do a basic validation check: initial errors 1`] = `Object {}`;
+
+exports[`FormState Component should do a validation check on mount: errors on mount 1`] = `
+Object {
+  "lorem": "required test",
+}
+`;
+
+exports[`FormState Component should handle basic checked values: checked input types 1`] = `
+<form>
+  <label>
+    Ipsum
+    <input
+      checked=""
+      name="ipsum"
+      type="radio"
+    />
+  </label>
+  <label>
+    Dolor
+    <input
+      checked=""
+      name="dolor"
+      type="checkbox"
+    />
+  </label>
+</form>
+`;
+
+exports[`FormState Component should handle custom events: multiple custom events 1`] = `
+Object {
+  "dolor": "sit",
+  "lorem": "woot again",
+}
+`;
+
+exports[`FormState Component should handle custom events: single custom event 1`] = `
+Object {
+  "dolor": "",
+  "lorem": "woot",
+}
+`;
+
+exports[`FormState Component should render a basic component: basic render 1`] = `
+<form>
+  <label>
+    Lorem
+    <input
+      name="lorem"
+      readonly=""
+      type="text"
+      value="ipsum"
+    />
+  </label>
+</form>
+`;
+
+exports[`FormState Component should render a basic component: initial props 1`] = `
+Object {
+  "children": [Function],
+  "onReset": [Function],
+  "onSubmit": [Function],
+  "resetUsingSetValues": true,
+  "setValues": Object {
+    "lorem": "ipsum",
+  },
+  "setValuesAssumeBoolIsChecked": true,
+  "setValuesOnUpdate": false,
+  "validate": [Function],
+  "validateOnMount": false,
+  "validateOnUpdate": false,
+}
+`;
+
+exports[`FormState Component should render a basic component: initial state 1`] = `
+Object {
+  "isSubmitting": false,
+  "isUpdating": false,
+  "isValid": null,
+  "isValidating": false,
+  "submitCount": 0,
+}
+`;
+
+exports[`FormState Component should update handle reset, changes, and submit events while updating state: onevent 1`] = `
+Object {
+  "isSubmitting": false,
+  "isUpdating": false,
+  "isValid": true,
+  "isValidating": false,
+  "submitCount": 0,
+}
+`;
+
+exports[`FormState Component should update handle reset, changes, and submit events while updating state: onevent values updated 1`] = `
+Object {
+  "lorem": "dolor",
+}
+`;
+
+exports[`FormState Component should update handle reset, changes, and submit events while updating state: onreset 1`] = `
+Object {
+  "isSubmitting": false,
+  "isUpdating": false,
+  "isValid": null,
+  "isValidating": false,
+  "submitCount": 0,
+}
+`;
+
+exports[`FormState Component should update handle reset, changes, and submit events while updating state: onsubmit 1`] = `
+Object {
+  "isSubmitting": false,
+  "isUpdating": false,
+  "isValid": true,
+  "isValidating": false,
+  "submitCount": 1,
+}
+`;
+
+exports[`FormState Component should update handle reset, changes, and submit events while updating state: reset values updated 1`] = `
+Object {
+  "lorem": "ipsum",
+}
+`;

src/components/form/__tests__/checkbox.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Checkbox from '../checkbox';
+
+describe('Checkbox Component', () => {
+  it('should render a basic component', () => {
+    const props = {};
+
+    const component = mount(<Checkbox {...props} />);
+    expect(component.render()).toMatchSnapshot('basic checkbox');
+  });
+
+  it('should handle readOnly as isDisabled', () => {
+    const props = {
+      readOnly: true
+    };
+
+    const component = mount(<Checkbox {...props} />);
+    expect(component.render()).toMatchSnapshot('readOnly checkbox');
+
+    component.setProps({
+      readOnly: false,
+      isDisabled: true
+    });
+
+    expect(component.render()).toMatchSnapshot('isDisabled checkbox');
+
+    component.setProps({
+      readOnly: false,
+      isDisabled: false
+    });
+
+    expect(component.render()).toMatchSnapshot('active checkbox');
+  });
+
+  it('should handle children as a label', () => {
+    const props = {};
+    const component = mount(<Checkbox {...props}>lorem ipsum</Checkbox>);
+    expect(component.render()).toMatchSnapshot('children label checkbox');
+  });
+
+  it('should return an emulated onchange event', done => {
+    const props = {};
+
+    props.onChange = event => {
+      expect(event).toMatchSnapshot('emulated event');
+      done();
+    };
+
+    const component = mount(<Checkbox {...props}>lorem ipsum</Checkbox>);
+    component.find('input').simulate('change');
+  });
+});