dev -> staging

.codeclimate.yml

@@ -26,7 +26,9 @@ plugins:
     enabled: true
 exclude_patterns:
 - node_modules/
-- config/ # build configuration
+- build/ # build artifacts
+- config/ # build configuration	- config/ # build configuration
+- coverage/ # test coverage
 - scripts/ # build & utility scripts
 - src/__mocks__/ # test objects
 - src/Constants/PropTypes.js # shape definitions

package.json

@@ -9,6 +9,7 @@
     "babel-polyfill": "^6.26.0",
     "body-parser": "^1.18.2",
     "bunyan": "^1.8.12",
+    "css-box-shadow": "^1.0.0-3",
     "date-fns": "^1.29.0",
     "draft-js": "^0.10.4",
     "draft-js-plugins-editor": "^2.0.4",
@@ -25,6 +26,7 @@
     "rc-steps": "^3.1.0",
     "react": "^15.6.2",
     "react-autosuggest": "^9.3.2",
+    "react-csv": "^1.1.1",
     "react-dom": "^15.6.2",
     "react-fontawesome": "^1.6.1",
     "react-helmet": "^5.2.0",

src/Components/AccountDropdown/AccountDropdown.jsx

@@ -11,6 +11,7 @@ export class AccountDropdown extends Component {
   constructor(props) {
     super(props);
     this.hideDropdown = this.hideDropdown.bind(this);
+    this.showDropdown = this.showDropdown.bind(this);
     this.logout = this.logout.bind(this);
   }
 
@@ -23,6 +24,11 @@ export class AccountDropdown extends Component {
     this.dropdown.hide();
   }
 
+  showDropdown() {
+    // Explicitly show the dropdown using the built-in hide() function from react-simple-dropdown
+    this.dropdown.show();
+  }
+
   render() {
     const { shouldDisplayName, userProfile } = this.props;
     const displayName = userProfile ? userProfile.display_name : '...';
@@ -38,22 +44,30 @@ export class AccountDropdown extends Component {
 
     return (
       isLoading &&
-      <Dropdown className="account-dropdown" ref={(dropdown) => { this.dropdown = dropdown; }} removeElement>
+      <Dropdown
+        className="account-dropdown"
+        ref={(dropdown) => { this.dropdown = dropdown; }}
+        removeElement
+        onMouseEnter={this.showDropdown}
+        onMouseLeave={this.hideDropdown}
+      >
         <DropdownTrigger href="/#">
           <Avatar className="account-dropdown--avatar" {...avatar} />
           {
             shouldDisplayName &&
               <span className="account-dropdown--name" id="account-username">{displayName}</span>
           }
         </DropdownTrigger>
-        <DropdownContent>
-          <div className="account-dropdown--identity account-dropdown--segment">
-            <div>Signed in as</div>
-            <strong>{displayName}</strong>
-          </div>
-          <Link className="account-dropdown--identity account-dropdown--segment account-dropdown-link" to="/profile/dashboard" onClick={this.hideDropdown}>Profile</Link>
-          <Link className="account-dropdown--identity account-dropdown--segment account-dropdown-link" to="/logout" onClick={this.logout}>Logout</Link>
-        </DropdownContent>
+        <div className="dropdown-content-outer-container">
+          <DropdownContent onMouseEnter={this.showDropdown}>
+            <div className="account-dropdown--identity account-dropdown--segment">
+              <div>Signed in as</div>
+              <strong>{displayName}</strong>
+            </div>
+            <Link className="account-dropdown--identity account-dropdown--segment account-dropdown-link" to="/profile/dashboard" onClick={this.hideDropdown}>Dashboard</Link>
+            <Link className="account-dropdown--identity account-dropdown--segment account-dropdown-link" to="/logout" onClick={this.logout}>Logout</Link>
+          </DropdownContent>
+        </div>
       </Dropdown>
     );
   }

src/Components/AccountDropdown/AccountDropdown.test.jsx

@@ -54,14 +54,28 @@ describe('AccountDropdown', () => {
     // define the instance
     const instance = accountDropdown.instance();
     instance.dropdown = { hide: () => {} };
-    // spy the logout function
+    // spy the hideDropdown function
     const spy = sinon.spy(instance, 'hideDropdown');
-    // click to logout
+    // call function
     instance.hideDropdown();
     // logout function should have been called once
     sinon.assert.calledOnce(spy);
   });
 
+  it('can call the showDropdown function', () => {
+    const accountDropdown = shallow(<AccountDropdown />);
+
+    // define the instance
+    const instance = accountDropdown.instance();
+    instance.dropdown = { show: () => {} };
+    // spy the showDropdown function
+    const spy = sinon.spy(instance, 'showDropdown');
+    // click to logout
+    instance.showDropdown();
+    // logout function should have been called once
+    sinon.assert.calledOnce(spy);
+  });
+
   it('does not display the name when shouldDisplayName is false', () => {
     const accountDropdown = shallow(<AccountDropdown shouldDisplayName={false} />);
     expect(accountDropdown.find('#account-username').exists()).toBe(false);

src/Components/AccountDropdown/__snapshots__/AccountDropdown.test.jsx.snap

@@ -3,6 +3,8 @@
 exports[`AccountDropdown matches snapshot 1`] = `
 <Dropdown
   className="account-dropdown"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   removeElement={true}
 >
   <DropdownTrigger
@@ -19,42 +21,49 @@ exports[`AccountDropdown matches snapshot 1`] = `
       small={false}
     />
   </DropdownTrigger>
-  <DropdownContent
-    className=""
+  <div
+    className="dropdown-content-outer-container"
   >
-    <div
-      className="account-dropdown--identity account-dropdown--segment"
+    <DropdownContent
+      className=""
+      onMouseEnter={[Function]}
     >
-      <div>
-        Signed in as
+      <div
+        className="account-dropdown--identity account-dropdown--segment"
+      >
+        <div>
+          Signed in as
+        </div>
+        <strong>
+          John Doe
+        </strong>
       </div>
-      <strong>
-        John Doe
-      </strong>
-    </div>
-    <Link
-      className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
-      onClick={[Function]}
-      replace={false}
-      to="/profile/dashboard"
-    >
-      Profile
-    </Link>
-    <Link
-      className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
-      onClick={[Function]}
-      replace={false}
-      to="/logout"
-    >
-      Logout
-    </Link>
-  </DropdownContent>
+      <Link
+        className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
+        onClick={[Function]}
+        replace={false}
+        to="/profile/dashboard"
+      >
+        Dashboard
+      </Link>
+      <Link
+        className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
+        onClick={[Function]}
+        replace={false}
+        to="/logout"
+      >
+        Logout
+      </Link>
+    </DropdownContent>
+  </div>
 </Dropdown>
 `;
 
 exports[`AccountDropdown matches snapshot when shouldDisplayName is true 1`] = `
 <Dropdown
   className="account-dropdown"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   removeElement={true}
 >
   <DropdownTrigger
@@ -77,35 +86,40 @@ exports[`AccountDropdown matches snapshot when shouldDisplayName is true 1`] = `
       John Doe
     </span>
   </DropdownTrigger>
-  <DropdownContent
-    className=""
+  <div
+    className="dropdown-content-outer-container"
   >
-    <div
-      className="account-dropdown--identity account-dropdown--segment"
+    <DropdownContent
+      className=""
+      onMouseEnter={[Function]}
     >
-      <div>
-        Signed in as
+      <div
+        className="account-dropdown--identity account-dropdown--segment"
+      >
+        <div>
+          Signed in as
+        </div>
+        <strong>
+          John Doe
+        </strong>
       </div>
-      <strong>
-        John Doe
-      </strong>
-    </div>
-    <Link
-      className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
-      onClick={[Function]}
-      replace={false}
-      to="/profile/dashboard"
-    >
-      Profile
-    </Link>
-    <Link
-      className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
-      onClick={[Function]}
-      replace={false}
-      to="/logout"
-    >
-      Logout
-    </Link>
-  </DropdownContent>
+      <Link
+        className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
+        onClick={[Function]}
+        replace={false}
+        to="/profile/dashboard"
+      >
+        Dashboard
+      </Link>
+      <Link
+        className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
+        onClick={[Function]}
+        replace={false}
+        to="/logout"
+      >
+        Logout
+      </Link>
+    </DropdownContent>
+  </div>
 </Dropdown>
 `;

src/Components/BidTracker/BidTrackerCard/BidTrackerCard.jsx

@@ -5,6 +5,7 @@ import BidSteps from '../BidStep';
 import BidTrackerCardBottom from '../BidTrackerCardBottom';
 import BidTrackerCardTop from '../BidTrackerCardTop';
 import OverlayAlert from '../OverlayAlert';
+import BoxShadow from '../../BoxShadow';
 import { shouldShowAlert } from '../BidHelpers';
 import {
   APPROVED_PROP,
@@ -14,7 +15,8 @@ import {
   DRAFT_PROP,
 } from '../../../Constants/BidData';
 
-const BidTrackerCard = ({ bid, acceptBid, declineBid, submitBid, deleteBid, userProfile }) => {
+const BidTrackerCard = ({ bid, acceptBid, declineBid, submitBid, deleteBid, showBidCount,
+userProfile }) => {
   // determine whether we render an alert on top of the card
   const showAlert = shouldShowAlert(bid);
   // determine whether we should show the contacts section based on the status
@@ -23,11 +25,12 @@ const BidTrackerCard = ({ bid, acceptBid, declineBid, submitBid, deleteBid, user
   // add class to container for draft since we need to apply an overflow:hidden for drafts only
   const draftClass = bid.status === DRAFT_PROP ? 'bid-tracker-bid-steps-container--draft' : '';
   return (
-    <div className="bid-tracker">
+    <BoxShadow className="bid-tracker">
       <div>
         <BidTrackerCardTop
           bid={bid}
           deleteBid={deleteBid}
+          showBidCount={showBidCount}
         />
         <div className={`usa-grid-full padded-container-inner bid-tracker-bid-steps-container ${draftClass}`}>
           <BidSteps bid={bid} />
@@ -55,7 +58,7 @@ const BidTrackerCard = ({ bid, acceptBid, declineBid, submitBid, deleteBid, user
             </div>
           </div>
       }
-    </div>
+    </BoxShadow>
   );
 };
 
@@ -66,6 +69,12 @@ BidTrackerCard.propTypes = {
   submitBid: PropTypes.func.isRequired,
   deleteBid: PropTypes.func.isRequired,
   userProfile: USER_PROFILE.isRequired,
+  showBidCount: PropTypes.bool,
 };
 
+BidTrackerCard.defaultProps = {
+  showBidCount: true,
+};
+
+
 export default BidTrackerCard;

src/Components/BidTracker/BidTrackerCard/__snapshots__/BidTrackerCard.test.jsx.snap

@@ -1,8 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BidTrackerCardComponent matches snapshot 1`] = `
-<div
+<BoxShadow
+  blurRadius={10}
   className="bid-tracker"
+  color="rgba(0,0,0,.15)"
+  inset={false}
+  is="div"
+  offsetX={3}
+  offsetY={2}
+  spreadRadius={1}
+  style={Object {}}
 >
   <div>
     <BidTrackerCardTop
@@ -56,6 +64,8 @@ exports[`BidTrackerCardComponent matches snapshot 1`] = `
         }
       }
       deleteBid={[Function]}
+      hideDelete={false}
+      showBidCount={true}
       showQuestion={true}
     />
     <div
@@ -169,5 +179,5 @@ exports[`BidTrackerCardComponent matches snapshot 1`] = `
       />
     </div>
   </div>
-</div>
+</BoxShadow>
 `;

src/Components/BidTracker/BidTrackerCardBottom/BidTrackerCardBottom.jsx

@@ -52,9 +52,13 @@ const BidTrackerCardBottom = (props) => {
 };
 
 BidTrackerCardBottom.propTypes = {
-  reviewer: BID_REVIEWER_OBJECT.isRequired,
+  reviewer: BID_REVIEWER_OBJECT,
   bureau: PropTypes.string.isRequired,
   userProfile: USER_PROFILE.isRequired,
 };
 
+BidTrackerCardBottom.defaultProps = {
+  reviewer: null,
+};
+
 export default BidTrackerCardBottom;