From 361a71f52bb8e26e104582e460813212d6a81fc4 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 18:34:26 -0700
Subject: [PATCH] feat: Update ConstantReference to use CodeDef

---
 src/components/ConstantReference.js          | 20 ++++++++++++--------
 src/components/ConstantReference.module.scss | 14 +++++---------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js
index 981c82fa6..746fbf07c 100644
--- a/src/components/ConstantReference.js
+++ b/src/components/ConstantReference.js
@@ -1,21 +1,25 @@
 import React from 'react';
 import Markdown from 'react-markdown';
 import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
 import styles from './ConstantReference.module.scss';
 
 const ConstantReference = ({ constant }) => {
   const { name, values, type } = constant;
+
   return (
-    <div className={styles.container}>
-      <div className={styles.name}>{name}</div>
-      <div>{type === 'array' ? '[' : '{'}</div>
-      <div className={styles.constantContainer}>
+    <CodeDef className={styles.container}>
+      <h3 className={styles.name}>
+        <code>{name}</code>
+      </h3>
+      <CodeDef.Bracket>{type === 'array' ? '[' : '{'}</CodeDef.Bracket>
+      <CodeDef.Block>
         {values.map((value, i) => (
           <Markdown key={i} source={value} />
         ))}
-      </div>
-      <div>{type === 'array' ? ']' : '}'}</div>
-    </div>
+      </CodeDef.Block>
+      <CodeDef.Bracket>{type === 'array' ? ']' : '}'}</CodeDef.Bracket>
+    </CodeDef>
   );
 };
 
@@ -23,7 +27,7 @@ ConstantReference.propTypes = {
   constant: PropTypes.shape({
     type: PropTypes.string,
     name: PropTypes.string,
-    values: PropTypes.array,
+    values: PropTypes.any,
   }),
 };
 
diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss
index d25166206..5f82e15a6 100644
--- a/src/components/ConstantReference.module.scss
+++ b/src/components/ConstantReference.module.scss
@@ -1,15 +1,14 @@
 .container {
-  color: var(--color-neutrals-500);
-  font-family: var(--code-font);
   font-size: 0.875rem;
-  line-height: 1.5;
-  margin-top: 2rem;
+
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+  }
 }
 
 .name {
   font-size: 1rem;
-  font-family: var(--primary-font-family);
-  color: var(--color-neutrals-800);
+  font-weight: normal;
   margin-bottom: 0.5rem;
 }
 
@@ -17,6 +16,3 @@
   margin-left: 0.5rem;
 }
 
-.constantContainer {
-  margin: 0 0 1rem 1.5rem;
-}
\ No newline at end of file