feat(userProfile): refactor profile component to be stateful

 - add profileIconClick
 - add classname prop
 - add tests

src/app/common/components/ProfileComponent.js

@@ -1,37 +1,61 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-const ProfileComponent = ({ name, userImage }) => (
-  <div className='profile'>
-    <p className='profile__name'>{name}</p>
-    <span
-      className='profile__image'
-      style={{
-        backgroundImage: `url(${userImage})`,
-      }}
-    />
-    <i className='fa fa-ellipsis-v fa-lg data-toggle' data-toggle='dropdown' aria-haspopup='true' aria-hidden='true' />
-    <div className='dropdown-menu'>
-      <p>{name}</p>
-      <div className='dropdown-divider' />
-      <div>
-        <span className='fa fa-cog' />
-        <p>Profile</p>
-        <span className='fa fa-sign-out' />
-        <p>Logout</p>
+class ProfileComponent extends Component {
+  state = {
+    showProfile: false,
+  };
+
+  /**
+   * @name profileIconClick
+   * toggles state to show profile dropdown
+   */
+  profileIconClick = () => {
+    this.setState(prevState => ({ showProfile: !prevState.showProfile }));
+  };
+
+  render() {
+    const { name, userImage, className } = this.props;
+    const { showProfile } = this.state;
+    return (
+      <div className={`profile ${className}`}>
+        <div className='profile__content' aria-hidden='true' onClick={this.profileIconClick}>
+          <p className='profile__name'>{name}</p>
+          <span
+            className='profile__image'
+            style={{
+              backgroundImage: `url(${userImage})`,
+            }}
+          />
+          <i className='fa fa-ellipsis-v fa-lg' />
+        </div>
+        <div className={showProfile ? 'dropdown-menu show' : 'dropdown-menu'}>
+          <p className='profile-dropdown__option--name'>{name}</p>
+          <div className='dropdown-divider' />
+          <div>
+            <span className='fa fa-cog profile-dropdown__icon' />
+            <p className='profile-dropdown__option'>Profile</p>
+          </div>
+          <div>
+            <span className='fa fa-sign-out profile-dropdown__icon' />
+            <p className='profile-dropdown__option'>Logout</p>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 ProfileComponent.defaultProps = {
   name: '',
   userImage: '',
+  className: '',
 };
 
 ProfileComponent.propTypes = {
   name: PropTypes.string,
   userImage: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default ProfileComponent;

src/app/common/components/tests/ProfileComponent.test.js

@@ -12,4 +12,10 @@ describe('<ProfileComponent />', () => {
   it('should display name passed as prop', () => {
     expect(shallowWrapper.find('.profile__name').text()).toEqual('User test');
   });
+
+  it('toggles showProfile state when profile image section is clicked', () => {
+    shallowWrapper.setState({ showProfile: true });
+    shallowWrapper.find('.profile__content').simulate('click')
+    expect(shallowWrapper.state().showProfile).toBeFalsy();
+  });
 });

src/app/common/styles/profile.scss

@@ -1,12 +1,15 @@
 .profile {
-  display: flex;
-  align-items: center; 
-  cursor: pointer;
   margin-left: auto;
   padding-right: 0.9375rem; 
   border-left: rem(1px) solid $separatorBlue;
   @include text-styles(rem(11.32px), $lightAccent, normal, normal, rem(15px));
 
+  .profile__content {
+    display: flex;
+    align-items: center; 
+    cursor: pointer;
+  }
+
   .profile__name {
     margin: 0 rem(10.96px) 0 rem(25.55px);
   }
@@ -19,4 +22,45 @@
     margin-right: rem(8.69px);
   }
 
+  .dropdown-menu {
+    @include widthAndHeight(rem(214px), rem(178px));
+
+    &.show {
+      display: flex !important;
+      flex-direction: column;
+      left: unset !important;
+      right: rem(13px) !important;
+      margin-top: rem(5.89px);
+      padding: rem(25px) rem(33.5px) rem(14px) rem(20px);
+    }
+
+    .dropdown-divider {
+      height: rem(2px) !important;
+      margin-top: 0;
+      margin-bottom: rem(18.5px);    
+    }
+  }
+
+  .profile-dropdown__option--name {
+    margin-bottom: rem(11.5px);
+    @include text-styles(rem(16px), $purple, normal, normal, rem(21px));
+  }
+
+  .profile-dropdown__option {
+    display: inline-block;
+    margin-left: rem(7.83px);
+    margin-bottom: 0;
+    @include text-styles(rem(14px), $tableBodyTextColor, normal, normal, rem(43px));
+
+    &:hover {
+      color: $andelaGold;
+      cursor: pointer;
+    }
+  }
+
+  .profile-dropdown__icon {
+    font-size: 16px !important;
+    color: $footerTextGray;
+  }
+
 }

src/styles/_vars.scss

@@ -14,3 +14,4 @@ $grayShadow: rgba(48,48,48,0.13);
 $tableBodyTextColor: #51516B;
 $rejectedStatusRed: #D0021B;
 $inReviewStatusYellow: #F8E71C;
+$purple: #8954BA;