Balances: improved stories && added props description

packages/core/src/components/Balances/Balances.js

@@ -110,9 +110,17 @@ Balances.propTypes = {
    * A className of Balances container
    */
   className: PropTypes.string,
-
+  /**
+   * If true, there are showing deposit and withdraw buttons
+   */
   showTransfer: PropTypes.bool,
+  /**
+   * Callback, invoked when user clicks on deposit button
+   */
   handleDepositClick: PropTypes.func,
+  /**
+   * Callback, invoked when user clicks on withdraw button
+   */
   handleWithdrawClick: PropTypes.func,
 }
 

packages/core/src/components/Balances/stories/Balances.stories.js

@@ -1,12 +1,32 @@
-import { showTemplateStory, getDefaultMetadata } from '../../../../../storybook/.storybook/helper'
-import Component, { Balances, defaultProps } from '../Balances'
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useState } from 'react'
+
+import {
+  showTemplateStory,
+  getDefaultMetadata,
+} from '../../../../../storybook/.storybook/helper'
+import { Balances } from '../Balances'
 import { data } from './Balances.stories_data'
 
 export default getDefaultMetadata(Balances, 'Components/Balances')
 
-const props = {
-  ...defaultProps,
-  balances: data,
+const Component = (props) => {
+  const [hideSmallBalances, setHideSmallBalances] = useState(true)
+
+  return (
+    <Balances
+      hideSmallBalances={hideSmallBalances}
+      setHideSmallBalances={setHideSmallBalances}
+      balances={data}
+      {...props}
+    />
+  )
 }
 
-export const basic = showTemplateStory(Component, props)
+export const basic = showTemplateStory(Component, {})
+
+export const withTransferButtons = showTemplateStory(Component, {
+  showTransfer: true,
+  handleDepositClick: () => alert('User is going to deposit current wallet'),
+  handleWithdrawClick: () => alert('User is going to withdraw from current wallet'),
+})