Merge branch 'dev' into walletsPage

Author: corwintines

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -5,14 +5,16 @@ import ContentHeroComponent, { ContentHeroProps } from "."
 
 type ContentHeroType = typeof ContentHeroComponent
 
+import contentHeroImg from "../../../../public/mainnet.png"
+
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: ContentHeroComponent,
   parameters: {
     layout: "none",
   },
   argTypes: {
-    heroImgSrc: {
+    heroImg: {
       table: {
         disable: true,
       },
@@ -22,9 +24,6 @@ const meta = {
 
 export default meta
 
-// TODO: Double-check correct way to mock Next.js image data
-const mockImgData = "/mainnet.png"
-
 export const ContentHero: StoryObj = {
   render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -52,7 +51,7 @@ export const ContentHero: StoryObj = {
     return (
       <ContentHeroComponent
         breadcrumbs={{ slug: "/en/run-a-node/" }}
-        heroImgSrc={mockImgData}
+        heroImg={contentHeroImg}
         title={t("hero-header")}
         description={t("hero-subtitle")}
         buttons={buttons}

src/components/Hero/ContentHero/index.tsx

@@ -1,58 +1,54 @@
 import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 
-import type { CommonHeroProps } from "@/lib/types"
+import { CommonHeroProps } from "@/lib/types"
 
-import Breadcrumbs, { type BreadcrumbsProps } from "@/components/Breadcrumbs"
-import { CallToAction } from "@/components/Hero/CallToAction"
+import Breadcrumbs, { BreadcrumbsProps } from "@/components/Breadcrumbs"
 import { Image } from "@/components/Image"
 
+import { CallToAction } from "../CallToAction"
+
 export interface ContentHeroProps extends Omit<CommonHeroProps, "header"> {
   breadcrumbs: BreadcrumbsProps
 }
 
-const ContentHero = ({
-  breadcrumbs,
-  heroImgSrc,
-  buttons,
-  title,
-  description,
-}: ContentHeroProps) => (
-  <Box bgImg="bgMainGradient">
-    <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
-      <Box
-        height={{ base: "300px", md: "400px", lg: "full" }}
-        order={{ lg: 1 }}
-      >
-        <Image
-          alt=""
-          src={heroImgSrc}
-          priority
-          style={{ objectFit: "contain" }}
-          boxSize="full"
-        />
-      </Box>
-      <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
-        <Breadcrumbs {...breadcrumbs} />
-        <Stack spacing="6">
-          <Heading as="h1" size="2xl">
-            {title}
-          </Heading>
-          <Text fontSize="lg">{description}</Text>
-          {buttons && (
+const ContentHero = (props: ContentHeroProps) => {
+  const { breadcrumbs, heroImg, buttons, title, description } = props
+  return (
+    <Box bgImg="bgMainGradient">
+      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
+        <Box
+          height={{ base: "300px", md: "400px", lg: "full" }}
+          order={{ lg: 1 }}
+        >
+          <Image
+            src={heroImg}
+            alt=""
+            priority
+            style={{ objectFit: "contain" }}
+            boxSize="full"
+          />
+        </Box>
+        <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
+          <Breadcrumbs {...breadcrumbs} />
+          <Stack spacing="6">
+            <Heading as="h1" size="2xl">
+              {title}
+            </Heading>
+            <Text fontSize="lg">{description}</Text>
             <HStack spacing="4">
-              {buttons.map((button, idx) => {
+              {buttons!.map((button, idx) => {
                 if (!button) return
                 return <CallToAction key={idx} {...button} />
               })}
             </HStack>
-          )}
+          </Stack>
+          {/* TODO:
+           * Add conditional Big Stat box here
+           */}
         </Stack>
-        {/* TODO:
-         * Add conditional Big Stat box here
-         */}
-      </Stack>
-    </SimpleGrid>
-  </Box>
-)
+      </SimpleGrid>
+    </Box>
+  )
+}
 
 export default ContentHero

src/components/Hero/HomeHero/HomeHero.stories.tsx

@@ -1,3 +1,4 @@
+import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import HomeHeroComponent from "."
@@ -11,7 +12,7 @@ const meta = {
     layout: "none",
   },
   argTypes: {
-    heroImgSrc: {
+    heroImg: {
       table: {
         disable: true,
       },
@@ -21,10 +22,11 @@ const meta = {
 
 export default meta
 
-// TODO: Double-check correct way to mock Next.js image data
-const mockImgData = "/home/hero.png"
+import homeHeroImg from "../../../../public/home/hero.png"
 
 export const HomeHero: StoryObj<typeof meta> = {
-  args: { heroImgSrc: mockImgData },
+  args: {
+    heroImg: homeHeroImg,
+  },
   render: (args) => <HomeHeroComponent {...args} />,
 }

src/components/Hero/HomeHero/index.tsx

@@ -7,15 +7,15 @@ import { ButtonLink } from "@/components/Buttons"
 import { Image } from "@/components/Image"
 import Morpher from "@/components/Morpher"
 
-export type HomeHeroProps = Pick<CommonHeroProps, "heroImgSrc">
+export type HomeHeroProps = Pick<CommonHeroProps, "heroImg">
 
-const HomeHero = ({ heroImgSrc }: HomeHeroProps) => {
+const HomeHero = ({ heroImg }: HomeHeroProps) => {
   const { t } = useTranslation("page-index")
   return (
     <Box>
       <Box h={440}>
         <Image
-          src={heroImgSrc}
+          src={heroImg}
           alt={t("page-index:page-index-hero-image-alt")}
           w="full"
           h="full"
@@ -34,11 +34,11 @@ const HomeHero = ({ heroImgSrc }: HomeHeroProps) => {
           <Morpher />
           <VStack spacing="6">
             <Heading as="h1" size="2xl">
-              {t("page-index-title")}
+              {t("page-index:page-index-title")}
             </Heading>
-            <Text size="xl">{t("page-index-description")}</Text>
+            <Text size="xl">{t("page-index:page-index-description")}</Text>
             <ButtonLink href="/learn/">
-              {t("page-index-title-button")}
+              {t("page-index:page-index-title-button")}
             </ButtonLink>
           </VStack>
         </Stack>

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -3,8 +3,6 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import type { CommonHeroProps as HubHeroProps } from "@/lib/types"
-
 import HubHeroComponent from "./"
 
 type HubHeroType = typeof HubHeroComponent
@@ -26,22 +24,23 @@ const meta = {
 
 export default meta
 
-// TODO: Double-check correct way to mock Next.js image data
-const mockImgData = "/heroes/learn-hub-hero.png"
+import { CommonHeroProps } from "@/lib/types"
+
+import learnHubHeroImg from "../../../../public/heroes/learn-hub-hero.png"
 
 export const HubHero: StoryObj<typeof meta> = {
   args: {
     title: "learn-hub",
     header: "hero-header",
     description: "hero-subtitle",
-    heroImgSrc: mockImgData,
+    heroImg: learnHubHeroImg,
   },
 
   render: ({ title, header, description, ...props }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { t } = useTranslation()
 
-    const buttons: HubHeroProps["buttons"] = [
+    const buttons: CommonHeroProps["buttons"] = [
       {
         content: t("hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",

src/components/Hero/HubHero/index.tsx

@@ -12,24 +12,27 @@ import type { CommonHeroProps } from "@/lib/types"
 import { CallToAction } from "@/components/Hero/CallToAction"
 import { Image } from "@/components/Image"
 
-const HubHero = ({
-  heroImgSrc,
-  title,
-  header,
-  description,
-  buttons,
-}: CommonHeroProps) => {
+const HubHero = (props: CommonHeroProps) => {
+  const { heroImg, title, header, description, buttons } = props
+
+  if (buttons && buttons.length > 2) {
+    throw Error(
+      "Can not have more than two call-to-action buttons in this hero component."
+    )
+  }
+
   const height = useBreakpointValue({
     base: "192px",
     md: "256px",
     lg: "320px",
     xl: "576px",
     "2xl": "672px",
   })
+
   return (
     <Box position="relative">
       <Image
-        src={heroImgSrc}
+        src={heroImg}
         alt=""
         priority
         sizes="100vw"

src/components/Hero/MdxHero/index.tsx

@@ -1,6 +1,6 @@
 import { Heading, Stack } from "@chakra-ui/react"
 
-import type { CommonHeroProps } from "@/lib/types"
+import { CommonHeroProps } from "@/lib/types"
 
 import Breadcrumbs, { type BreadcrumbsProps } from "@/components/Breadcrumbs"
 

src/components/PageHero.tsx

@@ -1,11 +1,5 @@
 import type { ReactNode } from "react"
-import {
-  Box,
-  Flex,
-  Heading,
-  Wrap,
-  WrapItem,
-} from "@chakra-ui/react"
+import { Box, Center, Flex, Heading, Wrap, WrapItem } from "@chakra-ui/react"
 
 import {
   Button,
@@ -28,7 +22,7 @@ type ButtonType = Omit<ButtonProps, "content"> & {
   matomo: MatomoEventOptions
 }
 
-type ContentType = {
+export type ContentType = {
   buttons?: (ButtonLinkType | ButtonType)[]
   title: ReactNode
   header: ReactNode
@@ -151,22 +145,24 @@ const PageHero = ({
         )}
         {children}
       </Box>
-      <Image
-        src={image}
+      <Center
         flex="1 1 50%"
-        alignSelf="center"
+        maxWidth={{ base: "560px", lg: "624px" }}
         mt={{ base: 0, lg: 12 }}
         ms={{ base: 0, lg: 12 }}
-        maxWidth={{ base: "560px", lg: "624px" }}
-        sizes="100%"
-        style={{
-          width: "100%",
-          height: "auto",
-          objectFit: "contain",
-        }}
-        alt={alt}
-        priority
-      />
+      >
+        <Image
+          src={image}
+          sizes="100%"
+          style={{
+            width: "100%",
+            height: "auto",
+            objectFit: "contain",
+          }}
+          alt={alt}
+          priority
+        />
+      </Center>
     </Flex>
   </Box>
 )

src/components/Trilemma/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { useTranslation } from "next-i18next"
 import {
   Drawer,
   DrawerCloseButton,
@@ -9,17 +9,16 @@ import {
   useToken,
 } from "@chakra-ui/react"
 
-import Card from "../Card"
-import OldHeading from "../OldHeading"
-import Text from "../OldText"
-import Translation from "../Translation"
+import Card from "@/components/Card"
+import OldHeading from "@/components/OldHeading"
+import Text from "@/components/OldText"
 
-import { IProps as TriangleSVGProps,TriangleSVG } from "./Triangle"
+import { IProps as TriangleSVGProps, TriangleSVG } from "./Triangle"
 import { useTrilemma } from "./useTrilemma"
 
-export interface IProps {}
+const Trilemma = () => {
+  const { t } = useTranslation("page-roadmap-vision")
 
-const Trilemma: React.FC<IProps> = () => {
   const {
     trilemmaChecks,
     mobileModalOpen,
@@ -53,19 +52,19 @@ const Trilemma: React.FC<IProps> = () => {
         }}
       >
         <OldHeading fontSize="2rem" mt={0}>
-          <Translation id="page-roadmap-vision-trilemma-h2" />
+          {t("page-roadmap-vision-trilemma-h2")}
         </OldHeading>
         <Text>
-          <Translation id="page-roadmap-vision-trilemma-p" />
+          {t("page-roadmap-vision-trilemma-p")}
         </Text>
         <Text>
-          <Translation id="page-roadmap-vision-trilemma-p-1" />
+          {t("page-roadmap-vision-trilemma-p-1")}
         </Text>
         <Text>
-          <Translation id="page-roadmap-vision-trilemma-p-2" />
+          {t("page-roadmap-vision-trilemma-p-2")}
         </Text>
         <Text fontWeight={600} hideFrom={lgBp}>
-          <Translation id="page-roadmap-vision-trilemma-modal-tip" />:
+          {t("page-roadmap-vision-trilemma-modal-tip")}:
         </Text>
         <Card {...cardDetail} mt={8} minH="300px" hideBelow={lgBp} />
       </Flex>