diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx new file mode 100644 index 00000000000..1b41b3d54ae --- /dev/null +++ b/src/components/BannerGrid/BannerGrid.stories.tsx @@ -0,0 +1,180 @@ +import { MdInfoOutline } from "react-icons/md" +import { Meta, StoryObj } from "@storybook/react" + +import { ChildOnlyProp } from "@/lib/types" + +import { TwImage } from "@/components/Image" +import InlineLink from "@/components/Link" +import Tooltip from "@/components/Tooltip" + +import { getTranslation } from "@/storybook-utils" + +import { langViewportModes } from "../../../.storybook/modes" +import { ContentContainer } from "../MdComponents" + +import { + Banner as BannerComponent, + BannerBody as BannerBodyComponent, + BannerGrid as BannerGridComponent, + BannerGridCell as BannerGridCellComponent, + BannerImage as BannerImageComponent, +} from "." + +import stats from "@/public/images/upgrades/newrings.png" + +const meta = { + title: "Molecules / Display Content / Banner Grid", + component: BannerComponent, + parameters: { + layout: "fullscreen", + chromatic: { + modes: { + ...langViewportModes, + }, + }, + }, + decorators: [ + (Story) => ( +
+ + + +
+ ), + ], +} satisfies Meta + +export default meta + +type Story = StoryObj + +const PAGE_WHAT_IS_ETH = "page-what-is-ethereum" + +const tooltipContent = ({ apiUrl, apiProvider, ariaLabel }) => ( +
+ {getTranslation("data-provided-by", "common")}{" "} + + {apiProvider} + +
+) + +const StatPrimary = (props: ChildOnlyProp) => ( +
+) + +const StatDescription = (props: ChildOnlyProp) => ( +
+) + +export const Banner: Story = { + render: () => { + return ( + +
Banner
+ + ) + }, +} + +export const BannerBody: Story = { + render: () => { + return ( + + +
+ Banner Body +
+ + + ) + }, +} + +export const BannerImage: Story = { + render: () => { + return ( + + + + + + ) + }, +} + +export const BannerGridCell: Story = { + render: () => { + return ( + + + + 4k+ + + {getTranslation( + "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc", + PAGE_WHAT_IS_ETH + )} + +   + + + + + + + + + + + ) + }, +} + +export const BannerGrid: Story = { + render: () => { + return ( + + + + {Array.from({ length: 6 }, (_, i) => i + 1).map((item) => ( + + {item}k+ + + {getTranslation( + "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc", + PAGE_WHAT_IS_ETH + )} + +   + + + + + + + + + ))} + + + + + + + ) + }, +}