creating table directory and moving tooltip to speerate file so it can re-used by role column

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

@@ -35,6 +35,7 @@ const PeopleTable = (props) => {
     const status = (person) => (
       <PersonStatus
         handleStatusTooltip={handleStatusTooltip}
+        membersStatusOptions={orgUI.members_status}
         person={person}
         toggledID={orgUI.member_role_tooltip}
       />

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

@@ -1,10 +1,11 @@
 const React = require('react');
 const Styled = require('styled-components');
 
-const Tooltip = require('@ui/components/tooltip');
 const fns = require('@ui/shared/functions');
 const composers = require('@ui/shared/composers');
 
+const Tooltip = require('./tooltip');
+
 const {
   pseudoEl
 } = composers;
@@ -36,17 +37,6 @@ const StyledWrapper = styled.div`
   }
 `;
 
-const arrowPosition = {
-  bottom: '100%',
-  right: '10%'
-};
-
-const tooltipStyle = {
-  position: 'absolute',
-  top: 0,
-  zIndex: 1
-};
-
 const PlainButton = styled.button`
   background: transparent;
   font-size: inherit;
@@ -56,22 +46,13 @@ const PlainButton = styled.button`
   color: inherit;
 `;
 
-const tooltip = (person) => (
+
-  <Tooltip
-    arrowPosition={arrowPosition}
-    key={person.uuid}
-    style={tooltipStyle}
-  >
-    <li>Admin</li>
-    <li>Read Only</li>
-    <li>Unassigned</li>
-  </Tooltip>
-);
 
 const PersonStatus = (props) => {
 
   const {
     toggledID,
+    membersStatusOptions,
     person,
     handleStatusTooltip
   } = props;
@@ -85,13 +66,16 @@ const PersonStatus = (props) => {
         {person.status}
       </PlainButton>
 
-      {toggledID === person.uuid ? tooltip(person) : null}
+      { toggledID === person.uuid
+        ? <Tooltip options={membersStatusOptions} person={person} />
+        : null }
     </StyledWrapper>
   );
 };
 
 PersonStatus.propTypes = {
   handleStatusTooltip: React.PropTypes.func,
+  membersStatusOptions: React.PropTypes.array,
   person: React.PropTypes.object,
   toggledID: React.PropTypes.oneOfType([
     React.PropTypes.string,

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

@@ -0,0 +1,34 @@
+const React = require('react');
+
+const Tooltip = require('@ui/components/tooltip');
+
+const tooltipStyle = {
+  position: 'absolute',
+  top: '30px',
+  zIndex: 1
+};
+
+const arrowPosition = {
+  bottom: '100%',
+  right: '10%'
+};
+
+module.exports = ({
+  person = {},
+  options = []
+}) => {
+  return (
+    <Tooltip
+      arrowPosition={arrowPosition}
+      key={person.uuid}
+      style={tooltipStyle}
+    >
+      {options.map((o, i) => <li key={i}>{o}</li>)}
+    </Tooltip>
+  );
+};
+
+module.exports.propTypes = {
+  options: React.PropTypes.array,
+  person: React.PropTypes.object,
+};

frontend/src/mock-state.json

@@ -204,6 +204,16 @@
         "projects",
         "people",
         "settings"
+      ],
+      "members_status": [
+        "Active",
+        "Inactive",
+        "Invitation Sent"
+      ],
+      "members_roles": [
+        "Owner",
+        "Unnassigned",
+        "Read Only"
       ]
     },
     "data": [{