react-flexa
Advanced tools
Comparing version 0.8.3 to 0.9.0
@@ -49,6 +49,6 @@ Object.defineProperty(exports, "__esModule", { | ||
Col.propTypes = { | ||
xs: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
sm: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
md: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
lg: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
xs: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
sm: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
md: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
lg: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string, _propTypes2['default'].oneOf(['hidden', 'auto'])]), | ||
@@ -55,0 +55,0 @@ gutter: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string, _propTypes2['default'].shape({ |
@@ -31,2 +31,4 @@ var _react = require('react'); | ||
return _react2['default'].createElement(_stories.AutoGrow, null); | ||
}).add('One fixed col', function () { | ||
return _react2['default'].createElement(_stories.Fixed, null); | ||
}); |
@@ -10,3 +10,4 @@ Object.defineProperty(exports, "__esModule", { | ||
_templateObject4 = _taggedTemplateLiteral(['\n flex: 1;\n '], ['\n flex: 1;\n ']), | ||
_templateObject5 = _taggedTemplateLiteral(['\n flex-basis: ', '%;\n max-width: ', '%;\n ', '\n '], ['\n flex-basis: ', '%;\n max-width: ', '%;\n ', '\n ']); | ||
_templateObject5 = _taggedTemplateLiteral(['\n flex-basis: ', '%;\n max-width: ', '%;\n ', '\n '], ['\n flex-basis: ', '%;\n max-width: ', '%;\n ', '\n ']), | ||
_templateObject6 = _taggedTemplateLiteral(['\n width: ', ';\n max-width: ', ';\n flex-basis: initial;\n '], ['\n width: ', ';\n max-width: ', ';\n flex-basis: initial;\n ']); | ||
@@ -61,4 +62,12 @@ var _styledComponents = require('styled-components'); | ||
return (0, _has2['default'])(props, '' + String(breakpoint)) ? (0, _styledComponents.css)(_templateObject5, width, width, display(props, breakpoint)) : null; | ||
if ((0, _has2['default'])(props, '' + String(breakpoint)) && typeof props[breakpoint] !== 'string') { | ||
return (0, _styledComponents.css)(_templateObject5, width, width, display(props, breakpoint)); | ||
} | ||
if ((0, _has2['default'])(props, '' + String(breakpoint)) && typeof props[breakpoint] === 'string') { | ||
return (0, _styledComponents.css)(_templateObject6, props[breakpoint], props[breakpoint]); | ||
} | ||
return null; | ||
}; | ||
exports['default'] = columnWidth; |
@@ -95,2 +95,14 @@ var _columnWidth = require('./columnWidth'); | ||
}); | ||
test('should return a fixed column', function () { | ||
var hiddenMockProps = { xs: 12, sm: 5, md: 6, lg: '390px' }; | ||
var width = (0, _columnWidth2['default'])(hiddenMockProps, 'lg').join(''); | ||
expect(width).toContain('max-width: 390px;'); | ||
}); | ||
test('should return a fixed column with sibling responsive', function () { | ||
var hiddenMockProps = { xs: 12, sm: 5, md: 6, lg: 'calc(100% - 390px)' }; | ||
var width = (0, _columnWidth2['default'])(hiddenMockProps, 'lg').join(''); | ||
expect(width).toContain('calc(100% - 390px);'); | ||
}); | ||
}); |
{ | ||
"name": "react-flexa", | ||
"version": "0.8.3", | ||
"version": "0.9.0", | ||
"description": "React flexbox grid system using styled components", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -86,6 +86,6 @@ # react-flexa | ||
|:--------------|:------------------------------------------------------------|:----------------------------------------------------------------------------------------|:--------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| `xs` | integer | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` | nill | Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up. | | ||
| `sm` | integer | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` | nill | Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up. | | ||
| `md` | integer | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` | nill | Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up. | | ||
| `lg` | integer | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` | nill | Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up. | | ||
| `xs` | integer/ string | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'` | nill | **Number:** Sets the width of the col based the column configuration (12 by default) for the XS breakpoint and up.<br> **String:** Set a width like string `xs="390px"` to fixed have a fixed colum, or create a calc `xs="calc(100% - 390px)"` base on sibling to have a responsive column. | | ||
| `sm` | integer/ string | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'` | nill | **Number:** Sets the width of the col based the column configuration (12 by default) for the SM breakpoint and up.<br> **String:** Set a width like string `sm="390px"` to fixed have a fixed colum, or create a calc `sm="calc(100% - 390px)"` base on sibling to have a responsive column. | | ||
| `md` | integer/ string | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'` | nill | **Number:** Sets the width of the col based the column configuration (12 by default) for the MD breakpoint and up.<br> **String:** Set a width like string `md="390px"` to fixed have a fixed colum, or create a calc `md="calc(100% - 390px)"` base on sibling to have a responsive column. | | ||
| `lg` | integer/ string | `0`-`12`<br>(based on default columns)<br>`hidden`<br>`auto` <br> `'390px'` - `'calc=(100% - 390px)'` | nill | **Number:** Sets the width of the col based the column configuration (12 by default) for the LG breakpoint and up.<br> **String:** Set a width like string `lg="390px"` to fixed have a fixed colum, or create a calc `lg="calc(100% - 390px)"` base on sibling to have a responsive column. | | ||
| `gutter` | integer, string,<br>[object](#responsive-api-using-objects) | `'1rem'`<br>`'12px'`<br>`4` | `'1rem'` | Sets the width of the gutter to be used between columns. For correct positioning you must set the same value (if custom) on the parent Row | | ||
@@ -260,1 +260,2 @@ | `order` | string,<br>[object](#responsive-api-using-objects) | `-1`<br>`0`<br>`1`<br>(etc) | `0` | By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. [Read more about order.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-9) | | ||
[MIT License](.github/LICENSE.md) | ||
3440845
260
41
927