[Contextual banners + Interstitial Modal] Add Polaris React Deprecation Elements (#14148)

### WHY are these changes introduced?

We've moved over to Polaris Web Components, we need a way to make it
clear that the default way to built Shopify apps is now the Web
components and that Polaris React is now deprecated.

### WHAT is this pull request doing?

This adds an interstitial page that occurs on each new session prompting
users to use Polaris Web Components, an alternative to use Polaris React
still remains.

A contextual banner is added on the page of components that are
available as Web components. The banner includes the new component name
(e.g. s-button) + a link to the Web component documentation of that
specific component.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [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)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] 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
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: mpshopify

.changeset/twelve-trees-play.md

@@ -0,0 +1,2 @@
+---
+---

polaris.shopify.com/content/components/actions/account-connection.mdx

@@ -2,6 +2,10 @@
 title: Account connection
 shortDescription: Used for connecting or disconnecting a store to various accounts, like Facebook for the sales channel.
 category: Actions
+webComponent:
+  name: Account connection
+  url: https://shopify.dev/docs/api/app-home/patterns/compositions/account-connection
+  type: pattern
 keywords:
   - AccountConnection
   - connect
@@ -29,6 +33,13 @@ The account connection component is used so merchants can connect or disconnect
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/actions/button-group.mdx

@@ -2,6 +2,10 @@
 title: Button group
 shortDescription: Displays multiple related actions stacked or in a horizontal row for arrangement and spacing.
 category: Actions
+webComponent:
+  name: s-button-group
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/actions/buttongroup
+  type: polaris
 keywords:
   - ButtonGroup
   - choices
@@ -39,6 +43,13 @@ Button group displays multiple related actions stacked or in a horizontal row to
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/actions/button.mdx

@@ -2,6 +2,10 @@
 title: Button
 shortDescription: Used primarily for actions like 'Add', 'Close', 'Cancel', or 'Save'. Plain buttons are used for less important actions.
 category: Actions
+webComponent:
+  name: s-button
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/button
+  type: polaris
 keywords:
   - CTA
   - call to action
@@ -83,10 +87,17 @@ previewImg: /images/components/actions/button.png
 
 <Lede>
 
-Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
+Buttons are used primarily for actions, such as "Add", "Close", "Cancel", or "Save". Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as "view shipping settings".
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/feedback-indicators/badge.mdx

@@ -2,6 +2,10 @@
 title: Badge
 shortDescription: Used to inform merchants of the tone of an object or an action taken.
 category: Feedback indicators
+webComponent:
+  name: s-badge
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/badge
+  type: polaris
 keywords:
   - pills
   - tone indicators
@@ -59,6 +63,13 @@ Badges are used to inform merchants of the tone of an object or of an action tha
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/feedback-indicators/banner.mdx

@@ -2,6 +2,10 @@
 title: Banner
 shortDescription: Informs merchants about important changes or persistent conditions in a prominent way.
 category: Feedback indicators
+webComponent:
+  name: s-banner
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/banner
+  type: polaris
 keywords:
   - inform
   - update
@@ -66,6 +70,13 @@ Informs merchants about important changes or persistent conditions. Use this com
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/feedback-indicators/spinner.mdx

@@ -3,6 +3,10 @@ title: Spinner
 shortDescription: Used to notify merchants that their action is being processed. Used for content that can’t be represented with skeleton loading components.
 category: Feedback indicators
 releasedIn: 1.7.0
+webComponent:
+  name: s-spinner
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/feedback/spinner
+  type: polaris
 keywords:
   - spinner
   - loader
@@ -29,6 +33,13 @@ Spinners are used to notify merchants that their action is being processed. For
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/images-and-icons/avatar.mdx

@@ -2,6 +2,10 @@
 title: Avatar
 shortDescription: Used to show a thumbnail representation of an individual or business in the interface.
 category: Images and icons
+webComponent:
+  name: s-avatar
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/media/avatar
+  type: polaris
 keywords:
   - photo
   - profile
@@ -39,6 +43,13 @@ Avatars are used to show a thumbnail representation of an individual or business
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/images-and-icons/icon.mdx

@@ -2,6 +2,10 @@
 title: Icon
 shortDescription: Used to visually communicate core parts of the product and available actions, acting as wayfinding tools.
 category: Images and icons
+webComponent:
+  name: s-icon
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon
+  type: polaris
 keywords:
   - iconography
   - visual indicator
@@ -37,6 +41,13 @@ Icons are used to visually communicate core parts of the product and available a
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/images-and-icons/thumbnail.mdx

@@ -2,6 +2,10 @@
 title: Thumbnail
 shortDescription: Used as a visual anchor and identifier for an object, along with text to provide context.
 category: Images and icons
+webComponent:
+  name: s-thumbnail
+  url: https://shopify.dev/docs/api/app-home/polaris-web-components/media/thumbnail
+  type: polaris
 keywords:
   - photo
   - picture
@@ -37,6 +41,13 @@ Use thumbnails as a visual anchor and identifier for an object. They should be u
 
 </Lede>
 
+<WebComponentBanner
+  componentName={frontmatter.title}
+  webComponentName={frontmatter.webComponent.name}
+  webComponentUrl={frontmatter.webComponent.url}
+  type={frontmatter.webComponent.type}
+/>
+
 <Examples />
 
 <Props componentName={frontmatter.title} />