feat: Improve PushClientButton documentation

cozy · Jul 8, 2021 · 0ddd96b · 0ddd96b
1 parent 23bc4ad
commit 0ddd96b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 50 deletions.
diff --git a/react/PushClientButton/Readme.md b/react/PushClientButton/Readme.md
@@ -2,54 +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"
-/>
-```
-
-#### icon
-
-You can add custom icon to `icon` prop
-
-If not defined then `DeviceLaptop` is used as default icon
-
-```
-import ButtonClient from 'cozy-ui/transpiled/react/PushClientButton';
-import BrowserBraveIcon from 'cozy-ui/transpiled/react/Icons/BrowserBrave';
-<ButtonClient
-  label="Download our extension"
-  href="https://cozy.io"
-  className="u-m-1"
-  icon={BrowserBraveIcon}
-/>
+```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
@@ -27,10 +27,15 @@ const ButtonClient = props => {
 }
 
 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,
+  /** 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
 }