Added trigger and popup UI components - v1

no issue

- Adds new components for membersJs trigger button and popup menu with style
- Adds basic trigger interaction between trigger button and popup menu
- Uses hardcoded member values
- Adds `prop-types` dependency

ghost/portal/package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

ghost/portal/src/App.js

@@ -1,24 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import ParentContainer from './components/ParentContainer';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <ParentContainer name="MembersJS" />
     </div>
   );
 }

ghost/portal/src/components/ParentContainer.js

@@ -0,0 +1,47 @@
+import TriggerComponent from './TriggerComponent';
+import PopupMenuComponent from './PopupMenuComponent';
+const React = require("react");
+const PropTypes = require("prop-types");
+
+export default class ParentContainer extends React.Component {
+    static propTypes = {
+        name: PropTypes.string,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            showPopup: false
+        };
+    }
+
+    onTriggerToggle() {
+        this.setState({
+            showPopup: !this.state.showPopup
+        });
+    }
+
+    renderPopupMenu() {
+        if (this.state.showPopup) {
+            return (
+                <PopupMenuComponent name={this.props.name} />
+            );
+        }
+        return null;
+    }
+
+    renderTriggerComponent() {
+        return (
+            <TriggerComponent name={this.props.name} onToggle= {(e) => this.onTriggerToggle()} isPopupOpen={this.state.showPopup} />
+        )
+    }
+
+    render() {
+        return (
+            <div>
+                {this.renderPopupMenu()}
+                {this.renderTriggerComponent()}
+            </div>
+        );
+    }
+}

ghost/portal/src/components/PopupMenuComponent.js

@@ -0,0 +1,66 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+
+
+export default class PopupMenuComponent extends React.Component {
+    static propTypes = {
+        name: PropTypes.string,
+    };
+
+    render() {
+        const hoverStyle = {
+            zIndex: '2147483000',
+            position: 'fixed',
+            bottom: '100px',
+            right: '20px',
+            width: '250px',
+            minHeight: '50px',
+            maxHeight: '100px',
+            boxShadow: 'rgba(0, 0, 0, 0.16) 0px 5px 40px',
+            opacity: '1',
+            height: 'calc(100% - 120px)',
+            borderRadius: '8px',
+            overflow: 'hidden',
+        };
+
+        const launcherStyle = {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+        };
+
+        const buttonStyle = {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            position: 'absolute',
+            top: '0px',
+            bottom: '0px',
+            left: '0px',
+            right: '0px',
+            overflow: 'hidden',
+            paddingTop: '15px',
+            paddingBottom: '15px',
+            textAlign: 'left'
+        };
+        return (
+            <div style={hoverStyle}>
+                <div style={launcherStyle}>
+                    <div style={buttonStyle}>
+                        <div style={{display: 'flex', flexDirection: 'column'}}>
+                            <div style={{paddingLeft: '12px',paddingRight: '12px', color: 'grey', fontSize: '12px'}}>
+                                SIGNED IN AS
+                            </div>
+                            <div style={{paddingLeft: '12px',paddingRight: '12px', paddingBottom: '9px'}}>
+                                rish@ghost.org
+                            </div>
+                            <div style={{paddingLeft: '12px',paddingRight: '12px', paddingTop: '12px', borderTop: '1px solid black', cursor: 'pointer'}}>
+                                <div> Logout </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

ghost/portal/src/components/TriggerComponent.js

@@ -0,0 +1,80 @@
+import logo from '../logo.svg';
+import closeIcon from '../images/close.png';
+const React = require("react");
+const PropTypes = require("prop-types");
+
+
+export default class TriggerComponent extends React.Component {
+    static propTypes = {
+        name: PropTypes.string,
+    };
+
+    onToggle() {
+        this.props.onToggle();
+    }
+
+    renderTriggerIcon() {
+        if (this.props.isPopupOpen) {
+            return (
+                <img src={closeIcon} alt="logo" style={{ width: '45px', userSelect: 'none' }} />
+            )
+        }
+        return (
+            <img src={logo} className="App-logo" alt="logo" style={{ width: '60px', userSelect: 'none' }} />
+        )
+    }
+
+    render() {
+        const hoverStyle = {
+            zIndex: '2147483000',
+            position: 'fixed',
+            bottom: '20px',
+            right: '20px',
+            width: '60px',
+            height: '60px',
+            boxShadow: 'rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px',
+            borderRadius: '50%',
+            backgroundColor: '#e53935',
+            animation: '250ms ease 0s 1 normal none running animation-bhegco',
+            transition: 'opacity 0.3s ease 0s',
+        };
+
+        const launcherStyle = {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            width: '60px',
+            height: '60px',
+            cursor: 'pointer',
+            transformOrigin: 'center center',
+            backfaceVisibility: 'hidden',
+            WebkitFontSmoothing: 'antialiased',
+            borderRadius: '50%',
+            overflow: 'hidden',
+        };
+
+        const buttonStyle = {
+            display: 'flex',
+            WebkitBoxAlign: 'center',
+            alignItems: 'center',
+            WebkitBoxPack: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: '0px',
+            bottom: '0px',
+            width: '100%',
+            opacity: '1',
+            transform: 'rotate(0deg) scale(1)',
+            transition: 'transform 0.16s linear 0s, opacity 0.08s linear 0s',
+        };
+        return (
+            <div style={hoverStyle} onClick={(e) => this.onToggle(e)}>
+                <div style={launcherStyle}>
+                    <div style={buttonStyle}>
+                        {this.renderTriggerIcon()}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}