FormArrayControl component and Adapters for radios and checkboxes

f2/src/components/Field/__tests__/Field.test.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { ThemeProvider } from 'emotion-theming'
+import canada from '../../../theme/canada'
+import { render, cleanup } from '@testing-library/react'
+import { Field } from '../'
+import { Form } from 'react-final-form'
+
+describe('<Field />', () => {
+  afterEach(cleanup)
+
+  it('renders', () => {
+    const submitMock = jest.fn()
+
+    render(
+      <ThemeProvider theme={canada}>
+        <Form
+          initialValues=""
+          onSubmit={submitMock}
+          render={() => <Field name="name" label="foo" helperText="help" />}
+        />
+      </ThemeProvider>,
+    )
+  })
+})

f2/src/components/Field/index.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import PropTypes from 'prop-types'
+import { FormErrorMessage, FormControl } from '@chakra-ui/core'
+import { FormHelperText } from '../FormHelperText'
+import { FormLabel } from '../FormLabel'
+import { Field as FieldAdapter } from 'react-final-form'
+import { UniqueID } from '../unique-id'
+import { Input } from '../input'
+
+export const Field = ({ name, label, helperText, errorMessage, component }) => {
+  return (
+    <UniqueID>
+      {id => {
+        return (
+          <FormControl aria-labelledby={id}>
+            <FormLabel id={id} htmlFor={name}>
+              {label}
+            </FormLabel>
+            <FormHelperText>{helperText}</FormHelperText>
+            <FormErrorMessage>{errorMessage}</FormErrorMessage>
+            <FieldAdapter id={name} component={component} />
+          </FormControl>
+        )
+      }}
+    </UniqueID>
+  )
+}
+Field.defaultProps = {
+  component: Input,
+}
+
+Field.propTypes = {
+  children: PropTypes.any,
+  name: PropTypes.string,
+  label: PropTypes.any,
+  helperText: PropTypes.any,
+  errorMessage: PropTypes.any,
+}

f2/src/components/FormArrayControl/index.js

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import PropTypes from 'prop-types'
+import { jsx } from '@emotion/core'
+import { FormErrorMessage, FormControl, Stack } from '@chakra-ui/core'
+import { useField } from 'react-final-form'
+import { FormLabel } from '../FormLabel'
+import { FormHelperText } from '../FormHelperText'
+import { UniqueID } from '../unique-id'
+
+export const FormArrayControl = ({
+  label,
+  helperText,
+  errorMessage,
+  name,
+  children,
+  ...rest
+}) => {
+  const {
+    meta: { error, touched },
+  } = useField(name, { subscription: { touched: true, error: true } })
+  return (
+    <UniqueID>
+      {id => {
+        return (
+          <FormControl
+            as="fieldset"
+            aria-labelledby={id}
+            isInvalid={error && touched}
+            {...rest}
+          >
+            <FormLabel id={id} as="legend" htmlFor={name}>
+              {label}
+            </FormLabel>
+            <FormHelperText>{helperText}</FormHelperText>
+            <FormErrorMessage>{errorMessage}</FormErrorMessage>
+            {/** This component comes with a group attribute. We don't need to use Chakra's <CheckboxGroup> or <RadioGroup> as per the Chakra docs */}
+            <Stack shouldWrapChildren spacing={4}>
+              {children}
+            </Stack>
+          </FormControl>
+        )
+      }}
+    </UniqueID>
+  )
+}
+
+FormArrayControl.propTypes = {
+  label: PropTypes.object,
+  helperText: PropTypes.object,
+  errorMessage: PropTypes.object,
+  name: PropTypes.string,
+  children: PropTypes.any,
+}

f2/src/components/FormHelperText/index.js

@@ -6,11 +6,11 @@ export const FormHelperText = styled(ChakraFormHelperText)(
   variant({
     variants: {
       above: {
-        mt: 0,
-        mb: 2,
+        mt: -2,
+        mb: 4,
       },
       below: {
-        mt: 2,
+        mt: 4,
         mb: 0,
       },
       unstyled: {
@@ -22,7 +22,7 @@ export const FormHelperText = styled(ChakraFormHelperText)(
 
 FormHelperText.defaultProps = {
   variant: 'above',
-  as: 'div',
+  as: 'p',
   fontSize: 'md',
   color: 'black',
   fontFamily: 'body',

f2/src/components/FormLabel/index.js

@@ -7,7 +7,7 @@ FormLabel.defaultProps = {
   fontSize: 'xl',
   fontWeight: 'bold',
   fontFamily: 'body',
-  pb: 1,
+  mb: 2,
   lineHeight: 1,
   maxW: '600px',
 }

f2/src/components/checkbox/index.js

@@ -1,18 +1,50 @@
 /** @jsx jsx */
+import React from 'react'
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
-import { Box, VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
+import { VisuallyHidden, ControlBox, Icon, Flex } from '@chakra-ui/core'
+import { useField } from 'react-final-form'
+import { ConditionalForm } from '../container'
+
+export const CheckboxAdapter = ({
+  name,
+  value,
+  defaultIsChecked,
+  children,
+  ...props
+}) => {
+  const {
+    input: { checked, ...input },
+    meta: { error, touched },
+  } = useField(name, {
+    type: 'checkbox', // important for RFF to manage the checked prop
+    value, // important for RFF to manage list of strings
+    defaultIsChecked,
+  })
 
-export const Checkbox = ({ label, isChecked, ...props }) => {
+  return (
+    <Checkbox
+      input={input}
+      isChecked={checked}
+      isInvalid={error && touched}
+      conditionalField={props.conditionalField}
+    >
+      {children}
+    </Checkbox>
+  )
+}
+
+export const Checkbox = ({ input, label, isChecked, ...props }) => {
   return (
     <UniqueID>
       {id => {
         return (
-          <Box as="label" {...props} id={id}>
-            <Flex align="center">
+          <React.Fragment>
+            <Flex as="label" {...props} id={id} align="center">
               <VisuallyHidden
+                {...input}
                 as="input"
                 type="checkbox"
                 defaultChecked={isChecked ? 'true' : ''}
@@ -47,15 +79,18 @@ export const Checkbox = ({ label, isChecked, ...props }) => {
                 {props.children}
               </Text>
             </Flex>
-          </Box>
+
+            {isChecked && (
+              <ConditionalForm>{props.conditionalField}</ConditionalForm>
+            )}
+          </React.Fragment>
         )
       }}
     </UniqueID>
   )
 }
 
-Checkbox.defaultProps = {}
-
 Checkbox.propTypes = {
+  conditionalField: PropTypes.any,
   children: PropTypes.any,
 }

f2/src/components/container/index.js

@@ -1,4 +1,5 @@
 /** @jsx jsx **/
+import React from 'react'
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 
@@ -18,16 +19,20 @@ export const InfoCard = props => (
 )
 
 export const ConditionalForm = ({ ...props }) => (
-
-  <Box
-    borderLeftWidth={1}
-    borderLeftColor="gray.400"
-    mt={1}
-    ml={5}
-    pl={6}
-
-    {...props}
-  >{props.children}</Box>
+  <React.Fragment>
+    {props.children && (
+      <Box
+        borderLeftWidth={1}
+        borderLeftColor="gray.400"
+        mt={1}
+        ml={5}
+        pl={6}
+        {...props}
+      >
+        {props.children}
+      </Box>
+    )}
+  </React.Fragment>
 )
 
 ConditionalForm.propTypes = {

f2/src/components/radio/index.js

@@ -1,22 +1,47 @@
 /** @jsx jsx */
+import React from 'react'
 import PropTypes from 'prop-types'
 import { jsx } from '@emotion/core'
 import { Text } from '../text'
 import { UniqueID } from '../unique-id'
 import { Box, VisuallyHidden, ControlBox, Flex } from '@chakra-ui/core'
+import { useField } from 'react-final-form'
+import { ConditionalForm } from '../container'
 
-export const Radio = ({ label, isChecked, ...props }) => {
+export const RadioAdapter = ({ name, value, defaultIsChecked, children }) => {
+  const {
+    input: { checked, ...input },
+    meta: { error, touched },
+  } = useField(name, {
+    type: 'radio',
+    value,
+    defaultIsChecked,
+  })
+
+  return (
+    <Radio input={input} isChecked={checked} isInvalid={error && touched}>
+      {children}
+    </Radio>
+  )
+}
+
+export const Radio = ({
+  input,
+  label,
+  isChecked,
+  conditionalField,
+  ...props
+}) => {
   return (
     <UniqueID>
       {id => {
         return (
-          <Box as="label" {...props} id={id}>
-            <Flex align="center">
+          <React.Fragment>
+            <Flex as="label" id={id} align="center">
               <VisuallyHidden
+                {...input}
                 as="input"
                 type="radio"
-                name={props.name}
-                value={props.value}
                 defaultChecked={isChecked ? 'true' : ''}
               />
 
@@ -51,15 +76,15 @@ export const Radio = ({ label, isChecked, ...props }) => {
                 {props.children}
               </Text>
             </Flex>
-          </Box>
+            {isChecked && <ConditionalForm>{conditionalField}</ConditionalForm>}
+          </React.Fragment>
         )
       }}
     </UniqueID>
   )
 }
 
-Radio.defaultProps = {}
-
 Radio.propTypes = {
   children: PropTypes.any,
+  conditionalField: PropTypes.object,
 }