Skip to content
This repository was archived by the owner on Jul 7, 2025. It is now read-only.

Component page design updates #533

Merged
merged 7 commits into from
Jul 21, 2023
Merged

Component page design updates #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f214c3
updates component page layout to match updated designs
mperrotti Jul 18, 2023
a1b652c
updates stuff I missed the first time
mperrotti Jul 18, 2023
d2f204a
Merge branch 'main' of github.com:primer/design into mp/component-pg-…
mperrotti Jul 18, 2023
e90767b
updates forms page layout
mperrotti Jul 19, 2023
4e21c14
upgrades doctocat
mperrotti Jul 19, 2023
8da9cb7
Merge branch 'main' of github.com:primer/design into mp/component-pg-…
mperrotti Jul 19, 2023
da96066
Merge branch 'main' of github.com:primer/design into mp/component-pg-…
mperrotti Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"dependencies": {
"@github/prettier-config": "^0.0.6",
"@primer/component-metadata": "^0.5.1",
"@primer/gatsby-theme-doctocat": "^4.5.1",
"@primer/gatsby-theme-doctocat": "4.5.1",
"@primer/octicons-react": "^17.3.0",
"@primer/react": "35.5.0",
"@svgr/webpack": "^6.5.1",
Expand Down
8 changes: 4 additions & 4 deletions src/layouts/component-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function ComponentLayout({pageContext, children, path}) {
return (
<BaseLayout title={title} description={description}>
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
<Heading as="h1">{title}</Heading>
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
{description ? (
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
{description}
Expand All @@ -29,7 +29,7 @@ export default function ComponentLayout({pageContext, children, path}) {
current="overview"
/>
</Box>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
<Box
sx={{
width: 220,
Expand All @@ -44,7 +44,7 @@ export default function ComponentLayout({pageContext, children, path}) {
<>
<Heading
as="h3"
sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}}
sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}}
id="toc-heading"
>
On this page
Expand All @@ -71,7 +71,7 @@ export default function ComponentLayout({pageContext, children, path}) {
<Box
sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
>
<Heading as="h3" sx={{fontSize: 2, fontWeight: 'bold'}} id="toc-heading-narrow">
<Heading as="h3" sx={{fontSize: 1, fontWeight: 'bold'}} id="toc-heading-narrow">
On this page
</Heading>
</Box>
Expand Down
6 changes: 3 additions & 3 deletions src/layouts/figma-component-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function FigmaComponentLayout({data}) {
return (
<BaseLayout title={title} description={description}>
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
<Heading as="h1">{title}</Heading>
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
{description ? (
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
{description}
Expand All @@ -96,7 +96,7 @@ export default function FigmaComponentLayout({data}) {
current="figma"
/>
</Box>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
<Box
sx={{
width: 220,
Expand All @@ -107,7 +107,7 @@ export default function FigmaComponentLayout({data}) {
display: ['none', null, 'block'],
}}
>
<Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
On this page
</Heading>
<TableOfContents aria-labelledby="toc-heading" items={tableOfContents.items} />
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/forms-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function FormsLayout({pageContext, children, _path}) {
return (
<BaseLayout title={title} description={description}>
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
<Heading as="h1">{title}</Heading>
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
{description ? (
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
{description}
Expand All @@ -32,7 +32,7 @@ export default function FormsLayout({pageContext, children, _path}) {
</UnderlineNav.Link>
</UnderlineNav>
</Box>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
<Box
sx={{
width: 220,
Expand Down
8 changes: 4 additions & 4 deletions src/layouts/rails-component-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ export default function RailsComponentLayout({data}) {
return (
<BaseLayout title={title} description={description}>
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
<Heading as="h1">{title}</Heading>
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
{description ? (
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
{description}
Expand All @@ -304,7 +304,7 @@ export default function RailsComponentLayout({data}) {
current="rails"
/>
</Box>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
<Box
sx={{
width: 220,
Expand All @@ -315,9 +315,9 @@ export default function RailsComponentLayout({data}) {
display: ['none', null, 'block'],
}}
>
<Text sx={{display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
On this page
</Text>
</Heading>
<TableOfContents aria-labelledby="toc-heading" items={tableOfContents.items} />
</Box>
<Box sx={{'flexGrow': 1}}>
Expand Down
8 changes: 4 additions & 4 deletions src/layouts/react-component-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default function ReactComponentLayout({data}) {
return (
<BaseLayout title={title} description={description}>
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
<Heading as="h1">{title}</Heading>
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
{description ? (
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
{description}
Expand All @@ -97,7 +97,7 @@ export default function ReactComponentLayout({data}) {
current="react"
/>
</Box>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
<Box
sx={{
width: 220,
Expand All @@ -108,7 +108,7 @@ export default function ReactComponentLayout({data}) {
display: ['none', null, 'block'],
}}
>
<Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
On this page
</Heading>
<TableOfContents aria-labelledby="toc-heading" items={tableOfContents.items} />
Expand Down Expand Up @@ -188,7 +188,7 @@ export default function ReactComponentLayout({data}) {
<Box
sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
>
<Heading as="h3" sx={{fontSize: 2, fontWeight: 'bold'}} id="toc-heading-narrow">
<Heading as="h3" sx={{fontSize: 1, fontWeight: 'bold'}} id="toc-heading-narrow">
On this page
</Heading>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1815,7 +1815,7 @@
resolved "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.5.1.tgz"
integrity sha512-+3tuJScHWRifOAyMV+cn1I533j+PcprvPXbKnH1W7N+vhaGyaaHTao8Dkyyhxbhklmumcf8XR+Lz6dK1ojDrCg==

"@primer/gatsby-theme-doctocat@^4.5.1":
"@primer/[email protected]":
version "4.5.1"
resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-4.5.1.tgz#f053733ca0c58981dafb74ae7aeb7f6c0ad9c9cb"
integrity sha512-C01078zcfBhwVLKI9URXP1YX+FA1I6TyVEPpwIwXQMAyXJUxsPbvZwKBp01dtkkMwQI4tZ2NthM4zSysTXtc5A==
Expand Down