feat: Add operator component for code def

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;

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);
 }
 

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;