Thrive filter update

.circleci/config.yml

@@ -276,7 +276,6 @@ workflows:
             branches:
               only:
                 - develop
-                - fix-challenges-listing
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      

__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Default render 1`] = `
 <div
-  className="src-shared-components-GUIKit-Datepicker-___style__container___Sl58X"
+  className="src-shared-components-GUIKit-Datepicker-___style__container___Sl58X src-shared-components-GUIKit-Datepicker-___style__lgSize___3T8M1"
 >
   <withStyles(SingleDatePicker)
     anchorDirection="left"

src/shared/components/Contentful/Article/themes/default.scss

@@ -430,6 +430,8 @@
 
   .site-header-background {
     width: 100%;
+    height: calc(100vw * (9 / 16));
+    max-height: 565px;
   }
 }
 

src/shared/components/Contentful/SearchPageFilter/FilterAuthor/index.jsx

@@ -58,6 +58,9 @@ export class FilterAuthorInner extends Component {
       isShowPopup,
     } = this.state;
 
+    // sort by author name
+    options.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+
     return (
       <div ref={this.setWrapperRef} className={`${theme.container} ${className}`}>
         <span className={theme.title}>Author</span>

src/shared/components/Contentful/TracksFilter/TracksAuthor/index.jsx

@@ -6,7 +6,7 @@ import PT from 'prop-types';
 import React, { Component } from 'react';
 import { themr } from 'react-css-super-themr';
 
-import IconArrow from 'assets/images/tc-edu/icon-arrow-up-big.svg';
+import iconDown from 'assets/images/dropdown-arrow.png';
 import defaultTheme from './themes/default.scss';
 
 
@@ -58,9 +58,12 @@ export class TracksAuthorInner extends Component {
       isShowPopup,
     } = this.state;
 
+    // sort by author name
+    options.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+
     return (
       <div ref={this.setWrapperRef} className={`${theme.container} ${className}`}>
-        <span className={theme.title}>Author</span>
+        <span className={theme.title}>Authors</span>
         <button
           type="button"
           className={theme.header}
@@ -69,7 +72,7 @@ export class TracksAuthorInner extends Component {
           }}
         >
           <span>{selected}</span>
-          <IconArrow className={theme['icon-arrow']} />
+          <img width="15" height="9" className={theme['icon-arrow']} src={iconDown} alt="dropdown-arraow-icon" />
         </button>
         {isShowPopup && (
           <div className={theme.popup}>

src/shared/components/Contentful/TracksFilter/TracksAuthor/themes/default.scss

@@ -8,14 +8,13 @@ $text-black: #2a2a2a;
   display: flex;
   flex-direction: row;
   color: $text-black;
-  background-color: #f4f4f4;
   border-radius: 6px;
   width: 100%;
   border: 1px solid #aaa;
   position: relative;
   padding: 0 15px;
   max-width: 220px;
-  height: 38px;
+  height: 40px;
   align-items: center;
 }
 
@@ -26,7 +25,7 @@ $text-black: #2a2a2a;
   padding: 0 7px;
   left: 8px;
   top: -7px;
-  background: #f4f4f4;
+  background: #fff;
 }
 
 .header {
@@ -42,18 +41,15 @@ $text-black: #2a2a2a;
     @include min-ellipsis;
 
     font-size: 14px;
+    color: #2a2a2a !important;
   }
 }
 
 .icon-arrow {
-  -moz-transform: scale(-1, -1);
-  -o-transform: scale(-1, -1);
-  -webkit-transform: scale(-1, -1);
-  transform: scale(-1, -1);
-
-  polygon {
-    fill: #aaa;
-  }
+  -moz-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  -webkit-transform: scale(1, -1);
+  transform: scale(1, -1);
 }
 
 .popup {

src/shared/components/Contentful/TracksFilter/TracksDate/index.jsx

@@ -5,14 +5,9 @@ import PT from 'prop-types';
 import moment from 'moment';
 import React from 'react';
 import { themr } from 'react-css-super-themr';
-import DatePicker from 'components/challenge-listing/Filters/DatePicker';
-import CalendarWeek from 'react-dates/lib/components/CalendarWeek';
-import IconCalendar from 'assets/images/tc-edu/icon-calendar.svg';
+import Datepicker from 'components/GUIKit/Datepicker';
 import defaultTheme from './themes/default.scss';
 
-// eslint-disable-next-line no-unused-expressions, react/forbid-foreign-prop-types
-CalendarWeek && CalendarWeek.propTypes && delete CalendarWeek.propTypes.children; // fixing the bug in react-dates, more detail in here https://github.com/airbnb/react-dates/issues/1121
-
 
 export function TracksDateInner(props) {
   const {
@@ -26,23 +21,20 @@ export function TracksDateInner(props) {
 
   return (
     <div className={`${theme.container} ${className}`}>
-      <span className={theme.title}>Date</span>
-      <IconCalendar />
-      <DatePicker
-        displayFormat="MMM D, YYYY"
-        date={startDate}
-        numberOfMonths={1}
-        id="date-picker-start-date"
-        onDateChange={(date) => { onSelectStartDate(date); }}
+      <Datepicker
+        label="Date Start"
+        value={startDate}
+        onChange={(date) => { onSelectStartDate(date); }}
+        size="xs"
+        isOutsideRange={day => moment().isSameOrBefore(day)}
       />
-      <span className={theme.separator}>-</span>
-      <IconCalendar />
-      <DatePicker
-        displayFormat="MMM D, YYYY"
-        date={endDate}
-        numberOfMonths={1}
-        id="date-picker-end-date"
-        onDateChange={(date) => { onSelectEndDate(date); }}
+      <div className={theme.separator} />
+      <Datepicker
+        label="Date End"
+        value={endDate}
+        onChange={(date) => { onSelectEndDate(date); }}
+        size="xs"
+        isOutsideRange={day => moment().isSameOrBefore(day)}
       />
     </div>
   );
@@ -52,14 +44,13 @@ TracksDateInner.defaultProps = {
   className: '',
   startDate: null,
   endDate: null,
-  onSelectStartDate: () => {},
-  onSelectEndDate: () => {},
+  onSelectStartDate: () => { },
+  onSelectEndDate: () => { },
 };
 
 TracksDateInner.propTypes = {
   theme: PT.shape({
     container: PT.string.isRequired,
-    title: PT.string.isRequired,
     separator: PT.string.isRequired,
   }).isRequired,
   className: PT.string,

src/shared/components/Contentful/TracksFilter/TracksDate/themes/default.scss

@@ -13,55 +13,23 @@ $text-black: #2a2a2a;
   @include roboto-regular;
 
   display: flex;
+  flex: 0 0 270px;
   flex-direction: row;
   color: $text-black;
-  background-color: #f4f4f4;
-  border-radius: 6px;
-  border: 1px solid #aaa;
   position: relative;
-  padding: 0 15px;
   min-width: 245px;
   align-items: center;
   font-size: 14px;
-  height: 38px;
-
-  :global {
-    .SingleDatePicker {
-      width: 105px;
-      margin-left: 12px;
-    }
-
-    input {
-      height: 21px !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      border: none !important;
-      box-shadow: none !important;
-      background-color: #f4f4f4 !important;
-      color: #2a2a2a !important;
-      font-size: 16px !important;
-    }
-
-    @include xs-to-sm {
-      .SingleDatePicker {
-        width: 105px;
-        margin-left: 6px;
-      }
-    }
-  }
-}
-
-.title {
-  position: absolute;
-  color: #aaa;
-  font-size: 12px;
-  padding: 0 7px;
-  left: 8px;
-  top: -7px;
-  background: #f4f4f4;
 }
 
 .separator {
-  margin-left: 0;
-  margin-right: 12px;
+  margin: 0 6px;
+  width: 6px;
+  height: 1px;
+  background-color: #aaa;
+
+  @include xs-to-sm {
+    width: 30px;
+    background-color: #fff;
+  }
 }