From b0ecdfcdaaf39aa791004245d0fd439c790036ab Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 19:38:44 -0700
Subject: [PATCH] feat: Add number and string components for code def

---
 src/components/CodeDef/CodeDef.js          |  4 ++++
 src/components/CodeDef/CodeDef.module.scss |  8 ++++++++
 src/components/CodeDef/Number.js           | 13 +++++++++++++
 src/components/CodeDef/String.js           | 13 +++++++++++++
 4 files changed, 38 insertions(+)
 create mode 100644 src/components/CodeDef/Number.js
 create mode 100644 src/components/CodeDef/String.js

diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js
index b81f24a10..27077e647 100644
--- a/src/components/CodeDef/CodeDef.js
+++ b/src/components/CodeDef/CodeDef.js
@@ -7,7 +7,9 @@ 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 }) => (
@@ -24,7 +26,9 @@ 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;
diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss
index 1146d3b6c..ace3ea14b 100644
--- a/src/components/CodeDef/CodeDef.module.scss
+++ b/src/components/CodeDef/CodeDef.module.scss
@@ -29,3 +29,11 @@
 .block {
   margin-left: 1rem;
 }
+
+.string {
+  color: var(--color-green-500);
+}
+
+.number {
+  color: var(--color-red-400);
+}
diff --git a/src/components/CodeDef/Number.js b/src/components/CodeDef/Number.js
new file mode 100644
index 000000000..ddff1828c
--- /dev/null
+++ b/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;
diff --git a/src/components/CodeDef/String.js b/src/components/CodeDef/String.js
new file mode 100644
index 000000000..c797d397b
--- /dev/null
+++ b/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;