statusicon doc (#67)

Author: upalatucci

src/components/icons/StatusIcon/StatusIcon.md

@@ -4,10 +4,42 @@ Spinning icon
   <StatusIcon status='Running' spin />
 ```
 
+Showcase in a list of virtual machines
+
+```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>State</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    <Tr>
+      <Td>Debian virtual machine</Td>
+      <Td><StatusIcon status='Paused' /> Paused</Td>
+    </Tr>
+    
+    <Tr>
+      <Td>RHEL virtual machine</Td>
+      <Td><StatusIcon status='Starting' spin /> Starting</Td>
+    </Tr>
+    <Tr>
+      <Td>CentOS virtual machine</Td>
+      <Td><StatusIcon status='ErrImagePull' /> Error</Td>
+    </Tr>
+  </Tbody>
+</TableComposable>
+```
 
 All possible statuses
 
 ```js
+import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
 const possibleStatuses = {
   Stopped: 'Stopped',
   Migrating: 'Migrating',
@@ -29,20 +61,22 @@ const possibleStatuses = {
   Unknown: 'Unknown',
 };
 
-<table className='pf-c-table pf-m-grid-md'>
-<thead>
-  <tr>
-    <th width='250px'>Printable Status</th>
-    <th>Icon</th>
-  </tr>
-  </thead>
+<TableComposable>
+  <Thead>
+    <Tr>
+      <Th>Printable Status</Th>
+      <Th>Icon</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
   {Object.values(possibleStatuses).map(status => (
-    <tr key={status}>
-      <td>{status}</td>
-      <td><StatusIcon status={status} /></td>
-    </tr>
+    <Tr key={status}>
+      <Td>{status}</Td>
+      <Td><StatusIcon status={status} /></Td>
+    </Tr>
   ))}
-</table>
+  </Tbody>
+</TableComposable>
 
 
 ```

src/components/icons/StatusIcon/StatusIcon.tsx

@@ -104,6 +104,7 @@ const statusLabelHandler = {
 
 export const statusToLabel = new Proxy(
   {
+    ...statuses,
     [statuses.Terminating]: customStatusLabels.Deleting,
     [statuses.Provisioning]: customStatusLabels.Starting,
     [statuses.WaitingForVolumeBinding]: customStatusLabels.Starting,
@@ -156,7 +157,16 @@ export type StatusIconProps = {
 };
 
 /**
- * StatusIcon renders status icons for k8s elements to visualize [resource lifecycle phases](https://kubernetes.io/docs/concepts/workloads/pods/pod-lifecycle/#pod-phase)
+ * StatusIcon renders icons for k8s elements to visualize [resource lifecycle phases](https://kubernetes.io/docs/concepts/workloads/pods/pod-lifecycle/#pod-phase).
+ * It can accomodate statuses of different resourceses like virtual machines, virtual machine instances and in general all the resorces that follow the k8s lifecycle pharses.
+ *
+ * All the icons are svg based with *width* and *height* of *1em*. The icon *color* inherit the css container's *color* property, except for the error icons that are only red.
+ *
+ * Icons has also a *title* for accessibility depends on the provided status and can be inspected on mouse hover
+ *
+ * Please use the spin property to indicate that something is “loading” or in the middle of processing following the PatterFly guidelines.
+ * Indeed having several elements spinnings and moving in the page can distract the user from important tasks and warnings that need more attentions.
+ *
  */
 export const StatusIcon: React.FC<StatusIconProps> = React.memo(
   ({ status, 'data-test-id': dataTestId, spin = false }) => {