From 630ff4f76bf7f5cf053ece06eabe755fff884bfc Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 18:16:52 -0700
Subject: [PATCH] feat: Add operator component for code def

---
 src/components/CodeDef/CodeDef.js          |  6 ++++--
 src/components/CodeDef/CodeDef.module.scss |  5 +++--
 src/components/CodeDef/Operator.js         | 13 +++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/components/CodeDef/Operator.js

diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js
index 38545dd28..b81f24a10 100644
--- a/src/components/CodeDef/CodeDef.js
+++ b/src/components/CodeDef/CodeDef.js
@@ -3,10 +3,11 @@ 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 Bracket from './Bracket';
+import Operator from './Operator';
 import Type from './Type';
 
 const CodeDef = ({ className, children }) => (
@@ -19,10 +20,11 @@ CodeDef.propTypes = {
 };
 
 CodeDef.Block = Block;
+CodeDef.Bracket = Bracket;
 CodeDef.Comment = Comment;
 CodeDef.Keyword = Keyword;
 CodeDef.Identifier = Identifier;
-CodeDef.Bracket = Bracket;
+CodeDef.Operator = Operator;
 CodeDef.Type = Type;
 
 export default CodeDef;
diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss
index adc936c79..9a58ea643 100644
--- a/src/components/CodeDef/CodeDef.module.scss
+++ b/src/components/CodeDef/CodeDef.module.scss
@@ -3,7 +3,6 @@
   line-height: 2rem;
 }
 
-.keyword,
 .identifier {
   color: var(--color-neutrals-700);
 }
@@ -21,7 +20,9 @@
   }
 }
 
-.bracket {
+.keyword,
+.bracket,
+.operator {
   color: var(--color-neutrals-500);
 }
 
diff --git a/src/components/CodeDef/Operator.js b/src/components/CodeDef/Operator.js
new file mode 100644
index 000000000..0b3467347
--- /dev/null
+++ b/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;