refactor(radio): discovery-153 pf4 radio (#153)

* addSourceWizardStepOne, radio update
* radio, pf4 radio wrapper
* styling, temporary adjustment

src/components/addSourceWizard/__tests__/__snapshots__/addSourceWizardStepOne.test.js.snap

@@ -10,6 +10,7 @@ exports[`AddSourceWizardStepOne Component should render a non-connected componen
   <div
     class="pf-c-form__group"
     id="generatedid-"
+    role="radiogroup"
   >
     <div
       class="pf-c-form__group-label"
@@ -26,54 +27,71 @@ exports[`AddSourceWizardStepOne Component should render a non-connected componen
        
     </div>
     <div
-      class="pf-c-form__group-control"
+      class="pf-c-form__group-control pf-m-stack"
     >
       <div
-        class="form-group"
+        class="pf-c-radio quipucords-form__radio "
       >
-        <div
-          class="radio"
+        <input
+          aria-invalid="false"
+          checked=""
+          class="pf-c-radio__input"
+          data-ouia-component-id="OUIA-Generated-Radio-1"
+          data-ouia-component-type="PF4/Radio"
+          data-ouia-safe="true"
+          id="sourceType-network"
+          name="sourceType"
+          type="radio"
+          value="network"
+        />
+        <label
+          class="pf-c-radio__label"
+          for="sourceType-network"
         >
-          <label
-            title=""
-          >
-            <input
-              checked=""
-              name="sourceType"
-              type="radio"
-              value="network"
-            />
-            Network Range
-          </label>
-        </div>
-        <div
-          class="radio"
+          Network Range
+        </label>
+      </div>
+      <div
+        class="pf-c-radio quipucords-form__radio "
+      >
+        <input
+          aria-invalid="false"
+          class="pf-c-radio__input"
+          data-ouia-component-id="OUIA-Generated-Radio-2"
+          data-ouia-component-type="PF4/Radio"
+          data-ouia-safe="true"
+          id="sourceType-satellite"
+          name="sourceType"
+          type="radio"
+          value="satellite"
+        />
+        <label
+          class="pf-c-radio__label"
+          for="sourceType-satellite"
         >
-          <label
-            title=""
-          >
-            <input
-              name="sourceType"
-              type="radio"
-              value="satellite"
-            />
-            Satellite
-          </label>
-        </div>
-        <div
-          class="radio"
+          Satellite
+        </label>
+      </div>
+      <div
+        class="pf-c-radio quipucords-form__radio "
+      >
+        <input
+          aria-invalid="false"
+          class="pf-c-radio__input"
+          data-ouia-component-id="OUIA-Generated-Radio-3"
+          data-ouia-component-type="PF4/Radio"
+          data-ouia-safe="true"
+          id="sourceType-vcenter"
+          name="sourceType"
+          type="radio"
+          value="vcenter"
+        />
+        <label
+          class="pf-c-radio__label"
+          for="sourceType-vcenter"
         >
-          <label
-            title=""
-          >
-            <input
-              name="sourceType"
-              type="radio"
-              value="vcenter"
-            />
-            vCenter Server
-          </label>
-        </div>
+          vCenter Server
+        </label>
       </div>
     </div>
   </div>

src/components/addSourceWizard/addSourceWizardStepOne.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form as Pf3Form, Radio } from 'patternfly-react';
 import { Form } from '@patternfly/react-core';
+import { Radio } from '../form/radio';
 import { connect, store, reduxSelectors, reduxTypes } from '../../redux';
 import { FormGroup } from '../form/formGroup';
 import { FormState } from '../formState/formState';
@@ -24,33 +24,31 @@ class AddSourceWizardStepOne extends React.Component {
       <FormState validateOnMount setValues={{ sourceType: type }} validate={this.isStepValid}>
         {({ values, handleOnEvent, handleOnSubmit }) => (
           <Form isHorizontal onSubmit={handleOnSubmit}>
-            <FormGroup label="Select source type">
-              <Pf3Form.FormGroup>
-                <Radio
-                  name="sourceType"
-                  value="network"
-                  checked={values.sourceType === 'network'}
-                  onChange={handleOnEvent}
-                >
-                  Network Range
-                </Radio>
-                <Radio
-                  name="sourceType"
-                  value="satellite"
-                  checked={values.sourceType === 'satellite'}
-                  onChange={handleOnEvent}
-                >
-                  Satellite
-                </Radio>
-                <Radio
-                  name="sourceType"
-                  value="vcenter"
-                  checked={values.sourceType === 'vcenter'}
-                  onChange={handleOnEvent}
-                >
-                  vCenter Server
-                </Radio>
-              </Pf3Form.FormGroup>
+            <FormGroup role="radiogroup" isStack label="Select source type">
+              <Radio
+                name="sourceType"
+                id="sourceType-network"
+                value="network"
+                checked={values.sourceType === 'network'}
+                onChange={handleOnEvent}
+                label="Network Range"
+              />
+              <Radio
+                name="sourceType"
+                id="sourceType-satellite"
+                value="satellite"
+                checked={values.sourceType === 'satellite'}
+                onChange={handleOnEvent}
+                label="Satellite"
+              />
+              <Radio
+                name="sourceType"
+                id="sourceType-vcenter"
+                value="vcenter"
+                checked={values.sourceType === 'vcenter'}
+                onChange={handleOnEvent}
+                label="vCenter Server"
+              />
             </FormGroup>
           </Form>
         )}

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

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio Component should handle children as a label: children label radio 1`] = `
+<div
+  class="pf-c-radio quipucords-form__radio "
+>
+  <input
+    aria-invalid="false"
+    class="pf-c-radio__input"
+    data-ouia-component-id="OUIA-Generated-Radio-5"
+    data-ouia-component-type="PF4/Radio"
+    data-ouia-safe="true"
+    id="generatedid-"
+    name="generatedid-"
+    type="radio"
+    value=""
+  />
+  <label
+    class="pf-c-radio__label"
+    for="generatedid-"
+  >
+    lorem ipsum
+  </label>
+</div>
+`;
+
+exports[`Radio Component should handle disabled, checked: active 1`] = `
+<div
+  class="pf-c-radio pf-m-standalone quipucords-form__radio "
+>
+  <input
+    aria-invalid="false"
+    aria-label="radio input"
+    class="pf-c-radio__input"
+    data-ouia-component-id="OUIA-Generated-Radio-3"
+    data-ouia-component-type="PF4/Radio"
+    data-ouia-safe="true"
+    id="generatedid-"
+    name="generatedid-"
+    type="radio"
+  />
+</div>
+`;
+
+exports[`Radio Component should handle disabled, checked: checked 1`] = `
+<div
+  class="pf-c-radio pf-m-standalone quipucords-form__radio "
+>
+  <input
+    aria-invalid="false"
+    aria-label="radio input"
+    checked=""
+    class="pf-c-radio__input"
+    data-ouia-component-id="OUIA-Generated-Radio-4"
+    data-ouia-component-type="PF4/Radio"
+    data-ouia-safe="true"
+    id="generatedid-"
+    name="generatedid-"
+    type="radio"
+  />
+</div>
+`;
+
+exports[`Radio Component should handle disabled, checked: disabled 1`] = `
+<div
+  class="pf-c-radio pf-m-standalone quipucords-form__radio "
+>
+  <input
+    aria-invalid="false"
+    aria-label="radio input"
+    class="pf-c-radio__input"
+    data-ouia-component-id="OUIA-Generated-Radio-2"
+    data-ouia-component-type="PF4/Radio"
+    data-ouia-safe="true"
+    disabled=""
+    id="generatedid-"
+    name="generatedid-"
+    type="radio"
+  />
+</div>
+`;
+
+exports[`Radio Component should render a basic component: basic component 1`] = `
+<div
+  class="pf-c-radio pf-m-standalone quipucords-form__radio "
+>
+  <input
+    aria-invalid="false"
+    aria-label="radio input"
+    class="pf-c-radio__input"
+    data-ouia-component-id="OUIA-Generated-Radio-1"
+    data-ouia-component-type="PF4/Radio"
+    data-ouia-safe="true"
+    id="generatedid-"
+    name="generatedid-"
+    type="radio"
+    value=""
+  />
+</div>
+`;
+
+exports[`Radio Component should return an emulated onChange event: emulated event 1`] = `
+Object {
+  "checked": true,
+  "currentTarget": Object {},
+  "id": "generatedid-",
+  "keyCode": undefined,
+  "name": "generatedid-",
+  "persist": [Function],
+  "target": Object {},
+  "value": undefined,
+}
+`;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Radio as PfRadio } from '@patternfly/react-core/dist/js/components/Radio';
+import { Radio } from '../radio';
+import { helpers } from '../../../common';
+
+describe('Radio Component', () => {
+  it('should render a basic component', () => {
+    const props = {};
+
+    const component = mount(<Radio {...props} />);
+    expect(component.render()).toMatchSnapshot('basic component');
+  });
+
+  it('should handle disabled, checked', () => {
+    const props = {
+      isDisabled: true
+    };
+
+    const component = shallow(<Radio {...props} />);
+    expect(component.render()).toMatchSnapshot('disabled');
+
+    component.setProps({
+      isDisabled: false
+    });
+    expect(component.render()).toMatchSnapshot('active');
+
+    component.setProps({
+      isDisabled: false,
+      isChecked: true
+    });
+
+    expect(component.render()).toMatchSnapshot('checked');
+  });
+
+  it('should handle children as a label', () => {
+    const props = {};
+    const component = mount(<Radio {...props}>lorem ipsum</Radio>);
+    expect(component.render()).toMatchSnapshot('children label radio');
+  });
+
+  it('should return an emulated onChange event', done => {
+    const props = {};
+
+    props.onChange = event => {
+      expect(event).toMatchSnapshot('emulated event');
+      done();
+    };
+
+    const component = shallow(<Radio {...props}>lorem ipsum</Radio>);
+    const mockEvent = { currentTarget: {}, target: {}, persist: helpers.noop };
+    component.find(PfRadio).simulate('change', true, mockEvent);
+  });
+});