From 0a0a6a82fab880f9a2d16736047c3a756afd2a26 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Fri, 8 Nov 2024 11:07:32 +0100
Subject: [PATCH 1/4] chore(ui): fix grid stories after ts migration

---
 .../src/components/Grid/Grid.stories.tsx      | 25 ++++++++++++-------
 .../GridColumn/GridColumn.stories.tsx         | 19 +++++++-------
 .../components/GridRow/GridRow.stories.tsx    | 13 ++++++----
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/ui-components/src/components/Grid/Grid.stories.tsx b/packages/ui-components/src/components/Grid/Grid.stories.tsx
index 82908cc0f..86d1c45dc 100644
--- a/packages/ui-components/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui-components/src/components/Grid/Grid.stories.tsx
@@ -5,7 +5,7 @@
 
 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"
 
@@ -13,18 +13,25 @@ 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">
-        <Story />
-      </div>
-    ),
+    (Story, context) => {
+      const storyParams = context.parameters
+      return (
+        <div className="juno-container jn-px-6 jn-py-6">
+          <Story {...storyParams} />
+        </div>
+      )
+    },
   ],
-} as Meta<typeof Grid>
+} as Meta
 
-const Template: StoryFn<typeof Grid> = (args) => <Grid {...args} />
+const Template: StoryFn<GridProps> = (args, context) => (
+  <Grid {...args} className={`${args.className} ${context.className || ""}`} />
+)
 
 export const Default = {
   render: Template,
diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.stories.tsx
index fb8012974..6abd29bc5 100644
--- 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,
diff --git a/packages/ui-components/src/components/GridRow/GridRow.stories.tsx b/packages/ui-components/src/components/GridRow/GridRow.stories.tsx
index baaa4444b..14cf26e99 100644
--- a/packages/ui-components/src/components/GridRow/GridRow.stories.tsx
+++ b/packages/ui-components/src/components/GridRow/GridRow.stories.tsx
@@ -18,11 +18,14 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
-      <div className="jn-bg-juno-blue-3 jn-text-juno-grey-blue">
-        <Story />
-      </div>
-    ),
+    (Story, context) => {
+      const { parameters } = context
+      return (
+        <div className={`jn-bg-juno-blue-3 jn-text-juno-grey-blue ${parameters.className || ""}`}>
+          <Story {...parameters} />
+        </div>
+      )
+    },
   ],
 } as Meta<typeof GridRow>
 

From ae151555b3f64e73bf59f1848e0b0408fdb7ec17 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Fri, 8 Nov 2024 11:24:32 +0100
Subject: [PATCH 2/4] chore(ui): fix Grid story styling

---
 .../src/components/Grid/Grid.stories.tsx      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/ui-components/src/components/Grid/Grid.stories.tsx b/packages/ui-components/src/components/Grid/Grid.stories.tsx
index 86d1c45dc..6ae2963df 100644
--- a/packages/ui-components/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui-components/src/components/Grid/Grid.stories.tsx
@@ -5,6 +5,7 @@
 
 import React from "react"
 import { StoryFn, Meta } from "@storybook/react"
+
 import { Grid, GridProps } from "./Grid.component"
 import { GridRow } from "../GridRow/GridRow.component"
 import { GridColumn } from "../GridColumn/GridColumn.component"
@@ -18,19 +19,18 @@ export default {
     },
   },
   decorators: [
-    (Story, context) => {
-      const storyParams = context.parameters
-      return (
-        <div className="juno-container jn-px-6 jn-py-6">
-          <Story {...storyParams} />
-        </div>
-      )
-    },
+    (Story, context) => (
+      <div className="juno-container jn-px-6 jn-py-6">
+        <Story {...context} />
+      </div>
+    ),
   ],
-} as Meta
+} as Meta<typeof Grid>
 
 const Template: StoryFn<GridProps> = (args, context) => (
-  <Grid {...args} className={`${args.className} ${context.className || ""}`} />
+  <Grid {...args} className={`jn-bg-juno-blue-3 jn-text-juno-grey-blue ${args.className}`}>
+    {context.args.children}
+  </Grid>
 )
 
 export const Default = {

From e444b26c0f83415ee38b205e93b85c200cf07ca4 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Fri, 8 Nov 2024 11:35:43 +0100
Subject: [PATCH 3/4] chore(ui): fix Grid from col 5 to 6

---
 packages/ui-components/src/components/Grid/Grid.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-components/src/components/Grid/Grid.stories.tsx b/packages/ui-components/src/components/Grid/Grid.stories.tsx
index 6ae2963df..842fba51e 100644
--- a/packages/ui-components/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui-components/src/components/Grid/Grid.stories.tsx
@@ -62,7 +62,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>,
     ],

From ebd3fcba87233d18abcb55d81b705c41ef73b988 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Fri, 8 Nov 2024 12:36:40 +0100
Subject: [PATCH 4/4] chore(ui): slight adjustments to Story

---
 .../src/components/Grid/Grid.stories.tsx            | 10 ++++------
 .../src/components/GridRow/GridRow.stories.tsx      | 13 +++++--------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/ui-components/src/components/Grid/Grid.stories.tsx b/packages/ui-components/src/components/Grid/Grid.stories.tsx
index 842fba51e..7bbd60be9 100644
--- a/packages/ui-components/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui-components/src/components/Grid/Grid.stories.tsx
@@ -19,18 +19,16 @@ export default {
     },
   },
   decorators: [
-    (Story, context) => (
+    (Story) => (
       <div className="juno-container jn-px-6 jn-py-6">
-        <Story {...context} />
+        <Story />
       </div>
     ),
   ],
 } as Meta<typeof Grid>
 
-const Template: StoryFn<GridProps> = (args, context) => (
-  <Grid {...args} className={`jn-bg-juno-blue-3 jn-text-juno-grey-blue ${args.className}`}>
-    {context.args.children}
-  </Grid>
+const Template: StoryFn<GridProps> = (args) => (
+  <Grid {...args} className={`jn-bg-juno-blue-3 jn-text-juno-grey-blue ${args.className || ""}`} />
 )
 
 export const Default = {
diff --git a/packages/ui-components/src/components/GridRow/GridRow.stories.tsx b/packages/ui-components/src/components/GridRow/GridRow.stories.tsx
index 14cf26e99..baaa4444b 100644
--- a/packages/ui-components/src/components/GridRow/GridRow.stories.tsx
+++ b/packages/ui-components/src/components/GridRow/GridRow.stories.tsx
@@ -18,14 +18,11 @@ export default {
     },
   },
   decorators: [
-    (Story, context) => {
-      const { parameters } = context
-      return (
-        <div className={`jn-bg-juno-blue-3 jn-text-juno-grey-blue ${parameters.className || ""}`}>
-          <Story {...parameters} />
-        </div>
-      )
-    },
+    (Story) => (
+      <div className="jn-bg-juno-blue-3 jn-text-juno-grey-blue">
+        <Story />
+      </div>
+    ),
   ],
 } as Meta<typeof GridRow>