From cf886f706cdab4d800de86253edcc52e707da3c3 Mon Sep 17 00:00:00 2001
From: Devin Fee <devin@devinfee.com>
Date: Fri, 4 Jan 2019 21:49:17 -0800
Subject: [PATCH] fixed prop inference using 'as'

---
 docs/stories/grid/tile.story.tsx              | 804 +++++++++---------
 package.json                                  |   2 +-
 .../__snapshots__/index.test.ts.snap          |   2 -
 src/base/exotic.ts                            |  13 +-
 src/elements/notification/notification.tsx    |   1 +
 src/grid/tiles/__tests__/tile.test.tsx        |  25 -
 src/grid/tiles/tile.tsx                       |  12 +-
 7 files changed, 417 insertions(+), 442 deletions(-)

diff --git a/docs/stories/grid/tile.story.tsx b/docs/stories/grid/tile.story.tsx
index ad9cdd14..5b63553f 100644
--- a/docs/stories/grid/tile.story.tsx
+++ b/docs/stories/grid/tile.story.tsx
@@ -1,39 +1,113 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { Content, Image, Title } from "src/elements";
+import { Box, Content, Image, Notification, Title } from "src/elements";
 import { Tile } from "src/grid";
 import { Section } from "src/layout";
 
-storiesOf("Grid/Tiles", module).add("Default", () => (
-  <Section>
-    <Tile kind="ancestor">
-      <Tile size={8} vertical>
-        <Tile>
-          <Tile kind="parent" vertical>
-            <Tile as="article" kind="child" notification color="primary">
-              <Title>Vertical...</Title>
-              <Title subtitle>Top tile</Title>
+storiesOf("Grid/Tiles", module)
+  .add("Default", () => (
+    <Section>
+      <Tile kind="ancestor">
+        <Tile size={8} vertical>
+          <Tile>
+            <Tile kind="parent" vertical>
+              <Tile as={Notification} kind="child" color="primary">
+                <Title>Vertical...</Title>
+                <Title subtitle>Top tile</Title>
+              </Tile>
+              <Tile as={Notification} kind="child" color="warning">
+                <Title>Tiles...</Title>
+                <Title subtitle>Bottom Tile...</Title>
+              </Tile>
             </Tile>
-            <Tile as="article" kind="child" notification color="warning">
-              <Title>Tiles...</Title>
-              <Title subtitle>Bottom Tile...</Title>
+            <Tile kind="parent">
+              <Tile as={Notification} kind="child" color="info">
+                <Title>Middle Tile...</Title>
+                <Title subtitle>With an image</Title>
+                <Image.Container size="4by3">
+                  <Image src="https://bulma.io/images/placeholders/640x480.png" />
+                </Image.Container>
+              </Tile>
             </Tile>
           </Tile>
           <Tile kind="parent">
-            <Tile as="article" kind="child" notification color="info">
-              <Title>Middle Tile...</Title>
-              <Title subtitle>With an image</Title>
-              <Image.Container size="4by3">
-                <Image src="https://bulma.io/images/placeholders/640x480.png" />
-              </Image.Container>
+            <Tile as={Notification} kind="child" color="danger">
+              <Title>Wide tile</Title>
+              <Title subtitle>Aligned with the right tile</Title>
+              <Content>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                  ornare magna eros, eu pellentesque tortor vestibulum ut.
+                  Maecenas non massa sem. Etiam finibus odio quis feugiat
+                  facilisis.
+                </p>
+              </Content>
             </Tile>
           </Tile>
         </Tile>
         <Tile kind="parent">
-          <Tile as="article" kind="child" notification color="danger">
-            <Title>Wide tile</Title>
-            <Title subtitle>Aligned with the right tile</Title>
+          <Tile as={Notification} kind="child" color="success">
+            <Content>
+              <Title>Tall tile</Title>
+              <Title subtitle>With even more content</Title>
+              <Content>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
+                  semper diam at erat pulvinar, at pulvinar felis blandit.
+                  Vestibulum volutpat tellus diam, consequat gravida libero
+                  rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend,
+                  nunc dui porta orci, quis semper odio felis ut quam.
+                </p>
+                <p>
+                  Suspendisse varius ligula in molestie lacinia. Maecenas varius
+                  eget ligula a sagittis. Pellentesque interdum, nisl nec
+                  interdum maximus, augue diam porttitor lorem, et sollicitudin
+                  felis neque sit amet erat. Maecenas imperdiet felis nisi,
+                  fringilla luctus felis hendrerit sit amet. Aenean vitae
+                  gravida diam, finibus dignissim turpis. Sed eget varius
+                  ligula, at volutpat tortor.
+                </p>
+                <p>
+                  Integer sollicitudin, tortor a mattis commodo, velit urna
+                  rhoncus erat, vitae congue lectus dolor consequat libero.
+                  Donec leo ligula, maximus et pellentesque sed, gravida a
+                  metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet
+                  lacus, quis faucibus libero. Quisque non semper leo.
+                </p>
+              </Content>
+            </Content>
+          </Tile>
+        </Tile>
+      </Tile>
+    </Section>
+  ))
+  // tslint:disable-next-line: max-func-body-length
+  .add("3 columns", () => (
+    <Section>
+      <Tile kind="ancestor">
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Hello world</Title>
+            <Title as="p" subtitle>
+              What is up?
+            </Title>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Foo</Title>
+            <Title as="p" subtitle>
+              Bar
+            </Title>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Third column</Title>
+            <Title as="p" subtitle>
+              With some content
+            </Title>
             <Content>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
@@ -45,392 +119,320 @@ storiesOf("Grid/Tiles", module).add("Default", () => (
           </Tile>
         </Tile>
       </Tile>
-      <Tile kind="parent">
-        <Tile as="article" kind="child" notification color="success">
-          <Content>
-            <Title>Tall tile</Title>
-            <Title subtitle>With even more content</Title>
+      <Tile kind="ancestor">
+        <Tile vertical size={8}>
+          <Tile>
+            <Tile kind="parent" vertical>
+              <Tile as={Box} kind="child">
+                <Title as="p">Vertical titles</Title>
+                <Title as="p" subtitle>
+                  Top box
+                </Title>
+              </Tile>
+              <Tile as={Box} kind="child">
+                <Title as="p">Vertical titles</Title>
+                <Title as="p" subtitle>
+                  Bottom box
+                </Title>
+              </Tile>
+            </Tile>
+            <Tile kind="parent">
+              <Tile as={Box} kind="child">
+                <Title as="p">Middle box</Title>
+                <Title as="p" subtitle>
+                  With an image
+                </Title>
+                <Image.Container size="4by3">
+                  <Image src="https://bulma.io/images/placeholders/640x480.png" />
+                </Image.Container>
+              </Tile>
+            </Tile>
+          </Tile>
+          <Tile kind="parent">
+            <Tile as={Box} kind="child">
+              <Title as="p">Wide column</Title>
+              <Title as="p" subtitle>
+                Aligned with the right column
+              </Title>
+              <Content>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                  ornare magna eros, eu pellentesque tortor vestibulum ut.
+                  Maecenas non massa sem. Etiam finibus odio quis feugiat
+                  facilisis.
+                </p>
+              </Content>
+            </Tile>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Content>
+              <Title as="p">Tall column</Title>
+              <Title as="p" subtitle>
+                With even more content
+              </Title>
+              <Content>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
+                  semper diam at erat pulvinar, at pulvinar felis blandit.
+                  Vestibulum volutpat tellus diam, consequat gravida libero
+                  rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend,
+                  nunc dui porta orci, quis semper odio felis ut quam.
+                </p>
+                <p>
+                  Suspendisse varius ligula in molestie lacinia. Maecenas varius
+                  eget ligula a sagittis. Pellentesque interdum, nisl nec
+                  interdum maximus, augue diam porttitor lorem, et sollicitudin
+                  felis neque sit amet erat. Maecenas imperdiet felis nisi,
+                  fringilla luctus felis hendrerit sit amet. Aenean vitae
+                  gravida diam, finibus dignissim turpis. Sed eget varius
+                  ligula, at volutpat tortor.
+                </p>
+                <p>
+                  Integer sollicitudin, tortor a mattis commodo, velit urna
+                  rhoncus erat, vitae congue lectus dolor consequat libero.
+                  Donec leo ligula, maximus et pellentesque sed, gravida a
+                  metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet
+                  lacus, quis faucibus libero. Quisque non semper leo.
+                </p>
+              </Content>
+            </Content>
+          </Tile>
+        </Tile>
+      </Tile>
+      <Tile kind="ancestor">
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Side column</Title>
+            <Title as="p" subtitle>
+              With some content
+            </Title>
             <Content>
               <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
-                semper diam at erat pulvinar, at pulvinar felis blandit.
-                Vestibulum volutpat tellus diam, consequat gravida libero
-                rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc
-                dui porta orci, quis semper odio felis ut quam.
-              </p>
-              <p>
-                Suspendisse varius ligula in molestie lacinia. Maecenas varius
-                eget ligula a sagittis. Pellentesque interdum, nisl nec interdum
-                maximus, augue diam porttitor lorem, et sollicitudin felis neque
-                sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus
-                felis hendrerit sit amet. Aenean vitae gravida diam, finibus
-                dignissim turpis. Sed eget varius ligula, at volutpat tortor.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                ornare magna eros, eu pellentesque tortor vestibulum ut.
+                Maecenas non massa sem. Etiam finibus odio quis feugiat
+                facilisis.
               </p>
+            </Content>
+          </Tile>
+        </Tile>
+        <Tile kind="parent" size={8}>
+          <Tile as={Box} kind="child">
+            <Title as="p">Main column</Title>
+            <Title as="p" subtitle>
+              With some content
+            </Title>
+            <Content>
               <p>
-                Integer sollicitudin, tortor a mattis commodo, velit urna
-                rhoncus erat, vitae congue lectus dolor consequat libero. Donec
-                leo ligula, maximus et pellentesque sed, gravida a metus. Cras
-                ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis
-                faucibus libero. Quisque non semper leo.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                ornare magna eros, eu pellentesque tortor vestibulum ut.
+                Maecenas non massa sem. Etiam finibus odio quis feugiat
+                facilisis.
               </p>
             </Content>
-          </Content>
+          </Tile>
+        </Tile>
+      </Tile>
+    </Section>
+  ))
+  // tslint:disable-next-line: max-func-body-length
+  .add("4 columns", () => (
+    <Section>
+      <Tile kind="ancestor">
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">One</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Two</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Three</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Four</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+          </Tile>
         </Tile>
       </Tile>
-    </Tile>
-  </Section>
-));
-// // tslint:disable-next-line: max-func-body-length
-// .add("3 columns", () => (
-//   <Section>
-//     <Tile kind="ancestor">
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Hello world</Title>
-//           <Title as="p" subtitle>
-//             What is up?
-//           </Title>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Foo</Title>
-//           <Title as="p" subtitle>
-//             Bar
-//           </Title>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Third column</Title>
-//           <Title as="p" subtitle>
-//             With some content
-//           </Title>
-//           <Content>
-//             <p>
-//               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//               ornare magna eros, eu pellentesque tortor vestibulum ut.
-//               Maecenas non massa sem. Etiam finibus odio quis feugiat
-//               facilisis.
-//             </p>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//     </Tile>
-//     <Tile kind="ancestor">
-//       <Tile vertical size={8}>
-//         <Tile>
-//           <Tile kind="parent" vertical>
-//             <Tile as={Box} kind="child">
-//               <Title as="p">Vertical titles</Title>
-//               <Title as="p" subtitle>
-//                 Top box
-//               </Title>
-//             </Tile>
-//             <Tile as={Box} kind="child">
-//               <Title as="p">Vertical titles</Title>
-//               <Title as="p" subtitle>
-//                 Bottom box
-//               </Title>
-//             </Tile>
-//           </Tile>
-//           <Tile kind="parent">
-//             <Tile as={Box} kind="child">
-//               <Title as="p">Middle box</Title>
-//               <Title as="p" subtitle>
-//                 With an image
-//               </Title>
-//               <Image.Container size="4by3">
-//                 <Image src="https://bulma.io/images/placeholders/640x480.png" />
-//               </Image.Container>
-//             </Tile>
-//           </Tile>
-//         </Tile>
-//         <Tile kind="parent">
-//           <Tile as={Box} kind="child">
-//             <Title as="p">Wide column</Title>
-//             <Title as="p" subtitle>
-//               Aligned with the right column
-//             </Title>
-//             <Content>
-//               <p>
-//                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//                 ornare magna eros, eu pellentesque tortor vestibulum ut.
-//                 Maecenas non massa sem. Etiam finibus odio quis feugiat
-//                 facilisis.
-//               </p>
-//             </Content>
-//           </Tile>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Content>
-//             <Title as="p">Tall column</Title>
-//             <Title as="p" subtitle>
-//               With even more content
-//             </Title>
-//             <Content>
-//               <p>
-//                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
-//                 semper diam at erat pulvinar, at pulvinar felis blandit.
-//                 Vestibulum volutpat tellus diam, consequat gravida libero
-//                 rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend,
-//                 nunc dui porta orci, quis semper odio felis ut quam.
-//               </p>
-//               <p>
-//                 Suspendisse varius ligula in molestie lacinia. Maecenas varius
-//                 eget ligula a sagittis. Pellentesque interdum, nisl nec
-//                 interdum maximus, augue diam porttitor lorem, et sollicitudin
-//                 felis neque sit amet erat. Maecenas imperdiet felis nisi,
-//                 fringilla luctus felis hendrerit sit amet. Aenean vitae
-//                 gravida diam, finibus dignissim turpis. Sed eget varius
-//                 ligula, at volutpat tortor.
-//               </p>
-//               <p>
-//                 Integer sollicitudin, tortor a mattis commodo, velit urna
-//                 rhoncus erat, vitae congue lectus dolor consequat libero.
-//                 Donec leo ligula, maximus et pellentesque sed, gravida a
-//                 metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet
-//                 lacus, quis faucibus libero. Quisque non semper leo.
-//               </p>
-//             </Content>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//     </Tile>
-//     <Tile kind="ancestor">
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Side column</Title>
-//           <Title as="p" subtitle>
-//             With some content
-//           </Title>
-//           <Content>
-//             <p>
-//               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//               ornare magna eros, eu pellentesque tortor vestibulum ut.
-//               Maecenas non massa sem. Etiam finibus odio quis feugiat
-//               facilisis.
-//             </p>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent" size={8}>
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Main column</Title>
-//           <Title as="p" subtitle>
-//             With some content
-//           </Title>
-//           <Content>
-//             <p>
-//               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//               ornare magna eros, eu pellentesque tortor vestibulum ut.
-//               Maecenas non massa sem. Etiam finibus odio quis feugiat
-//               facilisis.
-//             </p>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//     </Tile>
-//   </Section>
-// ))
-// // tslint:disable-next-line: max-func-body-length
-// .add("4 columns", () => (
-//   <Section>
-//     <Tile kind="ancestor">
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">One</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Two</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Three</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Four</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//         </Tile>
-//       </Tile>
-//     </Tile>
 
-//     <Tile kind="ancestor">
-//       <Tile vertical size={9}>
-//         <Tile>
-//           <Tile kind="parent">
-//             <Tile as={Box} kind="child">
-//               <Title as="p">Five</Title>
-//               <Title as="p" subtitle>
-//                 Subtitle
-//               </Title>
-//               <Content>
-//                 <p>
-//                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-//                   Etiam semper diam at erat pulvinar, at pulvinar felis
-//                   blandit. Vestibulum volutpat tellus diam, consequat gravida
-//                   libero rhoncus ut. Morbi maximus, leo sit amet vehicula
-//                   eleifend, nunc dui porta orci, quis semper odio felis ut
-//                   quam.
-//                 </p>
-//               </Content>
-//             </Tile>
-//           </Tile>
-//           <Tile vertical size={8}>
-//             <Tile>
-//               <Tile kind="parent">
-//                 <Tile as={Box} kind="child">
-//                   <Title as="p">Six</Title>
-//                   <Title as="p" subtitle>
-//                     Subtitle
-//                   </Title>
-//                 </Tile>
-//               </Tile>
-//               <Tile kind="parent">
-//                 <Tile as={Box} kind="child">
-//                   <Title as="p">Seven</Title>
-//                   <Title as="p" subtitle>
-//                     Subtitle
-//                   </Title>
-//                 </Tile>
-//               </Tile>
-//             </Tile>
-//             <Tile kind="parent">
-//               <Tile as={Box} kind="child">
-//                 <Title as="p">Eight</Title>
-//                 <Title as="p" subtitle>
-//                   Subtitle
-//                 </Title>
-//               </Tile>
-//             </Tile>
-//           </Tile>
-//         </Tile>
-//         <Tile>
-//           <Tile kind="parent" size={8}>
-//             <Tile as={Box} kind="child">
-//               <Title as="p">Nine</Title>
-//               <Title as="p" subtitle>
-//                 Subtitle
-//               </Title>
-//               <Content>
-//                 <p>
-//                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-//                   Proin ornare magna eros, eu pellentesque tortor vestibulum
-//                   ut. Maecenas non massa sem. Etiam finibus odio quis feugiat
-//                   facilisis.
-//                 </p>
-//               </Content>
-//             </Tile>
-//           </Tile>
-//           <Tile kind="parent">
-//             <Tile as={Box} kind="child">
-//               <Title as="p">Ten</Title>
-//               <Title as="p" subtitle>
-//                 Subtitle
-//               </Title>
-//               <Content>
-//                 <p>
-//                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-//                   Proin ornare magna eros, eu pellentesque tortor vestibulum
-//                   ut. Maecenas non massa sem. Etiam finibus odio quis feugiat
-//                   facilisis.
-//                 </p>
-//               </Content>
-//             </Tile>
-//           </Tile>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Content>
-//             <Title as="p">Eleven</Title>
-//             <Title as="p" subtitle>
-//               Subtitle
-//             </Title>
-//             <Content>
-//               <p>
-//                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
-//                 semper diam at erat pulvinar, at pulvinar felis blandit.
-//                 Vestibulum volutpat tellus diam, consequat gravida libero
-//                 rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend,
-//                 nunc dui porta orci, quis semper odio felis ut quam.
-//               </p>
-//               <p>
-//                 Integer sollicitudin, tortor a mattis commodo, velit urna
-//                 rhoncus erat, vitae congue lectus dolor consequat libero.
-//                 Donec leo ligula, maximus et pellentesque sed, gravida a
-//                 metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet
-//                 lacus, quis faucibus libero. Quisque non semper leo.
-//               </p>
-//             </Content>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//     </Tile>
+      <Tile kind="ancestor">
+        <Tile vertical size={9}>
+          <Tile>
+            <Tile kind="parent">
+              <Tile as={Box} kind="child">
+                <Title as="p">Five</Title>
+                <Title as="p" subtitle>
+                  Subtitle
+                </Title>
+                <Content>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Etiam semper diam at erat pulvinar, at pulvinar felis
+                    blandit. Vestibulum volutpat tellus diam, consequat gravida
+                    libero rhoncus ut. Morbi maximus, leo sit amet vehicula
+                    eleifend, nunc dui porta orci, quis semper odio felis ut
+                    quam.
+                  </p>
+                </Content>
+              </Tile>
+            </Tile>
+            <Tile vertical size={8}>
+              <Tile>
+                <Tile kind="parent">
+                  <Tile as={Box} kind="child">
+                    <Title as="p">Six</Title>
+                    <Title as="p" subtitle>
+                      Subtitle
+                    </Title>
+                  </Tile>
+                </Tile>
+                <Tile kind="parent">
+                  <Tile as={Box} kind="child">
+                    <Title as="p">Seven</Title>
+                    <Title as="p" subtitle>
+                      Subtitle
+                    </Title>
+                  </Tile>
+                </Tile>
+              </Tile>
+              <Tile kind="parent">
+                <Tile as={Box} kind="child">
+                  <Title as="p">Eight</Title>
+                  <Title as="p" subtitle>
+                    Subtitle
+                  </Title>
+                </Tile>
+              </Tile>
+            </Tile>
+          </Tile>
+          <Tile>
+            <Tile kind="parent" size={8}>
+              <Tile as={Box} kind="child">
+                <Title as="p">Nine</Title>
+                <Title as="p" subtitle>
+                  Subtitle
+                </Title>
+                <Content>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Proin ornare magna eros, eu pellentesque tortor vestibulum
+                    ut. Maecenas non massa sem. Etiam finibus odio quis feugiat
+                    facilisis.
+                  </p>
+                </Content>
+              </Tile>
+            </Tile>
+            <Tile kind="parent">
+              <Tile as={Box} kind="child">
+                <Title as="p">Ten</Title>
+                <Title as="p" subtitle>
+                  Subtitle
+                </Title>
+                <Content>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Proin ornare magna eros, eu pellentesque tortor vestibulum
+                    ut. Maecenas non massa sem. Etiam finibus odio quis feugiat
+                    facilisis.
+                  </p>
+                </Content>
+              </Tile>
+            </Tile>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Content>
+              <Title as="p">Eleven</Title>
+              <Title as="p" subtitle>
+                Subtitle
+              </Title>
+              <Content>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
+                  semper diam at erat pulvinar, at pulvinar felis blandit.
+                  Vestibulum volutpat tellus diam, consequat gravida libero
+                  rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend,
+                  nunc dui porta orci, quis semper odio felis ut quam.
+                </p>
+                <p>
+                  Integer sollicitudin, tortor a mattis commodo, velit urna
+                  rhoncus erat, vitae congue lectus dolor consequat libero.
+                  Donec leo ligula, maximus et pellentesque sed, gravida a
+                  metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet
+                  lacus, quis faucibus libero. Quisque non semper leo.
+                </p>
+              </Content>
+            </Content>
+          </Tile>
+        </Tile>
+      </Tile>
 
-//     <Tile kind="ancestor">
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Twelve</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//           <Content>
-//             <p>
-//               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//               ornare magna eros, eu pellentesque tortor vestibulum ut.
-//             </p>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent" size={6}>
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Thirteen</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//           <Content>
-//             <p>
-//               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//               ornare magna eros, eu pellentesque tortor vestibulum ut.
-//               Maecenas non massa sem. Etiam finibus odio quis feugiat
-//               facilisis.
-//             </p>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//       <Tile kind="parent">
-//         <Tile as={Box} kind="child">
-//           <Title as="p">Fourteen</Title>
-//           <Title as="p" subtitle>
-//             Subtitle
-//           </Title>
-//           <Content>
-//             <p>
-//               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-//               ornare magna eros, eu pellentesque tortor vestibulum ut.
-//             </p>
-//           </Content>
-//         </Tile>
-//       </Tile>
-//     </Tile>
-//   </Section>
-// ));
+      <Tile kind="ancestor">
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Twelve</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+            <Content>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                ornare magna eros, eu pellentesque tortor vestibulum ut.
+              </p>
+            </Content>
+          </Tile>
+        </Tile>
+        <Tile kind="parent" size={6}>
+          <Tile as={Box} kind="child">
+            <Title as="p">Thirteen</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+            <Content>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                ornare magna eros, eu pellentesque tortor vestibulum ut.
+                Maecenas non massa sem. Etiam finibus odio quis feugiat
+                facilisis.
+              </p>
+            </Content>
+          </Tile>
+        </Tile>
+        <Tile kind="parent">
+          <Tile as={Box} kind="child">
+            <Title as="p">Fourteen</Title>
+            <Title as="p" subtitle>
+              Subtitle
+            </Title>
+            <Content>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                ornare magna eros, eu pellentesque tortor vestibulum ut.
+              </p>
+            </Content>
+          </Tile>
+        </Tile>
+      </Tile>
+    </Section>
+  ));
diff --git a/package.json b/package.json
index fc1753a0..3d173e4d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "docs:storybook:build": "build-storybook -c docs/stories/.config -o docs/build/stories",
     "docs:storybook:dev": "start-storybook -p 9001 -c docs/stories/.config",
     "lint": "tslint --project .",
-    "test:cov": "tslint --project . && jest --coverage",
+    "test:cov": "npm run lint && jest --coverage",
     "test": "jest",
     "watch": "rollup -cw"
   },
diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap
index 3335fc6a..561a77c0 100644
--- a/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/__tests__/__snapshots__/index.test.ts.snap
@@ -1147,9 +1147,7 @@ Object {
       "as": "div",
     },
     "propTypes": Object {
-      "color": [Function],
       "kind": [Function],
-      "notification": [Function],
       "size": [Function],
       "vertical": [Function],
     },
diff --git a/src/base/exotic.ts b/src/base/exotic.ts
index 50c03838..dba1959e 100644
--- a/src/base/exotic.ts
+++ b/src/base/exotic.ts
@@ -10,11 +10,20 @@ export interface ForwardRefAsExoticComponent<
     React.ForwardRefExoticComponent<TDefaultComponent>,
     keyof React.ForwardRefExoticComponent<TDefaultComponent>
   > {
-  <TAsComponent extends React.ReactType = TDefaultComponent>(
+  <
+    TAsComponent extends
+      | React.ReactType
+      // tslint:disable-next-line: no-any
+      | ForwardRefAsExoticComponent<any, any> = TDefaultComponent
+  >(
     props: Prefer<
       // tslint:disable-next-line:no-reserved-keywords
       React.PropsWithoutRef<TOwnProps & { as?: TAsComponent }>,
-      React.ComponentPropsWithRef<TAsComponent>
+      // React.ComponentPropsWithRef<TAsComponent>
+      // tslint:disable-next-line: no-any
+      TAsComponent extends ForwardRefAsExoticComponent<infer P, any>
+        ? P
+        : React.ComponentPropsWithRef<TAsComponent>
     >,
   ): JSX.Element | null;
 }
diff --git a/src/elements/notification/notification.tsx b/src/elements/notification/notification.tsx
index 0a745b53..aaac93bd 100644
--- a/src/elements/notification/notification.tsx
+++ b/src/elements/notification/notification.tsx
@@ -7,6 +7,7 @@ import { Colors, COLORS } from "src/base/helpers";
 
 export type NotificationModifierProps = Partial<{
   color: Colors;
+  other: boolean;
 }>;
 
 export type NotificationProps = HelpersProps & NotificationModifierProps;
diff --git a/src/grid/tiles/__tests__/tile.test.tsx b/src/grid/tiles/__tests__/tile.test.tsx
index b5cb6709..87ae1f60 100644
--- a/src/grid/tiles/__tests__/tile.test.tsx
+++ b/src/grid/tiles/__tests__/tile.test.tsx
@@ -1,4 +1,3 @@
-import { COLORS } from "src/base/helpers";
 import { Tile, TILE_KINDS, TILE_SIZES } from "src/grid/tiles/tile";
 
 import {
@@ -35,18 +34,6 @@ describe(`${COMPONENT_NAME} component`, () => {
   describe("props", () => {
     const { propTypes } = COMPONENT;
 
-    describe("color", () => {
-      validateOneOfPropType(propTypes, "color", COLORS);
-
-      COLORS.map(color => {
-        it(`should be ${color}`, () => {
-          const node = makeNode({ color });
-          const wrapper = makeGenericHOCShallowWrapperInContextConsumer(node);
-          expect(wrapper.hasClass(`is-${color}`)).toBe(true);
-        });
-      });
-    });
-
     describe("kind", () => {
       validateOneOfPropType(propTypes, "kind", TILE_KINDS);
 
@@ -59,18 +46,6 @@ describe(`${COMPONENT_NAME} component`, () => {
       });
     });
 
-    describe("notification", () => {
-      validateBoolPropType(propTypes, "notification");
-
-      [false, true].map(notification => {
-        it(`should ${notification ? "" : "not "}be notification`, () => {
-          const node = makeNode({ notification });
-          const wrapper = makeGenericHOCShallowWrapperInContextConsumer(node);
-          expect(wrapper.hasClass("notification")).toBe(notification);
-        });
-      });
-    });
-
     describe("size", () => {
       validateOneOfPropType(propTypes, "size", TILE_SIZES);
 
diff --git a/src/grid/tiles/tile.tsx b/src/grid/tiles/tile.tsx
index 253d2328..e3bb08ed 100644
--- a/src/grid/tiles/tile.tsx
+++ b/src/grid/tiles/tile.tsx
@@ -3,7 +3,6 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 
 import { forwardRefAs, Generic, HelpersProps } from "src/base";
-import { Colors, COLORS } from "src/base/helpers";
 import { tuple } from "src/utils";
 
 export const TILE_KINDS = tuple("ancestor", "parent", "child");
@@ -13,9 +12,7 @@ export const TILE_SIZES = tuple(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
 export type TileSizes = (typeof TILE_SIZES)[number];
 
 export type TileModifierProps = Partial<{
-  color: Colors;
   kind: TileKinds;
-  notification: boolean;
   size: TileSizes;
   vertical: boolean;
 }>;
@@ -23,28 +20,21 @@ export type TileModifierProps = Partial<{
 export type TileProps = HelpersProps & TileModifierProps;
 
 const propTypes = {
-  color: PropTypes.oneOf(COLORS),
   kind: PropTypes.oneOf(TILE_KINDS),
-  notification: PropTypes.bool,
   size: PropTypes.oneOf(TILE_SIZES),
   vertical: PropTypes.bool,
 };
 
 export const Tile = Object.assign(
   forwardRefAs<TileProps, "div">(
-    (
-      { className, color, kind, notification, size, vertical, ...rest },
-      ref,
-    ) => (
+    ({ className, kind, size, vertical, ...rest }, ref) => (
       <Generic
         className={classNames(
           "tile",
           {
-            [`is-${color}`]: color,
             [`is-${kind}`]: kind,
             [`is-${size}`]: size !== undefined,
             "is-vertical": vertical,
-            notification,
           },
           className,
         )}