convert company to nested filter

move limit to top 50 from the matched company filters

delete company filter, passing title to props

update nested filter test

remove show less logic, update icon, update unit tests

adding plus icon

remove typo

updat eyarn.lock

update lintstaged

update dist

update dist

Rever package.lock

Author: flacoman91

dist/ccdb5.css

@@ -14,6 +14,7 @@ import { ReactComponent as LineChart } from '../../../icons/line-chart-custom.sv
 import { ReactComponent as List } from '../../../icons/list.svg';
 import { ReactComponent as Map } from '../../../icons/map.svg';
 import { ReactComponent as MinusRound } from '../../../icons/minus-round.svg';
+import { ReactComponent as Plus } from '../../../icons/plus.svg';
 import { ReactComponent as PlusRound } from '../../../icons/plus-round.svg';
 import { ReactComponent as Printer } from '../../../icons/print.svg';
 import { ReactComponent as Right } from '../../../icons/right.svg';
@@ -52,6 +53,7 @@ const iconMap = {
   map: <Map />,
   // cf-icon-svg--minus-round
   'minus-round': <MinusRound />,
+  plus: <Plus />,
   // cf-icon-svg--plus-round
   'plus-round': <PlusRound />,
   // cf-icon-svg--print

dist/ccdb5.css.map

@@ -1,5 +1,4 @@
 import './FilterPanel.scss';
-import { Company } from '../Company/Company';
 import { CompanyReceivedFilter } from '../Date/CompanyReceivedFilter';
 import { useDispatch, useSelector } from 'react-redux';
 import { DateFilter } from '../Date/DateFilter';
@@ -55,6 +54,7 @@ export const FilterPanel = () => {
               'in the complaint'
             }
             fieldName="product"
+            filterTitle="Product / Sub-product"
           />
           <hr />
           <NestedFilter
@@ -63,13 +63,21 @@ export const FilterPanel = () => {
               'in the complaint'
             }
             fieldName="issue"
+            filterTitle="Issue / Sub-issue"
           />
           <hr />
           <FederalState />
           <hr />
           <ZipCode />
           <hr />
-          <Company />
+          <NestedFilter
+            desc={
+              'The type of issue and sub-issue the consumer identified ' +
+              'in the complaint'
+            }
+            fieldName="company"
+            filterTitle="Company"
+          />
           <hr />
           <SimpleFilter
             title="Did company provide a timely response?"

dist/ccdb5.js

@@ -3,21 +3,22 @@ import { createElement, useState } from 'react';
 import { coalesce, sortOptions } from '../../../utils';
 import { useSelector } from 'react-redux';
 import { selectFiltersRoot } from '../../../reducers/filters/selectors';
+import getIcon from '../../Common/Icon/iconMap';
 
 export const MoreOrLess = ({
   fieldName,
   listComponent,
   options,
   perBucketProps = (bucket, props) => props,
-  hasMore = false,
 }) => {
-  const [currentlyHasMore, setCurrentlyHasMore] = useState(hasMore);
   const filters = useSelector(selectFiltersRoot);
   const selectedFilters = coalesce(filters, fieldName, []);
+  const [limit, setLimit] = useState(5);
   const all = sortOptions(options, selectedFilters, fieldName);
-  const some = all.length > 5 ? all.slice(0, 5) : all;
-  const remain = all.length - 5;
-
+  const step = 50;
+  const some = options.slice(0, limit);
+  // either 50, or remaining count
+  const nextStep = step < all.length ? step : all.length - limit;
   const buildListComponent = (bucket) => {
     const itemProps = perBucketProps(bucket, {
       fieldName,
@@ -31,25 +32,20 @@ export const MoreOrLess = ({
   };
 
   const toggleShowMore = () => {
-    setCurrentlyHasMore(!currentlyHasMore);
+    setLimit(limit + nextStep);
   };
 
   return (
     <>
-      <ul>
-        {currentlyHasMore
-          ? all.map((bucket) => buildListComponent(bucket))
-          : some.map((bucket) => buildListComponent(bucket))}
-      </ul>
-      {remain > 0 ? (
+      <ul>{some.map((bucket) => buildListComponent(bucket))}</ul>
+      {some.length < options.length && (
         <div>
           <button className="a-btn a-btn--link more" onClick={toggleShowMore}>
-            {currentlyHasMore
-              ? `- Show ${remain} less`
-              : `+ Show ${remain} more`}
+            {getIcon('plus')}
+            <span>{`Show ${nextStep} more`}</span>
           </button>
         </div>
-      ) : null}
+      )}
     </>
   );
 };
@@ -63,5 +59,4 @@ MoreOrLess.propTypes = {
   ]).isRequired,
   options: PropTypes.array.isRequired,
   perBucketProps: PropTypes.func,
-  hasMore: PropTypes.bool,
 };