Initial transfer from ADO (#13)

src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx

@@ -0,0 +1,72 @@
+import { FontWeights } from "@uifabric/styling";
+import { IIconStyles, ITextStyles } from "office-ui-fabric-react";
+
+export const siteTextStyles: ITextStyles = {
+  root: {
+    color: "#025F52",
+    fontWeight: FontWeights.semibold
+  }
+};
+
+export const descriptionTextStyles: ITextStyles = {
+  root: {
+    color: "#333333",
+    fontWeight: FontWeights.semibold
+  }
+};
+
+export const subtleHelpfulTextStyles: ITextStyles = {
+  root: {
+    color: "#ccc",
+    fontWeight: FontWeights.regular
+  }
+};
+
+export const iconButtonStyles: IIconStyles = {
+  root: {
+    marginLeft: "10px",
+    color: "#0078D4",
+    backgroundColor: "#FFF",
+    fontSize: 16,
+    fontWeight: FontWeights.regular,
+    display: "inline-block",
+    selectors: {
+      ":hover .ms-Button-icon": {
+        color: "#ccc"
+      }
+    }
+  }
+};
+
+export const iconStyles: IIconStyles = {
+  root: {
+    marginLeft: "10px",
+    color: "#0078D4",
+    backgroundColor: "#FFF",
+    fontSize: 16,
+    fontWeight: FontWeights.regular,
+    display: "inline-block"
+  }
+};
+
+export const mainHelpfulTextStyles: ITextStyles = {
+  root: {
+    color: "#000",
+    fontWeight: FontWeights.regular
+  }
+};
+
+export const subtleIconStyles: IIconStyles = {
+  root: {
+    color: "#ddd",
+    fontSize: 12,
+    fontWeight: FontWeights.regular
+  }
+};
+
+export const helpfulTextStyles: ITextStyles = {
+  root: {
+    color: "#333333",
+    fontWeight: FontWeights.regular
+  }
+};

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.test.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { GalleryCardComponent, GalleryCardComponentProps } from "./GalleryCardComponent";
+
+describe("GalleryCardComponent", () => {
+  it("renders", () => {
+    const props: GalleryCardComponentProps = {
+      name: "mycard",
+      url: "url",
+      notebookMetadata: undefined,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClick: () => {}
+    };
+
+    const wrapper = shallow(<GalleryCardComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as DataModels from "../../../../Contracts/DataModels";
+import { Card, ICardTokens, ICardSectionTokens } from "@uifabric/react-cards";
+import { Icon, Image, Persona, Text } from "office-ui-fabric-react";
+import {
+  siteTextStyles,
+  descriptionTextStyles,
+  helpfulTextStyles,
+  subtleHelpfulTextStyles,
+  subtleIconStyles
+} from "./CardStyleConstants";
+
+export interface GalleryCardComponentProps {
+  name: string;
+  url: string;
+  notebookMetadata: DataModels.NotebookMetadata;
+  onClick: () => void;
+}
+
+export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
+  private cardTokens: ICardTokens = { childrenMargin: 12 };
+  private attendantsCardSectionTokens: ICardSectionTokens = { childrenGap: 6 };
+
+  public render(): JSX.Element {
+    return this.props.notebookMetadata != null ? (
+      <Card aria-label="Notebook Card" onClick={this.props.onClick} tokens={this.cardTokens}>
+        <Card.Item>
+          <Persona text={this.props.notebookMetadata.author} secondaryText={this.props.notebookMetadata.date} />
+        </Card.Item>
+        <Card.Item fill>
+          <Image src={this.props.notebookMetadata.imageUrl} width="100%" alt="Notebook display image" />
+        </Card.Item>
+        <Card.Section>
+          <Text variant="small" styles={siteTextStyles}>
+            {this.props.notebookMetadata.tags.join(", ")}
+          </Text>
+          <Text styles={descriptionTextStyles}>{this.props.name}</Text>
+          <Text variant="small" styles={helpfulTextStyles}>
+            {this.props.notebookMetadata.description}
+          </Text>
+        </Card.Section>
+        <Card.Section horizontal tokens={this.attendantsCardSectionTokens}>
+          <Icon iconName="RedEye" styles={subtleIconStyles} />
+          <Text variant="small" styles={subtleHelpfulTextStyles}>
+            {this.props.notebookMetadata.views}
+          </Text>
+          <Icon iconName="Download" styles={subtleIconStyles} />
+          <Text variant="small" styles={subtleHelpfulTextStyles}>
+            {this.props.notebookMetadata.downloads}
+          </Text>
+          <Icon iconName="Heart" styles={subtleIconStyles} />
+          <Text variant="small" styles={subtleHelpfulTextStyles}>
+            {this.props.notebookMetadata.likes}
+          </Text>
+        </Card.Section>
+      </Card>
+    ) : (
+      <Card aria-label="Notebook Card" onClick={this.props.onClick} tokens={this.cardTokens}>
+        <Card.Section>
+          <Text styles={descriptionTextStyles}>{this.props.name}</Text>
+        </Card.Section>
+      </Card>
+    );
+  }
+}

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GalleryCardComponent renders 1`] = `
+<Card
+  aria-label="Notebook Card"
+  onClick={[Function]}
+  tokens={
+    Object {
+      "childrenMargin": 12,
+    }
+  }
+>
+  <CardSection>
+    <Text
+      styles={
+        Object {
+          "root": Object {
+            "color": "#333333",
+            "fontWeight": 600,
+          },
+        }
+      }
+    >
+      mycard
+    </Text>
+  </CardSection>
+</Card>
+`;