Skip to content
Permalink
Browse files

Merge pull request #417 from jaridmargolin/space-object

Allow theme.space to be array *or* object
  • Loading branch information...
jxnblk committed Mar 11, 2019
2 parents a1bf639 + 0046815 commit 573956d0d88a66954aa6a2d56c701eaf23c505e2
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 573956d

Please sign in to comment.
You can’t perform that action at this time.