feat(fuselage): Modal wrapper & wrapperFunction prop (#959)

* feat: modal-wrapper

* chore: wrapperFunction

Author: dougfabris

packages/fuselage/src/components/Modal/Modal.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
+import type { ComponentProps } from 'react';
 import React from 'react';
 
-import { Button, Modal } from '../..';
+import { FieldGroup, Field, TextInput, Button, Modal, Box } from '../..';
 
 export default {
   title: 'Containers/Modal',
@@ -168,3 +169,43 @@ export const _WithHeroImage = () => (
     </Modal.Footer>
   </Modal>
 );
+
+const FormContainer = (props: ComponentProps<typeof Box>) => (
+  <Box
+    {...props}
+    is='form'
+    onSubmit={(e) => {
+      e.preventDefault();
+      action('form submitted')(e);
+    }}
+  />
+);
+
+export const WithForm = () => (
+  <Modal wrapper={FormContainer}>
+    <Modal.Header>
+      <Modal.HeaderText>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>
+      <FieldGroup>
+        <Field>
+          <Field.Label>Label</Field.Label>
+          <Field.Row>
+            <TextInput placeholder='Placeholder' />
+          </Field.Row>
+        </Field>
+      </FieldGroup>
+    </Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button type='submit' primary>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);

packages/fuselage/src/components/Modal/Modal.tsx

@@ -1,16 +1,37 @@
-import type { ComponentProps, Ref } from 'react';
-import React, { forwardRef } from 'react';
+import type { ComponentProps, Ref, ElementType, ReactNode } from 'react';
+import React, { createElement, forwardRef } from 'react';
 
 import Box from '../Box';
 
-type ModalProps = ComponentProps<typeof Box>;
+type ModalProps = {
+  wrapperFunction?: (
+    props: Pick<
+      ComponentProps<typeof Box>,
+      'elevation' | 'className' | 'children'
+    >
+  ) => ReactNode;
+  wrapper?: ElementType<
+    Pick<ComponentProps<typeof Box>, 'elevation' | 'className' | 'children'>
+  >;
+} & ComponentProps<typeof Box>;
 
 export const Modal = forwardRef(
-  ({ children, ...props }: ModalProps, ref: Ref<HTMLDivElement>) => (
-    <Box is='dialog' rcx-modal {...props}>
-      <Box ref={ref} rcx-modal__inner elevation='2'>
-        {children}
+  (
+    { children, wrapper = Box, wrapperFunction, ...props }: ModalProps,
+    ref: Ref<Element>
+  ) => {
+    const wrapperProps = {
+      children,
+      className: 'rcx-modal__inner',
+      elevation: '2',
+    } as const;
+
+    return (
+      <Box is='dialog' rcx-modal ref={ref} {...props}>
+        {wrapperFunction
+          ? wrapperFunction(wrapperProps)
+          : createElement(wrapper, wrapperProps)}
       </Box>
-    </Box>
-  )
+    );
+  }
 );