From 720e4c1ac39bb62b4ae6c11fb44a01ec5bf36d52 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 18:24:31 -0700
Subject: [PATCH] chore: Update FunctionDefinition to use CodeDef

---
 src/components/FunctionDefinition.js          | 74 +++++++++----------
 src/components/FunctionDefinition.module.scss | 29 --------
 2 files changed, 33 insertions(+), 70 deletions(-)

diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js
index 6507d8cc2..0e6dc1604 100644
--- a/src/components/FunctionDefinition.js
+++ b/src/components/FunctionDefinition.js
@@ -1,50 +1,42 @@
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Markdown from 'react-markdown';
+import CodeDef from './CodeDef';
 import styles from './FunctionDefinition.module.scss';
 
-const ParamDescription = ({ children, ...props }) => {
-  if (Children.toArray(children).length === 0) {
-    return null;
-  }
-
-  return (
-    <span {...props} className={styles.paramDescription}>
-      {' //'} {children}
-    </span>
-  );
-};
-
-ParamDescription.propTypes = {
-  children: PropTypes.node,
-};
-
 const FunctionDefinition = ({ className, params, returnValue }) => {
   return (
-    <div className={cx(styles.container, className)}>
-      <span className={styles.keyword}>
-        {params.length > 0 ? 'function (' : 'function ()'}
-      </span>
-      {params.map((param, i) => (
-        <div key={i} className={styles.param}>
-          <span className={styles.paramName}>
-            {param.type.startsWith('...') ? `...${param.name}` : param.name}:{' '}
-          </span>
-          <span className={styles.type}>{param.type}</span>
-          {i !== params.length - 1 && ', '}
-          <Markdown
-            source={param.description}
-            renderers={{
-              root: ParamDescription,
-            }}
-          />
-        </div>
-      ))}
-      {params.length > 0 && <span className={styles.keyword}>)</span>}
-      <span className={styles.keyword}> => </span>
-      <span className={styles.type}>{returnValue.type}</span>
-    </div>
+    <CodeDef className={cx(styles.container, className)}>
+      {params.length > 0 ? (
+        <>
+          <CodeDef.Keyword>function</CodeDef.Keyword>{' '}
+          <CodeDef.Bracket>(</CodeDef.Bracket>
+        </>
+      ) : (
+        <>
+          <CodeDef.Keyword>function</CodeDef.Keyword>{' '}
+          <CodeDef.Bracket>()</CodeDef.Bracket>
+        </>
+      )}
+      {params.length > 0 && (
+        <CodeDef.Block>
+          {params.map((param, i) => (
+            <div key={i}>
+              <CodeDef.Identifier>
+                {param.type.startsWith('...') ? `...${param.name}` : param.name}
+                :{' '}
+              </CodeDef.Identifier>
+              <CodeDef.Type>{param.type}</CodeDef.Type>
+              {i !== params.length - 1 ? ', ' : ' '}
+              <CodeDef.Comment text={param.description} />
+            </div>
+          ))}
+        </CodeDef.Block>
+      )}
+      {params.length > 0 && <CodeDef.Bracket>)</CodeDef.Bracket>}
+      <CodeDef.Operator> => </CodeDef.Operator>
+      <CodeDef.Type>{returnValue.type}</CodeDef.Type>
+    </CodeDef>
   );
 };
 
diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss
index 696cfe5ec..64fe73e35 100644
--- a/src/components/FunctionDefinition.module.scss
+++ b/src/components/FunctionDefinition.module.scss
@@ -1,32 +1,3 @@
 .container {
-  font-family: var(--code-font);
   font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.line:not(:last-child) {
-  margin-bottom: 0.5rem;
-}
-
-.param {
-  color: var(--color-neutrals-700);
-  margin-left: 1rem;
-}
-
-.paramDescription {
-  color: var(--color-neutrals-500);
-
-  > p {
-    color: inherit;
-    display: inline;
-  }
-}
-
-.keyword {
-  color: var(--color-neutrals-600);
-}
-
-.type {
-  color: var(--color-green-500);
-  background: var(--color-green-050);
 }