Merge pull request #13262 from Baystef/feat/mergeinfographic-story

Create story tests for MergeInfoGraphic component [#13242]

.storybook/i18next.ts

@@ -21,6 +21,7 @@ export const ns = [
   "page-upgrades",
   "page-developers-index",
   "page-what-is-ethereum",
+  "page-upgrades-index",
 ] as const
 const supportedLngs = Object.keys(baseLocales)
 

src/@chakra-ui/components/Accordion.ts

@@ -6,10 +6,10 @@ const { defineMultiStyleConfig, definePartsStyle } =
 
 const baseStyle = definePartsStyle({
   container: {
-    '& > :is(h2, h3)': {
+    "& > :is(h2, h3)": {
       fontSize: "initial",
-      fontWeight: 'initial'
-    }
+      fontWeight: "initial",
+    },
   },
   button: {
     py: "2",

src/components/MergeInfographic/MergeInfographic.stories.tsx

@@ -0,0 +1,36 @@
+import { Box } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { ContentContainer } from "@/components/MdComponents"
+
+import { langViewportModes } from "../../../.storybook/modes"
+
+import MergeInfographicComponent from "."
+
+const meta = {
+  title: "Atoms / Media & Icons / MergeInfographic",
+  component: MergeInfographicComponent,
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box maxW="1008px" mx="auto">
+        <ContentContainer>
+          <Story />
+        </ContentContainer>
+      </Box>
+    ),
+  ],
+} satisfies Meta<typeof MergeInfographicComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const MergeInfographic: Story = {}

src/components/ui/__stories__/Heading.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <Center className='flex-col min-h-[100vh]'>
+      <Center className="min-h-[100vh] flex-col">
         <Story />
       </Center>
     ),
@@ -31,7 +31,7 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const 
+const headings = ["h1", "h2", "h3", "h4", "h5", "h6"] as const
 
 export const Heading: Story = {
   render: () => (
@@ -42,9 +42,7 @@ export const Heading: Story = {
       </div>
       <Stack>
         {headings.map((Heading) => (
-            <Heading key={Heading}>
-              {`${Heading} base component`}
-            </Heading>
+          <Heading key={Heading}>{`${Heading} base component`}</Heading>
         ))}
       </Stack>
     </>