feat(Modal): add description example to integration and cypress

Author: kmcfaul

packages/patternfly-4/react-integration/cypress/integration/modal.spec.ts

@@ -24,6 +24,25 @@ describe('Modal Test', () => {
     });
   });
 
+  it('Verify Description Modal', () => {
+    cy.get('#showDescriptionModalButton').then((modalButton: JQuery<HTMLButtonElement>) => {
+      cy.wrap(modalButton).click();
+      cy.get('.pf-c-modal-box')
+        .then(() => {
+          cy.get('.pf-c-modal-box .pf-c-button[aria-label="Close"]').then(closeButton => {
+            cy.wrap(closeButton).click();
+            cy.get('.pf-c-modal-box').should('not.exist');
+          });
+        })
+        .then(() => {
+          cy.wrap(modalButton).click();
+          cy.get('.pf-c-modal-box').should('exist');
+          cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+          cy.get('.pf-c-modal-box').should('not.exist');
+        });
+    });
+  });
+
   it('Verify Small Modal', () => {
     cy.get('#showSmallModalButton').then((modalButton: JQuery<HTMLButtonElement>) => {
       cy.wrap(modalButton).click();

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx

@@ -4,6 +4,7 @@ import WarningTriangleIcon from '@patternfly/react-icons/dist/js/icons/warning-t
 
 interface ModalDemoState {
   isModalOpen: boolean;
+  isModalDescriptionOpen: boolean;
   isSmallModalOpen: boolean;
   isLargeModalOpen: boolean;
   isHalfWidthModalOpen: boolean;
@@ -14,6 +15,7 @@ interface ModalDemoState {
 export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>, ModalDemoState> {
   state = {
     isModalOpen: false,
+    isModalDescriptionOpen: false,
     isSmallModalOpen: false,
     isLargeModalOpen: false,
     isHalfWidthModalOpen: false,
@@ -27,6 +29,12 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     }));
   };
 
+  handleModalDescriptionToggle = () => {
+    this.setState(({ isModalDescriptionOpen }) => ({
+      isModalDescriptionOpen: !isModalDescriptionOpen
+    }));
+  };
+
   handleSmallModalToggle = () => {
     this.setState(({ isSmallModalOpen }) => ({
       isSmallModalOpen: !isSmallModalOpen
@@ -88,6 +96,35 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     );
   }
 
+  renderModalWithDescription() {
+    const { isModalDescriptionOpen } = this.state;
+
+    return (
+      <Modal
+        title="Modal Header"
+        isOpen={isModalDescriptionOpen}
+        onClose={this.handleModalDescriptionToggle}
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua."
+        actions={[
+          <Button key="cancel" variant="secondary" onClick={this.handleModalDescriptionToggle}>
+            Cancel
+          </Button>,
+          <Button key="confirm" variant="primary" onClick={this.handleModalDescriptionToggle}>
+            Confirm
+          </Button>
+        ]}
+        isFooterLeftAligned
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    );
+  }
+
   renderSmallModal() {
     const { isSmallModalOpen } = this.state;
 
@@ -283,13 +320,22 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
           >
             Show No Header Modal
           </Button>
+          <Button
+            style={buttonStyle}
+            variant="primary"
+            onClick={this.handleModalDescriptionToggle}
+            id="showDescriptionModalButton"
+          >
+            Show Modal with Description
+          </Button>
         </div>
         {this.renderModal()}
         {this.renderSmallModal()}
         {this.renderLargeModal()}
         {this.renderHalfWidthModal()}
         {this.renderCustomHeaderFooterModal()}
         {this.renderNoHeaderModal()}
+        {this.renderModalWithDescription()}
       </React.Fragment>
     );
   }