CONSOLE-3204: Add missing api docs for *Icon and *Status components

Updates to the API docs for dynamic plugin sdk.
openshift · Jul 8, 2022 · 49f045d · 49f045d
1 parent b3d0c05
commit 49f045d
Show file tree

Hide file tree

Showing 7 changed files with 306 additions and 8 deletions.
diff --git a/frontend/packages/console-dynamic-plugin-sdk/docs/api.md b/frontend/packages/console-dynamic-plugin-sdk/docs/api.md
@@ -128,10 +128,28 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx)
+Component for displaying a green check mark circle icon
 
 
 
+### Example
+
+
+```tsx
+<GreenCheckCircleIcon />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) class name for styling |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size |
 
 
 
@@ -141,10 +159,28 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx)
+Component for displaying a red exclamation mark circle icon
 
 
 
+### Example
+
+
+```tsx
+<RedExclamationCircleIcon />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) class name for styling |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size |
 
 
 
@@ -154,10 +190,28 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx)
+Component for displaying a yellow triangle exclamation icon
 
 
 
+### Example
+
+
+```tsx
+<YellowExclamationTriangleIcon />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) class name for styling |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size |
 
 
 
@@ -167,10 +221,28 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx)
+Component for displaying a blue info circle icon
 
 
 
+### Example
+
+
+```tsx
+<BlueInfoCircleIcon />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) class name for styling |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size |
 
 
 
@@ -180,10 +252,30 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/statuses.tsx)
+Component for displaying an error status popover
 
 
 
+### Example
+
+
+```tsx
+<ErrorStatus />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, does not display tooltip |
+| `className` | (optional) class name for styling |
+| `popoverTitle` | (optional) title for popover |
 
 
 
@@ -193,10 +285,30 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/statuses.tsx)
+Component for displaying an information status popover
 
 
 
+### Example
+
+
+```tsx
+<InfoStatus />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, does not display tooltip |
+| `className` | (optional) class name for styling |
+| `popoverTitle` | (optional) title for popover |
 
 
 
@@ -206,10 +318,30 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/statuses.tsx)
+Component for displaying a progressing status popover
 
 
 
+### Example
+
+
+```tsx
+<ProgressStatus />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, does not display tooltip |
+| `className` | (optional) class name for styling |
+| `popoverTitle` | (optional) title for popover |
 
 
 
@@ -219,10 +351,30 @@ React context
 
 ### Summary
 
-[For more details please refer the implementation](https://github.com/openshift/console/tree/release-4.11/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/statuses.tsx)
+Component for displaying a success status popover
 
 
 
+### Example
+
+
+```tsx
+<SuccessStatus />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, does not display tooltip |
+| `className` | (optional) class name for styling |
+| `popoverTitle` | (optional) title for popover |
 
 
 

diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/GenericStatus.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/GenericStatus.tsx
@@ -9,6 +9,20 @@ type GenericStatusProps = StatusComponentProps & {
   noTooltip?: boolean;
 };
 
+/**
+ * Component for a generic status popover
+ * @param {string} [title] - (optional) status text
+ * @param {boolean} [iconOnly] - (optional) if true, only displays icon
+ * @param {boolean} [noTooltip] - (optional) if true, does not display tooltip
+ * @param {string} [className] - (optional) class name for styling
+ * @param {string} [popoverTitle] - (optional) title for popover
+ * @param {React.ComponentType} Icon - icon to be displayed
+ * @param {ReactNode} [children] - (optional) children for the component
+ * @example
+ * ```tsx
+ * <GenericStatus Icon={CircleIcon} />
+ * ```
+ */
 const GenericStatus: React.FC<GenericStatusProps> = (props) => {
   const { Icon, children, popoverTitle, title, noTooltip, iconOnly, ...restProps } = props;
   const renderIcon = iconOnly && !noTooltip ? <Icon title={title} /> : <Icon />;

diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/PopoverStatus.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/PopoverStatus.tsx
@@ -11,6 +11,23 @@ type PopoverStatusProps = {
   shouldClose?: (hideFunction: any) => void;
 };
 
+/**
+ * Component for creating a status popover item
+ * @param {ReactNode} statusBody - content displayed within the popover.
+ * @param {function} [onHide] - (optional) function invoked when popover begins to transition out
+ * @param {function} [onShow] - (optional) function invoked when popover begins to appear
+ * @param {string} [title] - (optional) title for the popover
+ * @param {boolean} [hideHeader] - (optional) when true, header text is hidden
+ * @param {boolean} [isVisible] - (optional) when true, the popover is displayed
+ * @param {function} [shouldClose] - (optional) callback function invoked when the popover is closed only if isVisible is also controlled
+ * @param {ReactNode} [children] - (optional) children for the component
+ * @example
+ * ```tsx
+ * <PopoverStatus title={title} statusBody={statusBody}>
+ *   {children}
+ * </PopoverStatus>
+ * ```
+ */
 const PopoverStatus: React.FC<PopoverStatusProps> = ({
   hideHeader,
   children,

diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/Status.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/Status.tsx
@@ -20,6 +20,20 @@ export type StatusProps = StatusComponentProps & {
   children?: React.ReactNode;
 };
 
+/**
+ * Component for displaying a status message
+ * @param {string} status - type of status to be displayed
+ * @param {string} [title] - (optional) status text
+ * @param {boolean} [iconOnly] - (optional) if true, only displays icon
+ * @param {boolean} [noTooltip] - (optional) if true, does not display tooltip
+ * @param {string} [className] - (optional) class name for styling
+ * @param {string} [popoverTitle] - (optional) title for popover
+ * @param {ReactNode} [children] - (optional) children for the component
+ * @example
+ * ```tsx
+ * <Status status='Warning' />
+ * ```
+ */
 const Status: React.FC<StatusProps> = ({
   status,
   title,

diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/StatusIconAndText.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/StatusIconAndText.tsx
@@ -9,6 +9,19 @@ type StatusIconAndTextProps = StatusComponentProps & {
   spin?: boolean;
 };
 
+/**
+ * Component for displaying a status icon and text
+ * @param {string} [title] - (optional) status text
+ * @param {boolean} [iconOnly] - (optional) if true, only displays icon
+ * @param {boolean} [noTooltip] - (optional) if true, does not display tooltip
+ * @param {string} [className] - (optional) class name for styling
+ * @param {React.ReactElement} [icon] - (optional) icon to be displayed
+ * @param {boolean} [spin] - (optional) if true, icon rotates
+ * @example
+ * ```tsx
+ * <StatusIconAndText title={title} icon={renderIcon} />
+ * ```
+ */
 const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
   icon,
   title,