Clarity components: CardGrid, InfoCard, PageHeader, SearchFilter (#1840)

dashboard/src/components/Card/CardGrid.v2.scss

@@ -0,0 +1,4 @@
+.card-grid {
+  padding-right: 1.2rem;
+  padding-left: 1.2rem;
+}

dashboard/src/components/Card/CardGrid.v2.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import Row from "../js/Row";
+
+import "./CardGrid.v2.css";
+
+function CardGrid(props: { children: JSX.Element }) {
+  return (
+    <div className="card-grid">
+      <Row>{props.children}</Row>
+    </div>
+  );
+}
+
+export default CardGrid;

dashboard/src/components/Clarity/converter/reactWrapper.ts

@@ -28,10 +28,6 @@ export function createReactComponent<BaseComponent extends HTMLElement>(elementN
           this._updateCustomElementProperty(prop);
         }
       });
-
-      if (this.ref.current) {
-        this.ref.current.focus = this.ref.current.focus;
-      }
     }
 
     public componentDidUpdate(prevProps: any) {

dashboard/src/components/InfoCard/InfoCard.v2.scss

@@ -0,0 +1,31 @@
+.card-header {
+  img {
+    max-width: 24px;
+    float: right;
+  }
+}
+
+.card-block {
+  height: 4.5rem;
+  overflow-y: hidden;
+  .card-icon {
+    text-align: center;
+    img {
+      max-height: 3.5rem;
+      max-width: 100%;
+    }
+  }
+}
+
+.card-footer {
+  height: 3.6rem;
+}
+
+.card.clickable a {
+  text-decoration: none;
+  color: black;
+}
+
+.footer-tags {
+  text-align: right;
+}

dashboard/src/components/InfoCard/InfoCard.v2.test.tsx

@@ -0,0 +1,79 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import { CardBlock } from "../js/Card";
+import InfoCard from "./InfoCard.v2";
+
+it("should render a Card", () => {
+  const wrapper = shallow(
+    <InfoCard
+      title="foo"
+      info="foobar"
+      link="/a/link/somewhere"
+      icon="an-icon.png"
+      tag1Class="blue"
+      tag1Content="database"
+      tag2Class="red"
+      tag2Content="running"
+    />,
+  );
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("should generate a dummy link if it's not provided", () => {
+  const wrapper = shallow(
+    <InfoCard
+      title="foo"
+      info="foobar"
+      icon="an-icon.png"
+      tag1Class="blue"
+      tag1Content="database"
+      tag2Class="red"
+      tag2Content="running"
+    />,
+  );
+
+  expect(wrapper.find(Link).prop("to")).toBe("#");
+});
+
+it("should avoid tags if they are not defined", () => {
+  const wrapper = shallow(
+    <InfoCard title="foo" info="foobar" link="/a/link/somewhere" icon="an-icon.png" />,
+  );
+  expect(wrapper.find(".ListItem__content__info_tag")).not.toExist();
+});
+
+it("should parse JSX elements in the tags", () => {
+  const tag1 = <span className="tag1">tag1</span>;
+  const tag2 = <span className="tag2">tag2</span>;
+  const wrapper = shallow(
+    <InfoCard
+      title="foo"
+      info="foobar"
+      link="/a/link/somewhere"
+      icon="an-icon.png"
+      tag1Class="blue"
+      tag1Content={tag1}
+      tag2Class="red"
+      tag2Content={tag2}
+    />,
+  );
+  const tag1Elem = wrapper.find(".tag1");
+  expect(tag1Elem).toExist();
+  expect(tag1Elem.text()).toBe("tag1");
+  const tag2Elem = wrapper.find(".tag2");
+  expect(tag2Elem).toExist();
+  expect(tag2Elem.text()).toBe("tag2");
+});
+
+it("should parse a description as text", () => {
+  const wrapper = shallow(<InfoCard title="foo" info="foobar" description="a description" />);
+  expect(wrapper.find(CardBlock).html()).toContain("a description");
+});
+
+it("should parse a description as JSX.Element", () => {
+  const desc = <div className="description">This is a description</div>;
+  const wrapper = shallow(<InfoCard title="foo" info="foobar" description={desc} />);
+  expect(wrapper.find(".description").text()).toBe("This is a description");
+});

dashboard/src/components/InfoCard/InfoCard.v2.tsx

@@ -0,0 +1,82 @@
+import { ClarityIcons, infoCircleIcon } from "@clr/core/icon-shapes";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import Card, { CardBlock, CardFooter, CardHeader } from "../js/Card";
+import Column from "../js/Column";
+import Row from "../js/Row";
+
+import placeholder from "../../placeholder.png";
+import "./InfoCard.v2.css";
+
+ClarityIcons.addIcons(infoCircleIcon);
+
+export interface IInfoCardProps {
+  title: string;
+  info: string | JSX.Element;
+  link?: string;
+  icon?: string;
+  subIcon?: string;
+  description?: string | JSX.Element;
+  tag1Class?: string;
+  tag1Content?: string | JSX.Element;
+  tag2Class?: string;
+  tag2Content?: string | JSX.Element;
+}
+
+function InfoCard(props: IInfoCardProps) {
+  const {
+    title,
+    link,
+    info,
+    description,
+    tag1Content,
+    tag1Class,
+    tag2Content,
+    tag2Class,
+    subIcon,
+  } = props;
+  const icon = props.icon ? props.icon : placeholder;
+  return (
+    <Column span={[12, 6, 4, 3]}>
+      <Card clickable={true}>
+        <Link to={link || "#"}>
+          <CardHeader>
+            <>
+              {title}
+              {subIcon && <img src={subIcon} alt="icon" />}
+            </>
+          </CardHeader>
+          <CardBlock>
+            <Row>
+              <Column span={3}>
+                <div className="card-icon">
+                  <img src={icon} alt="icon" sizes="64px" />
+                </div>
+              </Column>
+              <Column span={9}>
+                <span>{description}</span>
+              </Column>
+            </Row>
+          </CardBlock>
+          <CardFooter>
+            <Row>
+              <Column span={6}>{info}</Column>
+              <Column span={6}>
+                <div className="footer-tags">
+                  {tag1Content && (
+                    <span className={`label ${tag1Class || "label-info"}`}>{tag1Content}</span>
+                  )}
+                  {tag2Content && (
+                    <span className={`label ${tag2Class || "label-info"}`}>{tag2Content}</span>
+                  )}
+                </div>
+              </Column>
+            </Row>
+          </CardFooter>
+        </Link>
+      </Card>
+    </Column>
+  );
+}
+
+export default InfoCard;

dashboard/src/components/InfoCard/__snapshots__/InfoCard.v2.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render a Card 1`] = `
+<Column
+  listItem={false}
+  span={
+    Array [
+      12,
+      6,
+      4,
+      3,
+    ]
+  }
+>
+  <Card
+    clickable={true}
+    htmlTag="div"
+  >
+    <Link
+      to="/a/link/somewhere"
+    >
+      <CardHeader
+        noBorder={false}
+      >
+        foo
+      </CardHeader>
+      <CardBlock>
+        <Row
+          list={false}
+        >
+          <Column
+            listItem={false}
+            span={3}
+          >
+            <div
+              className="card-icon"
+            >
+              <img
+                alt="icon"
+                sizes="64px"
+                src="an-icon.png"
+              />
+            </div>
+          </Column>
+          <Column
+            listItem={false}
+            span={9}
+          >
+            <span />
+          </Column>
+        </Row>
+      </CardBlock>
+      <CardFooter>
+        <Row
+          list={false}
+        >
+          <Column
+            listItem={false}
+            span={6}
+          >
+            foobar
+          </Column>
+          <Column
+            listItem={false}
+            span={6}
+          >
+            <div
+              className="footer-tags"
+            >
+              <span
+                className="label blue"
+              >
+                database
+              </span>
+              <span
+                className="label red"
+              >
+                running
+              </span>
+            </div>
+          </Column>
+        </Row>
+      </CardFooter>
+    </Link>
+  </Card>
+</Column>
+`;

dashboard/src/components/Layout/Layout.scss

@@ -2,6 +2,7 @@
   display: flex;
   min-height: 100vh;
   width: 100%;
+  overflow-x: hidden;
   flex-direction: column;
 }
 

dashboard/src/components/LoadingWrapper/LoadingWrapper.v2.test.tsx

@@ -0,0 +1,69 @@
+import { shallow } from "enzyme";
+import * as React from "react";
+import Spinner from "../js/Spinner";
+import LoadingWrapper from "./LoadingWrapper.v2";
+
+let props = {} as any;
+
+const ChildrenComponent = () => <div>Hello dad!</div>;
+
+const renderComponent = (p: any) => {
+  return shallow(
+    <LoadingWrapper {...p}>
+      <ChildrenComponent />
+    </LoadingWrapper>,
+  );
+};
+
+describe("when loaded is false", () => {
+  beforeEach(() => {
+    props = {
+      loaded: false,
+    };
+  });
+
+  it("matches the snapshot", () => {
+    const wrapper = renderComponent(props);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("does not render any children", () => {
+    const wrapper = renderComponent(props);
+    expect(wrapper.find(ChildrenComponent)).not.toExist();
+  });
+
+  it("renders a Spinner", () => {
+    const wrapper = renderComponent(props);
+    expect(wrapper.find(Spinner)).toExist();
+  });
+
+  it("renders a mid size Spinner", () => {
+    const wrapper = renderComponent({ ...props, medium: true });
+    expect(wrapper.find(Spinner)).toExist();
+    expect(wrapper.find(Spinner).prop("medium")).toBe(true);
+  });
+
+  it("renders a small Spinner", () => {
+    const wrapper = renderComponent({ ...props, small: true });
+    expect(wrapper.find(Spinner)).toExist();
+    expect(wrapper.find(Spinner).prop("small")).toBe(true);
+  });
+});
+
+describe("when loaded is true", () => {
+  beforeEach(() => {
+    props = {
+      loaded: true,
+    };
+  });
+
+  it("matches the snapshot", () => {
+    const wrapper = renderComponent(props);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders it wrapped component", () => {
+    const wrapper = renderComponent(props);
+    expect(wrapper.find(ChildrenComponent)).toExist();
+  });
+});