Add ConfirmModal component

src/components/base/Modal/ConfirmModal.js

@@ -0,0 +1,59 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import Button from 'components/base/Button'
+import Box from 'components/base/Box'
+
+import { Modal, ModalContent, ModalBody, ModalTitle, ModalFooter } from './index'
+
+type Props = {
+  isOpened: boolean,
+  isDanger: boolean,
+  title: string,
+  subTitle: string,
+  desc: string,
+  confirmText: string,
+  cancelText: string,
+  t: T,
+}
+
+class ConfirmModal extends PureComponent<Props> {
+  render() {
+    const { isOpened, title, subTitle, desc, confirmText, cancelText, isDanger, t } = this.props
+
+    const realConfirmText = confirmText || t('common:confirm')
+    const realCancelText = cancelText || t('common:cancel')
+    return (
+      <Modal
+        isOpened={isOpened}
+        render={({ onClose }) => (
+          <ModalBody onClose={onClose}>
+            <ModalTitle>{title}</ModalTitle>
+            <ModalContent>
+              {subTitle && (
+                <Box ff="Museo Sans|Regular" color="dark" textAlign="center" mb={2} mt={3}>
+                  {subTitle}
+                </Box>
+              )}
+              <Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center">
+                {desc}
+              </Box>
+            </ModalContent>
+            <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
+              <Button>{realCancelText}</Button>
+              <Button primary={!isDanger} danger={isDanger}>
+                {realConfirmText}
+              </Button>
+            </ModalFooter>
+          </ModalBody>
+        )}
+      />
+    )
+  }
+}
+
+export default translate()(ConfirmModal)

src/components/base/Modal/stories.js

@@ -2,29 +2,49 @@
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+import { boolean, text } from '@storybook/addon-knobs'
 
-import { Modal, ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
+import {
+  Modal,
+  ModalBody,
+  ModalTitle,
+  ModalContent,
+  ModalFooter,
+  ConfirmModal,
+} from 'components/base/Modal'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 
 const stories = storiesOf('Components/base', module)
 
-stories.add('Modal', () => {
-  const isOpened = boolean('isOpened', true)
-  return (
-    <Modal
-      isOpened={isOpened}
-      render={({ onClose }) => (
-        <ModalBody onClose={onClose}>
-          <ModalTitle>{'modal title'}</ModalTitle>
-          <ModalContent>{'this is the modal content'}</ModalContent>
-          <ModalFooter horizontal align="center">
-            <Box grow>{'modal footer'}</Box>
-            <Button primary>{'Next'}</Button>
-          </ModalFooter>
-        </ModalBody>
-      )}
-    />
-  )
-})
+stories.add('Modal', () => (
+  <Modal
+    isOpened={boolean('isOpened', true)}
+    render={({ onClose }) => (
+      <ModalBody onClose={onClose}>
+        <ModalTitle>{'modal title'}</ModalTitle>
+        <ModalContent>{'this is the modal content'}</ModalContent>
+        <ModalFooter horizontal align="center">
+          <Box grow>{'modal footer'}</Box>
+          <Button primary>{'Next'}</Button>
+        </ModalFooter>
+      </ModalBody>
+    )}
+  />
+))
+
+stories.add('ConfirmModal', () => (
+  <ConfirmModal
+    isOpened
+    isDanger={boolean('isDanger', false)}
+    title={text('title', 'Hard reset')}
+    subTitle={text('subTitle', 'Are you sure houston?')}
+    desc={text(
+      'desc',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non nibh diam. In eget ipsum arcu donec finibus',
+    )}
+    onConfirm={action('onConfirm')}
+    onReject={action('onReject')}
+  />
+))