Merge pull request pagesource#4 in XTI/atomic-react-pattern-lib from feature/input-radio-atom to develop

* commit 'a5e7a0c321f73e8e74cf3405622cf8e282161ad5':
  removed fieldProps
  updated snapshot
  removing unnecessary prop from span
  gegerated snapshots again
  input choice default value is undefined
  move inputChoice to molecule
  create a single component InputChoice for radio and checkbox
  added test cases
  inputControl enhancement
  review comment incorporation
  review comment
  review comment incorporated
  initial changes for Inout Radio and checkbox

Author: vkumar59

lib/components/molecules/Form/FieldCheckbox/FieldCheckbox.js

@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import { Field, ErrorMessage } from 'formik';
+import styled from 'styled-components';
+import InputChoice from '../../InputChoice';
+import FieldError from '../../../atoms/FieldError';
+import styles from './FieldCheckbox.style';
+
+type Props = {
+  id?: string,
+  className?: string,
+  name: string,
+};
+
+const FieldCheckbox = ({ id, className, name, ...others }: Props): Node => (
+  <div className={className}>
+    <Field
+      name={name}
+      render={({ field }) => <InputChoice type="checkbox" id={id || name} {...field} {...others} />}
+    />
+    <ErrorMessage name={name} component={FieldError} />
+  </div>
+);
+
+FieldCheckbox.defaultProps = {
+  id: '',
+  className: '',
+};
+
+export default styled(FieldCheckbox)`
+  ${styles};
+`;
+export { FieldCheckbox as FieldCheckboxVanilla };

lib/components/molecules/Form/FieldCheckbox/FieldCheckbox.style.js

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+const styles = css`
+  margin-bottom: 1rem;
+`;
+
+export default styles;

lib/components/molecules/Form/FieldCheckbox/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { default } from './FieldCheckbox';

lib/components/molecules/Form/FieldRadioGroup/FieldRadioGroup.js

@@ -0,0 +1,50 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import { Field, ErrorMessage, FieldArray } from 'formik';
+import styled from 'styled-components';
+import InputChoice from '../../InputChoice';
+import FieldError from '../../../atoms/FieldError';
+import styles from './FieldRadioGroup.style';
+
+type Props = {
+  id?: string,
+  className?: string,
+  name: string,
+  radioGroupArray: Array,
+};
+
+const FieldRadioGroup = ({ id, className, name, radioGroupArray, ...others }: Props): Node => (
+  <FieldArray
+    name={name}
+    render={() => (
+      <div className={className} id={id} {...others}>
+        {radioGroupArray.map((radioGroup, index) => (
+          <Field
+            key={radioGroup.id || `${name}_${index}`}
+            name={name}
+            render={({ field }) => (
+              <InputChoice
+                type="radio"
+                id={radioGroup.id || `${name}_${index}`}
+                {...field}
+                {...radioGroup}
+              />
+            )}
+          />
+        ))}
+        <ErrorMessage name={name} component={FieldError} />
+      </div>
+    )}
+  />
+);
+
+FieldRadioGroup.defaultProps = {
+  id: '',
+  className: '',
+};
+
+export default styled(FieldRadioGroup)`
+  ${styles};
+`;
+export { FieldRadioGroup as FieldRadioGroupVanila };

lib/components/molecules/Form/FieldRadioGroup/FieldRadioGroup.style.js

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+const styles = css`
+  margin-bottom: 1rem;
+`;
+
+export default styles;

lib/components/molecules/Form/FieldRadioGroup/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { default } from './FieldRadioGroup';

lib/components/molecules/Form/Form.js

@@ -7,6 +7,8 @@ import { noop } from '../../../core/utils/noop';
 import Debug from './Debug';
 import FieldInput from './FieldInput';
 import FieldSelect from './FieldSelect';
+import FieldRadioGroup from './FieldRadioGroup';
+import FieldCheckbox from './FieldCheckbox';
 
 type Props = {
   className?: string,
@@ -40,6 +42,10 @@ class Form extends React.PureComponent<Props> {
 
   static Select = FieldSelect;
 
+  static RadioGroup = FieldRadioGroup;
+
+  static Checkbox = FieldCheckbox;
+
   static Field = Field;
 
   getSchema = (

lib/components/molecules/Form/Form.mock.js

@@ -5,6 +5,8 @@ const userFormProps = {
     email: '',
     username: '',
     typeOfUser: '',
+    ageGroup: '',
+    termsAndConditions: false,
   },
   debug: true,
   action: '/',
@@ -18,6 +20,13 @@ const userFormProps = {
       email: 'Invalid email format',
       required: 'Required',
     },
+    ageGroup: {
+      required: 'Please select an Age group',
+    },
+    termsAndConditions: {
+      type: 'bool',
+      test: ['termsAndConditions', 'please accept terms and conditions!!!', value => value === true],
+    },
   },
   handleSubmit: action('On Submit Fired'),
 };
@@ -40,4 +49,30 @@ const userFormEmailProps = {
   label: 'Email',
 };
 
-export { userFormProps, userFormSelectProps, userFormNameInputProps, userFormEmailProps };
+const userFormAgeGroupProps = {
+  name: 'ageGroup',
+  radioGroupArray: [{
+    value: '30-',
+    label: '< 30',
+  }, {
+    value: '30-60',
+    label: '30-60',
+  }, {
+    value: '60+',
+    label: '> 60',
+  }],
+};
+
+const userFormTnCProps = {
+  name: 'termsAndConditions',
+  label: 'I accept terms & conditions',
+};
+
+export {
+  userFormProps,
+  userFormSelectProps,
+  userFormNameInputProps,
+  userFormEmailProps,
+  userFormAgeGroupProps,
+  userFormTnCProps,
+};

lib/components/molecules/Form/Form.story.js

@@ -6,6 +6,8 @@ import {
   userFormSelectProps,
   userFormNameInputProps,
   userFormEmailProps,
+  userFormAgeGroupProps,
+  userFormTnCProps,
 } from './Form.mock';
 
 // Import Vanilla Component to display markup and props
@@ -24,6 +26,8 @@ storiesOf('Molecules', module).addWithChapters('Form', {
                 <Form.Select {...userFormSelectProps} />
                 <Form.Input {...userFormNameInputProps} />
                 <Form.Input {...userFormEmailProps} />
+                <Form.RadioGroup {...userFormAgeGroupProps} />
+                <Form.Checkbox {...userFormTnCProps} />
               </div>
               <Button primary type="submit">
                 Submit

lib/components/molecules/InputChoice/InputChoice.js

@@ -0,0 +1,58 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import styled from 'styled-components';
+import { InputVanilla as Input } from '../../atoms/Input';
+import Label from '../../atoms/Label';
+import styles from './InputChoice.style';
+
+type Props = {
+  id: string,
+  type: string,
+  disabled?: boolean,
+  checked?: boolean,
+  className?: string,
+  children?: Node,
+  label?: string,
+  labelProps?: {},
+  showLabelBeforeInput?: boolean,
+};
+
+const InputChoice = ({
+  id,
+  type,
+  checked,
+  disabled,
+  className,
+  label,
+  children,
+  showLabelBeforeInput,
+  labelProps,
+  ...otherProps
+}: Props): Node => (
+  <Label
+    className={className}
+    htmlFor={id}
+    showLabelBeforeInput={showLabelBeforeInput}
+    {...labelProps}
+  >
+    <Input id={id} type={type} defaultChecked={checked} disabled={disabled} {...otherProps} />
+    <span type={type} />
+    <div>{children || label}</div>
+  </Label>
+);
+
+InputChoice.defaultProps = {
+  checked: undefined,
+  disabled: false,
+  className: '',
+  children: '',
+  label: '',
+  labelProps: {},
+  showLabelBeforeInput: false,
+};
+
+export default styled(InputChoice)`
+  ${styles};
+`;
+export { InputChoice as InputChoiceVanilla };