diff --git a/src/components/modal/Modal.css b/src/components/modal/Modal.css index 0f5265f..2e5b09c 100644 --- a/src/components/modal/Modal.css +++ b/src/components/modal/Modal.css @@ -32,7 +32,7 @@ } .modalContent { - @mixin typography-body-1 em; + @mixin typography-body-2 em; /* Prevent text from flickering in Webkit */ backface-visibility: hidden; diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js index f7517c2..d47b3ae 100644 --- a/src/components/modal/Modal.js +++ b/src/components/modal/Modal.js @@ -8,8 +8,8 @@ const CLOSE_TRANSITION_DURATION = 250; // Must be 50ms higher than the actual CS const computeClassName = (className, classNameProp) => { if (classNameProp) { - if (classNameProp === 'string') { - className.base = classNames(className.base, className); + if (typeof classNameProp === 'string') { + className.base = classNames(className.base, classNameProp); } else { className.base = classNames(className.base, classNameProp.base); className.base = classNames(className.base, classNameProp.afterOpen); diff --git a/src/components/modal/README.md b/src/components/modal/README.md index fe454a4..c689b18 100644 --- a/src/components/modal/README.md +++ b/src/components/modal/README.md @@ -101,3 +101,40 @@ Important notes: - For accessibility reasons, be sure to define the `contentLabel` property. - The model has a `max-width` and `max-height` defined to prevent it from touching the viewport, with `4em` of spacing. You may set it by passing a `className` or specifying it via the `style` property. - The modal contents have a padding of `4em` by default. You may redefine it by passing a `className` or specifying it via the `style` property. + +## Turnkey modals + +### ConfirmModal + +A module to confirm an operation where the user must either confirm or cancel. + +#### Usage + +```js +import { ConfirmModal, ModalTrigger } from '@discussify/styleguide'; + +const modal = ( + console.log('confirmed') } + onCancel={ () => console.log('canceled') } /> +); + + + + +``` + +The `onRequestClose` property will be automatically called whenever the user confirms or cancels (if supplied). This will effectively close the dialog when using a trigger. + + +#### ConfirmModal props + +| name | type | default | description | +| ---- | ---- | ------- | ----------- | +| message | element | Are you sure? | The message to show above the buttons | +| confirmText | string | Yes | The text to show in the accept button | +| cancelText | string | Yes | The text to show in the reject button | +| onConfirm | function | | Function to call when the user confirms | +| onCancel | function | | Function to call when the user rejects | + +Besides the ones listed above, all properties from the `Modal` component are supported. diff --git a/src/components/modal/index.js b/src/components/modal/index.js index 8a86185..c12165b 100644 --- a/src/components/modal/index.js +++ b/src/components/modal/index.js @@ -1,2 +1,3 @@ export { default as Modal } from './Modal'; export { default as ModalTrigger } from './ModalTrigger'; +export * from './turnkey'; diff --git a/src/components/modal/turnkey/ConfirmModal.css b/src/components/modal/turnkey/ConfirmModal.css new file mode 100644 index 0000000..120777e --- /dev/null +++ b/src/components/modal/turnkey/ConfirmModal.css @@ -0,0 +1,17 @@ +.confirmModal { + min-width: 40rem; + + & .message { + text-align: center; + } + + & .actions { + margin-top: 3.5rem; + display: flex; + justify-content: space-between; + + & > * { + width: calc(50% - 0.8rem); + } + } +} diff --git a/src/components/modal/turnkey/ConfirmModal.js b/src/components/modal/turnkey/ConfirmModal.js new file mode 100644 index 0000000..892f317 --- /dev/null +++ b/src/components/modal/turnkey/ConfirmModal.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Button from '../../button'; +import Modal from '../Modal'; +import styles from './ConfirmModal.css'; + +class ConfirmModal extends Component { + render() { + const { + message, + cancelText, + confirmText, + onRequestClose, + className, + ...rest + } = this.props; + + return ( + +
{ message }
+ +
+ + +
+
+ ); + } + + handleConfirmClick = () => { + this.props.onConfirm(); + this.props.onRequestClose && this.props.onRequestClose(); + }; + + handleCancelClick = () => { + this.props.onCancel(); + this.props.onRequestClose && this.props.onRequestClose(); + }; +} + +ConfirmModal.defaultProps = { + message: 'Are you sure?', + cancelText: 'No', + confirmText: 'Yes', + autoclose: true, +}; + +ConfirmModal.propTypes = { + message: PropTypes.string, + cancelText: PropTypes.string, + confirmText: PropTypes.string, + autoclose: PropTypes.bool, + onConfirm: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + className: PropTypes.string, +}; + +export default ConfirmModal; diff --git a/src/components/modal/turnkey/index.js b/src/components/modal/turnkey/index.js new file mode 100644 index 0000000..1a770d6 --- /dev/null +++ b/src/components/modal/turnkey/index.js @@ -0,0 +1 @@ +export { default as ConfirmModal } from './ConfirmModal'; diff --git a/stories/modal.js b/stories/modal.js index 74bb3a1..2ebb594 100644 --- a/stories/modal.js +++ b/stories/modal.js @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withReadme } from 'storybook-readme'; import { withKnobs, boolean, text, selectV2 } from '@storybook/addon-knobs'; -import { Modal, ModalTrigger, Button } from '../src'; +import { Modal, ModalTrigger, ConfirmModal, Button } from '../src'; import readme from '../src/components/modal/README.md'; Modal.setAppElement('#root'); @@ -81,4 +81,13 @@ storiesOf('Modal', module) ); }); + +storiesOf('Modal/Turnkey', module) +.addDecorator(withReadme(readme)) +.add('ConfirmModal', () => ( + console.log('confirmed') } + onCancel={ () => console.log('canceled') } + isOpen /> +)); /* eslint-disable react/jsx-no-bind */