fix: update style variants (#86)

* fix: update badges and pills Square refinement badges Add default variant for refinement number pills * fix: add variants for pills and buttons
openedx · Apr 1, 2021 · ed7716e · ed7716e
1 parent fa7d0f2
commit ed7716e
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 11 deletions.
diff --git a/src/course-search/ClearCurrentRefinements.jsx b/src/course-search/ClearCurrentRefinements.jsx
@@ -6,7 +6,7 @@ import { clearRefinementsAction } from './data/actions';
 
 export const CLEAR_ALL_TEXT = 'clear all';
 
-const ClearCurrentRefinements = ({ className, variant }) => {
+const ClearCurrentRefinements = ({ className, variant, ...props }) => {
   const { dispatch } = useContext(SearchContext);
 
   /**
@@ -23,6 +23,7 @@ const ClearCurrentRefinements = ({ className, variant }) => {
       className={className}
       variant={variant}
       onClick={handleClearAllRefinementsClick}
+      {...props}
     >
       {CLEAR_ALL_TEXT}
     </Button>

diff --git a/src/course-search/CurrentRefinements.jsx b/src/course-search/CurrentRefinements.jsx
@@ -1,5 +1,6 @@
 import React, { useContext, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import { Badge, Button } from '@edx/paragon';
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
@@ -17,8 +18,9 @@ import {
 } from './data/hooks';
 import { SearchContext } from './SearchContext';
 import { removeFromRefinementArray, deleteRefinementAction } from './data/actions';
+import { STYLE_VARIANTS } from '../constants';
 
-export const CurrentRefinementsBase = ({ items }) => {
+export const CurrentRefinementsBase = ({ items, variant }) => {
   if (!items || !items.length) {
     return null;
   }
@@ -67,7 +69,7 @@ export const CurrentRefinementsBase = ({ items }) => {
       {visibleActiveRefinements.map(item => (
         <li className="mr-2" key={item.label}>
           <Badge
-            className="mb-2 font-weight-light"
+            className="fe__refinement-badge py-2 mb-2 font-weight-light"
             variant="light"
             onClick={() => handleRefinementBadgeClick(item)}
           >
@@ -80,7 +82,7 @@ export const CurrentRefinementsBase = ({ items }) => {
       {!showAllRefinements && activeRefinementsAsFlatArray.length > NUM_CURRENT_REFINEMENTS_TO_DISPLAY && (
         <li className="mr-2">
           <Badge
-            className="mb-2 font-weight-light"
+            className={classNames('fe__refinement-badge mb-2 py-2 font-weight-light', { 'fe__refinement-badge--default': variant === STYLE_VARIANTS.defualt })}
             variant="light"
             onClick={() => setShowAllRefinements(true)}
           >
@@ -92,23 +94,39 @@ export const CurrentRefinementsBase = ({ items }) => {
       {showAllRefinements && (
         <li className="mr-2">
           <Button
-            className="text-white text-underline px-1 py-0 mb-2"
-            variant="link"
+            className={classNames(
+              'fe__current-refinement-button text-underline px-1 py-0 mb-2',
+              { 'fe__current-refinement-button--inverse': variant === STYLE_VARIANTS.inverse },
+            )}
             onClick={() => setShowAllRefinements(false)}
+            variant="link"
+            size="inline"
           >
             show less
           </Button>
         </li>
       )}
       <li>
-        <ClearCurrentRefinements className="text-white text-underline px-1 py-0 mb-2" variant="link" />
+        <ClearCurrentRefinements
+          className={classNames(
+            'fe__current-refinement-button text-underline px-1 py-0 mb-2',
+            { 'fe__current-refinement-button--inverse': variant === STYLE_VARIANTS.inverse },
+          )}
+          variant="link"
+          size="inline"
+        />
       </li>
     </ul>
   );
 };
 
+CurrentRefinementsBase.defaultProps = {
+  variant: STYLE_VARIANTS.inverse,
+};
+
 CurrentRefinementsBase.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  variant: PropTypes.oneOf(Object.values(STYLE_VARIANTS)),
 };
 
 export default connectCurrentRefinements(CurrentRefinementsBase);
diff --git a/src/course-search/FacetItem.jsx b/src/course-search/FacetItem.jsx
@@ -2,35 +2,45 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Input, Dropdown } from '@edx/paragon';
 import classNames from 'classnames';
+import { STYLE_VARIANTS } from '../constants';
 
 const FacetItem = ({
-  handleInputOnChange, item, isChecked,
+  handleInputOnChange, item, isChecked, variant,
 }) => (
   <Dropdown.Item as="label" className="mb-0 py-3">
     <Input
       type="checkbox"
       checked={isChecked}
       onChange={() => handleInputOnChange(item)}
-      className="position-relative mr-2"
+      className="facet-item position-relative mr-2 mb-2"
     />
     <span className={classNames('facet-item-label', { 'is-refined': isChecked })}>
       {item.label}
     </span>
     {item.count && (
-      <span className="badge badge-pill ml-2 bg-brand-primary text-brand-primary">
+      <span className={classNames(
+        'badge badge-pill ml-2 py-1 bg-brand-primary text-brand-primary',
+        { 'bg-brand-primary--default': variant === STYLE_VARIANTS.default },
+      )}
+      >
         {item.count}
       </span>
     )}
   </Dropdown.Item>
 );
 
+FacetItem.defaultProps = {
+  variant: STYLE_VARIANTS.inverse,
+};
+
 FacetItem.propTypes = {
   handleInputOnChange: PropTypes.func.isRequired,
   isChecked: PropTypes.bool.isRequired,
   item: PropTypes.shape({
     count: PropTypes.number,
     label: PropTypes.string.isRequired,
   }).isRequired,
+  variant: PropTypes.oneOf(Object.values(STYLE_VARIANTS)),
 };
 
 export default FacetItem;
diff --git a/src/course-search/FacetListBase.jsx b/src/course-search/FacetListBase.jsx
@@ -62,6 +62,7 @@ const FacetListBase = ({
             handleInputOnChange={handleInputOnChange}
             item={item}
             isChecked={isChecked}
+            variant={variant}
           />
         );
       });

diff --git a/src/course-search/SearchFilters.jsx b/src/course-search/SearchFilters.jsx
@@ -95,7 +95,7 @@ const SearchFilters = ({ variant }) => {
           <div className="d-flex">
             {searchFacets}
           </div>
-          <CurrentRefinements />
+          <CurrentRefinements variant={variant} />
         </>
       )}
     </>

diff --git a/src/course-search/styles/_CurrentRefinements.scss b/src/course-search/styles/_CurrentRefinements.scss
@@ -0,0 +1,12 @@
+.fe__refinement-badge {
+  border-radius: 0;
+
+  &.fe__refinement-badge:first-child {
+    // overrides bootstrap margin for first child
+    margin-left: 0 !important;
+  }
+}
+
+.fe__current-refinement-button--inverse {
+  color: $white;
+}
diff --git a/src/course-search/styles/_FacetList.scss b/src/course-search/styles/_FacetList.scss
@@ -25,6 +25,8 @@ $facet-dropdown-max-height: 250px;
       .dropdown-item {
         padding-left: 30px;
         white-space: break-spaces;
+        display: flex;
+        align-items: center;
       }
     }
   }
@@ -38,4 +40,10 @@ $facet-dropdown-max-height: 250px;
       }
     }
   }
+
+}
+
+.bg-brand-primary--default {
+  background-color: $primary-700;
+  color: $white;
 }
diff --git a/src/course-search/styles/_index.scss b/src/course-search/styles/_index.scss
@@ -1,3 +1,4 @@
+@import "./CurrentRefinements";
 @import "./FacetList";
 @import "./MobileSearchFilters";
 @import "./SearchPagination";