Show token comments and font families in docs (#629)

.theo/formats/stories.mdx.js

@@ -36,15 +36,40 @@ function mdxColors(props) {
  * property table.
  *
  * @param {Object} prop - Theo property
+ * @param {Boolean} includeComment - If `true`, include a comment cell.
  * @returns {String}
  */
-function mdxProp(prop) {
-  return `
-<tr>
-  <th scope="row">$${kebabCase(prop.name)}</th>
-  <td>${prop.value}</td>
-</tr>
-  `.trim();
+function mdxProp(prop, includeComment) {
+  // First cell has small percentage to give values and comments more room.
+  let content = `<td style={{width:'10%'}}><code>$${kebabCase(
+    prop.name
+  )}</code></td>`;
+
+  if (prop.category === 'font-family') {
+    // Create an array for each of the fonts in the family string
+    let fonts = prop.value.split(',');
+    // Start a new array to hold the preview elements we're about to create
+    const fontStrings = [];
+    // For each font string we create, we are going to remove the first font
+    // element using `shift`. This allows each segment to be previewed along
+    // with its remaining fallbacks.
+    while (fonts.length) {
+      fontStrings.push(
+        `<span style={{ fontFamily: \`${fonts.join(
+          ','
+        )}\`}}>${fonts.shift().trim()}</span>`
+      );
+    }
+    content += `<td>${fontStrings.join(', ')}</td>`;
+  } else {
+    content += `<td><code>${prop.value}</code></td>`;
+  }
+
+  if (includeComment) {
+    content += `<td>${prop.comment || '&nbsp;'}</td>`;
+  }
+
+  return `<tr>${content.trim()}</tr>`;
 }
 
 /**
@@ -54,12 +79,15 @@ function mdxProp(prop) {
  * @returns {String}
  */
 function mdxProps(props) {
-  const rows = props.map(mdxProp);
+  const commentedProps = props.filter((prop) => !!prop.comment);
+  const includeComments = commentedProps.length > 0;
+  const rows = props.map((prop) => mdxProp(prop, includeComments));
   return `
 <table>
   <thead>
     <th>Name</th>
     <th>Value</th>
+    ${includeComments ? `<th>Comment</th>` : ''}
   </thead>
   <tbody>${rows.join('\n')}</tbody>
 </table>`.trim();