migrate footer, skiplink & link component

Author: pettinarip

package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@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,17 @@
 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 { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
-import { Button } from "./Buttons"
+import { BaseLink } from "../../tailwind/Link"
+
+import { Button, ButtonIcon } from "./ui/button"
+import { List, ListItem } from "./ui/list"
 
 const socialLinks = [
   {
@@ -306,132 +298,69 @@ 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",
-      },
-    },
-  }
-
   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 pb-4 pt-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")}
+        <Button variant="secondary" onClick={() => scrollIntoView("__next")}>
+          <ButtonIcon icon={<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="text-sm">
               {section.links.map((link, linkIdx) => (
-                <ListItem key={linkIdx} mb={4}>
-                  <BaseLink href={link.to} {...linkProps}>
+                <ListItem key={linkIdx} className="mb-4">
+                  <BaseLink
+                    href={link.to}
+                    className="text-body-medium no-underline hover:text-primary hover:after:text-primary"
+                    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(({ to, 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(({ to, ariaLabel, icon: Icon }) => (
             <BaseLink
               key={to}
               href={to}
               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 flex-col flex-wrap justify-center p-5 text-sm font-normal sm:flex-row sm:justify-between md:justify-center">
           {dipperLinks.map(({ to, text }) => (
-            <ListItem key={text} textAlign="center" px="2">
-              <BaseLink href={to} w={["100%", null]} {...linkProps}>
+            <ListItem key={text} className="px-2 text-center">
+              <BaseLink
+                href={to}
+                className="w-full text-body-medium no-underline hover:text-primary hover:after:text-primary sm:w-auto"
+                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-3 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/button.tsx

@@ -0,0 +1,74 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils/cn"
+
+/** FIXME: TEMP COMPONENT FOR TESTING PURPOSES */
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-cente whitespace-nowrap rounded font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-primary text-primary bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "border border-body bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded px-3",
+        lg: "h-11 rounded px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+const ButtonIcon = React.forwardRef<
+  HTMLSpanElement,
+  React.ButtonHTMLAttributes<HTMLSpanElement> & { icon: React.ReactNode }
+>(({ className, icon, ...props }, ref) => {
+  return (
+    <span
+      className={cn("me-2 text-base md:text-2xl", className)}
+      ref={ref}
+      {...props}
+    >
+      {icon}
+    </span>
+  )
+})
+ButtonIcon.displayName = "ButtonIcon"
+
+export { Button, ButtonIcon, buttonVariants }

src/components/ui/list.tsx

@@ -0,0 +1,22 @@
+import { BaseHTMLAttributes, ElementRef, forwardRef } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+const List = forwardRef<ElementRef<"ul">, BaseHTMLAttributes<HTMLUListElement>>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("m-0", className)} {...props} />
+  )
+)
+
+List.displayName = "List"
+
+const ListItem = forwardRef<
+  ElementRef<"li">,
+  BaseHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={className} {...props} />
+))
+
+ListItem.displayName = "ListItem"
+
+export { List, ListItem }

src/layouts/BaseLayout.tsx

@@ -1,9 +1,8 @@
 // import { join } from "path"
 
 import dynamic from "next/dynamic"
-// import { useRouter } from "next/router"
-import { Container } from "@chakra-ui/react"
 
+// import { useRouter } from "next/router"
 import type { Root } from "@/lib/types"
 
 import Footer from "@/components/Footer"
@@ -54,7 +53,7 @@ export const BaseLayout = ({
        * layout on initial load.
        */}
       <SkipLink />
-      <Container maxW="container.2xl" marginInline="auto">
+      <div className="2xl:container 2xl:mx-auto">
         <Nav />
 
         {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}
@@ -72,7 +71,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.