Merge pull request #13411 from ethereum/shadcn-footer-link

Shadcn migration - footer, skiplink, list & link components

Author: wackerow

package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",

src/components/Footer.tsx

@@ -1,25 +1,18 @@
 import { useTranslation } from "next-i18next"
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"
 import { IoChevronUpSharp } from "react-icons/io5"
-import {
-  Box,
-  Flex,
-  Heading,
-  Icon,
-  List,
-  ListItem,
-  SimpleGrid,
-  Text,
-} from "@chakra-ui/react"
 
 import type { FooterLink, FooterLinkSection } from "@/lib/types"
 
-import { BaseLink } from "@/components/Link"
 import Translation from "@/components/Translation"
 
+import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { Button } from "./Buttons"
+import { BaseLink } from "../../tailwind/Link"
+import { Button } from "../../tailwind/ui/buttons/Button"
+
+import { List, ListItem } from "./ui/list"
 
 const socialLinks = [
   {
@@ -306,132 +299,76 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
     },
   ]
 
-  const hoverStyles = {
-    textDecor: "none",
-    color: "primary.base",
-    _after: {
-      color: "primary.base",
-    },
-    "& svg": {
-      fill: "primary.base",
-    },
-  }
-
-  const linkProps = {
-    isPartiallyActive: false,
-    textDecor: "none",
-    color: "body.medium",
-    fontWeight: "normal",
-    _hover: hoverStyles,
-    sx: {
-      "& svg": {
-        fill: "body.medium",
-      },
-    },
-  }
+  const footerLinkClassName =
+    "text-body-medium no-underline hover:text-primary hover:after:text-primary"
 
   return (
-    <Box as="footer" py="4" px="8">
-      <Flex
-        justify={{ base: "center", md: "space-between" }}
-        alignItems="center"
-        flexWrap="wrap"
-        gap={8}
-        pt={4}
-        pb={4}
-        borderTop={"1px solid"}
-        borderColor={"body.light"}
-      >
-        <Text fontSize={"sm"} fontStyle={"italic"} color={"body.medium"}>
+    <footer className="px-8 py-4">
+      <div className="flex flex-wrap items-center justify-center gap-8 border-t border-body-light py-4 md:justify-between">
+        <p className="text-sm italic text-body-medium">
           <Translation id="website-last-updated" />: {lastDeployLocaleTimestamp}
-        </Text>
+        </p>
 
         <Button
-          leftIcon={<IoChevronUpSharp />}
           variant="outline"
           isSecondary
           onClick={() => scrollIntoView("__next")}
         >
-          {t("go-to-top")}
+          <IoChevronUpSharp /> Go to top
         </Button>
-      </Flex>
+      </div>
 
-      <SimpleGrid
-        gap={4}
-        justifyContent="space-between"
-        templateColumns={{
-          base: "auto",
-          sm: "repeat(2, auto)",
-          md: "repeat(3, auto)",
-          xl: "repeat(6, auto)",
-        }}
-      >
+      <div className="grid auto-cols-auto justify-between gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
         {linkSections.map((section: FooterLinkSection, idx) => (
-          <Box key={idx}>
-            <Heading as="h3" fontSize="sm" lineHeight="base" my="1.14em">
+          <div key={idx}>
+            <h3 className="my-5 text-sm font-bold">
               <Translation id={section.title} />
-            </Heading>
-            <List fontSize="sm" lineHeight="base" fontWeight="normal" m="0">
+            </h3>
+            <List className="m-0 mb-4 list-none text-sm">
               {section.links.map((link, linkIdx) => (
-                <ListItem key={linkIdx} mb={4}>
-                  <BaseLink href={link.href} {...linkProps}>
+                <ListItem key={linkIdx} className="mb-4">
+                  <BaseLink
+                    href={link.href}
+                    className={footerLinkClassName}
+                    isPartiallyActive={false}
+                  >
                     {link.text}
                   </BaseLink>
                 </ListItem>
               ))}
             </List>
-          </Box>
+          </div>
         ))}
-      </SimpleGrid>
-      <Flex
-        p={6}
-        flexDir="column"
-        alignItems="center"
-        justifyContent="center"
-        fontSize="sm"
-        bg="background.highlight"
-      >
-        <Box display="flex" gap={4}>
-          {socialLinks.map(({ href, ariaLabel, icon }) => (
+      </div>
+      <div className="flex flex-col items-center justify-center bg-background-highlight p-6 text-sm">
+        <div className="flex gap-4">
+          {socialLinks.map(({ href, ariaLabel, icon: Icon }) => (
             <BaseLink
               key={href}
               href={href}
               hideArrow
-              color="body.base"
               aria-label={ariaLabel}
-              _focus={{ color: "primary.base" }}
+              className="text-body hover:text-primary"
             >
-              <Icon
-                as={icon}
-                _hover={{
-                  transition:
-                    "color 0.2s ease-in-out, transform 0.2s ease-in-out",
-                }}
-                fontSize="4xl"
-              />
+              <Icon className="h-9 w-9 hover:transform hover:transition-colors" />
             </BaseLink>
           ))}
-        </Box>
-        <List
-          display="flex"
-          flexDir={{ base: "column", sm: "row" }}
-          flexWrap="wrap"
-          justifyContent={{ base: "center", sm: "space-between", md: "center" }}
-          fontWeight="normal"
-          fontSize="sm"
-          p={5}
-          m={0}
-        >
+        </div>
+        <List className="m-0 flex list-none flex-col flex-wrap justify-center p-5 text-sm font-normal sm:flex-row sm:justify-between md:justify-center">
           {dipperLinks.map(({ href, text }) => (
-            <ListItem key={text} textAlign="center" px="2">
-              <BaseLink href={href} w={["100%", null]} {...linkProps}>
+            <ListItem key={text} className="px-2 text-center">
+              <BaseLink
+                href={href}
+                className={cn("w-full sm:w-auto", footerLinkClassName)}
+                isPartiallyActive={false}
+              >
                 {text}
               </BaseLink>
             </ListItem>
           ))}
         </List>
-      </Flex>
-    </Box>
+      </div>
+    </footer>
   )
 }
 

src/components/SkipLink.tsx

@@ -1,27 +1,19 @@
 import { useTranslation } from "next-i18next"
-import { Box } from "@chakra-ui/react"
-
-import { BaseLink } from "@/components/Link"
 
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
+import { BaseLink } from "../../tailwind/Link"
+
 export const SkipLink = () => {
   const { t } = useTranslation()
   return (
-    <Box bg="primary.base">
+    <div className="bg-primary">
       <BaseLink
         href={"#" + MAIN_CONTENT_ID}
-        lineHeight="taller"
-        position="absolute"
-        top="-12"
-        ms="2"
-        color="background.base"
-        textDecorationLine="none"
-        _hover={{ textDecoration: "none" }}
-        _focus={{ position: "static" }}
+        className="absolute -top-12 ms-2 leading-8 text-background no-underline hover:no-underline focus:static"
       >
         {t("skip-to-main-content")}
       </BaseLink>
-    </Box>
+    </div>
   )
 }

src/components/ThemeProvider.tsx

@@ -33,7 +33,11 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
       disableTransitionOnChange
       storageKey={COLOR_MODE_STORAGE_KEY}
     >
-      <ChakraBaseProvider theme={theme} colorModeManager={colorModeManager}>
+      <ChakraBaseProvider
+        theme={theme}
+        colorModeManager={colorModeManager}
+        resetCSS={false}
+      >
         {/* TODO: Can these CSS Vars be moved to `global.css`? */}
         <style jsx global>
           {`

src/components/ui/list.tsx

@@ -0,0 +1,53 @@
+import { BaseHTMLAttributes, ElementRef, forwardRef } from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils/cn"
+
+export type ListProps = BaseHTMLAttributes<HTMLUListElement> & {
+  asChild?: boolean
+}
+
+const List = forwardRef<ElementRef<"ul">, ListProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "ul"
+    return (
+      <Comp
+        ref={ref}
+        className={cn("mb-6 ms-6 list-disc", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+List.displayName = "List"
+
+// Alias
+const UnorderedList = List
+
+const OrderedList = forwardRef<ElementRef<"ol">, ListProps>(
+  ({ className, children, ...props }, ref) => (
+    <List className={cn("list-decimal", className)} asChild>
+      <ol ref={ref} {...props}>
+        {children}
+      </ol>
+    </List>
+  )
+)
+
+OrderedList.displayName = "OrderedList"
+
+const ListItem = forwardRef<
+  ElementRef<"li">,
+  BaseHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("mb-3 last:mb-0 [&_ol]:mt-3 [&_ul]:mt-3", className)}
+    {...props}
+  />
+))
+
+ListItem.displayName = "ListItem"
+
+export { List, ListItem, OrderedList, UnorderedList }

src/layouts/BaseLayout.tsx

@@ -1,8 +1,6 @@
 // import { join } from "path"
 
 import dynamic from "next/dynamic"
-// import { useRouter } from "next/router"
-import { Container } from "@chakra-ui/react"
 
 import type { Root } from "@/lib/types"
 
@@ -54,7 +52,7 @@ export const BaseLayout = ({
        * layout on initial load.
        */}
       <SkipLink />
-      <Container maxW="container.2xl" marginInline="auto">
+      <div className="max-w-screen-2xl mx-auto">
         <Nav />
 
         {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}
@@ -72,7 +70,7 @@ export const BaseLayout = ({
         {children}
 
         <Footer lastDeployLocaleTimestamp={lastDeployLocaleTimestamp} />
-      </Container>
+      </div>
       {/**
        * The Feedback Widget is positioned below the container to ensure it is not affecting the
        * layout on initial load.

src/styles/global.css

@@ -178,7 +178,7 @@
   }
 
   a {
-    @apply text-primary underline;
+    @apply text-primary underline underline-offset-3 hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
   }
 
   h1,
@@ -214,7 +214,14 @@
     @apply text-sm lg:text-md;
   }
 
-  /* TODO: to be replaced with list component styles */
+  pre,
+  code,
+  kbd,
+  samp {
+    @apply font-monospace text-base leading-base;
+  }
+
+  /* TODO: remove these global styles when the list component migration is complete */
   ul,
   ol {
     margin: 0px 0px 1.45rem 1.45rem;
@@ -243,11 +250,4 @@
       margin-bottom: calc(1.45rem / 2);
     }
   }
-
-  pre,
-  code,
-  kbd,
-  samp {
-    @apply font-monospace text-base leading-base;
-  }
 }

tailwind.config.ts

@@ -10,6 +10,13 @@ const config = {
   prefix: "",
   theme: {
     extend: {
+      screens: {
+        sm: "480px",
+        md: "768px",
+        lg: "992px",
+        xl: "1280px",
+        "2xl": "1536px",
+      },
       fontFamily: {
         heading: "var(--font-inter)",
         body: "var(--font-inter)",
@@ -122,6 +129,9 @@ const config = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      textUnderlineOffset: {
+        3: "3px",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],