Wc 106 redux form toggle

src/forms/redux-form/TogglePill.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import TogglePill from '../TogglePill';
+
+/**
+ * @param {Object} props - props passed in from parent and redux-form
+ * @description wraps standard TogglePill web component for use with redux-form
+ * deconstructs props that redux-forms sets and sets them on TogglePill
+ * 
+ * NOTE: redux-form expects checkboxes value to be true/false and will set them as so
+ * https://github.com/erikras/redux-form/issues/2922, therefore using the value here to 
+ * set isActive
+ *  
+ * @return {Component} TogglePill
+ */
+const ReduxFormTogglePill = props => {
+	// not adding meta error to TogglePill prop for now
+	// since TogglePills should function in a group with one error
+	const {
+		meta, // eslint-disable-line no-unused-vars
+		input,
+		...other
+	} = props;
+
+	return <TogglePill {...input} isActive={input.value == 'true' && !other.useRadio} {...other} />;
+};
+
+ReduxFormTogglePill.displayName = 'ReduxFormTogglePill';
+
+export default ReduxFormTogglePill;
+

src/forms/redux-form/__snapshots__/togglePill.test.jsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`redux-form TogglePill renders a TogglePill component with expected attributes from mock data 1`] = `
+<WithToggle
+  isActive={false}
+  label="Parenting"
+  name="parenting"
+  value={false}
+/>
+`;

src/forms/redux-form/togglePill.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import ReduxFormTogglePill from './TogglePill';
+
+describe('redux-form TogglePill', function() {
+
+	// props given in the structure that
+	// redux form would
+	const togglePillProps = {
+		input: {
+			label: 'Parenting',
+			name: 'parenting',
+			value: false, // as a checkbox, redux form will pass true / false for values
+		}
+	};
+
+	it('renders a TogglePill component with expected attributes from mock data', () => {
+		const component = shallow(<ReduxFormTogglePill {...togglePillProps} />);
+		expect(component).toMatchSnapshot();
+	});
+
+	it('renders a TogglePill with isActive prop as false when value is false', () => {
+		const component = mount(<ReduxFormTogglePill {...togglePillProps} />);
+		expect(component.find('TogglePill').prop('isActive')).toBe(false);
+	});
+
+	it('renders a TogglePill with isActive prop as true when value is true', () => {
+		togglePillProps.input.value = true;
+		const component = mount(<ReduxFormTogglePill {...togglePillProps} />);
+		expect(component.find('TogglePill').prop('isActive')).toBe(false);
+	});
+
+});
+