fix(docz): conditionally description column on PropsTable (#385)

* Update the PropsTable to conditionally include the description column.

* Adds a description to the Alert component in the
basic examples to demonstrate it being added
* The Button component in the basic example has no
descriptions to demonstrate it being excluded

* Remove a data- attribute that was used for testing

* feat(docz): render [Empty String] on PropsTable (#427)

* Updates the PropsTable to render '[Empty String]' instead of nothing.
* Add the code to print [No Default]

* fix(docz-theme-default): prop table header background was overflowing (#421)

examples/basic/src/components/Alert.jsx

@@ -20,6 +20,7 @@ const AlertStyled = styled('div')`
 export const Alert = props => <AlertStyled {...props} />
 
 Alert.propTypes = {
+  /** `info`, `positive`, `negative`, or `warning` */
   kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
 }
 

packages/docz-theme-default/src/styles/index.ts

@@ -58,7 +58,8 @@ export const styles = {
     lineHeight: 1.8,
   },
   table: {
-    overflowY: ['hidden', 'hidden', 'hidden', 'initial'],
+    overflowY: 'hidden',
+    overflowX: ['initial', 'initial', 'initial', 'hidden'],
     display: ['block', 'block', 'block', 'table'],
     width: '100%',
     marginBottom: [20, 40],

packages/docz/src/components/PropsTable.tsx

@@ -105,6 +105,12 @@ const BasePropsTable: SFC<PropsTable> = ({ of: component, components }) => {
     return null
   }
 
+  const includeDescription: boolean = Object.keys(props).some(
+    (name: string) =>
+      props[name] &&
+      typeof props[name].description !== 'undefined' &&
+      props[name].description !== ''
+  )
   const Table = components.table || 'table'
   const Thead = components.thead || 'thead'
   const Tr = components.tr || 'tr'
@@ -122,9 +128,11 @@ const BasePropsTable: SFC<PropsTable> = ({ of: component, components }) => {
             <Th className="PropsTable--type">Type</Th>
             <Th className="PropsTable--required">Required</Th>
             <Th className="PropsTable--default">Default</Th>
-            <Th width="40%" className="PropsTable--description">
-              Description
-            </Th>
+            {includeDescription && (
+              <Th width="40%" className="PropsTable--description">
+                Description
+              </Th>
+            )}
           </Tr>
         </Thead>
         <Tbody>
@@ -138,11 +146,23 @@ const BasePropsTable: SFC<PropsTable> = ({ of: component, components }) => {
                   <Td>{name}</Td>
                   <Td>{getPropType(prop, Tooltip)}</Td>
                   <Td>{String(prop.required)}</Td>
-                  <Td>
-                    {prop.defaultValue &&
-                      prop.defaultValue.value.replace(/\'/g, '')}
-                  </Td>
-                  <Td>{prop.description && prop.description}</Td>
+                  {!prop.defaultValue ? (
+                    <Td>
+                      <em>[No Default]</em>
+                    </Td>
+                  ) : (
+                    <Td>
+                      {prop.defaultValue.value === "''" ? (
+                        <em>[Empty String]</em>
+                      ) : (
+                        prop.defaultValue &&
+                        prop.defaultValue.value.replace(/\'/g, '')
+                      )}
+                    </Td>
+                  )}
+                  {includeDescription && (
+                    <Td>{prop.description && prop.description}</Td>
+                  )}
                 </Tr>
               )
             })}