feat(SwitchField): adds component

e2e/__tests__/switch-field.test.js

@@ -0,0 +1,12 @@
+import { baisy } from '../setup/TestSuiter';
+
+
+const SUITES = [
+  baisy.suite('Components/SwitchField', 'common'),
+];
+
+
+SUITES.map(suite => {
+  it(suite.getTestName(), suite.testStory, 20000);
+});
+

src/components/Switch/Switch.js

@@ -1,7 +1,12 @@
 // @flow
 
 import React from 'react';
-import { SwitchTag, SwitchInputTag, SwitchApperanceTag, SwitchLabelTag } from './Switch.theme';
+import {
+  SwitchTag,
+  SwitchInputTag,
+  SwitchApperanceTag,
+  SwitchLabelTag,
+} from './Switch.theme';
 
 type SwitchProps = {
   label?: string,
@@ -33,3 +38,4 @@ class Switch extends React.Component<SwitchProps> {
 }
 
 export { Switch };
+

src/components/SwitchField/SwitchField.js

@@ -0,0 +1,42 @@
+// @flow
+
+import React from 'react';
+
+import type { InputType, MetaType } from '../../types';
+import * as formUtils from '../../utils/forms';
+import { Switch } from '../Switch';
+import { FormField } from '../Form/FormField';
+
+type SwitchFieldProps = {
+  label?: string,
+  input: InputType,
+  meta?: MetaType,
+};
+
+const SwitchField = ({ label, input, meta, ...rest }: SwitchFieldProps) => {
+  const {
+    name,
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+  } = input;
+  const hasError = formUtils.hasError(meta);
+
+  return (
+    <FormField { ...rest } input={ input } meta={ meta }>
+      <Switch
+        name={ name }
+        label={ label }
+        value={ Boolean(value) }
+        onChange={ onChange }
+        onBlur={ onBlur }
+        onFocus={ onFocus }
+        hasError={ hasError }
+      />
+    </FormField>
+  );
+};
+
+export { SwitchField };
+

src/components/SwitchField/SwitchField.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default (asStory) => {
+  asStory('Components/SwitchField', module, (story, { SwitchField, Column }) => {
+    story
+      .add('common', () => (
+        <Column>
+          <SwitchField label="Disabled" input={{}} />
+          <SwitchField label="Enabled" input={{ value: true }} />
+          <SwitchField
+            label="With error"
+            input={{ value: false }}
+            meta={{ error: 'Required', touched: true }}
+          />
+        </Column>
+      ));
+  });
+};
+

src/components/SwitchField/SwitchField.test.js

@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+import { SwitchField } from './SwitchField';
+
+describe('<SwitchField />', () => {
+  it('should pass props to the children', () => {
+    const onChange = jest.fn();
+    const wrapper = shallow(<SwitchField input={{ onChange, value: true }} />);
+
+    expect(wrapper).toMatchInlineSnapshot(`
+<FormField
+  direction="column"
+  hideErrorLabel={false}
+  input={
+    Object {
+      "onChange": [MockFunction],
+      "value": true,
+    }
+  }
+  stretch={true}
+>
+  <Switch
+    hasError={false}
+    onChange={[MockFunction]}
+    value={true}
+  />
+</FormField>
+`);
+  });
+});

src/components/SwitchField/index.js

@@ -0,0 +1,4 @@
+// @flow
+
+export { SwitchField } from './SwitchField';
+

src/components/components.js

@@ -36,6 +36,7 @@ export { SecondaryNavigation } from './SecondaryNavigation';
 export { Select } from './Select';
 export { SelectField } from './SelectField';
 export { Switch } from './Switch';
+export { SwitchField } from './SwitchField';
 export { Table, TableBuilder } from './Table';
 export { Tabs } from './Tabs';
 export { Tag } from './Tag';