Merge pull request #1004 from shopgate/PWA-2756

Fix products grid card dimensions
shopgate · Apr 23, 2020 · 9cd5a2e · 9cd5a2e
2 parents a10a7f7 + 490e817
commit 9cd5a2e
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 28 deletions.
diff --git a/themes/theme-gmd/components/ProductGrid/__snapshots__/spec.jsx.snap b/themes/theme-gmd/components/ProductGrid/__snapshots__/spec.jsx.snap
@@ -11,21 +11,21 @@ exports[`<ProductGrid /> should render the original layout 1`] = `
 >
   <Layout>
     <Grid
-      className="css-pfqjus"
+      className="css-nmgel5"
       component="ul"
       data-test-id="productGrid"
       wrap={true}
     >
       <ul
-        className="css-pfqjus css-h7r55a css-u7q1iu"
+        className="css-nmgel5 css-h7r55a css-u7q1iu"
         data-test-id="productGrid"
       />
     </Grid>
   </Layout>
 </ProductGrid>
 `;
 
-exports[`<ProductGrid /> should render with the InfineteContainer 1`] = `
+exports[`<ProductGrid /> should render with the InfiniteContainer 1`] = `
 <ProductGrid
   flags={null}
   handleGetProducts={[Function]}
@@ -56,13 +56,13 @@ exports[`<ProductGrid /> should render with the InfineteContainer 1`] = `
       <div>
         <div>
           <Grid
-            className="css-pfqjus"
+            className="css-nmgel5"
             component="ul"
             data-test-id="productGrid"
             wrap={true}
           >
             <ul
-              className="css-pfqjus css-h7r55a css-u7q1iu"
+              className="css-nmgel5 css-h7r55a css-u7q1iu"
               data-test-id="productGrid"
             />
           </Grid>

diff --git a/themes/theme-gmd/components/ProductGrid/components/Iterator/style.js b/themes/theme-gmd/components/ProductGrid/components/Iterator/style.js
@@ -6,17 +6,13 @@ import { css } from 'glamor';
  * @return {string}
  */
 const item = columns => css({
-  [`:nth-child(${columns}n)`]: {
-    paddingRight: 0,
-  },
-  [`:nth-child(${columns}n+1)`]: {
-    paddingLeft: 0,
-  },
+  paddingTop: 2,
+  paddingBottom: 2,
   [`:nth-child(-n+${columns})`]: {
     paddingTop: 0,
   },
-  padding: 2,
-  width: `${100 / columns}%`,
+  // Flex will add whitespace between items, no padding is needed
+  width: `calc(${100 / columns}% - 2px)`,
 }).toString();
 
 export default {

diff --git a/themes/theme-gmd/components/ProductGrid/components/Layout/style.js b/themes/theme-gmd/components/ProductGrid/components/Layout/style.js
@@ -8,4 +8,5 @@ export default css({
     paddingBottom: 2,
   },
   background: colors.background,
+  justifyContent: 'space-between',
 }).toString();
diff --git a/themes/theme-gmd/components/ProductGrid/spec.jsx b/themes/theme-gmd/components/ProductGrid/spec.jsx
@@ -7,7 +7,7 @@ global.console.error = jest.fn();
 jest.mock('@shopgate/engage/components/View');
 
 describe('<ProductGrid />', () => {
-  it('should render with the InfineteContainer', () => {
+  it('should render with the InfiniteContainer', () => {
     const wrapper = mount((
       <ProductGrid products={[]} />
     ));

diff --git a/themes/theme-ios11/components/ProductGrid/__snapshots__/spec.jsx.snap b/themes/theme-ios11/components/ProductGrid/__snapshots__/spec.jsx.snap
@@ -11,21 +11,21 @@ exports[`<ProductGrid /> should render the original layout 1`] = `
 >
   <Layout>
     <Grid
-      className="css-a9oap6"
+      className="css-exsswj"
       component="ul"
       data-test-id="productGrid"
       wrap={true}
     >
       <ul
-        className="css-a9oap6 css-h7r55a css-u7q1iu"
+        className="css-exsswj css-h7r55a css-u7q1iu"
         data-test-id="productGrid"
       />
     </Grid>
   </Layout>
 </ProductGrid>
 `;
 
-exports[`<ProductGrid /> should render with the InfineteContainer 1`] = `
+exports[`<ProductGrid /> should render with the InfiniteContainer 1`] = `
 <ProductGrid
   flags={null}
   handleGetProducts={[Function]}
@@ -56,13 +56,13 @@ exports[`<ProductGrid /> should render with the InfineteContainer 1`] = `
       <div>
         <div>
           <Grid
-            className="css-a9oap6"
+            className="css-exsswj"
             component="ul"
             data-test-id="productGrid"
             wrap={true}
           >
             <ul
-              className="css-a9oap6 css-h7r55a css-u7q1iu"
+              className="css-exsswj css-h7r55a css-u7q1iu"
               data-test-id="productGrid"
             />
           </Grid>

diff --git a/themes/theme-ios11/components/ProductGrid/components/Iterator/style.js b/themes/theme-ios11/components/ProductGrid/components/Iterator/style.js
@@ -6,14 +6,8 @@ import { css } from 'glamor';
  * @return {string}
  */
 const item = columns => css({
-  [`:nth-child(${columns}n)`]: {
-    paddingRight: 0,
-  },
-  [`:nth-child(${columns}n+1)`]: {
-    paddingLeft: 0,
-  },
-  padding: '0px 8px',
-  width: `${100 / columns}%`,
+  // Flex will add whitespace between items, no padding is needed
+  width: `calc(${100 / columns}% - 8px)`,
 }).toString();
 
 export default {

diff --git a/themes/theme-ios11/components/ProductGrid/components/Layout/style.js b/themes/theme-ios11/components/ProductGrid/components/Layout/style.js
@@ -9,4 +9,5 @@ export default css({
   ':not(:empty)': {
     marginTop: 16,
   },
+  justifyContent: 'space-between',
 }).toString();
diff --git a/themes/theme-ios11/components/ProductGrid/spec.jsx b/themes/theme-ios11/components/ProductGrid/spec.jsx
@@ -7,7 +7,7 @@ global.console.error = jest.fn();
 jest.mock('@shopgate/engage/components/View');
 
 describe('<ProductGrid />', () => {
-  it('should render with the InfineteContainer', () => {
+  it('should render with the InfiniteContainer', () => {
     const wrapper = mount((
       <ProductGrid products={[]} />
     ));