chore(ui): fix Grid stories after Typescript migration (#598)

* chore(ui): fix grid stories after ts migration * chore(ui): fix Grid story styling * chore(ui): fix Grid from col 5 to 6 * chore(ui): slight adjustments to Story --------- Co-authored-by: Andreas Pfau <[email protected]>
cloudoperators · Nov 8, 2024 · 25255c8 · 25255c8
1 parent 5a4e3d1
commit 25255c8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/packages/ui-components/src/components/Grid/Grid.stories.tsx b/packages/ui-components/src/components/Grid/Grid.stories.tsx
@@ -5,26 +5,31 @@
 
 import React from "react"
 import { StoryFn, Meta } from "@storybook/react"
-import { Grid } from "./Grid.component"
+
+import { Grid, GridProps } from "./Grid.component"
 import { GridRow } from "../GridRow/GridRow.component"
 import { GridColumn } from "../GridColumn/GridColumn.component"
 
 export default {
   title: "Layout/Grid/Grid",
   component: Grid,
   argTypes: {
-    children: { control: false },
+    children: {
+      control: false,
+    },
   },
   decorators: [
     (Story) => (
-      <div className="jn-bg-juno-blue-3 jn-text-juno-grey-blue">
+      <div className="juno-container jn-px-6 jn-py-6">
         <Story />
       </div>
     ),
   ],
 } as Meta<typeof Grid>
 
-const Template: StoryFn<typeof Grid> = (args) => <Grid {...args} />
+const Template: StoryFn<GridProps> = (args) => (
+  <Grid {...args} className={`jn-bg-juno-blue-3 jn-text-juno-grey-blue ${args.className || ""}`} />
+)
 
 export const Default = {
   render: Template,
@@ -55,7 +60,7 @@ export const Default = {
       <GridRow key="2">
         <GridColumn>Column</GridColumn>
         <GridColumn cols={3}>Column cols-3</GridColumn>
-        <GridColumn cols={5}>Column cols-5</GridColumn>
+        <GridColumn cols={6}>Column cols-6</GridColumn>
         <GridColumn cols={2}>Column cols-2</GridColumn>
       </GridRow>,
     ],

diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx
@@ -4,28 +4,27 @@
  */
 
 import React from "react"
-import { StoryFn, Meta } from "@storybook/react"
-
-import { GridColumn, GridColumnProps } from "./GridColumn.component" // Ensure the type is imported correctly
+import { Meta, StoryFn } from "@storybook/react"
+import { GridColumn, GridColumnProps } from "./GridColumn.component"
 
 export default {
   title: "Layout/Grid/GridColumn",
   component: GridColumn,
   argTypes: {
-    children: {
-      control: false,
-    },
+    children: { control: false },
   },
   decorators: [
-    (Story) => (
-      <div className="jn-bg-juno-blue-3 jn-text-juno-grey-blue">
-        <Story />
+    (Story, context) => (
+      <div className="juno-container jn-px-6 jn-py-6">
+        <Story {...context.args} />
       </div>
     ),
   ],
 } as Meta
 
-const Template: StoryFn<GridColumnProps> = (args) => <GridColumn {...args} />
+const Template: StoryFn<GridColumnProps> = (args) => {
+  return <GridColumn {...args} className={`${args.className} jn-bg-juno-blue-3 jn-text-juno-grey-blue`} />
+}
 
 export const Default = {
   render: Template,