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;