diff --git a/content/accessibility/accessibility-at-github.mdx b/content/guides/accessibility/accessibility-at-github.mdx similarity index 100% rename from content/accessibility/accessibility-at-github.mdx rename to content/guides/accessibility/accessibility-at-github.mdx diff --git a/content/accessibility/alternative-text-for-images.mdx b/content/guides/accessibility/alternative-text-for-images.mdx similarity index 100% rename from content/accessibility/alternative-text-for-images.mdx rename to content/guides/accessibility/alternative-text-for-images.mdx diff --git a/content/accessibility/announcements.mdx b/content/guides/accessibility/announcements.mdx similarity index 100% rename from content/accessibility/announcements.mdx rename to content/guides/accessibility/announcements.mdx diff --git a/content/accessibility/descriptive-buttons.mdx b/content/guides/accessibility/descriptive-buttons.mdx similarity index 100% rename from content/accessibility/descriptive-buttons.mdx rename to content/guides/accessibility/descriptive-buttons.mdx diff --git a/content/accessibility/focus-management.mdx b/content/guides/accessibility/focus-management.mdx similarity index 100% rename from content/accessibility/focus-management.mdx rename to content/guides/accessibility/focus-management.mdx diff --git a/content/accessibility/guidelines.mdx b/content/guides/accessibility/guidelines.mdx similarity index 100% rename from content/accessibility/guidelines.mdx rename to content/guides/accessibility/guidelines.mdx diff --git a/content/accessibility/headings.mdx b/content/guides/accessibility/headings.mdx similarity index 100% rename from content/accessibility/headings.mdx rename to content/guides/accessibility/headings.mdx diff --git a/content/accessibility/index.mdx b/content/guides/accessibility/index.mdx similarity index 75% rename from content/accessibility/index.mdx rename to content/guides/accessibility/index.mdx index a7dbd9f3d9b204b5da476407fb93ddc372ed1ca7..30e3fd2a98b1b43f62422f8101f8bb22ef5429f3 100644 --- a/content/accessibility/index.mdx +++ b/content/guides/accessibility/index.mdx @@ -8,19 +8,19 @@ import {Box, Link, Text, Label} from '@primer/react' <Box display="grid" gridTemplateColumns="1fr" gridGap={4}> <h2>General</h2> <div> - <Link href="/design/accessibility/accessibility-at-github" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/accessibility-at-github" sx={{fontWeight: 'bold'}}> Accessibility at GitHub </Link> <Text as="p">Get started with accessibility at GitHub.</Text> </div> <div> - <Link href="/design/accessibility/guidelines" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/guidelines" sx={{fontWeight: 'bold'}}> Guidelines </Link> <Text as="p">Basic guidelines for designers when creating or updating features.</Text> </div> <div> - <Link href="/design/accessibility/tools" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/tools" sx={{fontWeight: 'bold'}}> Tools </Link> <Text as="p">A selection of tools to help designers create accessible designs.</Text> @@ -29,7 +29,7 @@ import {Box, Link, Text, Label} from '@primer/react' <Box display="grid" gridTemplateColumns="1fr" gridGap={4}> <h2>Specific</h2> <div> - <Link href="/design/accessibility/alternative-text-for-images" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/alternative-text-for-images" sx={{fontWeight: 'bold'}}> Alternative text for images </Link> <Text as="p"> @@ -38,7 +38,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/announcements" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/announcements" sx={{fontWeight: 'bold'}}> Assistive technology announcements </Link> <Text as="p"> @@ -48,7 +48,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/descriptive-buttons" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/descriptive-buttons" sx={{fontWeight: 'bold'}}> Descriptive buttons </Link> <Text as="p"> @@ -57,7 +57,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/focus-management" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/focus-management" sx={{fontWeight: 'bold'}}> Focus management </Link> <Text as="p"> @@ -66,7 +66,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/headings" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/headings" sx={{fontWeight: 'bold'}}> Headings </Link> <Text as="p"> @@ -75,7 +75,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/links" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/links" sx={{fontWeight: 'bold'}}> Links </Link> <Text as="p"> @@ -83,7 +83,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/semantic-html" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/semantic-html" sx={{fontWeight: 'bold'}}> Semantic HTML </Link> <Text as="p"> @@ -91,7 +91,7 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/text-resize-and-respacing" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/text-resize-and-respacing" sx={{fontWeight: 'bold'}}> Text resize and respacing </Link> <Text as="p"> @@ -100,20 +100,12 @@ import {Box, Link, Text, Label} from '@primer/react' </Text> </div> <div> - <Link href="/design/accessibility/tooltip-alternatives" sx={{fontWeight: 'bold'}}> + <Link href="/guides/accessibility/tooltip-alternatives" sx={{fontWeight: 'bold'}}> Tooltip alternatives </Link> <Text as="p"> Most UI cases don't call for tooltips. Learn some alternative methods to use in place of tooltips. </Text> </div> - <div> - <Link href="/design/accessibility/truncation" sx={{fontWeight: 'bold'}}> - Truncation - </Link> - <Text as="p"> - There are several ways to truncate a text. Learn more about when and how to shorten a text when it reaches a larger length than required. - </Text> - </div> </Box> </Box> diff --git a/content/accessibility/links.mdx b/content/guides/accessibility/links.mdx similarity index 100% rename from content/accessibility/links.mdx rename to content/guides/accessibility/links.mdx diff --git a/content/accessibility/semantic-html.mdx b/content/guides/accessibility/semantic-html.mdx similarity index 100% rename from content/accessibility/semantic-html.mdx rename to content/guides/accessibility/semantic-html.mdx diff --git a/content/accessibility/text-resize-and-respacing.mdx b/content/guides/accessibility/text-resize-and-respacing.mdx similarity index 100% rename from content/accessibility/text-resize-and-respacing.mdx rename to content/guides/accessibility/text-resize-and-respacing.mdx diff --git a/content/accessibility/tools.mdx b/content/guides/accessibility/tools.mdx similarity index 100% rename from content/accessibility/tools.mdx rename to content/guides/accessibility/tools.mdx diff --git a/content/accessibility/tooltip-alternatives.mdx b/content/guides/accessibility/tooltip-alternatives.mdx similarity index 100% rename from content/accessibility/tooltip-alternatives.mdx rename to content/guides/accessibility/tooltip-alternatives.mdx diff --git a/content/guides/index.mdx b/content/guides/index.mdx index 73518be2501020675a76c7f340e9bb6c23bd5f8f..6263b3ea56b16488ab2be50fbd8ac7afec35c285 100644 --- a/content/guides/index.mdx +++ b/content/guides/index.mdx @@ -6,27 +6,45 @@ import {Box, Link, Text} from '@primer/react' <Box display="grid" gridTemplateColumns={['1fr', null, null, null]} gridGap={4}> <div> - <Link href="/design/guides/introduction" sx={{fontWeight: 'bold'}}> + <Link href="/guides/introduction" sx={{fontWeight: 'bold'}}> Introduction </Link> <Text as="p">Get started with the principles of Primer, standards, and recommendations for designing Github.</Text> </div> <div> - <Link href="/design/guides/content" sx={{fontWeight: 'bold'}}> + <Link href="/guides/content" sx={{fontWeight: 'bold'}}> Content </Link> <Text as="p">How to create interfaces that follow GitHub's content guidelines.</Text> </div> <div> - <Link href="/design/guides/zen" sx={{fontWeight: 'bold'}}> + <Link href="/guides/zen" sx={{fontWeight: 'bold'}}> Zen </Link> <Text as="p">How to create interfaces that follow GitHub's content guidelines.</Text> </div> <div> - <Link href="/design/guides/figma" sx={{fontWeight: 'bold'}}> + <Link href="/guides/figma" sx={{fontWeight: 'bold'}}> Figma </Link> <Text as="p">Getting started with Figma for GitHub.</Text> </div> + <div> + <Link href="/guides/component-lifecycle" sx={{fontWeight: 'bold'}}> + Component lifecycle + </Link> + <Text as="p">Milestones that summarize the maturity lifecycle of UI components in Primer.</Text> + </div> + <div> + <Link href="/guides/accessibility" sx={{fontWeight: 'bold'}}> + Accessibility + </Link> + <Text as="p">How to create accessible interfaces for GitHub.</Text> + </div> + <div> + <Link href="/guides/contribute" sx={{fontWeight: 'bold'}}> + Contribute + </Link> + <Text as="p">How to contribute to Primer.</Text> + </div> </Box> diff --git a/src/@primer/gatsby-theme-doctocat/nav.yml b/src/@primer/gatsby-theme-doctocat/nav.yml index 80d9948a3128448cffa30c0bbf6a0c83ecafe7a5..0c2c19141be9511e9776adb41e48688be27eb849 100644 --- a/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/src/@primer/gatsby-theme-doctocat/nav.yml @@ -10,6 +10,32 @@ url: /guides/figma - title: Component lifecycle url: /guides/component-lifecycle + - title: Accessibility + children: + - title: Accessibility at GitHub + url: /guides/accessibility/accessibility-at-github + - title: Guidelines + url: /guides/accessibility/guidelines + - title: Tools + url: /guides/accessibility/tools + - title: Alternative text for images + url: /guides/accessibility/alternative-text-for-images + - title: Assistive technology announcements + url: /guides/accessibility/announcements + - title: Descriptive buttons + url: /guides/accessibility/descriptive-buttons + - title: Focus management + url: /guides/accessibility/focus-management + - title: Headings + url: /guides/accessibility/headings + - title: Links + url: /guides/accessibility/links + - title: Semantic HTML + url: /guides/accessibility/semantic-html + - title: Text resize and respacing + url: /guides/accessibility/text-resize-and-respacing + - title: Tooltip alternatives + url: /guides/accessibility/tooltip-alternatives - title: Contribute url: /guides/contribute children: @@ -29,32 +55,6 @@ url: /foundations/layout - title: Typography url: /foundations/typography -- title: Accessibility - children: - - title: Accessibility at GitHub - url: /accessibility/accessibility-at-github - - title: Guidelines - url: /accessibility/guidelines - - title: Tools - url: /accessibility/tools - - title: Alternative text for images - url: /accessibility/alternative-text-for-images - - title: Assistive technology announcements - url: /accessibility/announcements - - title: Descriptive buttons - url: /accessibility/descriptive-buttons - - title: Focus management - url: /accessibility/focus-management - - title: Headings - url: /accessibility/headings - - title: Links - url: /accessibility/links - - title: Semantic HTML - url: /accessibility/semantic-html - - title: Text resize and respacing - url: /accessibility/text-resize-and-respacing - - title: Tooltip alternatives - url: /accessibility/tooltip-alternatives - title: UI patterns children: - title: Button usage