Fix links, fix spacing in navigation, remove banners

- Point `internal-only` pages to other `internal-only` pages
- Point public documentation to `App Bridge` docs
- Remove banners from `internal-only` routes
- Fix spacing in navigation

Co-Authored-By: Mark Appleby <themarkappleby@gmail.com>

polaris.shopify.com/content/components/deprecated/frame.mdx

@@ -31,7 +31,7 @@ status: Deprecated
 
 <Lede>
 
-The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/deprecated/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
+The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
 
 </Lede>
 

polaris.shopify.com/content/components/internal-only/contextual-save-bar.mdx

@@ -50,7 +50,7 @@ The contextual save bar component should:
 - Become visible when a form on the page has unsaved changes
 - Be used to save or discard in-progress changes
 - Provide brief and helpful context on the nature of in-progress changes
-- Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a [modal dialog](https://polaris.shopify.com/components/deprecated/modal) for each section where changes can be made and saved.
+- Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a [modal dialog](https://polaris.shopify.com/components/internal-only/modal) for each section where changes can be made and saved.
 
 ---
 

polaris.shopify.com/content/components/internal-only/frame.mdx

@@ -32,14 +32,10 @@ internalOnly: true
 
 <Lede>
 
-The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/deprecated/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/deprecated/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
+The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary [navigation](https://polaris.shopify.com/components/internal-only/navigation), [top bar](https://polaris.shopify.com/components/top-bar), [toast](https://polaris.shopify.com/components/internal-only/toast), and [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) components.
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />
@@ -49,17 +45,17 @@ The frame component, while not visible in the user interface itself, provides th
 For the best experience when creating an application frame, use the following components:
 
 - [Top bar](https://polaris.shopify.com/components/top-bar)
-- [Navigation](https://polaris.shopify.com/components/deprecated/navigation)
+- [Navigation](https://polaris.shopify.com/components/internal-only/navigation)
 - [Contextual save bar](https://polaris.shopify.com/components/contextual-save-bar)
-- [Toast](https://polaris.shopify.com/components/deprecated/toast)
+- [Toast](https://polaris.shopify.com/components/internal-only/toast)
 - [Loading](https://polaris.shopify.com/components/loading)
 
 ---
 
 ## Related components
 
 - To display the navigation component on small screens, to provide search and a user menu, or to style the [frame](https://polaris.shopify.com/components/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/top-bar) component.
-- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/deprecated/navigation) component.
+- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/internal-only/navigation) component.
 - To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component.
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component.
 - To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.

polaris.shopify.com/content/components/internal-only/loading.mdx

@@ -24,12 +24,6 @@ The loading component is used to indicate to merchants that a page is loading or
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported. Please use the [App Bridge Loading
-  API](https://shopify.dev/docs/api/app-bridge-library/reference/loading)
-  instead.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />

polaris.shopify.com/content/components/internal-only/modal.mdx

@@ -69,11 +69,6 @@ Modals are overlays that require merchants to take an action before they can con
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported. Please use the [App Bridge Modal
-  API](https://shopify.dev/docs/api/app-bridge-library/reference/modal) instead.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />
@@ -211,13 +206,13 @@ Tertiary actions should:
 
 #### Do
 
-![Screenshot of modal with a plain button as a tertiary action](/images/components/deprecated/modal/do-use-plain-button-for-tertiary-action@2x.png)
+![Screenshot of modal with a plain button as a tertiary action](/images/components/internal-only/modal/do-use-plain-button-for-tertiary-action@2x.png)
 
 Use a plain button for a tertiary action if needed
 
 #### Don’t
 
-![Screenshot of modal with a destructive button as a tertiary action](/images/components/deprecated/modal/dont-use-destructive-tertiary-action@2x.png)
+![Screenshot of modal with a destructive button as a tertiary action](/images/components/internal-only/modal/dont-use-destructive-tertiary-action@2x.png)
 
 Use a tertiary action for a destructive action
 
@@ -271,7 +266,7 @@ Body content should be:
 - Modals use ARIA `role=”dialog”` to convey to screen reader users that they work like native dialog windows.
 - If you set the `title` prop to give the modal component a heading, then the `title` is used to label the dialog element with `aria-labelledby`. This helps to convey the purpose of the modal to screen reader users when it displays.
 - After a modal is closed, in order to return focus to the button that launched it, pass the button to the modal as an `activator`.
-- To ensure that [Toast](https://polaris.shopify.com/components/deprecated/toast)s are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/deprecated/frame) component.
+- To ensure that [Toast](https://polaris.shopify.com/components/internal-only/toast)s are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/internal-only/frame) component.
 
 ### Keyboard support
 

polaris.shopify.com/content/components/internal-only/navigation.mdx

@@ -60,13 +60,6 @@ The navigation component is used to display the primary navigation in the sideba
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported. Please use the [App Bridge Navigation
-  Menu
-  API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu)
-  instead.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />
@@ -247,7 +240,7 @@ Action allows a complementary icon-only action to render next to the section tit
 - To provide the structure for the navigation component, including the left sidebar and the top bar use the [frame](https://polaris.shopify.com/components/frame) component.
 - To display the navigation component on small screens, to provide search and a user menu, or to theme the [frame](https://polaris.shopify.com/components/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/top-bar) component.
 - To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component.
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component.
 - To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.
 - To alternate among related views within the same context, use the [tabs](https://polaris.shopify.com/components/tabs) component.
 - To embed a single action or link within a larger span of text, use the [link](https://polaris.shopify.com/components/link) component.

polaris.shopify.com/content/components/internal-only/toast.mdx

@@ -43,11 +43,6 @@ The toast component is a non-disruptive message that appears at the bottom of th
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported. Please use the [App Bridge Toast
-  API](https://shopify.dev/docs/api/app-bridge-library/reference/toast) instead.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />
@@ -160,7 +155,7 @@ Avoid using toast for critical information that merchants need to act on immedia
 - Can’t be easily accessed with the keyboard
 - Might appear outside the proximity of the merchant’s current focus
 
-To ensure that Toasts are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/deprecated/frame) component.
+To ensure that Toasts are read out by a screen reader when a Modal is open, apps should be wrapped in a [Frame](https://polaris.shopify.com/components/internal-only/frame) component.
 
 ### Toast with action
 

polaris.shopify.com/content/components/internal-only/top-bar.mdx

@@ -33,10 +33,6 @@ The top bar is a header component that allows merchants to search, access menus,
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />
@@ -52,7 +48,7 @@ The top bar component must be passed to the [frame](https://polaris.shopify.com/
 The top bar component should:
 
 - Not provide global navigation for an application
-  - Use the [navigation component](https://polaris.shopify.com/components/deprecated/navigation) instead
+  - Use the [navigation component](https://polaris.shopify.com/components/internal-only/navigation) instead
 - Include search to help merchants find resources and navigate an application
 - Include a user menu component to indicate the logged-in merchant and provide them with global actions
 - Provide a color through the [app provider](https://polaris.shopify.com/components/app-provider) component to style the background
@@ -153,7 +149,7 @@ A text field component that is tailor-made for a search use-case.
 ## Related components
 
 - To provide the structure for the top bar component, as well as the primary navigation use the [frame](https://polaris.shopify.com/components/frame) component.
-- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/deprecated/navigation) component.
+- To display the primary navigation within the frame of an application, use the [navigation](https://polaris.shopify.com/components/internal-only/navigation) component.
 - To tell merchants their options once they have made changes to a form on the page use the [contextual save bar](https://polaris.shopify.com/components/contextual-save-bar) component.
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/internal-only/toast) component.
 - To indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.

polaris.shopify.com/content/components/navigation/fullscreen-bar.mdx

@@ -40,5 +40,5 @@ The Fullscreen bar component should:
 
 ## Related components
 
-- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+- To provide quick, at-a-glance feedback on the outcome of an action, use the [toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast) component.
 - To indicate to merchants that a page is loading or an upload is processing, use the [loading](https://polaris.shopify.com/components/loading) component.

polaris.shopify.com/content/content/voice-and-tone.mdx

@@ -205,7 +205,7 @@ While we don’t need to celebrate the accomplishment, we should recognize that
 
 #### Do
 
-If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [toast](/components/deprecated/toast). Consider ways to confirm completion without words or messaging.
+If this is a task people do regularly, make it clear that the step is complete in a simple and non-intrusive way, like a [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast). Consider ways to confirm completion without words or messaging.
 
 _Product saved_
 

polaris.shopify.com/content/design/interaction-states.mdx

@@ -80,6 +80,6 @@ Provide merchants with cues as to what the interface will do if they interact wi
 
 **Use feedback indicators** like the [progress bar](https://polaris.shopify.com/components/progress-bar) component or the [spinner](https://polaris.shopify.com/components/spinner) component to let them know that the interface received their request. If appropriate, you can also provide added information about what or how long it will take to complete.
 
-**For non-disruptive feedback** on the outcome of an action, use the [toast](https://polaris.shopify.com/components/deprecated/toast) component.
+**For non-disruptive feedback** on the outcome of an action, use the [App Bridge Toast](https://shopify.dev/docs/api/app-bridge-library/reference/toast) component.
 
 **For an unsuccessful completion** that requires the merchant to take action, provide information about what prevented the action from completing successfully and what the merchant can do to fix the problem. For example, use the validation error state of the [text field](https://polaris.shopify.com/components/selection-and-input/text-field) component.

polaris.shopify.com/src/components/Frame/Frame.module.scss

@@ -73,8 +73,16 @@ $breakpointNav: $breakpointTablet;
     flex-direction: column;
 
     > li {
-      > ul > li + li {
-        padding-top: 1rem;
+      > ul > li > ul > li:last-child {
+        margin-bottom: 1rem;
+      }
+
+      > ul > li + li:has(ul) {
+        margin-top: 1rem;
+      }
+
+      > ul:not(:has(ul)) {
+        margin-bottom: 1rem;
       }
 
       .NavItem {

polaris.shopify.com/src/components/StatusBanner/StatusBanner.tsx

@@ -11,10 +11,7 @@ function StatusBanner({status, children}: Props) {
   return (
     status && (
       <div className={styles.StatusBanner} data-value={status.toLowerCase()}>
-        <h2>
-          {uppercaseFirst(status)}
-          {status === 'Internal' ? ' only' : null}
-        </h2>
+        <h2>{uppercaseFirst(status)}</h2>
         {children}
       </div>
     )