Refactored tests, then components to pass with dynamic flex-basis gut…

…ter implementation.
mattvox · Jun 20, 2018 · 0d9b09f · 0d9b09f
1 parent 31a792f
commit 0d9b09f
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 154 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -31,14 +31,14 @@ export default class App extends Component {
   render() {
     return (
       <div>
-        <Main padded>
-          <Col>
+        <Main padded={2}>
+          <Col style={{ backgroundColor: 'pink' }}>
             <Segment>No Row</Segment>
           </Col>
           <Col>
             <Segment>Just Cols</Segment>
           </Col>
-          <Section columns={3}>
+          <Section xs={1} md={3} padded>
             <StyledAside>
               <Segment>1</Segment>
             </StyledAside>
@@ -57,7 +57,14 @@ export default class App extends Component {
               <Segment>2</Segment>
             </Col>
           </Row>
-          <Row columns={4}>
+          <Row>
+            <Col flex={1}>
+              <Segment style={{ height: 300, backgroundColor: 'pink' }}>
+                Big Box
+              </Segment>
+            </Col>
+          </Row>
+          <Row xs={1} sm={2} md={4} padded>
             <Col>
               <Segment>1</Segment>
             </Col>
@@ -71,7 +78,7 @@ export default class App extends Component {
               <Segment>4</Segment>
             </Col>
           </Row>
-          <Row colFlex={1} style={{ backgroundColor: 'pink' }}>
+          <Row colFlex={1}>
             <Col>
               <Segment>1</Segment>
             </Col>
@@ -129,9 +136,23 @@ export default class App extends Component {
               <Segment>12</Segment>
             </Col>
           </Row>
-          <Section columns={2}>
+          <Section columns={2} padded>
             <Col grid>
-              <Section columns={2} md={4}>
+              <Section columns={2} md={4} padded>
+                <Col>
+                  <Segment>Col Grid</Segment>
+                </Col>
+                <Col>
+                  <Segment>Col Grid</Segment>
+                </Col>
+                <Col>
+                  <Segment>Col Grid</Segment>
+                </Col>
+                <Col>
+                  <Segment>Col Grid</Segment>
+                </Col>
+              </Section>
+              <Section columns={2} md={4} padded>
                 <Col>
                   <Segment>Col Grid</Segment>
                 </Col>
@@ -146,7 +167,13 @@ export default class App extends Component {
                 </Col>
               </Section>
             </Col>
-            <Col grid columns={2}>
+            <Col grid columns={2} padded>
+              <Col>
+                <Segment>Only Cols</Segment>
+              </Col>
+              <Col>
+                <Segment>Only Cols</Segment>
+              </Col>
               <Col>
                 <Segment>Only Cols</Segment>
               </Col>
@@ -161,7 +188,7 @@ export default class App extends Component {
           style={{ border: '1px solid green' }}
           maxWidth={1200}
           columns={2}
-          padded
+          
           centered
         >
           <Col>

diff --git a/src/components/Col.js b/src/components/Col.js
@@ -13,7 +13,7 @@ export const Col = styled.div.attrs({ className: `brckwrx-col` })`
     ${order && css`order: ${order};`}
     ${alignSelf && css`align-self: ${alignSelf};`}
     ${grid && gridStyles}
-    ${grid && css`padding: 0 !important;`}
+    ${grid && css`margin: 0 !important;`}
   `}
 `;
 

diff --git a/src/components/Grid.js b/src/components/Grid.js
@@ -15,55 +15,81 @@ export const gridStyles = css`
   align-content: ${({ alignContent }) => alignContent || 'stretch'};
   align-items: ${({ alignItems }) => alignItems || 'stretch'};
 
-  ${({ padded, columns, xs, sm, md, lg, xl, breakpoints, colFlex }) => css`
+  ${({ padded, justify, columns, xs, sm, md, lg, xl, breakpoints, colFlex }) => css`
     ${colFlex && css`> .brckwrx-col { flex: ${applyFlex(colFlex, '%')}} `}
-
     ${padded && css`
-      padding-top: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
-      padding-left: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
-      padding-right: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
-      padding-bottom: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
+      margin-top: 0;
+      margin-bottom: 0;
+      justify-content: ${justify || 'space-between'};
 
-      .brckwrx-col {
+      :not(.brckwrx-row) :not(.brckwrx-col) {
         padding-top: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
-        padding-left: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
-        padding-right: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
         padding-bottom: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
+        padding-left: ${applyCssWithUnit(padded, 'em') || '1em'};
+        padding-right: ${applyCssWithUnit(padded, 'em') || '1em'};
+      }
+
+      > .brckwrx-col, > .brckwrx-row {
+        margin-top: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
+        margin-bottom: calc(${applyCssWithUnit(padded, 'em') || '1em'} / 2);
+      }
+
+      .brckwrx-grid & {
+        margin-top: 0;
+        margin-bottom: 0;
       }
     `}
 
     ${(columns || xs) && css`
       > .brckwrx-col {
-        flex-basis: ${100 / (columns || xs)}%;
+        ${applyBasis(columns || xs, padded)};
       }
     `}
 
     ${sm && media(breakpoints).sm`
       > .brckwrx-col {
-        flex-basis: ${100 / sm}%;
+        ${applyBasis(sm, padded)};
       }
     `}
 
     ${md && media(breakpoints).md`
       > .brckwrx-col {
-        flex-basis: ${100 / md}%;
+        ${applyBasis(md, padded)};
       }
     `}
 
     ${lg && media(breakpoints).lg`
       > .brckwrx-col {
-        flex-basis: ${100 / lg}%;
+        ${applyBasis(lg, padded)};
       }
     `}
 
     ${xl && media(breakpoints).xl`
       > .brckwrx-col {
-        flex-basis: ${100 / xl}%;
+        ${applyBasis(xl, padded)};
       }
     `}
-  `}
+  `};
 `;
 
+const applyBasis = (cols, padding) => {
+  const basis = 100 / cols;
+
+  if (!padding) {
+    return css`
+      flex-basis: ${basis}%;
+    `;
+  }
+
+  const gutterCount = cols - 1;
+  const gutterSize =
+    typeof padding !== 'boolean' ? `${padding}/${cols}` : `${1 / cols}em`;
+
+  return css`
+    flex-basis: calc(${basis}% - (${gutterCount} * ${gutterSize}));
+  `;
+};
+
 // prettier-ignore
 const Grid = styled.div.attrs({ className: `brckwrx-grid` })`
   ${baseStyles}

diff --git a/src/components/GridOnlyBasis.js b/src/components/GridOnlyBasis.js
diff --git a/src/components/tests/Grid.test.js b/src/components/tests/Grid.test.js
@@ -55,8 +55,6 @@ describe('<Grid />', () => {
       { style: 'justify-content', value: 'center' },
       { style: 'align-content', value: 'space-around' },
       { style: 'align-items', value: 'flex-end' },
-      { style: 'padding-right', value: 'calc(1em / 2)' },
-      { style: 'padding-bottom', value: 'calc(1em / 2)' },
     ];
 
     it('should match snapshot with props', () => {
@@ -81,7 +79,7 @@ describe('<Grid />', () => {
       expect(shallowToJson(wrapper)).toMatchSnapshot();
     });
 
-    it(`should pass padding top and left when padded prop is present`, () => {
+    it(`should pass margin top and bottom when padded prop is present`, () => {
       const tree = renderer
         .create(
           <Grid padded={2}>
@@ -91,13 +89,13 @@ describe('<Grid />', () => {
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('padding-top', 'calc(2em / 2)', {
-        modifier: css`.brckwrx-col`,
+      expect(tree).toHaveStyleRule('margin-top', 'calc(2em / 2)', {
+        modifier: css`> .brckwrx-col`,
       });
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('padding-left', 'calc(2em / 2)', {
-        modifier: css`.brckwrx-col`,
+      expect(tree).toHaveStyleRule('margin-bottom', 'calc(2em / 2)', {
+        modifier: css`> .brckwrx-col`,
       });
     });