Skip to content
Permalink
Browse files

Allow theme.space to be array *or* object

  • Loading branch information...
jaridmargolin committed Mar 7, 2019
1 parent a1bf639 commit 00468156d56737b2d254c8ec9115afc6619ee75d
Showing with 41 additions and 15 deletions.
  1. +6 −3 src/index.js
  2. +35 −12 test/styles.js
@@ -91,14 +91,14 @@ export const style = ({
}
func.propTypes[prop].meta = {
prop,
themeKey: key
themeKey: key,
}

if (alias) {
func.propTypes[alias] = cloneFunction(propType)
func.propTypes[alias].meta = {
prop: alias,
themeKey: key
themeKey: key,
}
}

@@ -136,7 +136,10 @@ export const variant = ({ key, prop = 'variant' }) => {
const spaceScale = [0, 4, 8, 16, 32, 64, 128, 256, 512]

const getSpace = (n, scale) => {
if (!num(n)) return n
if (!num(n)) {
return px(get(scale, n, n))
}

const isNegative = n < 0
const absolute = Math.abs(n)
const value = get(scale, absolute)
@@ -1,5 +1,17 @@
import test from 'ava'
import { space, color, width, fontSize, size, gridGap, gridRowGap, gridColumnGap, buttonStyle, textStyle, colorStyle } from '../src'
import {
space,
color,
width,
fontSize,
size,
gridGap,
gridRowGap,
gridColumnGap,
buttonStyle,
textStyle,
colorStyle,
} from '../src'

const theme = {
colors: {
@@ -142,6 +154,17 @@ test('returns negative string values from theme', t => {
t.deepEqual(styles, [{ margin: '-1em' }])
})

test('returns values from theme object', t => {
const styles = space({
theme: {
space: { sm: 1 },
},
margin: 'sm',
})

t.deepEqual(styles, [{ margin: '1px' }])
})

test('pl prop sets paddingLeft', t => {
const styles = space({ pl: 2 })
t.deepEqual(styles, [{ paddingLeft: '8px' }])
@@ -214,7 +237,7 @@ test('gridGap returns a scalar style', t => {
test('gridGap uses the default scale', t => {
const a = gridGap({
theme: {},
gridGap: 2
gridGap: 2,
})

t.deepEqual(a, { gridGap: '8px' })
@@ -234,7 +257,7 @@ test('gridRowGap returns a scalar style', t => {
test('gridRowGap uses the default scale', t => {
const a = gridRowGap({
theme: {},
gridRowGap: 2
gridRowGap: 2,
})

t.deepEqual(a, { gridRowGap: '8px' })
@@ -254,7 +277,7 @@ test('gridColumnGap returns a scalar style', t => {
test('gridColumnGap uses the default scale', t => {
const a = gridColumnGap({
theme: {},
gridColumnGap: 2
gridColumnGap: 2,
})

t.deepEqual(a, { gridColumnGap: '8px' })
@@ -267,10 +290,10 @@ test('textStyle prop returns theme.textStyles object', t => {
heading: {
fontWeight: 'bold',
lineHeight: 1.25,
}
}
},
},
},
textStyle: 'heading'
textStyle: 'heading',
})
t.deepEqual(a, {
fontWeight: 'bold',
@@ -284,14 +307,14 @@ test('colors prop returns theme.colorStyles object', t => {
colorStyles: {
dark: {
color: '#fff',
backgroundColor: '#000'
}
}
backgroundColor: '#000',
},
},
},
colors: 'dark'
colors: 'dark',
})
t.deepEqual(a, {
color: '#fff',
backgroundColor: '#000'
backgroundColor: '#000',
})
})

0 comments on commit 0046815

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.