WIP

Author: Yiin

components/modal/Dialog.js

@@ -6,13 +6,16 @@ import { classnames } from '../../helpers/component';
 const CLASSES = {
     MODAL: 'pm-modal',
     MODAL_OUT: 'pm-modalOut',
-    MODAL_SMALL: 'pm-modal--smaller'
+    MODAL_SMALL: 'pm-modal--smaller',
+    MODAL_WIDE: 'pm-modal--wider',
+    MODAL_FULL: 'pm-modal--full',
+    MODAL_AUTO: 'pm-modal--auto'
 };
 
 /** @type any */
 const Dialog = ({
     onExit,
-    small: isSmall = false,
+    size,
     isClosing = false,
     // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
     isFirst = false,
@@ -40,8 +43,13 @@ const Dialog = ({
                     open
                     className={classnames([
                         CLASSES.MODAL,
-                        isSmall && CLASSES.MODAL_SMALL,
-                        isSmall && 'pm-modal--shorterLabels',
+                        {
+                            small: CLASSES.MODAL_SMALL,
+                            wide: CLASSES.MODAL_WIDE,
+                            full: CLASSES.MODAL_FULL,
+                            auto: CLASSES.MODAL_AUTO
+                        }[size],
+                        size === 'small' && 'pm-modal--shorterLabels',
                         isClosing && CLASSES.MODAL_OUT,
                         extraClassNames
                     ])}
@@ -61,7 +69,8 @@ Dialog.propTypes = {
     children: PropTypes.node.isRequired,
     modalTitleID: PropTypes.string.isRequired,
     className: PropTypes.string,
-    small: PropTypes.bool,
+    // TODO: create & use MODAL_SIZE[size] constants
+    size: PropTypes.oneOf(['small', 'wide', 'full', 'auto']),
     isBehind: PropTypes.bool,
     isFirst: PropTypes.bool,
     isLast: PropTypes.bool,