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 --*/