@atlaskit/modal-dialog 12.0.2

package/codemods/__tests__/map-actions-prop.tsx

@@ -0,0 +1,436 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { mapActionsProp } from '../migrations/map-actions-prop';
+
+const transformer = createTransformer([mapActionsProp]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('map actions prop', () => {
+  ['tsx', 'babylon'].forEach((parser) => {
+    describe(`parser: ${parser}`, () => {
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+      import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary' },
+          {
+            text: 'Secondary Action',
+            onClick: ()=>{},
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+            <ModalTransition>
+              {isOpen && (
+                <Modal
+                  actions={actions}
+                  onClose={close}
+                >
+                  <p>modal body</p>
+                </Modal>
+              )}
+            </ModalTransition>
+        );
+      }
+    `,
+        `
+      import React, { useState } from 'react';
+      import Button from "@atlaskit/button/standard-button";
+      import Modal, { ModalTransition, ModalFooter } from "@atlaskit/modal-dialog";
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary' },
+          {
+            text: 'Secondary Action',
+            onClick: ()=>{},
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+          <ModalTransition>
+            {isOpen && (
+              (<Modal onClose={close}>
+                <p>modal body</p>
+                <ModalFooter>
+                  {actions.map((props, index) => <Button
+                    {...props}
+                    autoFocus={index === 0}
+                    appearance={index === 0 ? "primary" : "subtle"}>{props.text}</Button>).reverse()}
+                </ModalFooter>
+              </Modal>)
+            )}
+          </ModalTransition>
+        );
+      }
+    `,
+        `should map the actions prop to ModalFooter buttons, add autoFocus primary button, flip buttons when appearance is not present on actions`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+      import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+      const actions = [];
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary' },
+          {
+            text: 'Secondary Action',
+            onClick: ()=>{},
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+            <ModalTransition>
+              {isOpen && (
+                <Modal
+                  actions={actions}
+                  onClose={close}
+                >
+                  <p>modal body</p>
+                </Modal>
+              )}
+            </ModalTransition>
+        );
+      }
+    `,
+        `
+      import React, { useState } from 'react';
+      import Button from "@atlaskit/button/standard-button";
+      import Modal, { ModalTransition, ModalFooter } from "@atlaskit/modal-dialog";
+      const actions = [];
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary' },
+          {
+            text: 'Secondary Action',
+            onClick: ()=>{},
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+          <ModalTransition>
+            {isOpen && (
+              /* TODO: (from codemod)\u0020
+              In this codemod, we are moving the position of the primary button to the right-hand side of
+              modal footer to align with the design guidelines while we convert your usage of 'actions' prop.
+
+              However, we could not definitively determine if the 'appearance' prop has been included in the 'actions' prop in this file,
+              so in this case, we have converted the 'actions' prop into Button components without moving the position of the primary button.
+              To complete the migration and align with the design guidelines, please make the necessary changes manually. */
+              (<Modal onClose={close}>
+                <p>modal body</p>
+                <ModalFooter>
+                  {actions.map((props, index) => <Button
+                    {...props}
+                    appearance={index === 0 ? props.appearance || "primary" : props.appearance || "subtle"}>{props.text}</Button>)}
+                </ModalFooter>
+              </Modal>)
+            )}
+          </ModalTransition>
+        );
+      }
+    `,
+        `should add the comment when there are multiple variables as with same name as actions prop`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+      import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary', appearance:'some-appearance' },
+          {
+            text: 'Secondary Action',
+            onClick: ()=>{},
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+            <ModalTransition>
+              {isOpen && (
+                <Modal
+                  actions={actions}
+                  onClose={close}
+                >
+                  <p>modal body</p>
+                </Modal>
+              )}
+            </ModalTransition>
+        );
+      }
+    `,
+        `
+      import React, { useState } from 'react';
+      import Button from "@atlaskit/button/standard-button";
+      import Modal, { ModalTransition, ModalFooter } from "@atlaskit/modal-dialog";
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary', appearance:'some-appearance' },
+          {
+            text: 'Secondary Action',
+            onClick: ()=>{},
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+          <ModalTransition>
+            {isOpen && (
+              (<Modal onClose={close}>
+                <p>modal body</p>
+                <ModalFooter>
+                  {actions.map((props, index) => <Button
+                    {...props}
+                    appearance={index === 0 ? props.appearance || "primary" : props.appearance || "subtle"}>{props.text}</Button>)}
+                </ModalFooter>
+              </Modal>)
+            )}
+          </ModalTransition>
+        );
+      }
+    `,
+        `should map the actions prop to ModalFooter buttons, shouldn't autoFocus primary button, shouldn't flip buttons when appearance is present on any actions item`,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+      import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+      import Button from "@atlaskit/button/standard-button";
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+
+        return (
+            <ModalTransition>
+              {isOpen && (
+                <Modal
+                  actions={[
+                    { text: 'Close', onClick: close, testId: 'primary' },
+                    {
+                      text: 'Secondary Action',
+                      onClick: ()=>{},
+                    },
+                  ]}
+                  onClose={close}
+                  appearance="danger"
+                >
+                  <p>modal body</p>
+                </Modal>
+              )}
+            </ModalTransition>
+        );
+      }
+    `,
+        `
+      import React, { useState } from 'react';
+      import Modal, { ModalTransition, ModalFooter } from "@atlaskit/modal-dialog";
+      import Button from "@atlaskit/button/standard-button";
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+
+        return (
+          <ModalTransition>
+            {isOpen && (
+              (<Modal onClose={close} appearance="danger">
+                <p>modal body</p>
+                <ModalFooter>
+                  {[
+                    { text: 'Close', onClick: close, testId: 'primary' },
+                    {
+                      text: 'Secondary Action',
+                      onClick: ()=>{},
+                    },
+                  ].map((props, index) => <Button
+                    {...props}
+                    autoFocus={index === 0}
+                    appearance={index === 0 ? "danger" || "primary" : "subtle"}>{props.text}</Button>).reverse()}
+                </ModalFooter>
+              </Modal>)
+            )}
+          </ModalTransition>
+        );
+      }
+    `,
+        `should map the actions prop to ModalFooter buttons and take apperance prop from modal, should autoFocus primary button and flip actions buttons `,
+      );
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+      import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const secondaryAction = () => alert('Secondary button has been clicked!');
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary', appearance: "primary" },
+          {
+            text: 'Secondary Action',
+            onClick: secondaryAction,
+            testId: 'secondary',
+            appearance: "subtle"
+          },
+        ];
+
+        const appearanceValue = 'danger'
+
+        return (
+            <ModalTransition>
+              {isOpen && (
+                <Modal
+                  actions={actions}
+                  onClose={close}
+                  testId="modal"
+                  appearance={appearanceValue}
+                >
+                  <p>modal body</p>
+                </Modal>
+              )}
+            </ModalTransition>
+        );
+      }
+    `,
+        `
+      import React, { useState } from 'react';
+      import Button from "@atlaskit/button/standard-button";
+      import Modal, { ModalTransition, ModalFooter } from "@atlaskit/modal-dialog";
+
+      const DefaultModal = () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const close = () => setIsOpen(false);
+        const secondaryAction = () => alert('Secondary button has been clicked!');
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary', appearance: "primary" },
+          {
+            text: 'Secondary Action',
+            onClick: secondaryAction,
+            testId: 'secondary',
+            appearance: "subtle"
+          },
+        ];
+
+        const appearanceValue = 'danger'
+
+        return (
+          <ModalTransition>
+            {isOpen && (
+              (<Modal onClose={close} testId="modal" appearance={appearanceValue}>
+                <p>modal body</p>
+                <ModalFooter>
+                  {actions.map((props, index) => <Button
+                    {...props}
+                    appearance={index === 0 ? props.appearance || appearanceValue || "primary" : props.appearance || "subtle"}>{props.text}</Button>)}
+                </ModalFooter>
+              </Modal>)
+            )}
+          </ModalTransition>
+        );
+      }
+    `,
+        `should map the actions prop to ModalFooter buttons, not take apperance prop from modal, not add autoFocus and not flip buttons when apperance is defined in actions`,
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React, { useState } from 'react';
+    import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+
+    import { getModalDialogActions } from './utils';
+
+    const DefaultModal = () => {
+      const [isOpen, setIsOpen] = useState(true);
+      const close = () => setIsOpen(false);
+      const secondaryAction = () => alert('Secondary button has been clicked!');
+
+      const appearanceValue = 'danger';
+
+      return (
+          <ModalTransition>
+            {isOpen && (
+              <Modal
+                actions={getModalDialogActions(close)}
+                onClose={close}
+                testId="modal"
+                appearance={appearanceValue}
+              >
+                <p>modal body</p>
+              </Modal>
+            )}
+          </ModalTransition>
+      );
+    }
+    `,
+        `
+    import React, { useState } from 'react';
+    import Button from "@atlaskit/button/standard-button";
+    import Modal, { ModalTransition, ModalFooter } from "@atlaskit/modal-dialog";
+
+    import { getModalDialogActions } from './utils';
+
+    const DefaultModal = () => {
+      const [isOpen, setIsOpen] = useState(true);
+      const close = () => setIsOpen(false);
+      const secondaryAction = () => alert('Secondary button has been clicked!');
+
+      const appearanceValue = 'danger';
+
+      return (
+        <ModalTransition>
+          {isOpen && (
+            (<Modal onClose={close} testId="modal" appearance={appearanceValue}>
+              <p>modal body</p>
+              <ModalFooter>
+                {getModalDialogActions(close).map((props, index) => <Button
+                  {...props}
+                  appearance={index === 0 ? props.appearance || appearanceValue || "primary" : props.appearance || "subtle"}>{props.text}</Button>)}
+              </ModalFooter>
+            </Modal>)
+          )}
+        </ModalTransition>
+      );
+    }
+    `,
+        `should map the actions prop to ModalFooter buttons, NOT add autoFocus and NOT flip buttons when actions are not declared in the same file`,
+      );
+    });
+  });
+});

package/codemods/__tests__/map-body-from-props.test.ts

@@ -0,0 +1,645 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { mapBodyFromProps } from '../migrations/map-body-from-props';
+
+const transformer = createTransformer([mapBodyFromProps]);
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('map body from props', () => {
+  ['tsx', 'babylon'].forEach((parser) => {
+    describe(`parser: ${parser}`, () => {
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Body = (props) => (<div>{props.children}</div>);
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{ Body, Header }}
+        >
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Body = (props) => (<div>{props.children}</div>);
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}>
+          {Body({
+            children: <>
+              {content}
+            </>
+          })}
+        </ModalDialog>
+      );
+    }
+    `,
+        'should invoke Body declared as shorthand with children passed as argument',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const BodyComponent = (props) => (<div>{props.children}</div>);
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Body: BodyComponent,
+            Header
+          }}
+        >
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const BodyComponent = (props) => (<div>{props.children}</div>);
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}>
+          {BodyComponent({
+            children: <>
+              {content}
+            </>
+          })}
+        </ModalDialog>
+      );
+    }
+    `,
+        'should invoke Body declared as assigned variable with children passed as argument',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+    import Form from '@atlaskit/form';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header,
+            Body: (props) => (
+              <Form onSubmit={onSubmit}>
+                {({ formProps }) => <form {...formProps}>{props.children}</form>}
+              </Form>
+            )
+          }}
+        >
+          <div>First content</div>
+          <div>Second content</div>
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+    import Form from '@atlaskit/form';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}>
+          {(props => <Form onSubmit={onSubmit}>
+            {({ formProps }) => <form {...formProps}>{props.children}</form>}
+          </Form>)({
+            children: <>
+              <div>First content</div>
+              <div>Second content</div>
+            </>
+          })}
+        </ModalDialog>
+      );
+    }
+    `,
+        'should invoke Body declared as a function expression with children passed as argument',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    class CustomModalDialog extends React.Component {
+      body = (props) => (<div>{props.children}</div>);
+
+      render() {
+        return (
+          <ModalDialog
+            onClose={handleClose}
+            components={{
+              Body: this.body,
+              Header
+            }}
+          >
+            {content}
+          </ModalDialog>
+        );
+      }
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    class CustomModalDialog extends React.Component {
+      body = (props) => (<div>{props.children}</div>);
+
+      render() {
+        return (
+          <ModalDialog
+            onClose={handleClose}
+            components={{
+              Header
+            }}>
+            {this.body({
+              children: <>
+                {content}
+              </>
+            })}
+          </ModalDialog>
+        );
+      }
+    }
+    `,
+        'should invoke Body of a modal dialog declared as class component',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    class CustomModalDialog extends React.Component {
+      body = (props) => (<div>{props.children}</div>);
+
+      render() {
+        return (
+          <ModalDialog
+            onClose={handleClose}
+            body={this.body}
+            components={{
+              Header
+            }}>
+            {content}
+          </ModalDialog>
+        );
+      }
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    class CustomModalDialog extends React.Component {
+      body = (props) => (<div>{props.children}</div>);
+
+      render() {
+        return (
+          <ModalDialog
+            onClose={handleClose}
+            body={this.body}
+            components={{
+              Header
+            }}>
+            {this.body({
+              children: <>
+                {content}
+              </>
+            })}
+          </ModalDialog>
+        );
+      }
+    }
+    `,
+        'should invoke Body passed to the body prop',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    class CustomModalDialog extends React.Component {
+      body = (props) => (<div>{props.children}</div>);
+
+      render() {
+        return (
+          <ModalDialog
+            onClose={handleClose}
+            body={({ children }) => <div>{children}</div>}
+            components={{
+              Header,
+              Body: this.body
+            }}
+          >
+            {content}
+          </ModalDialog>
+        );
+      }
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    class CustomModalDialog extends React.Component {
+      body = (props) => (<div>{props.children}</div>);
+
+      render() {
+        return (
+          <ModalDialog
+            onClose={handleClose}
+            body={({ children }) => <div>{children}</div>}
+            components={{
+              Header
+            }}>
+            {this.body({
+              children: <>
+                {content}
+              </>
+            })}
+          </ModalDialog>
+        );
+      }
+    }
+    `,
+        'should take Body passed from components prop if both declarations exist',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const components = {
+      Body: (props) => (<div>{props.children}</div>),
+    };
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose} components={components}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog, { ModalBody } from "@atlaskit/modal-dialog";
+
+    const components = {
+      Body: (props) => (<div>{props.children}</div>),
+    };
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose} components={components}>
+          <ModalBody>
+            {content}
+          </ModalBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        'should wrap children in default ModalBody if components prop is NOT defined as inline object expression',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}
+        >
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog, { ModalBody } from "@atlaskit/modal-dialog";
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}>
+          <ModalBody>
+            {content}
+          </ModalBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        'should wrap children in default ModalBody if no override exists in the components prop',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog, { ModalBody } from "@atlaskit/modal-dialog";
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          <ModalBody>
+            {content}
+          </ModalBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        'should wrap children in default ModalBody if no components/body props exist',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    const ModalDialog = React.lazy(() => import('@atlaskit/modal-dialog'));
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    const ModalDialog = React.lazy(() => import('@atlaskit/modal-dialog'));
+
+    /* TODO: (from codemod) We have added "React.lazy" here. Feel free to change it to "lazy" or other named import depending upon how you imported. */
+    const ModalBody = React.lazy(() => import("@atlaskit/modal-dialog/modal-body"));
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          <ModalBody>
+            {content}
+          </ModalBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        'should wrap import ModalBody dynamically when ModalDialog is dynamically imported',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      const ModalBody = () => <div />;
+
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}
+        >
+          {content}
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog, { ModalBody as AKModalBody } from "@atlaskit/modal-dialog";
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      const ModalBody = () => <div />;
+
+      return (
+        <ModalDialog
+          onClose={handleClose}
+          components={{
+            Header
+          }}>
+          <AKModalBody>
+            {content}
+          </AKModalBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        'should import default ModalBody as AKModalBody if the declaration already exists',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog, { ModalBody } from '@atlaskit/modal-dialog';
+
+    const CustomBody = (props) => (
+      <form>
+        <ModalBody>
+          {props.children}
+        </ModalBody>
+      </form>
+    );
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          <CustomBody>
+            {content}
+          </CustomBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog, { ModalBody } from '@atlaskit/modal-dialog';
+
+    const CustomBody = (props) => (
+      <form>
+        <ModalBody>
+          {props.children}
+        </ModalBody>
+      </form>
+    );
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose}>
+          <CustomBody>
+            {content}
+          </CustomBody>
+        </ModalDialog>
+      );
+    }
+    `,
+        'should do nothing if ModalBody is already imported',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose} header={Header} />
+      );
+    }
+    `,
+        `
+    import React from 'react';
+
+    import ModalDialog from '@atlaskit/modal-dialog';
+
+    const Header = (props) => (<div><h1>{props.children}</h1></div>);
+
+    export default function modalDialog() {
+      return (
+        <ModalDialog onClose={handleClose} header={Header} />
+      );
+    }
+    `,
+        'should do nothing when no overrides exist and ModalDialog is self-closing',
+      );
+    });
+  });
+});