Re-add deprecated typography docs (#8206)

### WHY are these changes introduced?

Re-adds the deprecated typography docs and images on the style guide so
that users can still reference them.
The `get-props` script had to be updated to resolve build errors. It was
failing since the component files no longer existed in
`polaris-react/src/components`.

### WHAT is this pull request doing?

- Re-add dep components images
- Re-add dep component pages
- ~Adds new `deprecatedComponents` array to the `get-props` file and if
the parsed file matches any of the elements, return empty object~
- If component status is deprecated, props table is not rendered on
component page

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: laurkim

polaris.shopify.com/content/components/caption.md

@@ -0,0 +1,30 @@
+---
+title: Caption
+description: Caption text size is smaller than the recommended size for general reading. On web, it should be used only in a graph or as a timestamp for a list item. On Android and iOS, it can also be used as help text or as other kinds of secondary text for list items.
+category: Titles and text
+keywords:
+  - labels
+  - text
+  - microcopy
+  - typographic
+  - graph
+  - timestamp
+  - smaller text
+  - smallest text
+  - smaller than reading size text
+  - time text
+  - compact text
+  - small text
+status:
+  value: Deprecated
+  message: This component is no longer supported. Please use the Text component instead.
+---
+
+## Mapping to the Text component
+
+```diff
+- <Caption>Received April 21, 2017</Caption>
++ <Text variant="bodySm" as="p">Received April 21, 2017</Text>
+```
+
+---

polaris.shopify.com/content/components/display-text.md

@@ -0,0 +1,61 @@
+---
+title: Display text
+description: Display styles make a bold visual statement. Use them to create impact when the main goal is visual storytelling. For example, use display text to convince or reassure merchants such as in marketing content or to capture attention during onboarding.
+category: Titles and text
+keywords:
+  - DisplayText
+  - announcement text
+  - greeting text
+  - marketing text
+  - title text
+  - biggest text
+  - bigger text
+  - big text
+  - large text
+  - larger text
+  - largest text
+  - strong text
+  - bold text
+  - bold statements
+  - extra large display text
+  - medium and large display text
+  - small display text
+  - visual story telling
+  - visual storytelling
+  - visual statements
+status:
+  value: Deprecated
+  message: This component is no longer supported. Please use the Text component instead.
+---
+
+## Mapping to the Text component
+
+### Small
+
+```diff
+- <DisplayText size="small">Sales this year</DisplayText>
++ <Text variant="headingLg" as="p">Sales this year</Text>
+```
+
+### Medium
+
+```diff
+- <DisplayText size="medium">Sales this year</DisplayText>
++ <Text variant="headingXl" as="p">Sales this year</Text>
+```
+
+### Large
+
+```diff
+- <DisplayText size="large">Sales this year</DisplayText>
++ <Text variant="heading2xl" as="p">Sales this year</Text>
+```
+
+### Extra large
+
+```diff
+- <DisplayText size="extraLarge">Sales this year</DisplayText>
++ <Text variant="heading4xl" as="p">Sales this year</Text>
+```
+
+---

polaris.shopify.com/content/components/heading.md

@@ -0,0 +1,29 @@
+---
+title: Heading
+description: Headings are used as the titles of each major section of a page in the interface. For example, [card components](https://polaris.shopify.com/components/card) generally use headings as their title.
+category: Titles and text
+keywords:
+  - titles
+  - text
+  - microcopy
+  - conversational
+  - typographic
+  - card headings
+  - card titles
+  - section titles
+  - section headings
+  - heading text
+  - heading font
+status:
+  value: Deprecated
+  message: This component is no longer supported. Please use the Text component instead.
+---
+
+## Mapping to the Text component
+
+```diff
+- <Heading>Online store dashboard</Heading>
++ <Text variant="headingMd" as="h2">Online store dashboard</Text>
+```
+
+---

polaris.shopify.com/content/components/subheading.md

@@ -0,0 +1,25 @@
+---
+title: Subheading
+description: Subheadings are used for the title of any sub-sections in top-level page sections.
+category: Titles and text
+keywords:
+  - title bar
+  - top-level
+  - description
+  - sub-section titles
+  - titles of sub-sections
+  - subsection titles
+  - titles of subsections
+status:
+  value: Deprecated
+  message: This component is no longer supported. Please use the Text component instead.
+---
+
+## Mapping to the Text component
+
+```diff
+- <Subheading>Accounts</Subheading>
++ <Text variant="headingXs" as="h3">Accounts</Text>
+```
+
+---

polaris.shopify.com/content/components/text-style.md

@@ -0,0 +1,71 @@
+---
+title: Text style
+description: Text style enhances text with additional visual meaning. For example, using subdued text to de-emphasize it from its surrounding text.
+category: Titles and text
+keywords:
+  - TextStyle
+  - typographic
+  - subdued
+  - strong
+  - negative
+  - warning
+  - positive
+  - cues
+  - enhancements
+  - type
+  - bold
+  - dollar
+  - increase
+  - decrease
+  - input
+  - fields
+status:
+  value: Deprecated
+  message: This component is no longer supported. Please use the Text component instead.
+---
+
+## Mapping to the Text component
+
+### Subdued
+
+```diff
+- <TextStyle variation="subdued">No supplier listed</TextStyle>
++ <Text variant="bodyMd" as="span" color="subdued">No supplier listed</Text>
+```
+
+### Strong
+
+```diff
+- <TextStyle variation="strong">No supplier listed</TextStyle>
++ <Text variant="bodyMd" as="span" fontWeight="semibold">No supplier listed</Text>
+```
+
+### Positive
+
+```diff
+- <TextStyle variation="positive">No supplier listed</TextStyle>
++ <Text variant="bodyMd" as="span" color="success">No supplier listed</Text>
+```
+
+### Negative
+
+```diff
+- <TextStyle variation="negative">No supplier listed</TextStyle>
++ <Text variant="bodyMd" as="span" color="critical">No supplier listed</Text>
+```
+
+### Warning
+
+```diff
+- <TextStyle variation="warning">No supplier listed</TextStyle>
++ <Text variant="bodyMd" as="span" color="warning">No supplier listed</Text>
+```
+
+### Code
+
+```diff
+- <TextStyle variation="code">No supplier listed</TextStyle>
++ <Text variant="bodyMd" as="span"><InlineCode>No supplier listed</InlineCode></Text>
+```
+
+---

polaris.shopify.com/content/components/visually-hidden.md

@@ -0,0 +1,34 @@
+---
+title: Visually hidden
+description: Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.
+category: Titles and text
+keywords:
+  - VisuallyHidden
+  - screen readers
+  - hidden but available for screen readers
+  - visually hidden headings
+  - hide
+  - hidden headings
+  - hidden text
+  - visually hidden table headers
+  - visually hidden headers
+  - hidden table headers
+  - hidden table headings
+  - accessibility
+  - a11y
+  - assistive technology
+status:
+  value: Deprecated
+  message: This component is no longer supported. Please use the Text component instead.
+---
+
+## Mapping to the Text component
+
+```diff
+- <VisuallyHidden>
+-   <Heading>Title and description</Heading>
+- </VisuallyHidden>
++ <Text visuallyHidden variant="headingMd" as="h2">Title and description</Text>
+```
+
+---

polaris.shopify.com/pages/components/[component].tsx

@@ -126,6 +126,7 @@ export const getStaticProps: GetStaticProps<
       allType,
       propName,
       `polaris-react/src/components/${componentDirName}/${componentDirName}.tsx`,
+      data.frontMatter.status?.value || '',
     );
 
     const props: Props = {