From cc6c84f0464fb49dd8b17b835be1c7dc74165455 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 18:07:43 -0700
Subject: [PATCH] feat: Create a CodeDef component to abstract the styles of a
 code definition

---
 src/components/CodeDef/Block.js            | 11 ++++++++
 src/components/CodeDef/Bracket.js          | 13 +++++++++
 src/components/CodeDef/CodeDef.js          | 28 +++++++++++++++++++
 src/components/CodeDef/CodeDef.module.scss | 30 ++++++++++++++++++++
 src/components/CodeDef/Comment.js          | 32 ++++++++++++++++++++++
 src/components/CodeDef/Identifier.js       | 13 +++++++++
 src/components/CodeDef/Keyword.js          | 13 +++++++++
 src/components/CodeDef/Type.js             | 11 ++++++++
 src/components/CodeDef/index.js            |  1 +
 9 files changed, 152 insertions(+)
 create mode 100644 src/components/CodeDef/Block.js
 create mode 100644 src/components/CodeDef/Bracket.js
 create mode 100644 src/components/CodeDef/CodeDef.js
 create mode 100644 src/components/CodeDef/CodeDef.module.scss
 create mode 100644 src/components/CodeDef/Comment.js
 create mode 100644 src/components/CodeDef/Identifier.js
 create mode 100644 src/components/CodeDef/Keyword.js
 create mode 100644 src/components/CodeDef/Type.js
 create mode 100644 src/components/CodeDef/index.js

diff --git a/src/components/CodeDef/Block.js b/src/components/CodeDef/Block.js
new file mode 100644
index 000000000..7ebeb96aa
--- /dev/null
+++ b/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;
diff --git a/src/components/CodeDef/Bracket.js b/src/components/CodeDef/Bracket.js
new file mode 100644
index 000000000..c7cbce42d
--- /dev/null
+++ b/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 Punctuation = ({ children }) => (
+  <span className={styles.bracket}>{children}</span>
+);
+
+Punctuation.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Punctuation;
diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js
new file mode 100644
index 000000000..38545dd28
--- /dev/null
+++ b/src/components/CodeDef/CodeDef.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './CodeDef.module.scss';
+import Block from './Block';
+import Comment from './Comment';
+import Identifier from './Identifier';
+import Keyword from './Keyword';
+import Bracket from './Bracket';
+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.Comment = Comment;
+CodeDef.Keyword = Keyword;
+CodeDef.Identifier = Identifier;
+CodeDef.Bracket = Bracket;
+CodeDef.Type = Type;
+
+export default CodeDef;
diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss
new file mode 100644
index 000000000..adc936c79
--- /dev/null
+++ b/src/components/CodeDef/CodeDef.module.scss
@@ -0,0 +1,30 @@
+.container {
+  display: block;
+  line-height: 2rem;
+}
+
+.keyword,
+.identifier {
+  color: var(--color-neutrals-700);
+}
+
+.type {
+  color: var(--color-green-500);
+  background: var(--color-green-050);
+}
+
+.comment {
+  color: var(--color-neutrals-500);
+
+  > p {
+    display: inline;
+  }
+}
+
+.bracket {
+  color: var(--color-neutrals-500);
+}
+
+.block {
+  margin-left: 1rem;
+}
diff --git a/src/components/CodeDef/Comment.js b/src/components/CodeDef/Comment.js
new file mode 100644
index 000000000..a111ef82f
--- /dev/null
+++ b/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;
diff --git a/src/components/CodeDef/Identifier.js b/src/components/CodeDef/Identifier.js
new file mode 100644
index 000000000..9c283855f
--- /dev/null
+++ b/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;
diff --git a/src/components/CodeDef/Keyword.js b/src/components/CodeDef/Keyword.js
new file mode 100644
index 000000000..69d37e70d
--- /dev/null
+++ b/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;
diff --git a/src/components/CodeDef/Type.js b/src/components/CodeDef/Type.js
new file mode 100644
index 000000000..fc2300a3d
--- /dev/null
+++ b/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;
diff --git a/src/components/CodeDef/index.js b/src/components/CodeDef/index.js
new file mode 100644
index 000000000..a87df9c3c
--- /dev/null
+++ b/src/components/CodeDef/index.js
@@ -0,0 +1 @@
+export { default } from './CodeDef';