From 10c10db48c7b0df28fad888aa211d03e201c4eb5 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 30 Jul 2020 10:19:15 +0200
Subject: [PATCH] add deprecation notice to docs

---
 docs/src/components/ComponentDoc/ComponentDoc.js | 16 +++++++++++++---
 docs/src/examples/addons/Responsive/index.js     |  7 +++++--
 src/addons/Responsive/Responsive.js              |  2 ++
 static.routes.js                                 |  4 ++++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentDoc.js b/docs/src/components/ComponentDoc/ComponentDoc.js
index 2fdf957059..34bad666db 100644
--- a/docs/src/components/ComponentDoc/ComponentDoc.js
+++ b/docs/src/components/ComponentDoc/ComponentDoc.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'
 import { withRouter, withRouteData } from 'react-static'
-import { Grid, Header, Icon } from 'semantic-ui-react'
+import { Grid, Header, Icon, Label, Popup } from 'semantic-ui-react'
 
 import DocsLayout from 'docs/src/components/DocsLayout'
 import { docTypes, examplePathToHash } from 'docs/src/utils'
@@ -47,7 +47,7 @@ class ComponentDoc extends Component {
   }
 
   render() {
-    const { componentsInfo, displayName, seeTags, sidebarSections } = this.props
+    const { componentsInfo, displayName, deprecated, seeTags, sidebarSections } = this.props
     const activePath = _.findKey(this.state.exampleStates)
     const componentInfo = componentsInfo[displayName]
     const contextValue = { ...this.props, onVisibilityChange: this.handleExampleVisibility }
@@ -60,7 +60,16 @@ class ComponentDoc extends Component {
             <Grid.Column>
               <Header
                 as='h1'
-                content={displayName}
+                content={
+                  <>
+                    <span>{displayName}</span>
+                    {deprecated && (
+                      <Popup trigger={<Label color='black'>Deprecated</Label>}>
+                        This component is deprecated and will be removed in the next major release.
+                      </Popup>
+                    )}
+                  </>
+                }
                 subheader={_.join(componentInfo.docblock.description, ' ')}
               />
               <ComponentDocSee seeTags={seeTags} />
@@ -107,6 +116,7 @@ class ComponentDoc extends Component {
 ComponentDoc.propTypes = {
   componentsInfo: PropTypes.objectOf(docTypes.componentInfoShape).isRequired,
   displayName: PropTypes.string.isRequired,
+  deprecated: PropTypes.bool.isRequired,
   history: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
   seeTags: docTypes.seeTags.isRequired,
diff --git a/docs/src/examples/addons/Responsive/index.js b/docs/src/examples/addons/Responsive/index.js
index 647a7cecef..afd5dc2284 100644
--- a/docs/src/examples/addons/Responsive/index.js
+++ b/docs/src/examples/addons/Responsive/index.js
@@ -10,10 +10,13 @@ const ResponsiveExamples = () => (
       <Icon name='warning sign' />
 
       <Message.Content>
-        <Message.Header>Deprecation notice!</Message.Header>
+        <Message.Header>Deprecation notice</Message.Header>
         <p>
           <code>Responsive</code> component is deprecated and will be removed in
-          the next major release. Please follow our <a href=''>upgrade guide</a>
+          the next major release. Please follow our{' '}
+          <a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4008'>
+            upgrade guide
+          </a>
           .
         </p>
       </Message.Content>
diff --git a/src/addons/Responsive/Responsive.js b/src/addons/Responsive/Responsive.js
index cf5bb1de39..e77b97d6ab 100644
--- a/src/addons/Responsive/Responsive.js
+++ b/src/addons/Responsive/Responsive.js
@@ -7,6 +7,8 @@ import isVisible from './lib/isVisible'
 
 /**
  * Responsive can control visibility of content.
+ *
+ * @deprecated This component is deprecated and will be removed in next major release.
  */
 export default class Responsive extends Component {
   state = {
diff --git a/static.routes.js b/static.routes.js
index 546bae318f..5093932991 100644
--- a/static.routes.js
+++ b/static.routes.js
@@ -49,6 +49,10 @@ export default async () => {
           exampleSources,
           sidebarSections,
           displayName: baseInfo.displayName,
+          deprecated: !!_.find(
+            _.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
+            (tag) => tag.title === 'deprecated',
+          ),
           seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
         }
       },