From 8b351f2326f583d57b536bca0411fa4c41811926 Mon Sep 17 00:00:00 2001
From: Fahad Khan <fahad.khan01@bbc.co.uk>
Date: Mon, 3 Aug 2020 17:28:20 +0100
Subject: [PATCH] replace GridItem with Grid

---
 src/app/containers/Paragraph/index.jsx | 35 +++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/app/containers/Paragraph/index.jsx b/src/app/containers/Paragraph/index.jsx
index dff09a91894..b40a74c03e6 100644
--- a/src/app/containers/Paragraph/index.jsx
+++ b/src/app/containers/Paragraph/index.jsx
@@ -1,12 +1,20 @@
 import React, { useContext } from 'react';
 import Paragraph from '@bbc/psammead-paragraph';
+import Grid from '@bbc/psammead-grid';
 import { ServiceContext } from '#contexts/ServiceContext';
 import Blocks from '../Blocks';
 import fragment from '../Fragment';
 import InlineLink from '../InlineLink';
 import Inline from '../InlineContainer';
 import { paragraphModelPropTypes } from '#models/propTypes/paragraph';
-import { GridItemConstrainedMedium } from '#lib/styledGrid';
+
+const parentsGridColumns = {
+  group1: 6,
+  group2: 6,
+  group3: 6,
+  group4: 8,
+  group5: 10,
+};
 
 const componentsToRender = { fragment, urlLink: InlineLink, inline: Inline };
 
@@ -14,14 +22,29 @@ const ParagraphContainer = ({ blocks }) => {
   const { script, service } = useContext(ServiceContext);
 
   return (
-    <GridItemConstrainedMedium>
-      <Paragraph script={script} service={service}>
-        <Blocks blocks={blocks} componentsToRender={componentsToRender} />
-      </Paragraph>
-    </GridItemConstrainedMedium>
+    <Grid columns={parentsGridColumns}>
+      <Grid
+        item
+        columns={{ group1: 6, group2: 6, group3: 6, group4: 8, group5: 10 }}
+      >
+        <Paragraph script={script} service={service}>
+          <Blocks blocks={blocks} componentsToRender={componentsToRender} />
+        </Paragraph>
+      </Grid>
+    </Grid>
   );
 };
 
 ParagraphContainer.propTypes = paragraphModelPropTypes;
 
+ParagraphContainer.defaultProps = {
+  parentsGridColumns: {
+    group1: 6,
+    group2: 6,
+    group3: 6,
+    group4: 8,
+    group5: 10,
+  },
+};
+
 export default ParagraphContainer;