[WIP] Implement sidebar-like modal v2 design

src/components/sidebar-modal.js

@@ -39,16 +39,20 @@ class SidebarModalMain extends React.PureComponent {
       PropTypes.func,
       PropTypes.string
     ]),
-    rtl: PropTypes.bool
+    rtl: PropTypes.bool,
+    version: PropTypes.number
   };
 
   static defaultProps = {
     animate: true,
-    isVisible: false
+    isVisible: false,
+    version: 1
   };
 
   render() {
-    let innerClassName = 'sidebar-modal__main';
+    const block = 'sidebar-modal-v'.concat(this.props.version);
+
+    let innerClassName = block.concat('__main');
     if (this.props.innerClassName) {
       innerClassName += ` ${this.props.innerClassName}`;
     }
@@ -65,25 +69,25 @@ class SidebarModalMain extends React.PureComponent {
     if (onClose || onCloseTo) {
       outside = (
         <Link
-          className="sidebar-modal__outside"
+          className={block.concat('__outside')}
           onClick={onClose}
           to={onCloseTo}
         />
       );
     }
 
     const cn = classNames(
-      'sidebar-modal',
+      block,
       this.props.className,
-      { 'sidebar-modal--rtl': this.props.rtl }
+      { [block.concat('--rtl')]: this.props.rtl }
     );
 
     if (this.props.animate) {
       return (
         <div className={cn}>
           {outside}
           <CSSTransitionGroup
-            transitionName="sidebar-modal__main--transition"
+            transitionName={block.concat('__main--transition')}
             transitionAppear
             transitionAppearTimeout={250}
             transitionEnterTimeout={250}
@@ -112,12 +116,14 @@ class SidebarModalOverlay extends React.Component {
 
   static propTypes = {
     color: PropTypes.string,
-    isVisible: PropTypes.bool
+    isVisible: PropTypes.bool,
+    version: PropTypes.number
   };
 
   static defaultProps = {
     color: "white",
-    isVisible: false
+    isVisible: false,
+    version: 1
   };
 
   constructor(props, ...args) {
@@ -155,8 +161,10 @@ class SidebarModalOverlay extends React.Component {
   }
 
   render() {
-    const def = 'sidebar-modal__overlay';
-    const cn = classNames('sidebar-modal', def, this.props.className, {
+    const block = 'sidebar-modal-v'.concat(this.props.version);
+    const def = block.concat('__overlay');
+
+    const cn = classNames(block, def, this.props.className, {
       [def.concat('--transition_appear')]: this.state.isAppearing,
       [def.concat('--transition_disappear')]: !this.props.isVisible && this.state.isVisible,
       [def.concat('--color_').concat(this.props.color)]: this.props.color,
@@ -175,14 +183,23 @@ class SidebarModalOverlay extends React.Component {
 
 class SidebarModalBody extends React.Component {
   static displayName = 'SidebarModalBody';
+
+  static propTypes = {
+    version: PropTypes.number
+  };
+
+  static defaultProps = {
+    version: 1
+  };
+
   shouldComponentUpdate(nextProps) {
     return nextProps !== this.props;
   }
 
   render() {
     const className = classNames(
       this.props.className,
-      { 'sidebar-modal__body': !this.props.raw }
+      { [`sidebar-modal-v${this.props.version}__body`]: !this.props.raw }
     );
 
     return (
@@ -206,26 +223,30 @@ class SidebarModalHeader extends React.Component {
       className: PropTypes.string,
       closeIcon: iconOrNone,
       mainIcon: iconOrNone,
-      theme: PropTypes.string
+      theme: PropTypes.string,
+      version: PropTypes.number
     };
   })();
 
   static defaultProps = {
     closeIcon: {},
-    mainIcon: {}
+    mainIcon: {},
+    version: 1
   };
 
   shouldComponentUpdate(nextProps) {
     return nextProps !== this.props;
   }
 
   render() {
+    const block = 'sidebar-modal-v'.concat(this.props.version);
+
     let mainIcon;
     if (this.props.mainIcon !== false) {
       const { className: mainIconClassName, ...props } = this.props.mainIcon;
       mainIcon = (
         <Icon
-          className={classNames('sidebar-modal__icon', mainIconClassName)}
+          className={classNames(block.concat('__icon'), mainIconClassName)}
           color="white"
           outline="blue"
           icon="cogs"
@@ -242,7 +263,7 @@ class SidebarModalHeader extends React.Component {
       const { className: closeIconClassName, ...props } = this.props.closeIcon;
       closeIcon = (
         <Icon
-          className={classNames('action sidebar-modal__close', closeIconClassName)}
+          className={classNames(block.concat('__close action'), closeIconClassName)}
           icon="close"
           pack="fa"
           size="common"
@@ -253,16 +274,18 @@ class SidebarModalHeader extends React.Component {
     }
 
     const className = classNames(
-      'sidebar-modal__header',
+      block.concat('__header'),
       this.props.className,
       this.props.theme &&
-        `sidebar-modal__header--theme_${this.props.theme}`
+        block.concat(`__header--theme_${this.props.theme}`)
     );
 
     return (
       <div className={className}>
         {mainIcon}
-        <div className="sidebar-modal__title">{this.props.children}</div>
+        <div className={block.concat('__title')}>
+          {this.props.children}
+        </div>
         {closeIcon}
       </div>
     );