Merge pull request #48 from catho/BTS-240-container-fix

[BTS-240] Container fix
catho · Apr 15, 2019 · 8504310 · 8504310
2 parents 5e26f2b + 9e0ea29
commit 8504310
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/components/Grid/sub-components/Container.jsx b/components/Grid/sub-components/Container.jsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { query, hide, noGutters } from './shared';
 import { BREAKPOINTS } from '../../shared';
 
-const maxWidth = ({ fluid }, name) =>
-  !fluid && query[name]`max-width: ${BREAKPOINTS[name].width}px;`;
+const maxWidth = ({ name }, { width: nextWidth = 0 } = {}, fluid) =>
+  !fluid && nextWidth && query[name]`max-width: ${nextWidth}px;`;
 
 const Container = styled.div`
   width: ${props => props.width || '100%'};
@@ -13,8 +13,11 @@ const Container = styled.div`
   margin-right: auto;
   margin-left: auto;
 
-  ${props =>
-    Object.keys(BREAKPOINTS).map(breakpoint => maxWidth(props, breakpoint))}
+  ${({ fluid }) =>
+    Object.entries(BREAKPOINTS)
+      .map(([name, value]) => ({ name, ...value }))
+      .sort((a, b) => a.width - b.width)
+      .map((breakpoint, i, list) => maxWidth(breakpoint, list[i + 1], fluid))}
 
   ${hide}
   ${noGutters}