From d94fc23fce3ee445e7915ea5c9c32de1f97c3ee8 Mon Sep 17 00:00:00 2001
From: Chris Chudzicki <christopher.chudzicki@gmail.com>
Date: Tue, 5 Nov 2024 09:57:41 -0500
Subject: [PATCH] upgrade stories & events grid to grid2

---
 .../src/app-pages/HomePage/NewsEventsSection.tsx    | 13 ++++++++-----
 frontends/ol-components/src/index.ts                |  2 ++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx b/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx
index 2a5939b82d..be87d1d47d 100644
--- a/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx
+++ b/frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx
@@ -4,7 +4,7 @@ import {
   styled,
   theme,
   Typography,
-  Grid,
+  Grid2,
   Card,
   TypographyProps,
 } from "ol-components"
@@ -286,9 +286,12 @@ const NewsEventsSection: React.FC = () => {
               <Typography component="h3" variant="h4">
                 Stories
               </Typography>
-              <Grid container columnSpacing="24px" rowSpacing="28px">
+              <Grid2 container columnSpacing="24px" rowSpacing="28px">
                 {stories.map((item, index) => (
-                  <Grid item key={item.id} xs={12} sm={12} md={6} lg={4} xl={4}>
+                  <Grid2
+                    key={item.id}
+                    size={{ xs: 12, sm: 12, md: 6, lg: 4, xl: 4 }}
+                  >
                     {index >= 4 ? (
                       <AboveLgOnly>
                         <Story item={item as NewsFeedItem} mobile={false} />
@@ -296,9 +299,9 @@ const NewsEventsSection: React.FC = () => {
                     ) : (
                       <Story item={item as NewsFeedItem} mobile={false} />
                     )}
-                  </Grid>
+                  </Grid2>
                 ))}
-              </Grid>
+              </Grid2>
             </StoriesContainer>
             <EventsContainer>
               <Typography component="h3" variant="h4">
diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts
index 1ca28cab61..fdfaec26b2 100644
--- a/frontends/ol-components/src/index.ts
+++ b/frontends/ol-components/src/index.ts
@@ -77,6 +77,8 @@ export type { DrawerProps } from "@mui/material/Drawer"
 
 export { default as Grid } from "@mui/material/Grid"
 export type { GridProps } from "@mui/material/Grid"
+export { default as Grid2 } from "@mui/material/Grid2"
+export type { Grid2Props } from "@mui/material/Grid2"
 export { default as InputLabel } from "@mui/material/InputLabel"
 
 export { default as List } from "@mui/material/List"