From d8e80b32db379b540fb7a7c8bf8f17e533266768 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 18:08:10 -0700
Subject: [PATCH] chore: Use CodeDef in TypeDefReference

---
 src/components/TypeDefReference.js          | 65 +++++----------------
 src/components/TypeDefReference.module.scss | 39 +------------
 2 files changed, 17 insertions(+), 87 deletions(-)

diff --git a/src/components/TypeDefReference.js b/src/components/TypeDefReference.js
index d0a0090c0..d041eb69d 100644
--- a/src/components/TypeDefReference.js
+++ b/src/components/TypeDefReference.js
@@ -1,36 +1,7 @@
-import React, { Children } from 'react';
-import Markdown from 'react-markdown';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './TypeDefReference.module.scss';
-
-const RenderDescription = ({ children, ...props }) => {
-  if (Children.toArray(children).length === 0) {
-    return null;
-  }
-
-  return (
-    <span {...props} className={styles.description}>
-      {` //`} {children}
-    </span>
-  );
-};
-
-const RenderProperty = ({ property }) => {
-  const { type, name, description } = property;
-
-  return (
-    <div key={name} className={styles.propertyContainer}>
-      <span className={styles.propertyName}>{name}:</span>
-      <span className={styles.type}>{type}</span>,
-      <Markdown
-        source={description}
-        renderers={{
-          root: RenderDescription,
-        }}
-      />
-    </div>
-  );
-};
+import CodeDef from './CodeDef';
 
 const TypeDefReference = ({ typeDef }) => {
   const { properties, name } = typeDef;
@@ -40,29 +11,23 @@ const TypeDefReference = ({ typeDef }) => {
       <h3 className={styles.name}>
         <code>{name}</code>
       </h3>
-      <code className={styles.typeDef}>
-        <div className={styles.syntax}>{`{`}</div>
-        {properties.map((property, i) => (
-          <RenderProperty key={i} property={property} />
-        ))}
-        <div className={styles.syntax}>{'}'}</div>
-      </code>
+      <CodeDef className={styles.typeDef}>
+        <CodeDef.Bracket>{'{'}</CodeDef.Bracket>
+        <CodeDef.Block>
+          {properties.map((property) => (
+            <div key={property.name}>
+              <CodeDef.Identifier>{property.name}: </CodeDef.Identifier>
+              <CodeDef.Type>{property.type}</CodeDef.Type>,{' '}
+              <CodeDef.Comment text={property.description} />
+            </div>
+          ))}
+        </CodeDef.Block>
+        <CodeDef.Bracket>{'}'}</CodeDef.Bracket>
+      </CodeDef>
     </div>
   );
 };
 
-RenderProperty.propTypes = {
-  property: PropTypes.shape({
-    type: PropTypes.string,
-    name: PropTypes.string,
-    description: PropTypes.string,
-  }),
-};
-
-RenderDescription.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 TypeDefReference.propTypes = {
   typeDef: PropTypes.shape({
     properties: PropTypes.array,
diff --git a/src/components/TypeDefReference.module.scss b/src/components/TypeDefReference.module.scss
index 526d4b317..b8f17b3b5 100644
--- a/src/components/TypeDefReference.module.scss
+++ b/src/components/TypeDefReference.module.scss
@@ -1,48 +1,13 @@
-.container {
-  color: var(--color-neutrals-500);
-  font-family: var(--code-font);
-  line-height: 1.5;
-
-  &:not(:last-child) {
-    margin-bottom: 2rem;
-  }
-}
-
-.syntax {
-  color: var(--color-neutrals-500);
+.container:not(:last-child) {
+  margin-bottom: 2rem;
 }
 
 .name {
-  display: block;
   font-size: 1rem;
   font-weight: normal;
-  color: var(--color-neutrals-800);
   margin-bottom: 0.5rem;
 }
 
-.type {
-  color: var(--color-green-500);
-  background: var(--color-green-050);
-}
-
-.description {
-  color: var(--color-neutrals-500);
-
-  > p {
-    display: inline;
-  }
-}
-
 .typeDef {
-  display: block;
   font-size: 0.875rem;
 }
-
-.propertyContainer {
-  margin-left: 1rem;
-}
-
-.propertyName {
-  color: var(--color-neutrals-700);
-  margin-right: 0.5rem;
-}