fix: Themed breakpoint not being applied (#62)

* refactor: enable theme to export custom breakpoints from custom theme

* refactor: media query to accept custom width

* refactor: row to use new media query syntax

* refactor: col to use new media query syntax

* Revert "refactor: media query to accept custom width"

This reverts commit 37f4378.

* refactor: remove unused function

* refactor: update media query to accept props

* refactor: call media query with props

* fix: add breakpoint

* test: update snapshots

* refactor: use key function within theme

Author: aaronvanston

src/components/Col/Col.js

@@ -13,7 +13,7 @@ const Col = styled(props =>
   flex: 0 0 auto;
   display: block;
 
-  ${props => themeProvider.breakpoints.map(breakpoint => mediaQuery[breakpoint]`
+  ${props => themeProvider.breakpointsKeys(props).map(breakpoint => mediaQuery(props)[breakpoint]`
     // Generate gutter
     ${gutter.col(props, breakpoint)}
 

src/components/Col/__snapshots__/Col.spec.js.snap

@@ -8,12 +8,12 @@ exports[`style rendering renders corrects 1`] = `
 >
   <Component
     alignSelf="auto"
-    className="sc-bdVaJa kXNDzH"
+    className="sc-bdVaJa jURNTC"
     elementType="div"
     order={0}
   >
     <div
-      className="sc-bdVaJa kXNDzH"
+      className="sc-bdVaJa jURNTC"
     />
   </Component>
 </Col>

src/components/Row/Row.js

@@ -11,7 +11,7 @@ const Row = styled(props =>
   // Initial component property
   box-sizing: border-box;
 
-  ${props => themeProvider.breakpoints.map(breakpoint => mediaQuery[breakpoint]`
+  ${props => themeProvider.breakpointsKeys(props).map(breakpoint => mediaQuery(props)[breakpoint]`
     // Generate gutter
     ${gutter.row(props, breakpoint)}
 

src/components/Row/__snapshots__/Row.spec.js.snap

@@ -13,15 +13,15 @@ exports[`style rendering renders corrects 1`] = `
   <Component
     alignContent="flex-start"
     alignItems="flex-start"
-    className="sc-bdVaJa jgdJrf"
+    className="sc-bdVaJa hXfgcI"
     display="flex"
     elementType="div"
     flexDirection="row"
     flexWrap="wrap"
     justifyContent="flex-start"
   >
     <div
-      className="sc-bdVaJa jgdJrf"
+      className="sc-bdVaJa hXfgcI"
     />
   </Component>
 </Row>

src/helpers/mediaQuery/mediaQuery.js

@@ -4,18 +4,20 @@ import { themeProvider } from '../../theme';
 
 const { theme } = themeProvider;
 
-const mediaQuery = Object.keys(theme().breakpoints).reduce((accumulator, value) => {
-  const breakpointSize = theme().breakpoints[value];
+const mediaQuery = props =>
+  (themeProvider.breakpointsKeys(props).reduce((accumulator, value) => {
+    const breakpointSize = theme(props).breakpoints[value];
 
-  Object.assign(accumulator, { [value]: (...args) =>
-    (breakpointSize === 0 ? css`${css(...args)}` :
-      css`@media (min-width: ${breakpointSize}rem) {
-        ${css(...args)}
-      }`
-    ),
-  });
+    Object.assign(accumulator, { [value]: (...args) =>
+      (breakpointSize === 0 ? css`${css(...args)}` :
+        css`@media (min-width: ${breakpointSize}rem) {
+          ${css(...args)}
+        }`
+      ),
+    });
 
-  return accumulator;
-}, {});
+    return accumulator;
+  }, {})
+);
 
 export default mediaQuery;

src/helpers/mediaQuery/mediaQuery.spec.js

@@ -1,25 +1,25 @@
 import mediaQuery from './mediaQuery';
 
 test('should generate a media query for lg breakpoint', () => {
-  const query = (mediaQuery.lg`color: red`).join('');
+  const query = (mediaQuery().lg`color: red`).join('');
   expect(query).toContain('@media (min-width: 60rem)');
   expect(query).toContain('color: red');
 });
 
 test('should generate a media query for md breakpoint', () => {
-  const query = (mediaQuery.md`color: blue`).join('');
+  const query = (mediaQuery().md`color: blue`).join('');
   expect(query).toContain('@media (min-width: 48rem)');
   expect(query).toContain('color: blue');
 });
 
 test('should generate a media query for sm breakpoint', () => {
-  const query = (mediaQuery.sm`color: green`).join('');
+  const query = (mediaQuery().sm`color: green`).join('');
   expect(query).toContain('@media (min-width: 30rem)');
   expect(query).toContain('color: green');
 });
 
 test('should not generate a media query for xs breakpoint', () => {
-  const query = (mediaQuery.xs`color: yellow`).join('');
+  const query = (mediaQuery().xs`color: yellow`).join('');
   expect(query).not.toContain('@media (min-width: 0rem)');
   expect(query).toContain('color: yellow');
 });

src/theme/theme.js

@@ -22,5 +22,5 @@ export const theme = (props) => {
   });
 };
 
-// TODO generate these dynamically based on the object keys for breakpoints
-export const breakpoints = ['xs', 'sm', 'md', 'lg'];
+export const breakpoints = props => theme(props).breakpoints;
+export const breakpointsKeys = props => Object.keys(theme(props).breakpoints);

src/theme/theme.spec.js

@@ -1,11 +1,14 @@
 import { themeProvider, defaultTheme } from '../theme';
 
-const { theme, breakpoints } = themeProvider;
+const {
+  theme,
+  breakpoints,
+  breakpointsKeys,
+} = themeProvider;
 
 
 test('should set the default theme if a custom theme is not provided', () => {
   expect(theme()).toEqual(defaultTheme);
-  expect(breakpoints).toEqual(Object.keys(defaultTheme.breakpoints));
 });
 
 describe('overriding the default theme', () => {
@@ -52,3 +55,51 @@ describe('overriding the default theme', () => {
     expect(theme(customTheme)).not.toEqual(defaultTheme);
   });
 });
+
+describe('breakpoint method', () => {
+  const customTheme = {
+    theme: { flexa: { breakpoints: { lg: 65, md: 55, sm: 45, xs: 35 } } },
+  };
+
+  test('should return breakpoints of custom theme', () => {
+    expect(breakpoints(customTheme)).toEqual(
+      { lg: 65, md: 55, sm: 45, xs: 35 },
+    );
+  });
+
+  test('should return custom breakpoints of custom theme with additional breakpoints', () => {
+    const customBreakpoints = {
+      theme: { flexa: { breakpoints: { lg: 65, md: 55, sm: 45, xs: 35, xl: 90, xxl: 120 } } },
+    };
+    expect(breakpoints(customBreakpoints)).toEqual(
+      { lg: 65, md: 55, sm: 45, xl: 90, xs: 35, xxl: 120 },
+    );
+  });
+
+  test('should return default breakpoints if no theme is provided', () => {
+    expect(breakpoints()).toEqual(defaultTheme.breakpoints);
+  });
+});
+
+describe('breakpointsKeys method', () => {
+  const customTheme = {
+    theme: { flexa: { breakpoints: { md: 55, lg: 65, xs: 35, sm: 45 } } },
+  };
+
+  test('should return breakpoints keys of custom theme', () => {
+    expect(breakpointsKeys(customTheme)).toEqual(['xs', 'sm', 'md', 'lg']);
+  });
+
+  test('should return custom breakpoints of custom theme with additional breakpoints', () => {
+    const customBreakpoints = {
+      theme: { flexa: { breakpoints: { lg: 65, md: 55, sm: 45, xs: 35, xl: 90, xxl: 120 } } },
+    };
+    expect(breakpointsKeys(customBreakpoints)).toEqual(
+      ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+    );
+  });
+
+  test('should return default breakpoints if no theme is provided', () => {
+    expect(breakpointsKeys()).toEqual(Object.keys(defaultTheme.breakpoints));
+  });
+});