Merge pull request openshift#11808 from tvu20/CONSOLE3204

CONSOLE-3204: Add missing api docs for *Icon and *Status components
kubecloudsinc · Jul 13, 2022 · c136a10 · c136a10
2 parents 6fbbf27 + faa51c0
commit c136a10
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 title="Healthy" />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) additional class name for the component |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
 
 
 
@@ -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 title="Failed" />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) additional class name for the component |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
 
 
 
@@ -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 title="Warning" />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) additional class name for the component |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
 
 
 
@@ -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 title="Info" />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `className` | (optional) additional class name for the component |
+| `title` | (optional) icon title |
+| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
 
 
 
@@ -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 title={errorMsg} />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, tooltip won't be displayed |
+| `className` | (optional) additional class name for the component |
+| `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 title={infoMsg} />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, tooltip won't be displayed |
+| `className` | (optional) additional class name for the component |
+| `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 title={progressMsg} />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, tooltip won't be displayed |
+| `className` | (optional) additional class name for the component |
+| `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 title={successMsg} />
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `title` | (optional) status text |
+| `iconOnly` | (optional) if true, only displays icon |
+| `noTooltip` | (optional) if true, tooltip won't be displayed |
+| `className` | (optional) additional class name for the component |
+| `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, tooltip won't be displayed
+ * @param {string} [className] - (optional) additional class name for the component
+ * @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, tooltip won't be displayed
+ * @param {string} [className] - (optional) additional class name for the component
+ * @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, tooltip won't be displayed
+ * @param {string} [className] - (optional) additional class name for the component
+ * @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,