Added warnings to the PageContentWide component (#3127)

* chore: added warnings to the page-conent-wide component
commercetools · Jul 5, 2023 · 0918b46 · 0918b46 · github-actions · Jul 5, 2023
1 parent a8c1c11
commit 0918b46
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 15 deletions.
diff --git a/.changeset/great-eggs-try.md b/.changeset/great-eggs-try.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-components': patch
+'@commercetools-local/visual-testing-app': patch
+---
+
+We included a new warning in the `PageContentWide` component to let consumers know the component will only render its first two children when configured to use two columns even if consumers provided more than two children.
diff --git a/...nents/src/components/page-content-containers/page-content-wide/page-content-wide.spec.tsx b/...nents/src/components/page-content-containers/page-content-wide/page-content-wide.spec.tsx
@@ -41,7 +41,7 @@ describe('PageContentWide', () => {
 
       expect(useWarning).toHaveBeenCalledWith(
         false,
-        'PageContentWide: This component only renders its first children when using a single column but you provided more that one.'
+        'PageContentWide: This component only renders its first children when using a single column but you provided more than one.'
       );
     });
   });
@@ -75,6 +75,11 @@ describe('PageContentWide', () => {
       screen.getByText('1. Text content');
       screen.getByText('2. Text content');
       expect(screen.queryByText('3. Text content')).not.toBeInTheDocument();
+
+      expect(useWarning).toHaveBeenCalledWith(
+        false,
+        'PageContentWide: This component only renders its first children when using a single column but you provided more than one.'
+      );
     });
   });
 

diff --git a/...components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx b/...components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx
@@ -55,10 +55,16 @@ const Container = styled.div`
 
 function PageContentWide(props: TPageContentWide) {
   const [leftChild, rightChild] = Children.toArray(props.children);
+  const childrenCount = Children.count(props.children);
 
   useWarning(
-    props.columns !== '1' || !Boolean(rightChild),
-    'PageContentWide: This component only renders its first children when using a single column but you provided more that one.'
+    props.columns === '1' && childrenCount > 1,
+    'PageContentWide: This component only renders its first children when using a single column but you provided more than one.'
+  );
+
+  useWarning(
+    props.columns !== '1' && childrenCount > 2,
+    'PageContentWide: This component only renders its first two children when using a two columns layout but you provided more than two.'
   );
 
   return (

diff --git a/...pp/src/components/page-content-container-wide/page-content-container-wide.visualroute.tsx b/...pp/src/components/page-content-container-wide/page-content-container-wide.visualroute.tsx
@@ -37,18 +37,6 @@ export const Component = () => (
             </PageContentWide>
           ),
         },
-        {
-          name: 'single column with several children',
-          path: 'single-column-with-several-children',
-          spec: (
-            <PageContentWide>
-              <Box />
-              <Box />
-              <Box />
-            </PageContentWide>
-          ),
-        },
-
         {
           name: 'two columns 1/1',
           path: 'two-columns-half',
@@ -89,6 +77,38 @@ export const Component = () => (
             </PageContentWide>
           ),
         },
+        {
+          name: 'single column with several children',
+          path: 'single-column-with-several-children',
+          spec: (
+            <PageContentWide>
+              <Box />
+              <Box />
+              <Box />
+            </PageContentWide>
+          ),
+        },
+        {
+          name: 'two columns with one child',
+          path: 'two-columns-with-one-child',
+          spec: (
+            <PageContentWide columns="1/1">
+              <Box />
+            </PageContentWide>
+          ),
+        },
+        {
+          name: 'two columns with several children',
+          path: 'two-column-with-several-children',
+          spec: (
+            <PageContentWide columns="2/1">
+              <Box />
+              <Box />
+              <Box />
+              <Box />
+            </PageContentWide>
+          ),
+        },
       ]}
     />
   </Suite>