Update components (#73)

* Deploy `develop` to staging

* Display language switcher

* Update dependencies + add language switcher to footer

* Fix Korean translations

* Fix translations of outline titles on landing page

* Add Graph Day link to nav

* Prepare to merge to `main`

Author: benface

components/NavTree.tsx

@@ -1,13 +1,12 @@
 import { HTMLAttributes, createContext, Context, useState, useContext } from 'react'
 import * as Collapsible from '@radix-ui/react-collapsible'
 import {
-  Diamond,
-  DiamondProps,
   NewGDSDivider,
   Text,
   TextProps,
   Flex,
   Icon,
+  IconProps,
   Spacing,
   buildTransition,
 } from '@edgeandnode/components'
@@ -34,7 +33,7 @@ export type NavTreeItemProps = HTMLAttributes<HTMLElement> &
   Pick<LinkProps, 'href' | 'target'> & {
     active?: boolean
     linkProps?: LinkProps & SxProp
-    diamondProps?: DiamondProps & SxProp
+    diamondProps?: IconProps & SxProp
   }
 export type NavTreeGroupProps = HTMLAttributes<HTMLElement> & {
   active?: boolean
@@ -84,10 +83,11 @@ const NavTreeItem = ({
       >
         {children}
         {active && (
-          <Diamond
+          <Icon.DiamondSolid
+            size="12px"
             sx={{
               position: 'absolute',
-              left: '6px',
+              left: Spacing.S,
               top: 0,
               bottom: 0,
               my: 'auto',
@@ -177,7 +177,7 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
 const NavTreeDivider = (props: NavTreeDividerProps) => {
   return (
     <li aria-hidden="true" sx={{ my: Spacing.M }} {...props}>
-      <NewGDSDivider simple />
+      <NewGDSDivider />
     </li>
   )
 }

i18n/translations.ts

@@ -5,7 +5,7 @@ import { Locale } from './locales'
 import enTranslations from '@/pages/en/translations'
 import esTranslations from '@/pages/es/translations'
 import arTranslations from '@/pages/ar/translations'
-import koTranslations from '@/pages/ar/translations'
+import koTranslations from '@/pages/ko/translations'
 import zhTranslations from '@/pages/zh/translations'
 import jaTranslations from '@/pages/ja/translations'
 import viTranslations from '@/pages/vi/translations'

layout/Layout.tsx

@@ -20,6 +20,19 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
     [localesDetails]
   )
 
+  const languageSwitcher = useMemo(
+    () => (
+      <LanguageSwitcher
+        key="languageSwitcher"
+        languages={languages}
+        value={currentLocale}
+        onSelect={(locale) => setLocale(locale as Locale)}
+        label={translations.global.language}
+      />
+    ),
+    [languages, currentLocale, setLocale, translations]
+  )
+
   return (
     <div>
       <div
@@ -32,7 +45,6 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
           backgroundImage: `url('${process.env.NEXT_PUBLIC_BASE_PATH}/img/page-background.png')`,
           backgroundSize: 'cover',
           backgroundPosition: 'center top',
-          backgroundRepeat: 'no-repeat',
           '@media (min-width: 1440px)': {
             aspectRatio: '1440/768',
           },
@@ -45,23 +57,7 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
       >
         <div sx={{ flexShrink: 0 }}>
           <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}
-                />,
-                */
-                ]
-              }
-            />
+            <NavigationMarketing activeRoute="/docs" NextLink={NextLink} /* rightAlignItems={[languageSwitcher]} */ />
           </Container>
         </div>
         <main sx={{ flexGrow: 1 }}>
@@ -70,7 +66,7 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
         <div sx={{ flexShrink: 0 }}>
           <Container>
             <div sx={{ mx: 'auto', maxWidth: [null, null, null, 'calc(100vw - 500px)'] }}>
-              <Footer />
+              <Footer /* languageSwitcher={languageSwitcher} */ />
             </div>
           </Container>
         </div>

layout/MDXLayoutNav.tsx

@@ -69,7 +69,7 @@ const MobileWrapper = ({ title, children }: PropsWithChildren<{ title?: string }
           sx={{ px: Spacing.L_XL, py: '20px' }}
         >
           <Flex.Column as="span" gap={Spacing.S}>
-            <Text.T10 color="White64">Docs</Text.T10>
+            <Text.S10 color="White64">Docs</Text.S10>
             <Text size="16px">{title}</Text>
           </Flex.Column>
           <Flex.Column
@@ -145,7 +145,7 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
                   active={currentPage?.path === navItem.path}
                   sx={mobile ? { py: 0 } : {}}
                   linkProps={{ sx: mobile ? {} : { pr: 0 } }}
-                  diamondProps={{ sx: mobile ? { left: '10px' } : {} }}
+                  diamondProps={{ sx: mobile ? { left: '6px' } : {} }}
                 >
                   {navItem.title}
                 </NavTree.Item>

layout/MDXLayoutOutline.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { Text, Flex, NewGDSDivider as Divider, Spacing, buildTransition } from '@edgeandnode/components'
+import { Text, Flex, NewGDSDivider, Spacing, buildTransition } from '@edgeandnode/components'
 
 import { DocumentContext } from '@/layout'
 import { Link, EditPageLink } from '@/components'
@@ -28,11 +28,11 @@ export const MDXLayoutOutline = () => {
       <Flex.Row>
         <EditPageLink />
       </Flex.Row>
-      <Divider simple sx={{ my: Spacing.XL }} />
+      <NewGDSDivider sx={{ my: Spacing.XL }} />
       <nav sx={{ pr: '16px' }}>
-        <Text.T10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
+        <Text.S10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
           {translations.global.pageSections}
-        </Text.T10>
+        </Text.S10>
         <Text as="ul" size="14px" color="White48">
           {outline.map((outlineItem, outlineItemIndex) => {
             if (outlineItem.level > 3) {

layout/MDXLayoutPagination.tsx

@@ -11,7 +11,7 @@ export const MDXLayoutPagination = () => {
 
   return (
     <div sx={{ overflow: 'hidden' }}>
-      <NewGDSDivider />
+      <NewGDSDivider diamonds />
       <Flex.Row justify="space-between" sx={{ mt: Spacing.XL }}>
         <div>
           {previousPage && (
@@ -30,7 +30,7 @@ export const MDXLayoutPagination = () => {
               <Flex.Column align="start" gap={Spacing.S} sx={{ textAlign: 'left' }}>
                 <Flex.Row align="center" gap={Spacing.S}>
                   <Icon.ArrowLeft size="12px" />
-                  <Text.T10>{translations.global.previous}</Text.T10>
+                  <Text.S10>{translations.global.previous}</Text.S10>
                 </Flex.Row>
                 <Text
                   weight="Semibold"
@@ -67,7 +67,7 @@ export const MDXLayoutPagination = () => {
             >
               <Flex.Column align="end" gap={Spacing.S} sx={{ textAlign: 'right' }}>
                 <Flex.Row align="center" gap={Spacing.S}>
-                  <Text.T10>{translations.global.next}</Text.T10>
+                  <Text.S10>{translations.global.next}</Text.S10>
                   <Icon.ArrowRight size="12px" />
                 </Flex.Row>
                 <Text

package.json

@@ -20,7 +20,7 @@
     }
   },
   "dependencies": {
-    "@edgeandnode/components": "^18.1.1",
+    "@edgeandnode/components": "^20.3.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mdx-js/loader": "^2.0.0",
@@ -32,7 +32,7 @@
     "@radix-ui/react-visually-hidden": "^0.1.3",
     "next": "^12.0.10",
     "next-seo": "^4.29.0",
-    "prism-react-renderer": "^1.2.1",
+    "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intersection-observer": "^8.33.1",
@@ -44,12 +44,12 @@
     "@sindresorhus/slugify": "^2.1.0",
     "@svgr/webpack": "^6.2.1",
     "@types/color": "^3.0.3",
-    "@types/lodash-es": "^4.17.5",
-    "@types/node": "^16.11.21",
-    "@types/react": "^17.0.38",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^16.11.24",
+    "@types/react": "^17.0.39",
     "acorn": "^8.7.0",
     "acorn-jsx": "^5.3.2",
-    "eslint": "^8.8.0",
+    "eslint": "^8.9.0",
     "eslint-config-next": "^12.0.10",
     "husky": "^7.0.4",
     "lodash-es": "^4.17.21",

pages/[locale]/index.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { GetStaticPaths, GetStaticProps } from 'next'
 import { Text, Flex, Spacing, BorderRadius, buildBorder, buildShadow, buildTransition } from '@edgeandnode/components'
 
@@ -11,24 +12,6 @@ export const frontmatter = (locale: Locale): Frontmatter => ({
   title: translations[locale].index.title,
 })
 
-const outline: OutlineItem[] = [
-  {
-    id: 'network-roles',
-    title: 'Network Roles',
-    level: 2,
-  },
-  {
-    id: 'products',
-    title: 'Products',
-    level: 2,
-  },
-  {
-    id: 'supported-networks',
-    title: 'Supported Networks',
-    level: 2,
-  },
-]
-
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
     paths: Object.values(Locale).map((locale) => ({
@@ -51,6 +34,27 @@ export const getStaticProps: GetStaticProps = async (context) => {
 const Index = ({ navItems }: { navItems: NavItem[] }) => {
   const { currentLocale, translations } = useI18n()
 
+  const outline: OutlineItem[] = useMemo(
+    () => [
+      {
+        id: 'network-roles',
+        title: translations.index.networkRoles.title,
+        level: 2,
+      },
+      {
+        id: 'products',
+        title: translations.index.products.title,
+        level: 2,
+      },
+      {
+        id: 'supported-networks',
+        title: translations.index.supportedNetworks.title,
+        level: 2,
+      },
+    ],
+    [translations]
+  )
+
   return (
     <MDXLayout
       pagePath="[locale]/index.tsx"