Merge pull request #153 from newrelic/jerel/polish-component-docs

Polish component docs

src/components/CodeDef/Block.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Block = ({ children }) => <div className={styles.block}>{children}</div>;
+
+Block.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Block;

src/components/CodeDef/Bracket.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Bracket = ({ children }) => (
+  <span className={styles.bracket}>{children}</span>
+);
+
+Bracket.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Bracket;

src/components/CodeDef/CodeDef.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './CodeDef.module.scss';
+import Block from './Block';
+import Bracket from './Bracket';
+import Comment from './Comment';
+import Identifier from './Identifier';
+import Keyword from './Keyword';
+import NumberValue from './Number';
+import Operator from './Operator';
+import StringValue from './String';
+import Type from './Type';
+
+const CodeDef = ({ className, children }) => (
+  <code className={cx(styles.container, className)}>{children}</code>
+);
+
+CodeDef.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+CodeDef.Block = Block;
+CodeDef.Bracket = Bracket;
+CodeDef.Comment = Comment;
+CodeDef.Keyword = Keyword;
+CodeDef.Identifier = Identifier;
+CodeDef.Number = NumberValue;
+CodeDef.Operator = Operator;
+CodeDef.String = StringValue;
+CodeDef.Type = Type;
+
+export default CodeDef;

src/components/CodeDef/CodeDef.module.scss

@@ -0,0 +1,41 @@
+.container {
+  display: block;
+  line-height: 2;
+}
+
+.identifier {
+  color: var(--color-neutrals-700);
+}
+
+.type {
+  padding: 0.125rem;
+  border-radius: 0.125rem;
+  color: var(--color-green-500);
+  background: var(--color-green-050);
+}
+
+.comment {
+  color: var(--color-neutrals-500);
+
+  > p {
+    display: inline;
+  }
+}
+
+.keyword,
+.bracket,
+.operator {
+  color: var(--color-neutrals-600);
+}
+
+.block {
+  margin-left: 1rem;
+}
+
+.string {
+  color: var(--color-green-500);
+}
+
+.number {
+  color: var(--color-red-400);
+}

src/components/CodeDef/Comment.js

@@ -0,0 +1,32 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import Markdown from 'react-markdown';
+import styles from './CodeDef.module.scss';
+
+const Content = ({ children, ...props }) => {
+  if (Children.toArray(children).length === 0) {
+    return null;
+  }
+
+  return (
+    <span {...props} className={styles.comment}>
+      {`//`} {children}
+    </span>
+  );
+};
+
+const renderers = {
+  root: Content,
+};
+
+const Comment = ({ text }) => <Markdown source={text} renderers={renderers} />;
+
+Content.propTypes = {
+  children: PropTypes.node,
+};
+
+Comment.propTypes = {
+  text: PropTypes.string,
+};
+
+export default Comment;

src/components/CodeDef/Identifier.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Identifier = ({ children }) => (
+  <span className={styles.identifier}>{children}</span>
+);
+
+Identifier.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Identifier;

src/components/CodeDef/Keyword.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Keyword = ({ children }) => (
+  <span className={styles.keyword}>{children}</span>
+);
+
+Keyword.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Keyword;

src/components/CodeDef/Number.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const NumberValue = ({ value }) => (
+  <span className={styles.number}>{value}</span>
+);
+
+NumberValue.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
+export default NumberValue;

src/components/CodeDef/Operator.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Operator = ({ children }) => (
+  <span className={styles.operator}>{children}</span>
+);
+
+Operator.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Operator;

src/components/CodeDef/String.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const StringValue = ({ value }) => (
+  <span className={styles.string}>"{value}"</span>
+);
+
+StringValue.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export default StringValue;

src/components/CodeDef/Type.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Type = ({ children }) => <span className={styles.type}>{children}</span>;
+
+Type.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Type;

src/components/CodeDef/index.js

@@ -0,0 +1 @@
+export { default } from './CodeDef';

src/components/ConstantReference.js

@@ -1,29 +1,26 @@
 import React from 'react';
-import Markdown from 'react-markdown';
 import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
+import JsonValue from './JsonValue';
 import styles from './ConstantReference.module.scss';
 
 const ConstantReference = ({ constant }) => {
-  const { name, values, type } = constant;
+  const { name, value } = constant;
+
   return (
-    <div className={styles.container}>
-      <div className={styles.name}>{name}</div>
-      <div>{type === 'array' ? '[' : '{'}</div>
-      <div className={styles.constantContainer}>
-        {values.map((value, i) => (
-          <Markdown key={i} source={value} />
-        ))}
-      </div>
-      <div>{type === 'array' ? ']' : '}'}</div>
-    </div>
+    <CodeDef className={styles.container}>
+      <h3 className={styles.name}>
+        <code>{name}</code>
+      </h3>
+      <JsonValue value={value} />
+    </CodeDef>
   );
 };
 
 ConstantReference.propTypes = {
   constant: PropTypes.shape({
-    type: PropTypes.string,
     name: PropTypes.string,
-    values: PropTypes.array,
+    value: PropTypes.any,
   }),
 };
 

src/components/ConstantReference.module.scss

@@ -1,22 +1,19 @@
 .container {
-  color: var(--color-neutrals-500);
-  font-family: var(--code-font);
+  color: var(--color-neutrals-600);
   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;
 }
 
 .block {
   margin-left: 0.5rem;
 }
 
-.constantContainer {
-  margin: 0 0 1rem 1.5rem;
-}

src/components/FunctionDefinition.js

@@ -1,53 +1,38 @@
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Markdown from 'react-markdown';
+import cx from 'classnames';
+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 = ({ params, returnValue }) => {
+const FunctionDefinition = ({ className, params, returnValue }) => {
   return (
-    <div className={styles.container}>
-      <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)}>
+      <CodeDef.Keyword>function</CodeDef.Keyword>{' '}
+      <CodeDef.Bracket>{params.length > 0 ? '(' : '()'}</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>
   );
 };
 
 FunctionDefinition.propTypes = {
+  className: PropTypes.string,
   params: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,