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

@roo-ui/components

Package Overview
Dependencies
Maintainers
2
Versions
176
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@roo-ui/components - npm Package Compare versions

Comparing version 0.8.1 to 0.8.2

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

<a name="0.8.2"></a>
## [0.8.2](https://github.com/hooroo/roo-ui/compare/v0.8.1...v0.8.2) (2018-05-11)
**Note:** Version bump only for package @roo-ui/components
<a name="0.8.1"></a>

@@ -8,0 +16,0 @@ ## [0.8.1](https://github.com/hooroo/roo-ui/compare/v0.8.0...v0.8.1) (2018-05-11)

6

dist/Box/Box.js

@@ -5,3 +5,3 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n ', '\n ', '\n ', '\n ', '\n'], ['\n ', '\n ', '\n ', '\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', ';\n ', ';\n'], ['\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', ';\n ', ';\n']);

@@ -22,6 +22,6 @@ var _styledComponents = require('styled-components');

var Box = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.space, _styledSystem.width, _styledSystem.color, _styledSystem.textAlign);
var Box = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.space, _styledSystem.width, _styledSystem.height, _styledSystem.color, _styledSystem.textAlign, _styledSystem.boxShadow, _styledSystem.borderRadius, _styledSystem.borders, _styledSystem.borderColor);
Box.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.width.propTypes, _styledSystem.color.propTypes, _styledSystem.textAlign.propTypes);
Box.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.width.propTypes, _styledSystem.height.propTypes, _styledSystem.color.propTypes, _styledSystem.textAlign.propTypes, _styledSystem.boxShadow.propTypes, _styledSystem.borderRadius.propTypes, _styledSystem.borders.propTypes, _styledSystem.borderColor.propTypes);
exports['default'] = Box;

8

dist/Card/Card.js

@@ -5,6 +5,4 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n ', '\n ', ';\n'], ['\n ', '\n ', ';\n']);
var _templateObject = _taggedTemplateLiteral([''], ['']);
var _styledSystem = require('styled-system');
var _ = require('..');

@@ -14,6 +12,4 @@

var Card = _.Box.extend(_templateObject, _styledSystem.boxShadow, _styledSystem.borderRadius);
var Card = _.Box.extend(_templateObject);
Card.propTypes = Object.assign({}, _styledSystem.boxShadow.propTypes, _styledSystem.borderRadius.propTypes);
Card.defaultProps = {

@@ -20,0 +16,0 @@ boxShadow: 'default',

6

dist/Flex/Flex.js

@@ -5,3 +5,3 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n display: flex;\n\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', ';\n'], ['\n display: flex;\n\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', ';\n']);
var _templateObject = _taggedTemplateLiteral(['\n display: flex;\n\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', ';\n'], ['\n display: flex;\n\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', ';\n']);

@@ -22,6 +22,6 @@ var _styledComponents = require('styled-components');

var Flex = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.space, _styledSystem.width, _styledSystem.color, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexWrap, _styledSystem.flexDirection);
var Flex = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.space, _styledSystem.width, _styledSystem.height, _styledSystem.color, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexWrap, _styledSystem.flexDirection);
Flex.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.width.propTypes, _styledSystem.color.propTypes, _styledSystem.alignItems.propTypes, _styledSystem.justifyContent.propTypes, _styledSystem.flexWrap.propTypes, _styledSystem.flexDirection.propTypes);
Flex.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.width.propTypes, _styledSystem.height.propTypes, _styledSystem.color.propTypes, _styledSystem.alignItems.propTypes, _styledSystem.justifyContent.propTypes, _styledSystem.flexWrap.propTypes, _styledSystem.flexDirection.propTypes);
exports['default'] = Flex;

20

dist/Image/Image.js

@@ -5,4 +5,9 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n display: block;\n max-width: 100%;\n height: auto;\n\n ', '\n'], ['\n display: block;\n max-width: 100%;\n height: auto;\n\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n display: block;\n max-width: 100%;\n height: auto;\n\n ', '\n ', '\n ', '\n ', '\n\n ', '\n'], ['\n display: block;\n max-width: 100%;\n height: auto;\n\n ', '\n ', '\n ', '\n ', '\n\n ', '\n']),
_templateObject2 = _taggedTemplateLiteral(['\n display: inline-block;\n '], ['\n display: inline-block;\n ']);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _styledComponents = require('styled-components');

@@ -22,6 +27,15 @@

var Image = (0, _styledComponents2['default'])(_cleanTag2['default'].img)(_templateObject, _styledSystem.space);
var Image = (0, _styledComponents2['default'])(_cleanTag2['default'].img)(_templateObject, _styledSystem.space, _styledSystem.size, _styledSystem.height, _styledSystem.width, function (props) {
return props.inline && (0, _styledComponents.css)(_templateObject2);
});
Image.propTypes = Object.assign({}, _styledSystem.space.propTypes);
Image.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.size.propTypes, _styledSystem.height.propTypes, _styledSystem.width.propTypes, {
inline: _propTypes2['default'].bool
});
Image.defaultProps = {
blacklist: Object.keys(Image.propTypes),
inline: false
};
exports['default'] = Image;

22

dist/Input/Input.js

@@ -5,4 +5,9 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n display: block;\n width: 100%;\n margin: 0;\n padding: ', ' ', ';\n font-size: ', ';\n line-height: ', ';\n color: ', ';\n border: ', ';\n border-color: ', ';\n outline: 0;\n appearance: none;\n\n\n &:focus {\n border-color: ', ';\n }\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', ';\n'], ['\n display: block;\n width: 100%;\n margin: 0;\n padding: ', ' ', ';\n font-size: ', ';\n line-height: ', ';\n color: ', ';\n border: ', ';\n border-color: ', ';\n outline: 0;\n appearance: none;\n\n\n &:focus {\n border-color: ', ';\n }\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', ';\n']);
var _templateObject = _taggedTemplateLiteral(['\n display: block;\n width: 100%;\n margin: 0;\n margin-bottom: ', ';\n padding: ', ' ', ';\n font-size: ', ';\n line-height: ', ';\n color: ', ';\n border: ', ';\n border-color: ', ';\n outline: 0;\n transition: border-color ', ';\n appearance: none;\n\n &:focus {\n border-color: ', ';\n }\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', '\n\n ', ';\n'], ['\n display: block;\n width: 100%;\n margin: 0;\n margin-bottom: ', ';\n padding: ', ' ', ';\n font-size: ', ';\n line-height: ', ';\n color: ', ';\n border: ', ';\n border-color: ', ';\n outline: 0;\n transition: border-color ', ';\n appearance: none;\n\n &:focus {\n border-color: ', ';\n }\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', '\n\n ', ';\n']),
_templateObject2 = _taggedTemplateLiteral(['\n border-color: ', ';\n '], ['\n border-color: ', ';\n ']);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _styledComponents = require('styled-components');

@@ -22,6 +27,17 @@

var Input = (0, _styledComponents2['default'])(_cleanTag2['default'].input)(_templateObject, (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.4'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('colors.grey.0'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.grey.2'), (0, _styledSystem.themeGet)('colors.brand.secondary'), (0, _styledSystem.themeGet)('colors.grey.1'), _styledSystem.space);
var Input = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.4'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('colors.grey.0'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.grey.2'), (0, _styledSystem.themeGet)('transitions.default'), (0, _styledSystem.themeGet)('colors.brand.secondary'), (0, _styledSystem.themeGet)('colors.grey.1'), function (props) {
return props.error && (0, _styledComponents.css)(_templateObject2, (0, _styledSystem.themeGet)('colors.ui.error'));
}, _styledSystem.space);
Input.propTypes = Object.assign({}, _styledSystem.space.propTypes);
Input.propTypes = Object.assign({}, _styledSystem.space.propTypes, {
error: _propTypes2['default'].bool
});
Input.defaultProps = {
blacklist: Object.keys(Input.propTypes),
// TODO: use tag.input once this issue is fixed:
// https://github.com/jxnblk/styled-system/issues/180
is: 'input'
};
exports['default'] = Input;

10

dist/Label/Label.js

@@ -5,3 +5,3 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n display: block;\n width: 100%;\n line-height: ', ';\n\n ', '\n \n ', '\n ', '\n ', '\n ', '\n ', '\n'], ['\n display: block;\n width: 100%;\n line-height: ', ';\n\n ', '\n \n ', '\n ', '\n ', '\n ', '\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n display: block;\n width: 100%;\n margin: 0;\n margin-bottom: ', ';\n\n ', '\n\n ', '\n ', '\n'], ['\n display: block;\n width: 100%;\n margin: 0;\n margin-bottom: ', ';\n\n ', '\n\n ', '\n ', '\n']);

@@ -28,7 +28,7 @@ var _propTypes = require('prop-types');

var Label = (0, _styledComponents2['default'])(_cleanTag2['default'].label)(_templateObject, (0, _styledSystem.themeGet)('lineHeights.normal'), function (props) {
var Label = (0, _styledComponents2['default'])(_cleanTag2['default'].label)(_templateObject, (0, _styledSystem.themeGet)('space.3'), function (props) {
return props.hidden && (0, _polished.hideVisually)();
}, _styledSystem.textStyle, _styledSystem.space, _styledSystem.fontSize, _styledSystem.color, _styledSystem.fontWeight);
}, _styledSystem.textStyle, _styledSystem.space);
Label.propTypes = Object.assign({}, _styledSystem.textStyle.propTypes, _styledSystem.space.propTypes, _styledSystem.fontSize.propTypes, _styledSystem.color.propTypes, _styledSystem.fontWeight.propTypes, {
Label.propTypes = Object.assign({}, _styledSystem.textStyle.propTypes, _styledSystem.space.propTypes, {
hidden: _propTypes2['default'].bool

@@ -39,4 +39,2 @@ });

textStyle: 'label',
m: 0,
mb: 3,
hidden: false

@@ -43,0 +41,0 @@ };

21

dist/Link/Link.js

@@ -5,4 +5,9 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n cursor: pointer;\n text-decoration: none;\n\n ', '\n ', '\n'], ['\n cursor: pointer;\n text-decoration: none;\n\n ', '\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n cursor: pointer;\n text-decoration: none;\n color: ', ';\n\n &:hover {\n color: ', ';\n }\n\n &:focus {\n outline: ', ' ', ';\n }\n\n ', '\n ', '\n ', '\n\n ', '\n'], ['\n cursor: pointer;\n text-decoration: none;\n color: ', ';\n\n &:hover {\n color: ', ';\n }\n\n &:focus {\n outline: ', ' ', ';\n }\n\n ', '\n ', '\n ', '\n\n ', '\n']),
_templateObject2 = _taggedTemplateLiteral(['\n &, &:hover {\n text-decoration: underline;\n color: inherit;\n }\n '], ['\n &, &:hover {\n text-decoration: underline;\n color: inherit;\n }\n ']);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _styledComponents = require('styled-components');

@@ -22,13 +27,15 @@

var Link = (0, _styledComponents2['default'])(_cleanTag2['default'].a)(_templateObject, _styledSystem.color, _styledSystem.hover);
var Link = (0, _styledComponents2['default'])(_cleanTag2['default'].a)(_templateObject, (0, _styledSystem.themeGet)('colors.ui.link'), (0, _styledSystem.themeGet)('colors.ui.linkHover'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.brand.secondary'), _styledSystem.color, _styledSystem.hover, _styledSystem.fontWeight, function (props) {
return props.inline && (0, _styledComponents.css)(_templateObject2);
});
Link.propTypes = Object.assign({}, _styledSystem.color.propTypes, _styledSystem.hover.propTypes);
Link.propTypes = Object.assign({}, _styledSystem.color.propTypes, _styledSystem.hover.propTypes, _styledSystem.fontWeight.propTypes, {
inline: _propTypes2['default'].bool
});
Link.defaultProps = {
color: 'ui.link',
hover: {
color: 'ui.linkHover'
}
blacklist: Object.keys(Link.propTypes),
inline: false
};
exports['default'] = Link;

8

dist/Text/Text.js

@@ -5,3 +5,3 @@ Object.defineProperty(exports, "__esModule", {

var _templateObject = _taggedTemplateLiteral(['\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n'], ['\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n margin: 0;\n margin-bottom: ', ';\n\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n'], ['\n margin: 0;\n margin-bottom: ', ';\n\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n']);

@@ -22,3 +22,3 @@ var _styledComponents = require('styled-components');

var Text = (0, _styledComponents2['default'])(_cleanTag2['default'].p)(_templateObject, _styledSystem.textStyle, _styledSystem.color, _styledSystem.fontSize, _styledSystem.fontWeight, _styledSystem.letterSpacing, _styledSystem.lineHeight, _styledSystem.space, _styledSystem.textAlign);
var Text = (0, _styledComponents2['default'])(_cleanTag2['default'].p)(_templateObject, (0, _styledSystem.themeGet)('space.2'), _styledSystem.textStyle, _styledSystem.color, _styledSystem.fontSize, _styledSystem.fontWeight, _styledSystem.letterSpacing, _styledSystem.lineHeight, _styledSystem.space, _styledSystem.textAlign);

@@ -28,7 +28,5 @@ Text.propTypes = Object.assign({}, _styledSystem.textStyle.propTypes, _styledSystem.color.propTypes, _styledSystem.fontSize.propTypes, _styledSystem.fontWeight.propTypes, _styledSystem.letterSpacing.propTypes, _styledSystem.lineHeight.propTypes, _styledSystem.space.propTypes, _styledSystem.textAlign.propTypes);

Text.defaultProps = {
textStyle: 'text',
m: 0,
mb: 2
textStyle: 'text'
};
exports['default'] = Text;

2

package.json
{
"name": "@roo-ui/components",
"version": "0.8.1",
"version": "0.8.2",
"main": "dist/index.js",

@@ -5,0 +5,0 @@ "publishConfig": {

22

src/Box/Box.js
import styled from 'styled-components';
import tag from 'clean-tag';
import { space, width, color, textAlign } from 'styled-system';
import {
space,
width,
height,
color,
textAlign,
boxShadow,
borderRadius,
borders,
borderColor,
} from 'styled-system';

@@ -8,4 +18,9 @@ const Box = styled(tag)`

${width}
${height}
${color}
${textAlign}
${boxShadow}
${borderRadius}
${borders};
${borderColor};
`;

@@ -16,6 +31,11 @@

...width.propTypes,
...height.propTypes,
...color.propTypes,
...textAlign.propTypes,
...boxShadow.propTypes,
...borderRadius.propTypes,
...borders.propTypes,
...borderColor.propTypes,
};
export default Box;

2

src/Box/README.md

@@ -23,2 +23,2 @@ # Box

This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive), or [color](https://github.com/jxnblk/styled-system#color-responsive).
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive), [height](https://github.com/jxnblk/styled-system#layout), [color](https://github.com/jxnblk/styled-system#color-responsive), [text align](https://github.com/jxnblk/styled-system#typography), [box shadow](https://github.com/jxnblk/styled-system#misc), or [borders](https://github.com/jxnblk/styled-system#borders).

12

src/Card/Card.js

@@ -1,15 +0,5 @@

import { boxShadow, borderRadius } from 'styled-system';
import { Box } from '..';
const Card = Box.extend`
${boxShadow}
${borderRadius};
`;
const Card = Box.extend``;
Card.propTypes = {
...boxShadow.propTypes,
...borderRadius.propTypes,
};
Card.defaultProps = {

@@ -16,0 +6,0 @@ boxShadow: 'default',

2

src/Card/README.md

@@ -23,2 +23,2 @@ # Card

This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive), [color](https://github.com/jxnblk/styled-system#color-responsive), [box shadow](https://github.com/jxnblk/styled-system#misc), or [border radius](https://github.com/jxnblk/styled-system#borders).
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive), [height](https://github.com/jxnblk/styled-system#layout), [color](https://github.com/jxnblk/styled-system#color-responsive), [text align](https://github.com/jxnblk/styled-system#typography), [box shadow](https://github.com/jxnblk/styled-system#misc), or [borders](https://github.com/jxnblk/styled-system#borders).

3

src/Flex/Flex.js

@@ -6,2 +6,3 @@ import styled from 'styled-components';

width,
height,
color,

@@ -19,2 +20,3 @@ alignItems,

${width}
${height}
${color}

@@ -30,2 +32,3 @@ ${alignItems}

...width.propTypes,
...height.propTypes,
...color.propTypes,

@@ -32,0 +35,0 @@ ...alignItems.propTypes,

2

src/Flex/README.md

@@ -26,2 +26,2 @@ # Flex

This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive), [color](https://github.com/jxnblk/styled-system#color-responsive), or [flexbox](https://github.com/jxnblk/styled-system#flexbox).
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive), [height](https://github.com/jxnblk/styled-system#layout), [color](https://github.com/jxnblk/styled-system#color-responsive), or [flexbox](https://github.com/jxnblk/styled-system#flexbox).

21

src/Image/Image.js

@@ -1,4 +0,5 @@

import styled from 'styled-components';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import tag from 'clean-tag';
import { space } from 'styled-system';
import { space, size, height, width } from 'styled-system';

@@ -11,2 +12,9 @@ const Image = styled(tag.img)`

${space}
${size}
${height}
${width}
${props => props.inline && css`
display: inline-block;
`}
`;

@@ -16,4 +24,13 @@

...space.propTypes,
...size.propTypes,
...height.propTypes,
...width.propTypes,
inline: PropTypes.bool,
};
Image.defaultProps = {
blacklist: Object.keys(Image.propTypes),
inline: false,
};
export default Image;

10

src/Image/README.md

@@ -23,8 +23,10 @@ # Image

| Name | Description | Type | Default | Required? |
|:------|:------------|:---------|:--------|:----------|
| `src` | image url | `string` | - | ✔︎ |
| Name | Description | Type | Default | Required? |
|:---------|:---------------|:---------|:--------|:----------|
| `src` | image url | `string` | - | ✔︎ |
| `inline` | display inline | `bool` | false | - |
## Customization
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive).
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), [width](https://github.com/jxnblk/styled-system#width-responsive),
[height](https://github.com/jxnblk/styled-system#layout), or [size](https://github.com/jxnblk/styled-system#layout).

20

src/Input/Input.js

@@ -1,9 +0,11 @@

import styled from 'styled-components';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { space, themeGet } from 'styled-system';
import tag from 'clean-tag';
const Input = styled(tag.input)`
const Input = styled(tag)`
display: block;
width: 100%;
margin: 0;
margin-bottom: ${themeGet('space.3')};
padding: ${themeGet('space.3')} ${themeGet('space.4')};

@@ -16,5 +18,5 @@ font-size: ${themeGet('fontSizes.base')};

outline: 0;
transition: border-color ${themeGet('transitions.default')};
appearance: none;
&:focus {

@@ -32,2 +34,6 @@ border-color: ${themeGet('colors.brand.secondary')};

${props => props.error && css`
border-color: ${themeGet('colors.ui.error')};
`}
${space};

@@ -38,4 +44,12 @@ `;

...space.propTypes,
error: PropTypes.bool,
};
Input.defaultProps = {
blacklist: Object.keys(Input.propTypes),
// TODO: use tag.input once this issue is fixed:
// https://github.com/jxnblk/styled-system/issues/180
is: 'input',
};
export default Input;

6

src/Input/README.md

@@ -21,4 +21,10 @@ # Input

## Properties
| Name | Description | Type | Default | Required? |
|:--------|:-------------------|:-------|:--------|:----------|
| `error` | render error style | `bool` | false | - |
## Customization
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive).

15

src/Label/Label.js
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { hideVisually } from 'polished';
import { themeGet, textStyle, space, fontSize, fontWeight, color } from 'styled-system';
import { themeGet, textStyle, space } from 'styled-system';
import tag from 'clean-tag';

@@ -10,11 +10,9 @@

width: 100%;
line-height: ${themeGet('lineHeights.normal')};
margin: 0;
margin-bottom: ${themeGet('space.3')};
${props => props.hidden && hideVisually()}
${textStyle}
${space}
${fontSize}
${color}
${fontWeight}
`;

@@ -25,5 +23,2 @@

...space.propTypes,
...fontSize.propTypes,
...color.propTypes,
...fontWeight.propTypes,
hidden: PropTypes.bool,

@@ -34,4 +29,2 @@ };

textStyle: 'label',
m: 0,
mb: 3,
hidden: false,

@@ -38,0 +31,0 @@ };

2

src/Label/README.md

@@ -29,2 +29,2 @@ # Label

This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive), or [color](https://github.com/jxnblk/styled-system#color-responsive).
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [space](https://github.com/jxnblk/styled-system#space-responsive).

30

src/Link/Link.js

@@ -1,4 +0,5 @@

import styled from 'styled-components';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import tag from 'clean-tag';
import { color, hover } from 'styled-system';
import { color, hover, fontWeight, themeGet } from 'styled-system';

@@ -8,5 +9,22 @@ const Link = styled(tag.a)`

text-decoration: none;
color: ${themeGet('colors.ui.link')};
&:hover {
color: ${themeGet('colors.ui.linkHover')};
}
&:focus {
outline: ${themeGet('borders.2')} ${themeGet('colors.brand.secondary')};
}
${color}
${hover}
${fontWeight}
${props => props.inline && css`
&, &:hover {
text-decoration: underline;
color: inherit;
}
`}
`;

@@ -17,11 +35,11 @@

...hover.propTypes,
...fontWeight.propTypes,
inline: PropTypes.bool,
};
Link.defaultProps = {
color: 'ui.link',
hover: {
color: 'ui.linkHover',
},
blacklist: Object.keys(Link.propTypes),
inline: false,
};
export default Link;

8

src/Link/README.md

@@ -34,4 +34,10 @@ # Link

## Properties
| Name | Description | Type | Default | Required? |
|:---------|:-------------------|:-------|:--------|:----------|
| `inline` | inherit font color | `bool` | false | - |
## Customization
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [color](https://github.com/jxnblk/styled-system#color-responsive) or [hover](https://github.com/jxnblk/styled-system#hover).
This component can be customized with [styled-system](https://github.com/jxnblk/styled-system) by passing props for [color](https://github.com/jxnblk/styled-system#color-responsive), [hover](https://github.com/jxnblk/styled-system#hover), or [font weight](https://github.com/jxnblk/styled-system#typography).

6

src/Text/Text.js

@@ -12,5 +12,9 @@ import styled from 'styled-components';

textAlign,
themeGet,
} from 'styled-system';
const Text = styled(tag.p)`
margin: 0;
margin-bottom: ${themeGet('space.2')};
${textStyle}

@@ -39,6 +43,4 @@ ${color}

textStyle: 'text',
m: 0,
mb: 2,
};
export default Text;
src/BlockLink/__snapshots__/BlockLink.test.js.snap

Sorry, the diff of this file is not supported yet

src/Heading/__snapshots__/Heading.test.js.snap

Sorry, the diff of this file is not supported yet

src/Image/__snapshots__/Image.test.js.snap

Sorry, the diff of this file is not supported yet

src/Input/__snapshots__/Input.test.js.snap

Sorry, the diff of this file is not supported yet

src/Label/__snapshots__/Label.test.js.snap

Sorry, the diff of this file is not supported yet

src/Link/__snapshots__/Link.test.js.snap

Sorry, the diff of this file is not supported yet

src/Text/__snapshots__/Text.test.js.snap

Sorry, the diff of this file is not supported yet

src/Truncate/__snapshots__/Truncate.test.js.snap

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc