Remove GridItemMedium

bbc · May 26, 2020 · 6af6c48 · 6af6c48
1 parent 76683a0
commit 6af6c48
Show file tree

Hide file tree

Showing 6 changed files with 1,601 additions and 1,337 deletions.
diff --git a/src/app/containers/Image/index.jsx b/src/app/containers/Image/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import filterForBlockType from '#lib/utilities/blockHandlers';
 import { imageModelPropTypes } from '#models/propTypes/image';
 import ArticleFigure from '../ArticleFigure';
-import { GridItemMedium, GridItemSmall, GridItemLarge } from '#lib/styledGrid';
+import { GridItem, GridItemSmall, GridItemLarge } from '#lib/styledGrid';
 import { createSrcset } from '#lib/utilities/srcSet';
 import buildIChefURL from '#lib/utilities/ichefURL';
 import urlWithPageAnchor from '#lib/utilities/pageAnchor';
@@ -57,7 +57,7 @@ const ImageContainer = ({ blocks, position }) => {
   let Wrapper = GridItemLarge;
 
   if (height === width) {
-    Wrapper = GridItemMedium;
+    Wrapper = GridItem;
   }
   if (height > width) {
     Wrapper = GridItemSmall;

diff --git a/src/app/containers/Paragraph/index.jsx b/src/app/containers/Paragraph/index.jsx
@@ -14,7 +14,7 @@ const ParagraphContainer = ({ blocks }) => {
   const { script, service } = useContext(ServiceContext);
 
   return (
-    <GridItem>
+    <GridItem enableMargins>
       <Paragraph script={script} service={service}>
         <Blocks blocks={blocks} componentsToRender={componentsToRender} />
       </Paragraph>

diff --git a/src/app/lib/styledGrid/index.jsx b/src/app/lib/styledGrid/index.jsx
@@ -52,6 +52,15 @@ const mediumColumns = {
   group5: 10,
 };
 
+const noMargins = {
+  group0: false,
+  group1: false,
+  group2: false,
+  group3: false,
+  group4: false,
+  group5: false,
+};
+
 export const GridWrapperMedium = ({ children }) => {
   return (
     <Grid
@@ -68,8 +77,8 @@ GridWrapperMedium.propTypes = {
   children: node.isRequired,
 };
 
-export const GridItem = ({ children }) => {
-  const margins = {
+export const GridItem = ({ children, enableMargins }) => {
+  const gridMargins = {
     group0: true,
     group1: true,
     group2: true,
@@ -78,6 +87,8 @@ export const GridItem = ({ children }) => {
     group5: false,
   };
 
+  const margins = enableMargins ? gridMargins : noMargins;
+
   return (
     <Grid
       item
@@ -92,6 +103,11 @@ export const GridItem = ({ children }) => {
 
 GridItem.propTypes = {
   children: node.isRequired,
+  enableMargins: bool,
+};
+
+GridItem.defaultProps = {
+  enableMargins: false,
 };
 
 export const GridItemSmall = ({ children }) => {
@@ -130,15 +146,6 @@ GridItemSmall.propTypes = {
 };
 
 export const GridItemLarge = ({ children, enableMargins }) => {
-  const noMargins = {
-    group0: false,
-    group1: false,
-    group2: false,
-    group3: false,
-    group4: false,
-    group5: false,
-  };
-
   const gridMargins = {
     group0: true,
     group1: true,
@@ -170,19 +177,6 @@ GridItemLarge.propTypes = {
 GridItemLarge.defaultProps = {
   enableMargins: false,
 };
-
-export const GridItemMedium = ({ children }) => {
-  return (
-    <Grid item columns={mediumColumns} parentColumns={defaultColumns}>
-      {children}
-    </Grid>
-  );
-};
-
-GridItemMedium.propTypes = {
-  children: node.isRequired,
-};
-
 export const GridWrapper = styled.div`
   ${layoutGridWrapper};
   padding-bottom: ${GEL_SPACING_QUAD};

diff --git a/src/app/pages/MediaAssetPage/__snapshots__/index.test.jsx.snap b/src/app/pages/MediaAssetPage/__snapshots__/index.test.jsx.snap
@@ -61,7 +61,7 @@ exports[`Media Asset Page AV player should render version (live audio stream) 1`
                 </strong>
               </div>
               <div
-                class="GridComponent-nf79gm-0 ciLAht"
+                class="GridComponent-nf79gm-0 eRZeLk"
                 dir="ltr"
               >
                 <time
@@ -438,7 +438,7 @@ exports[`Media Asset Page should render component 1`] = `
                 </strong>
               </div>
               <div
-                class="GridComponent-nf79gm-0 ciLAht"
+                class="GridComponent-nf79gm-0 eRZeLk"
                 dir="ltr"
               >
                 <time