Merge pull request #12639 from TylerAPfledderer/refactor/ContentHero-content-adjustments

refactor(ContentHero): update and apply component usage

Author: pettinarip

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

@@ -3,8 +3,6 @@ import { Meta, StoryObj } from "@storybook/react"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
 
-import contentHeroImg from "@/public/mainnet.png"
-
 type ContentHeroType = typeof ContentHeroComponent
 
 const meta = {
@@ -51,7 +49,9 @@ export const ContentHero: StoryObj = {
     return (
       <ContentHeroComponent
         breadcrumbs={{ slug: "/en/run-a-node/" }}
-        heroImg={contentHeroImg}
+        heroImg="/upgrades/merge.png"
+        // Can not properly hardcode this URL. So it's left blank
+        blurDataURL=""
         title={t("hero-header")}
         description={t("hero-subtitle")}
         buttons={buttons}

src/components/Hero/ContentHero/index.tsx

@@ -1,31 +1,35 @@
 import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 
-import { CommonHeroProps } from "@/lib/types"
+import type { CommonHeroProps } from "@/lib/types"
 
-import Breadcrumbs, { BreadcrumbsProps } from "@/components/Breadcrumbs"
+import Breadcrumbs from "@/components/Breadcrumbs"
 import { Image } from "@/components/Image"
 
 import { CallToAction } from "../CallToAction"
 
-export interface ContentHeroProps extends Omit<CommonHeroProps, "header"> {
-  breadcrumbs: BreadcrumbsProps
-}
+export type ContentHeroProps = Omit<CommonHeroProps<string>, "header">
 
 const ContentHero = (props: ContentHeroProps) => {
-  const { breadcrumbs, heroImg, buttons, title, description } = props
+  const { breadcrumbs, heroImg, buttons, title, description, blurDataURL } =
+    props
   return (
     <Box bgImg="bgMainGradient">
-      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
+      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto">
         <Box
-          height={{ base: "300px", md: "400px", lg: "full" }}
           order={{ lg: 1 }}
+          height={{ base: "300px", md: "400px", lg: "full" }}
         >
           <Image
             src={heroImg}
             alt=""
             priority
-            style={{ objectFit: "contain" }}
+            blurDataURL={blurDataURL}
+            width={760}
+            height={451}
+            sizes="(max-width: 992px) 100vw, 50vw"
             boxSize="full"
+            style={{ objectFit: "contain" }}
+            flex={{ base: "1 1 100%", md: "none" }}
           />
         </Box>
         <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
@@ -34,13 +38,19 @@ const ContentHero = (props: ContentHeroProps) => {
             <Heading as="h1" size="2xl">
               {title}
             </Heading>
-            <Text fontSize="lg">{description}</Text>
-            <HStack spacing="4">
-              {buttons!.map((button, idx) => {
-                if (!button) return
-                return <CallToAction key={idx} index={idx} {...button} />
-              })}
-            </HStack>
+            {typeof description === "string" ? (
+              <Text fontSize="lg">{description}</Text>
+            ) : (
+              description
+            )}
+            {buttons && (
+              <HStack spacing="4">
+                {buttons.map((button, idx) => {
+                  if (!button) return
+                  return <CallToAction key={idx} index={idx} {...button} />
+                })}
+              </HStack>
+            )}
           </Stack>
           {/* TODO:
            * Add conditional Big Stat box here

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

@@ -3,9 +3,7 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { CommonHeroProps } from "@/lib/types"
-
-import HubHeroComponent from "./"
+import HubHeroComponent, { type HubHeroProps } from "./"
 
 import learnHubHeroImg from "@/public/heroes/learn-hub-hero.png"
 
@@ -40,7 +38,7 @@ export const HubHero: StoryObj<typeof meta> = {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { t } = useTranslation()
 
-    const buttons: CommonHeroProps["buttons"] = [
+    const buttons: HubHeroProps["buttons"] = [
       {
         content: t("page-learn:hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",
@@ -64,7 +62,7 @@ export const HubHero: StoryObj<typeof meta> = {
       <HubHeroComponent
         title={t(title)}
         header={t(header)}
-        description={t(description)}
+        description={t(description as string)}
         buttons={buttons}
         {...props}
       />

src/components/Hero/HubHero/index.tsx

@@ -5,13 +5,15 @@ import type { CommonHeroProps } from "@/lib/types"
 import { CallToAction } from "@/components/Hero/CallToAction"
 import { Image } from "@/components/Image"
 
+export type HubHeroProps = Omit<CommonHeroProps, "breadcrumbs" | "blurDataURL">
+
 const HubHero = ({
   heroImg,
   title,
   header,
   description,
   buttons,
-}: CommonHeroProps) => {
+}: HubHeroProps) => {
   if (buttons && buttons.length > 2) {
     throw new Error(
       "Can not have more than two call-to-action buttons in this hero component."

src/components/Hero/MdxHero/index.tsx

@@ -1,12 +1,10 @@
 import { Heading, Stack } from "@chakra-ui/react"
 
-import { CommonHeroProps } from "@/lib/types"
+import type { CommonHeroProps } from "@/lib/types"
 
-import Breadcrumbs, { type BreadcrumbsProps } from "@/components/Breadcrumbs"
+import Breadcrumbs from "@/components/Breadcrumbs"
 
-export type MdxHeroProps = Pick<CommonHeroProps, "title"> & {
-  breadcrumbs: BreadcrumbsProps
-}
+export type MdxHeroProps = Pick<CommonHeroProps, "breadcrumbs" | "title">
 
 const MdxHero = ({ breadcrumbs, title }: MdxHeroProps) => (
   <Stack py="8" px="6" spacing="6" w="full">

src/layouts/Upgrade.tsx

@@ -1,12 +1,9 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { MdExpandMore } from "react-icons/md"
 import {
   Box,
   type BoxProps,
-  Flex,
   type FlexProps,
-  Icon,
   List,
   ListItem,
   Text,
@@ -17,12 +14,10 @@ import type { ChildOnlyProp, Lang } from "@/lib/types"
 import type { MdPageContent, UpgradeFrontmatter } from "@/lib/interfaces"
 
 import BeaconChainActions from "@/components/BeaconChainActions"
-import Breadcrumbs from "@/components/Breadcrumbs"
 import type { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import FeedbackCard from "@/components/FeedbackCard"
-import { Image } from "@/components/Image"
+import { ContentHero } from "@/components/Hero"
 import LeftNavBar from "@/components/LeftNavBar"
-import { BaseLink } from "@/components/Link"
 import {
   ContentContainer,
   MobileButton,
@@ -31,92 +26,27 @@ import {
 } from "@/components/MdComponents"
 import MergeArticleList from "@/components/MergeArticleList"
 import MergeInfographic from "@/components/MergeInfographic"
-import OldHeading from "@/components/OldHeading"
 import UpgradeStatus from "@/components/UpgradeStatus"
 
 import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
-import { MAIN_CONTENT_ID } from "@/lib/constants"
-
 const Page = (props: FlexProps) => <MdPage sx={{}} {...props} />
 
-const Title = (props: ChildOnlyProp) => (
-  <OldHeading
-    as="h1"
-    fontSize="2.5rem"
-    fontWeight="bold"
-    lineHeight={1.4}
-    mt={0}
-    {...props}
-  />
-)
-
 type ContainerProps = Pick<BoxProps, "children" | "dir">
 
 const Container = (props: ContainerProps) => (
   <Box position="relative" {...props} />
 )
 
-const HeroContainer = (props: ChildOnlyProp) => (
-  <Flex
-    justify="flex-end"
-    direction={{ base: "column-reverse", lg: "row" }}
-    bg="cardGradient"
-    boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
-    minH="608px"
-    maxH={{ base: "full", lg: "608px" }}
-    w="full"
-    {...props}
-  />
-)
-
-const MoreContent = (props: ChildOnlyProp & { to: string }) => (
-  <Flex
-    hideBelow="lg"
-    as={BaseLink}
-    bg="ednBackground"
-    justify="center"
-    p={4}
-    w="full"
-    _hover={{
-      bg: "background.base",
-    }}
-    {...props}
-  />
-)
-
-const TitleCard = (props: ChildOnlyProp) => {
-  const cardBoxShadow = useToken("colors", "cardBoxShadow")
-
-  return (
-    <Flex
-      direction="column"
-      justify="flex-start"
-      position={{ base: "relative", lg: "absolute" }}
-      bg={{ base: "ednBackground", lg: "background.base" }}
-      border="1px"
-      borderColor="border"
-      borderRadius="sm"
-      boxShadow={{ lg: cardBoxShadow }}
-      maxW={{ base: "full", lg: "640px" }}
-      p={8}
-      top={{ lg: 24 }}
-      insetInlineStart={{ lg: 24 }}
-      zIndex={10}
-      {...props}
-    />
-  )
-}
-
 const LastUpdated = (props: ChildOnlyProp) => (
   <Text
     color="text200"
     fontStyle="italic"
     pt={4}
     mb={0}
     borderTop="1px"
-    borderColor="border"
+    borderColor="body.dark"
     {...props}
   />
 )
@@ -178,41 +108,29 @@ export const UpgradeLayout = ({
 
   return (
     <Container dir={contentNotTranslated ? "ltr" : "unset"}>
-      <HeroContainer>
-        <TitleCard>
-          <Breadcrumbs slug={slug} startDepth={1} mt={2} mb="8" />
-          <Title>{frontmatter.title}</Title>
-          <Box>
-            <List listStyleType="disc">
-              {summaryPoints.map((point, idx) => (
-                <ListItem key={idx}>{point}</ListItem>
-              ))}
-            </List>
-          </Box>
-          {lastUpdatedDate && (
-            <LastUpdated>
-              {t("common:page-last-updated")}:{" "}
-              {getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
-            </LastUpdated>
-          )}
-        </TitleCard>
-        {frontmatter.image && (
-          <Image
-            src={frontmatter.image}
-            blurDataURL={frontmatter.blurDataURL}
-            alt={frontmatter.alt}
-            width={816}
-            height={525}
-            style={{ objectFit: "cover" }}
-            priority
-            flex={{ base: "1 1 100%", md: "none" }}
-            alignSelf={{ base: "center", md: "flex-end" }}
-          />
-        )}
-      </HeroContainer>
-      <MoreContent to={"#" + MAIN_CONTENT_ID}>
-        <Icon as={MdExpandMore} fontSize="2xl" color="secondary" />
-      </MoreContent>
+      <ContentHero
+        breadcrumbs={{ slug, startDepth: 1 }}
+        title={frontmatter.title}
+        description={
+          <>
+            <Box>
+              <List listStyleType="disc">
+                {summaryPoints.map((point, idx) => (
+                  <ListItem key={idx}>{point}</ListItem>
+                ))}
+              </List>
+            </Box>
+            {lastUpdatedDate && (
+              <LastUpdated>
+                {t("common:page-last-updated")}:{" "}
+                {getLocaleTimestamp(locale as Lang, lastUpdatedDate)}
+              </LastUpdated>
+            )}
+          </>
+        }
+        heroImg={frontmatter.image}
+        blurDataURL={frontmatter.blurDataURL}
+      />
       <Page>
         {/* TODO: Switch to `above="lg"` after completion of Chakra Migration */}
         <LeftNavBar