implimenting header and porfile tooltip toggle

frontend/src/components/article/index.js

@@ -1,14 +1,14 @@
 const Styled = require('styled-components');
-const fns = require('@ui/shared/functions');
+// const fns = require('@ui/shared/functions');
 
 const {
   default: styled
 } = Styled;
 
-const {
-  remcalc
-} = fns;
+// const {
+//   remcalc
+// } = fns;
 
+// Main Contonent Wrapper Styles
 module.exports = styled.article`
-  margin-top: ${remcalc(78)};
 `;

frontend/src/components/header/index.js

@@ -1,12 +1,19 @@
 const React = require('react');
+const ReactRedux = require('react-redux');
 const ReactRouter = require('react-router');
 const Styled = require('styled-components');
 
+const selectors = require('@state/selectors');
+const actions = require('@state/actions');
+
 const Column = require('@ui/components/column');
 const Container = require('@ui/components/container');
+const Avatar = require('@ui/components/avatar');
 const fns = require('@ui/shared/functions');
 const logo = require('@resources/logo.png');
 const Row = require('@ui/components/row');
+const Tooltip = require('@ui/components/tooltip');
+const composers = require('@ui/shared/composers');
 
 const {
   Link
@@ -20,34 +27,138 @@ const {
   remcalc
 } = fns;
 
-const StyledHeader = styled.header`
-  height: ${remcalc(78)};
-  background-color: #ffffff;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  left: 0
-`;
+const {
+  connect
+} = ReactRedux;
 
-const StyledLogo = styled.img`
+const {
+  accountSelector,
+  accountUISelector
+} = selectors;
+
+const {
+  pseudoEl
+} = composers;
+
+const {
+  handleToggleAction
+} = actions;
+
+const StyledHeader = styled.header`
+  background-color: #ffffff;
   padding-top: ${remcalc(21)};
   padding-bottom: ${remcalc(21)};
 `;
 
-const Header = () => {
+const StyledLogo = styled.img`
+  padding-top: ${remcalc(10)}
+`;
+
+const StyledProfileWrapper = styled.div`
+  position: relative;
+`;
+
+const StyledAvatarWrapper = styled.div`
+  &:after {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid black;
+
+    ${pseudoEl({
+      top: '50%',
+      right: '10px'
+    })}
+  }
+`;
+
+const StyledTooltipWrapper = styled.div`
+  position: absolute;
+  left: -40px;
+  bottom: -180px;
+`;
+
+const arrowPosition = {
+  bottom: '100%',
+  right: '10%'
+};
+
+const Header = ({
+  account = {},
+  accountUI = {},
+  dispatch
+}) => {
+  const handleToggle = (ev) => {
+    ev.preventDefault();
+    dispatch(handleToggleAction(accountUI.profile_tooltip));
+  };
+
   return (
     <StyledHeader>
       <Container fluid>
         <Row>
           <Column xs={2}>
             <Link to='/'>
-              <StyledLogo src={logo} />
+              <StyledLogo
+                alt="Joyent"
+                src={logo}
+              />
             </Link>
           </Column>
+          <Column
+            smOffset={8.5}
+            xs={1.5}
+          >
+            <StyledProfileWrapper>
+
+              <StyledAvatarWrapper>
+                <Link
+                  onClick={handleToggle}
+                  to='/'
+                >
+                  <span>{account.name}</span>
+                  <Avatar
+                    alt={account.name}
+                    name={account.name}
+                    src={account.avatar}
+                  />
+                </Link>
+              </StyledAvatarWrapper>
+
+              { accountUI.profile_tooltip ? (
+                <StyledTooltipWrapper>
+                  <Tooltip arrowPosition={arrowPosition}>
+                    <li><Link to={'/'}>My Account</Link></li>
+                    <li><Link to={'/'}>Settings</Link></li>
+                    <li><Link to={'/'}>About</Link></li>
+                  </Tooltip>
+                </StyledTooltipWrapper>
+              ) : null }
+
+            </StyledProfileWrapper>
+          </Column>
         </Row>
       </Container>
     </StyledHeader>
   );
 };
 
-module.exports = Header;
+Header.propTypes = {
+  account: React.PropTypes.shape({
+    uuid: React.PropTypes.string,
+    id: React.PropTypes.string,
+    name: React.PropTypes.string,
+  }),
+  accountUI: React.PropTypes.shape({
+    profile_tooltip: React.PropTypes.boolean
+  }),
+  dispatch: React.PropTypes.func
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  account: accountSelector(state),
+  accountUI: accountUISelector(state)
+});
+
+module.exports = connect(
+  mapStateToProps
+)(Header);

frontend/src/mock-state.json

@@ -4,7 +4,11 @@
       "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
       "id": "nicola",
       "name": "Nicola",
-      "email": "nicola@biztech.com"
+      "email": "nicola@biztech.com",
+      "avatar": "./resources/avatar.png"
+    },
+    "ui": {
+      "profile_tooltip": false
     }
   },
   "datacenters": {

frontend/src/state/actions.js

@@ -9,5 +9,6 @@ const APP = constantCase(process.env['APP_NAME']);
 
 module.exports = {
   ...require('@state/thunks'),
-  updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`)
+  updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
+  handleToggleAction: createAction(`${APP}/APP/HANDLE_TOGGLE`, bool => bool)
 };

frontend/src/state/reducers/account.js

@@ -1,9 +1,23 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  handleToggleAction
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [handleToggleAction.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        'profile_tooltip': !action.payload
+      }
+    };
+  }
 }, {});

frontend/src/state/selectors.js

@@ -8,6 +8,7 @@ const {
 } = reselect;
 
 const account = (state) => get(state, 'account.data', {});
+const accountUi = (state) => get(state, 'account.ui', {});
 const orgUiSections = (state) => get(state, 'orgs.ui.sections', []);
 const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
 const orgs = (state) => get(state, 'orgs.data', []);
@@ -37,6 +38,7 @@ const orgSections = (orgId) => createSelector(
 
 module.exports = {
   accountSelector: account,
+  accountUISelector: accountUi,
   orgByIdSelector: orgById,
   orgsSelector: orgs,
   orgSectionsSelector: orgSections,