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

Commit 09b4597

Browse files
mperrottimperrotti
authored
Component page design updates (#533)
* updates component page layout to match updated designs * updates stuff I missed the first time * updates forms page layout * upgrades doctocat
1 parent 0f011f8 commit 09b4597

File tree

7 files changed

+19
-19
lines changed

7 files changed

+19
-19
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"dependencies": {
1515
"@github/prettier-config": "^0.0.6",
1616
"@primer/component-metadata": "^0.5.1",
17-
"@primer/gatsby-theme-doctocat": "^4.5.1",
17+
"@primer/gatsby-theme-doctocat": "4.5.1",
1818
"@primer/octicons-react": "^17.3.0",
1919
"@primer/react": "35.5.0",
2020
"@svgr/webpack": "^6.5.1",

‎src/layouts/component-layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function ComponentLayout({pageContext, children, path}) {
1212
return (
1313
<BaseLayout title={title} description={description}>
1414
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
15-
<Heading as="h1">{title}</Heading>
15+
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
1616
{description ? (
1717
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
1818
{description}
@@ -27,7 +27,7 @@ export default function ComponentLayout({pageContext, children, path}) {
2727
current="overview"
2828
/>
2929
</Box>
30-
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
30+
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
3131
<Box
3232
sx={{
3333
width: 220,
@@ -42,7 +42,7 @@ export default function ComponentLayout({pageContext, children, path}) {
4242
<>
4343
<Heading
4444
as="h3"
45-
sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}}
45+
sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}}
4646
id="toc-heading"
4747
>
4848
On this page
@@ -69,7 +69,7 @@ export default function ComponentLayout({pageContext, children, path}) {
6969
<Box
7070
sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
7171
>
72-
<Heading as="h3" sx={{fontSize: 2, fontWeight: 'bold'}} id="toc-heading-narrow">
72+
<Heading as="h3" sx={{fontSize: 1, fontWeight: 'bold'}} id="toc-heading-narrow">
7373
On this page
7474
</Heading>
7575
</Box>

‎src/layouts/figma-component-layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default function FigmaComponentLayout({data}) {
8181
return (
8282
<BaseLayout title={title} description={description}>
8383
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
84-
<Heading as="h1">{title}</Heading>
84+
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
8585
{description ? (
8686
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
8787
{description}
@@ -96,7 +96,7 @@ export default function FigmaComponentLayout({data}) {
9696
current="figma"
9797
/>
9898
</Box>
99-
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
99+
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
100100
<Box
101101
sx={{
102102
width: 220,
@@ -107,7 +107,7 @@ export default function FigmaComponentLayout({data}) {
107107
display: ['none', null, 'block'],
108108
}}
109109
>
110-
<Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
110+
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
111111
On this page
112112
</Heading>
113113
<TableOfContents aria-labelledby="toc-heading" items={tableOfContents.items} />

‎src/layouts/forms-layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function FormsLayout({pageContext, children, _path}) {
1313
return (
1414
<BaseLayout title={title} description={description}>
1515
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
16-
<Heading as="h1">{title}</Heading>
16+
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
1717
{description ? (
1818
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
1919
{description}
@@ -32,7 +32,7 @@ export default function FormsLayout({pageContext, children, _path}) {
3232
</UnderlineNav.Link>
3333
</UnderlineNav>
3434
</Box>
35-
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
35+
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
3636
<Box
3737
sx={{
3838
width: 220,

‎src/layouts/rails-component-layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ export default function RailsComponentLayout({data}) {
289289
return (
290290
<BaseLayout title={title} description={description}>
291291
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
292-
<Heading as="h1">{title}</Heading>
292+
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
293293
{description ? (
294294
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
295295
{description}
@@ -304,7 +304,7 @@ export default function RailsComponentLayout({data}) {
304304
current="rails"
305305
/>
306306
</Box>
307-
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
307+
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
308308
<Box
309309
sx={{
310310
width: 220,
@@ -315,9 +315,9 @@ export default function RailsComponentLayout({data}) {
315315
display: ['none', null, 'block'],
316316
}}
317317
>
318-
<Text sx={{display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
318+
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
319319
On this page
320-
</Text>
320+
</Heading>
321321
<TableOfContents aria-labelledby="toc-heading" items={tableOfContents.items} />
322322
</Box>
323323
<Box sx={{'flexGrow': 1}}>

‎src/layouts/react-component-layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default function ReactComponentLayout({data}) {
8282
return (
8383
<BaseLayout title={title} description={description}>
8484
<Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
85-
<Heading as="h1">{title}</Heading>
85+
<Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
8686
{description ? (
8787
<Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
8888
{description}
@@ -97,7 +97,7 @@ export default function ReactComponentLayout({data}) {
9797
current="react"
9898
/>
9999
</Box>
100-
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: 4}}>
100+
<Box sx={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'start', gap: [null, 7, 8, 9]}}>
101101
<Box
102102
sx={{
103103
width: 220,
@@ -108,7 +108,7 @@ export default function ReactComponentLayout({data}) {
108108
display: ['none', null, 'block'],
109109
}}
110110
>
111-
<Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
111+
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
112112
On this page
113113
</Heading>
114114
<TableOfContents aria-labelledby="toc-heading" items={tableOfContents.items} />
@@ -188,7 +188,7 @@ export default function ReactComponentLayout({data}) {
188188
<Box
189189
sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
190190
>
191-
<Heading as="h3" sx={{fontSize: 2, fontWeight: 'bold'}} id="toc-heading-narrow">
191+
<Heading as="h3" sx={{fontSize: 1, fontWeight: 'bold'}} id="toc-heading-narrow">
192192
On this page
193193
</Heading>
194194
</Box>

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1815,7 +1815,7 @@
18151815
resolved "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.5.1.tgz"
18161816
integrity sha512-+3tuJScHWRifOAyMV+cn1I533j+PcprvPXbKnH1W7N+vhaGyaaHTao8Dkyyhxbhklmumcf8XR+Lz6dK1ojDrCg==
18171817

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

0 commit comments

Comments
 (0)