From cdc21ac37d2f3264d10e506889faa36000aa9593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gory=20LE=20GAREC?= <gregory.legarec@gmail.com>
Date: Mon, 13 May 2019 12:42:18 +0200
Subject: [PATCH] =?UTF-8?q?feat(BarBackButton):=20Add=20BarBackButton=20?=
 =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BarBackButton component is targeted to be injected into
the cozy-bar to offer a back button for mobile navigation.

```jsx
const { BarLeft } = cozy.bar
return (
 <BarLeft>
   <BarBackButton />
 </BarLeft>
)
```
---
 docs/styleguide.config.js                  |  4 ++
 react/BarButton/Readme.md                  | 37 +++++++++++++
 react/BarButton/index.jsx                  | 61 ++++++++++++++++++++++
 react/BarButton/styles.styl                |  7 +++
 react/__snapshots__/examples.spec.jsx.snap | 30 +++++++++++
 react/examples.spec.jsx                    |  1 +
 react/testFromStyleguidist.js              |  3 ++
 7 files changed, 143 insertions(+)
 create mode 100644 react/BarButton/Readme.md
 create mode 100644 react/BarButton/index.jsx
 create mode 100644 react/BarButton/styles.styl

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index 176dd0dab8..ae0db3a042 100644
--- a/docs/styleguide.config.js
+++ b/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: () => [
diff --git a/react/BarButton/Readme.md b/react/BarButton/Readme.md
new file mode 100644
index 0000000000..98d2169a0e
--- /dev/null
+++ b/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')} />
+```
diff --git a/react/BarButton/index.jsx b/react/BarButton/index.jsx
new file mode 100644
index 0000000000..08a634a880
--- /dev/null
+++ b/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
diff --git a/react/BarButton/styles.styl b/react/BarButton/styles.styl
new file mode 100644
index 0000000000..862ec01674
--- /dev/null
+++ b/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)
+}
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index f1f62017ed..0bd4bc1d74 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/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>
diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
index 5ce5e86f46..ad49ef082b 100644
--- a/react/examples.spec.jsx
+++ b/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')
diff --git a/react/testFromStyleguidist.js b/react/testFromStyleguidist.js
index eab442821b..ff0d1e4066 100644
--- a/react/testFromStyleguidist.js
+++ b/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,