diff --git a/src/components/PropList.js b/src/components/PropList.js index 8b28a1925..4e4351937 100644 --- a/src/components/PropList.js +++ b/src/components/PropList.js @@ -10,25 +10,32 @@ const PropList = ({ propTypes }) => { return (
- {propTypes.map(({ name, description, type, defaultValue }) => { - return ( -
-
-

{name}

-
{type}
- {defaultValue !== undefined && ( -
-

DEFAULT

-

{String(defaultValue)}

-
- )} + {propTypes.map( + ({ name, description, isRequired, type, defaultValue }) => { + return ( +
+
+

+ {name}{' '} + {isRequired && ( + required + )} +

+
{type}
+ {defaultValue !== undefined && ( +
+

DEFAULT

+

{String(defaultValue)}

+
+ )} +
+
+ +
-
- -
-
- ); - })} + ); + } + )}
); }; @@ -38,6 +45,7 @@ PropList.propTypes = { PropTypes.shape({ name: PropTypes.string.isRequired, description: PropTypes.string, + isRequired: PropTypes.bool, type: PropTypes.string, defaultValue: PropTypes.string, }) diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss index 43814d88c..5a636cb12 100644 --- a/src/components/PropList.module.scss +++ b/src/components/PropList.module.scss @@ -30,3 +30,10 @@ font-size: 1.25rem; width: 70%; } + +.required { + font-size: 0.75rem; + color: var(--color-red-400); + text-transform: uppercase; + margin-left: 0.5rem; +} diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js index 1624f9f4d..8a075943d 100644 --- a/src/hooks/useComponentDoc.js +++ b/src/hooks/useComponentDoc.js @@ -27,6 +27,7 @@ const extractPropTypes = (component) => { return { name, description: propDocs.text, + isRequired: propMeta.some((item) => item.name === 'isRequired'), type: type.displayType, defaultValue, };