Merge pull request #325 from claudivanfilho/feature/new-icons

Feature/new icons

Author: Bruno Dias

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
 

react/IconBars.js

@@ -0,0 +1,3 @@
+import Bars from './components/icon/Bars/index'
+
+export default Bars

react/IconShoppingCart.js

@@ -0,0 +1,3 @@
+import ShoppingCart from './components/icon/ShoppingCart/index'
+
+export default ShoppingCart

react/IconUser.js

@@ -0,0 +1,3 @@
+import User from './components/icon/User/index'
+
+export default User

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 (
+      <svg
+        className={`${baseClassname('bars')} ${block ? 'db' : ''}`}
+        width={newSize.width}
+        height={newSize.height}
+        viewBox="0 0 18 12"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 12H18V10H0V12ZM0 7H18V5H0V7ZM0 0V2H18V0H0Z"
+          fill={color}
+        />
+      </svg>
+    )
+  }
+}
+
+Bars.defaultProps = {
+  color: 'currentColor',
+  size: 20,
+  block: false,
+}
+
+Bars.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.number,
+  block: PropTypes.bool,
+}
+
+export default Bars

react/components/icon/README.md

@@ -4,6 +4,7 @@ Usage: <span className="c-muted-1">`import <IconName> 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'
         <div className={demoLabel}>Warning (solid)</div>
         <Warning solid size={demoSize} />
       </td>
-      <td />
+      <td>
+        <div className={demoLabel}>Bars</div>
+        <Bars size={demoSize} />
+      </td>
+      <td>
+        <div className={demoLabel}>User</div>
+        <User size={demoSize} />
+      </td>
+      <td>
+        <div className={demoLabel}>Shopping Cart</div>
+        <ShoppingCart size={demoSize} />
+      </td>
     </tr>
   </tbody>
 </table>

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 (
+      <svg
+        className={`${baseClassname('shopping-cart')} ${block ? 'db' : ''}`}
+        width={newSize.width}
+        height={newSize.height}
+        viewBox="0 0 32 30"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 30C9.65685 30 11 28.6569 11 27C11 25.3431 9.65685 24 8 24C6.34315 24 5 25.3431 5 27C5 28.6569 6.34315 30 8 30Z"
+          fill={color}
+        />
+        <path
+          d="M27 30C28.6569 30 30 28.6569 30 27C30 25.3431 28.6569 24 27 24C25.3431 24 24 25.3431 24 27C24 28.6569 25.3431 30 27 30Z"
+          fill={color}
+        />
+        <path
+          d="M28 22H7C6.505 22 6.084 21.638 6.011 21.148L3.139 2H0V0H4C4.495 0 4.916 0.362 4.989 0.852L5.611 5H31C31.3 5 31.583 5.134 31.773 5.366C31.963 5.597 32.039 5.902 31.98 6.196L28.98 21.196C28.887 21.664 28.477 22 28 22Z"
+          fill={color}
+        />
+      </svg>
+    )
+  }
+}
+
+ShoppingCart.defaultProps = {
+  color: 'currentColor',
+  size: 20,
+  block: false,
+}
+
+ShoppingCart.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.number,
+  block: PropTypes.bool,
+}
+
+export default ShoppingCart

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 (
+      <svg
+        className={`${baseClassname('user')} ${block ? 'db' : ''}`}
+        width={newSize.width}
+        height={newSize.height}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16 0C7.17733 0 0 7.17733 0 16C0 24.8227 7.17733 32 16 32C24.8227 32 32 24.8227 32 16C32 7.17733 24.8227 0 16 0ZM24.9307 25.872C24.0453 23.2413 21.5973 21.3333 18.6667 21.3333H13.3333C10.4027 21.3333 7.95733 23.2427 7.072 25.8733C4.37467 23.432 2.66667 19.916 2.66667 16C2.66667 8.648 8.648 2.66667 16 2.66667C23.352 2.66667 29.3333 8.648 29.3333 16C29.3333 19.9147 27.6267 23.4307 24.9307 25.872Z"
+          fill={color}
+        />
+        <path
+          d="M15.9998 6.66699C13.0545 6.66699 10.6665 9.05499 10.6665 12.0003V13.3337C10.6665 16.279 13.0545 18.667 15.9998 18.667C18.9452 18.667 21.3332 16.279 21.3332 13.3337V12.0003C21.3332 9.05499 18.9452 6.66699 15.9998 6.66699Z"
+          fill={color}
+        />
+      </svg>
+    )
+  }
+}
+
+User.defaultProps = {
+  color: 'currentColor',
+  size: 20,
+  block: false,
+}
+
+User.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.number,
+  block: PropTypes.bool,
+}
+
+export default User