Update dependencies + layout and accessibility improvements

components/Container.tsx

@@ -1,14 +1,19 @@
 import { HTMLAttributes } from 'react'
 
-// TODO: Consider moving to `@edgeandnode/components`
+// TODO: Move to `@edgeandnode/components`
 
+// TODO: Add `maxWidth` and `padding` props
 export type ContainerProps = HTMLAttributes<HTMLElement>
 
 export const Container = ({ children, ...props }: ContainerProps) => {
   return (
     <div
       sx={{
-        px: ['24px', null, '32px'],
+        '--container-max-width': '1280px',
+        '--container-padding': ['20px', null, '32px'],
+        mx: 'auto',
+        maxWidth: 'calc(var(--container-max-width) + 2 * var(--container-padding))',
+        px: 'var(--container-padding)',
       }}
       {...props}
     >

components/NavTree.tsx

@@ -3,7 +3,7 @@ import * as Collapsible from '@radix-ui/react-collapsible'
 import {
   Diamond,
   DiamondProps,
-  NewGDSDivider as Divider,
+  NewGDSDivider,
   Text,
   TextProps,
   Flex,
@@ -47,8 +47,8 @@ export type NavTreeDividerProps = Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 const NavTree = ({ children, textProps, ...props }: NavTreeProps) => {
   return (
-    <Flex.Column {...props}>
-      <Text weight="Semibold" size="14px" as="ul" role="list" {...textProps}>
+    <Flex.Column as="nav" {...props}>
+      <Text weight="Semibold" size="14px" as="ul" {...textProps}>
         {children}
       </Text>
     </Flex.Column>
@@ -169,17 +169,15 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
       }}
       {...props}
     >
-      <ul role="list" sx={{ pl: Spacing.L }}>
-        {children}
-      </ul>
+      <ul sx={{ pl: Spacing.L }}>{children}</ul>
     </Collapsible.Content>
   )
 }
 
 const NavTreeDivider = (props: NavTreeDividerProps) => {
   return (
     <li aria-hidden="true" sx={{ my: Spacing.M }} {...props}>
-      <Divider simple />
+      <NewGDSDivider simple />
     </li>
   )
 }

layout/Layout.tsx

@@ -1,12 +1,12 @@
-import { useMemo } from 'react'
+import { PropsWithChildren, useMemo } from 'react'
 import NextLink from 'next/link'
 import { NavigationMarketing, Footer, LanguageSwitcher, Flex, objectEntries } from '@edgeandnode/components'
 
-import { Container, ContainerProps } from '@/components'
+import { Container } from '@/components'
 import { useI18n } from '@/hooks'
 import { Locale } from '@/i18n'
 
-export const Layout = ({ children, ...props }: ContainerProps) => {
+export const Layout = ({ children }: PropsWithChildren<{}>) => {
   const { currentLocale, localesDetails, setLocale, translations } = useI18n()
 
   const languages = useMemo(
@@ -21,7 +21,7 @@ export const Layout = ({ children, ...props }: ContainerProps) => {
   )
 
   return (
-    <Container {...props}>
+    <div>
       <div
         sx={{
           position: 'absolute',
@@ -40,37 +40,41 @@ export const Layout = ({ children, ...props }: ContainerProps) => {
       />
       <Flex.Column
         sx={{
-          mx: 'auto',
-          maxWidth: '1288px',
           minHeight: '100vh',
         }}
       >
         <div sx={{ flexShrink: 0 }}>
-          <NavigationMarketing
-            activeRoute="/docs"
-            NextLink={NextLink}
-            rightAlignItems={
-              [
-                /*
+          <Container sx={{ '--container-padding': '32px' }}>
+            <NavigationMarketing
+              activeRoute="/docs"
+              NextLink={NextLink}
+              rightAlignItems={
+                [
+                  /*
                 <LanguageSwitcher
                   key="languageSwitcher"
                   languages={languages}
                   value={currentLocale}
                   onSelect={(locale) => setLocale(locale as Locale)}
                   label={translations.global.language}
                 />,
-              */
-              ]
-            }
-          />
+                */
+                ]
+              }
+            />
+          </Container>
         </div>
-        <main sx={{ flexGrow: 1 }}>{children}</main>
+        <main sx={{ flexGrow: 1 }}>
+          <Container>{children}</Container>
+        </main>
         <div sx={{ flexShrink: 0 }}>
-          <div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
-            <Footer />
-          </div>
+          <Container>
+            <div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
+              <Footer />
+            </div>
+          </Container>
         </div>
       </Flex.Column>
-    </Container>
+    </div>
   )
 }

layout/MDXLayout.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, createContext, Context, useMemo, useCallback } from
 import { MDXProvider } from '@mdx-js/react'
 import Head from 'next/head'
 import { ThemeUIStyleObject } from 'theme-ui'
-import { NewGDSDivider as Divider, NewGDSDividerProps as DividerProps, Spacing, Flex } from '@edgeandnode/components'
+import { NewGDSDivider, NewGDSDividerProps, Spacing, Flex } from '@edgeandnode/components'
 import { useSet } from 'react-use'
 
 import { NavItem, NavItemPage } from '@/navigation'
@@ -26,7 +26,7 @@ const mdxComponents = {
   blockquote: Blockquote,
   pre: CodeBlock,
   code: CodeInline,
-  hr: (props: DividerProps) => <Divider sx={{ my: Spacing.XL }} {...props} />,
+  hr: (props: NewGDSDividerProps) => <NewGDSDivider sx={{ my: Spacing.XL }} {...props} />,
   h1: Heading.H1,
   h2: Heading.H2,
   h3: Heading.H3,
@@ -160,11 +160,11 @@ export const MDXLayout = ({ navItems, frontmatter, outline, children }: MDXLayou
         <div
           sx={{
             display: ['flex', null, null, 'grid'],
-            gridTemplateColumns: '232px auto 216px',
+            gridTemplateColumns: '216px auto 216px',
             flexDirection: 'column',
           }}
         >
-          <div sx={{ display: ['none', null, null, 'block'], ml: '-8px', mr: '32px' }}>
+          <div sx={{ display: ['none', null, null, 'block'], ml: '-8px', mr: '24px' }}>
             <MDXLayoutNav />
           </div>
 
@@ -192,7 +192,7 @@ export const MDXLayout = ({ navItems, frontmatter, outline, children }: MDXLayou
             </div>
           </div>
 
-          <div sx={{ display: ['none', null, null, 'block'], ml: '48px', mr: '-8px' }}>
+          <div sx={{ display: ['none', null, null, 'block'], ml: '40px', mr: '-8px' }}>
             <MDXLayoutOutline />
           </div>
         </div>

layout/MDXLayoutOutline.tsx

@@ -29,11 +29,11 @@ export const MDXLayoutOutline = () => {
         <EditPageLink />
       </Flex.Row>
       <Divider simple sx={{ my: Spacing.XL }} />
-      <aside sx={{ pr: '16px' }}>
+      <nav sx={{ pr: '16px' }}>
         <Text.T10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
           {translations.global.pageSections}
         </Text.T10>
-        <Text as="ul" role="list" size="14px" color="White48">
+        <Text as="ul" size="14px" color="White48">
           {outline.map((outlineItem, outlineItemIndex) => {
             if (outlineItem.level > 3) {
               return null
@@ -57,7 +57,7 @@ export const MDXLayoutOutline = () => {
             )
           })}
         </Text>
-      </aside>
+      </nav>
     </div>
   )
 }

layout/MDXLayoutPagination.tsx

@@ -1,13 +1,5 @@
 import { useContext } from 'react'
-import {
-  Text,
-  Flex,
-  NewGDSDivider as Divider,
-  Icon,
-  Spacing,
-  buildShadow,
-  buildTransition,
-} from '@edgeandnode/components'
+import { Text, Flex, NewGDSDivider, Icon, Spacing, buildShadow, buildTransition } from '@edgeandnode/components'
 
 import { NavContext } from '@/layout'
 import { Link } from '@/components'
@@ -18,8 +10,8 @@ export const MDXLayoutPagination = () => {
   const { translations } = useI18n()
 
   return (
-    <div>
-      <Divider />
+    <div sx={{ overflow: 'hidden' }}>
+      <NewGDSDivider />
       <Flex.Row justify="space-between" sx={{ mt: Spacing.XL }}>
         <div>
           {previousPage && (

package.json

@@ -20,17 +20,17 @@
     }
   },
   "dependencies": {
-    "@edgeandnode/components": "^17.0.2",
+    "@edgeandnode/components": "^18.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mdx-js/loader": "^2.0.0-rc.2",
-    "@mdx-js/mdx": "^2.0.0-rc.2",
-    "@mdx-js/react": "^2.0.0-rc.2",
-    "@next/mdx": "^12.0.9",
+    "@mdx-js/loader": "^2.0.0",
+    "@mdx-js/mdx": "^2.0.0",
+    "@mdx-js/react": "^2.0.0",
+    "@next/mdx": "^12.0.10",
     "@radix-ui/react-collapsible": "0.1.5",
     "@radix-ui/react-popover": "^0.1.4",
     "@radix-ui/react-visually-hidden": "^0.1.3",
-    "next": "^12.0.9",
+    "next": "^12.0.10",
     "next-seo": "^4.29.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",
@@ -42,15 +42,15 @@
   },
   "devDependencies": {
     "@sindresorhus/slugify": "^2.1.0",
-    "@svgr/webpack": "^6.2.0",
-    "@types/color": "^3.0.2",
+    "@svgr/webpack": "^6.2.1",
+    "@types/color": "^3.0.3",
     "@types/lodash-es": "^4.17.5",
-    "@types/node": "^16.11.13",
+    "@types/node": "^16.11.21",
     "@types/react": "^17.0.38",
     "acorn": "^8.7.0",
     "acorn-jsx": "^5.3.2",
-    "eslint": "^8.7.0",
-    "eslint-config-next": "^12.0.9",
+    "eslint": "^8.8.0",
+    "eslint-config-next": "^12.0.10",
     "husky": "^7.0.4",
     "lodash-es": "^4.17.21",
     "path": "^0.12.7",
@@ -63,8 +63,8 @@
     "url": "^0.11.0"
   },
   "resolutions": {
-    "@mdx-js/loader": "^2.0.0-rc.2",
-    "@mdx-js/mdx": "^2.0.0-rc.2"
+    "@mdx-js/loader": "^2.0.0",
+    "@mdx-js/mdx": "^2.0.0"
   },
   "engines": {
     "node": ">=16"

pages/[locale]/index.tsx

@@ -55,7 +55,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
     <MDXLayout navItems={navItems} frontmatter={frontmatter(currentLocale)} outline={outline}>
       <Paragraph>{translations.index.intro}</Paragraph>
       <ul
-        role="list"
         sx={{
           mb: '96px',
           display: 'grid',
@@ -132,7 +131,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
       <Heading.H2 id="network-roles">{translations.index.networkRoles.title}</Heading.H2>
       <Paragraph>{translations.index.networkRoles.description}</Paragraph>
       <ul
-        role="list"
         sx={{
           mt: Spacing.XL,
           mb: '128px',
@@ -186,7 +184,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
 
       <Heading.H2 id="products">{translations.index.products.title}</Heading.H2>
       <ul
-        role="list"
         sx={{
           mt: Spacing.XL,
           mb: '128px',
@@ -233,7 +230,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
       <div sx={{ mt: Spacing.XXL }}>
         <Heading.H4>{translations.index.supportedNetworks.graphNetworkAndHostedService}</Heading.H4>
         <ul
-          role="list"
           sx={{
             mt: Spacing.L_XL,
             display: 'grid',
@@ -279,7 +275,6 @@ const Index = ({ navItems }: { navItems: NavItem[] }) => {
         <Heading.H4>{translations.index.supportedNetworks.hostedService}</Heading.H4>
         <Paragraph>*{translations.index.supportedNetworks.betaWarning}</Paragraph>
         <ul
-          role="list"
           sx={{
             mt: Spacing.XL,
             display: 'grid',