Added QA to challenge listing filter

Author: luizrrodrigues

__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeFilters.jsx.snap

@@ -85,9 +85,11 @@ exports[`Matches shallow shapshot shapshot 1`] = `
     devEnabled={true}
     onClose={[Function]}
     opened={true}
+    qaEnabled={true}
     switchDataScience={[Function]}
     switchDesign={[Function]}
     switchDev={[Function]}
+    switchQA={[Function]}
   />
 </div>
 `;
@@ -159,6 +161,23 @@ exports[`Matches shallow shapshot shapshot 2`] = `
           themePriority="adhoc-context-default"
         />
       </span>
+      <span
+        aria-checked={false}
+        aria-label="QA toggle button pressed Off"
+        className="src-shared-components-challenge-listing-Filters-___ChallengeFilters__filter-switch-with-label___21Ups"
+        role="switch"
+      >
+        <ThemedSwitchWithLabel
+          composeAdhocTheme="deeply"
+          composeContextTheme="softly"
+          enabled={false}
+          labelAfter=""
+          labelBefore="QA"
+          mapThemrProps={[Function]}
+          onSwitch={[Function]}
+          themePriority="adhoc-context-default"
+        />
+      </span>
     </span>
     <span
       className="src-shared-components-challenge-listing-Filters-___ChallengeFilters__pulled-right___bfsMZ"
@@ -254,9 +273,11 @@ exports[`Matches shallow shapshot shapshot 2`] = `
     devEnabled={false}
     onClose={[Function]}
     opened={true}
+    qaEnabled={false}
     switchDataScience={[Function]}
     switchDesign={[Function]}
     switchDev={[Function]}
+    switchQA={[Function]}
   />
 </div>
 `;

src/shared/components/TrackIcon/style.scss

@@ -34,11 +34,14 @@ $track-radius-4: $corner-radius * 2;
       background: $tc-light-blue-110;
     }
 
-    &.develop,
-    &.qa {
+    &.develop {
       background: $tc-green-110;
     }
 
+    &.qa {
+      background: $tc-purple-110;
+    }
+
     &.data_science,
     &.data-science,
     &.data {

src/shared/components/challenge-listing/ChallengeCard/index.jsx

@@ -48,6 +48,10 @@ function ChallengeCard({
   challenge.isDataScience = false;
   if ((challenge.tags && challenge.tags.includes('Data Science')) || isDevelopMM(challenge)) {
     challenge.isDataScience = true;
+    track = 'DATA_SCIENCE';
+  }
+  if (challenge.tags && challenge.tags.includes('QA')) {
+    track = 'QA';
   }
   challenge.prize = challenge.prizes || [];
 

src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx

@@ -100,6 +100,13 @@ export default function ChallengeFilters({
                     onSwitch={on => switchTrack(TRACKS.DATA_SCIENCE, on)}
                   />
                 </span>
+                <span styleName="filter-switch-with-label" aria-label={`QA toggle button pressed ${isTrackOn(TRACKS.QA) ? 'On' : 'Off'}`} role="switch" aria-checked={isTrackOn(TRACKS.QA)}>
+                  <SwitchWithLabel
+                    enabled={isTrackOn(TRACKS.QA)}
+                    labelBefore="QA"
+                    onSwitch={on => switchTrack(TRACKS.QA, on)}
+                  />
+                </span>
               </span>
             ) : ''
         }
@@ -178,6 +185,8 @@ export default function ChallengeFilters({
         switchDev={on => switchTrack(TRACKS.DEVELOP, on)}
         dataScienceEnabled={isTrackOn(TRACKS.DATA_SCIENCE)}
         switchDataScience={on => switchTrack(TRACKS.DATA_SCIENCE, on)}
+        qaEnabled={isTrackOn(TRACKS.QA)}
+        switchQA={on => switchTrack(TRACKS.QA, on)}
       />
     </div>
   );

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss

@@ -10,7 +10,7 @@ $challenge-radius-4: $corner-radius * 2;
 
 /* -100px is necessary to compensate for the temporarly added `Alpha preview`
  * banner. Should be modified / removed together with banner. */
-$search-bar-width: '100% - 475px';
+$search-bar-width: '100% - 536px';
 $search-input-width: '100% - 56px';
 
 .ChallengeSearchBar {

src/shared/components/challenge-listing/Filters/EditTrackPanel/index.jsx

@@ -16,6 +16,8 @@
  *       switchDev={enable => this.setTracks(DEVELOP_TRACK, enable)}
  *       dataScienceEnabled={this.state.filter.tracks.has(DATA_SCIENCE_TRACK)}
  *       switchDataScience={enable => this.setTracks(DATA_SCIENCE_TRACK, enable)}
+ *       qaEnabled={this.state.filter.tracks.has(QA_TRACK)}
+ *       switchQA={enable => this.setTracks(QA_TRACK, enable)}
  *    />
  */
 import React from 'react';
@@ -28,11 +30,13 @@ function EditTrackPanel({
   dataScienceEnabled,
   designEnabled,
   devEnabled,
+  qaEnabled,
   onClose,
   opened,
   switchDataScience,
   switchDesign,
   switchDev,
+  switchQA,
 }) {
   return (
     <div styleName={`EditTrackPanel ${opened === true ? 'opened' : 'closed'}`}>
@@ -75,6 +79,15 @@ function EditTrackPanel({
           onSwitch={switchDataScience}
         />
       </div>
+      <div styleName="row">
+        <span>
+          QA
+        </span>
+        <Switch
+          enabled={qaEnabled}
+          onSwitch={switchQA}
+        />
+      </div>
     </div>
   );
 }
@@ -92,6 +105,8 @@ EditTrackPanel.propTypes = {
   switchDev: PT.func.isRequired,
   dataScienceEnabled: PT.bool.isRequired,
   switchDataScience: PT.func.isRequired,
+  qaEnabled: PT.bool.isRequired,
+  switchQA: PT.func.isRequired,
 };
 
 export default EditTrackPanel;

src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx

@@ -92,6 +92,7 @@ const TRACK_COLOR_CLASS = {
   DESIGN: 'blue',
   DEVELOP: 'green',
   DATA_SCIENCE: 'orange',
+  QA: 'purple',
 };
 
 /**

src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss

@@ -25,6 +25,10 @@ $track-radius-4: $corner-radius * 2;
     &.orange {
       border-left: $track-radius-4 solid $tc-orange;
     }
+
+    &.purple {
+      border-left: $track-radius-4 solid $tc-purple;
+    }
   }
 
   .body {