From d390f5dab552f60cf3881c8991acf536b9cac615 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Sat, 6 Jun 2020 23:50:43 -0700 Subject: [PATCH] feat: Add deprecation message to prop list --- package-lock.json | 6 ++--- package.json | 1 + src/components/PropList.js | 37 +++++++++++++++++++++++++---- src/components/PropList.module.scss | 22 +++++++++++++---- 4 files changed, 53 insertions(+), 13 deletions(-) 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 (
{propTypes.map( - ({ name, description, isRequired, type, defaultValue }) => { + ({ + name, + description, + deprecation, + isRequired, + type, + defaultValue, + }) => { return (

{name} {isRequired && ( - required + required + )} + {deprecation && ( + deprecated )}

{type.name}
@@ -31,8 +43,19 @@ const PropList = ({ propTypes }) => { )}
- +
+ Due {format(new Date(deprecation.date), 'MMMM do, yyyy')} +
+ +
+ )} + @@ -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;