Add banner to component docs with link to page in new docsite (#3752)

* WIP

* Fix quotes; add banner to a few more pages

* Fix linting issues

* Update docs/components/DeprecationBanner.js

Co-authored-by: Josep Martins <josepmartins@github.com>

* Fix linting issue

---------

Co-authored-by: Josep Martins <josepmartins@github.com>

docs/components/DeprecationBanner.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import {Link as GatsbyLink} from 'gatsby'
+import {Note} from '@primer/gatsby-theme-doctocat'
+
+const DeprecationBanner = ({replacementUrl}) => {
+  return (
+    <Note variant="warning" sx={{marginBottom: '40px'}}>
+      This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new
+      content can be found <GatsbyLink href={replacementUrl}>here</GatsbyLink>.
+    </Note>
+  )
+}
+
+export default DeprecationBanner

docs/content/ActionList.mdx

@@ -12,6 +12,9 @@ import data from '../../src/ActionList/ActionList.docs.json'
 import {ActionList, Avatar} from '@primer/react'
 import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
 import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/action-list/react'} />
 
 <Box sx={{border: '1px solid', borderColor: 'border.default', borderRadius: 2, padding: 6, marginBottom: 3}}>
   <ActionList sx={{width: 320}}>

docs/content/ActionMenu.mdx

@@ -11,6 +11,9 @@ description: An ActionMenu is an ActionList-based component for creating a menu
 import data from '../../src/ActionMenu/ActionMenu.docs.json'
 
 import {Box, Avatar, ActionList, ActionMenu} from '@primer/react'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/action-menu/react'} />
 
 <br />
 

docs/content/AnchoredOverlay.mdx

@@ -8,6 +8,10 @@ storybook: '/react/storybook?path=/story/behaviors-anchoredoverlay--default-port
 
 import data from '../../src/AnchoredOverlay/AnchoredOverlay.docs.json'
 
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/anchored-overlay/react'} />
+
 An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
 The overlay can be opened and navigated using keyboard or mouse.
 

docs/content/Autocomplete.mdx

@@ -9,6 +9,9 @@ storybook: '/react/storybook?path=/story/components-forms-autocomplete'
 
 import data from '../../src/Autocomplete/Autocomplete.docs.json'
 import {Autocomplete} from '@primer/react'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/autocomplete/react'} />
 
 The `Autocomplete` component is comprised of an `Autocomplete.Input` component that a user types into, and a `Autocomplete.Menu` component that displays the list of selectable values.
 

docs/content/Avatar.mdx

@@ -6,8 +6,10 @@ source: https://github.com/primer/react/blob/main/src/Avatar
 ---
 
 import data from '../../src/Avatar/Avatar.docs.json'
-
 import {Avatar, Box} from '@primer/react'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/avatar/react'} />
 
 ```js
 import {Avatar} from '@primer/react'

docs/content/AvatarPair.mdx

@@ -6,6 +6,9 @@ source: https://github.com/primer/react/blob/main/src/AvatarPair
 ---
 
 import data from '../../src/AvatarPair/AvatarPair.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/avatar-pair/react'} />
 
 ```js
 import {AvatarPair} from '@primer/react'

docs/content/AvatarStack.mdx

@@ -8,8 +8,10 @@ storybook: '/react/storybook?path=/story/components-avatarstack--default'
 ---
 
 import data from '../../src/AvatarStack/AvatarStack.docs.json'
-
 import {AvatarStack} from '@primer/react'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/avatar-stack/react'} />
 
 ```js
 import {AvatarStack} from '@primer/react'

docs/content/Box.mdx

@@ -7,6 +7,9 @@ source: https://github.com/primer/react/blob/main/src/Box.tsx
 ---
 
 import data from '../../src/Box/Box.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/box/react'} />
 
 ```js
 import {Box} from '@primer/react'

docs/content/BranchName.mdx

@@ -6,6 +6,9 @@ source: https://github.com/primer/react/blob/main/src/BranchName/BranchName.tsx
 ---
 
 import data from '../../src/BranchName/BranchName.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/branch-name/react'} />
 
 ```js
 import {BranchName} from '@primer/react'

docs/content/Breadcrumbs.mdx

@@ -7,6 +7,9 @@ source: https://github.com/primer/react/blob/main/src/Breadcrumbs/Breadcrumbs.ts
 ---
 
 import data from '../../src/Breadcrumbs/Breadcrumbs.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/breadcrumbs/react'} />
 
 ```js
 import {Breadcrumbs} from '@primer/react'

docs/content/Button.mdx

@@ -8,6 +8,9 @@ description: Use button for the main actions on a page or form.
 ---
 
 import data from '../../src/Button/Button.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/button/react'} />
 
 ```js
 import {Button} from '@primer/react'

docs/content/ButtonGroup.mdx

@@ -7,6 +7,9 @@ storybook: '/react/storybook?path=/story/components-buttongroup--default'
 ---
 
 import data from '../../src/ButtonGroup/ButtonGroup.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/button-group/react'} />
 
 ```js
 import {ButtonGroup} from '@primer/react'

docs/content/Checkbox.mdx

@@ -8,6 +8,9 @@ componentId: checkbox
 ---
 
 import data from '../../src/Checkbox/Checkbox.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/checkbox/react'} />
 
 ## Examples
 

docs/content/CheckboxGroup.mdx

@@ -11,6 +11,9 @@ import data from '../../src/CheckboxGroup/CheckboxGroup.docs.json'
 
 import {CheckboxGroup, Checkbox, Box} from '@primer/components'
 import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/checkbox-group/react'} />
 
 ## Examples
 

docs/content/CircleBadge.mdx

@@ -6,6 +6,9 @@ source: https://github.com/primer/react/blob/main/src/CircleBadge
 ---
 
 import data from '../../src/CircleBadge/CircleBadge.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/circle-badge/react'} />
 
 ```js
 import {CircleBadge} from '@primer/react'

docs/content/CounterLabel.mdx

@@ -7,6 +7,9 @@ source: https://github.com/primer/react/blob/main/src/CounterLabel/CounterLabel.
 ---
 
 import data from '../../src/CounterLabel/CounterLabel.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/counter-label/react'} />
 
 ## Example
 

docs/content/Details.mdx

@@ -7,6 +7,9 @@ storybook: '/react/storybook/?path=/story/components-details--default'
 ---
 
 import data from '../../src/Details/Details.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/details/react'} />
 
 `Details` is a styled `details` element for use with the `useDetails` hook. The `useDetails` hook returns the `open` state, a `setOpen` function to manually change the open state, and **`getDetailsProps` which must be spread onto your `Details` element in order for `Details` to get receive the proper behaviors provided by the hook**. See [Kent Dodd's article on this pattern](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters).
 

docs/content/Dialog.mdx

@@ -5,6 +5,9 @@ source: https://github.com/primer/react/blob/main/src/Dialog
 ---
 
 import data from '../../src/Dialog.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/dialog/react'} />
 
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 

docs/content/Flash.mdx

@@ -6,6 +6,9 @@ source: https://github.com/primer/react/blob/main/src/Flash
 ---
 
 import data from '../../src/Flash/Flash.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/flash/react'} />
 
 ```js
 import {Flash} from '@primer/react'

docs/content/FormControl.mdx

@@ -8,6 +8,8 @@ storybook: '/react/storybook?path=/story/components-forms-autocomplete'
 ---
 
 import data from '../../src/FormControl/FormControl.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+import {MarkGithubIcon} from '@primer/octicons-react'
 
 import {
   FormControl,
@@ -21,7 +23,8 @@ import {
   RadioGroup,
   Text,
 } from '@primer/react'
-import {MarkGithubIcon} from '@primer/octicons-react'
+
+<DeprecationBanner replacementUrl={'/design/components/form-control/react'} />
 
 ## Examples
 

docs/content/Header.mdx

@@ -7,6 +7,9 @@ componentId: header
 ---
 
 import data from '../../src/Header/Header.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/header/react'} />
 
 ## Examples
 

docs/content/Heading.mdx

@@ -8,6 +8,9 @@ componentId: heading
 ---
 
 import data from '../../src/Heading/Heading.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/heading/react'} />
 
 The Heading component will render an html `h2` tag without any default styling. Other heading level elements `h1-h6` are available through use of the `as` prop (see [System Props](/system-props) for additional explanation). Please reference the [w3 recommendations for headings](https://www.w3.org/WAI/tutorials/page-structure/headings/) to ensure your headings provide an accessible experience for screen reader users.
 

docs/content/IconButton.mdx

@@ -8,6 +8,9 @@ description: An accessible button component with no text and only icon.
 ---
 
 import data from '../../src/Button/IconButton.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/icon-button/react'} />
 
 ## Usage
 

docs/content/Label.mdx

@@ -8,6 +8,9 @@ description: Use Label components to add contextual metadata to a design.
 ---
 
 import data from '../../src/Label/Label.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/label/react'} />
 
 ## Examples
 

docs/content/LabelGroup.mdx

@@ -7,6 +7,9 @@ componentId: label_group
 ---
 
 import data from '../../src/LabelGroup/LabelGroup.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/label-group/react'} />
 
 ## Example
 

docs/content/Link.mdx

@@ -7,6 +7,9 @@ storybook: '/react/storybook/?path=/story/components-link--default'
 ---
 
 import data from '../../src/Link/Link.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/link/react'} />
 
 The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
 

docs/content/NavList.mdx

@@ -8,6 +8,9 @@ storybook: '/react/storybook/?path=/story/components-navlist--simple'
 ---
 
 import data from '../../src/NavList/NavList.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/nav-list/react'} />
 
 ```js
 import {NavList} from '@primer/react'

docs/content/Overlay.mdx

@@ -8,6 +8,9 @@ storybook: '/react/storybook?path=/story/private-components-overlay--dropdown-ov
 ---
 
 import data from '../../src/Overlay/Overlay.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/overlay/react'} />
 
 ```js
 import {Overlay} from '@primer/react'

docs/content/PageLayout.mdx

@@ -9,6 +9,9 @@ a11yReviewed: true
 ---
 
 import data from '../../src/PageLayout/PageLayout.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/page-layout/react'} />
 
 ```js
 import {PageLayout} from '@primer/react'

docs/content/Pagehead.md

@@ -7,6 +7,9 @@ status: Alpha
 ---
 
 import data from '../../src/Pagehead/Pagehead.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/pagehead/react'} />
 
 ```js
 import {Pagehead} from '@primer/react'

docs/content/Pagination.md

@@ -10,6 +10,9 @@ status: Alpha
 import data from '../../src/Pagination/Pagination.docs.json'
 
 import State from '../components/State'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/pagination/react'} />
 
 ```js
 import {Pagination} from '@primer/react'

docs/content/PointerBox.mdx

@@ -7,6 +7,9 @@ source: https://github.com/primer/react/blob/main/src/PointerBox
 ---
 
 import data from '../../src/PointerBox/PointerBox.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/pointer-box/react'} />
 
 ## Examples
 

docs/content/Popover.md

@@ -7,6 +7,9 @@ source: https://github.com/primer/react/blob/main/src/Popover
 ---
 
 import data from '../../src/Popover/Popover.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/popover/react'} />
 
 ```js
 import {Popover} from '@primer/react'

docs/content/ProgressBar.mdx

@@ -6,6 +6,9 @@ source: https://github.com/primer/react/blob/main/src/ProgressBar
 ---
 
 import data from '../../src/ProgressBar/ProgressBar.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/progress-bar/react'} />
 
 ```js
 import {ProgressBar} from '@primer/react'

docs/content/Radio.mdx

@@ -8,6 +8,9 @@ storybook: '/react/storybook?path=/story/components-forms-radiogroup'
 ---
 
 import data from '../../src/Radio/Radio.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/radio/react'} />
 
 ## Examples
 

docs/content/RadioGroup.mdx

@@ -11,6 +11,9 @@ import data from '../../src/RadioGroup/RadioGroup.docs.json'
 
 import {RadioGroup, Radio, Box} from '@primer/components'
 import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/radio-group/react'} />
 
 ## Examples
 

docs/content/RelativeTime.mdx

@@ -6,6 +6,9 @@ source: https://github.com/primer/react/blob/main/src/RelativeTime
 ---
 
 import data from '../../src/RelativeTime/RelativeTime.docs.json'
+import DeprecationBanner from '../components/DeprecationBanner'
+
+<DeprecationBanner replacementUrl={'/design/components/relative-time/react'} />
 
 ```js
 import {RelativeTime} from '@primer/react'