condition label doc (#70)

Author: upalatucci

src/components/status/ConditionLabel/ConditionLabel.md

@@ -1,4 +1,4 @@
-Examples
+Simple example
 
 ```js
 <ConditionLabel
@@ -8,3 +8,45 @@ Examples
   type={'Ready'}
 />
 ```
+
+
+Showcase
+
+```js
+import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+<TableComposable>
+  <Caption>Virtual Machines list</Caption>
+  <Thead>
+    <Tr>
+      <Th>Name</Th>
+      <Th>Conditions</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    <Tr>
+      <Td>Virtual Machine 1</Td>
+      <Td>
+        <ConditionLabel
+          message={'success'}
+          reason={'ready'}
+          status={'true'}
+          type={'Ready'}
+        />
+      </Td>
+    </Tr>
+    
+    <Tr>
+      <Td>Virtual Machine 2</Td>
+      <Td>
+        <ConditionLabel
+          message={'no vmi found'}
+          reason={'no_vmi'}
+          status={'true'}
+          type={'Failure'}
+        />
+      </Td>
+    </Tr>
+  </Tbody>
+</TableComposable>
+```

src/components/status/ConditionLabel/ConditionLabel.tsx

@@ -3,14 +3,29 @@ import * as React from 'react';
 import { Label, Popover, PopoverPosition } from '@patternfly/react-core';
 
 export interface k8sStatusConditions {
+  /**
+   * Type indicate which type of condition is.
+   */
   type: string;
+  /**
+   * Status is the high level overview of how the resource is doing. It contains information available to controllers and users.
+   */
   status?: string;
+  /**
+   * A machine-readable description of the cause of the error. If this value is empty there is no information available.
+   */
   reason?: string;
+  /**
+   * A human-readable description of the cause of the error. This field may be presented as-is to a reader.
+   */
   message?: string;
 }
 
 /**
- * ConditionLabel renders a k8sStatusConditions
+ * ConditionLabel renders a k8sStatusConditions.
+ * Usefull to give information of what the resouce is doing without taking up much space into the interface.
+ *
+ * On mouse click it creates a popover to explain the state in a more disursive way.
  */
 export const ConditionLabel: React.FC<k8sStatusConditions> = React.memo((condition) => {
   const preventLabelLink = React.useCallback((e) => e.preventDefault(), []);

src/components/status/ConditionLabelList/ConditionLabelList.md

@@ -17,3 +17,25 @@ Examples
   ]}
 />
 ```
+
+Showcase 
+```js
+  <div>
+    <span>Virtual Machine 1  </span>
+    <ConditionLabelList conditions={[
+        {
+          message: 'no vmi found',
+          reason: 'no_vmi',
+          status: 'true',
+          type: 'Failure',
+        },
+        {
+          message: 'success',
+          reason: 'ready',
+          status: 'true',
+          type: 'Ready',
+        },
+      ]}
+    />
+  </div>
+```

src/components/status/ConditionLabelList/ConditionLabelList.tsx

@@ -2,15 +2,22 @@ import * as React from 'react';
 
 import { LabelGroup } from '@patternfly/react-core';
 
-import { ConditionLabel, k8sStatusConditions } from '../ConditionLabel';
+import { ConditionLabel } from '../ConditionLabel';
+import { k8sStatusConditions } from '../ConditionLabel/ConditionLabel';
 
-/**
- * VirtualMachineCondition renders a list of a k8s resource conditions
- * */
 export interface ConditionLabelListProps {
+  /**
+   * Array of k8s status conditions.
+   * k8s status conditions are similar to [KubeVirt Condition](https://kubevirt.io/api-reference/master/definitions.html#_v1_kubevirtcondition) but can represent also different kind of conditions
+   */
   conditions: k8sStatusConditions[];
 }
 
+/**
+ * ConditionLabelList renders a list of a k8s resource conditions.
+ *
+ * This component can me usefull to give an in dept clues of what the resourse is doing.
+ * */
 export const ConditionLabelList: React.FC<ConditionLabelListProps> = React.memo(
   ({ conditions }) => {
     return (