refactor(modal): align modal with component structure

The Modal nested the ModalTitle, ModalContent, and ModalActions
components inside of Modal as a way to reduce the API surface. This
change aligns the components with the other components.

BREAKING CHANGE: This deprecated use of Modal.Actions. Instead, use
ModalActions.

BREAKING CHANGE: This deprecated use of Modal.Content. Instead, use
ModalContent.

BREAKING CHANGE: This deprecated use of Modal.Title. Instead, use
ModalTitle.

src/Modal.js

@@ -6,31 +6,28 @@ import { createPortal } from 'react-dom'
 import { sizePropType } from './common-prop-types.js'
 import { ScreenCover } from './ScreenCover.js'
 
-import { Actions } from './Modal/Actions.js'
-import { Content } from './Modal/Content.js'
 import { ModalCard } from './Modal/ModalCard.js'
-import { Title } from './Modal/Title.js'
 
 /**
  * Modal provides a UI to prompt the user to respond to a question
  * or a note to the user.
  *
  * Use Model with the following Components:
- * Model.Title (optional)
- * Model.Content (required)
- * Model.Actions (required)
+ * ModelTitle (optional)
+ * ModelContent (required)
+ * ModelActions (required)
  * @module
  * @param {Modal.PropTypes} props
  * @returns {React.Component}
  *
  * @example import { Modal } from @dhis2/ui-core
  * @example
  *  <Modal>
- *      <Modal.Title>Hello</Modal.Title>
- *      <Modal.Content>Some content here</Modal.Content>
- *      <Modal.Actions>
+ *      <ModalTitle>Hello</ModalTitle>
+ *      <ModalContent>Some content here</ModalContent>
+ *      <ModalActions>
  *          <Button primary>My action</Button>
- *      </Modal.Actions>
+ *      </ModalActions>
  *  </Modal>
  *
  * @see Specification: {@link https://github.com/dhis2/design-system/blob/master/molecules/modal.md|Design system}
@@ -59,10 +56,6 @@ export const Modal = ({ children, onClose, small, large, open, className }) => {
     )
 }
 
-Modal.Title = Title
-Modal.Content = Content
-Modal.Actions = Actions
-
 /**
  * @typedef {Object} PropTypes
  * @static
@@ -75,7 +68,7 @@ Modal.Actions = Actions
  * @prop {bool} large
  */
 Modal.propTypes = {
-    // Can contain Modal.Title; Must contain Modal.Content and Modal.Actions
+    // Can contain ModalTitle; Must contain ModalContent and ModalActions
     children: propTypes.oneOfType([
         propTypes.element,
         propTypes.arrayOf(propTypes.element),

src/Modal/Actions.js → src/ModalActions.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
-import { spacers } from '../theme.js'
+import { spacers } from './theme.js'
 
 /**
  * @module
  *
- * @param {Actions.PropTypes} props
+ * @param {ModalActions.PropTypes} props
  * @returns {React.Component}
  */
-export const Actions = ({ children }) => (
+export const ModalActions = ({ children }) => (
     <div>
         {children}
 
@@ -28,7 +28,7 @@ export const Actions = ({ children }) => (
  * @static
  * @prop {Object} children - Accepts one or more `Element`s
  */
-Actions.propTypes = {
+ModalActions.propTypes = {
     children: propTypes.oneOfType([
         propTypes.element,
         propTypes.arrayOf(propTypes.element),

src/Modal/Content.js → src/ModalContent.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
-import { spacers } from '../theme.js'
+import { spacers } from './theme.js'
 
 /**
  * @module
  *
- * @param {Content.PropTypes} props
+ * @param {ModalContent.PropTypes} props
  * @returns {React.Component}
  */
-export const Content = ({ children, className }) => (
+export const ModalContent = ({ children, className }) => (
     <div className={className}>
         {children}
 
@@ -34,7 +34,7 @@ export const Content = ({ children, className }) => (
  * @prop {Node} children
  * @prop {string} [className]
  */
-Content.propTypes = {
+ModalContent.propTypes = {
     children: propTypes.node.isRequired,
     className: propTypes.string,
 }

src/Modal/Title.js → src/ModalTitle.js

@@ -2,14 +2,14 @@ import React from 'react'
 import propTypes from '@dhis2/prop-types'
 import cx from 'classnames'
 
-import { spacers } from '../theme.js'
+import { spacers } from './theme.js'
 
 /**
  * @module
- * @param {Title.PropTypes} props
+ * @param {ModalTitle.PropTypes} props
  * @returns {React.Component}
  */
-export const Title = ({ children }) => (
+export const ModalTitle = ({ children }) => (
     <h1 className={cx('title')}>
         {children}
 
@@ -30,6 +30,6 @@ export const Title = ({ children }) => (
  * @static
  * @prop {string} children
  */
-Title.propTypes = {
+ModalTitle.propTypes = {
     children: propTypes.string.isRequired,
 }

src/index.js

@@ -75,6 +75,9 @@ export { DropdownButton } from './DropdownButton.js'
 export { Menu } from './Menu.js'
 export { Node } from './Node.js'
 export { Modal } from './Modal.js'
+export { ModalActions } from './ModalActions.js'
+export { ModalContent } from './ModalContent.js'
+export { ModalTitle } from './ModalTitle.js'
 export { SplitButton } from './SplitButton.js'
 export { Tab, TabBar, ScrollBar } from './Tabs.js'