WIP: Move components to separate fils

src/prototypes/UserProfile/CompleteUserProfile.tsx

@@ -2,45 +2,20 @@ import {
   Button,
   Checkbox,
   FooterCfGov,
-  Heading,
   Layout,
   Link,
   Dropdown as Multiselect,
   PageHeader
 } from '~/src/index';
 import { DSRForm as Form } from './DSRForm';
 import { DSRLabeledInput as TextInput } from './DSRLabeledInput';
+import { FieldGroup } from './FieldGroup';
+import { FormActions } from './FormActions';
+import { HelperText } from './HelperText';
 import { SBLInstitutionCheckboxLabel as InstitutionLabel } from './SBLInstitutionCheckboxLabel';
-
-const TextIntroduction = ({ heading, lead, body }): JSX.Element => (
-  <div className='text-introduction'>
-    <h1>{heading}</h1>
-    <p className='lead-paragraph'>{lead}</p>
-    <p>{body}</p>
-  </div>
-);
-
-const Well = ({ children }): JSX.Element => (
-  <div className='well'>{children}</div>
-);
-
-const FormActions = (): JSX.Element => (
-  <div className='form-actions'>
-    <Button label='Submit' type='submit' />
-    <Button label='Clear form' asLink appearance='warning' />
-  </div>
-);
-
-const SectionIntroduction = ({ heading, body }): JSX.Element => (
-  <>
-    <Heading type='3'>{heading}</Heading>
-    <p className='body'>{body}</p>
-  </>
-);
-
-const HelperText = ({ children }) => <p>{children}</p>;
-
-const FieldGroup = ({ children }) => <div className='fieldset'>{children}</div>;
+import { SectionIntroduction } from './SectionIntroduction';
+import { TextIntroduction } from './TextIntroduction';
+import { Well } from './Well';
 
 export const CompleteUserProfile = ({ state, setState, onChange }) => (
   <>
@@ -153,7 +128,10 @@ export const CompleteUserProfile = ({ state, setState, onChange }) => (
             </FieldGroup>
           </Well>
 
-          <FormActions />
+          <FormActions>
+            <Button label='Submit' type='submit' />
+            <Button label='Clear form' asLink appearance='warning' />
+          </FormActions>
         </Form>
       </Layout.Main>
     </Layout.Wrapper>

src/prototypes/UserProfile/FieldGroup.tsx

@@ -0,0 +1,3 @@
+export const FieldGroup = ({ children }) => (
+  <div className='fieldset'>{children}</div>
+);

src/prototypes/UserProfile/FormActions.tsx

@@ -0,0 +1,3 @@
+export const FormActions = ({ children }): JSX.Element => (
+  <div className='form-actions'>{children}</div>
+);

src/prototypes/UserProfile/HelperText.tsx

@@ -0,0 +1 @@
+export const HelperText = ({ children }) => <p>{children}</p>;

src/prototypes/UserProfile/SectionIntroduction.tsx

@@ -0,0 +1,8 @@
+import { Heading } from '~/src/index';
+
+export const SectionIntroduction = ({ heading, body }): JSX.Element => (
+  <>
+    <Heading type='3'>{heading}</Heading>
+    <p className='body'>{body}</p>
+  </>
+);

src/prototypes/UserProfile/TextIntroduction.tsx

@@ -0,0 +1,7 @@
+export const TextIntroduction = ({ heading, lead, body }): JSX.Element => (
+  <div className='text-introduction'>
+    <h1>{heading}</h1>
+    <p className='lead-paragraph'>{lead}</p>
+    <p>{body}</p>
+  </div>
+);

src/prototypes/UserProfile/Well.tsx

@@ -0,0 +1,3 @@
+export const Well = ({ children }): JSX.Element => (
+  <div className='well'>{children}</div>
+);