Doc new style (#16)

Author: upalatucci

package.json

@@ -33,6 +33,7 @@
     "@types/jest": "^27.4.0",
     "@types/jsdom": "^16.2.14",
     "@types/react": "^17.0.38",
+    "@types/webpack-env": "^1.16.3",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
     "babel-jest": "^27.4.6",
@@ -77,6 +78,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@kubevirt-ui/kubevirt-api": "^0.0.30"
+    "@kubevirt-ui/kubevirt-api": "^0.0.30",
+    "classnames": "^2.3.1"
   }
 }

src/components/Button/Button.md

@@ -0,0 +1,10 @@
+Examples
+
+```js
+<VMStatusConditionLabel
+  message={'success'}
+  reason={'ready'}
+  status={'true'}
+  type={'Ready'}
+/>
+```

src/components/Button/Button.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { V1VirtualMachineCondition } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { Label, Popover, PopoverPosition } from '@patternfly/react-core';
+
+export const VMStatusConditionLabel: React.FC<V1VirtualMachineCondition> = React.memo(
+  (condition) => {
+    const preventLabelLink = React.useCallback((e) => e.preventDefault(), []);
+
+    const getBodyContent = React.useCallback(
+      () => <div>{condition?.message}</div>,
+      [condition?.message],
+    );
+
+    return (
+      <Popover
+        position={PopoverPosition.top}
+        aria-label="Condition Popover"
+        bodyContent={getBodyContent}
+      >
+        <Label color="grey" isTruncated href="#" onClick={preventLabelLink}>
+          {condition?.reason}={condition?.status}
+        </Label>
+      </Popover>
+    );
+  },
+);
+VMStatusConditionLabel.displayName = 'VMStatusConditionLabel';

src/components/Button/Button.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+import { VMStatusConditionLabel } from '../VMStatusConditionLabel';
+
+import { conditionsMock } from './mocks';
+
+afterEach(cleanup);
+
+test('VMStatusConditionLabel', async () => {
+  const { message, reason, status, type } = conditionsMock[0];
+  const { asFragment, getByText } = render(
+    <VMStatusConditionLabel message={message} reason={reason} status={status} type={type} />,
+  );
+  const firstRender = asFragment();
+
+  expect(firstRender).toMatchSnapshot();
+
+  // click on condition to open popover
+  fireEvent.click(getByText(`${reason}=${status}`));
+
+  if (!message) return;
+
+  const popoverMessage = await screen.findByText(message);
+
+  expect(popoverMessage).toHaveTextContent(message);
+});

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VMStatusConditionLabel 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <a
+      class="pf-c-label__content"
+      href="#"
+    >
+      <span
+        class="pf-c-label__text"
+      >
+        no_vmi=true
+      </span>
+    </a>
+  </span>
+</DocumentFragment>
+`;

src/components/VMStatusConditionLabel/VMStatusConditionLabel.md

@@ -0,0 +1,16 @@
+import { V1VirtualMachineCondition } from '@kubevirt-ui/kubevirt-api/kubevirt';
+
+export const conditionsMock: V1VirtualMachineCondition[] = [
+  {
+    message: 'no vmi found',
+    reason: 'no_vmi',
+    status: 'true',
+    type: 'Failure',
+  },
+  {
+    message: 'success',
+    reason: 'ready',
+    status: 'true',
+    type: 'Ready',
+  },
+];