fix: add style variants

So that the header can work on a a white or dark background

src/constants.js

@@ -6,11 +6,17 @@ const ENTERPRISE_CATALOG_ADMIN = 'enterprise_catalog_admin';
 const ENTERPRISE_LEARNER = 'enterprise_learner';
 const ENTERPRISE_OPENEDX_OPERATOR = 'enterprise_openedx_operator';
 
+const STYLE_VARIANTS = {
+  default: 'default',
+  inverse: 'inverse',
+};
+
 export {
   FEATURE_ENROLL_WITH_CODES,
   FEATURE_LANGUAGE_FACET,
   ENTERPRISE_ADMIN,
   ENTERPRISE_CATALOG_ADMIN,
   ENTERPRISE_LEARNER,
   ENTERPRISE_OPENEDX_OPERATOR,
+  STYLE_VARIANTS,
 };

src/course-search/FacetDropdown.jsx

@@ -2,17 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown } from '@edx/paragon';
 import classNames from 'classnames';
+import { STYLE_VARIANTS } from '../constants';
 
 const FacetDropdown = ({
   title,
   items,
   isBold,
   type,
+  variant,
 }) => (
   <div className="facet-list">
     <Dropdown className={classNames('mb-0 mr-md-3', type)}>
       <Dropdown.Toggle
-        variant="inverse-primary"
+        variant={classNames({
+          'inverse-primary': variant === STYLE_VARIANTS.inverse,
+          'outline-primary': variant === STYLE_VARIANTS.default,
+        })}
         className={classNames({ 'font-weight-bold': isBold })}
       >
         {title}
@@ -26,13 +31,15 @@ const FacetDropdown = ({
 
 FacetDropdown.defaultProps = {
   type: undefined,
+  variant: STYLE_VARIANTS.inverse,
 };
 
 FacetDropdown.propTypes = {
   title: PropTypes.string.isRequired,
   items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   isBold: PropTypes.bool.isRequired,
   type: PropTypes.string,
+  variant: PropTypes.oneOf([STYLE_VARIANTS.default, STYLE_VARIANTS.inverse]),
 };
 
 export default FacetDropdown;

src/course-search/FacetListBase.jsx

@@ -9,6 +9,7 @@ import { SearchContext } from './SearchContext';
 import {
   addToRefinementArray, setRefinementAction, deleteRefinementAction, removeFromRefinementArray,
 } from './data/actions';
+import { STYLE_VARIANTS } from '../constants';
 
 const FacetListBase = ({
   attribute,
@@ -19,6 +20,7 @@ const FacetListBase = ({
   title,
   typeaheadOptions,
   searchForItems,
+  variant,
 }) => {
   /**
    * Handles when a facet option is toggled by either updating the appropriate
@@ -75,6 +77,7 @@ const FacetListBase = ({
         isBold={isBold}
         options={typeaheadOptions}
         searchForItems={searchForItems}
+        variant={variant}
       />
     );
   }
@@ -84,6 +87,7 @@ const FacetListBase = ({
       items={renderItems()}
       title={title}
       isBold={isBold}
+      variant={variant}
     />
   );
 };
@@ -92,6 +96,7 @@ FacetListBase.defaultProps = {
   isCheckedField: null,
   typeaheadOptions: null,
   searchForItems: null,
+  variant: STYLE_VARIANTS.inverse,
 };
 
 FacetListBase.propTypes = {
@@ -107,6 +112,7 @@ FacetListBase.propTypes = {
     minLength: PropTypes.number.isRequired,
   }),
   searchForItems: PropTypes.func,
+  variant: PropTypes.oneOf([STYLE_VARIANTS.default, STYLE_VARIANTS.inverse]),
 };
 
 export default FacetListBase;

src/course-search/SearchBox.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import qs from 'query-string';
 import { SearchField } from '@edx/paragon';
 import { connectSearchBox } from 'react-instantsearch-dom';
 
 import { updateRefinementsFromQueryParams } from './data/utils';
+import { STYLE_VARIANTS } from '../constants';
 
 export const SearchBoxBase = ({
   className,
   defaultRefinement,
   refinementsFromQueryParams,
+  variant,
 }) => {
   const history = useHistory();
 
@@ -44,11 +47,13 @@ export const SearchBoxBase = ({
   return (
     <div className={className}>
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label id="search-input-box" className="mb-2 text-brand-primary font-weight-normal">
+      <label id="search-input-box" className="fe__searchfield-input-box">
         Search Courses
       </label>
       <SearchField.Advanced
-        className="border-0 bg-white"
+        className={classNames('fe__searchfield', {
+          'fe__searchfield--inverse': variant === STYLE_VARIANTS.inverse,
+        })}
         value={defaultRefinement}
         onSubmit={handleSubmit}
         onClear={handleClear}
@@ -65,11 +70,13 @@ SearchBoxBase.propTypes = {
   refinementsFromQueryParams: PropTypes.shape().isRequired,
   defaultRefinement: PropTypes.string,
   className: PropTypes.string,
+  variant: PropTypes.oneOf([STYLE_VARIANTS.default, STYLE_VARIANTS.inverse]),
 };
 
 SearchBoxBase.defaultProps = {
   className: undefined,
   defaultRefinement: '',
+  variant: STYLE_VARIANTS.inverse,
 };
 
 export default connectSearchBox(SearchBoxBase);

src/course-search/SearchFilters.jsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useContext } from 'react';
+import PropTypes from 'prop-types';
 import { breakpoints } from '@edx/paragon';
 
 import FacetListRefinement from './FacetListRefinement';
@@ -15,10 +16,11 @@ import { sortItemsByLabelAsc } from './data/utils';
 import { useWindowSize } from '../hooks';
 import { SearchContext } from './SearchContext';
 import { features } from './config';
+import { STYLE_VARIANTS } from '../constants';
 
 export const FREE_ALL_TITLE = 'Free / All';
 
-const SearchFilters = () => {
+const SearchFilters = ({ variant }) => {
   const size = useWindowSize();
   const { refinementsFromQueryParams, searchFacetFilters } = useContext(SearchContext);
   const showMobileMenu = useMemo(
@@ -59,6 +61,7 @@ const SearchFilters = () => {
           facetValueType="array"
           typeaheadOptions={typeaheadOptions}
           searchable={!!typeaheadOptions}
+          variant={variant}
         />
       ));
       return (
@@ -71,6 +74,7 @@ const SearchFilters = () => {
               items={freeAllItems}
               key={SHOW_ALL_NAME}
               title={FREE_ALL_TITLE}
+              variant={variant}
             />
           )}
           {filtersFromRefinements}
@@ -98,4 +102,12 @@ const SearchFilters = () => {
   );
 };
 
+SearchFilters.defaultProps = {
+  variant: STYLE_VARIANTS.inverse,
+};
+
+SearchFilters.propTypes = {
+  variant: PropTypes.oneOf([STYLE_VARIANTS.default, STYLE_VARIANTS.inverse]),
+};
+
 export default SearchFilters;

src/course-search/SearchHeader.jsx

@@ -1,12 +1,15 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
 import { Container, Row, Col } from '@edx/paragon';
 
+import classNames from 'classnames';
 import SearchBox from './SearchBox';
 import SearchFilters from './SearchFilters';
+import { STYLE_VARIANTS } from '../constants';
 
 import { SearchContext } from './SearchContext';
 
-const SearchHeader = () => {
+const SearchHeader = ({ variant }) => {
   const { refinementsFromQueryParams } = useContext(SearchContext);
 
   const searchQueryFromQueryParams = refinementsFromQueryParams.q;
@@ -15,20 +18,33 @@ const SearchHeader = () => {
     <div className="bg-brand-primary">
       <Container size="lg">
         <Row className="pt-4 pb-3">
-          <Col xs={12} md={8}>
+          <Col
+            className={classNames('fe__searchbox-col', { 'fe__searchbox-col--default': variant === STYLE_VARIANTS.default })}
+            xs={12}
+            md={8}
+          >
             <SearchBox
               className="mb-4"
               defaultRefinement={searchQueryFromQueryParams}
               refinementsFromQueryParams={refinementsFromQueryParams}
+              variant={variant}
             />
           </Col>
-          <Col xs={12}>
-            <SearchFilters className="mb-3" />
+          <Col className={classNames('fe__searchbox-col', { 'fe__searchbox-col--default': variant === STYLE_VARIANTS.default })} xs={12}>
+            <SearchFilters className="mb-3" variant={variant} />
           </Col>
         </Row>
       </Container>
     </div>
   );
 };
 
+SearchHeader.defaultProps = {
+  variant: STYLE_VARIANTS.inverse,
+};
+
+SearchHeader.propTypes = {
+  variant: PropTypes.oneOf([STYLE_VARIANTS.default, STYLE_VARIANTS.inverse]),
+};
+
 export default SearchHeader;

src/course-search/TypeaheadFacetDropdown.jsx

@@ -11,6 +11,7 @@ const TypeaheadFacetDropdown = ({
   isBold,
   options,
   searchForItems,
+  ...props
 }) => {
   const handleSearch = debounce((value) => {
     // when user is erasing the input and input is empty we need to reset the filtering
@@ -43,6 +44,7 @@ const TypeaheadFacetDropdown = ({
       title={title}
       isBold={isBold}
       type="typeahead"
+      {...props}
     />
   );
 };

src/course-search/styles/_FacetList.scss

@@ -18,7 +18,7 @@ $facet-dropdown-max-height: 250px;
 
     .dropdown-menu {
       max-height: $facet-dropdown-max-height;
-      overflow-y: scroll;
+      overflow: scroll;
       max-width: 420px;
       width: max-content;
 
@@ -28,13 +28,11 @@ $facet-dropdown-max-height: 250px;
       }
     }
   }
-
   .typeahead {
     .dropdown-menu {
       max-height: unset;
       overflow-y: unset;
-
-      .typeahead-dropdown-menu-scrollable-items {
+          .typeahead-dropdown-menu-scrollable-items {
         max-height: $facet-dropdown-max-height;
         overflow-y: scroll;
       }

src/course-search/styles/_SearchBox.scss

@@ -0,0 +1,7 @@
+.fe__searchbox-col--default {
+  padding: 0;
+
+  .container, .row {
+    padding: 0;
+  }
+}

src/course-search/styles/_SearchField.scss

@@ -0,0 +1,14 @@
+.fe__searchfield {
+  border-radius: 0 !important;
+}
+
+.fe__searchfield-input-box {
+  @extend .mb-2;
+  @extend .text-brand-primary !optional;
+  @extend .font-weight-normal;
+}
+
+.fe__searchfield--inverse {
+  border: 0 !important;
+  @extend .bg-white;
+}

src/course-search/styles/_index.scss

@@ -1,3 +1,5 @@
 @import "./FacetList";
 @import "./MobileSearchFilters";
 @import "./SearchPagination";
+@import "./SearchField";
+@import "./SearchBox";