feat(ui-docs-client): Docs/homepage refresh

refs: INSTUI-2447

Test plan:
- The docs should be using the Instructure theme by default.
- The docs examples/playgrounds should render using the
  canvas theme.
- The Button upgrade guide for 8.0 should render its examples
  using the canvas theme.
- If the project is `instructure-ui`, the homepage should
  feature a new Hero section specific to Instructure UI.
- The docs should behave responsively as detailed in the
  JIRA ticket.

Change-Id: I670730c704e1008a5d1827c93a8a23ce1a4cede2
Reviewed-on: https://gerrit.instructure.com/c/instructure-ui/+/221248
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Product-Review: Pam Hiett <phiett@instructure.com>
Reviewed-by: Ken Meleta <kmeleta@instructure.com>
Reviewed-by: Pam Hiett <phiett@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Visual-Regression-Test: Chris Hart <chart@instructure.com>

Author: Chris Hart

docs/patterns/UsingIcons.md

@@ -4,10 +4,10 @@ category: Patterns
 id: UsingIcons
 ---
 
-## Using Iconography
+## Using Icons
 
-### Icons and Accessibility
-By default the role is set to presentation. However, when the `title` prop is set, the role attribute is set to img. Include the `description` prop to further describe the icon.
+### Accessibility
+By default, the icon's `role` is set to `presentation`. However, when the `title` prop is set, the role attribute is set to `img`. Include the `description` prop to further describe the icon.
 
 ```js
 ---
@@ -18,8 +18,8 @@ example: true
 </View>
 ```
 
-### Line vs Solid Iconography
-The default choice for Iconography is the `Line` version. However, when an Icon appears on a dark or colored background the `Solid` version should be used.
+### Line vs Solid
+The default choice for iconography is the `Line` version. However, when an icon appears on a dark or colored background, the `Solid` version should be used.
 
 ```js
 ---
@@ -35,7 +35,7 @@ example: true
 ```
 
 ### Changing the Icon Size
-By default the Icon is set to a size of 1em, so it will scale to match the font-size of its parent element. To change the size of the icon, use one of the predefined options for the `size` prop. If you need a size that is not offered via the size prop, adjust the font-size on the icon’s parent element.
+By default, icons are set to a size of 1em, so they will scale to match the font-size of their parent element. To change the size of the icon, use one of the predefined options for the `size` prop. If you need a size that is not offered via the size prop, adjust the font-size on the icon's parent element.
 ```js
 ---
 example: true
@@ -73,7 +73,7 @@ example: true
 <View as="div" margin="small" padding="medium" background="default">
   <Flex wrap="wrap">
     <Flex.Item padding="small" shouldGrow>
-      <Text color="brand">I am inheriting my parents color <IconHeartLine /></Text>
+      <Text color="brand">I am inheriting my parent's color <IconHeartLine /></Text>
     </Flex.Item>
     <Flex.Item padding="small" shouldGrow>
       <Text as="div">My icon should be primary <IconHeartLine color="primary" /></Text>

logo.png

@@ -49,7 +49,7 @@ import avatarPortrait from './avatarPortrait.jpg'
 import placeholderImage from './placeholder-image'
 import placeholderLogo from './placeholder-logo'
 
-import { theme } from '@instructure/canvas-theme'
+import { theme } from '@instructure/instructure-theme'
 theme.use()
 
 const globals = {

packages/__docs__/globals.js

@@ -7,18 +7,76 @@
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
-    <!-- comment out instructure-themed font until 7.0
-      <link href='https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700' rel='stylesheet'>
-    -->
+    <!-- Proxima Nova fallback font for instructure theme -->
+    <link href='https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700' rel='stylesheet'>
+
+    <!-- font for canvas theme -->
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i" rel="stylesheet">
 
+    <!-- homepage hero image -->
+    <link rel="preload" href="https://instui-docs.s3.us-east-2.amazonaws.com/hero2.jpg" as="image">
+
+    <!-- custom headline font -->
+    <link rel="preload" href="https://instui-docs.s3.us-east-2.amazonaws.com/tiempos-headline-web-bold.woff2" as="font" type="font/woff2" crossorigin>
+
     <style type="text/css">
+      @font-face {
+        font-family: "TiemposHeadlineWebBold";
+        src: url("https://instui-docs.s3.us-east-2.amazonaws.com/tiempos-headline-web-bold.woff2") format("woff2");
+      }
       body {
-        /* same as above
-        font-family: "Proxima Nova", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-        */
-        font-family: "Lato", Helvetica, Arial, sans-serif;
-        background-color: #fff;
+        font-family: "Proxima Nova", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+        "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+      }
+      #app {
+        height: 100%;
+      }
+      @keyframes docsLoading {
+        to {
+          transform: scale(1) rotate(0);
+        }
+      }
+      .docsLoading {
+        text-align: center;
+        margin: 2rem auto;
+        width: 6rem;
+        height: 6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .docsLoading__Spinner {
+        display: inline-block;
+        position: relative;
+        width: 2rem;
+        height: 2rem;
+      }
+      .docsLoading__Spinner::before, .docsLoading__Spinner::after {
+        content: "";
+        display: block;
+        position: absolute;
+        box-sizing: border-box;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #EA2127;
+        transform: scale(0) rotate(1turn);
+        animation-name: docsLoading;
+        animation-duration: 1s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+      }
+      .docsLoading__Spinner::after {
+        animation-direction: alternate-reverse;
+        background: #F68E1F;
+      }
+      .docsLoading__Text {
+        padding-top: 1rem;
+        text-transform: uppercase;
+        font-size: small;
+        color: #666;
       }
     </style>
 
@@ -38,8 +96,13 @@
   </head>
 
   <body>
-    <div id='flash-messages' role='alert'></div>
-    <div id="app">Loading...</div>
+    <div id="flash-messages" role="alert"></div>
+    <div id="app">
+      <div class="docsLoading">
+        <span class="docsLoading__Spinner" aria-hidden="true"></span>
+        <span class="docsLoading__Text">Loading&hellip;</span>
+      </div>
+    </div>
     <div id="nav"></div>
   </body>
 </html>

packages/__docs__/index.ejs

@@ -29,6 +29,7 @@
     "@babel/runtime": "^7.9.2",
     "@babel/standalone": "^7.9.5",
     "@instructure/ui-a11y-content": "^6.26.0",
+    "@instructure/ui-alerts": "^6.26.0",
     "@instructure/ui-buttons": "^6.26.0",
     "@instructure/ui-checkbox": "^6.26.0",
     "@instructure/ui-code-editor": "^6.26.0",