From 8d33cf0e33e5cf9cc569d275d42d2c534f4d156c Mon Sep 17 00:00:00 2001
From: Trevor Ing <trevor.ing@okta.com>
Date: Wed, 8 May 2024 11:26:50 -0400
Subject: [PATCH] fix: small nit fixes

---
 packages/odyssey-react-mui/src/labs/Grid.tsx  |  9 +--
 .../odyssey-labs/Grid/Grid.stories.tsx        | 80 +++++++++----------
 .../OdysseyLayout/OdysseyLayout.stories.tsx   | 22 ++---
 3 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/Grid.tsx b/packages/odyssey-react-mui/src/labs/Grid.tsx
index 89787e450a..1100ba7ea5 100644
--- a/packages/odyssey-react-mui/src/labs/Grid.tsx
+++ b/packages/odyssey-react-mui/src/labs/Grid.tsx
@@ -25,15 +25,12 @@ type SupportedPaneRatios =
   | [1, 3]
   | [3, 1]
   | [1, 1, 1]
-  | [1, 2, 1]
-  | [2, 1, 1]
-  | [1, 1, 2]
   | [1, 1, 1, 1];
 
 export type GridProps = {
   /**
    * The supported pane ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.
-   * e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 2, 1] defines a 1/4, 1/2, 1/4 layout
+   * e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#the_fr_unit
    */
   panes: SupportedPaneRatios;
@@ -81,9 +78,7 @@ const Grid = ({ panes, children }: GridProps) => {
         odysseyDesignTokens={odysseyDesignTokens}
         panes={mappedPanes}
       >
-        {Children.toArray(children).map((child, index) => (
-          <div key={index}>{child}</div>
-        ))}
+        {Children.toArray(children).map((child) => child)}
       </GridContent>
     </GridContainer>
   );
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/Grid/Grid.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/Grid/Grid.stories.tsx
index 8c4ba7a4f5..00689a4108 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/Grid/Grid.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/Grid/Grid.stories.tsx
@@ -23,10 +23,10 @@ const storybookMeta: Meta<GridProps> = {
     panes: {
       control: "text",
       description:
-        "The title of the layout to be situated in the layout header",
+        "The supported pane ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit. For example: [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout",
       table: {
         type: {
-          summary: "string",
+          summary: "SupportedPaneRatios",
         },
       },
     },
@@ -63,7 +63,7 @@ export const Single: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
@@ -78,10 +78,10 @@ export const Split: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
@@ -96,10 +96,10 @@ export const TwoThirdsStart: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
@@ -114,10 +114,10 @@ export const TwoThirdsEnd: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
@@ -132,10 +132,10 @@ export const ThreeFourthsStart: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
@@ -150,17 +150,17 @@ export const ThreeFourthsEnd: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
   },
 };
 
-export const ThreeColumnSplit: StoryObj<GridProps> = {
+export const ThreePaneSplit: StoryObj<GridProps> = {
   args: {
     panes: [1, 1, 1],
   },
@@ -168,20 +168,20 @@ export const ThreeColumnSplit: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
   },
 };
 
-export const FourColumnSplit: StoryObj<GridProps> = {
+export const FourPaneSplit: StoryObj<GridProps> = {
   args: {
     panes: [1, 1, 1, 1],
   },
@@ -189,16 +189,16 @@ export const FourColumnSplit: StoryObj<GridProps> = {
     return (
       <Grid {...args}>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
         <Surface>
-          <h1>Column</h1>
+          <h1>Pane</h1>
         </Surface>
       </Grid>
     );
@@ -211,72 +211,72 @@ export const KitchenSink: StoryObj<GridProps> = {
       <>
         <Grid panes={[1]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[1, 1]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[2, 1]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[1, 2]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[3, 1]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[1, 3]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[1, 1, 1]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
         <Grid panes={[1, 1, 1, 1]}>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
           <Surface>
-            <h1>Column</h1>
+            <h1>Pane</h1>
           </Surface>
         </Grid>
       </>
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/OdysseyLayout/OdysseyLayout.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/OdysseyLayout/OdysseyLayout.stories.tsx
index 5c26ea5a44..14dd6ac60f 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/OdysseyLayout/OdysseyLayout.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/OdysseyLayout/OdysseyLayout.stories.tsx
@@ -522,9 +522,10 @@ export const Dashboard: StoryObj<OdysseyLayoutProps> = {
                 marginTop: odysseyDesignTokens.Spacing4,
               }}
             >
-              {organizationData.map((data) => {
+              {organizationData.map((data, index) => {
                 return (
                   <Box
+                    key={index}
                     sx={{
                       display: "flex",
                       justifyContent: "space-between",
@@ -630,9 +631,10 @@ export const Dashboard: StoryObj<OdysseyLayoutProps> = {
                 For troubleshooting purposes, you can let Okta Support login to
                 your account as an administrator.
               </Support>
-              {endUserData.map((data) => {
+              {endUserData.map((data, index) => {
                 return (
                   <Box
+                    key={index}
                     sx={{
                       display: "flex",
                       justifyContent: "space-between",
@@ -704,13 +706,15 @@ export const FullWidth: StoryObj<OdysseyLayoutProps> = {
         isFullWidth={args.isFullWidth}
       >
         <Grid panes={[1]}>
-          <DataTable
-            columns={personColumns}
-            getData={getData}
-            hasSearch
-            hasFilters
-            totalRows={10}
-          />
+          <Surface>
+            <DataTable
+              columns={personColumns}
+              getData={getData}
+              hasSearch
+              hasFilters
+              totalRows={10}
+            />
+          </Surface>
         </Grid>
       </OdysseyLayout>
     );