Tx popover (#8210)

* Add minimal working popover

* Fix styling of popover component

* Use lorem ipsum

* Update classnames and remove unrelated styles

* Remove unused components

* Add SVG close icon

* Add Close icon to icon stories

* Use div

* Use `addon-actions`

* Use `<button>` for close

* Fix button wobble in Firefox

* Remove border

ui/app/components/ui/icon/close-icon.component.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Copy = ({
+  className,
+  size,
+  color,
+}) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.561602 13.4766C0.871724 13.7867 1.37453 13.7867 1.68465 13.4766L7.01912 8.14214L12.5303 13.6533C12.8404 13.9634 13.3432 13.9634 13.6533 13.6533C13.9635 13.3432 13.9635 12.8404 13.6533 12.5303L8.14217 7.01909L13.4767 1.68456C13.7868 1.37444 13.7868 0.871633 13.4767 0.561511C13.1666 0.251388 12.6638 0.251387 12.3536 0.56151L7.01912 5.89604L1.86129 0.738211C1.55117 0.428089 1.04836 0.428089 0.738241 0.738212C0.428119 1.04833 0.428118 1.55114 0.73824 1.86126L5.89607 7.01909L0.561602 12.3536C0.251479 12.6637 0.25148 13.1665 0.561602 13.4766Z"
+      fill={color}
+    />
+  </svg>
+)
+
+Copy.defaultProps = {
+  className: undefined,
+}
+
+Copy.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+}
+
+export default Copy

ui/app/components/ui/icon/icon.stories.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Approve from './approve-icon.component'
 import Copy from './copy-icon.component'
+import Close from './close-icon.component'
 import Interaction from './interaction-icon.component'
 import Preloader from './preloader'
 import Receive from './receive-icon.component'
@@ -51,3 +52,10 @@ export const preloader = () => (
     size={number('size', 40)}
   />
 )
+
+export const close = () => (
+  <Close
+    size={number('size', 40)}
+    color={color('color', '#2F80ED')}
+  />
+)

ui/app/components/ui/popover/index.js

@@ -0,0 +1,3 @@
+import Item from './popover.component'
+
+export default Item

ui/app/components/ui/popover/index.scss

@@ -0,0 +1,79 @@
+.popover {
+  &-wrap {
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      -webkit-border-radius: 10px;
+      border-radius: 10px;
+      background: #C4C4C4;
+    }
+
+    position: absolute;
+    width: 328px;
+    height: 564px;
+
+    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    background: white;
+  }
+
+  &-header {
+    &__heading {
+      @extend %font;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 25px;
+      text-align: center;
+      padding: 20px 0;
+      border-bottom: 1px solid #DDDEE9;
+    }
+
+    &__close {
+      position: absolute;
+      top: 13px;
+      right: 6px;
+      margin: 10px;
+      background: none;
+      padding: 0;
+      &::-moz-focus-inner {
+        border: none;
+      }
+    }
+  }
+
+  &-bg {
+    width: 100%;
+    height: 100%;
+    background: black;
+    opacity: 20%;
+  }
+
+  &-content {
+    padding: 0 5px 0 16px;
+    margin-top: 5px;
+    margin-bottom: -10px;
+    margin-right: 5px;
+    height: calc(100% - 66px - 10px);
+    overflow-y: scroll;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    align-content: stretch;
+  }
+
+  &-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1050;
+  }
+}

ui/app/components/ui/popover/popover.component.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import PopoverHeader from './popover.header.component'
+
+const Popover = ({ title, children, onClose }) => (
+  <div className="popover-container">
+    <div className="popover-bg" onClick={onClose} />
+    <div className="popover-wrap">
+      <PopoverHeader title={title} onClose={onClose} />
+      <div className="popover-content">
+        {children}
+      </div>
+    </div>
+  </div>
+)
+
+Popover.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+}
+
+export default Popover

ui/app/components/ui/popover/popover.header.component.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Close from '../icon/close-icon.component'
+
+const PopoverHeader = ({ title, onClose }) => (
+  <header className="popover-header">
+    <h2 className="popover-header__heading">{title}</h2>
+    <button className="popover-header__close" onClick={onClose}>
+      <Close
+        size={18}
+        color="#4A4A4A"
+      />
+    </button>
+  </header>
+)
+
+PopoverHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+}
+
+export default PopoverHeader

ui/app/components/ui/popover/popover.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Popover from './popover.component'
+import { text } from '@storybook/addon-knobs/react'
+import { action } from '@storybook/addon-actions'
+
+const containerStyle = {
+  width: 800,
+  height: 600,
+  background: 'pink',
+  position: 'relative',
+}
+
+export default {
+  title: 'Popover',
+}
+
+export const approve = () => (
+  <div style={containerStyle}>
+    <Popover title={text('title', 'Approve spend limit')} onClose={action('clicked')}>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper eget duis at tellus at urna condimentum. Posuere urna nec tincidunt praesent semper. Arcu dictum varius duis at. A lacus vestibulum sed arcu. Orci porta non pulvinar neque laoreet suspendisse interdum. Pretium fusce id velit ut. Ut consequat semper viverra nam libero justo laoreet sit. In ante metus dictum at tempor commodo ullamcorper a lacus. Posuere morbi leo urna molestie at elementum eu facilisis sed. Libero enim sed faucibus turpis in eu mi bibendum neque. Amet massa vitae tortor condimentum lacinia quis. Pretium viverra suspendisse potenti nullam ac. Pellentesque elit eget gravida cum sociis natoque penatibus. Proin libero nunc consequat interdum varius sit amet. Est ultricies integer quis auctor elit sed vulputate. Ornare arcu odio ut sem nulla pharetra. Eget nullam non nisi est sit. Leo vel fringilla est ullamcorper eget nulla.</p>
+      <p>Mattis pellentesque id nibh tortor id. Commodo sed egestas egestas fringilla phasellus. Semper eget duis at tellus at urna. Tristique nulla aliquet enim tortor at auctor urna nunc. Pellentesque habitant morbi tristique senectus et netus et. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Mi eget mauris pharetra et ultrices neque ornare aenean. Facilisis volutpat est velit egestas dui id ornare arcu odio. Lacus sed turpis tincidunt id aliquet risus feugiat in. Cras tincidunt lobortis feugiat vivamus. Blandit libero volutpat sed cras ornare arcu. Facilisi morbi tempus iaculis urna id volutpat. Risus viverra adipiscing at in tellus. Leo vel orci porta non pulvinar neque. Malesuada fames ac turpis egestas integer. Euismod nisi porta lorem mollis aliquam.</p>
+    </Popover>
+  </div>
+)

ui/app/css/itcss/components/index.scss

@@ -2,6 +2,7 @@
 @import '../../../components/ui/dialog/dialog';
 @import '../../../components/ui/snackbar/index';
 @import '../../../components/ui/list-item/index';
+@import '../../../components/ui/popover/index';
 @import '../../../components/ui/icon/preloader/index';
 
 @import './footer.scss';