Skip to content

Commit 2d70f03

Browse files
corwintinescorwintines
authored
Merge branch 'dev' into remove-cohort-banner
2 parents cb4fb77 + 124bcf5 commit 2d70f03

File tree

19 files changed

+518
-58
lines changed

19 files changed

+518
-58
lines changed

‎.storybook/i18next.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import i18n, { Resource } from "i18next"
22
import { initReactI18next } from "gatsby-plugin-react-i18next"
3-
import fs from "fs"
43

54
export const baseLocales = {
65
en: { title: "English", left: "En" },
@@ -15,6 +14,7 @@ const ns = [
1514
"glossary",
1615
"page-about",
1716
"page-index",
17+
"page-learn",
1818
"page-upgrades",
1919
"page-developers-index",
2020
]

‎.storybook/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const config: StorybookConfig = {
1313
"@chakra-ui/storybook-addon",
1414
"storybook-react-i18next",
1515
],
16-
staticDirs: ["../static"],
16+
staticDirs: ["../static", "../src/assets"],
1717
babel: async () => ({
1818
...babelConfig,
1919
}),

‎src/assets/heroes/learn-hub-hero.png

3.76 MB
Loading

‎src/assets/mainnet.png

221 KB
Loading

‎src/components/Hero/CallToAction.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from "react"
2+
import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
3+
import { Button, type IButtonProps } from "../Buttons"
4+
5+
export type CallToActionProps = Omit<IButtonProps, "children" | "content"> & {
6+
content: React.ReactNode
7+
matomo: MatomoEventOptions
8+
}
9+
10+
export function CallToAction(props: CallToActionProps & { index: React.Key }) {
11+
const { content, matomo, index, ...rest } = props
12+
13+
const handleClick = () => trackCustomEvent(matomo)
14+
15+
const buttonProps: IButtonProps = {
16+
variant: index === 0 ? "solid" : "outline",
17+
isSecondary: index !== 0,
18+
flex: { base: 1, md: "initial" },
19+
}
20+
21+
return (
22+
<Button onClick={handleClick} {...buttonProps} {...rest}>
23+
{content}
24+
</Button>
25+
)
26+
}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react"
2+
import { Meta, StoryObj } from "@storybook/react"
3+
import ContentHeroComponent, { ContentHeroProps } from "."
4+
import { IGatsbyImageData } from "gatsby-plugin-image"
5+
import { useTranslation } from "gatsby-plugin-react-i18next"
6+
7+
type ContentHeroType = typeof ContentHeroComponent
8+
9+
const meta = {
10+
title: "Organisms / Layouts / Hero",
11+
component: ContentHeroComponent,
12+
parameters: {
13+
layout: "none",
14+
},
15+
argTypes: {
16+
heroImgSrc: {
17+
table: {
18+
disable: true,
19+
},
20+
},
21+
},
22+
} satisfies Meta<ContentHeroType>
23+
24+
export default meta
25+
26+
// Comes from the original compiled querying
27+
const mockGatsbyImgData: IGatsbyImageData = {
28+
layout: "constrained",
29+
images: {
30+
fallback: {
31+
src: "/mainnet.png",
32+
sizes: "100vw",
33+
},
34+
sources: [
35+
{
36+
srcSet: "/mainnet.png",
37+
type: "image/webp",
38+
sizes: "100vw",
39+
},
40+
],
41+
},
42+
width: 1,
43+
height: 1,
44+
}
45+
46+
export const ContentHero: StoryObj = {
47+
render: () => {
48+
const { t } = useTranslation()
49+
50+
const buttons: ContentHeroProps["buttons"] = [
51+
{
52+
content: t("hero-button-lets-get-started"),
53+
toId: "what-is-crypto-ethereum",
54+
matomo: {
55+
eventCategory: "learn hub hero buttons",
56+
eventAction: "click",
57+
eventName: "lets get started",
58+
},
59+
},
60+
{
61+
content: "Button",
62+
matomo: {
63+
eventCategory: "learn hub hero buttons",
64+
eventAction: "click",
65+
eventName: "lets get started",
66+
},
67+
},
68+
]
69+
return (
70+
<ContentHeroComponent
71+
breadcrumbs={{ slug: "/en/run-a-node/" }}
72+
heroImgSrc={mockGatsbyImgData}
73+
title={t("hero-header")}
74+
description={t("hero-subtitle")}
75+
buttons={buttons}
76+
/>
77+
)
78+
},
79+
}

‎src/components/Hero/ContentHero/index.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as React from "react"
2+
import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
3+
import Breadcrumbs, { IProps as BreadcrumbsProps } from "../../Breadcrumbs"
4+
import GatsbyImage from "../../GatsbyImage"
5+
import { CallToAction } from "../CallToAction"
6+
import { CommonHeroProps } from "../utils"
7+
8+
export interface ContentHeroProps extends Omit<CommonHeroProps, "header"> {
9+
breadcrumbs: BreadcrumbsProps
10+
}
11+
12+
const ContentHero = (props: ContentHeroProps) => {
13+
const { breadcrumbs, heroImgSrc, buttons, title, description } = props
14+
return (
15+
<Box bgImg="bgMainGradient">
16+
<SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
17+
<Box
18+
height={{ base: "300px", md: "400px", lg: "full" }}
19+
order={{ lg: 1 }}
20+
>
21+
<GatsbyImage
22+
alt=""
23+
image={heroImgSrc}
24+
loading="eager"
25+
objectFit="contain"
26+
boxSize="full"
27+
/>
28+
</Box>
29+
<Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
30+
<Breadcrumbs {...breadcrumbs} />
31+
<Stack spacing="6">
32+
<Heading as="h1" size="2xl">
33+
{title}
34+
</Heading>
35+
<Text fontSize="lg">{description}</Text>
36+
<HStack spacing="4">
37+
{buttons
38+
? buttons.map((button, idx) => {
39+
if (!button) return
40+
41+
return <CallToAction key={idx} index={idx} {...button} />
42+
})
43+
: null}
44+
</HStack>
45+
</Stack>
46+
{/* TODO:
47+
* Add conditional Big Stat box here
48+
*/}
49+
</Stack>
50+
</SimpleGrid>
51+
</Box>
52+
)
53+
}
54+
55+
export default ContentHero

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from "react"
2+
import { Meta, StoryObj } from "@storybook/react"
3+
import HomeHeroComponent from "."
4+
import { IGatsbyImageData } from "gatsby-plugin-image"
5+
6+
type HomeHeroType = typeof HomeHeroComponent
7+
8+
const meta = {
9+
title: "Organisms / Layouts / Hero",
10+
component: HomeHeroComponent,
11+
parameters: {
12+
layout: "none",
13+
},
14+
argTypes: {
15+
heroImgSrc: {
16+
table: {
17+
disable: true,
18+
},
19+
},
20+
},
21+
} satisfies Meta<HomeHeroType>
22+
23+
export default meta
24+
25+
// Comes from the original compiled querying
26+
const mockGatsbyImgData: IGatsbyImageData = {
27+
layout: "fullWidth",
28+
images: {
29+
fallback: {
30+
src: "/home/hero.png",
31+
sizes: "100vw",
32+
},
33+
sources: [
34+
{
35+
srcSet: "/home/hero.png",
36+
type: "image/webp",
37+
sizes: "100vw",
38+
},
39+
],
40+
},
41+
width: 1,
42+
height: 1,
43+
}
44+
45+
export const HomeHero: StoryObj<typeof meta> = {
46+
args: {
47+
heroImgSrc: mockGatsbyImgData,
48+
},
49+
render: (args) => <HomeHeroComponent {...args} />,
50+
}

‎src/components/Hero/HomeHero/index.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from "react"
2+
import { useTranslation } from "react-i18next"
3+
import { Box, Heading, Stack, Text, VStack } from "@chakra-ui/react"
4+
import { ButtonLink } from "../../Buttons"
5+
import Morpher from "../../Morpher"
6+
import Translation from "../../Translation"
7+
import GatsbyImage from "../../GatsbyImage"
8+
import { CommonHeroProps } from "../utils"
9+
10+
export interface HomeHeroProps extends Pick<CommonHeroProps, "heroImgSrc"> {}
11+
12+
const HomeHero = ({ heroImgSrc }: HomeHeroProps) => {
13+
const { t } = useTranslation()
14+
return (
15+
<Box>
16+
<GatsbyImage
17+
image={heroImgSrc}
18+
alt={t("page-index-hero-image-alt")}
19+
loading="eager"
20+
w="full"
21+
height={{ base: "300px", sm: "350px", md: "380px", lg: "440px" }}
22+
/>
23+
<VStack>
24+
<Stack
25+
spacing={{ base: "4", lg: "7" }}
26+
textAlign="center"
27+
mx="4"
28+
py="8"
29+
maxW="2xl"
30+
>
31+
<Morpher />
32+
<VStack spacing="6">
33+
<Heading as="h1" size="2xl">
34+
<Translation id="page-index-title" />
35+
</Heading>
36+
<Text size="xl">
37+
<Translation id="page-index-description" />
38+
</Text>
39+
<ButtonLink to="/learn/">
40+
<Translation id="page-index-title-button" />
41+
</ButtonLink>
42+
</VStack>
43+
</Stack>
44+
</VStack>
45+
</Box>
46+
)
47+
}
48+
49+
export default HomeHero

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import * as React from "react"
2+
import { Meta, StoryObj } from "@storybook/react"
3+
import HubHeroComponent, { HubHeroProps } from "./"
4+
import { Box } from "@chakra-ui/react"
5+
import { IGatsbyImageData } from "gatsby-plugin-image"
6+
import { useTranslation } from "react-i18next"
7+
8+
type HubHeroType = typeof HubHeroComponent
9+
10+
const meta = {
11+
title: "Organisms / Layouts / Hero",
12+
component: HubHeroComponent,
13+
parameters: {
14+
layout: "none",
15+
},
16+
decorators: [
17+
(Story) => (
18+
<Box maxW="container.2xl" mx="auto">
19+
<Story />
20+
</Box>
21+
),
22+
],
23+
} satisfies Meta<HubHeroType>
24+
25+
export default meta
26+
27+
const mockGatsbyImgData: IGatsbyImageData = {
28+
layout: "fullWidth",
29+
images: {
30+
fallback: {
31+
src: "/heroes/learn-hub-hero.png",
32+
sizes: "100vw",
33+
},
34+
sources: [
35+
{
36+
srcSet: "/heroes/learn-hub-hero.png",
37+
type: "image/webp",
38+
sizes: "100vw",
39+
},
40+
],
41+
},
42+
width: 1,
43+
height: 1,
44+
}
45+
46+
export const HubHero: StoryObj<typeof meta> = {
47+
args: {
48+
title: "learn-hub",
49+
header: "hero-header",
50+
description: "hero-subtitle",
51+
heroImgSrc: mockGatsbyImgData,
52+
},
53+
render: (args) => {
54+
const { t } = useTranslation()
55+
const { title, header, description, ...rest } = args
56+
57+
const buttons: HubHeroProps["buttons"] = [
58+
{
59+
content: t("hero-button-lets-get-started"),
60+
toId: "what-is-crypto-ethereum",
61+
matomo: {
62+
eventCategory: "learn hub hero buttons",
63+
eventAction: "click",
64+
eventName: "lets get started",
65+
},
66+
},
67+
{
68+
content: "Button",
69+
matomo: {
70+
eventCategory: "learn hub hero buttons",
71+
eventAction: "click",
72+
eventName: "lets get started",
73+
},
74+
},
75+
]
76+
77+
return (
78+
<HubHeroComponent
79+
title={t(title)}
80+
header={t(header)}
81+
description={t(description)}
82+
buttons={buttons}
83+
{...rest}
84+
/>
85+
)
86+
},
87+
}

0 commit comments

Comments
 (0)