diff --git a/src/components/PropList.js b/src/components/PropList.js index 7fc4529da..02ecc9ebf 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import PropTypeInfo from './PropTypeInfo'; import ReactMarkdown from 'react-markdown'; import styles from './PropList.module.scss'; @@ -29,7 +30,13 @@ const PropList = ({ propTypes }) => { )} - +
+ + +
); } @@ -45,6 +52,7 @@ PropList.propTypes = { description: PropTypes.string, isRequired: PropTypes.bool, type: PropTypes.shape({ + ...PropTypeInfo.propTypes.type, name: PropTypes.string.isRequired, }), defaultValue: PropTypes.string, diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index 418d8cb2c..746814105 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -11,6 +11,10 @@ .info { width: 30%; + + h3 { + margin-top: 0; + } } .default { @@ -26,9 +30,16 @@ color: var(--color-neutrals-600); } +.propInfo { + width: 70%; +} + .details { font-size: 1.25rem; - width: 70%; + + > *:first-child { + margin-top: 0; + } } .required { diff --git a/src/components/PropTypeInfo.js b/src/components/PropTypeInfo.js new file mode 100644 index 000000000..c178083db --- /dev/null +++ b/src/components/PropTypeInfo.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const PropTypeInfo = ({ type }) => { + switch (type.name) { + case 'function': + return
func
; + default: + return null; + } +}; + +PropTypeInfo.propTypes = { + type: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), +}; + +export default PropTypeInfo;