feat: Add required label to required prop types

newrelic · Jun 4, 2020 · 87126a9 · 87126a9
1 parent 307d0cb
commit 87126a9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/src/components/PropList.js b/src/components/PropList.js
@@ -10,25 +10,32 @@ const PropList = ({ propTypes }) => {
 
   return (
     <div>
-      {propTypes.map(({ name, description, type, defaultValue }) => {
-        return (
-          <div key={name} className={styles.container}>
-            <div className={styles.info}>
-              <h3>{name}</h3>
-              <div className={styles.type}>{type}</div>
-              {defaultValue !== undefined && (
-                <div className={styles.default}>
-                  <p>DEFAULT</p>
-                  <p>{String(defaultValue)}</p>
-                </div>
-              )}
+      {propTypes.map(
+        ({ name, description, isRequired, type, defaultValue }) => {
+          return (
+            <div key={name} className={styles.container}>
+              <div className={styles.info}>
+                <h3>
+                  {name}{' '}
+                  {isRequired && (
+                    <span className={styles.required}>required</span>
+                  )}
+                </h3>
+                <div className={styles.type}>{type}</div>
+                {defaultValue !== undefined && (
+                  <div className={styles.default}>
+                    <p>DEFAULT</p>
+                    <p>{String(defaultValue)}</p>
+                  </div>
+                )}
+              </div>
+              <div className={styles.details}>
+                <ReactMarkdown source={description} />
+              </div>
             </div>
-            <div className={styles.details}>
-              <ReactMarkdown source={description} />
-            </div>
-          </div>
-        );
-      })}
+          );
+        }
+      )}
     </div>
   );
 };
@@ -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
@@ -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
@@ -27,6 +27,7 @@ const extractPropTypes = (component) => {
     return {
       name,
       description: propDocs.text,
+      isRequired: propMeta.some((item) => item.name === 'isRequired'),
       type: type.displayType,
       defaultValue,
     };