feat: add confirm-modal as a turnkey modal

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;

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);

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 = (
+    <ConfirmModal
+        onConfirm={ () => console.log('confirmed') }
+        onCancel={ () => console.log('canceled') } />
+);
+
+<ModalTrigger modal={ modal }>
+    <Button variant="primary">Click me</Button>
+</ModalTrigger>
+```
+
+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.

src/components/modal/index.js

@@ -1,2 +1,3 @@
 export { default as Modal } from './Modal';
 export { default as ModalTrigger } from './ModalTrigger';
+export * from './turnkey';

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);
+        }
+    }
+}

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 (
+            <Modal
+                { ...rest }
+                className={ classNames(styles.confirmModal, className) }>
+                <div className={ styles.message }>{ message }</div>
+
+                <div className={ styles.actions }>
+                    <Button
+                        variant="primary"
+                        onClick={ this.handleCancelClick }>
+                        { cancelText }
+                    </Button>
+                    <Button
+                        variant="secondary"
+                        onClick={ this.handleConfirmClick }>
+                        { confirmText }
+                    </Button>
+                </div>
+            </Modal>
+        );
+    }
+
+    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;

src/components/modal/turnkey/index.js

@@ -0,0 +1 @@
+export { default as ConfirmModal } from './ConfirmModal';

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)
         </ModalTrigger>
     );
 });
+
+storiesOf('Modal/Turnkey', module)
+.addDecorator(withReadme(readme))
+.add('ConfirmModal', () => (
+    <ConfirmModal
+        onConfirm={ () => console.log('confirmed') }
+        onCancel={ () => console.log('canceled') }
+        isOpen />
+));
 /* eslint-disable react/jsx-no-bind */