Merge branch 'develop' of github.com:MetaMask/metamask-extension into trezor-v5

5 files changed, 213 insertions, 0 deletions

diff --git a/ui/app/components/sidebars/index.js b/ui/app/components/sidebars/index.js
new file mode 100644
index 000000000..732925f69
--- /dev/null
+++ b/ui/app/components/sidebars/index.js
@@ -0,0 +1 @@
+export { default } from './sidebar.component'
diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
new file mode 100644
index 000000000..5ab0664df
--- /dev/null
+++ b/ui/app/components/sidebars/index.scss
@@ -0,0 +1,74 @@
+.sidebar-right-enter {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(-100%);
+}
+
+.sidebar-right-enter.sidebar-right-enter-active {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(0%);
+}
+
+.sidebar-right-leave {
+  transition: transform 200ms ease-out;
+  transform: translateX(0%);
+}
+
+.sidebar-right-leave.sidebar-right-leave-active {
+  transition: transform 200ms ease-out;
+  transform: translateX(-100%);
+}
+
+.sidebar-left-enter {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(100%);
+}
+
+.sidebar-left-enter.sidebar-left-enter-active {
+  transition: transform 300ms ease-in-out;
+  transform: translateX(0%);
+}
+
+.sidebar-left-leave {
+  transition: transform 200ms ease-out;
+  transform: translateX(0%);
+}
+
+.sidebar-left-leave.sidebar-left-leave-active {
+  transition: transform 200ms ease-out;
+  transform: translateX(100%);
+}
+
+.sidebar-left {
+  flex: 1 0 230px;
+  background: rgb(250, 250, 250);
+  z-index: $sidebar-z-index;
+  position: fixed;
+  left: 15%;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  will-change: transform;
+  overflow-y: auto;
+  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+  width: 85%;
+  height: 100%;
+
+  @media screen and (min-width: 769px) {
+    width: 408px;
+    left: calc(100% - 408px);
+  }
+}
+
+.sidebar-overlay {
+  z-index: $sidebar-overlay-z-index;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  background-color: rgba(0, 0, 0, .3);
+}
\ No newline at end of file
diff --git a/ui/app/components/sidebars/sidebar.component.js b/ui/app/components/sidebars/sidebar.component.js
new file mode 100644
index 000000000..57cdd7111
--- /dev/null
+++ b/ui/app/components/sidebars/sidebar.component.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import WalletView from '../wallet-view'
+import { WALLET_VIEW_SIDEBAR } from './sidebar.constants'
+
+export default class Sidebar extends Component {
+
+  static propTypes = {
+    sidebarOpen: PropTypes.bool,
+    hideSidebar: PropTypes.func,
+    transitionName: PropTypes.string,
+    type: PropTypes.string,
+  };
+
+  renderOverlay () {
+    return <div className="sidebar-overlay" onClick={() => this.props.hideSidebar()} />
+  }
+
+  renderSidebarContent () {
+    const { type } = this.props
+
+    switch (type) {
+      case WALLET_VIEW_SIDEBAR:
+        return <WalletView responsiveDisplayClassname={'sidebar-right' } />
+      default:
+        return null
+    }
+
+  }
+
+  render () {
+    const { transitionName, sidebarOpen } = this.props
+
+    return (
+      <div>
+        <ReactCSSTransitionGroup
+          transitionName={transitionName}
+          transitionEnterTimeout={300}
+          transitionLeaveTimeout={200}
+        >
+          { sidebarOpen ? this.renderSidebarContent() : null }
+        </ReactCSSTransitionGroup>
+        { sidebarOpen ? this.renderOverlay() : null }
+      </div>
+    )
+  }
+
+}
diff --git a/ui/app/components/sidebars/sidebar.constants.js b/ui/app/components/sidebars/sidebar.constants.js
new file mode 100644
index 000000000..1613a8245
--- /dev/null
+++ b/ui/app/components/sidebars/sidebar.constants.js
@@ -0,0 +1 @@
+export const WALLET_VIEW_SIDEBAR = 'wallet-view'
diff --git a/ui/app/components/sidebars/tests/sidebars-component.test.js b/ui/app/components/sidebars/tests/sidebars-component.test.js
new file mode 100644
index 000000000..e2d77518a
--- /dev/null
+++ b/ui/app/components/sidebars/tests/sidebars-component.test.js
@@ -0,0 +1,88 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import Sidebar from '../sidebar.component.js'
+
+import WalletView from '../../wallet-view'
+
+const propsMethodSpies = {
+  hideSidebar: sinon.spy(),
+}
+
+describe('Sidebar Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<Sidebar
+      sidebarOpen={false}
+      hideSidebar={propsMethodSpies.hideSidebar}
+      transitionName={'someTransition'}
+      type={'wallet-view'}
+    />)
+  })
+
+  afterEach(() => {
+    propsMethodSpies.hideSidebar.resetHistory()
+  })
+
+  describe('renderOverlay', () => {
+    let renderOverlay
+
+    beforeEach(() => {
+      renderOverlay = shallow(wrapper.instance().renderOverlay())
+    })
+
+    it('should render a overlay element', () => {
+      assert(renderOverlay.hasClass('sidebar-overlay'))
+    })
+
+    it('should pass the correct onClick function to the element', () => {
+      assert.equal(propsMethodSpies.hideSidebar.callCount, 0)
+      renderOverlay.props().onClick()
+      assert.equal(propsMethodSpies.hideSidebar.callCount, 1)
+    })
+  })
+
+  describe('renderSidebarContent', () => {
+    let renderSidebarContent
+
+    beforeEach(() => {
+      wrapper.setProps({ type: 'wallet-view' })
+      renderSidebarContent = wrapper.instance().renderSidebarContent()
+    })
+
+    it('should render sidebar content with the correct props', () => {
+      wrapper.setProps({ type: 'wallet-view' })
+      renderSidebarContent = wrapper.instance().renderSidebarContent()
+      assert.equal(renderSidebarContent.props.responsiveDisplayClassname, 'sidebar-right')
+    })
+
+    it('should not render with an unrecognized type', () => {
+      wrapper.setProps({ type: 'foobar' })
+      renderSidebarContent = wrapper.instance().renderSidebarContent()
+      assert.equal(renderSidebarContent, undefined)
+    })
+  })
+
+  describe('render', () => {
+    it('should render a div with one child', () => {
+      assert(wrapper.is('div'))
+      assert.equal(wrapper.children().length, 1)
+    })
+
+    it('should render the ReactCSSTransitionGroup without any children', () => {
+      assert(wrapper.children().at(0).is(ReactCSSTransitionGroup))
+      assert.equal(wrapper.children().at(0).children().length, 0)
+    })
+
+    it('should render sidebar content and the overlay if sidebarOpen is true', () => {
+      wrapper.setProps({ sidebarOpen: true })
+      assert.equal(wrapper.children().length, 2)
+      assert(wrapper.children().at(1).hasClass('sidebar-overlay'))
+      assert.equal(wrapper.children().at(0).children().length, 1)
+      assert(wrapper.children().at(0).children().at(0).is(WalletView))
+    })
+  })
+})