Skip to content

Commit 4f8ff32

Browse files
tvu20tvu20
committed
CONSOLE-3204: Add missing api docs for *Icon and *Status components
Updates to the API docs for dynamic plugin sdk.
1 parent b3d0c05 commit 4f8ff32

File tree

7 files changed

+306
-8
lines changed

7 files changed

+306
-8
lines changed

‎frontend/packages/console-dynamic-plugin-sdk/docs/api.md

+160-8
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,28 @@ React context
128128

129129
### Summary
130130

131-
[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)
131+
Component for displaying a green check mark circle icon
132132

133133

134134

135+
### Example
136+
137+
138+
```tsx
139+
<GreenCheckCircleIcon />
140+
```
141+
142+
143+
144+
145+
146+
### Parameters
147+
148+
| Parameter Name | Description |
149+
| -------------- | ----------- |
150+
| `className` | (optional) class name for styling |
151+
| `title` | (optional) icon title |
152+
| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
135153

136154

137155

@@ -141,10 +159,28 @@ React context
141159

142160
### Summary
143161

144-
[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)
162+
Component for displaying a red exclamation mark circle icon
145163

146164

147165

166+
### Example
167+
168+
169+
```tsx
170+
<RedExclamationCircleIcon />
171+
```
172+
173+
174+
175+
176+
177+
### Parameters
178+
179+
| Parameter Name | Description |
180+
| -------------- | ----------- |
181+
| `className` | (optional) class name for styling |
182+
| `title` | (optional) icon title |
183+
| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
148184

149185

150186

@@ -154,10 +190,28 @@ React context
154190

155191
### Summary
156192

157-
[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)
193+
Component for displaying a yellow triangle exclamation icon
158194

159195

160196

197+
### Example
198+
199+
200+
```tsx
201+
<YellowExclamationTriangleIcon />
202+
```
203+
204+
205+
206+
207+
208+
### Parameters
209+
210+
| Parameter Name | Description |
211+
| -------------- | ----------- |
212+
| `className` | (optional) class name for styling |
213+
| `title` | (optional) icon title |
214+
| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
161215

162216

163217

@@ -167,10 +221,28 @@ React context
167221

168222
### Summary
169223

170-
[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)
224+
Component for displaying a blue info circle icon
171225

172226

173227

228+
### Example
229+
230+
231+
```tsx
232+
<BlueInfoCircleIcon />
233+
```
234+
235+
236+
237+
238+
239+
### Parameters
240+
241+
| Parameter Name | Description |
242+
| -------------- | ----------- |
243+
| `className` | (optional) class name for styling |
244+
| `title` | (optional) icon title |
245+
| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |
174246

175247

176248

@@ -180,10 +252,30 @@ React context
180252

181253
### Summary
182254

183-
[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)
255+
Component for displaying an error status popover
184256

185257

186258

259+
### Example
260+
261+
262+
```tsx
263+
<ErrorStatus />
264+
```
265+
266+
267+
268+
269+
270+
### Parameters
271+
272+
| Parameter Name | Description |
273+
| -------------- | ----------- |
274+
| `title` | (optional) status text |
275+
| `iconOnly` | (optional) if true, only displays icon |
276+
| `noTooltip` | (optional) if true, does not display tooltip |
277+
| `className` | (optional) class name for styling |
278+
| `popoverTitle` | (optional) title for popover |
187279

188280

189281

@@ -193,10 +285,30 @@ React context
193285

194286
### Summary
195287

196-
[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)
288+
Component for displaying an information status popover
197289

198290

199291

292+
### Example
293+
294+
295+
```tsx
296+
<InfoStatus />
297+
```
298+
299+
300+
301+
302+
303+
### Parameters
304+
305+
| Parameter Name | Description |
306+
| -------------- | ----------- |
307+
| `title` | (optional) status text |
308+
| `iconOnly` | (optional) if true, only displays icon |
309+
| `noTooltip` | (optional) if true, does not display tooltip |
310+
| `className` | (optional) class name for styling |
311+
| `popoverTitle` | (optional) title for popover |
200312

201313

202314

@@ -206,10 +318,30 @@ React context
206318

207319
### Summary
208320

209-
[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)
321+
Component for displaying a progressing status popover
210322

211323

212324

325+
### Example
326+
327+
328+
```tsx
329+
<ProgressStatus />
330+
```
331+
332+
333+
334+
335+
336+
### Parameters
337+
338+
| Parameter Name | Description |
339+
| -------------- | ----------- |
340+
| `title` | (optional) status text |
341+
| `iconOnly` | (optional) if true, only displays icon |
342+
| `noTooltip` | (optional) if true, does not display tooltip |
343+
| `className` | (optional) class name for styling |
344+
| `popoverTitle` | (optional) title for popover |
213345

214346

215347

@@ -219,10 +351,30 @@ React context
219351

220352
### Summary
221353

222-
[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)
354+
Component for displaying a success status popover
223355

224356

225357

358+
### Example
359+
360+
361+
```tsx
362+
<SuccessStatus />
363+
```
364+
365+
366+
367+
368+
369+
### Parameters
370+
371+
| Parameter Name | Description |
372+
| -------------- | ----------- |
373+
| `title` | (optional) status text |
374+
| `iconOnly` | (optional) if true, only displays icon |
375+
| `noTooltip` | (optional) if true, does not display tooltip |
376+
| `className` | (optional) class name for styling |
377+
| `popoverTitle` | (optional) title for popover |
226378

227379

228380

‎frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/GenericStatus.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,20 @@ type GenericStatusProps = StatusComponentProps & {
99
noTooltip?: boolean;
1010
};
1111

12+
/**
13+
* Component for a generic status popover
14+
* @param {string} [title] - (optional) status text
15+
* @param {boolean} [iconOnly] - (optional) if true, only displays icon
16+
* @param {boolean} [noTooltip] - (optional) if true, does not display tooltip
17+
* @param {string} [className] - (optional) class name for styling
18+
* @param {string} [popoverTitle] - (optional) title for popover
19+
* @param {React.ComponentType} Icon - icon to be displayed
20+
* @param {ReactNode} [children] - (optional) children for the component
21+
* @example
22+
* ```tsx
23+
* <GenericStatus Icon={CircleIcon} />
24+
* ```
25+
*/
1226
const GenericStatus: React.FC<GenericStatusProps> = (props) => {
1327
const { Icon, children, popoverTitle, title, noTooltip, iconOnly, ...restProps } = props;
1428
const renderIcon = iconOnly && !noTooltip ? <Icon title={title} /> : <Icon />;

‎frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/PopoverStatus.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,23 @@ type PopoverStatusProps = {
1111
shouldClose?: (hideFunction: any) => void;
1212
};
1313

14+
/**
15+
* Component for creating a status popover item
16+
* @param {ReactNode} statusBody - content displayed within the popover.
17+
* @param {function} [onHide] - (optional) function invoked when popover begins to transition out
18+
* @param {function} [onShow] - (optional) function invoked when popover begins to appear
19+
* @param {string} [title] - (optional) title for the popover
20+
* @param {boolean} [hideHeader] - (optional) when true, header text is hidden
21+
* @param {boolean} [isVisible] - (optional) when true, the popover is displayed
22+
* @param {function} [shouldClose] - (optional) callback function invoked when the popover is closed only if isVisible is also controlled
23+
* @param {ReactNode} [children] - (optional) children for the component
24+
* @example
25+
* ```tsx
26+
* <PopoverStatus title={title} statusBody={statusBody}>
27+
* {children}
28+
* </PopoverStatus>
29+
* ```
30+
*/
1431
const PopoverStatus: React.FC<PopoverStatusProps> = ({
1532
hideHeader,
1633
children,

‎frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/Status.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,20 @@ export type StatusProps = StatusComponentProps & {
2020
children?: React.ReactNode;
2121
};
2222

23+
/**
24+
* Component for displaying a status message
25+
* @param {string} status - type of status to be displayed
26+
* @param {string} [title] - (optional) status text
27+
* @param {boolean} [iconOnly] - (optional) if true, only displays icon
28+
* @param {boolean} [noTooltip] - (optional) if true, does not display tooltip
29+
* @param {string} [className] - (optional) class name for styling
30+
* @param {string} [popoverTitle] - (optional) title for popover
31+
* @param {ReactNode} [children] - (optional) children for the component
32+
* @example
33+
* ```tsx
34+
* <Status status='Warning' />
35+
* ```
36+
*/
2337
const Status: React.FC<StatusProps> = ({
2438
status,
2539
title,

‎frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/StatusIconAndText.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,19 @@ type StatusIconAndTextProps = StatusComponentProps & {
99
spin?: boolean;
1010
};
1111

12+
/**
13+
* Component for displaying a status icon and text
14+
* @param {string} [title] - (optional) status text
15+
* @param {boolean} [iconOnly] - (optional) if true, only displays icon
16+
* @param {boolean} [noTooltip] - (optional) if true, does not display tooltip
17+
* @param {string} [className] - (optional) class name for styling
18+
* @param {React.ReactElement} [icon] - (optional) icon to be displayed
19+
* @param {boolean} [spin] - (optional) if true, icon rotates
20+
* @example
21+
* ```tsx
22+
* <StatusIconAndText title={title} icon={renderIcon} />
23+
* ```
24+
*/
1225
const StatusIconAndText: React.FC<StatusIconAndTextProps> = ({
1326
icon,
1427
title,

0 commit comments

Comments
 (0)