Adds integration test for compound responsive prop

cypress/integration/responsive-props/behavior-down.test.js

@@ -0,0 +1,31 @@
+describe('Behavior: "down"', () => {
+  before(() => {
+    cy.loadStory(['core'], ['responsive-props', 'compound'])
+  })
+
+  it('with multiple "down" props', () => {
+    const assertPadding = (values) => {
+      return cy.get('#composition-down').should('have.css', 'padding', values)
+    }
+
+    assertPadding('10px')
+    cy.setBreakpoint('sm').then(() => assertPadding('20px'))
+    cy.setBreakpoint('md').then(() => assertPadding('30px'))
+    cy.setBreakpoint('lg').then(() => assertPadding('40px'))
+    cy.setBreakpoint('xl').then(() => assertPadding('50px'))
+  })
+
+  it('when combined with "up" sibling', () => {
+    const assertTemplateCols = (value) => {
+      return cy
+        .get('#composition-combination')
+        .should('have.css', 'grid-template-columns', value)
+    }
+
+    assertTemplateCols('200px')
+    cy.setBreakpoint('sm').then(() => assertTemplateCols('100px'))
+    cy.setBreakpoint('md').then(() => assertTemplateCols('200px'))
+    cy.setBreakpoint('lg').then(() => assertTemplateCols('200px'))
+    cy.setBreakpoint('xl').then(() => assertTemplateCols('200px'))
+  })
+})

cypress/integration/responsive-props/index.js

@@ -2,4 +2,5 @@ describe('Responsive props', () => {
   require('./mobile-first.test')
   require('./breakpoint-specific.test')
   require('./inclusive-notch.test')
+  require('./behavior-down.test')
 })

cypress/plugins/index.js

@@ -43,7 +43,5 @@ module.exports = (on, config) => {
   )
 
   const { envName } = config.env
-  const env = getCypressConfig(envName)
-  console.log({ env })
-  return env
+  return getCypressConfig(envName)
 }

examples/Core/ResponsiveProps/BreakpointSpecific.jsx

@@ -1,10 +1,7 @@
 import React from 'react'
-import Layout, { Composition } from 'atomic-layout'
-// import resetLayout from '../resetLayout'
+import { Composition } from 'atomic-layout'
 import Square from '@stories/Square'
 
-// resetLayout(Layout)
-
 const BreakpointSpecific = () => (
   <Composition
     id="composition"

examples/Core/ResponsiveProps/Compound.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Composition } from 'atomic-layout'
+import Square from '@stories/Square'
+
+const CompoundResponsiveProps = () => (
+  <>
+    {/* Multiple "down" behaviors */}
+    <Composition
+      id="composition-down"
+      padding={10}
+      paddingSmDown={20}
+      paddingMdDown={30}
+      paddingLgDown={40}
+      paddingXlDown={50}
+    >
+      <Square>First</Square>
+    </Composition>
+
+    {/* Combination of "up" and "down" */}
+    <Composition
+      id="composition-combination"
+      templateCols="200px"
+      templateColsSmDown="100px"
+      gutter={10}
+    >
+      <Square>First</Square>
+      <Square>Second</Square>
+    </Composition>
+  </>
+)
+
+export default CompoundResponsiveProps

examples/Core/ResponsiveProps/InclusiveNotch.jsx

@@ -1,10 +1,7 @@
 import React from 'react'
-import Layout, { Composition } from 'atomic-layout'
-// import resetLayout from '../resetLayout'
+import { Composition } from 'atomic-layout'
 import Square from '@stories/Square'
 
-// resetLayout(Layout)
-
 const template = 'first second'
 
 const InclusiveNotch = () => (

examples/Core/ResponsiveProps/MobileFirst.jsx

@@ -1,10 +1,7 @@
 import React from 'react'
-import Layout, { Composition } from 'atomic-layout'
-// import resetLayout from '../resetLayout'
+import { Composition } from 'atomic-layout'
 import Square from '@stories/Square'
 
-// resetLayout(Layout)
-
 const Foo = () => (
   <Composition id="composition" areas="first second" gutter={10}>
     {({ First, Second }) => (

examples/index.js

@@ -22,11 +22,13 @@ storiesOf('Core|Rendering', module)
 import MobileFirstResponsiveProps from './Core/ResponsiveProps/MobileFirst'
 import BreakpointSpecificResponsiveProps from './Core/ResponsiveProps/BreakpointSpecific'
 import InclusiveNotchResponsiveProps from './Core/ResponsiveProps/InclusiveNotch'
+import CompoundResponsiveProps from './Core/ResponsiveProps/Compound'
 
 storiesOf('Core|Responsive props', module)
   .add('Mobile-first', () => <MobileFirstResponsiveProps />)
   .add('Breakpoint-specific', () => <BreakpointSpecificResponsiveProps />)
   .add('Inclusive-notch', () => <InclusiveNotchResponsiveProps />)
+  .add('Compound', () => <CompoundResponsiveProps />)
 
 /**
  * Configuration

package.json

@@ -2,6 +2,10 @@
   "name": "atomic-layout",
   "version": "0.7.1",
   "description": "A single component to distribute a spacial relation in your layouts using CSS Grid.",
+  "author": {
+    "name": "Artem Zakharchenko",
+    "email": "[email protected]"
+  },
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
   "scripts": {
@@ -23,7 +27,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "eslint ./src/",
+      "tslint ./src/",
       "prettier --write",
       "git add"
     ]
@@ -34,10 +38,6 @@
       "maxSize": "20 kB"
     }
   ],
-  "author": {
-    "name": "Artem Zakharchenko",
-    "email": "[email protected]"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/kettanaito/atomic-layout"

src/utils/breakpoints/getAreaBreakpoints/getAreaBreakpoints.spec.ts

@@ -68,7 +68,7 @@ test('Notch', () => {
   ])
 })
 
-describe('Shuffled behavior', () => {
+describe('Combined behavior', () => {
   test('Concatenates sibling areas with "down" behavior', () => {
     const breakpointSm = Layout.getBreakpoint('sm') || {}
     const breakpointMd = Layout.getBreakpoint('md') || {}

src/utils/invariant/invariant.spec.ts

@@ -2,7 +2,7 @@ import invariant from './invariant'
 
 const createConsoleSpy = () => jest.spyOn(console, 'error')
 
-test('Should error when predicate is not satisfied', () => {
+test('Errors upon not satisfied predicate', () => {
   const consoleError = createConsoleSpy()
   const errorMessage = 'Error message'
 
@@ -12,7 +12,7 @@ test('Should error when predicate is not satisfied', () => {
   consoleError.mockRestore()
 })
 
-test('Should do nothing when predicate is satisfied', () => {
+test('Does nothing upon satisfied predicate', () => {
   const consoleError = createConsoleSpy()
 
   invariant(true, 'You should not see this')

src/utils/strings/capitalize/capitalize.spec.ts

@@ -4,3 +4,8 @@ test('Capitalizes the given string', () => {
   expect(capitalize('foo')).toBe('Foo')
   expect(capitalize('fooSome')).toBe('FooSome')
 })
+
+test('Returns already capitalized string as-is', () => {
+  expect(capitalize('Foo')).toBe('Foo')
+  expect(capitalize('FooSome')).toBe('FooSome')
+})

src/utils/strings/getPrefix/getPrefix.spec.ts

@@ -1,6 +1,6 @@
 import getPrefix from './getPrefix'
 
-test('Returns the min/max prefix of the given string', () => {
+test('Returns min/max prefix of the given string', () => {
   expect(getPrefix('maxHeight')).toEqual('max')
   expect(getPrefix('minResolution')).toEqual('min')
 })

src/utils/strings/hashString/hasString.spec.ts

@@ -1,13 +1,13 @@
 import hashString from './hashString'
 
 test('Returns numeric hash based on the given string', () => {
-  const str = 'template:header,content,footer'
-  expect(hashString(str)).toEqual(1927731245)
-  expect(hashString(str)).toEqual(1927731245)
+  const templateString = 'template:header,content,footer'
+  expect(hashString(templateString)).toEqual(1927731245)
+  expect(hashString(templateString)).toEqual(1927731245)
 
   expect(hashString('templateMd:header,content,footer')).toEqual(1323128868)
 })
 
-test('Returns zero for an empty string', () => {
+test('Returns zero for empty string', () => {
   expect(hashString('')).toEqual(0)
 })