New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-flexa

Package Overview
Dependencies
Maintainers
2
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-flexa - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

storybook-static/favicon.ico

8

dist/components/Col/Col.js

@@ -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)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc