Merge branch 'patternfly:main' into main

wise-king-sullyman · web-flow · commit 8cdaa3ec989e · 2024-02-02T09:22:19.000-05:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -46,6 +46,7 @@
     "@patternfly/documentation-framework": "^2.0.0-alpha.57",
     "@patternfly/patternfly": "^5.1.0",
     "@patternfly/react-code-editor": "^5.1.1",
+    "@openshift-console/dynamic-plugin-sdk": "^0.0.21",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@types/react-router-dom": "^5.3.3",
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md
@@ -11,6 +11,7 @@ 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: ['Ansible']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/Ansible.md
 ---
 
 import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md
@@ -11,6 +11,7 @@ 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: ['Battery']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md
 ---
 
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButton.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: CloseButton
+# 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: ['CloseButton']
+---
+
+import { CloseIcon } from '@patternfly/react-icons';
+import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';
+
+**Close button**
+
+The close button component provides a way for users to exit a modal, dialogue, or similar action.
+
+## Examples ##
+
+You can use  onClick  to execute a callback when a user selects the close button.
+
+```js file="./CloseButtonExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx
@@ -0,0 +1,9 @@
+/* eslint-disable no-console */
+import React from 'react'
+import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <>
+    <CloseButton onClick={()=>{console.log('Close button clicked')}} />
+  </>
+);
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md
@@ -24,6 +24,7 @@ propComponents: [
   # 'Tab', # No output --> is a type and not an interface
 ]
 beta: true
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md
 ---
 
 import { ActionMenu } from '@patternfly/react-component-groups';
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md
@@ -11,6 +11,7 @@ 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: ['ErrorBoundary']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorBoundary/ErrorBoundary.md
 ---
 
 import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary";
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md
@@ -11,6 +11,7 @@ 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: ['ErrorState']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md
 ---
 
 import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md
@@ -11,6 +11,7 @@ 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: ['InvalidObject']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObject.md
 ---
 
 import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md
@@ -4,6 +4,7 @@ subsection: Component groups
 id: Not authorized
 source: react
 propComponents: ['NotAuthorized']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorized.md
 ---
 
 import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized";
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md
@@ -11,6 +11,7 @@ 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: ['SkeletonTable']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md
 ---
 import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable';
 
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md
@@ -11,6 +11,7 @@ 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: ['TagCount']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md
 ---
 import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
 
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md
@@ -11,6 +11,7 @@ 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: ['UnavailableContent']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.md
 ---
 
 import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent';
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md
@@ -11,6 +11,7 @@ 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']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md
 ---
 
 import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
@@ -28,3 +29,21 @@ You can customize the contents of the modal to fit your use cases. To adjust the
 ```js file="./WarningModalExample.tsx"
 
 ```
+
+### Warning Modal with danger button variant
+
+You can customize the modal to have a confirm button with a danger color
+
+```js file="./WarningModalDangerExample.tsx"
+
+```
+
+
+### Warning Modal with checkbox
+
+You can customize the Warning Modal to include a checkbox to double check the user wants to use the selected action.
+
+```js file="./WarningModalCheckboxExample.tsx"
+
+```
+
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
@@ -0,0 +1,21 @@
+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)}
+      withCheckbox
+      checkboxLabel='Are you sure?'
+      confirmButtonVariant
+    >
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
+  </>
+};
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
@@ -0,0 +1,18 @@
+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'
+      confirmButtonVariant
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}>
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
+  </>
+};
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx
@@ -9,6 +9,8 @@ export const BasicExample: React.FunctionComponent = () => {
     <WarningModal
       isOpen={isOpen}
       title='Unsaved changes'
+      confirmButtonLabel='Yes'
+      cancelButtonLabel='No'
       onClose={() => setIsOpen(false)}
       onConfirm={() => setIsOpen(false)}>
       Your page contains unsaved changes. Do you want to leave?
diff --git a/packages/module/src/CloseButton/CloseButton.tsx b/packages/module/src/CloseButton/CloseButton.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
+
+const useStyles = createUseStyles({
+  '& float-right': {
+    float: 'right'
+  },
+  '&  no-padding': {
+    padding: 0
+  }
+});
+
+export interface CloseButtonProps extends ButtonProps {
+  /** Additional styling to apply to the close button. */
+  additionalClassName?: string;
+  /** Aria label for accessibility */
+  ariaLabel?: string;
+  /** Data test id used for testing. */
+  dataTestID?: string;
+  /** Callback when the button is clicked*/
+  onClick: (event: any) => void;
+}
+
+const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
+  additionalClassName,
+  ariaLabel,
+  dataTestID,
+  onClick,
+  ...props
+}: CloseButtonProps) => {
+  const classes = useStyles();
+  return (
+    <Button
+      aria-label={ariaLabel || 'Close'}
+      className={clsx(classes, additionalClassName)}
+      data-test-id={dataTestID}
+      onClick={onClick}
+      variant={ButtonVariant.plain}
+      {...props}
+    >
+      <CloseIcon />
+    </Button>
+  );
+};
+
+export default CloseButton;
diff --git a/packages/module/src/CloseButton/index.ts b/packages/module/src/CloseButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CloseButton';
+export * from './CloseButton';
diff --git a/packages/module/src/WarningModal/WarningModal.test.tsx b/packages/module/src/WarningModal/WarningModal.test.tsx
@@ -7,6 +7,7 @@ describe('WarningModal component', () => {
     title: 'Unsaved changes',
     onClose: () => null,
     onConfirm: () => null,
+    confirmCheckMessage: 'hi there',
   };
   
   it('should render', () => {
diff --git a/packages/module/src/WarningModal/WarningModal.tsx b/packages/module/src/WarningModal/WarningModal.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
-import { Button, ModalProps, Modal, ModalVariant, ButtonVariant } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Button, ModalProps, Modal, ModalVariant, ButtonVariant, Checkbox } 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;
+  confirmButtonLabel?: string;
   /** Custom label for the cancel action button */
-  cancelButtonLabel? : string;
+  cancelButtonLabel?: string;
+  /** Whether modal requires a checkbox before confirming */
+  withCheckbox?: boolean;
+  /** Custom checkbox label */
+  checkboxLabel?: string;
+  /** Visual variant of the confirm button */
+  confirmButtonVariant?: boolean;
 }
 
 const WarningModal: React.FunctionComponent<WarningModalProps> = ({
@@ -19,37 +25,55 @@ const WarningModal: React.FunctionComponent<WarningModalProps> = ({
   cancelButtonLabel = 'Cancel',
   variant = ModalVariant.small,
   titleIconVariant = 'warning',
+  withCheckbox = false,
+  checkboxLabel='I understand that this action cannot be undone',
+  confirmButtonVariant = false,
   ...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>
-);
+}: WarningModalProps) => {
+  const [ checked, setChecked ] = useState(false);
+
+  return (
+    <Modal
+      variant={variant}
+      isOpen={isOpen}
+      onClose={onClose}
+      onEscapePress={onClose}
+      titleIconVariant={titleIconVariant}
+      actions={[
+        <Button
+          ouiaId="primary-confirm-button"
+          key="confirm"
+          variant={confirmButtonVariant ? ButtonVariant.danger : ButtonVariant.primary}
+          onClick={onConfirm}
+          isDisabled={withCheckbox && !checked}
+        >
+          {confirmButtonLabel}
+        </Button>,
+        <Button
+          ouiaId="secondary-cancel-button"
+          key="cancel"
+          variant={ButtonVariant.link}
+          onClick={onClose}
+        >
+          {cancelButtonLabel}
+        </Button>,
+      ]}
+      {...props}
+    >
+      {children}
+      {withCheckbox ? (
+        <Checkbox
+          isChecked={checked}
+          onChange={() => setChecked(!checked)}
+          label={checkboxLabel}
+          id="warning-modal-check"
+          className="pf-v5-u-mt-lg"
+        />
+      ) : null}
+    </Modal>
+  )
+  
+};
 
 
 export default WarningModal;
diff --git a/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap b/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
@@ -92,6 +92,7 @@ exports[`WarningModal component should render 1`] = `
             </header>
             <div
               class="pf-v5-c-modal-box__body"
+              confirmcheckmessage="hi there"
               id="pf-modal-part-2"
             >
               Warning modal content
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
@@ -12,6 +12,9 @@ export * from './Ansible';
 export { default as Battery } from './Battery';
 export * from './Battery';
 
+export { default as CloseButton } from './CloseButton';
+export * from './CloseButton';
+
 export { default as DetailsPage } from './DetailsPage';
 export * from './DetailsPage';
 

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ propComponents: [`
`24`	`24`	`# 'Tab', # No output --> is a type and not an interface`
`25`	`25`	`]`
`26`	`26`	`beta: true`
	`27`	`+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md`
`27`	`28`	`---`
`28`	`29`
`29`	`30`	`import { ActionMenu } from '@patternfly/react-component-groups';`