implimenting roles toggle tooltip

frontend/src/components/people-list/table/index.js

@@ -9,6 +9,7 @@ const PersonRole = require('./person-role');
 const PeopleTable = (props) => {
 
   const {
+    handleRoleTooltip,
     handleStatusTooltip,
     people = [],
     orgUI = {}
@@ -37,6 +38,15 @@ const PeopleTable = (props) => {
         handleStatusTooltip={handleStatusTooltip}
         membersStatusOptions={orgUI.members_status}
         person={person}
+        toggledID={orgUI.member_status_tooltip}
+      />
+    );
+
+    const role = (person) => (
+      <PersonRole
+        handleRoleTooltip={handleRoleTooltip}
+        membersRolesOptions={orgUI.members_roles}
+        person={person}
         toggledID={orgUI.member_role_tooltip}
       />
     );
@@ -45,7 +55,7 @@ const PeopleTable = (props) => {
       checkbox: <Checkbox />,
       name: person.name,
       status: status(person),
-      role: <PersonRole role={person.role} />,
+      role: role(person),
       bin: ''
     };
   });
@@ -59,6 +69,7 @@ const PeopleTable = (props) => {
 };
 
 PeopleTable.propTypes = {
+  handleRoleTooltip: React.PropTypes.func,
   handleStatusTooltip: React.PropTypes.func,
   orgUI: React.PropTypes.object,
   people: React.PropTypes.array,

frontend/src/components/people-list/table/person-role.js

@@ -1,18 +1,86 @@
 const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+const composers = require('@ui/shared/composers');
+
+const Tooltip = require('./tooltip');
+
+const {
+  pseudoEl
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const borderSide = props => props.toggled
+  ? 'bottom'
+  : 'top';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  
+  &:after {
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-${borderSide}: ${remcalc(5)} solid black;
+    
+    ${pseudoEl({
+      top: '50%',
+      right: remcalc(10)
+    })}
+  }
+`;
+
+const PlainButton = styled.button`
+  background: transparent;
+  font-size: inherit;
+  border: none;
+  zIndex: 0;
+  font-family: inherit;
+  color: inherit;
+`;
+
+
 
 const PersonRole = (props) => {
 
   const {
-    role
+    toggledID,
+    membersRolesOptions,
+    person,
+    handleRoleTooltip
   } = props;
 
+  const toggled = toggledID;
+  const handleClick = () => handleRoleTooltip(person.uuid);
+
   return (
-    <span>{role}</span>
+    <StyledWrapper toggled={toggled}>
+      <PlainButton onClick={handleClick} >
+        {person.role}
+      </PlainButton>
+
+      { toggledID === person.uuid
+        ? <Tooltip options={membersRolesOptions} person={person} />
+        : null }
+    </StyledWrapper>
   );
 };
 
 PersonRole.propTypes = {
-  role: React.PropTypes.string
+  handleRoleTooltip: React.PropTypes.func,
+  membersRolesOptions: React.PropTypes.array,
+  person: React.PropTypes.object,
+  toggledID: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool,
+  ])
 };
 
 module.exports = PersonRole;

frontend/src/components/people-list/table/person-status.js

@@ -46,15 +46,13 @@ const PlainButton = styled.button`
   color: inherit;
 `;
 
-
-
 const PersonStatus = (props) => {
 
   const {
+    handleStatusTooltip,
     toggledID,
     membersStatusOptions,
     person,
-    handleStatusTooltip
   } = props;
 
   const toggled = toggledID;

frontend/src/containers/org/people.js

@@ -17,7 +17,8 @@ const {
 
 const {
   handleInviteToggle,
-  handlePeopleStatusTooltip
+  handlePeopleRoleTooltip,
+  handlePeopleStatusTooltip,
 } = actions;
 
 const People = (props) => {
@@ -39,7 +40,8 @@ const mapStateToProps = (state, {
 
 const mapDispatchToProps = (dispatch) => ({
   handleToggle: () => dispatch(handleInviteToggle()),
-  handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id))
+  handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)),
+  handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
 });
 
 module.exports = connect(

frontend/src/mock-state.json

@@ -199,6 +199,7 @@
   "orgs": {
     "ui": {
       "invite_toggled": true,
+      "member_status_tooltip": false,
       "member_role_tooltip": false,
       "sections": [
         "projects",

frontend/src/state/actions.js

@@ -19,4 +19,6 @@ module.exports = {
   handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
   handlePeopleStatusTooltip:
       createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
+  handlePeopleRoleTooltip:
+    createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
 };

frontend/src/state/reducers/orgs.js

@@ -8,6 +8,7 @@ const {
 
 const {
   handleInviteToggle,
+  handlePeopleRoleTooltip,
   handlePeopleStatusTooltip
 } = actions;
 
@@ -22,12 +23,26 @@ module.exports = handleActions({
     };
   },
   [handlePeopleStatusTooltip.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_status_tooltip:
+          action.payload === state.ui.member_status_tooltip
+          ? ''
+          : action.payload
+      }
+    };
+  },
+  [handlePeopleRoleTooltip.toString()]: (state, action) => {
     return {
       ...state,
       ui: {
         ...state.ui,
         member_role_tooltip:
-          action.payload === state.ui.member_role_tooltip ? '' : action.payload
+          action.payload === state.ui.member_role_tooltip
+          ? ''
+          : action.payload
       }
     };
   }