Expose styling of facet headers in FilterGroup

.gitignore

@@ -7,3 +7,6 @@ lib/
 # testing
 /coverage
 /storybook-static
+
+.env
+test-site/.env

docs/search-ui-react.filtergroupcssclasses.md

@@ -21,4 +21,5 @@ export interface FilterGroupCssClasses
 |  [optionLabel?](./search-ui-react.filtergroupcssclasses.optionlabel.md) | string | <i>(Optional)</i> |
 |  [optionsContainer?](./search-ui-react.filtergroupcssclasses.optionscontainer.md) | string | <i>(Optional)</i> |
 |  [searchInput?](./search-ui-react.filtergroupcssclasses.searchinput.md) | string | <i>(Optional)</i> |
+|  [titleLabel?](./search-ui-react.filtergroupcssclasses.titlelabel.md) | string | <i>(Optional)</i> |
 

docs/search-ui-react.filtergroupcssclasses.titlelabel.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) &gt; [titleLabel](./search-ui-react.filtergroupcssclasses.titlelabel.md)
+
+## FilterGroupCssClasses.titleLabel property
+
+<b>Signature:</b>
+
+```typescript
+titleLabel?: string;
+```

etc/search-ui-react.api.md

@@ -204,6 +204,8 @@ export interface FilterGroupCssClasses {
     optionsContainer?: string;
     // (undocumented)
     searchInput?: string;
+    // (undocumented)
+    titleLabel?: string;
 }
 
 // @public

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "slapshot@yext.com",
   "license": "BSD-3-Clause",
@@ -134,6 +134,7 @@
     "restoreMocks": true
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "@microsoft/api-documenter": "^7.15.3",
     "@microsoft/api-extractor": "^7.19.4",
     "@reach/auto-id": "^0.18.0",

src/components/FilterGroup.tsx

@@ -1,8 +1,11 @@
 import { useSearchUtilities } from '@yext/search-headless-react';
 import { PropsWithChildren, useMemo, useState } from 'react';
+import { twMerge } from '../hooks/useComposedCssClasses';
 import {
   CheckboxOption,
   CollapsibleLabel,
+  CollapsibleLabelCssClasses,
+  builtInCollapsibleLabelCssClasses,
   CollapsibleSection,
   FilterOptionConfig,
   SearchInput,
@@ -17,6 +20,7 @@ import {
  * @public
  */
 export interface FilterGroupCssClasses {
+  titleLabel?: string,
   searchInput?: string,
   optionsContainer?: string,
   option?: string,
@@ -75,11 +79,17 @@ export function FilterGroup({
     };
   }, [customCssClasses]);
 
+  const collapsibleLabelCssClasses: CollapsibleLabelCssClasses = useMemo(() => {
+    return {
+      label: cssClasses.titleLabel
+    };
+  }, [cssClasses]);
+
   function renderTitle() {
     return collapsible
-      ? <CollapsibleLabel label={title} />
+      ? <CollapsibleLabel label={title} customCssClasses={collapsibleLabelCssClasses} />
       : (title &&
-        <div className='text-neutral-dark text-sm font-medium text-left mb-4'>
+        <div className={twMerge('mb-4', builtInCollapsibleLabelCssClasses.label, collapsibleLabelCssClasses.label)}>
           {title}
         </div>);
   }

src/components/Filters/CollapsibleLabel.tsx

@@ -1,6 +1,16 @@
 import classNames from 'classnames';
 import { ChevronIcon } from '../../icons/ChevronIcon';
 import { useFilterGroupContext } from './FilterGroupContext';
+import { useComposedCssClasses } from '../../hooks/useComposedCssClasses';
+
+/**
+ * The CSS class interface for {@link CollapsibleLabelProps}.
+ *
+ * @public
+ */
+export interface CollapsibleLabelCssClasses {
+  label?: string
+}
 
 /**
  * Props for {@link Filters.CollapsibleLabel}.
@@ -9,9 +19,15 @@ import { useFilterGroupContext } from './FilterGroupContext';
  */
 export interface CollapsibleLabelProps {
   /** The label's text value which is displayed by the component. */
-  label?: string
+  label?: string,
+  /** CSS classes for customizing the component styling. */
+  customCssClasses?: CollapsibleLabelCssClasses
 }
 
+export const builtInCssClasses: Readonly<CollapsibleLabelCssClasses> = {
+  label: 'text-neutral-dark text-sm font-medium text-left',
+};
+
 /**
  * CollapsibleLabel is a button for collapsing and expanding filters within a parent
  * {@link Filters.FilterGroupProvider}.
@@ -22,15 +38,16 @@ export interface CollapsibleLabelProps {
  *
  * @public
  */
-export function CollapsibleLabel({ label }: CollapsibleLabelProps): JSX.Element {
+export function CollapsibleLabel({ label, customCssClasses }: CollapsibleLabelProps): JSX.Element {
   const { isExpanded, getToggleProps } = useFilterGroupContext();
   const iconClassName = classNames('w-3 text-gray-400', {
     'transform rotate-180': !isExpanded
   });
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
   return (
     <button className='w-full flex justify-between items-center mb-4' {...getToggleProps()}>
-      <div className='text-neutral-dark text-sm font-medium text-left'>
+      <div className={cssClasses.label}>
         {label}
       </div>
       <ChevronIcon className={iconClassName}/>

src/components/Filters/index.ts

@@ -1,5 +1,5 @@
 export { CheckboxOption, CheckboxOptionProps, CheckboxCssClasses, FilterOptionConfig } from './CheckboxOption';
-export { CollapsibleLabel, CollapsibleLabelProps } from './CollapsibleLabel';
+export { CollapsibleLabel, CollapsibleLabelProps, CollapsibleLabelCssClasses, builtInCssClasses as builtInCollapsibleLabelCssClasses } from './CollapsibleLabel';
 export { CollapsibleSection, CollapsibleSectionProps } from './CollapsibleSection';
 export { FacetsProvider, FacetsProviderProps } from './FacetsProvider';
 export { FiltersContext, useFiltersContext, FiltersContextType } from './FiltersContext';

src/utils/filterutils.tsx

@@ -1,5 +1,5 @@
 import { NearFilterValue, FieldValueFilter, NumberRangeValue, Matcher, SearchActions, DisplayableFacet, SelectableStaticFilter } from '@yext/search-headless-react';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash';
 import { isNumberRangeFilter } from '../models/NumberRangeFilter';
 import { SelectableFieldValueFilter } from '../models/SelectableFieldValueFilter';