diff --git a/package-lock.json b/package-lock.json index 98cd9bcd0..e88315cb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7070,9 +7070,9 @@ "integrity": "sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==" }, "date-fns": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.12.0.tgz", - "integrity": "sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw==" + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz", + "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==" }, "debug": { "version": "3.2.6", diff --git a/package.json b/package.json index dff00b0ab..968c3c9f8 100644 --- 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 index 02ecc9ebf..6aebca894 100644 --- 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 index 746814105..74a374199 100644 --- 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;