Feature/UIDS-188 Add new Modals to DS (#208)

* add Modal and react-modal

* add ModalHeader

* add ModalBody

* add ModalFooter

* initial update of scss on components

* WIP stories for Modals

* small story edit

* add Warning and Danger icon variants

* more story updates

* lint

* small scss changes to ModalHeader

* update docs

* move react-modal to peerDependencies

* revert deleted files

* Modal default props set to undefined

* use classnames lib

* use Input component for example Modal + lint

* fix Input id prop warning

* lint

Author: jasonbasuil

package.json

@@ -44,6 +44,7 @@
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.12.0",
+    "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
     "react-tracking": "^7.3.0"
   },

scss/timing.scss

@@ -7,4 +7,4 @@ $ux-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
 
 $ux-duration-brief: 80ms;
 $ux-duration-short: 160ms;
-$ux-duration-long: 240ms;
+$ux-duration-long: 240ms; 

src/Layout/Header/Controls.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-const Controls = props => (
+const Controls = (props) => (
   <div className="Header__controls">
     {props.children}
   </div>
 );
 
-export default Controls;
+export default Controls;

src/Layout/Header/Header.scss

@@ -18,4 +18,4 @@
       margin-right: $ux-spacing-20;
     }
   }
-}
+}

src/Layout/Header/index.js

@@ -1 +1 @@
-export { default } from './Header';
+export { default } from './Header';

src/Layout/SidebarNav/SidebarNav.jsx

@@ -25,4 +25,4 @@ SidebarNav.defaultProps = {
   controls: undefined,
 };
 
-export default SidebarNav;
+export default SidebarNav;

src/Layout/SidebarNav/SidebarNavLink.scss

@@ -31,4 +31,3 @@
   height: 3.25rem;
   width: 100%;
 }
-

src/Layout/SidebarNav/index.js

@@ -1 +1 @@
-export { default } from './SidebarNav';
+export { default } from './SidebarNav';

src/Layout/SidebarView/SidebarView.jsx

@@ -39,20 +39,6 @@ import './SidebarView.scss';
 // mismatched, the layout would remain in the ‘unopenable’ state.
 
 export default class SidebarView extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    hideSidebar: PropTypes.bool,
-    isSidebarOpen: PropTypes.bool.isRequired,
-    isSidebarOpenable: PropTypes.bool.isRequired,
-    sidebarTitleId: PropTypes.string.isRequired,
-    onSidebarCloseRequest: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    className: undefined,
-    hideSidebar: false,
-  };
-
   contentElementRef = createRef();
 
   sidebarElementRef = createRef();
@@ -189,3 +175,17 @@ export default class SidebarView extends Component {
     );
   }
 }
+
+SidebarView.propTypes = {
+  className: PropTypes.string,
+  hideSidebar: PropTypes.bool,
+  isSidebarOpen: PropTypes.bool.isRequired,
+  isSidebarOpenable: PropTypes.bool.isRequired,
+  sidebarTitleId: PropTypes.string.isRequired,
+  onSidebarCloseRequest: PropTypes.func.isRequired,
+};
+
+SidebarView.defaultProps = {
+  className: undefined,
+  hideSidebar: false,
+};

src/Layout/SidebarView/SidebarView.scss

@@ -64,4 +64,4 @@
       }
     }
   }
-}
+}