From 906f6ed09dd44cf9ea37639ed1274de87f1c11d4 Mon Sep 17 00:00:00 2001
From: Yannick Lohse <contact@yannick-lohse.fr>
Date: Thu, 2 Apr 2020 10:22:20 +0200
Subject: [PATCH] feat: Added DropdownButton component

---
 docs/styleguide.config.js                  |  1 +
 react/ActionMenu/Readme.md                 | 12 ++++++---
 react/DropdownButton/Readme.md             | 29 ++++++++++++++++++++++
 react/DropdownButton/index.jsx             | 24 ++++++++++++++++++
 react/DropdownButton/styles.styl           | 14 +++++++++++
 react/__snapshots__/examples.spec.jsx.snap | 16 +++++++++---
 6 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 react/DropdownButton/Readme.md
 create mode 100644 react/DropdownButton/index.jsx
 create mode 100644 react/DropdownButton/styles.styl

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index 8f1b0f2f4e..58c17e91e8 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -15,6 +15,7 @@ module.exports = {
         '../react/Badge/index.jsx',
         '../react/Button/index.jsx',
         '../react/ButtonAction/index.jsx',
+        '../react/DropdownButton/index.jsx',
         '../react/Card/index.jsx',
         '../react/CompositeRow/index.jsx',
         '../react/InlineCard/index.jsx',
diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
index fe902651e8..db7a65d3c0 100644
--- a/react/ActionMenu/Readme.md
+++ b/react/ActionMenu/Readme.md
@@ -4,6 +4,7 @@ Use an ActionMenu to show a list of actions. ActionMenus automatically switch th
 
 ```
 import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
 initialState = { menuDisplayed: isTesting() };
@@ -12,7 +13,7 @@ const showMenu = () => setState({ menuDisplayed: true });
 const hideMenu = () => setState({ menuDisplayed: false });
 
 <div>
-  <button onClick={showMenu}>Show action menu</button>
+  <DropdownButton onClick={showMenu}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
@@ -27,6 +28,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 
 ```
 import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
@@ -36,7 +38,7 @@ const showMenu = () => setState({ menuDisplayed: true });
 const hideMenu = () => setState({ menuDisplayed: false });
 
 <div>
-  <button onClick={showMenu}>Show action menu</button>
+  <DropdownButton onClick={showMenu}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
@@ -54,6 +56,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 
 ```
 import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
@@ -63,7 +66,7 @@ const showMenu = () => setState({ menuDisplayed: true });
 const hideMenu = () => setState({ menuDisplayed: false });
 
 <div>
-  <button onClick={showMenu}>Show action menu</button>
+  <DropdownButton onClick={showMenu}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
@@ -81,6 +84,7 @@ The `placement` and `anchorElRef` prop can be used to control the placement of t
 
 ```
 import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
 const testRef = React.createRef();
@@ -93,7 +97,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 const anchorRef = React.createRef();
 
 <div>
-  <button onClick={showMenu} ref={anchorRef}>Show action menu</button>
+  <DropdownButton onClick={showMenu} ref={anchorRef}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       anchorElRef={anchorRef}
diff --git a/react/DropdownButton/Readme.md b/react/DropdownButton/Readme.md
new file mode 100644
index 0000000000..f0483fbe6b
--- /dev/null
+++ b/react/DropdownButton/Readme.md
@@ -0,0 +1,29 @@
+This component can be used as a trigger to open menus, for example an ActionMenu component.
+
+```
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import Text, { MainTitle, Title, SubTitle } from 'cozy-ui/transpiled/react/Text';
+
+<div>
+  <div>
+    <DropdownButton>
+      <MainTitle>Cozy</MainTitle>
+    </DropdownButton>
+  </div>
+  <div>
+    <DropdownButton>
+      <Title>Cozy</Title>
+    </DropdownButton>
+  </div>
+  <div>
+    <DropdownButton>
+      <SubTitle>Cozy</SubTitle>
+    </DropdownButton>
+  </div>
+  <div>
+    <DropdownButton>
+      <Text>Cozy</Text>
+    </DropdownButton>
+  </div>
+</div>
+```
diff --git a/react/DropdownButton/index.jsx b/react/DropdownButton/index.jsx
new file mode 100644
index 0000000000..f2ba5ccd59
--- /dev/null
+++ b/react/DropdownButton/index.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './styles.styl'
+import Icon from '../Icon'
+
+const DropdownButton = React.forwardRef(
+  ({ children, className, ...props }, ref) => (
+    <button
+      role="button"
+      className={cx(styles['c-DropdownButton'], className)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <Icon
+        icon="bottom"
+        size="12"
+        className={styles['c-DropdownButton-Icon']}
+      />
+    </button>
+  )
+)
+
+export default DropdownButton
diff --git a/react/DropdownButton/styles.styl b/react/DropdownButton/styles.styl
new file mode 100644
index 0000000000..cd071a85df
--- /dev/null
+++ b/react/DropdownButton/styles.styl
@@ -0,0 +1,14 @@
+@require '../../stylus/settings/spaces'
+@require '../../stylus/tools/mixins'
+
+.c-DropdownButton
+    display inline-flex
+    align-items center
+    background none
+    border 0
+    cursor pointer
+    padding spacing_values.xs spacing_values.m
+  
+.c-DropdownButton-Icon
+    margin-top rem(4)
+    margin-left rem(4)
\ No newline at end of file
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index e53c554ffc..a629dd2bd9 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -2,7 +2,9 @@
 
 exports[`ActionMenu should render examples: ActionMenu 1`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
@@ -31,7 +33,9 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 2`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
@@ -60,7 +64,9 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 3`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
@@ -77,7 +83,9 @@ exports[`ActionMenu should render examples: ActionMenu 3`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 4`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">