From a08634e8db0e8939f07a7a27da415e4cd1c497a9 Mon Sep 17 00:00:00 2001 From: Jess Telford <jess.telford@shopify.com> Date: Fri, 8 Dec 2023 19:48:05 +1100 Subject: [PATCH] Render tokens pages in main nav using standard markdown renderer --- polaris.shopify.com/content/tokens/border.mdx | 19 ++ .../content/tokens/breakpoints.mdx | 68 ++++++++ polaris.shopify.com/content/tokens/color.mdx | 19 ++ polaris.shopify.com/content/tokens/font.mdx | 19 ++ polaris.shopify.com/content/tokens/height.mdx | 19 ++ polaris.shopify.com/content/tokens/motion.mdx | 31 ++++ polaris.shopify.com/content/tokens/shadow.mdx | 19 ++ polaris.shopify.com/content/tokens/space.mdx | 19 ++ polaris.shopify.com/content/tokens/text.mdx | 19 ++ polaris.shopify.com/content/tokens/width.mdx | 19 ++ .../content/tokens/z-index.mdx | 19 ++ polaris.shopify.com/package.json | 2 + polaris.shopify.com/pages/[...slug].tsx | 30 +++- polaris.shopify.com/pages/tokens/border.tsx | 16 -- .../pages/tokens/breakpoints.tsx | 94 ---------- polaris.shopify.com/pages/tokens/color.tsx | 16 -- polaris.shopify.com/pages/tokens/font.tsx | 16 -- polaris.shopify.com/pages/tokens/height.tsx | 16 -- polaris.shopify.com/pages/tokens/motion.tsx | 16 -- polaris.shopify.com/pages/tokens/shadow.tsx | 16 -- polaris.shopify.com/pages/tokens/space.tsx | 15 -- polaris.shopify.com/pages/tokens/text.tsx | 16 -- polaris.shopify.com/pages/tokens/width.tsx | 16 -- polaris.shopify.com/pages/tokens/z-index.tsx | 16 -- .../src/components/Markdown/Markdown.tsx | 4 + .../TokensNav.module.scss} | 22 --- .../src/components/TokensNav/TokensNav.tsx | 95 ++++++++++ .../src/components/TokensNav/index.ts | 3 + .../src/components/TokensPage/TokensPage.tsx | 164 ------------------ .../src/components/TokensPage/index.ts | 3 - yarn.lock | 12 ++ 31 files changed, 412 insertions(+), 446 deletions(-) create mode 100644 polaris.shopify.com/content/tokens/border.mdx create mode 100644 polaris.shopify.com/content/tokens/breakpoints.mdx create mode 100644 polaris.shopify.com/content/tokens/color.mdx create mode 100644 polaris.shopify.com/content/tokens/font.mdx create mode 100644 polaris.shopify.com/content/tokens/height.mdx create mode 100644 polaris.shopify.com/content/tokens/motion.mdx create mode 100644 polaris.shopify.com/content/tokens/shadow.mdx create mode 100644 polaris.shopify.com/content/tokens/space.mdx create mode 100644 polaris.shopify.com/content/tokens/text.mdx create mode 100644 polaris.shopify.com/content/tokens/width.mdx create mode 100644 polaris.shopify.com/content/tokens/z-index.mdx delete mode 100644 polaris.shopify.com/pages/tokens/border.tsx delete mode 100644 polaris.shopify.com/pages/tokens/breakpoints.tsx delete mode 100644 polaris.shopify.com/pages/tokens/color.tsx delete mode 100644 polaris.shopify.com/pages/tokens/font.tsx delete mode 100644 polaris.shopify.com/pages/tokens/height.tsx delete mode 100644 polaris.shopify.com/pages/tokens/motion.tsx delete mode 100644 polaris.shopify.com/pages/tokens/shadow.tsx delete mode 100644 polaris.shopify.com/pages/tokens/space.tsx delete mode 100644 polaris.shopify.com/pages/tokens/text.tsx delete mode 100644 polaris.shopify.com/pages/tokens/width.tsx delete mode 100644 polaris.shopify.com/pages/tokens/z-index.tsx rename polaris.shopify.com/src/components/{TokensPage/TokensPage.module.scss => TokensNav/TokensNav.module.scss} (78%) create mode 100644 polaris.shopify.com/src/components/TokensNav/TokensNav.tsx create mode 100644 polaris.shopify.com/src/components/TokensNav/index.ts delete mode 100644 polaris.shopify.com/src/components/TokensPage/TokensPage.tsx delete mode 100644 polaris.shopify.com/src/components/TokensPage/index.ts diff --git a/polaris.shopify.com/content/tokens/border.mdx b/polaris.shopify.com/content/tokens/border.mdx new file mode 100644 index 00000000000..a10ba6b3c57 --- /dev/null +++ b/polaris.shopify.com/content/tokens/border.mdx @@ -0,0 +1,19 @@ +--- +title: Border +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="border" /> + +<TokenList> + {tokens.border + .map((token) => ( + <TokenList.Item + key={token.name} + category="border" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/breakpoints.mdx b/polaris.shopify.com/content/tokens/breakpoints.mdx new file mode 100644 index 00000000000..9841321548c --- /dev/null +++ b/polaris.shopify.com/content/tokens/breakpoints.mdx @@ -0,0 +1,68 @@ +--- +title: Breakpoints +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="breakpoints" /> + +<TokenList> + {tokens.breakpoints + .map((token) => ( + <TokenList.Item + key={token.name} + category="breakpoints" + token={token} + /> + ))} +</TokenList> + +<p id="usage" role="heading" aria-level="2">Usage in Media Queries</p> + +### Sass variables + +A transform takes the above values and generates Sass variables (which can be +used in media conditions) for each breakpoint in \`up\`, \`down\`, and \`only\` directions. +While we currently support \`down\` media conditions, we encourage developers to +adopt a mobile first strategy and use \`up\` wherever possible. + +Example of generated output for \`breakpoints-md\`: +```scss +@media #{$p-breakpoints-md-up} {/*...*/} +@media #{$p-breakpoints-md-down} {/*...*/} +@media #{$p-breakpoints-md-only} {/*...*/} +``` + +To use these Sass variables you will need to import the \`media-queries.scss\` +file from \`@shopify/polaris-tokens\` in your project: + +```scss +@import 'path/to/node_modules/@shopify/polaris-tokens/dist/scss/media-queries'; +``` + +### Media query variables + +A collection of all Sass variables for applying responsive styles at a given breakpoint alias. + +```scss +$p-breakpoints-xs-up: '(min-width: 0em)'; +$p-breakpoints-xs-down: '(max-width: -0.0025em)'; +$p-breakpoints-xs-only: '(min-width: 0em) and (max-width: 30.6225em)'; + +$p-breakpoints-sm-up: '(min-width: 30.625em)'; +$p-breakpoints-sm-down: '(max-width: 30.6225em)'; +$p-breakpoints-sm-only: '(min-width: 30.625em) and (max-width: 47.9975em)'; + +$p-breakpoints-md-up: '(min-width: 48em)'; +$p-breakpoints-md-down: '(max-width: 47.9975em)'; +$p-breakpoints-md-only: '(min-width: 48em) and (max-width: 64.9975em)'; + +$p-breakpoints-lg-up: '(min-width: 65em)'; +$p-breakpoints-lg-down: '(max-width: 64.9975em)'; +$p-breakpoints-lg-only: '(min-width: 65em) and (max-width: 89.9975em)'; + +$p-breakpoints-xl-up: '(min-width: 90em)'; +$p-breakpoints-xl-down: '(max-width: 89.9975em)'; +$p-breakpoints-xl-only: '(min-width: 90em)'; +``` diff --git a/polaris.shopify.com/content/tokens/color.mdx b/polaris.shopify.com/content/tokens/color.mdx new file mode 100644 index 00000000000..7da89ec1f03 --- /dev/null +++ b/polaris.shopify.com/content/tokens/color.mdx @@ -0,0 +1,19 @@ +--- +title: Color +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="color" /> + +<TokenList> + {tokens.color + .map((token) => ( + <TokenList.Item + key={token.name} + category="color" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/font.mdx b/polaris.shopify.com/content/tokens/font.mdx new file mode 100644 index 00000000000..a16ff7af18c --- /dev/null +++ b/polaris.shopify.com/content/tokens/font.mdx @@ -0,0 +1,19 @@ +--- +title: Font +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="font" /> + +<TokenList> + {tokens.font + .map((token) => ( + <TokenList.Item + key={token.name} + category="font" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/height.mdx b/polaris.shopify.com/content/tokens/height.mdx new file mode 100644 index 00000000000..04a7c22f125 --- /dev/null +++ b/polaris.shopify.com/content/tokens/height.mdx @@ -0,0 +1,19 @@ +--- +title: Height +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="height" /> + +<TokenList> + {tokens.height + .map((token) => ( + <TokenList.Item + key={token.name} + category="height" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/motion.mdx b/polaris.shopify.com/content/tokens/motion.mdx new file mode 100644 index 00000000000..a2fa158983d --- /dev/null +++ b/polaris.shopify.com/content/tokens/motion.mdx @@ -0,0 +1,31 @@ +--- +title: Motion +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="motion" /> + +<TokenList> + {tokens.motion + .sort((token) => + token.name.includes('ease') || token.name.includes('linear') + ? -1 + : 1, + ) + .map((token) => ( + <TokenList.Item + key={token.name} + category="motion" + token={token} + /> + ))} +</TokenList> + +<style> + {tokens.motion + .filter(({name}) => name.includes('keyframes')) + .map(({name, value}) => `@keyframes ${name} ${value}`) + .join('\n')} +</style> diff --git a/polaris.shopify.com/content/tokens/shadow.mdx b/polaris.shopify.com/content/tokens/shadow.mdx new file mode 100644 index 00000000000..2b273abcda6 --- /dev/null +++ b/polaris.shopify.com/content/tokens/shadow.mdx @@ -0,0 +1,19 @@ +--- +title: Shadow +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="shadow" /> + +<TokenList> + {tokens.shadow + .map((token) => ( + <TokenList.Item + key={token.name} + category="shadow" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/space.mdx b/polaris.shopify.com/content/tokens/space.mdx new file mode 100644 index 00000000000..c94cdebb015 --- /dev/null +++ b/polaris.shopify.com/content/tokens/space.mdx @@ -0,0 +1,19 @@ +--- +title: Space +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="space" /> + +<TokenList> + {tokens.space + .map((token) => ( + <TokenList.Item + key={token.name} + category="space" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/text.mdx b/polaris.shopify.com/content/tokens/text.mdx new file mode 100644 index 00000000000..2d9ae719e1b --- /dev/null +++ b/polaris.shopify.com/content/tokens/text.mdx @@ -0,0 +1,19 @@ +--- +title: Text +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="text" /> + +<TokenList> + {tokens.text + .map((token) => ( + <TokenList.Item + key={token.name} + category="text" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/width.mdx b/polaris.shopify.com/content/tokens/width.mdx new file mode 100644 index 00000000000..8d8b39b6358 --- /dev/null +++ b/polaris.shopify.com/content/tokens/width.mdx @@ -0,0 +1,19 @@ +--- +title: Width +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="width" /> + +<TokenList> + {tokens.width + .map((token) => ( + <TokenList.Item + key={token.name} + category="width" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/content/tokens/z-index.mdx b/polaris.shopify.com/content/tokens/z-index.mdx new file mode 100644 index 00000000000..3611d9770ba --- /dev/null +++ b/polaris.shopify.com/content/tokens/z-index.mdx @@ -0,0 +1,19 @@ +--- +title: Z-Index +showTOC: false +--- + +# Tokens → {frontmatter.title} + +<TokensNav selected="z-index" /> + +<TokenList> + {tokens['zIndex'] + .map((token) => ( + <TokenList.Item + key={token.name} + category="z-index" + token={token} + /> + ))} +</TokenList> diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json index ea4610fefb1..7b0d33004a0 100644 --- a/polaris.shopify.com/package.json +++ b/polaris.shopify.com/package.json @@ -40,6 +40,7 @@ "@juggle/resize-observer": "^3.4.0", "lodash.get": "^4.4.2", "lodash.throttle": "^4.1.1", + "lodash.mapvalues": "^4.6.0", "nanoid": "^4.0.2", "next": "^13.0.6", "next-mdx-remote": "^4.4.1", @@ -67,6 +68,7 @@ "@types/js-yaml": "^4.0.5", "@types/lodash.get": "^4.4.7", "@types/lodash.throttle": "^4.1.7", + "@types/lodash.mapvalues": "^4.6.9", "@types/marked": "^4.0.3", "@types/prismjs": "^1.26.0", "@types/react": "^18.2.0", diff --git a/polaris.shopify.com/pages/[...slug].tsx b/polaris.shopify.com/pages/[...slug].tsx index 2f78e796f8c..5432da58704 100644 --- a/polaris.shopify.com/pages/[...slug].tsx +++ b/polaris.shopify.com/pages/[...slug].tsx @@ -6,6 +6,8 @@ import type { import Link from 'next/link'; import fs from 'fs'; import globby from 'globby'; +import {metaThemeDefault as tokenGroups} from '@shopify/polaris-tokens'; +import mapValues from 'lodash.mapvalues'; import {serializeMdx} from '../src/components/Markdown/serialize'; import Markdown from '../src/components/Markdown'; @@ -98,7 +100,7 @@ const CatchAllTemplate = ({ <Page editPageLinkPath={editPageLinkPath} isContentPage={isContentPage} - showTOC={showTOC || isContentPage} + showTOC={showTOC} collapsibleTOC={collapsibleTOC} > <PageMeta title={title} description={seoDescription} noIndex={noIndex} /> @@ -310,6 +312,25 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({ end(); }, ], + [ + // token pages need token info + () => !pathIsDirectory && params.slug[0] === 'tokens', + 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, + ), + ); + scope.tokens = tokenGroupObjects; + end(); + }, + ], // index pages need to know the files in their folder [ () => pathIsDirectory, @@ -330,12 +351,14 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({ ? mdx.frontmatter.seoDescription : (data.firstParagraph as string) ?? null; + const isContentPage = !pathIsDirectory; + const props: Props = { mdx, seoDescription, editPageLinkPath, - isContentPage: !pathIsDirectory, - showTOC: mdx.frontmatter.showTOC || false, + isContentPage, + showTOC: mdx.frontmatter.showTOC ?? isContentPage, collapsibleTOC: mdx.frontmatter.collapsibleTOC || false, }; @@ -344,7 +367,6 @@ export const getStaticProps: GetStaticProps<Props, {slug: string[]}> = async ({ const catchAllTemplateExcludeList = [ '/icons', - '/tokens', '/sandbox', '/tools/stylelint-polaris/rules', ]; diff --git a/polaris.shopify.com/pages/tokens/border.tsx b/polaris.shopify.com/pages/tokens/border.tsx deleted file mode 100644 index 68b580aa24c..00000000000 --- a/polaris.shopify.com/pages/tokens/border.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Border tokens" /> - - <TokensPage tokenGroup={'border'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/breakpoints.tsx b/polaris.shopify.com/pages/tokens/breakpoints.tsx deleted file mode 100644 index c95f5d65aa9..00000000000 --- a/polaris.shopify.com/pages/tokens/breakpoints.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import type {GetStaticProps, InferGetStaticPropsType} from 'next'; -import React from 'react'; -import endent from 'endent'; -import {VFile} from 'vfile'; -import {serializeMdx} from '../../src/components/Markdown/serialize'; -import type {SerializedMdx} from '../../src/types'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; -import Container from '../../src/components/Container'; -import Longform from '../../src/components/Longform'; -import Markdown from '../../src/components/Markdown'; - -interface Props { - mdx: SerializedMdx; -} - -export const getStaticProps: GetStaticProps<Props> = async () => { - const file = new VFile({ - value: endent` - <p id="usage" role="heading" aria-level="2">Usage in Media Queries</p> - - ### Sass variables - - A transform takes the above values and generates Sass variables (which can be - used in media conditions) for each breakpoint in \`up\`, \`down\`, and \`only\` directions. - While we currently support \`down\` media conditions, we encourage developers to - adopt a mobile first strategy and use \`up\` wherever possible. - - Example of generated output for \`breakpoints-md\`: - \`\`\`scss - @media #{$p-breakpoints-md-up} {/*...*/} - @media #{$p-breakpoints-md-down} {/*...*/} - @media #{$p-breakpoints-md-only} {/*...*/} - \`\`\` - - To use these Sass variables you will need to import the \`media-queries.scss\` - file from \`@shopify/polaris-tokens\` in your project: - - \`\`\`scss - @import 'path/to/node_modules/@shopify/polaris-tokens/dist/scss/media-queries'; - \`\`\` - - ### Media query variables - - A collection of all Sass variables for applying responsive styles at a given breakpoint alias. - - \`\`\`scss - $p-breakpoints-xs-up: '(min-width: 0em)'; - $p-breakpoints-xs-down: '(max-width: -0.0025em)'; - $p-breakpoints-xs-only: '(min-width: 0em) and (max-width: 30.6225em)'; - - $p-breakpoints-sm-up: '(min-width: 30.625em)'; - $p-breakpoints-sm-down: '(max-width: 30.6225em)'; - $p-breakpoints-sm-only: '(min-width: 30.625em) and (max-width: 47.9975em)'; - - $p-breakpoints-md-up: '(min-width: 48em)'; - $p-breakpoints-md-down: '(max-width: 47.9975em)'; - $p-breakpoints-md-only: '(min-width: 48em) and (max-width: 64.9975em)'; - - $p-breakpoints-lg-up: '(min-width: 65em)'; - $p-breakpoints-lg-down: '(max-width: 64.9975em)'; - $p-breakpoints-lg-only: '(min-width: 65em) and (max-width: 89.9975em)'; - - $p-breakpoints-xl-up: '(min-width: 90em)'; - $p-breakpoints-xl-down: '(max-width: 89.9975em)'; - $p-breakpoints-xl-only: '(min-width: 90em)'; - \`\`\` - `, - path: '/tokens/breakpoints', - }); - - const [mdx] = await serializeMdx(file); - return {props: {mdx}}; -}; - -const Components = ({mdx}: InferGetStaticPropsType<typeof getStaticProps>) => { - return ( - <> - <PageMeta title="Breakpoints" /> - - <TokensPage tokenGroup={'breakpoints'} /> - - <Container> - <Longform> - <Markdown {...mdx} /> - </Longform> - <br /> - <br /> - </Container> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/color.tsx b/polaris.shopify.com/pages/tokens/color.tsx deleted file mode 100644 index 40d3789f732..00000000000 --- a/polaris.shopify.com/pages/tokens/color.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Color tokens" /> - - <TokensPage tokenGroup={'color'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/font.tsx b/polaris.shopify.com/pages/tokens/font.tsx deleted file mode 100644 index 6ffed38ac99..00000000000 --- a/polaris.shopify.com/pages/tokens/font.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Font tokens" /> - - <TokensPage tokenGroup={'font'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/height.tsx b/polaris.shopify.com/pages/tokens/height.tsx deleted file mode 100644 index 186fe8ece09..00000000000 --- a/polaris.shopify.com/pages/tokens/height.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Height tokens" /> - - <TokensPage tokenGroup={'height'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/motion.tsx b/polaris.shopify.com/pages/tokens/motion.tsx deleted file mode 100644 index d027325dd49..00000000000 --- a/polaris.shopify.com/pages/tokens/motion.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Motion tokens" /> - - <TokensPage tokenGroup={'motion'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/shadow.tsx b/polaris.shopify.com/pages/tokens/shadow.tsx deleted file mode 100644 index ed3a9564fb6..00000000000 --- a/polaris.shopify.com/pages/tokens/shadow.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Shadow tokens" /> - - <TokensPage tokenGroup={'shadow'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/space.tsx b/polaris.shopify.com/pages/tokens/space.tsx deleted file mode 100644 index b2170cd05f0..00000000000 --- a/polaris.shopify.com/pages/tokens/space.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Space tokens" /> - <TokensPage tokenGroup={'space'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/text.tsx b/polaris.shopify.com/pages/tokens/text.tsx deleted file mode 100644 index ea614d99ab5..00000000000 --- a/polaris.shopify.com/pages/tokens/text.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Text tokens" /> - - <TokensPage tokenGroup={'text'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/width.tsx b/polaris.shopify.com/pages/tokens/width.tsx deleted file mode 100644 index 52a31fdea07..00000000000 --- a/polaris.shopify.com/pages/tokens/width.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Width tokens" /> - - <TokensPage tokenGroup={'width'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/pages/tokens/z-index.tsx b/polaris.shopify.com/pages/tokens/z-index.tsx deleted file mode 100644 index 769741c7126..00000000000 --- a/polaris.shopify.com/pages/tokens/z-index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type {NextPage} from 'next'; -import React from 'react'; -import TokensPage from '../../src/components/TokensPage'; -import PageMeta from '../../src/components/PageMeta'; - -const Components: NextPage = () => { - return ( - <> - <PageMeta title="Z index tokens" /> - - <TokensPage tokenGroup={'zIndex'} /> - </> - ); -}; - -export default Components; diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.tsx b/polaris.shopify.com/src/components/Markdown/Markdown.tsx index 5ad089df1d1..90251a17eaa 100644 --- a/polaris.shopify.com/src/components/Markdown/Markdown.tsx +++ b/polaris.shopify.com/src/components/Markdown/Markdown.tsx @@ -41,6 +41,8 @@ import { Large, ExtraLarge, } from './components/Layout'; +import TokenList from '../../components/TokenList'; +import TokensNav from '../../components/TokensNav'; const CodeVisibilityContext = createContext< [ @@ -263,6 +265,8 @@ function Markdown< Medium, Large, ExtraLarge, + TokenList, + TokensNav, Tip: ({children}) => ( <div className="tip-banner"> <div className="tip-banner__header"> diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss b/polaris.shopify.com/src/components/TokensNav/TokensNav.module.scss similarity index 78% rename from polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss rename to polaris.shopify.com/src/components/TokensNav/TokensNav.module.scss index 64b9ac7337a..e29c2d8e446 100644 --- a/polaris.shopify.com/src/components/TokensPage/TokensPage.module.scss +++ b/polaris.shopify.com/src/components/TokensNav/TokensNav.module.scss @@ -2,28 +2,6 @@ @import '../../styles/mixins.scss'; @import '../../styles/variables.scss'; -.TokensPage { - margin-top: var(--header-margin); - margin-bottom: var(--header-margin); -} - -.Banner { - display: flex; - flex-direction: column; - gap: 1.5rem; - - h1 { - @include heading-1; - } - - p { - max-width: 43rem; - font-size: var(--font-size-700); - letter-spacing: var(--letter-spacing-300); - color: var(--text-strong); - } -} - .TokensNav { margin: 1.5rem 0 3.5rem; diff --git a/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx b/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx new file mode 100644 index 00000000000..4d799bf48fa --- /dev/null +++ b/polaris.shopify.com/src/components/TokensNav/TokensNav.tsx @@ -0,0 +1,95 @@ +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'; +} + +export type NavItem = { + title: string; + url?: string; +}; + +const navItems: NavItem[] = [ + { + title: 'Border', + url: `/tokens/border`, + }, + { + title: 'Breakpoints', + url: `/tokens/breakpoints`, + }, + { + title: 'Color', + url: `/tokens/color`, + }, + { + title: 'Font', + url: `/tokens/font`, + }, + { + title: 'Height', + url: `/tokens/height`, + }, + { + title: 'Motion', + url: `/tokens/motion`, + }, + { + title: 'Shadow', + url: `/tokens/shadow`, + }, + { + title: 'Space', + url: `/tokens/space`, + }, + { + title: 'Text', + url: `/tokens/text`, + }, + { + title: 'Width', + url: `/tokens/width`, + }, + { + title: 'Z-Index', + url: `/tokens/z-index`, + }, +]; + +function TokensNav({selected}: Props) { + return ( + <nav className={styles.TokensNav}> + <ul> + {navItems.map((item) => { + if (!item.url) return null; + const isCurrent = selected === slugify(item.title); + return ( + <li key={item.title}> + <Link + href={item.url} + aria-current={isCurrent ? 'page' : undefined} + > + {item.title} + </Link> + </li> + ); + })} + </ul> + </nav> + ); +} + +export default TokensNav; diff --git a/polaris.shopify.com/src/components/TokensNav/index.ts b/polaris.shopify.com/src/components/TokensNav/index.ts new file mode 100644 index 00000000000..5d069434754 --- /dev/null +++ b/polaris.shopify.com/src/components/TokensNav/index.ts @@ -0,0 +1,3 @@ +import TokensNav from './TokensNav'; + +export default TokensNav; diff --git a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx b/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx deleted file mode 100644 index e10b014dfcb..00000000000 --- a/polaris.shopify.com/src/components/TokensPage/TokensPage.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import styles from './TokensPage.module.scss'; -import {MetaTokenGroupShape, metaThemeDefault} from '@shopify/polaris-tokens'; -import {Status, TokenPropertiesWithName} from '../../types'; -import TokenList from '../TokenList'; -import Link from 'next/link'; -import {slugify} from '../../utils/various'; -import {useRouter} from 'next/router'; -import Page from '../Page'; - -interface Props { - tokenGroup: - | 'border' - | 'breakpoints' - | 'color' - | 'font' - | 'height' - | 'motion' - | 'shadow' - | 'space' - | 'text' - | 'width' - | 'zIndex'; -} - -export type NavItem = { - title: string; - url?: string; - status?: Status; - children?: NavItem[]; -}; - -const navItems: NavItem[] = [ - { - title: 'Border', - url: `/tokens/border`, - }, - { - title: 'Breakpoints', - url: `/tokens/breakpoints`, - }, - { - title: 'Color', - url: `/tokens/color`, - }, - { - title: 'Font', - url: `/tokens/font`, - }, - { - title: 'Height', - url: `/tokens/height`, - }, - { - title: 'Motion', - url: `/tokens/motion`, - }, - { - title: 'Shadow', - url: `/tokens/shadow`, - }, - { - title: 'Space', - url: `/tokens/space`, - }, - { - title: 'Text', - url: `/tokens/text`, - }, - { - title: 'Width', - url: `/tokens/width`, - }, - { - title: 'Z-Index', - url: `/tokens/z-index`, - }, -]; - -function tokensToFilteredArray( - filter: string, - tokenGroup: MetaTokenGroupShape, -): TokenPropertiesWithName[] { - return Object.entries(tokenGroup) - .filter(([name]) => { - return name.toLowerCase().includes(filter.toLowerCase()); - }) - .map(([name, value]) => { - return {name, ...value}; - }); -} - -function TokensPage({tokenGroup}: Props) { - const filter = ''; - const router = useRouter(); - - const tokens = { - border: tokensToFilteredArray(filter, metaThemeDefault.border), - breakpoints: tokensToFilteredArray(filter, metaThemeDefault.breakpoints), - color: tokensToFilteredArray(filter, metaThemeDefault.color), - font: tokensToFilteredArray(filter, metaThemeDefault.font), - height: tokensToFilteredArray(filter, metaThemeDefault.height), - motion: tokensToFilteredArray(filter, metaThemeDefault.motion), - shadow: tokensToFilteredArray(filter, metaThemeDefault.shadow), - space: tokensToFilteredArray(filter, metaThemeDefault.space), - text: tokensToFilteredArray(filter, metaThemeDefault.text), - width: tokensToFilteredArray(filter, metaThemeDefault.width), - zIndex: tokensToFilteredArray(filter, metaThemeDefault.zIndex), - }; - - const keyframeStyles = tokens['motion'] - .filter(({name}) => name.includes('keyframes')) - .map(({name, value}) => `@keyframes ${name} ${value}`) - .join('\n'); - - return ( - <Page> - <div className={styles.TokensPage}> - <div className={styles.Banner}> - <h1>Tokens</h1> - </div> - - <div className={styles.Tokens}> - <nav className={styles.TokensNav}> - <ul> - {navItems.map((item) => { - if (!item.url) return null; - const isCurrent = router.asPath.endsWith(slugify(item.title)); - return ( - <li key={item.title}> - <Link - href={item.url} - aria-current={isCurrent ? 'page' : undefined} - > - {item.title} - </Link> - </li> - ); - })} - </ul> - </nav> - <TokenList> - {tokens[tokenGroup] - .sort((token) => - token.name.includes('ease') || token.name.includes('linear') - ? -1 - : 1, - ) - .map((token) => ( - <TokenList.Item - key={token.name} - category={tokenGroup} - token={token} - /> - ))} - </TokenList> - </div> - - <style jsx>{keyframeStyles}</style> - </div> - </Page> - ); -} - -export default TokensPage; diff --git a/polaris.shopify.com/src/components/TokensPage/index.ts b/polaris.shopify.com/src/components/TokensPage/index.ts deleted file mode 100644 index e3d55d04cba..00000000000 --- a/polaris.shopify.com/src/components/TokensPage/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import TokensPage from './TokensPage'; - -export default TokensPage; diff --git a/yarn.lock b/yarn.lock index 6bba78f243b..d042e517616 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4046,6 +4046,13 @@ dependencies: "@types/lodash" "*" +"@types/lodash.mapvalues@^4.6.9": + version "4.6.9" + resolved "https://registry.yarnpkg.com/@types/lodash.mapvalues/-/lodash.mapvalues-4.6.9.tgz#1edb4b1d299db332166b474221b06058b34030a7" + integrity sha512-NyAIgUrI+nnr3VoJbiAlUfqBT2M/65mOCm+LerHgYE7lEyxXUAalZiMIL37GBnfg0QOMMBEPW4osdiMjsoEA4g== + dependencies: + "@types/lodash" "*" + "@types/lodash.throttle@^4.1.7": version "4.1.7" resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz#4ef379eb4f778068022310ef166625f420b6ba58" @@ -13645,6 +13652,11 @@ lodash.isplainobject@^4.0.6: resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA== +lodash.mapvalues@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c" + integrity sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ== + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"