diff --git a/CHANGELOG.md b/CHANGELOG.md index d92c3b721..4b32d7ea6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- `IconBars`, `IconUser` and `IconShoppingCart` components ## [7.1.0] - 2018-10-03 diff --git a/react/IconBars.js b/react/IconBars.js new file mode 100644 index 000000000..c5c17d306 --- /dev/null +++ b/react/IconBars.js @@ -0,0 +1,3 @@ +import Bars from './components/icon/Bars/index' + +export default Bars diff --git a/react/IconShoppingCart.js b/react/IconShoppingCart.js new file mode 100644 index 000000000..c58607d73 --- /dev/null +++ b/react/IconShoppingCart.js @@ -0,0 +1,3 @@ +import ShoppingCart from './components/icon/ShoppingCart/index' + +export default ShoppingCart diff --git a/react/IconUser.js b/react/IconUser.js new file mode 100644 index 000000000..cc4fb110c --- /dev/null +++ b/react/IconUser.js @@ -0,0 +1,3 @@ +import User from './components/icon/User/index' + +export default User diff --git a/react/components/icon/Bars/index.js b/react/components/icon/Bars/index.js new file mode 100644 index 000000000..9c3480e88 --- /dev/null +++ b/react/components/icon/Bars/index.js @@ -0,0 +1,47 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { calcIconSize, baseClassname } from '../utils' + +const iconBase = { + width: 18, + height: 12, +} + +class Bars extends PureComponent { + render() { + const { color, size, block } = this.props + const newSize = calcIconSize(iconBase, size) + + return ( + + + + ) + } +} + +Bars.defaultProps = { + color: 'currentColor', + size: 20, + block: false, +} + +Bars.propTypes = { + color: PropTypes.string, + size: PropTypes.number, + block: PropTypes.bool, +} + +export default Bars diff --git a/react/components/icon/README.md b/react/components/icon/README.md index 5832d5b7c..70d5961fa 100644 --- a/react/components/icon/README.md +++ b/react/components/icon/README.md @@ -4,6 +4,7 @@ Usage: `import from '@vtex/styleguide/lib const ArrowBack = require('./ArrowBack').default const ArrowDown = require('./ArrowDown').default const ArrowUp = require('./ArrowUp').default +const Bars = require('./Bars').default const CaretDown = require('./CaretDown').default const CaretLeft = require('./CaretLeft').default const CaretRight = require('./CaretRight').default @@ -27,10 +28,12 @@ const Link = require('./Link').default const Plus = require('./Plus').default const Save = require('./Save').default const Search = require('./Search').default +const ShoppingCart = require('./ShoppingCart').default const Success = require('./Success').default const Upload = require('./Upload').default const VisibilityOff = require('./VisibilityOff').default const VisibilityOn = require('./VisibilityOn').default +const User = require('./User').default const Warning = require('./Warning').default const PlusLines = require('./PlusLines').default @@ -221,7 +224,18 @@ const demoLabel = 'pb3 code c-muted-1 f6'
Warning (solid)
- + +
Bars
+ + + +
User
+ + + +
Shopping Cart
+ + diff --git a/react/components/icon/ShoppingCart/index.js b/react/components/icon/ShoppingCart/index.js new file mode 100644 index 000000000..d5389444d --- /dev/null +++ b/react/components/icon/ShoppingCart/index.js @@ -0,0 +1,53 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { calcIconSize, baseClassname } from '../utils' + +const iconBase = { + width: 44, + height: 44, +} + +class ShoppingCart extends PureComponent { + render() { + const { color, size, block } = this.props + const newSize = calcIconSize(iconBase, size) + + return ( + + + + + + ) + } +} + +ShoppingCart.defaultProps = { + color: 'currentColor', + size: 20, + block: false, +} + +ShoppingCart.propTypes = { + color: PropTypes.string, + size: PropTypes.number, + block: PropTypes.bool, +} + +export default ShoppingCart diff --git a/react/components/icon/User/index.js b/react/components/icon/User/index.js new file mode 100644 index 000000000..cca7df6cb --- /dev/null +++ b/react/components/icon/User/index.js @@ -0,0 +1,49 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { calcIconSize, baseClassname } from '../utils' + +const iconBase = { + width: 44, + height: 44, +} + +class User extends PureComponent { + render() { + const { color, size, block } = this.props + const newSize = calcIconSize(iconBase, size) + + return ( + + + + + ) + } +} + +User.defaultProps = { + color: 'currentColor', + size: 20, + block: false, +} + +User.propTypes = { + color: PropTypes.string, + size: PropTypes.number, + block: PropTypes.bool, +} + +export default User