From e60d82bf95bd1557f2e4fb0c9ffee210859bf2a8 Mon Sep 17 00:00:00 2001
From: Devin Fee <devin@devinfee.com>
Date: Thu, 13 Jun 2019 14:19:38 -0700
Subject: [PATCH] updated docs for generic's responsive prop [clarification]

---
 .../simple-props-table/simple-props-table.tsx |  22 ++--
 src/base/__docs__/generic.docs.mdx            | 114 ++++++++++++------
 2 files changed, 91 insertions(+), 45 deletions(-)

diff --git a/src/__docs__/components/simple-props-table/simple-props-table.tsx b/src/__docs__/components/simple-props-table/simple-props-table.tsx
index 81a536e0..ef0ea3c5 100644
--- a/src/__docs__/components/simple-props-table/simple-props-table.tsx
+++ b/src/__docs__/components/simple-props-table/simple-props-table.tsx
@@ -21,23 +21,23 @@ export const SimplePropsTable = ({ props }: SimplePropsTableProps) => {
   );
 
   const thDescription = hasDescription ? (
-    <th style={{ width: "40%" }}>Description</th>
+    <Table.Heading style={{ width: "40%" }}>Description</Table.Heading>
   ) : (
     undefined
   );
 
   return (
     <Table bordered narrow hoverable fullwidth>
-      <thead>
-        <tr>
-          <th>Property</th>
-          <th>Type</th>
-          <th>Required</th>
-          <th>Default</th>
+      <Table.Head>
+        <Table.Row>
+          <Table.Heading>Property</Table.Heading>
+          <Table.Heading>Type</Table.Heading>
+          <Table.Heading>Required</Table.Heading>
+          <Table.Heading>Default</Table.Heading>
           {thDescription}
-        </tr>
-      </thead>
-      <tbody>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {lexSortObj(props).map(({ key: name, value: propDoc }) => (
           <SimplePropsTableRow
             key={name}
@@ -46,7 +46,7 @@ export const SimplePropsTable = ({ props }: SimplePropsTableProps) => {
             propDoc={propDoc}
           />
         ))}
-      </tbody>
+      </Table.Body>
     </Table>
   );
 };
diff --git a/src/base/__docs__/generic.docs.mdx b/src/base/__docs__/generic.docs.mdx
index c985e698..76e99e3f 100644
--- a/src/base/__docs__/generic.docs.mdx
+++ b/src/base/__docs__/generic.docs.mdx
@@ -15,7 +15,7 @@ import {
 } from "src/__docs__/components";
 import { Generic } from "../generic";
 import { DEFAULTS } from "../helpers/variables";
-import { Notification, Title } from "src/elements";
+import { Notification, Table, Title } from "src/elements";
 
 # Generic
 
@@ -207,35 +207,12 @@ Here is an example of rendering as a `<Notification>` component, and passing thr
 
 ### Responsive properties
 
-## todo:
-
-the documentation for this prop ought to reflect that these are keys of the `responsive` prop, not props themselves.
-
 <SimplePropsTable
   props={{
-    mobile: {
-      description: "up to 768px",
-      typeName: "LimitedResponsive Object",
-    },
-    tablet: {
-      description: "between 769px and 1023px",
-      typeName: "Responsive Object",
-    },
-    desktop: {
-      description: "between 1024px and 1215px",
-      typeName: "Responsive Object",
-    },
-    widescreen: {
-      description: "between 1216px and 1407px",
-      typeName: "Responsive Object",
-    },
-    fullhd: {
-      description: "1408px and above",
-      typeName: "LimitedResponsive Object",
-    },
-    touch: {
-      description: "up to 1023px",
-      typeName: "LimitedResponsive Object",
+    responsive: {
+      description:
+        "a mapping of breakpoints to Responsive or LimitedResponsive objects",
+      typeName: "{ [Responsive Key]?: <Responsive> | <LimitedResponsive> }",
     },
   }}
 />
@@ -251,28 +228,97 @@ the documentation for this prop ought to reflect that these are keys of the `res
         {
           display: {
             only: "boolean",
-            value: mapEnumerable(DEFAULTS.displays).replace(/["]/g, "'")
+            value: mapEnumerable(DEFAULTS.displays).replace(/["]/g, "'"),
           },
           hide: {
             only: "boolean",
-            value: "boolean"
+            value: "boolean",
           },
           textAlign: {
             only: "boolean",
-            value: mapEnumerable(DEFAULTS.textAlignments).replace(/["]/g, "'")
+            value: mapEnumerable(DEFAULTS.textAlignments).replace(/["]/g, "'"),
           },
           textSize: {
             only: "boolean",
-            value: mapEnumerable(DEFAULTS.textSizes).replace(/["]/g, "'")
-          }
+            value: mapEnumerable(DEFAULTS.textSizes).replace(/["]/g, "'"),
+          },
         },
         null,
-        2
+        2,
       ).replace(/["]/g, "")}
     />
     <br />
   </div>
 
+  <Title as="h5" size={5}>
+    <code>responsive</code> keys
+  </Title>
+  <p>
+    By default, these are the keys and sizes supplied by Bulma.
+    You can customize them by overriding variables in the Bulma sass.
+  </p>
+  <Table bordered narrow striped fullwidth>
+    <Table.Head>
+      <Table.Row>
+        <Table.Heading>key</Table.Heading>
+        <Table.Heading>value type</Table.Heading>
+        <Table.Heading>description</Table.Heading>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell><code>mobile</code></Table.Cell>
+        <Table.Cell><code>LimitedResponsive</code> object</Table.Cell>
+        <Table.Cell>up to <code>768px</code></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell><code>tablet</code></Table.Cell>
+        <Table.Cell><code>Responsive</code> object</Table.Cell>
+        <Table.Cell>between<code>769px</code> and <code>1023px</code></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell><code>touch</code></Table.Cell>
+        <Table.Cell><code>LimitedResponsive</code> object</Table.Cell>
+        <Table.Cell>up to <code>1023px</code> (in place of <code>mobile</code> or <code>tablet</code>)</Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell><code>desktop</code></Table.Cell>
+        <Table.Cell><code>Responsive</code> object</Table.Cell>
+        <Table.Cell>between<code>1024px</code> and <code>1215px</code></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell><code>widescreen</code></Table.Cell>
+        <Table.Cell><code>Responsive</code> object</Table.Cell>
+        <Table.Cell>between<code>1216px</code> and <code>1407px</code></Table.Cell>
+      </Table.Row>
+
+      <Table.Row>
+        <Table.Cell><code>fullhd</code></Table.Cell>
+        <Table.Cell><code>LimitedResponsive</code> object</Table.Cell>
+        <Table.Cell><code>1408px</code> and above</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+
+  </Table>
+
+  <p>
+    A simple example of this prop value might look like this:
+  </p>
+  <pre
+    children={JSON.stringify(
+      {
+        touch: { hide: { value: true } },
+        desktop: { display: { only: true, value: "'block'" }}
+      },
+      null,
+      2,
+    ).replace(/["]/g, "")}
+  />
+
   <Title as="h5" size={5}>
     display
   </Title>