Skip to content

Commit 3963b55

Browse files
benfacebenface
authored
Update dependencies + layout and accessibility improvements (#50)
* Show the language switcher * Update dependencies + layout and accessibility improvements * Hide language switcher * Deploy `main` branch to staging
1 parent 836160a commit 3963b55

File tree

9 files changed

+344
-324
lines changed

9 files changed

+344
-324
lines changed

‎components/Container.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import { HTMLAttributes } from 'react'
22

3-
// TODO: Consider moving to `@edgeandnode/components`
3+
// TODO: Move to `@edgeandnode/components`
44

5+
// TODO: Add `maxWidth` and `padding` props
56
export type ContainerProps = HTMLAttributes<HTMLElement>
67

78
export const Container = ({ children, ...props }: ContainerProps) => {
89
return (
910
<div
1011
sx={{
11-
px: ['24px', null, '32px'],
12+
'--container-max-width': '1280px',
13+
'--container-padding': ['20px', null, '32px'],
14+
mx: 'auto',
15+
maxWidth: 'calc(var(--container-max-width) + 2 * var(--container-padding))',
16+
px: 'var(--container-padding)',
1217
}}
1318
{...props}
1419
>

‎components/NavTree.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as Collapsible from '@radix-ui/react-collapsible'
33
import {
44
Diamond,
55
DiamondProps,
6-
NewGDSDivider as Divider,
6+
NewGDSDivider,
77
Text,
88
TextProps,
99
Flex,
@@ -47,8 +47,8 @@ export type NavTreeDividerProps = Omit<HTMLAttributes<HTMLElement>, 'children'>
4747

4848
const NavTree = ({ children, textProps, ...props }: NavTreeProps) => {
4949
return (
50-
<Flex.Column {...props}>
51-
<Text weight="Semibold" size="14px" as="ul" role="list" {...textProps}>
50+
<Flex.Column as="nav" {...props}>
51+
<Text weight="Semibold" size="14px" as="ul" {...textProps}>
5252
{children}
5353
</Text>
5454
</Flex.Column>
@@ -169,17 +169,15 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
169169
}}
170170
{...props}
171171
>
172-
<ul role="list" sx={{ pl: Spacing.L }}>
173-
{children}
174-
</ul>
172+
<ul sx={{ pl: Spacing.L }}>{children}</ul>
175173
</Collapsible.Content>
176174
)
177175
}
178176

179177
const NavTreeDivider = (props: NavTreeDividerProps) => {
180178
return (
181179
<li aria-hidden="true" sx={{ my: Spacing.M }} {...props}>
182-
<Divider simple />
180+
<NewGDSDivider simple />
183181
</li>
184182
)
185183
}

‎layout/Layout.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { useMemo } from 'react'
1+
import { PropsWithChildren, useMemo } from 'react'
22
import NextLink from 'next/link'
33
import { NavigationMarketing, Footer, LanguageSwitcher, Flex, objectEntries } from '@edgeandnode/components'
44

5-
import { Container, ContainerProps } from '@/components'
5+
import { Container } from '@/components'
66
import { useI18n } from '@/hooks'
77
import { Locale } from '@/i18n'
88

9-
export const Layout = ({ children, ...props }: ContainerProps) => {
9+
export const Layout = ({ children }: PropsWithChildren<{}>) => {
1010
const { currentLocale, localesDetails, setLocale, translations } = useI18n()
1111

1212
const languages = useMemo(
@@ -21,7 +21,7 @@ export const Layout = ({ children, ...props }: ContainerProps) => {
2121
)
2222

2323
return (
24-
<Container {...props}>
24+
<div>
2525
<div
2626
sx={{
2727
position: 'absolute',
@@ -40,37 +40,41 @@ export const Layout = ({ children, ...props }: ContainerProps) => {
4040
/>
4141
<Flex.Column
4242
sx={{
43-
mx: 'auto',
44-
maxWidth: '1288px',
4543
minHeight: '100vh',
4644
}}
4745
>
4846
<div sx={{ flexShrink: 0 }}>
49-
<NavigationMarketing
50-
activeRoute="/docs"
51-
NextLink={NextLink}
52-
rightAlignItems={
53-
[
54-
/*
47+
<Container sx={{ '--container-padding': '32px' }}>
48+
<NavigationMarketing
49+
activeRoute="/docs"
50+
NextLink={NextLink}
51+
rightAlignItems={
52+
[
53+
/*
5554
<LanguageSwitcher
5655
key="languageSwitcher"
5756
languages={languages}
5857
value={currentLocale}
5958
onSelect={(locale) => setLocale(locale as Locale)}
6059
label={translations.global.language}
6160
/>,
62-
*/
63-
]
64-
}
65-
/>
61+
*/
62+
]
63+
}
64+
/>
65+
</Container>
6666
</div>
67-
<main sx={{ flexGrow: 1 }}>{children}</main>
67+
<main sx={{ flexGrow: 1 }}>
68+
<Container>{children}</Container>
69+
</main>
6870
<div sx={{ flexShrink: 0 }}>
69-
<div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
70-
<Footer />
71-
</div>
71+
<Container>
72+
<div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
73+
<Footer />
74+
</div>
75+
</Container>
7276
</div>
7377
</Flex.Column>
74-
</Container>
78+
</div>
7579
)
7680
}

‎layout/MDXLayout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { PropsWithChildren, createContext, Context, useMemo, useCallback } from
22
import { MDXProvider } from '@mdx-js/react'
33
import Head from 'next/head'
44
import { ThemeUIStyleObject } from 'theme-ui'
5-
import { NewGDSDivider as Divider, NewGDSDividerProps as DividerProps, Spacing, Flex } from '@edgeandnode/components'
5+
import { NewGDSDivider, NewGDSDividerProps, Spacing, Flex } from '@edgeandnode/components'
66
import { useSet } from 'react-use'
77

88
import { NavItem, NavItemPage } from '@/navigation'
@@ -26,7 +26,7 @@ const mdxComponents = {
2626
blockquote: Blockquote,
2727
pre: CodeBlock,
2828
code: CodeInline,
29-
hr: (props: DividerProps) => <Divider sx={{ my: Spacing.XL }} {...props} />,
29+
hr: (props: NewGDSDividerProps) => <NewGDSDivider sx={{ my: Spacing.XL }} {...props} />,
3030
h1: Heading.H1,
3131
h2: Heading.H2,
3232
h3: Heading.H3,
@@ -160,11 +160,11 @@ export const MDXLayout = ({ navItems, frontmatter, outline, children }: MDXLayou
160160
<div
161161
sx={{
162162
display: ['flex', null, null, 'grid'],
163-
gridTemplateColumns: '232px auto 216px',
163+
gridTemplateColumns: '216px auto 216px',
164164
flexDirection: 'column',
165165
}}
166166
>
167-
<div sx={{ display: ['none', null, null, 'block'], ml: '-8px', mr: '32px' }}>
167+
<div sx={{ display: ['none', null, null, 'block'], ml: '-8px', mr: '24px' }}>
168168
<MDXLayoutNav />
169169
</div>
170170

@@ -192,7 +192,7 @@ export const MDXLayout = ({ navItems, frontmatter, outline, children }: MDXLayou
192192
</div>
193193
</div>
194194

195-
<div sx={{ display: ['none', null, null, 'block'], ml: '48px', mr: '-8px' }}>
195+
<div sx={{ display: ['none', null, null, 'block'], ml: '40px', mr: '-8px' }}>
196196
<MDXLayoutOutline />
197197
</div>
198198
</div>

‎layout/MDXLayoutOutline.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ export const MDXLayoutOutline = () => {
2929
<EditPageLink />
3030
</Flex.Row>
3131
<Divider simple sx={{ my: Spacing.XL }} />
32-
<aside sx={{ pr: '16px' }}>
32+
<nav sx={{ pr: '16px' }}>
3333
<Text.T10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
3434
{translations.global.pageSections}
3535
</Text.T10>
36-
<Text as="ul" role="list" size="14px" color="White48">
36+
<Text as="ul" size="14px" color="White48">
3737
{outline.map((outlineItem, outlineItemIndex) => {
3838
if (outlineItem.level > 3) {
3939
return null
@@ -57,7 +57,7 @@ export const MDXLayoutOutline = () => {
5757
)
5858
})}
5959
</Text>
60-
</aside>
60+
</nav>
6161
</div>
6262
)
6363
}

‎layout/MDXLayoutPagination.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import { useContext } from 'react'
2-
import {
3-
Text,
4-
Flex,
5-
NewGDSDivider as Divider,
6-
Icon,
7-
Spacing,
8-
buildShadow,
9-
buildTransition,
10-
} from '@edgeandnode/components'
2+
import { Text, Flex, NewGDSDivider, Icon, Spacing, buildShadow, buildTransition } from '@edgeandnode/components'
113

124
import { NavContext } from '@/layout'
135
import { Link } from '@/components'
@@ -18,8 +10,8 @@ export const MDXLayoutPagination = () => {
1810
const { translations } = useI18n()
1911

2012
return (
21-
<div>
22-
<Divider />
13+
<div sx={{ overflow: 'hidden' }}>
14+
<NewGDSDivider />
2315
<Flex.Row justify="space-between" sx={{ mt: Spacing.XL }}>
2416
<div>
2517
{previousPage && (

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@
2020
}
2121
},
2222
"dependencies": {
23-
"@edgeandnode/components": "^17.0.2",
23+
"@edgeandnode/components": "^18.1.1",
2424
"@emotion/react": "^11.7.1",
2525
"@emotion/styled": "^11.6.0",
26-
"@mdx-js/loader": "^2.0.0-rc.2",
27-
"@mdx-js/mdx": "^2.0.0-rc.2",
28-
"@mdx-js/react": "^2.0.0-rc.2",
29-
"@next/mdx": "^12.0.9",
26+
"@mdx-js/loader": "^2.0.0",
27+
"@mdx-js/mdx": "^2.0.0",
28+
"@mdx-js/react": "^2.0.0",
29+
"@next/mdx": "^12.0.10",
3030
"@radix-ui/react-collapsible": "0.1.5",
3131
"@radix-ui/react-popover": "^0.1.4",
3232
"@radix-ui/react-visually-hidden": "^0.1.3",
33-
"next": "^12.0.9",
33+
"next": "^12.0.10",
3434
"next-seo": "^4.29.0",
3535
"prism-react-renderer": "^1.2.1",
3636
"react": "^17.0.2",
@@ -42,15 +42,15 @@
4242
},
4343
"devDependencies": {
4444
"@sindresorhus/slugify": "^2.1.0",
45-
"@svgr/webpack": "^6.2.0",
46-
"@types/color": "^3.0.2",
45+
"@svgr/webpack": "^6.2.1",
46+
"@types/color": "^3.0.3",
4747
"@types/lodash-es": "^4.17.5",
48-
"@types/node": "^16.11.13",
48+
"@types/node": "^16.11.21",
4949
"@types/react": "^17.0.38",
5050
"acorn": "^8.7.0",
5151
"acorn-jsx": "^5.3.2",
52-
"eslint": "^8.7.0",
53-
"eslint-config-next": "^12.0.9",
52+
"eslint": "^8.8.0",
53+
"eslint-config-next": "^12.0.10",
5454
"husky": "^7.0.4",
5555
"lodash-es": "^4.17.21",
5656
"path": "^0.12.7",
@@ -63,8 +63,8 @@
6363
"url": "^0.11.0"
6464
},
6565
"resolutions": {
66-
"@mdx-js/loader": "^2.0.0-rc.2",
67-
"@mdx-js/mdx": "^2.0.0-rc.2"
66+
"@mdx-js/loader": "^2.0.0",
67+
"@mdx-js/mdx": "^2.0.0"
6868
},
6969
"engines": {
7070
"node": ">=16"

‎pages/[locale]/index.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
5555
<MDXLayout navItems={navItems} frontmatter={frontmatter(currentLocale)} outline={outline}>
5656
<Paragraph>{translations.index.intro}</Paragraph>
5757
<ul
58-
role="list"
5958
sx={{
6059
mb: '96px',
6160
display: 'grid',
@@ -132,7 +131,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
132131
<Heading.H2 id="network-roles">{translations.index.networkRoles.title}</Heading.H2>
133132
<Paragraph>{translations.index.networkRoles.description}</Paragraph>
134133
<ul
135-
role="list"
136134
sx={{
137135
mt: Spacing.XL,
138136
mb: '128px',
@@ -186,7 +184,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
186184

187185
<Heading.H2 id="products">{translations.index.products.title}</Heading.H2>
188186
<ul
189-
role="list"
190187
sx={{
191188
mt: Spacing.XL,
192189
mb: '128px',
@@ -233,7 +230,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
233230
<div sx={{ mt: Spacing.XXL }}>
234231
<Heading.H4>{translations.index.supportedNetworks.graphNetworkAndHostedService}</Heading.H4>
235232
<ul
236-
role="list"
237233
sx={{
238234
mt: Spacing.L_XL,
239235
display: 'grid',
@@ -279,7 +275,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
279275
<Heading.H4>{translations.index.supportedNetworks.hostedService}</Heading.H4>
280276
<Paragraph>*{translations.index.supportedNetworks.betaWarning}</Paragraph>
281277
<ul
282-
role="list"
283278
sx={{
284279
mt: Spacing.XL,
285280
display: 'grid',

0 commit comments

Comments
 (0)