docs(ComposedModal): add storybook MDX example (#6805)

* docs(ComposedModal): add custom state manager example

* docs(ComposedModal): add mdx example

* docs(ComposedModal): remove duplicate word

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/ComposedModal/ComposedModal-story.js

@@ -5,16 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import { settings } from 'carbon-components';
 import ComposedModal, {
   ModalHeader,
   ModalBody,
   ModalFooter,
 } from '../ComposedModal';
 import Button from '../Button';
-import { settings } from 'carbon-components';
+import mdx from './ComposedModal.mdx';
 
 const { prefix } = settings;
 
@@ -40,6 +42,15 @@ const props = {
       false
     ),
   }),
+  composedModalWithLauncher: ({ titleOnly } = {}) => ({
+    onKeyDown: action('onKeyDown'),
+    danger: boolean('Danger mode (danger)', false),
+    selectorPrimaryFocus: text(
+      'Primary focus element selector (selectorPrimaryFocus)',
+      '[data-modal-primary-focus]'
+    ),
+    size: select('Size (size)', sizes, titleOnly ? 'sm' : ''),
+  }),
   modalHeader: ({ titleOnly } = {}) => ({
     label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
     title: text(
@@ -140,23 +151,45 @@ const scrollingContent = (
   </>
 );
 
+/**
+ * Simple state manager for modals.
+ */
+const ModalStateManager = ({
+  renderLauncher: LauncherContent,
+  children: ModalContent,
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      {!ModalContent || typeof document === 'undefined'
+        ? null
+        : ReactDOM.createPortal(
+            <ModalContent open={open} setOpen={setOpen} />,
+            document.body
+          )}
+      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
+    </>
+  );
+};
+
 export default {
   title: 'ComposedModal',
   decorators: [withKnobs],
-
   parameters: {
     component: ComposedModal,
-
     subcomponents: {
       ModalHeader,
       ModalBody,
       ModalFooter,
     },
+    docs: {
+      page: mdx,
+    },
   },
 };
 
 export const UsingHeaderFooterProps = () => {
-  const { size, ...rest } = props.composedModal();
+  const { size, ...rest } = props.composedModalWithLauncher();
   const { hasScrollingContent, ...bodyProps } = props.modalBody();
   return (
     <ComposedModal {...rest} danger={true} size={size || undefined}>
@@ -248,46 +281,40 @@ TitleOnly.parameters = {
   },
 };
 
-export const ExampleUsageWithTriggerButton = () => {
-  class ComposedModalExample extends React.Component {
-    state = { open: false };
-    toggleModal = (open) => this.setState({ open });
-    render() {
-      const { open } = this.state;
-      const { size, ...rest } = props.composedModal();
-      const { hasScrollingContent, ...bodyProps } = props.modalBody();
-      return (
-        <>
-          <Button onClick={() => this.toggleModal(true)}>
-            Launch composed modal
-          </Button>
-          <ComposedModal
-            {...rest}
-            open={open}
-            size={size || undefined}
-            onClose={() => this.toggleModal(false)}>
-            <ModalHeader {...props.modalHeader()} />
-            <ModalBody
-              {...bodyProps}
-              aria-label={hasScrollingContent ? 'Modal content' : undefined}>
-              <p className={`${prefix}--modal-content__text`}>
-                Please see ModalWrapper for more examples and demo of the
-                functionality.
-              </p>
-              {hasScrollingContent && scrollingContent}
-            </ModalBody>
-            <ModalFooter {...props.modalFooter()} />
-          </ComposedModal>
-        </>
-      );
-    }
-  }
-  return <ComposedModalExample />;
+export const WithTriggerButton = () => {
+  const { size, ...rest } = props.composedModalWithLauncher();
+  const { hasScrollingContent, ...bodyProps } = props.modalBody();
+  return (
+    <ModalStateManager
+      renderLauncher={({ setOpen }) => (
+        <Button onClick={() => setOpen(true)}>Launch composed modal</Button>
+      )}>
+      {({ open, setOpen }) => (
+        <ComposedModal
+          {...rest}
+          open={open}
+          size={size || undefined}
+          onClose={() => setOpen(false)}>
+          <ModalHeader {...props.modalHeader()} />
+          <ModalBody
+            {...bodyProps}
+            aria-label={hasScrollingContent ? 'Modal content' : undefined}>
+            <p className={`${prefix}--modal-content__text`}>
+              Please see ModalWrapper for more examples and demo of the
+              functionality.
+            </p>
+            {hasScrollingContent && scrollingContent}
+          </ModalBody>
+          <ModalFooter {...props.modalFooter()} />
+        </ComposedModal>
+      )}
+    </ModalStateManager>
+  );
 };
 
-ExampleUsageWithTriggerButton.storyName = 'Example usage with trigger button';
+WithTriggerButton.storyName = 'Example usage with trigger button';
 
-ExampleUsageWithTriggerButton.parameters = {
+WithTriggerButton.parameters = {
   info: {
     text: `
         An example ComposedModal with a trigger button