EditLayoutButton: replaced to ui folder, added props description and …

…stories

packages/core/src/components/index.js

@@ -14,4 +14,4 @@ export { default as OrderForm } from './OrderForm'
 export * from './Balances'
 export * from './DepthChart'
 export * from './Movements'
-export { default as EditLayoutButton } from './EditLayoutButton'
+export { default as EditLayoutButton } from './ui/EditLayoutButton'

packages/core/src/components/EditLayoutButton/EditLayoutButton.js → packages/core/src/components/ui/EditLayoutButton/EditLayoutButton.js

@@ -1,16 +1,15 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import withI18nProvider from '../../hoc/withI18nProvider'
-import Button from '../ui/Button'
+import withI18nProvider from '../../../hoc/withI18nProvider'
+import Button from '../Button'
 
-const EditLayoutButton = (props) => {
-  const {
-    layoutIsEditable,
-    enableEditLayout,
-    closeEditLayout,
-  } = props
+export const EditLayoutButton = ({
+  layoutIsEditable,
+  enableEditLayout,
+  closeEditLayout,
+}) => {
   const { t } = useTranslation()
 
   const label = layoutIsEditable
@@ -37,8 +36,18 @@ const EditLayoutButton = (props) => {
 }
 
 EditLayoutButton.propTypes = {
+  /**
+   * Callback, that enable editing layout (open modal)
+   */
   enableEditLayout: PropTypes.func,
+  /**
+   * If true, button's text is "Edit layout",
+   * if false - "Close edit"
+   */
   layoutIsEditable: PropTypes.bool,
+  /**
+   * Callback, that close editing (close modal)
+   */
   closeEditLayout: PropTypes.func,
 }
 
@@ -48,4 +57,4 @@ EditLayoutButton.defaultProps = {
   closeEditLayout: () => {},
 }
 
-export default withI18nProvider(EditLayoutButton)
+export default withI18nProvider(memo(EditLayoutButton))

packages/core/src/components/ui/EditLayoutButton/stories/EditLayoutButton.stories.js

@@ -0,0 +1,42 @@
+import React, { useCallback, useState } from 'react'
+
+import {
+  showTemplateStory,
+  getDefaultMetadata,
+} from '../../../../../../storybook/.storybook/helper'
+import Modal from '../../Dialog'
+import Button, { EditLayoutButton } from '../EditLayoutButton'
+
+export default getDefaultMetadata(
+  EditLayoutButton,
+  'Components/ui/EditLayoutButton',
+)
+
+const Component = () => {
+  const [isShowingModal, setModalShowing] = useState(false)
+
+  const onClose = useCallback(() => setModalShowing(false), [])
+
+  return (
+    <>
+      <Button
+        layoutIsEditable={isShowingModal}
+        enableEditLayout={() => setModalShowing(true)}
+        closeEditLayout={onClose}
+      />
+      <Modal
+        title='Edit Layout Modal'
+        isOpen={isShowingModal}
+        onClose={onClose}
+      >
+        Here you can edit layout
+        <Modal.Footer>
+          <Modal.Button primary onClick={onClose}>
+            OK
+          </Modal.Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  )
+}
+export const basic = showTemplateStory(Component, {})