From 5dfba0e97ff52af2f3d9a56c9d9dcf2ca760b5e7 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Mon, 24 Apr 2023 14:13:26 +1000
Subject: [PATCH] Merge /patterns-legacy index page into /patterns to ease
 discovery

Fixes #8949
---
 .changeset/tidy-papayas-exist.md              |  5 +++
 polaris-react/playground/KitchenSink.tsx      |  2 +-
 .../content/patterns-legacy/index.md          |  6 ---
 .../content/patterns-legacy/loading.md        |  1 +
 .../content/patterns-legacy/new-badge.md      |  1 +
 .../content/patterns-legacy/pickers.md        |  1 +
 .../content/patterns-legacy/text-fields.md    |  1 +
 polaris.shopify.com/next.config.js            |  5 +++
 polaris.shopify.com/pages/patterns-legacy.tsx | 13 -------
 .../src/components/PatternsPage/index.tsx     | 38 +++++++++++++++++--
 polaris.shopify.com/src/utils/various.ts      |  9 +++++
 11 files changed, 59 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/tidy-papayas-exist.md
 delete mode 100644 polaris.shopify.com/content/patterns-legacy/index.md
 delete mode 100644 polaris.shopify.com/pages/patterns-legacy.tsx

diff --git a/.changeset/tidy-papayas-exist.md b/.changeset/tidy-papayas-exist.md
new file mode 100644
index 00000000000..750b556eff8
--- /dev/null
+++ b/.changeset/tidy-papayas-exist.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Merge /patterns-legacy index page into /patterns to ease discovery (includes a redirect so old links continue to work)
diff --git a/polaris-react/playground/KitchenSink.tsx b/polaris-react/playground/KitchenSink.tsx
index eeb53f4afaa..6410d1ae5e9 100644
--- a/polaris-react/playground/KitchenSink.tsx
+++ b/polaris-react/playground/KitchenSink.tsx
@@ -8,7 +8,7 @@ interface Stories {
 
 const stories: Stories = {};
 const req = require.context('../src/components', true, /.stories.tsx$/);
-req.keys().forEach((filePath) =>
+req.keys().forEach((filePath: string) =>
   req(filePath).__namedExportsOrder.forEach((namedExport: string) => {
     const componentName = `${filePath.split('/')[1]}:${namedExport}`;
     stories[componentName] = req(filePath)[namedExport];
diff --git a/polaris.shopify.com/content/patterns-legacy/index.md b/polaris.shopify.com/content/patterns-legacy/index.md
deleted file mode 100644
index f8023ffdf26..00000000000
--- a/polaris.shopify.com/content/patterns-legacy/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Patterns (legacy)
-description: Design patterns help ensure consistent behavior across the Shopify admin.
-noIndex: true
-hideFromNav: true
----
diff --git a/polaris.shopify.com/content/patterns-legacy/loading.md b/polaris.shopify.com/content/patterns-legacy/loading.md
index 86aa0a3de50..da0085d843a 100644
--- a/polaris.shopify.com/content/patterns-legacy/loading.md
+++ b/polaris.shopify.com/content/patterns-legacy/loading.md
@@ -3,6 +3,7 @@ title: Loading
 description: Navigating the Shopify admin should be fast, meaningful, and focused. Intentional loading states deliver a continuous flow for merchants.
 icon: RefreshMajor
 noIndex: true
+url: /patterns-legacy/loading
 keywords:
   - page loading
   - loading
diff --git a/polaris.shopify.com/content/patterns-legacy/new-badge.md b/polaris.shopify.com/content/patterns-legacy/new-badge.md
index 453a905a2cf..fae741da2d7 100644
--- a/polaris.shopify.com/content/patterns-legacy/new-badge.md
+++ b/polaris.shopify.com/content/patterns-legacy/new-badge.md
@@ -3,6 +3,7 @@ title: New badge
 description: The New badge can be used to inform merchants about the release of a feature that creates new value. It should be used sparingly and for a short time frame.
 icon: StarFilledMinor
 noIndex: true
+url: /patterns-legacy/new-badge
 keywords:
   - new badge
   - new features
diff --git a/polaris.shopify.com/content/patterns-legacy/pickers.md b/polaris.shopify.com/content/patterns-legacy/pickers.md
index 2f906d4044c..f32bb64cab6 100644
--- a/polaris.shopify.com/content/patterns-legacy/pickers.md
+++ b/polaris.shopify.com/content/patterns-legacy/pickers.md
@@ -3,6 +3,7 @@ title: Pickers
 description: Picker experiences help merchants browse, find, and select from multiple options. Use them for selecting locations, customer segments, and more.
 icon: LocationMajor
 noIndex: true
+url: /patterns-legacy/pickers
 keywords:
   - customer segments
   - locations
diff --git a/polaris.shopify.com/content/patterns-legacy/text-fields.md b/polaris.shopify.com/content/patterns-legacy/text-fields.md
index 3a56372ea56..09d6e92456a 100644
--- a/polaris.shopify.com/content/patterns-legacy/text-fields.md
+++ b/polaris.shopify.com/content/patterns-legacy/text-fields.md
@@ -3,6 +3,7 @@ title: Text fields
 description: Text fields combine the field label (the title) and the input area. Inputs can vary from typed text to URLs to date pickers.
 icon: FormsMajor
 noIndex: true
+url: /patterns-legacy/text-fields
 keywords:
   - text fields
   - search
diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js
index ad09eec05de..b151fffa52d 100644
--- a/polaris.shopify.com/next.config.js
+++ b/polaris.shopify.com/next.config.js
@@ -134,6 +134,11 @@ const nextConfig = {
         destination: '/patterns-legacy/text-fields',
         permanent: true,
       },
+      {
+        source: '/patterns-legacy',
+        destination: '/patterns#legacy',
+        permanent: true,
+      },
       ...actions,
       ...deprecated,
       ...feedbackIndicators,
diff --git a/polaris.shopify.com/pages/patterns-legacy.tsx b/polaris.shopify.com/pages/patterns-legacy.tsx
deleted file mode 100644
index ece5ab2ea6a..00000000000
--- a/polaris.shopify.com/pages/patterns-legacy.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import FoundationsPage from '../src/components/FoundationsPage';
-import {FoundationsProps} from '../src/components/FoundationsPage/FoundationsPage';
-import {getStaticPropsForFoundations} from '../src/utils/foundations';
-
-const SECTION = 'patterns-legacy';
-
-const FoundationsCategory = (props: FoundationsProps) => (
-  <FoundationsPage {...props} />
-);
-
-export const getStaticProps = getStaticPropsForFoundations(SECTION);
-
-export default FoundationsCategory;
diff --git a/polaris.shopify.com/src/components/PatternsPage/index.tsx b/polaris.shopify.com/src/components/PatternsPage/index.tsx
index bc2081018a5..d383e76d4a4 100644
--- a/polaris.shopify.com/src/components/PatternsPage/index.tsx
+++ b/polaris.shopify.com/src/components/PatternsPage/index.tsx
@@ -3,12 +3,14 @@ import PageMeta from '../PageMeta';
 import Longform from '../Longform';
 import {Grid, GridItem} from '../Grid';
 import {Stack} from '../Stack';
+import {Heading} from '../Heading';
 import {Status} from '../../types';
 import styles from './PatternsPage.module.scss';
 import Preview from '../ThumbnailPreview';
-import {patterns} from '../../utils/various';
+import {patterns, legacyPatterns} from '../../utils/various';
 import UpdateBanner from '../UpdateBanner';
 import {FoundationsProps} from '../FoundationsPage/FoundationsPage';
+import FoundationsThumbnail from '../FoundationsThumbnail';
 
 export const PatternsPage = ({title, description}: FoundationsProps) => (
   <>
@@ -18,11 +20,13 @@ export const PatternsPage = ({title, description}: FoundationsProps) => (
       <Stack gap={'8'}>
         <div>
           <Longform>
-            <h1 className={styles.Header}>Patterns </h1>
+            <Heading as="h1" className={styles.Header}>
+              Patterns
+            </Heading>
             <p>{description}</p>
           </Longform>
           <UpdateBanner
-            message={`Our pattern documentation is evolving. [Join our discussions](https://github.com/Shopify/polaris/discussions/categories/pattern-documentation) to make it better. The [legacy patterns documentation](/patterns-legacy) can still be used.`}
+            message={`Our pattern documentation is evolving. [Join our discussions](https://github.com/Shopify/polaris/discussions/categories/pattern-documentation) to make it better. The [legacy patterns documentation](#legacy) can still be used.`}
             className={styles.UpdateBanner}
           />
         </div>
@@ -42,6 +46,34 @@ export const PatternsPage = ({title, description}: FoundationsProps) => (
               />
             ))}
         </Grid>
+        <Longform>
+          <Heading as="h1" id="legacy" className={styles.Header}>
+            Legacy Patterns
+          </Heading>
+          <p>
+            Previously documented patterns are considered legacy and should not
+            be used for new projects. Use at your own risk.
+          </p>
+        </Longform>
+        <Grid>
+          {Object.values(legacyPatterns)
+            .filter(({frontMatter: {draft}}) => !draft)
+            .map(({frontMatter: pattern}, index) => (
+              <GridItem
+                key={index}
+                title={pattern.title}
+                description={pattern.description ?? ''}
+                url={pattern.url ?? ''}
+                renderPreview={() => (
+                  <FoundationsThumbnail
+                    icon={pattern.icon!}
+                    category={pattern.title.toLowerCase()}
+                  />
+                )}
+                status={pattern.status as Status}
+              />
+            ))}
+        </Grid>
       </Stack>
     </Page>
   </>
diff --git a/polaris.shopify.com/src/utils/various.ts b/polaris.shopify.com/src/utils/various.ts
index cb1bb11d5c2..7b3f18be018 100644
--- a/polaris.shopify.com/src/utils/various.ts
+++ b/polaris.shopify.com/src/utils/various.ts
@@ -22,6 +22,15 @@ export const patterns: PatternJSON = Object.keys(pages)
     return memo;
   }, {} as PatternJSON);
 
+export const legacyPatterns: PatternJSON = Object.keys(pages)
+  .filter((slug) => slug.startsWith('patterns-legacy/'))
+  .sort((a, b) => a.localeCompare(b))
+  .reduce((memo, key) => {
+    // @ts-expect-error Yes it is compatible Typescript. Shhhh.
+    memo[key] = pages[key];
+    return memo;
+  }, {} as PatternJSON);
+
 export const getComponentCategories = (): string[] => {
   const componentCategories: string[] = [];