feat: Add deprecation message to prop list

newrelic · Jun 7, 2020 · d390f5d · d390f5d
1 parent 873ae98
commit d390f5d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@mdx-js/mdx": "^1.6.4",
     "@mdx-js/react": "^1.6.4",
     "classnames": "^2.2.6",
+    "date-fns": "^2.14.0",
     "gatsby": "^2.20.25",
     "gatsby-image": "^2.3.4",
     "gatsby-plugin-google-tagmanager": "^2.3.3",

diff --git a/src/components/PropList.js b/src/components/PropList.js
@@ -1,8 +1,10 @@
 import React from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import PropTypeInfo from './PropTypeInfo';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'react-markdown';
 import styles from './PropList.module.scss';
+import { format } from 'date-fns';
 
 const PropList = ({ propTypes }) => {
   if (propTypes.length === 0) {
@@ -12,14 +14,24 @@ const PropList = ({ propTypes }) => {
   return (
     <div>
       {propTypes.map(
-        ({ name, description, isRequired, type, defaultValue }) => {
+        ({
+          name,
+          description,
+          deprecation,
+          isRequired,
+          type,
+          defaultValue,
+        }) => {
           return (
             <div key={name} className={styles.container}>
               <div className={styles.info}>
                 <h3>
                   {name}
                   {isRequired && (
-                    <span className={styles.required}>required</span>
+                    <span className={styles.flagged}>required</span>
+                  )}
+                  {deprecation && (
+                    <span className={styles.flagged}>deprecated</span>
                   )}
                 </h3>
                 <div className={styles.type}>{type.name}</div>
@@ -31,8 +43,19 @@ const PropList = ({ propTypes }) => {
                 )}
               </div>
               <div className={styles.propInfo}>
-                <ReactMarkdown
-                  className={styles.details}
+                {deprecation && (
+                  <div className={styles.deprecation}>
+                    <div className={styles.deprecationDate}>
+                      Due {format(new Date(deprecation.date), 'MMMM do, yyyy')}
+                    </div>
+                    <Markdown
+                      className={styles.markdownContainer}
+                      source={deprecation.description}
+                    />
+                  </div>
+                )}
+                <Markdown
+                  className={cx(styles.details, styles.markdownContainer)}
                   source={description}
                 />
                 <PropTypeInfo type={type} />
@@ -50,6 +73,10 @@ PropList.propTypes = {
     PropTypes.shape({
       name: PropTypes.string.isRequired,
       description: PropTypes.string,
+      deprecation: PropTypes.shape({
+        date: PropTypes.number,
+        description: PropTypes.string,
+      }),
       isRequired: PropTypes.bool,
       type: PropTypes.shape({
         ...PropTypeInfo.propTypes.type,

diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
@@ -30,19 +30,31 @@
   color: var(--color-neutrals-600);
 }
 
+.deprecation {
+  padding: 0.25rem;
+  background: var(--color-red-100);
+  margin-bottom: 1rem;
+}
+
+.deprecationDate {
+  color: var(--color-red-400);
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
 .propInfo {
   width: 70%;
 }
 
+.markdownContainer > *:first-child {
+  margin-top: 0;
+}
+
 .details {
   font-size: 1.25rem;
-
-  > *:first-child {
-    margin-top: 0;
-  }
 }
 
-.required {
+.flagged {
   font-size: 0.75rem;
   color: var(--color-red-400);
   text-transform: uppercase;