Merge branch 'dev' into feature/bidder-portfolio-rows

* dev: Use aria-label to describe the meaning of the icon (#149) New card design for Bidder Portfolio (#140) Use defaultSort prop instead of entire object; refresh state value on componentWillReceiveProps() (#148) # Conflicts: # src/Components/BidderPortfolio/ClientBadge/ClientBadge.jsx # src/Components/BidderPortfolio/ClientBadge/__snapshots__/ClientBadge.test.jsx.snap # src/sass/_bidderPortfolio.scss
MetaPhase-Consulting · Apr 12, 2019 · cfa8d74 · cfa8d74
2 parents 5e136a1 + 1e1da9d
commit cfa8d74
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/src/Components/BidderPortfolio/ClientBadge/ClientBadge.jsx b/src/Components/BidderPortfolio/ClientBadge/ClientBadge.jsx
@@ -26,20 +26,23 @@ const icons = {
 
 const status$ = ['none', 'warning', 'success'];
 
-const ClientBadge = ({ type, status }) => (
-  <div className={`usa-grid-full client-badge-container client-badge-container--${icons[type].isIcon ? 'icon' : 'text'} client-badge-container--${status$[status]}`}>
-    <div className="client-badge">
-      {
-        icons[type].isIcon ?
-          <FA name={icons[type].name} /> :
-          <span>{icons[type].name}</span>
-      }
+const ClientBadge = ({ type, status }) => {
+  const ariaLabel = `type of "${type}" with status of "${status$[status]}"`;
+  return (
+    <div className={`usa-grid-full client-badge-container client-badge-container--${icons[type].isIcon ? 'icon' : 'text'} client-badge-container--${status$[status]}`}>
+      <div className="client-badge">
+        {
+          icons[type].isIcon ?
+            <FA aria-label={ariaLabel} name={icons[type].name} /> :
+            <span aria-label={ariaLabel}>{icons[type].name}</span>
+        }
+      </div>
+      <div className="client-badge-text">
+        <span>{icons[type].text}</span>
+      </div>
     </div>
-    <div className="client-badge-text">
-      <span>{icons[type].text}</span>
-    </div>
-  </div>
-);
+  );
+};
 
 ClientBadge.propTypes = {
   type: PropTypes.oneOf(['handshake', 'sixeight', 'fairshare', 'retirement']).isRequired,

diff --git a/src/Components/BidderPortfolio/ClientBadge/__snapshots__/ClientBadge.test.jsx.snap b/src/Components/BidderPortfolio/ClientBadge/__snapshots__/ClientBadge.test.jsx.snap
@@ -1,13 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClientBadge matches snapshot 1`] = `
+exports['ClientBadge matches snapshot 1'] = `
 <div
   className="usa-grid-full client-badge-container client-badge-container--icon client-badge-container--warning"
 >
   <div
     className="client-badge"
   >
     <FontAwesome
+      aria-label="type of \\"handshake\\" with status of \\"warning\\""
       name="handshake-o"
     />
   </div>

diff --git a/src/Components/SearchResultsExportLink/SearchResultsExportLink.jsx b/src/Components/SearchResultsExportLink/SearchResultsExportLink.jsx
@@ -42,11 +42,18 @@ class SearchResultsExportLink extends Component {
     };
   }
 
+  componentWillReceiveProps() {
+    const query = window.location.search.replace('?', '') || '';
+    if (this.state.query.value !== query) {
+      this.setState({ query: { value: query } });
+    }
+  }
+
   onClick() {
     // reset the state to support multiple clicks
     this.setState({ data: '' });
     const query = {
-      ordering: POSITION_SEARCH_SORTS,
+      ordering: POSITION_SEARCH_SORTS.defaultSort,
       ...queryString.parse(this.state.query.value),
       limit: this.props.count,
     };

diff --git a/src/sass/_bidderPortfolio.scss b/src/sass/_bidderPortfolio.scss
@@ -200,8 +200,8 @@
 
     span {
       align-items: center;
-      background-color: $color-gray-light;
-      color: $bg-gray-dark-1;
+      background-color: $bg-gray-medium-1;
+      color: $bg-gray-dark-0;
       display: flex;
       height: 30px;
       justify-content: center;