feat(WarningModal): Add warning modal component

Author: fhlavac

packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md

@@ -0,0 +1,29 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Warning modal
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['WarningModal']
+---
+
+import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
+
+A **warning modal** component displays a modal asking user to confirm his intention to perform a risky action.
+
+## Examples
+
+### Basic warning modal
+
+A basic warning modal component provides users with a basic layout to which only specific texts need to be passed.
+Action buttons callbacks can be customized using `onConfirm` and `onClose`.
+
+```js file="./WarningModalExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
+import { Button } from '@patternfly/react-core';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  return <>
+    <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+    <WarningModal
+      isOpen={isOpen}
+      title='Unsaved changes'
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}>
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
+  </>
+};

packages/module/src/WarningModal/WarningModal.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import WarningModal from './WarningModal';
+
+describe('WarningModal component', () => {
+  const initialProps = {
+    onConfirm: jest.fn(),
+    children: <>By confirming this action, unsaved data may be lost. Do you want to continue?</>
+  };
+  
+  it('should render', () => {
+    const { container } = render(<WarningModal {...initialProps}/>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

packages/module/src/WarningModal/WarningModal.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Button, ModalProps, Modal, ModalVariant, ButtonVariant, variantIcons, } from '@patternfly/react-core';
+
+export interface WarningModalProps extends Omit<ModalProps, 'ref'> {
+  /** Callback for the confirm action button. */
+  onConfirm?: () => void;
+  /** Custom label for the confirm action button */
+  confirmButtonLabel? : string;
+  /** Custom label for the cancel action button */
+  cancelButtonLabel? : string;
+}
+
+const WarningModal: React.FunctionComponent<WarningModalProps> = ({
+  isOpen,
+  onConfirm,
+  onClose,
+  children,
+  confirmButtonLabel = 'Confirm',
+  cancelButtonLabel = 'Cancel',
+  variant = ModalVariant.small,
+  titleIconVariant = 'warning',
+  ...props
+}: WarningModalProps) => (
+  <Modal
+    variant={variant}
+    isOpen={isOpen}
+    onClose={onClose}
+    onEscapePress={onClose}
+    titleIconVariant={titleIconVariant}
+    actions={[
+      <Button
+        ouiaId="primary-confirm-button"
+        key="confirm"
+        variant={ButtonVariant.primary}
+        onClick={onConfirm}
+      >
+        {confirmButtonLabel}
+      </Button>,
+      <Button
+        ouiaId="secondary-cancel-button"
+        key="cancel"
+        variant={ButtonVariant.link}
+        onClick={onClose}
+      >
+        {cancelButtonLabel}
+      </Button>,
+    ]}
+    {...props}
+  >
+    {children}
+  </Modal>
+);
+
+
+export default WarningModal;

packages/module/src/WarningModal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './WarningModal';
+export * from './WarningModal';

packages/module/src/index.ts

@@ -32,3 +32,6 @@ export * from './TagCount';
 
 export { default as UnavailableContent } from './UnavailableContent';
 export * from './UnavailableContent';
+
+export { default as WarningModal } from './WarningModal';
+export * from './WarningModal';