Fix token -> color nav selection issue

Shopify · Dec 9, 2023 · abcd88a · abcd88a
1 parent a08634e
commit abcd88a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 21 deletions.
diff --git a/polaris.shopify.com/content/tokens.mdx → polaris.shopify.com/content/tokens/index.mdx b/polaris.shopify.com/content/tokens.mdx → polaris.shopify.com/content/tokens/index.mdx
@@ -3,5 +3,11 @@ title: Tokens
 description: Tokens are variables that represent design decisions such as color, typography, and spacing, in a consistent and reusable way.
 order: 8
 icon: EyeDropperMinor
-url: /tokens/color
+showTOC: false
 ---
+
+# Tokens
+
+<Lede>{frontmatter.description}</Lede>
+
+<TokensNav />
diff --git a/polaris.shopify.com/pages/[...slug].tsx b/polaris.shopify.com/pages/[...slug].tsx
@@ -318,14 +318,7 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({
       async (end) => {
         // Flatten each group to an array of objects
         const tokenGroupObjects = mapValues(tokenGroups, (tokens) =>
-          Object.entries(tokens)
-            .map(([name, value]) => ({name, ...value}))
-            // Some tokens have custom sorting for display
-            .sort((token) =>
-              token.name.includes('ease') || token.name.includes('linear')
-                ? -1
-                : 1,
-            ),
+          Object.entries(tokens).map(([name, value]) => ({name, ...value})),
         );
         scope.tokens = tokenGroupObjects;
         end();

diff --git a/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx b/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx
@@ -1,20 +1,11 @@
+import type {Theme} from '@shopify/polaris-tokens';
+
 import styles from './TokensNav.module.scss';
 import Link from 'next/link';
 import {slugify} from '../../utils/various';
 
 interface Props {
-  selected?:
-    | 'border'
-    | 'breakpoints'
-    | 'color'
-    | 'font'
-    | 'height'
-    | 'motion'
-    | 'shadow'
-    | 'space'
-    | 'text'
-    | 'width'
-    | 'zIndex';
+  selected?: keyof Theme;
 }
 
 export type NavItem = {