feat(bannergridcell): add story for bannergrid cell component [closes #13046]

Author: Baystef

src/components/BannerGrid/BannerGrid.stories.tsx

@@ -21,7 +21,7 @@ import {
 import stats from "@/public/images/upgrades/newrings.png"
 
 const meta = {
-  title: "Molecules / Display Content / Banner",
+  title: "Molecules / Display Content / Banner Grid",
   component: BannerComponent,
   parameters: {
     layout: "fullscreen",
@@ -59,19 +59,50 @@ export const Banner: Story = {
 export const BannerBody: Story = {
   render: () => {
     return (
-      <BannerBodyComponent>
-        <div>What </div>
-      </BannerBodyComponent>
+      <BannerComponent>
+        <BannerBodyComponent>
+          <div>What </div>
+        </BannerBodyComponent>
+      </BannerComponent>
     )
   },
 }
 
 export const BannerImage: Story = {
   render: () => {
     return (
-      <BannerImageComponent>
-        <Image src={stats} alt="" width={400} />
-      </BannerImageComponent>
+      <BannerComponent>
+        <BannerImageComponent>
+          <Image src={stats} alt="" width={400} />
+        </BannerImageComponent>
+      </BannerComponent>
+    )
+  },
+}
+
+export const BannerGridCell: Story = {
+  render: () => {
+    const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
+    return (
+      <BannerComponent>
+        <BannerGridCellComponent>
+          <Box fontSize="5xl" mb={4} lineHeight={1}>
+            4k+
+          </Box>
+          <Box fontSize="md" color="text200">
+            {getTranslation(
+              "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
+              PAGE_WHAT_IS_ETH
+            )}
+            <Text as="span" whiteSpace="nowrap">
+              &nbsp;
+              <Box as="span">
+                <Icon as={MdInfoOutline} verticalAlign="middle" />
+              </Box>
+            </Text>
+          </Box>
+        </BannerGridCellComponent>
+      </BannerComponent>
     )
   },
 }
@@ -80,27 +111,29 @@ export const BannerGrid: Story = {
   render: () => {
     const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
     return (
-      <BannerGridComponent>
-        {Array.from({ length: 6 }, (_, i) => i + 1).map((item) => (
-          <BannerGridCellComponent key={item}>
-            <Box fontSize="5xl" mb={4} lineHeight={1}>
-              {item}k+
-            </Box>
-            <Box fontSize="md" color="text200">
-              {getTranslation(
-                "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
-                PAGE_WHAT_IS_ETH
-              )}
-              <Text as="span" whiteSpace="nowrap">
-                &nbsp;
-                <Box as="span">
-                  <Icon as={MdInfoOutline} verticalAlign="middle" />
-                </Box>
-              </Text>
-            </Box>
-          </BannerGridCellComponent>
-        ))}
-      </BannerGridComponent>
+      <BannerComponent>
+        <BannerGridComponent>
+          {Array.from({ length: 6 }, (_, i) => i + 1).map((item) => (
+            <BannerGridCellComponent key={item}>
+              <Box fontSize="5xl" mb={4} lineHeight={1}>
+                {item}k+
+              </Box>
+              <Box fontSize="md" color="text200">
+                {getTranslation(
+                  "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
+                  PAGE_WHAT_IS_ETH
+                )}
+                <Text as="span" whiteSpace="nowrap">
+                  &nbsp;
+                  <Box as="span">
+                    <Icon as={MdInfoOutline} verticalAlign="middle" />
+                  </Box>
+                </Text>
+              </Box>
+            </BannerGridCellComponent>
+          ))}
+        </BannerGridComponent>
+      </BannerComponent>
     )
   },
 }