From 0b1171eecb71e8a9c15506e69079126784fcd9c9 Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Fri, 2 Aug 2024 18:39:15 +0100
Subject: [PATCH 1/6] feat(BannerGrid): add bannergrid story

---
 .../BannerGrid/BannerGrid.stories.tsx         | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 src/components/BannerGrid/BannerGrid.stories.tsx

diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx
new file mode 100644
index 00000000000..ff6827efa6d
--- /dev/null
+++ b/src/components/BannerGrid/BannerGrid.stories.tsx
@@ -0,0 +1,100 @@
+import { MdInfoOutline } from "react-icons/md"
+import { Box, Icon } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { Image } from "@/components/Image"
+import Text from "@/components/OldText"
+
+import { getTranslation } from "@/storybook-utils"
+
+import { langViewportModes } from "../../../.storybook/modes"
+
+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",
+  component: BannerComponent,
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box position="relative" w="full">
+        {/* <ContentContainer> */}
+          <Story />
+        {/* </ContentContainer> */}
+      </Box>
+    )
+  ]
+} satisfies Meta<typeof BannerComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>;
+
+export const Banner: Story = {
+  render: () => {
+    return (
+      <BannerComponent>
+        <div>What </div>
+      </BannerComponent>
+    )
+  }
+}
+
+export const BannerBody: Story = {
+  render: () => {
+    return (
+      <BannerBodyComponent>
+        <div>What </div>
+      </BannerBodyComponent>
+    )
+  }
+}
+
+export const BannerImage: Story = {
+  render: () => {
+    return (
+      <BannerImageComponent>
+        <Image src={stats} alt="" width={400} />
+      </BannerImageComponent>
+    )
+  }
+}
+
+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>
+    )
+  }
+}
\ No newline at end of file

From 940776600956605b3ac6d86cca594a1ce7eb4054 Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Fri, 2 Aug 2024 18:45:17 +0100
Subject: [PATCH 2/6] chore(update): run yarn install

---
 .../BannerGrid/BannerGrid.stories.tsx         | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx
index ff6827efa6d..2ccce91b593 100644
--- a/src/components/BannerGrid/BannerGrid.stories.tsx
+++ b/src/components/BannerGrid/BannerGrid.stories.tsx
@@ -8,9 +8,11 @@ import Text from "@/components/OldText"
 import { getTranslation } from "@/storybook-utils"
 
 import { langViewportModes } from "../../../.storybook/modes"
+import { ContentContainer } from "../MdComponents"
 
 import {
-  Banner as BannerComponent, BannerBody as BannerBodyComponent,
+  Banner as BannerComponent,
+  BannerBody as BannerBodyComponent,
   BannerGrid as BannerGridComponent,
   BannerGridCell as BannerGridCellComponent,
   BannerImage as BannerImageComponent,
@@ -18,7 +20,6 @@ import {
 
 import stats from "@/public/images/upgrades/newrings.png"
 
-
 const meta = {
   title: "Molecules / Display Content / Banner",
   component: BannerComponent,
@@ -33,17 +34,17 @@ const meta = {
   decorators: [
     (Story) => (
       <Box position="relative" w="full">
-        {/* <ContentContainer> */}
+        <ContentContainer>
           <Story />
-        {/* </ContentContainer> */}
+        </ContentContainer>
       </Box>
-    )
-  ]
+    ),
+  ],
 } satisfies Meta<typeof BannerComponent>
 
 export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const Banner: Story = {
   render: () => {
@@ -52,7 +53,7 @@ export const Banner: Story = {
         <div>What </div>
       </BannerComponent>
     )
-  }
+  },
 }
 
 export const BannerBody: Story = {
@@ -62,7 +63,7 @@ export const BannerBody: Story = {
         <div>What </div>
       </BannerBodyComponent>
     )
-  }
+  },
 }
 
 export const BannerImage: Story = {
@@ -72,7 +73,7 @@ export const BannerImage: Story = {
         <Image src={stats} alt="" width={400} />
       </BannerImageComponent>
     )
-  }
+  },
 }
 
 export const BannerGrid: Story = {
@@ -80,21 +81,26 @@ export const BannerGrid: Story = {
     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>)}
+        {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>
     )
-  }
-}
\ No newline at end of file
+  },
+}

From c35d3c4035adf9a5c8158f956033fee72eeb8194 Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Sat, 3 Aug 2024 07:52:25 +0100
Subject: [PATCH 3/6] feat(bannergridcell): add story for bannergrid cell
 component [closes #13046]

---
 .../BannerGrid/BannerGrid.stories.tsx         | 89 +++++++++++++------
 1 file changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx
index 2ccce91b593..86799076f44 100644
--- a/src/components/BannerGrid/BannerGrid.stories.tsx
+++ b/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,9 +59,11 @@ export const Banner: Story = {
 export const BannerBody: Story = {
   render: () => {
     return (
-      <BannerBodyComponent>
-        <div>What </div>
-      </BannerBodyComponent>
+      <BannerComponent>
+        <BannerBodyComponent>
+          <div>What </div>
+        </BannerBodyComponent>
+      </BannerComponent>
     )
   },
 }
@@ -69,9 +71,38 @@ export const BannerBody: Story = {
 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>
     )
   },
 }

From 6864cc70e76ad6ce2834f7fc16adc0edf6335e6a Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Mon, 5 Aug 2024 09:36:19 +0100
Subject: [PATCH 4/6] chore(banner image): add banner image to banner grid
 substory

---
 .../BannerGrid/BannerGrid.stories.tsx         | 123 ++++++++++++------
 1 file changed, 81 insertions(+), 42 deletions(-)

diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx
index 86799076f44..76b388ff7fd 100644
--- a/src/components/BannerGrid/BannerGrid.stories.tsx
+++ b/src/components/BannerGrid/BannerGrid.stories.tsx
@@ -3,7 +3,9 @@ import { Box, Icon } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import { Image } from "@/components/Image"
+import InlineLink from "@/components/Link"
 import Text from "@/components/OldText"
+import Tooltip from "@/components/Tooltip"
 
 import { getTranslation } from "@/storybook-utils"
 
@@ -46,11 +48,24 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
+
+const tooltipContent = ({ apiUrl, apiProvider, ariaLabel }) => (
+  <div>
+    {getTranslation("data-provided-by", "common")}{" "}
+    <InlineLink href={apiUrl} aria-label={ariaLabel}>
+      {apiProvider}
+    </InlineLink>
+  </div>
+)
+
 export const Banner: Story = {
   render: () => {
     return (
       <BannerComponent>
-        <div>What </div>
+        <Box fontSize="md" color="text200">
+          Banner
+        </Box>
       </BannerComponent>
     )
   },
@@ -61,7 +76,9 @@ export const BannerBody: Story = {
     return (
       <BannerComponent>
         <BannerBodyComponent>
-          <div>What </div>
+          <Box fontSize="md" color="text200">
+            Banner Body
+          </Box>
         </BannerBodyComponent>
       </BannerComponent>
     )
@@ -82,26 +99,35 @@ export const BannerImage: Story = {
 
 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>
+        <BannerBodyComponent>
+          <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;
+                <Tooltip
+                  content={tooltipContent({
+                    apiUrl: "https://dappradar.com/rankings/protocol/ethereum",
+                    apiProvider: "State of the dapps",
+                    ariaLabel: "Read more about Ethereum projects stats",
+                  })}
+                >
+                  <Box as="span">
+                    <Icon as={MdInfoOutline} verticalAlign="middle" />
+                  </Box>
+                </Tooltip>
+              </Text>
+            </Box>
+          </BannerGridCellComponent>
+        </BannerBodyComponent>
       </BannerComponent>
     )
   },
@@ -109,30 +135,43 @@ export const BannerGridCell: Story = {
 
 export const BannerGrid: Story = {
   render: () => {
-    const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
     return (
       <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>
+        <BannerBodyComponent>
+          <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;
+                    <Tooltip
+                      content={tooltipContent({
+                        apiUrl:
+                          "https://dappradar.com/rankings/protocol/ethereum",
+                        apiProvider: "State of the dapps",
+                        ariaLabel: "Read more about Ethereum projects stats",
+                      })}
+                    >
+                      <Box as="span">
+                        <Icon as={MdInfoOutline} verticalAlign="middle" />
+                      </Box>
+                    </Tooltip>
+                  </Text>
+                </Box>
+              </BannerGridCellComponent>
+            ))}
+          </BannerGridComponent>
+        </BannerBodyComponent>
+        <BannerImageComponent>
+          <Image src={stats} alt="" width={400} />
+        </BannerImageComponent>
       </BannerComponent>
     )
   },

From 85bd9c232408defb4830cd0c97f5a15ccfd36be7 Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Thu, 29 Aug 2024 15:40:06 +0100
Subject: [PATCH 5/6] fix(tooltip): wrap parent story with tooltipprovider

---
 .../BannerGrid/BannerGrid.stories.tsx         | 71 ++++++++++---------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx
index 76b388ff7fd..97b303ebd00 100644
--- a/src/components/BannerGrid/BannerGrid.stories.tsx
+++ b/src/components/BannerGrid/BannerGrid.stories.tsx
@@ -1,16 +1,17 @@
 import { MdInfoOutline } from "react-icons/md"
-import { Box, Icon } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { Image } from "@/components/Image"
+import { ChildOnlyProp } from "@/lib/types"
+
+import { TwImage } from "@/components/Image"
 import InlineLink from "@/components/Link"
-import Text from "@/components/OldText"
 import Tooltip from "@/components/Tooltip"
 
 import { getTranslation } from "@/storybook-utils"
 
 import { langViewportModes } from "../../../.storybook/modes"
 import { ContentContainer } from "../MdComponents"
+import { TooltipProvider } from "../ui/tooltip"
 
 import {
   Banner as BannerComponent,
@@ -35,11 +36,13 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <Box position="relative" w="full">
+      <div className="relative w-full">
         <ContentContainer>
-          <Story />
+          <TooltipProvider>
+            <Story />
+          </TooltipProvider>
         </ContentContainer>
-      </Box>
+      </div>
     ),
   ],
 } satisfies Meta<typeof BannerComponent>
@@ -59,13 +62,19 @@ const tooltipContent = ({ apiUrl, apiProvider, ariaLabel }) => (
   </div>
 )
 
+const StatPrimary = (props: ChildOnlyProp) => (
+  <div className="mb-4 text-5xl leading-none" {...props} />
+)
+
+const StatDescription = (props: ChildOnlyProp) => (
+  <div className="text-md text-[#666] dark:text-[#b2b2b2]" {...props} />
+)
+
 export const Banner: Story = {
   render: () => {
     return (
       <BannerComponent>
-        <Box fontSize="md" color="text200">
-          Banner
-        </Box>
+        <div className="text-md text-[#666] dark:text-[#b2b2b2]">Banner</div>
       </BannerComponent>
     )
   },
@@ -76,9 +85,9 @@ export const BannerBody: Story = {
     return (
       <BannerComponent>
         <BannerBodyComponent>
-          <Box fontSize="md" color="text200">
+          <div className="text-md text-[#666] dark:text-[#b2b2b2]">
             Banner Body
-          </Box>
+          </div>
         </BannerBodyComponent>
       </BannerComponent>
     )
@@ -90,7 +99,7 @@ export const BannerImage: Story = {
     return (
       <BannerComponent>
         <BannerImageComponent>
-          <Image src={stats} alt="" width={400} />
+          <TwImage src={stats} alt="" width={400} />
         </BannerImageComponent>
       </BannerComponent>
     )
@@ -103,15 +112,13 @@ export const BannerGridCell: Story = {
       <BannerComponent>
         <BannerBodyComponent>
           <BannerGridCellComponent>
-            <Box fontSize="5xl" mb={4} lineHeight={1}>
-              4k+
-            </Box>
-            <Box fontSize="md" color="text200">
+            <StatPrimary>4k+</StatPrimary>
+            <StatDescription>
               {getTranslation(
                 "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
                 PAGE_WHAT_IS_ETH
               )}
-              <Text as="span" whiteSpace="nowrap">
+              <span className="whitespace-nowrap">
                 &nbsp;
                 <Tooltip
                   content={tooltipContent({
@@ -120,12 +127,12 @@ export const BannerGridCell: Story = {
                     ariaLabel: "Read more about Ethereum projects stats",
                   })}
                 >
-                  <Box as="span">
-                    <Icon as={MdInfoOutline} verticalAlign="middle" />
-                  </Box>
+                  <span>
+                    <MdInfoOutline className="inline-block align-middle" />
+                  </span>
                 </Tooltip>
-              </Text>
-            </Box>
+              </span>
+            </StatDescription>
           </BannerGridCellComponent>
         </BannerBodyComponent>
       </BannerComponent>
@@ -141,15 +148,13 @@ export const BannerGrid: Story = {
           <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">
+                <StatPrimary>{item}k+</StatPrimary>
+                <StatDescription>
                   {getTranslation(
                     "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
                     PAGE_WHAT_IS_ETH
                   )}
-                  <Text as="span" whiteSpace="nowrap">
+                  <span className="whitespace-nowrap">
                     &nbsp;
                     <Tooltip
                       content={tooltipContent({
@@ -159,18 +164,18 @@ export const BannerGrid: Story = {
                         ariaLabel: "Read more about Ethereum projects stats",
                       })}
                     >
-                      <Box as="span">
-                        <Icon as={MdInfoOutline} verticalAlign="middle" />
-                      </Box>
+                      <span>
+                        <MdInfoOutline className="inline-block align-middle" />
+                      </span>
                     </Tooltip>
-                  </Text>
-                </Box>
+                  </span>
+                </StatDescription>
               </BannerGridCellComponent>
             ))}
           </BannerGridComponent>
         </BannerBodyComponent>
         <BannerImageComponent>
-          <Image src={stats} alt="" width={400} />
+          <TwImage src={stats} alt="" width={400} />
         </BannerImageComponent>
       </BannerComponent>
     )

From 8610e4ed0cb0dbfee769561565d04e7866d6126c Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Wed, 4 Sep 2024 15:20:17 +0100
Subject: [PATCH 6/6] refactor(tooltip provider): move tooltip provider to the
 preview file so it can be a root parent for all stories

---
 .storybook/preview.tsx                           | 5 ++++-
 src/components/BannerGrid/BannerGrid.stories.tsx | 5 +----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 5776e202de3..191fa7888d7 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import { MotionGlobalConfig } from "framer-motion"
 import type { Preview } from "@storybook/react"
 
 import ThemeProvider from "@/components/ThemeProvider"
+import { TooltipProvider } from "@/components/ui/tooltip"
 
 import i18n, { baseLocales } from "./i18next"
 import { withNextThemes } from "./withNextThemes"
@@ -39,7 +40,9 @@ const preview: Preview = {
     }),
     (Story) => (
       <ThemeProvider>
-        <Story />
+        <TooltipProvider>
+          <Story />
+        </TooltipProvider>
       </ThemeProvider>
     ),
   ],
diff --git a/src/components/BannerGrid/BannerGrid.stories.tsx b/src/components/BannerGrid/BannerGrid.stories.tsx
index 97b303ebd00..1b41b3d54ae 100644
--- a/src/components/BannerGrid/BannerGrid.stories.tsx
+++ b/src/components/BannerGrid/BannerGrid.stories.tsx
@@ -11,7 +11,6 @@ import { getTranslation } from "@/storybook-utils"
 
 import { langViewportModes } from "../../../.storybook/modes"
 import { ContentContainer } from "../MdComponents"
-import { TooltipProvider } from "../ui/tooltip"
 
 import {
   Banner as BannerComponent,
@@ -38,9 +37,7 @@ const meta = {
     (Story) => (
       <div className="relative w-full">
         <ContentContainer>
-          <TooltipProvider>
-            <Story />
-          </TooltipProvider>
+          <Story />
         </ContentContainer>
       </div>
     ),