Finish wiring in basic css reference functionality

docs/build/modules.js

@@ -21,7 +21,7 @@ const px = Object.keys(dependencies)
     const docsComment = src.match(/\/\*!!!([\S\s]*?)\*\//m)
     const readme = docsComment && docsComment[0].replace(/^\/\*!!!/, '').replace(/\*\/$/, '')
 
-    const tableOfStyles = await cssTable(css, { from: m })
+    const tableOfStyles = await cssTable(src, { from: m })
 
     return {
       name: m,

docs/pages/reference.js

@@ -2,15 +2,17 @@ import React, { Component } from 'react'
 import Highlight from 'react-highlight'
 
 import Layout from '../ui/Layout'
+import Link from '../ui/Link'
 import SrcReference from '../ui/SrcReference'
 import { Flex, md } from '../ui'
 import { modules } from '../ui/data.json'
 
 class Reference extends Component {
-  static getInitialProps = ({ query }) => query
+  static getInitialProps = ({ query = {} }) => query
 
   render () {
-    const module = modules[this.props.module]
+    const { view = 'table', module } = this.props
+    const currModule = modules[module]
 
     return (
       <Layout skipFooter={true} skipHeader={true}>
@@ -23,7 +25,7 @@ class Reference extends Component {
                 const shortName = m.name.replace(/^tachyons-/, '')
 
                 return (
-                  <a
+                  <Link
                     href={`/reference?module=${m.name}`}
                     className='db link pl3 pv2 black'
                     children={shortName}
@@ -34,10 +36,13 @@ class Reference extends Component {
           </div>
           <Flex className='ml6 pl6 w-100 mh-100'>
             <div className='flex-1 pa3 pv4'>
-              <Highlight>{module.readme}</Highlight>
+              <Highlight>{currModule.readme}</Highlight>
             </div>
             <div className='flex-1'>
-              <SrcReference {...module} />
+              <SrcReference
+                view={view}
+                {...currModule}
+              />
             </div>
           </Flex>
         </Flex>

docs/ui/SrcReference.js

@@ -1,44 +1,73 @@
 import React from 'react'
+import classNames from 'classnames'
+import Highlight from 'react-highlight'
 
+import Link from './Link'
 import data from './data.json'
 
-export default ({ src, tableOfStyles }) => {
+export const Table = ({ tableOfStyles }) =>
+  <table className="collapse w-100">
+    <thead>
+      <tr>
+        <th className="f7 tracked ttu tl bb bt b--white-20 pa2">Class</th>
+        <th className="f7 tracked ttu tl bb bt b--white-20 pa2">
+          Properties
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      children={tableOfStyles.map(decl => (
+        <tr key={decl.selector}>
+          <td className="pa2 bb b--white-10 near-white">
+            <code>{decl.selector}</code>
+          </td>
+          <td className="pa2 bb b--white-10 white-80">
+            <code
+              children={decl.declarations.map(d => (
+                <span key={d} className="db" children={d + ';'} />
+              ))}
+            />
+          </td>
+        </tr>
+      ))}
+    />
+  </table>
+
+export const Css = ({ src }) => (
+  <div className='pa3'>
+    <Highlight>{src}</Highlight>
+  </div>
+)
+
+export default ({ src, view, name, tableOfStyles }) => {
+  const tabCx = 'f6 ttu ba tracked br3 dib link ph2 pv1'
+  const cssTabCx = classNames('br--right', tabCx, {
+    'white': view !== 'css',
+    'bg-white black b--white':  view === 'css'
+  })
+  const tableTabCx = classNames('br--left', tabCx, {
+    'white': view !== 'table',
+    'bg-white black b--white':  view === 'table'
+  })
+
   return (
     <div className="bg-black white">
       <div className="dib mt3 ph2 pt2">
-        <div className="f6 ttu ba tracked br3 br--left ph2 pv1 dib bg-white b--white black">
-          Css
-        </div>
-        <div className="f6 ttu ba tracked br3 br--right ph2 pv1 dib">Table</div>
-      </div>
-      <div className="overflow-auto pt2 pt3-m pt3-l">
-        <table className="collapse w-100">
-          <thead>
-            <tr>
-              <th className="f7 tracked ttu tl bb bt b--white-20 pa2">Class</th>
-              <th className="f7 tracked ttu tl bb bt b--white-20 pa2">
-                Properties
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            children={tableOfStyles.map(decl => (
-              <tr key={decl.selector}>
-                <td className="pa2 bb b--white-10 near-white">
-                  <code>{decl.selector}</code>
-                </td>
-                <td className="pa2 bb b--white-10 white-80">
-                  <code
-                    children={decl.declarations.map(d => (
-                      <span key={d} className="db" children={d + ';'} />
-                    ))}
-                  />
-                </td>
-              </tr>
-            ))}
-          />
-        </table>
+        <Link
+          href={`?module=${name}&view=table`}
+          className={tableTabCx}
+          children='Table'
+        />
+        <Link
+          href={`?module=${name}&view=css`}
+          className={cssTabCx}
+          children='Css'
+        />
       </div>
+      <div
+        className="overflow-auto pt2 pt3-m pt3-l"
+        children={view === 'css' ? <Css src={src} /> : <Table tableOfStyles={tableOfStyles} />}
+      />
     </div>
   )
 }