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-react/src/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx

@@ -91,7 +91,7 @@ describe('<ContextualSaveBar />', () => {
       expect(() => {
         mount(<ContextualSaveBar {...props} />);
       }).toThrow(
-        'No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/frame for implementation instructions.',
+        'No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/internal-only/frame for implementation instructions.',
       );
     });
   });

polaris-react/src/utilities/frame/hooks.ts

@@ -7,7 +7,7 @@ export function useFrame() {
 
   if (!frame) {
     throw new Error(
-      'No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/frame for implementation instructions.',
+      'No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/internal-only/frame for implementation instructions.',
     );
   }
 

polaris-react/src/utilities/frame/tests/hooks.test.tsx

@@ -27,7 +27,7 @@ describe('useFrame', () => {
   it('throws an error if context is not set', () => {
     const fn = () => mount(<Component />);
     expect(fn).toThrow(
-      'No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/frame for implementation instructions.',
+      'No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/internal-only/frame for implementation instructions.',
     );
   });
 });

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 [App Bridge Navigation Menu API](https://shopify.dev/docs/api/app-bridge-library/reference/navigation-menu), [top bar](https://polaris.shopify.com/components/deprecated/top-bar), [App Bridge Toast API](https://shopify.dev/docs/api/app-bridge-library/reference/toast), and [App Bridge Contextual Save Bar API](https://shopify.dev/docs/api/app-bridge-library/reference/contextual-save-bar) components.
 
 </Lede>
 

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

@@ -13,7 +13,7 @@ keywords:
 examples:
   - fileName: navigation-default.tsx
     title: Default
-    description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/frame).
+    description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/deprecated/frame).
   - fileName: navigation-with-multiple-secondary-navigations.tsx
     title: With multiple secondary navigations
     description: Use to present a secondary action, related to a section and to title the section.
@@ -55,7 +55,7 @@ status: Deprecated
 
 <Lede>
 
-The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application.
+The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/deprecated/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application.
 
 </Lede>
 

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

@@ -39,7 +39,7 @@ The contextual save bar tells merchants their options once they have made change
 
 ## Required components
 
-The contextual save bar component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component.
+The contextual save bar component must be wrapped in the [frame](https://polaris.shopify.com/components/internal-only/frame) component.
 
 ---
 
@@ -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.
 
 ---
 
@@ -97,6 +97,6 @@ Actions in the contextual save bar component should consist of a strong verb tha
 
 ## Related components
 
-- To wrap your entire application, [use the frame component](https://polaris.shopify.com/components/frame)
+- To wrap your entire application, [use the frame component](https://polaris.shopify.com/components/internal-only/frame)
 - To build the outer wrapper of a page, including page title and associated actions, [use the page component](https://polaris.shopify.com/components/layout-and-structure/page)
 - To wrap form elements and handle the submission of a form, [use the form component](https://polaris.shopify.com/components/form)

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/internal-only/top-bar), [toast](https://polaris.shopify.com/components/internal-only/toast), and [contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar) components.
 
 </Lede>
 
-<StatusBanner status={frontmatter.status}>
-  This component is no longer supported.
-</StatusBanner>
-
 <Examples />
 
 <Props componentName={frontmatter.title} />
@@ -48,18 +44,18 @@ 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)
-- [Contextual save bar](https://polaris.shopify.com/components/contextual-save-bar)
-- [Toast](https://polaris.shopify.com/components/deprecated/toast)
-- [Loading](https://polaris.shopify.com/components/loading)
+- [Top bar](https://polaris.shopify.com/components/internal-only/top-bar)
+- [Navigation](https://polaris.shopify.com/components/internal-only/navigation)
+- [Contextual save bar](https://polaris.shopify.com/components/internal-only/contextual-save-bar)
+- [Toast](https://polaris.shopify.com/components/internal-only/toast)
+- [Loading](https://polaris.shopify.com/components/internal-only/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 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 indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.
+- 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/internal-only/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/internal-only/top-bar) 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/internal-only/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/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/internal-only/loading) component.

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

@@ -24,19 +24,13 @@ 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} />
 
 ## Required components
 
-The loading component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component.
+The loading component must be wrapped in the [frame](https://polaris.shopify.com/components/internal-only/frame) component.
 
 ---
 

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

@@ -13,7 +13,7 @@ keywords:
 examples:
   - fileName: navigation-default.tsx
     title: Default
-    description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/frame).
+    description: Use to present a navigation menu in the [frame](https://polaris.shopify.com/components/internal-only/frame).
   - fileName: navigation-with-multiple-secondary-navigations.tsx
     title: With multiple secondary navigations
     description: Use to present a secondary action, related to a section and to title the section.
@@ -56,24 +56,17 @@ internalOnly: true
 
 <Lede>
 
-The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application.
+The navigation component is used to display the primary navigation in the sidebar of the [frame](https://polaris.shopify.com/components/internal-only/frame) of an application. Navigation includes a list of links that merchants use to move between sections of the application.
 
 </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} />
 
 ## Required components
 
-The navigation component must be passed to the [frame](https://polaris.shopify.com/components/frame) component. The mobile version of the navigation component appears in the [top bar](https://polaris.shopify.com/components/top-bar) component.
+The navigation component must be passed to the [frame](https://polaris.shopify.com/components/internal-only/frame) component. The mobile version of the navigation component appears in the [top bar](https://polaris.shopify.com/components/internal-only/top-bar) component.
 
 ---
 
@@ -244,10 +237,10 @@ Action allows a complementary icon-only action to render next to the section tit
 
 ## Related components
 
-- 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 indicate to merchants that a page is loading or an upload is processing use the [loading](https://polaris.shopify.com/components/loading) component.
+- To provide the structure for the navigation component, including the left sidebar and the top bar use the [frame](https://polaris.shopify.com/components/internal-only/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/internal-only/frame) component to reflect an application’s brand, use the [top bar](https://polaris.shopify.com/components/internal-only/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/internal-only/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/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/internal-only/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,18 +43,13 @@ 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} />
 
 ## Required components
 
-The toast component must be wrapped in the [frame](https://polaris.shopify.com/components/frame) component.
+The toast component must be wrapped in the [frame](https://polaris.shopify.com/components/internal-only/frame) component.
 
 ---
 
@@ -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