From a5591d480989859530d0758a724a188ecb5a9dbd Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 21:03:45 -0700
Subject: [PATCH] feat: Polish some more styles on prop list

---
 src/components/PropList.js          | 51 ++++++++++++++++++-----------
 src/components/PropList.module.scss | 43 ++++++++++++------------
 2 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/src/components/PropList.js b/src/components/PropList.js
index 1d2f5a292..53df022b6 100644
--- a/src/components/PropList.js
+++ b/src/components/PropList.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
 import FunctionDefinition from './FunctionDefinition';
-import Markdown from 'react-markdown';
+import Markdown from './Markdown';
 import ReferenceExample from './ReferenceExample';
 import styles from './PropList.module.scss';
 import { format } from 'date-fns';
@@ -20,28 +21,34 @@ const PropTypeInfo = ({ type }) => {
       const { itemTypes } = type.meta;
 
       return itemTypes.raw === 'oneOf' ? (
-        <code className={styles.listLike}>
-          <div>{'<Array of'}</div>
-          <div className={styles.arg}>
+        <CodeDef className={styles.codeDef}>
+          <CodeDef.Bracket>{'<'}</CodeDef.Bracket>
+          <CodeDef.Keyword>Array of</CodeDef.Keyword>
+          <CodeDef.Block>
             <PropTypeInfo type={itemTypes} />
-          </div>
-          <div>{'>'}</div>
-        </code>
+          </CodeDef.Block>
+          <CodeDef.Bracket>{'>'}</CodeDef.Bracket>
+        </CodeDef>
       ) : (
         <PropTypeInfo type={itemTypes} />
       );
     }
     case 'oneOf':
       return (
-        <code className={styles.listLike}>
-          <div>{'<One of'}</div>
-          <div className={styles.arg}>
+        <CodeDef className={styles.codeDef}>
+          <CodeDef.Bracket>{'<'}</CodeDef.Bracket>
+          <CodeDef.Keyword>One of</CodeDef.Keyword>
+          <CodeDef.Block>
             {type.meta.constants.map((constant) => (
-              <div key={constant}>{constant},</div>
+              <div key={constant}>
+                <CodeDef.Identifier key={constant}>
+                  {constant},
+                </CodeDef.Identifier>
+              </div>
             ))}
-          </div>
-          <div>{'>'}</div>
-        </code>
+          </CodeDef.Block>
+          <CodeDef.Bracket>{'>'}</CodeDef.Bracket>
+        </CodeDef>
       );
     case 'oneOfType':
       return type.meta.types.map((type, idx) => (
@@ -95,7 +102,7 @@ const PropList = ({ propTypes }) => {
                     <span className={styles.flagged}>deprecated</span>
                   )}
                 </div>
-                <code className={styles.type}>{type.name}</code>
+                <CodeDef.Type>{type.name}</CodeDef.Type>
                 {defaultValue !== undefined && (
                   <div className={styles.default}>
                     <div className={styles.label}>DEFAULT</div>
@@ -110,20 +117,26 @@ const PropList = ({ propTypes }) => {
                       Due {format(new Date(deprecation.date), 'MMMM do, yyyy')}
                     </div>
                     <Markdown
-                      className={styles.markdownContainer}
+                      className={styles.deprecationMarkdownContainer}
                       source={deprecation.description}
                     />
                   </div>
                 )}
                 {description && (
                   <Markdown
-                    className={cx(styles.details, styles.markdownContainer)}
+                    className={cx(styles.details)}
                     source={description}
                   />
                 )}
-                <PropTypeInfo type={type} />
+                <div className={styles.propInfoContainer}>
+                  <PropTypeInfo type={type} />
+                </div>
                 {examples.map((example, idx) => (
-                  <ReferenceExample key={idx} example={example} />
+                  <ReferenceExample
+                    key={idx}
+                    className={styles.example}
+                    example={example}
+                  />
                 ))}
               </div>
             </div>
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
index 2aaba2056..f99884930 100644
--- a/src/components/PropList.module.scss
+++ b/src/components/PropList.module.scss
@@ -16,28 +16,20 @@
 
 .info {
   word-break: break-all;
-
-  h3 {
-    margin-top: 0;
-  }
 }
 
 .default {
   margin-top: 2rem;
-  color: var(--color-neutrals-700);
 
   .label {
+    color: var(--color-neutrals-600);
     font-size: 0.75rem;
     font-weight: bold;
   }
 }
 
-.type {
-  color: var(--color-neutrals-600);
-}
-
 .deprecation {
-  padding: 0.25rem;
+  padding: 0.5rem;
   background: var(--color-red-100);
   margin-bottom: 1rem;
 }
@@ -48,16 +40,20 @@
   margin-bottom: 1rem;
 }
 
-.markdownContainer > *:first-child {
-  margin-top: 0;
-}
+.deprecationMarkdownContainer {
+  p:last-child {
+    margin-bottom: 0;
+  }
 
-.details {
-  &:not(:last-child):not(:empty) {
-    margin-bottom: 1rem;
+  code {
+    background: var(--color-red-200);
   }
 }
 
+.details:not(:last-child):not(:empty) {
+  margin-bottom: 1rem;
+}
+
 .flagged {
   font-size: 0.75rem;
   color: var(--color-red-400);
@@ -66,13 +62,8 @@
   font-weight: bold;
 }
 
-.arg {
-  padding-left: 1rem;
-}
-
-.listLike {
+.codeDef {
   font-size: 0.875rem;
-  color: var(--color-neutrals-600);
   max-height: 320px;
   overflow-y: auto;
 }
@@ -92,3 +83,11 @@
     padding-bottom: 0;
   }
 }
+
+.propInfoContainer:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.example:not(:last-child) {
+  margin-bottom: 2rem;
+}