Add BarButton (#973)

Add BarButton

docs/styleguide.config.js

@@ -4,6 +4,10 @@ const webpackMerge = require('webpack-merge')
 module.exports = {
   title: 'Cozy UI React components',
   sections: [
+    {
+      name: 'Bar',
+      components: () => ['../react/BarButton/index.jsx']
+    },
     {
       name: 'Basics',
       components: () => [

react/BarButton/Readme.md

@@ -0,0 +1,37 @@
+# BarButton
+This component is used to display a back Button into the Cozy Bar.
+
+### Example
+
+```jsx static
+  const { BarLeft } = cozy.bar
+  return (
+    <BarLeft>
+      <BarButton />
+    </BarLeft>
+    )
+```
+
+## `disabled`
+
+```jsx
+<BarButton icon="back" disabled />
+```
+
+## `href`
+
+```jsx
+<BarButton icon="upload" href="http://cozy.io" />
+```
+
+## `icon`
+
+```jsx
+<BarButton icon="cube" />
+```
+
+## `onClick`
+
+```jsx
+<BarButton icon="gear" onClick={() => alert('BarButton has been clicked')} />
+```

react/BarButton/index.jsx

@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './styles.styl'
+
+import Icon from '../Icon'
+
+class MaybeLink extends PureComponent {
+  render() {
+    const { children, href, ...restProps } = this.props
+    return href ? (
+      <a href={href} {...restProps}>
+        {children}
+      </a>
+    ) : (
+      <div {...restProps}>{children}</div>
+    )
+  }
+}
+
+MaybeLink.propTypes = {
+  className: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func
+}
+
+export class BarButton extends PureComponent {
+  render() {
+    const { disabled, icon, href, onClick } = this.props
+    return (
+      <MaybeLink
+        className={styles['bar-btn']}
+        href={!disabled && href}
+        onClick={!disabled && onClick}
+      >
+        <Icon icon={icon} className={disabled ? 'u-silver' : 'u-coolGrey'} />
+      </MaybeLink>
+    )
+  }
+}
+
+BarButton.propTypes = {
+  /**
+   * Renders the component using a lighter grey color.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Renders the component using a anchor tag
+   */
+  href: PropTypes.string,
+  /**
+   * Used to render the internal `<Icon />` component.
+   */
+  icon: Icon.propTypes.icon,
+  /**
+   * Click event handler on the component.
+   */
+  onClick: PropTypes.func
+}
+
+export default BarButton

react/BarButton/styles.styl

@@ -0,0 +1,7 @@
+.c-bar-btn {
+  display flex
+  align-items center
+  justify-content center
+  width rem(48)
+  height rem(48)
+}

react/__snapshots__/examples.spec.jsx.snap

@@ -84,6 +84,36 @@ exports[`Badge should render examples: Badge 1`] = `
 </div>"
 `;
 
+exports[`BarButton should render examples: BarButton 1`] = `
+"<div>
+  <div><svg class=\\"u-silver styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <use xlink:href=\\"#back\\"></use>
+    </svg></div>
+</div>"
+`;
+
+exports[`BarButton should render examples: BarButton 2`] = `
+"<div><a href=\\"http://cozy.io\\"><svg class=\\"u-coolGrey styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <use xlink:href=\\"#upload\\"></use>
+    </svg></a></div>"
+`;
+
+exports[`BarButton should render examples: BarButton 3`] = `
+"<div>
+  <div><svg class=\\"u-coolGrey styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <use xlink:href=\\"#cube\\"></use>
+    </svg></div>
+</div>"
+`;
+
+exports[`BarButton should render examples: BarButton 4`] = `
+"<div>
+  <div><svg class=\\"u-coolGrey styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <use xlink:href=\\"#gear\\"></use>
+    </svg></div>
+</div>"
+`;
+
 exports[`Button should render examples: Button 1`] = `
 "<div>
   <div>

react/examples.spec.jsx

@@ -23,6 +23,7 @@ testComponent('MuiCozyTheme/ExpansionPanel')
 testComponent('ActionMenu')
 testComponent('Avatar')
 testComponent('Badge')
+testComponent('BarButton')
 testComponent('Button')
 testComponent('ButtonAction')
 testComponent('Checkbox')

react/testFromStyleguidist.js

@@ -17,6 +17,7 @@ import ActionMenu from './ActionMenu'
 import Alerter from './Alerter'
 import Avatar from './Avatar'
 import Badge from './Badge'
+import BarButton from './BarButton'
 import Button from './Button'
 import ButtonAction from './ButtonAction'
 import ButtonClient from './PushClientButton'
@@ -70,6 +71,7 @@ const testFromStyleguidist = (name, markdown, require) => {
       'Alerter',
       'Avatar',
       'Badge',
+      'BarButton',
       'Button',
       'ButtonAction',
       'ButtonClient',
@@ -117,6 +119,7 @@ const testFromStyleguidist = (name, markdown, require) => {
       Alerter,
       Avatar,
       Badge,
+      BarButton,
       Button,
       ButtonAction,
       ButtonClient,