Add support for custom as components in modals

src/Modal/Modal.story.tsx

@@ -12,6 +12,25 @@ interface Props {
  size: "small" | "medium" | "large";
 }
 
+const CustomComponent = React.forwardRef<HTMLDivElement, { an?: undefined }>(
+ (props, ref) => (
+ <div
+ {...props}
+ ref={ref}
+ css={css`
+ background: repeating-linear-gradient(
+ 135deg,
+ ${colors.white},
+ ${colors.white} 10px,
+ rgb(255, 253, 253) 10px,
+ rgb(255, 253, 253) 20px
+ );
+ width: 80vw;
+ `}
+ />
+ ),
+);
+
 export function ModalStory({
  title,
  description,
@@ -103,6 +122,29 @@ storiesOf("Modal", module)
  Inner text
  </Modal>
  ))
+ .add("using as with custom component", () => (
+ <Modal
+ as={<CustomComponent />}
+ size="large"
+ title="Example Title"
+ primaryAction={
+ <Button
+ color={colors.red.base}
+ style={{ color: colors.white }}
+ type="button"
+ >
+ Accept
+ </Button>
+ }
+ secondaryAction={
+ <Button color={colors.white} type="button">
+ Cancel
+ </Button>
+ }
+ >
+ Inner text
+ </Modal>
+ ))
  .add(
  "static (small) (✅ primaryAction, ✅ secondaryAction, ✅ bottomLeftText)",
  () => (

src/Modal/Modal.tsx

@@ -176,7 +176,10 @@ export const Modal: React.FC<Props> = ({
  * We have to strip the type because we'll get an error about the union being
  * too complex to model because `motion` has over 100 options.
  */
- const MotionComponent: React.ComponentType<MotionProps> = motion[type];
+ const MotionComponent: React.ComponentType<MotionProps> =
+ typeof as.type === "string"
+ ? motion[type]
+ : motion.custom<MotionProps>(as.type);
 
  return (
  <ClassNames>