add ModalBoxHeader back

Author: nicolethoen

packages/react-core/src/components/Modal/ModalBoxHeader.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import { css } from '@patternfly/react-styles';
+
+export interface ModalBoxHeaderProps {
+  /** Content rendered inside the Header */
+  children?: React.ReactNode;
+  /** Additional classes added to the button */
+  className?: string;
+}
+
+export const ModalBoxHeader: React.FunctionComponent<ModalBoxHeaderProps> = ({
+  children = null,
+  className = '',
+  ...props
+}: ModalBoxHeaderProps) => (
+  <div className={css(styles.modalBoxTitle, className)} {...props}>
+    {children}
+  </div>
+);

packages/react-core/src/components/Modal/ModalContent.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { FocusTrap } from '../../helpers';
 import titleStyles from '@patternfly/react-styles/css/components/Title/title';
 import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
-import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import { css } from '@patternfly/react-styles';
 
 import { Backdrop } from '../Backdrop/Backdrop';
@@ -11,6 +10,7 @@ import { ModalBoxCloseButton } from './ModalBoxCloseButton';
 import { ModalBox } from './ModalBox';
 import { ModalBoxFooter } from './ModalBoxFooter';
 import { ModalBoxDescription } from './ModalBoxDescription';
+import { ModalBoxHeader } from './ModalBoxHeader';
 
 export interface ModalContentProps {
   /** Content rendered inside the Modal. */
@@ -76,7 +76,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   const modalBoxHeader = header ? (
     <div className={css(titleStyles.title)}>{header}</div>
   ) : (
-    title && <div className={css(styles.modalBoxTitle)}>{title}</div>
+    title && <ModalBoxHeader>{title}</ModalBoxHeader>
   );
 
   const modalBoxFooter = footer ? (

packages/react-core/src/components/Modal/__tests__/ModalBoxHeader.test.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import { ModalBoxHeader } from '../ModalBoxHeader';
+
+test('ModalBoxHeader Test', () => {
+  const view = shallow(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);
+  expect(view).toMatchSnapshot();
+});

packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBoxHeader Test 1`] = `
+<div
+  className="pf-c-modal-box__title"
+>
+  This is a ModalBox header
+</div>
+`;

packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -23,11 +23,9 @@ exports[`Modal Content Test description 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Content title
-      </div>
+      </ModalBoxHeader>
       <ModalBoxDescription
         id="id"
       >
@@ -64,11 +62,9 @@ exports[`Modal Content Test isOpen 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Content title
-      </div>
+      </ModalBoxHeader>
       <ModalBoxBody
         id="id"
       >
@@ -102,11 +98,9 @@ exports[`Modal Content Test only body 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Content title
-      </div>
+      </ModalBoxHeader>
       <ModalBoxBody
         id="id"
       >
@@ -140,11 +134,9 @@ exports[`Modal Content Test with footer 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Content title
-      </div>
+      </ModalBoxHeader>
       <ModalBoxBody
         id="id"
       >
@@ -181,11 +173,9 @@ exports[`Modal Content Test with onclose 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Content title
-      </div>
+      </ModalBoxHeader>
       <ModalBoxBody
         id="id"
         isLarge={true}
@@ -223,11 +213,9 @@ exports[`Modal Content test without footer 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Content title
-      </div>
+      </ModalBoxHeader>
       <ModalBoxBody
         id="id"
       >
@@ -261,11 +249,9 @@ exports[`Modal Test with custom footer 1`] = `
       <ModalBoxCloseButton
         onClose={[Function]}
       />
-      <div
-        className="pf-c-modal-box__title"
-      >
+      <ModalBoxHeader>
         Test Modal Custom Footer
-      </div>
+      </ModalBoxHeader>
       <ModalBoxBody
         id="id"
         isLarge={true}

packages/react-core/src/components/Modal/index.ts

@@ -2,5 +2,6 @@ export * from './Modal';
 export * from './ModalBox';
 export * from './ModalBoxBody';
 export * from './ModalBoxCloseButton';
+export * from './ModalBoxHeader';
 export * from './ModalBoxFooter';
 export * from './ModalContent';