Merge pull request #1844 from cozy/feat/custom-icon-for-clientbutton

Feat/custom icon for clientbutton
cozy · Jul 8, 2021 · dcb4f9e · dcb4f9e
2 parents 40be451 + 0ddd96b
commit dcb4f9e
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "5.3.4",
     "@svgr/cli": "^5.4.0",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.6",
     "@testing-library/react-hooks": "^3.2.1",
     "argos-cli": "^0.3.3",
@@ -176,7 +177,7 @@
     ]
   },
   "jest": {
-    "setupFiles": [
+    "setupFilesAfterEnv": [
       "./test/jestsetup.js"
     ],
     "moduleFileExtensions": [

diff --git a/react/PushClientButton/Readme.md b/react/PushClientButton/Readme.md
@@ -2,37 +2,39 @@
 
 Call To Action for downloading Cozy desktop client.
 
-### Basic usage
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
-<ButtonClient label="Download our desktop client" href="https://cozy.io" />
-```
-
-### Options
-
-#### action
-
-You can add a function to `onClick` prop on top of the hyperlink
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
-<ButtonClient
-  label="Download our desktop client"
-  href="https://cozy.io"
-  onClick={() => alert("Clicked!")}
-/>
-```
-
-#### className
-
-You can add custom classNames
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
-<ButtonClient
-  label="Download our desktop client"
-  href="https://cozy.io"
-  className="u-m-1"
-/>
+```jsx
+import ButtonClient from "cozy-ui/transpiled/react/PushClientButton";
+import BrowserBraveIcon from "cozy-ui/transpiled/react/Icons/BrowserBrave";
+import Variants from "cozy-ui/docs/components/Variants";
+
+const initialVariants = [{ onClick: true, className: false, icon: false }];
+
+<>
+  <Variants initialVariants={initialVariants}>
+    {variant => (
+      <ButtonClient
+        label="Download our desktop client"
+        href="https://cozy.io"
+        onClick={variant.onClick ? () => alert("Clicked!") : undefined}
+        className={variant.className ? "u-m-1" : undefined}
+        icon={variant.icon ? BrowserBraveIcon : undefined}
+      />
+    )}
+  </Variants>
+
+  {isTesting() ? (
+    <>
+      <ButtonClient
+        label="Button with custom className"
+        href="https://cozy.io"
+        className="u-m-1"
+      />
+      <ButtonClient
+        label="Button with custom icon"
+        href="https://cozy.io"
+        icon={BrowserBraveIcon}
+      />
+    </>
+  ) : null}
+</>;
 ```
diff --git a/react/PushClientButton/index.jsx b/react/PushClientButton/index.jsx
@@ -8,7 +8,8 @@ import Icon from '../Icon'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 
 const ButtonClient = props => {
-  const { label, href, onClick, className } = props
+  const { label, href, onClick, className, icon } = props
+
   return (
     <a
       href={href}
@@ -18,18 +19,24 @@ const ButtonClient = props => {
       onClick={onClick}
     >
       <figure>
-        <Icon icon={DeviceLaptopIcon} size="32" />
+        <Icon icon={icon || DeviceLaptopIcon} size="32" />
       </figure>
       <span>{label}</span>
     </a>
   )
 }
 
 ButtonClient.propTypes = {
+  /** Button's label */
   label: PropTypes.string.isRequired,
+  /** Button's hyperlink */
   href: PropTypes.string.isRequired,
+  /** Custom classNames to apply to the component */
   className: PropTypes.string,
-  onClick: PropTypes.func
+  /** Function `onClick` to be called on top of the hyperlink */
+  onClick: PropTypes.func,
+  /** Custom icon to display. If undefined then DeviceLaptop is used as default icon */
+  icon: PropTypes.elementType
 }
 
 ButtonClient.defaultProps = {

diff --git a/react/PushClientButton/index.spec.jsx b/react/PushClientButton/index.spec.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { render } from '@testing-library/react'
+
+import PushClientButton from './'
+
+jest.mock('cozy-ui/transpiled/react/Icons/DeviceLaptop', () => () => (
+  <div data-testid="device-laptop" />
+))
+
+describe('PushClientButton', () => {
+  it('should use DeviceLaptop if icon prop is not defined', async () => {
+    const { getByTestId } = render(<PushClientButton />)
+
+    expect(getByTestId(/device-laptop/)).toBeInTheDocument()
+  })
+
+  it('should accept a custom icon', async () => {
+    const CustomIcon = () => <div data-testid="custom-icon" />
+    const { getByTestId } = render(<PushClientButton icon={CustomIcon} />)
+
+    expect(getByTestId(/custom-icon/)).toBeInTheDocument()
+  })
+})
diff --git a/test/jestsetup.js b/test/jestsetup.js
@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/extend-expect'
 import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 

diff --git a/yarn.lock b/yarn.lock
@@ -986,6 +986,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -1993,6 +2000,21 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
+"@testing-library/jest-dom@^5.14.1":
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz#8501e16f1e55a55d675fe73eecee32cdaddb9766"
+  integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    "@types/testing-library__jest-dom" "^5.9.1"
+    aria-query "^4.2.2"
+    chalk "^3.0.0"
+    css "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
 "@testing-library/react-hooks@^3.2.1":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.2.1.tgz#19b6caa048ef15faa69d439c469033873ea01294"
@@ -2109,6 +2131,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest@*":
+  version "26.0.24"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
+  integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
+  dependencies:
+    jest-diff "^26.0.0"
+    pretty-format "^26.0.0"
+
 "@types/jest@^26.0.20":
   version "26.0.20"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.20.tgz#cd2f2702ecf69e86b586e1f5223a60e454056307"
@@ -2199,6 +2229,13 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/testing-library__jest-dom@^5.9.1":
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz#98eb7537cb5502bcca7a0d82acf5f245a2e6c322"
+  integrity sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A==
+  dependencies:
+    "@types/jest" "*"
+
 "@types/testing-library__react-hooks@^3.0.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.2.0.tgz#52f3a109bef06080e3b1e3ae7ea1c014ce859897"
@@ -2989,7 +3026,7 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-atob@^2.1.1:
+atob@^2.1.1, atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
@@ -5073,6 +5110,11 @@ css-what@2.1, css-what@^2.1.2:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -5083,6 +5125,15 @@ css@^2.0.0:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -5639,6 +5690,11 @@ dom-accessibility-api@^0.5.4:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
   integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
 
+dom-accessibility-api@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz#3f5d43b52c7a3bd68b5fb63fa47b4e4c1fdf65a9"
+  integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -15620,6 +15676,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"