From 09d8a69418ba84364a8b09b72222714c113493a0 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Sun, 7 Jun 2020 02:07:59 -0700
Subject: [PATCH] feat: Render union type info for union props

---
 src/components/FunctionDefinition.module.scss |  2 +-
 src/components/PropTypeInfo.js                | 13 +++++++++++++
 src/components/PropTypeInfo.module.scss       |  9 +++++++++
 src/components/styles.scss                    |  1 +
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PropTypeInfo.module.scss

diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss
index 719e24fb8..696cfe5ec 100644
--- a/src/components/FunctionDefinition.module.scss
+++ b/src/components/FunctionDefinition.module.scss
@@ -1,5 +1,5 @@
 .container {
-  font-family: 'Menlo', 'Consolas', monospace;
+  font-family: var(--code-font);
   font-size: 0.875rem;
   line-height: 1.5;
 }
diff --git a/src/components/PropTypeInfo.js b/src/components/PropTypeInfo.js
index 3a75b64af..c6daeae93 100644
--- a/src/components/PropTypeInfo.js
+++ b/src/components/PropTypeInfo.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FunctionDefinition from './FunctionDefinition';
+import styles from './PropTypeInfo.module.scss';
 
 const PropTypeInfo = ({ type }) => {
   switch (type.raw) {
@@ -11,6 +12,18 @@ const PropTypeInfo = ({ type }) => {
           params={type.meta.params}
         />
       );
+    case 'oneOf':
+      return (
+        <div className={styles.listLike}>
+          <div>{'<One of'}</div>
+          <div className={styles.arg}>
+            {type.meta.constants.map((constant) => (
+              <div key={constant}>{constant},</div>
+            ))}
+          </div>
+          <div>{'>'}</div>
+        </div>
+      );
     default:
       return null;
   }
diff --git a/src/components/PropTypeInfo.module.scss b/src/components/PropTypeInfo.module.scss
new file mode 100644
index 000000000..5cd48a505
--- /dev/null
+++ b/src/components/PropTypeInfo.module.scss
@@ -0,0 +1,9 @@
+.arg {
+  padding-left: 1rem;
+}
+
+.listLike {
+  font-family: var(--code-font);
+  font-size: 0.875rem;
+  color: var(--color-neutrals-600);
+}
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 7fe6580af..2ac451585 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -68,6 +68,7 @@
   --primary-font-family: 'open sans', sans-serif;
   --secondary-font-family: 'effra', sans-serif;
   --tertiary-font-family: 'Ovo', serif;
+  --code-font: 'Menlo', 'Consolas', monospace;
 }
 
 /*-- Reset --*/