From bbac8455ccee27ad485aeb4e0dfc211bd4bf0e39 Mon Sep 17 00:00:00 2001 From: Emily Zhang Date: Wed, 10 May 2023 19:02:22 -0400 Subject: [PATCH 1/3] Add Singular StandardFacet This change adds a singular StandardFacet that can be used to override facets rendered in Facets. J=BACK-2221 TEST=auto,manual Ran `npm run test` and confirmed all tests pass. Manually added a StandardFacet with Facets on the people's page under test-site/. Confirmed the facet gets overridden correctly. --- ...ch-ui-react.basefacetcssclasses.divider.md | 11 ++ docs/search-ui-react.basefacetcssclasses.md | 21 ++++ .../search-ui-react.basefacetprops.fieldid.md | 13 ++ docs/search-ui-react.basefacetprops.label.md | 13 ++ docs/search-ui-react.basefacetprops.md | 22 ++++ ...i-react.basefacetprops.transformoptions.md | 13 ++ ...act.basestandardfacetprops.collapsible.md} | 4 +- ...basestandardfacetprops.customcssclasses.md | 13 ++ ...basestandardfacetprops.defaultexpanded.md} | 4 +- .../search-ui-react.basestandardfacetprops.md | 25 ++++ ....basestandardfacetprops.searchonchange.md} | 4 +- ...t.basestandardfacetprops.showmorelimit.md} | 4 +- ...asestandardfacetprops.showoptioncounts.md} | 4 +- docs/search-ui-react.facets.md | 2 + ...h-ui-react.facetsprops.customcssclasses.md | 13 -- docs/search-ui-react.facetsprops.md | 15 ++- docs/search-ui-react.md | 8 +- docs/search-ui-react.standardfacet.md | 29 +++++ ...search-ui-react.standardfacetcssclasses.md | 21 ++++ ...dfacetcssclasses.standardfacetcontainer.md | 11 ++ ...act.standardfacetprops.customcssclasses.md | 13 ++ docs/search-ui-react.standardfacetprops.md | 21 ++++ ...-react.standardfacetscssclasses.divider.md | 11 -- ...earch-ui-react.standardfacetscssclasses.md | 5 +- docs/search-ui-react.standardfacetsprops.md | 8 +- etc/search-ui-react.api.md | 59 +++++++-- src/components/FacetProps.tsx | 54 ++++++++ src/components/Facets.tsx | 25 +++- src/components/Filters/FacetsProvider.tsx | 4 +- src/components/StandardFacet.tsx | 116 ++++++++++++++++++ src/components/StandardFacets.tsx | 64 +++------- src/components/index.ts | 12 ++ tests/components/Facets.test.tsx | 30 ++++- tests/components/StandardFacet.stories.tsx | 16 +++ 34 files changed, 567 insertions(+), 121 deletions(-) create mode 100644 docs/search-ui-react.basefacetcssclasses.divider.md create mode 100644 docs/search-ui-react.basefacetcssclasses.md create mode 100644 docs/search-ui-react.basefacetprops.fieldid.md create mode 100644 docs/search-ui-react.basefacetprops.label.md create mode 100644 docs/search-ui-react.basefacetprops.md create mode 100644 docs/search-ui-react.basefacetprops.transformoptions.md rename docs/{search-ui-react.standardfacetsprops.collapsible.md => search-ui-react.basestandardfacetprops.collapsible.md} (55%) create mode 100644 docs/search-ui-react.basestandardfacetprops.customcssclasses.md rename docs/{search-ui-react.standardfacetsprops.defaultexpanded.md => search-ui-react.basestandardfacetprops.defaultexpanded.md} (57%) create mode 100644 docs/search-ui-react.basestandardfacetprops.md rename docs/{search-ui-react.standardfacetsprops.searchonchange.md => search-ui-react.basestandardfacetprops.searchonchange.md} (57%) rename docs/{search-ui-react.standardfacetsprops.showmorelimit.md => search-ui-react.basestandardfacetprops.showmorelimit.md} (55%) rename docs/{search-ui-react.standardfacetsprops.showoptioncounts.md => search-ui-react.basestandardfacetprops.showoptioncounts.md} (55%) delete mode 100644 docs/search-ui-react.facetsprops.customcssclasses.md create mode 100644 docs/search-ui-react.standardfacet.md create mode 100644 docs/search-ui-react.standardfacetcssclasses.md create mode 100644 docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md create mode 100644 docs/search-ui-react.standardfacetprops.customcssclasses.md create mode 100644 docs/search-ui-react.standardfacetprops.md delete mode 100644 docs/search-ui-react.standardfacetscssclasses.divider.md create mode 100644 src/components/FacetProps.tsx create mode 100644 src/components/StandardFacet.tsx create mode 100644 tests/components/StandardFacet.stories.tsx diff --git a/docs/search-ui-react.basefacetcssclasses.divider.md b/docs/search-ui-react.basefacetcssclasses.divider.md new file mode 100644 index 000000000..2e657efec --- /dev/null +++ b/docs/search-ui-react.basefacetcssclasses.divider.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) > [divider](./search-ui-react.basefacetcssclasses.divider.md) + +## BaseFacetCssClasses.divider property + +Signature: + +```typescript +divider?: string; +``` diff --git a/docs/search-ui-react.basefacetcssclasses.md b/docs/search-ui-react.basefacetcssclasses.md new file mode 100644 index 000000000..dbdd95588 --- /dev/null +++ b/docs/search-ui-react.basefacetcssclasses.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) + +## BaseFacetCssClasses interface + +The base CSS class interface for a single facet component. + +Signature: + +```typescript +export interface BaseFacetCssClasses extends FilterGroupCssClasses +``` +Extends: [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [divider?](./search-ui-react.basefacetcssclasses.divider.md) | string | (Optional) | + diff --git a/docs/search-ui-react.basefacetprops.fieldid.md b/docs/search-ui-react.basefacetprops.fieldid.md new file mode 100644 index 000000000..1c6a60c21 --- /dev/null +++ b/docs/search-ui-react.basefacetprops.fieldid.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) > [fieldId](./search-ui-react.basefacetprops.fieldid.md) + +## BaseFacetProps.fieldId property + +The fieldId corresponding to the facet + +Signature: + +```typescript +fieldId: string; +``` diff --git a/docs/search-ui-react.basefacetprops.label.md b/docs/search-ui-react.basefacetprops.label.md new file mode 100644 index 000000000..1c51d6a6f --- /dev/null +++ b/docs/search-ui-react.basefacetprops.label.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) > [label](./search-ui-react.basefacetprops.label.md) + +## BaseFacetProps.label property + +The label of the facet. Defaults to facet's displayName if not provided. + +Signature: + +```typescript +label?: string; +``` diff --git a/docs/search-ui-react.basefacetprops.md b/docs/search-ui-react.basefacetprops.md new file mode 100644 index 000000000..8d600762b --- /dev/null +++ b/docs/search-ui-react.basefacetprops.md @@ -0,0 +1,22 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) + +## BaseFacetProps interface + +Base props for a single facet component. + +Signature: + +```typescript +export interface BaseFacetProps +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [fieldId](./search-ui-react.basefacetprops.fieldid.md) | string | The fieldId corresponding to the facet | +| [label?](./search-ui-react.basefacetprops.label.md) | string | (Optional) The label of the facet. Defaults to facet's displayName if not provided. | +| [transformOptions?](./search-ui-react.basefacetprops.transformoptions.md) | (options: DisplayableFacetOption\[\]) => DisplayableFacetOption\[\] | (Optional) A function to transform facet's options. | + diff --git a/docs/search-ui-react.basefacetprops.transformoptions.md b/docs/search-ui-react.basefacetprops.transformoptions.md new file mode 100644 index 000000000..2e5ec2a45 --- /dev/null +++ b/docs/search-ui-react.basefacetprops.transformoptions.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) > [transformOptions](./search-ui-react.basefacetprops.transformoptions.md) + +## BaseFacetProps.transformOptions property + +A function to transform facet's options. + +Signature: + +```typescript +transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[]; +``` diff --git a/docs/search-ui-react.standardfacetsprops.collapsible.md b/docs/search-ui-react.basestandardfacetprops.collapsible.md similarity index 55% rename from docs/search-ui-react.standardfacetsprops.collapsible.md rename to docs/search-ui-react.basestandardfacetprops.collapsible.md index 318d68c7e..86c34cc05 100644 --- a/docs/search-ui-react.standardfacetsprops.collapsible.md +++ b/docs/search-ui-react.basestandardfacetprops.collapsible.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [collapsible](./search-ui-react.standardfacetsprops.collapsible.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [collapsible](./search-ui-react.basestandardfacetprops.collapsible.md) -## StandardFacetsProps.collapsible property +## BaseStandardFacetProps.collapsible property Whether or not the filter is collapsible. Defaults to true. diff --git a/docs/search-ui-react.basestandardfacetprops.customcssclasses.md b/docs/search-ui-react.basestandardfacetprops.customcssclasses.md new file mode 100644 index 000000000..ec11e38c9 --- /dev/null +++ b/docs/search-ui-react.basestandardfacetprops.customcssclasses.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [customCssClasses](./search-ui-react.basestandardfacetprops.customcssclasses.md) + +## BaseStandardFacetProps.customCssClasses property + +CSS classes for customizing the component styling. + +Signature: + +```typescript +customCssClasses?: BaseFacetCssClasses; +``` diff --git a/docs/search-ui-react.standardfacetsprops.defaultexpanded.md b/docs/search-ui-react.basestandardfacetprops.defaultexpanded.md similarity index 57% rename from docs/search-ui-react.standardfacetsprops.defaultexpanded.md rename to docs/search-ui-react.basestandardfacetprops.defaultexpanded.md index 35e5de393..f1d98c786 100644 --- a/docs/search-ui-react.standardfacetsprops.defaultexpanded.md +++ b/docs/search-ui-react.basestandardfacetprops.defaultexpanded.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [defaultExpanded](./search-ui-react.standardfacetsprops.defaultexpanded.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [defaultExpanded](./search-ui-react.basestandardfacetprops.defaultexpanded.md) -## StandardFacetsProps.defaultExpanded property +## BaseStandardFacetProps.defaultExpanded property If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. diff --git a/docs/search-ui-react.basestandardfacetprops.md b/docs/search-ui-react.basestandardfacetprops.md new file mode 100644 index 000000000..5ba3653f2 --- /dev/null +++ b/docs/search-ui-react.basestandardfacetprops.md @@ -0,0 +1,25 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) + +## BaseStandardFacetProps interface + +Props for a standard facet. + +Signature: + +```typescript +export interface BaseStandardFacetProps +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [collapsible?](./search-ui-react.basestandardfacetprops.collapsible.md) | boolean | (Optional) Whether or not the filter is collapsible. Defaults to true. | +| [customCssClasses?](./search-ui-react.basestandardfacetprops.customcssclasses.md) | [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) | (Optional) CSS classes for customizing the component styling. | +| [defaultExpanded?](./search-ui-react.basestandardfacetprops.defaultexpanded.md) | boolean | (Optional) If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. | +| [searchOnChange?](./search-ui-react.basestandardfacetprops.searchonchange.md) | boolean | (Optional) Whether or not a search is automatically run when a filter is selected. Defaults to true. | +| [showMoreLimit?](./search-ui-react.basestandardfacetprops.showmorelimit.md) | number | (Optional) Limit on the number of options to be displayed. Defaults to 10. | +| [showOptionCounts?](./search-ui-react.basestandardfacetprops.showoptioncounts.md) | boolean | (Optional) Whether or not to show the option counts for each filter. Defaults to true. | + diff --git a/docs/search-ui-react.standardfacetsprops.searchonchange.md b/docs/search-ui-react.basestandardfacetprops.searchonchange.md similarity index 57% rename from docs/search-ui-react.standardfacetsprops.searchonchange.md rename to docs/search-ui-react.basestandardfacetprops.searchonchange.md index 1da216ddd..1af9b11d0 100644 --- a/docs/search-ui-react.standardfacetsprops.searchonchange.md +++ b/docs/search-ui-react.basestandardfacetprops.searchonchange.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [searchOnChange](./search-ui-react.standardfacetsprops.searchonchange.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [searchOnChange](./search-ui-react.basestandardfacetprops.searchonchange.md) -## StandardFacetsProps.searchOnChange property +## BaseStandardFacetProps.searchOnChange property Whether or not a search is automatically run when a filter is selected. Defaults to true. diff --git a/docs/search-ui-react.standardfacetsprops.showmorelimit.md b/docs/search-ui-react.basestandardfacetprops.showmorelimit.md similarity index 55% rename from docs/search-ui-react.standardfacetsprops.showmorelimit.md rename to docs/search-ui-react.basestandardfacetprops.showmorelimit.md index d2686a663..9b98a6c9d 100644 --- a/docs/search-ui-react.standardfacetsprops.showmorelimit.md +++ b/docs/search-ui-react.basestandardfacetprops.showmorelimit.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [showMoreLimit](./search-ui-react.standardfacetsprops.showmorelimit.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [showMoreLimit](./search-ui-react.basestandardfacetprops.showmorelimit.md) -## StandardFacetsProps.showMoreLimit property +## BaseStandardFacetProps.showMoreLimit property Limit on the number of options to be displayed. Defaults to 10. diff --git a/docs/search-ui-react.standardfacetsprops.showoptioncounts.md b/docs/search-ui-react.basestandardfacetprops.showoptioncounts.md similarity index 55% rename from docs/search-ui-react.standardfacetsprops.showoptioncounts.md rename to docs/search-ui-react.basestandardfacetprops.showoptioncounts.md index 92420e0f1..87e0d2012 100644 --- a/docs/search-ui-react.standardfacetsprops.showoptioncounts.md +++ b/docs/search-ui-react.basestandardfacetprops.showoptioncounts.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [showOptionCounts](./search-ui-react.standardfacetsprops.showoptioncounts.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [showOptionCounts](./search-ui-react.basestandardfacetprops.showoptioncounts.md) -## StandardFacetsProps.showOptionCounts property +## BaseStandardFacetProps.showOptionCounts property Whether or not to show the option counts for each filter. Defaults to true. diff --git a/docs/search-ui-react.facets.md b/docs/search-ui-react.facets.md index 8c8b5b2a6..e4ca9912b 100644 --- a/docs/search-ui-react.facets.md +++ b/docs/search-ui-react.facets.md @@ -28,3 +28,5 @@ A React component for facets This component is a quick way of getting facets on the page, and it will render standard facets, numerical facets, and hierarchical facets. The [StandardFacets()](./search-ui-react.standardfacets.md), [NumericalFacets()](./search-ui-react.numericalfacets.md), and [HierarchicalFacets()](./search-ui-react.hierarchicalfacets.md) components can be used instead for more control over facet configuration. +To override a single facet, use [StandardFacet()](./search-ui-react.standardfacet.md) and set the field id on overriddenFieldIds. + diff --git a/docs/search-ui-react.facetsprops.customcssclasses.md b/docs/search-ui-react.facetsprops.customcssclasses.md deleted file mode 100644 index 67d9622f6..000000000 --- a/docs/search-ui-react.facetsprops.customcssclasses.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) > [customCssClasses](./search-ui-react.facetsprops.customcssclasses.md) - -## FacetsProps.customCssClasses property - -CSS classes for customizing the component styling. - -Signature: - -```typescript -customCssClasses?: FacetsCssClasses; -``` diff --git a/docs/search-ui-react.facetsprops.md b/docs/search-ui-react.facetsprops.md index 7d5cc5f5c..d97650f13 100644 --- a/docs/search-ui-react.facetsprops.md +++ b/docs/search-ui-react.facetsprops.md @@ -2,19 +2,18 @@ [Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) -## FacetsProps interface +## FacetsProps type Props for the [Facets()](./search-ui-react.facets.md) component. Signature: ```typescript -export interface FacetsProps +export declare type FacetsProps = PropsWithChildren<{ + overriddenFieldIds?: string[]; + customCssClasses?: FacetsCssClasses; + children?: ReactNode; +}>; ``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [customCssClasses?](./search-ui-react.facetsprops.customcssclasses.md) | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | (Optional) CSS classes for customizing the component styling. | +References: [FacetsCssClasses](./search-ui-react.facetscssclasses.md) diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md index 7ddfd54cf..3b9310526 100644 --- a/docs/search-ui-react.md +++ b/docs/search-ui-react.md @@ -33,6 +33,7 @@ | [SearchBar({ placeholder, geolocationOptions, hideRecentSearches, visualAutocompleteConfig, showVerticalLinks, onSelectVerticalLink, verticalKeyToLabel, recentSearchesLimit, customCssClasses, onSearch })](./search-ui-react.searchbar.md) | Renders a SearchBar that is hooked up with an InputDropdown component. | | [SpellCheck({ customCssClasses, onClick })](./search-ui-react.spellcheck.md) | Renders a suggested query if the Search API provides one. | | [StandardCard(props)](./search-ui-react.standardcard.md) | This Component renders the base result card. | +| [StandardFacet({ props, renderDivider })](./search-ui-react.standardfacet.md) | A component that displays a single standard facet. | | [StandardFacets(props)](./search-ui-react.standardfacets.md) | A component that displays simple facets applicable to the current vertical search. | | [StandardSection(props)](./search-ui-react.standardsection.md) | A component that displays all the results for a vertical using a standard section template. | | [StaticFilters(props)](./search-ui-react.staticfilters.md) | A component that displays a group of user-configured field value filters that will be applied to the current vertical search. | @@ -56,13 +57,15 @@ | [ApplyFiltersButtonCssClasses](./search-ui-react.applyfiltersbuttoncssclasses.md) | The CSS class interface for [ApplyFiltersButtonProps](./search-ui-react.applyfiltersbuttonprops.md). | | [ApplyFiltersButtonProps](./search-ui-react.applyfiltersbuttonprops.md) | Props for [ApplyFiltersButton()](./search-ui-react.applyfiltersbutton.md) | | [AutocompleteResultCssClasses](./search-ui-react.autocompleteresultcssclasses.md) | The CSS class interface for the Autocomplete Result. | +| [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) | The base CSS class interface for a single facet component. | +| [BaseFacetProps](./search-ui-react.basefacetprops.md) | Base props for a single facet component. | +| [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) | Props for a standard facet. | | [CardProps](./search-ui-react.cardprops.md) | The props provided to every [CardComponent](./search-ui-react.cardcomponent.md). | | [Coordinate](./search-ui-react.coordinate.md) | Coordinate use to represent the result's location on a map. | | [CtaData](./search-ui-react.ctadata.md) | The shape of a StandardCard CTA field's data. | | [DirectAnswerCssClasses](./search-ui-react.directanswercssclasses.md) | The CSS class interface for [DirectAnswer()](./search-ui-react.directanswer.md). | | [DirectAnswerProps](./search-ui-react.directanswerprops.md) | Props for [DirectAnswer()](./search-ui-react.directanswer.md). | | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | The CSS class interface for [Facets()](./search-ui-react.facets.md). | -| [FacetsProps](./search-ui-react.facetsprops.md) | Props for the [Facets()](./search-ui-react.facets.md) component. | | [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) | The CSS class interface for FilterGroup. | | [FilterGroupProps](./search-ui-react.filtergroupprops.md) | Props for the FilterGroup component. | | [FilterOptionConfig](./search-ui-react.filteroptionconfig.md) | The configuration data for a field value filter option. | @@ -94,6 +97,8 @@ | [StandardCardCssClasses](./search-ui-react.standardcardcssclasses.md) | The CSS class interface used for the StandardCardDisplay. | | [StandardCardData](./search-ui-react.standardcarddata.md) | The data used by the [StandardCard()](./search-ui-react.standardcard.md) and taken from the original Result. | | [StandardCardProps](./search-ui-react.standardcardprops.md) | Props for a StandardCard. | +| [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) | The CSS class interface for [StandardFacet()](./search-ui-react.standardfacet.md). | +| [StandardFacetProps](./search-ui-react.standardfacetprops.md) | Props for the [StandardFacet()](./search-ui-react.standardfacet.md) component. | | [StandardFacetsCssClasses](./search-ui-react.standardfacetscssclasses.md) | The CSS class interface for [StandardFacets()](./search-ui-react.standardfacets.md). | | [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) | Props for the [StandardFacets()](./search-ui-react.standardfacets.md) component. | | [StandardSectionCssClasses](./search-ui-react.standardsectioncssclasses.md) | The CSS class interface used for [StandardSection()](./search-ui-react.standardsection.md). | @@ -129,6 +134,7 @@ | [CoordinateGetter](./search-ui-react.coordinategetter.md) | A function use to derive a result's coordinate. | | [DefaultRawDataType](./search-ui-react.defaultrawdatatype.md) | The default type for "rawData" field of type Result. | | [DropdownItemProps](./search-ui-react.dropdownitemprops.md) | Props for the [DropdownItem()](./search-ui-react.dropdownitem.md). | +| [FacetsProps](./search-ui-react.facetsprops.md) | Props for the [Facets()](./search-ui-react.facets.md) component. | | [FeedbackType](./search-ui-react.feedbacktype.md) | Analytics event types for quality feedback. | | [FocusedItemData](./search-ui-react.focuseditemdata.md) | The data associated with the currently focused item. | | [OnDragHandler](./search-ui-react.ondraghandler.md) | A function which is called when user drag the map. | diff --git a/docs/search-ui-react.standardfacet.md b/docs/search-ui-react.standardfacet.md new file mode 100644 index 000000000..ddcde9b87 --- /dev/null +++ b/docs/search-ui-react.standardfacet.md @@ -0,0 +1,29 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacet](./search-ui-react.standardfacet.md) + +## StandardFacet() function + +A component that displays a single standard facet. + +Signature: + +```typescript +export declare function StandardFacet({ props, renderDivider }: { + props: any; + renderDivider?: boolean | undefined; +}): JSX.Element; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| { props, renderDivider } | { props: any; renderDivider?: boolean \| undefined; } | | + +Returns: + +JSX.Element + +A React component for the facet + diff --git a/docs/search-ui-react.standardfacetcssclasses.md b/docs/search-ui-react.standardfacetcssclasses.md new file mode 100644 index 000000000..9c4ee9709 --- /dev/null +++ b/docs/search-ui-react.standardfacetcssclasses.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) + +## StandardFacetCssClasses interface + +The CSS class interface for [StandardFacet()](./search-ui-react.standardfacet.md). + +Signature: + +```typescript +export interface StandardFacetCssClasses extends BaseFacetCssClasses +``` +Extends: [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [standardFacetContainer?](./search-ui-react.standardfacetcssclasses.standardfacetcontainer.md) | string | (Optional) | + diff --git a/docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md b/docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md new file mode 100644 index 000000000..052ed4da5 --- /dev/null +++ b/docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) > [standardFacetContainer](./search-ui-react.standardfacetcssclasses.standardfacetcontainer.md) + +## StandardFacetCssClasses.standardFacetContainer property + +Signature: + +```typescript +standardFacetContainer?: string; +``` diff --git a/docs/search-ui-react.standardfacetprops.customcssclasses.md b/docs/search-ui-react.standardfacetprops.customcssclasses.md new file mode 100644 index 000000000..0f8ed33c2 --- /dev/null +++ b/docs/search-ui-react.standardfacetprops.customcssclasses.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [customCssClasses](./search-ui-react.standardfacetprops.customcssclasses.md) + +## StandardFacetProps.customCssClasses property + +CSS classes for customizing the component styling. + +Signature: + +```typescript +customCssClasses?: StandardFacetCssClasses; +``` diff --git a/docs/search-ui-react.standardfacetprops.md b/docs/search-ui-react.standardfacetprops.md new file mode 100644 index 000000000..6de7c9f6a --- /dev/null +++ b/docs/search-ui-react.standardfacetprops.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) + +## StandardFacetProps interface + +Props for the [StandardFacet()](./search-ui-react.standardfacet.md) component. + +Signature: + +```typescript +export interface StandardFacetProps extends BaseFacetProps, BaseStandardFacetProps +``` +Extends: [BaseFacetProps](./search-ui-react.basefacetprops.md), [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [customCssClasses?](./search-ui-react.standardfacetprops.customcssclasses.md) | [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) | (Optional) CSS classes for customizing the component styling. | + diff --git a/docs/search-ui-react.standardfacetscssclasses.divider.md b/docs/search-ui-react.standardfacetscssclasses.divider.md deleted file mode 100644 index 061b1d9c8..000000000 --- a/docs/search-ui-react.standardfacetscssclasses.divider.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsCssClasses](./search-ui-react.standardfacetscssclasses.md) > [divider](./search-ui-react.standardfacetscssclasses.divider.md) - -## StandardFacetsCssClasses.divider property - -Signature: - -```typescript -divider?: string; -``` diff --git a/docs/search-ui-react.standardfacetscssclasses.md b/docs/search-ui-react.standardfacetscssclasses.md index f7cec29b4..9b1b6c785 100644 --- a/docs/search-ui-react.standardfacetscssclasses.md +++ b/docs/search-ui-react.standardfacetscssclasses.md @@ -9,14 +9,13 @@ The CSS class interface for [StandardFacets()](./search-ui-react.standardfacets. Signature: ```typescript -export interface StandardFacetsCssClasses extends FilterGroupCssClasses +export interface StandardFacetsCssClasses extends BaseFacetCssClasses ``` -Extends: [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) +Extends: [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) ## Properties | Property | Type | Description | | --- | --- | --- | -| [divider?](./search-ui-react.standardfacetscssclasses.divider.md) | string | (Optional) | | [standardFacetsContainer?](./search-ui-react.standardfacetscssclasses.standardfacetscontainer.md) | string | (Optional) | diff --git a/docs/search-ui-react.standardfacetsprops.md b/docs/search-ui-react.standardfacetsprops.md index 81260b627..b131daa0a 100644 --- a/docs/search-ui-react.standardfacetsprops.md +++ b/docs/search-ui-react.standardfacetsprops.md @@ -9,18 +9,14 @@ Props for the [StandardFacets()](./search-ui-react.standardfacets.md) component. Signature: ```typescript -export interface StandardFacetsProps +export interface StandardFacetsProps extends BaseStandardFacetProps ``` +Extends: [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) ## Properties | Property | Type | Description | | --- | --- | --- | -| [collapsible?](./search-ui-react.standardfacetsprops.collapsible.md) | boolean | (Optional) Whether or not the filter is collapsible. Defaults to true. | | [customCssClasses?](./search-ui-react.standardfacetsprops.customcssclasses.md) | [StandardFacetsCssClasses](./search-ui-react.standardfacetscssclasses.md) | (Optional) CSS classes for customizing the component styling. | -| [defaultExpanded?](./search-ui-react.standardfacetsprops.defaultexpanded.md) | boolean | (Optional) If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. | | [excludedFieldIds?](./search-ui-react.standardfacetsprops.excludedfieldids.md) | string\[\] | (Optional) List of filter ids that should not be displayed. | -| [searchOnChange?](./search-ui-react.standardfacetsprops.searchonchange.md) | boolean | (Optional) Whether or not a search is automatically run when a filter is selected. Defaults to true. | -| [showMoreLimit?](./search-ui-react.standardfacetsprops.showmorelimit.md) | number | (Optional) Limit on the number of options to be displayed. Defaults to 10. | -| [showOptionCounts?](./search-ui-react.standardfacetsprops.showoptioncounts.md) | boolean | (Optional) Whether or not to show the option counts for each filter. Defaults to true. | diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index b5d09e778..3f3c0ffb4 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -10,6 +10,7 @@ import { AnalyticsConfig } from '@yext/analytics'; import { AnalyticsService } from '@yext/analytics'; import { AutocompleteResponse } from '@yext/search-headless-react'; import { DirectAnswer as DirectAnswer_2 } from '@yext/search-headless-react'; +import { DisplayableFacetOption } from '@yext/search-core'; import { FieldValueStaticFilter } from '@yext/search-headless-react'; import { FilterSearchResponse } from '@yext/search-headless-react'; import { HighlightedValue } from '@yext/search-headless-react'; @@ -21,6 +22,7 @@ import { Matcher } from '@yext/search-headless-react'; import { NumberRangeValue } from '@yext/search-headless-react'; import { PropsWithChildren } from 'react'; import { QuerySource } from '@yext/search-headless-react'; +import { ReactNode } from 'react'; import { Result } from '@yext/search-headless-react'; import { SearchActions } from '@yext/search-headless-react'; import { SearchHeadless } from '@yext/search-headless-react'; @@ -115,6 +117,29 @@ export interface AutocompleteResultCssClasses { option?: string; } +// @public +export interface BaseFacetCssClasses extends FilterGroupCssClasses { + // (undocumented) + divider?: string; +} + +// @public +export interface BaseFacetProps { + fieldId: string; + label?: string; + transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[]; +} + +// @public +export interface BaseStandardFacetProps { + collapsible?: boolean; + customCssClasses?: BaseFacetCssClasses; + defaultExpanded?: boolean; + searchOnChange?: boolean; + showMoreLimit?: number; + showOptionCounts?: boolean; +} + // @public export type CardAnalyticsDataType = DirectAnswer_2 | Result; @@ -210,9 +235,11 @@ export interface FacetsCssClasses { } // @public -export interface FacetsProps { +export type FacetsProps = PropsWithChildren<{ + overriddenFieldIds?: string[]; customCssClasses?: FacetsCssClasses; -} + children?: ReactNode; +}>; // @public export type FeedbackType = 'THUMBS_UP' | 'THUMBS_DOWN'; @@ -682,25 +709,35 @@ export interface StandardCardProps extends CardProps } // @public -export function StandardFacets(props: StandardFacetsProps): JSX.Element; +export function StandardFacet({ props, renderDivider }: { + props: any; + renderDivider?: boolean | undefined; +}): JSX.Element; // @public -export interface StandardFacetsCssClasses extends FilterGroupCssClasses { +export interface StandardFacetCssClasses extends BaseFacetCssClasses { // (undocumented) - divider?: string; + standardFacetContainer?: string; +} + +// @public +export interface StandardFacetProps extends BaseFacetProps, BaseStandardFacetProps { + customCssClasses?: StandardFacetCssClasses; +} + +// @public +export function StandardFacets(props: StandardFacetsProps): JSX.Element; + +// @public +export interface StandardFacetsCssClasses extends BaseFacetCssClasses { // (undocumented) standardFacetsContainer?: string; } // @public -export interface StandardFacetsProps { - collapsible?: boolean; +export interface StandardFacetsProps extends BaseStandardFacetProps { customCssClasses?: StandardFacetsCssClasses; - defaultExpanded?: boolean; excludedFieldIds?: string[]; - searchOnChange?: boolean; - showMoreLimit?: number; - showOptionCounts?: boolean; } // @public diff --git a/src/components/FacetProps.tsx b/src/components/FacetProps.tsx new file mode 100644 index 000000000..17e400ea5 --- /dev/null +++ b/src/components/FacetProps.tsx @@ -0,0 +1,54 @@ +import { DisplayableFacetOption } from '@yext/search-core'; +import { FilterGroupCssClasses } from './FilterGroup'; + +/** + * The base CSS class interface for a single facet component. + * + * @public + */ +export interface BaseFacetCssClasses extends FilterGroupCssClasses { + divider?: string +} + +/** + * Base props for a single facet component. + * + * @public + */ +export interface BaseFacetProps { + /** The fieldId corresponding to the facet */ + fieldId: string, + /** The label of the facet. Defaults to facet's displayName if not provided. */ + label?: string, + /** A function to transform facet's options. */ + transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[] +} + +/** + * Props for a standard facet. + * + * @public + */ +export interface BaseStandardFacetProps { + /** {@inheritDoc FilterGroupProps.collapsible} */ + collapsible?: boolean, + /** {@inheritDoc FilterGroupProps.defaultExpanded} */ + defaultExpanded?: boolean, + /** + * Whether or not a search is automatically run when a filter is selected. + * Defaults to true. + */ + searchOnChange?: boolean, + /** + * Whether or not to show the option counts for each filter. + * Defaults to true. + */ + showOptionCounts?: boolean, + /** + * Limit on the number of options to be displayed. + * Defaults to 10. + */ + showMoreLimit?: number, + /** CSS classes for customizing the component styling. */ + customCssClasses?: BaseFacetCssClasses +} diff --git a/src/components/Facets.tsx b/src/components/Facets.tsx index 1c5b90c2a..cde51f7dc 100644 --- a/src/components/Facets.tsx +++ b/src/components/Facets.tsx @@ -1,5 +1,6 @@ import { StandardFacets } from './StandardFacets'; import { NumericalFacets } from './NumericalFacets'; +import { PropsWithChildren, ReactNode } from 'react'; /** * The CSS class interface for {@link Facets}. @@ -15,10 +16,18 @@ export interface FacetsCssClasses { * * @public */ -export interface FacetsProps { +export type FacetsProps = PropsWithChildren<{ + /** List of filter ids that should be overridden. */ + overriddenFieldIds?: string[], /** CSS classes for customizing the component styling. */ - customCssClasses?: FacetsCssClasses -} + customCssClasses?: FacetsCssClasses, + /** The custom facet components that will override the default rendering. + * + * @remarks + * Supported components include {@link StandardFacet}. + */ + children?: ReactNode +}>; /** * A component that displays all facets applicable to the current vertical search. @@ -29,17 +38,21 @@ export interface FacetsProps { * and {@link HierarchicalFacets} components can be used instead for more control over facet * configuration. * + * To override a single facet, use {@link StandardFacet} and set the field id on overriddenFieldIds. + * * @param props - {@link FacetsProps} * @returns A React component for facets * * @public */ export function Facets(props: FacetsProps) { - const { customCssClasses = {} } = props; + const { overriddenFieldIds, children, customCssClasses = {} } = props; + return (
- - + {children} + +
); } \ No newline at end of file diff --git a/src/components/Filters/FacetsProvider.tsx b/src/components/Filters/FacetsProvider.tsx index 52f4f5c3b..3aac3bc4b 100644 --- a/src/components/Filters/FacetsProvider.tsx +++ b/src/components/Filters/FacetsProvider.tsx @@ -31,8 +31,8 @@ export interface FacetsProviderProps { } /** - * The Facets component is a wrapper component around {@link Filters} that updates facet options - * when a child filter is updated. + * The FacetsProvider component is a wrapper component around {@link Filters} that updates facet + * options when a child filter is updated. * * The representation of the facets is configured using a FACC (function as a child component) * The FACC is passed the facets data, and is intended for use with components like diff --git a/src/components/StandardFacet.tsx b/src/components/StandardFacet.tsx new file mode 100644 index 000000000..19efa9fa9 --- /dev/null +++ b/src/components/StandardFacet.tsx @@ -0,0 +1,116 @@ +import { FacetsProvider } from './Filters'; +import { FilterGroup } from './FilterGroup'; +import { Fragment } from 'react'; +import { DisplayableFacet } from '@yext/search-headless-react'; +import { FilterDivider } from './FilterDivider'; +import { BaseStandardFacetProps, BaseFacetCssClasses, BaseFacetProps } from './FacetProps'; +import { DisplayableFacetOption } from '@yext/search-core'; + +/** + * The CSS class interface for {@link StandardFacet}. + * + * @public + */ +export interface StandardFacetCssClasses extends BaseFacetCssClasses { + standardFacetContainer?: string +} + +/** + * Props for the {@link StandardFacet} component. + * + * @public + */ +export interface StandardFacetProps extends BaseFacetProps, BaseStandardFacetProps { + /** CSS classes for customizing the component styling. */ + customCssClasses?: StandardFacetCssClasses +} + +/** + * A component that displays a single standard facet. + * + * @param props - {@link StandardFacetProps} + * @param renderDivider - boolean + * whether to render a divider after the facet or not, defaults to false + * @returns A React component for the facet + * + * @public + */ +export function StandardFacet({ props, renderDivider = false }) { + const { + fieldId, + searchOnChange, + customCssClasses, + } = props; + return ( + + {facets => facets + .filter(facet => facet.fieldId === fieldId) + .map(facet => + ) + } + + ); +} + +/** + * A component that displays the content of a standard facet. + * + * @param fieldId - string + * @param label - string + * @param facet - {@link DisplayableFacet} + * @param renderDivider - boolean + * @param props - {@link BaseStandardFacetProps} + * @param transformOptions - a function to transform facet's options + * @returns A React component for the content of a standard facet + * + * @internal + */ +export function StandardFacetContent({ + fieldId, + label, + facet, + props, + renderDivider = false, + transformOptions = undefined +}: { + fieldId: string, + label: string, + facet: DisplayableFacet, + props: BaseStandardFacetProps, + renderDivider?: boolean, + transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[] +}) { + const { + customCssClasses, + showMoreLimit = 10, + showOptionCounts = true, + ...filterGroupProps + } = props; + + const options = facet.options || []; + const transformedOptions = transformOptions ? (transformOptions(options) || []) : options; + + return ( + + { + return showOptionCounts ? { ...o, resultsCount: o.count } : o; + })} + title={label || facet?.displayName} + customCssClasses={customCssClasses} + showMoreLimit={showMoreLimit} + searchable={facet?.options.length > showMoreLimit} + {...filterGroupProps} + /> + {renderDivider && } + + ); +} diff --git a/src/components/StandardFacets.tsx b/src/components/StandardFacets.tsx index afa4607ca..62d80f446 100644 --- a/src/components/StandardFacets.tsx +++ b/src/components/StandardFacets.tsx @@ -1,17 +1,15 @@ import { FacetsProvider } from './Filters'; -import { FilterGroup, FilterGroupCssClasses } from './FilterGroup'; -import { Fragment } from 'react'; import { DisplayableFacet } from '@yext/search-headless-react'; -import { FilterDivider } from './FilterDivider'; +import { BaseStandardFacetProps, BaseFacetCssClasses } from './FacetProps'; +import { StandardFacetContent } from './StandardFacet'; /** * The CSS class interface for {@link StandardFacets}. * * @public */ -export interface StandardFacetsCssClasses extends FilterGroupCssClasses { - standardFacetsContainer?: string, - divider?: string +export interface StandardFacetsCssClasses extends BaseFacetCssClasses { + standardFacetsContainer?: string } /** @@ -19,30 +17,11 @@ export interface StandardFacetsCssClasses extends FilterGroupCssClasses { * * @public */ -export interface StandardFacetsProps { - /** {@inheritDoc FilterGroupProps.collapsible} */ - collapsible?: boolean, - /** {@inheritDoc FilterGroupProps.defaultExpanded} */ - defaultExpanded?: boolean, - /** - * Whether or not a search is automatically run when a filter is selected. - * Defaults to true. - */ - searchOnChange?: boolean, +export interface StandardFacetsProps extends BaseStandardFacetProps { /** List of filter ids that should not be displayed. */ excludedFieldIds?: string[], - /** - * Whether or not to show the option counts for each filter. - * Defaults to true. - */ - showOptionCounts?: boolean, /** CSS classes for customizing the component styling. */ - customCssClasses?: StandardFacetsCssClasses, - /** - * Limit on the number of options to be displayed. - * Defaults to 10. - */ - showMoreLimit?: number + customCssClasses?: StandardFacetsCssClasses } /** @@ -62,33 +41,20 @@ export function StandardFacets(props: StandardFacetsProps) { const { searchOnChange, excludedFieldIds = [], - customCssClasses = {}, - showMoreLimit = 10, - showOptionCounts = true, - ...filterGroupProps + customCssClasses = {} } = props; return ( {facets => facets .filter(f => !excludedFieldIds.includes(f.fieldId) && isStringFacet(f)) - .map((f, i) => { - return ( - - { - return showOptionCounts ? { ...o, resultsCount: o.count } : o; - })} - title={f.displayName} - customCssClasses={customCssClasses} - showMoreLimit={showMoreLimit} - searchable={f.options.length > showMoreLimit} - {...filterGroupProps} - /> - {(i < facets.length - 1) && } - - ); - }) + .map((f, i) => + ) } ); diff --git a/src/components/index.ts b/src/components/index.ts index f12aa093e..3badb1c70 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -131,6 +131,18 @@ export { FacetsProps } from './Facets'; +export { + StandardFacet, + StandardFacetCssClasses, + StandardFacetProps +} from './StandardFacet'; + +export { + BaseFacetProps, + BaseFacetCssClasses, + BaseStandardFacetProps, +} from './FacetProps'; + export { FilterGroupProps, FilterGroupCssClasses diff --git a/tests/components/Facets.test.tsx b/tests/components/Facets.test.tsx index 46ca478c8..2783c45d3 100644 --- a/tests/components/Facets.test.tsx +++ b/tests/components/Facets.test.tsx @@ -5,8 +5,9 @@ import { } from '@yext/search-headless-react'; import { mockAnswersHooks, mockAnswersState } from '../__utils__/mocks'; import { DisplayableFacets } from '../__fixtures__/data/filters'; -import { Facets } from '../../src'; +import { Facets, StandardFacet, StandardFacetProps } from '../../src'; import { getOptionLabelText } from '../__utils__/facets'; +import { DisplayableFacetOption } from '@yext/search-core'; const mockedState: Partial = { filters: { @@ -88,4 +89,31 @@ describe('Facets', () => { expect(screen.queryByText(`${o.displayName} (${o.count})}`)).toBeNull(); }); }); + + it('Properly renders an override standard facet if present', () => { + const mockTransformOptions = (options: DisplayableFacetOption[]) => + options.map(option => ({ ...option, displayName: `my ${option.displayName}` })); + + const overrideFieldId = 'products'; + const overrideLabel = 'My Products'; + const props: StandardFacetProps = { + fieldId: overrideFieldId, + label: overrideLabel, + transformOptions: mockTransformOptions, + }; + + render( + + + ); + const regularFilter = DisplayableFacets[0]; + + expect(screen.getByText(overrideLabel)).toBeDefined(); + expect(screen.queryByText(regularFilter.displayName)).toBeNull(); + expect( + screen + .getByText( + `my ${regularFilter.options[0].displayName} (${regularFilter.options[0].count})`)) + .toBeDefined(); + }); }); \ No newline at end of file diff --git a/tests/components/StandardFacet.stories.tsx b/tests/components/StandardFacet.stories.tsx new file mode 100644 index 000000000..e3315bce3 --- /dev/null +++ b/tests/components/StandardFacet.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, Story } from '@storybook/react'; +import { Facets, StandardFacetProps, StandardFacet } from '../../src'; + +const meta: ComponentMeta = { + title: 'StandardFacet', + component: StandardFacet +}; +export default meta; + +export const Primary: Story = (args) => { + return ( + + + + ); +}; \ No newline at end of file From 806c474acafe8ccab56c4352c235b7d7e456c977 Mon Sep 17 00:00:00 2001 From: Emily Zhang Date: Thu, 11 May 2023 14:53:48 -0400 Subject: [PATCH 2/3] Move searchOnChange to Facets level so that FacetsProvider can be moved into Facets --- docs/search-ui-react.basefacetcssclasses.md | 21 --- docs/search-ui-react.basefacetprops.md | 22 --- ...basestandardfacetprops.customcssclasses.md | 13 -- .../search-ui-react.basestandardfacetprops.md | 25 ---- docs/search-ui-react.facetprops.md | 15 ++ docs/search-ui-react.facets.md | 2 +- ...arch-ui-react.facetscssclasses.divider.md} | 4 +- docs/search-ui-react.facetscssclasses.md | 1 + docs/search-ui-react.facetsprops.children.md | 18 +++ ...h-ui-react.facetsprops.customcssclasses.md | 13 ++ docs/search-ui-react.facetsprops.md | 17 ++- ...ch-ui-react.facetsprops.searchonchange.md} | 4 +- docs/search-ui-react.md | 9 +- docs/search-ui-react.standardfacet.md | 13 +- ...search-ui-react.standardfacetcssclasses.md | 21 --- ...dfacetcssclasses.standardfacetcontainer.md | 11 -- ...i-react.standardfacetprops.collapsible.md} | 4 +- ...act.standardfacetprops.customcssclasses.md | 2 +- ...act.standardfacetprops.defaultexpanded.md} | 4 +- ...ch-ui-react.standardfacetprops.fieldid.md} | 4 +- ...arch-ui-react.standardfacetprops.label.md} | 4 +- docs/search-ui-react.standardfacetprops.md | 12 +- ...react.standardfacetprops.showmorelimit.md} | 4 +- ...ct.standardfacetprops.showoptioncounts.md} | 4 +- ...ct.standardfacetprops.transformoptions.md} | 4 +- docs/search-ui-react.standardfacets.md | 5 + ...-react.standardfacetscssclasses.divider.md | 11 ++ ...earch-ui-react.standardfacetscssclasses.md | 10 +- ...i-react.standardfacetsprops.collapsible.md | 13 ++ ...act.standardfacetsprops.defaultexpanded.md | 13 ++ docs/search-ui-react.standardfacetsprops.md | 13 +- ...eact.standardfacetsprops.searchonchange.md | 13 ++ ...react.standardfacetsprops.showmorelimit.md | 13 ++ ...ct.standardfacetsprops.showoptioncounts.md | 13 ++ etc/search-ui-react.api.md | 77 +++++------ src/components/FacetProps.tsx | 60 ++++---- src/components/Facets.tsx | 128 +++++++++++++----- src/components/StandardFacet.tsx | 116 ---------------- src/components/StandardFacetContent.tsx | 39 ++++++ src/components/StandardFacets.tsx | 73 +++++++--- src/components/index.ts | 14 +- src/utils/filterutils.tsx | 7 + tests/components/Facets.test.tsx | 4 +- tests/components/StandardFacet.stories.tsx | 4 +- 44 files changed, 462 insertions(+), 415 deletions(-) delete mode 100644 docs/search-ui-react.basefacetcssclasses.md delete mode 100644 docs/search-ui-react.basefacetprops.md delete mode 100644 docs/search-ui-react.basestandardfacetprops.customcssclasses.md delete mode 100644 docs/search-ui-react.basestandardfacetprops.md create mode 100644 docs/search-ui-react.facetprops.md rename docs/{search-ui-react.basefacetcssclasses.divider.md => search-ui-react.facetscssclasses.divider.md} (51%) create mode 100644 docs/search-ui-react.facetsprops.children.md create mode 100644 docs/search-ui-react.facetsprops.customcssclasses.md rename docs/{search-ui-react.basestandardfacetprops.searchonchange.md => search-ui-react.facetsprops.searchonchange.md} (57%) delete mode 100644 docs/search-ui-react.standardfacetcssclasses.md delete mode 100644 docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md rename docs/{search-ui-react.basestandardfacetprops.collapsible.md => search-ui-react.standardfacetprops.collapsible.md} (55%) rename docs/{search-ui-react.basestandardfacetprops.defaultexpanded.md => search-ui-react.standardfacetprops.defaultexpanded.md} (57%) rename docs/{search-ui-react.basefacetprops.fieldid.md => search-ui-react.standardfacetprops.fieldid.md} (56%) rename docs/{search-ui-react.basefacetprops.label.md => search-ui-react.standardfacetprops.label.md} (60%) rename docs/{search-ui-react.basestandardfacetprops.showmorelimit.md => search-ui-react.standardfacetprops.showmorelimit.md} (55%) rename docs/{search-ui-react.basestandardfacetprops.showoptioncounts.md => search-ui-react.standardfacetprops.showoptioncounts.md} (55%) rename docs/{search-ui-react.basefacetprops.transformoptions.md => search-ui-react.standardfacetprops.transformoptions.md} (59%) create mode 100644 docs/search-ui-react.standardfacetscssclasses.divider.md create mode 100644 docs/search-ui-react.standardfacetsprops.collapsible.md create mode 100644 docs/search-ui-react.standardfacetsprops.defaultexpanded.md create mode 100644 docs/search-ui-react.standardfacetsprops.searchonchange.md create mode 100644 docs/search-ui-react.standardfacetsprops.showmorelimit.md create mode 100644 docs/search-ui-react.standardfacetsprops.showoptioncounts.md delete mode 100644 src/components/StandardFacet.tsx create mode 100644 src/components/StandardFacetContent.tsx diff --git a/docs/search-ui-react.basefacetcssclasses.md b/docs/search-ui-react.basefacetcssclasses.md deleted file mode 100644 index dbdd95588..000000000 --- a/docs/search-ui-react.basefacetcssclasses.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) - -## BaseFacetCssClasses interface - -The base CSS class interface for a single facet component. - -Signature: - -```typescript -export interface BaseFacetCssClasses extends FilterGroupCssClasses -``` -Extends: [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [divider?](./search-ui-react.basefacetcssclasses.divider.md) | string | (Optional) | - diff --git a/docs/search-ui-react.basefacetprops.md b/docs/search-ui-react.basefacetprops.md deleted file mode 100644 index 8d600762b..000000000 --- a/docs/search-ui-react.basefacetprops.md +++ /dev/null @@ -1,22 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) - -## BaseFacetProps interface - -Base props for a single facet component. - -Signature: - -```typescript -export interface BaseFacetProps -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [fieldId](./search-ui-react.basefacetprops.fieldid.md) | string | The fieldId corresponding to the facet | -| [label?](./search-ui-react.basefacetprops.label.md) | string | (Optional) The label of the facet. Defaults to facet's displayName if not provided. | -| [transformOptions?](./search-ui-react.basefacetprops.transformoptions.md) | (options: DisplayableFacetOption\[\]) => DisplayableFacetOption\[\] | (Optional) A function to transform facet's options. | - diff --git a/docs/search-ui-react.basestandardfacetprops.customcssclasses.md b/docs/search-ui-react.basestandardfacetprops.customcssclasses.md deleted file mode 100644 index ec11e38c9..000000000 --- a/docs/search-ui-react.basestandardfacetprops.customcssclasses.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [customCssClasses](./search-ui-react.basestandardfacetprops.customcssclasses.md) - -## BaseStandardFacetProps.customCssClasses property - -CSS classes for customizing the component styling. - -Signature: - -```typescript -customCssClasses?: BaseFacetCssClasses; -``` diff --git a/docs/search-ui-react.basestandardfacetprops.md b/docs/search-ui-react.basestandardfacetprops.md deleted file mode 100644 index 5ba3653f2..000000000 --- a/docs/search-ui-react.basestandardfacetprops.md +++ /dev/null @@ -1,25 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) - -## BaseStandardFacetProps interface - -Props for a standard facet. - -Signature: - -```typescript -export interface BaseStandardFacetProps -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [collapsible?](./search-ui-react.basestandardfacetprops.collapsible.md) | boolean | (Optional) Whether or not the filter is collapsible. Defaults to true. | -| [customCssClasses?](./search-ui-react.basestandardfacetprops.customcssclasses.md) | [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) | (Optional) CSS classes for customizing the component styling. | -| [defaultExpanded?](./search-ui-react.basestandardfacetprops.defaultexpanded.md) | boolean | (Optional) If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. | -| [searchOnChange?](./search-ui-react.basestandardfacetprops.searchonchange.md) | boolean | (Optional) Whether or not a search is automatically run when a filter is selected. Defaults to true. | -| [showMoreLimit?](./search-ui-react.basestandardfacetprops.showmorelimit.md) | number | (Optional) Limit on the number of options to be displayed. Defaults to 10. | -| [showOptionCounts?](./search-ui-react.basestandardfacetprops.showoptioncounts.md) | boolean | (Optional) Whether or not to show the option counts for each filter. Defaults to true. | - diff --git a/docs/search-ui-react.facetprops.md b/docs/search-ui-react.facetprops.md new file mode 100644 index 000000000..cea2942ba --- /dev/null +++ b/docs/search-ui-react.facetprops.md @@ -0,0 +1,15 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetProps](./search-ui-react.facetprops.md) + +## FacetProps type + +Props for a single facet component. + +Signature: + +```typescript +export declare type FacetProps = StandardFacetProps; +``` +References: [StandardFacetProps](./search-ui-react.standardfacetprops.md) + diff --git a/docs/search-ui-react.facets.md b/docs/search-ui-react.facets.md index e4ca9912b..299d0c122 100644 --- a/docs/search-ui-react.facets.md +++ b/docs/search-ui-react.facets.md @@ -28,5 +28,5 @@ A React component for facets This component is a quick way of getting facets on the page, and it will render standard facets, numerical facets, and hierarchical facets. The [StandardFacets()](./search-ui-react.standardfacets.md), [NumericalFacets()](./search-ui-react.numericalfacets.md), and [HierarchicalFacets()](./search-ui-react.hierarchicalfacets.md) components can be used instead for more control over facet configuration. -To override a single facet, use [StandardFacet()](./search-ui-react.standardfacet.md) and set the field id on overriddenFieldIds. +To override a single facet, use [StandardFacet()](./search-ui-react.standardfacet.md). diff --git a/docs/search-ui-react.basefacetcssclasses.divider.md b/docs/search-ui-react.facetscssclasses.divider.md similarity index 51% rename from docs/search-ui-react.basefacetcssclasses.divider.md rename to docs/search-ui-react.facetscssclasses.divider.md index 2e657efec..7a478a5f7 100644 --- a/docs/search-ui-react.basefacetcssclasses.divider.md +++ b/docs/search-ui-react.facetscssclasses.divider.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) > [divider](./search-ui-react.basefacetcssclasses.divider.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsCssClasses](./search-ui-react.facetscssclasses.md) > [divider](./search-ui-react.facetscssclasses.divider.md) -## BaseFacetCssClasses.divider property +## FacetsCssClasses.divider property Signature: diff --git a/docs/search-ui-react.facetscssclasses.md b/docs/search-ui-react.facetscssclasses.md index 04c2b7fbf..2aebb472b 100644 --- a/docs/search-ui-react.facetscssclasses.md +++ b/docs/search-ui-react.facetscssclasses.md @@ -16,5 +16,6 @@ export interface FacetsCssClasses | Property | Type | Description | | --- | --- | --- | +| [divider?](./search-ui-react.facetscssclasses.divider.md) | string | (Optional) | | [facetsContainer?](./search-ui-react.facetscssclasses.facetscontainer.md) | string | (Optional) | diff --git a/docs/search-ui-react.facetsprops.children.md b/docs/search-ui-react.facetsprops.children.md new file mode 100644 index 000000000..77f1227ec --- /dev/null +++ b/docs/search-ui-react.facetsprops.children.md @@ -0,0 +1,18 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) > [children](./search-ui-react.facetsprops.children.md) + +## FacetsProps.children property + +The custom facet components that will override the default rendering. + +Signature: + +```typescript +children?: ReactElement[] | ReactElement | undefined | null; +``` + +## Remarks + +Supported components include [StandardFacet()](./search-ui-react.standardfacet.md). + diff --git a/docs/search-ui-react.facetsprops.customcssclasses.md b/docs/search-ui-react.facetsprops.customcssclasses.md new file mode 100644 index 000000000..67d9622f6 --- /dev/null +++ b/docs/search-ui-react.facetsprops.customcssclasses.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) > [customCssClasses](./search-ui-react.facetsprops.customcssclasses.md) + +## FacetsProps.customCssClasses property + +CSS classes for customizing the component styling. + +Signature: + +```typescript +customCssClasses?: FacetsCssClasses; +``` diff --git a/docs/search-ui-react.facetsprops.md b/docs/search-ui-react.facetsprops.md index d97650f13..f9adc94d9 100644 --- a/docs/search-ui-react.facetsprops.md +++ b/docs/search-ui-react.facetsprops.md @@ -2,18 +2,21 @@ [Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) -## FacetsProps type +## FacetsProps interface Props for the [Facets()](./search-ui-react.facets.md) component. Signature: ```typescript -export declare type FacetsProps = PropsWithChildren<{ - overriddenFieldIds?: string[]; - customCssClasses?: FacetsCssClasses; - children?: ReactNode; -}>; +export interface FacetsProps ``` -References: [FacetsCssClasses](./search-ui-react.facetscssclasses.md) + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [children?](./search-ui-react.facetsprops.children.md) | ReactElement\[\] \| ReactElement \| undefined \| null | (Optional) The custom facet components that will override the default rendering. | +| [customCssClasses?](./search-ui-react.facetsprops.customcssclasses.md) | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | (Optional) CSS classes for customizing the component styling. | +| [searchOnChange?](./search-ui-react.facetsprops.searchonchange.md) | boolean | (Optional) Whether or not a search is automatically run when a filter is selected. Defaults to true. | diff --git a/docs/search-ui-react.basestandardfacetprops.searchonchange.md b/docs/search-ui-react.facetsprops.searchonchange.md similarity index 57% rename from docs/search-ui-react.basestandardfacetprops.searchonchange.md rename to docs/search-ui-react.facetsprops.searchonchange.md index 1af9b11d0..90c0cb05e 100644 --- a/docs/search-ui-react.basestandardfacetprops.searchonchange.md +++ b/docs/search-ui-react.facetsprops.searchonchange.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [searchOnChange](./search-ui-react.basestandardfacetprops.searchonchange.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) > [searchOnChange](./search-ui-react.facetsprops.searchonchange.md) -## BaseStandardFacetProps.searchOnChange property +## FacetsProps.searchOnChange property Whether or not a search is automatically run when a filter is selected. Defaults to true. diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md index 3b9310526..26bc33e2f 100644 --- a/docs/search-ui-react.md +++ b/docs/search-ui-react.md @@ -33,7 +33,7 @@ | [SearchBar({ placeholder, geolocationOptions, hideRecentSearches, visualAutocompleteConfig, showVerticalLinks, onSelectVerticalLink, verticalKeyToLabel, recentSearchesLimit, customCssClasses, onSearch })](./search-ui-react.searchbar.md) | Renders a SearchBar that is hooked up with an InputDropdown component. | | [SpellCheck({ customCssClasses, onClick })](./search-ui-react.spellcheck.md) | Renders a suggested query if the Search API provides one. | | [StandardCard(props)](./search-ui-react.standardcard.md) | This Component renders the base result card. | -| [StandardFacet({ props, renderDivider })](./search-ui-react.standardfacet.md) | A component that displays a single standard facet. | +| [StandardFacet(props)](./search-ui-react.standardfacet.md) | A component that displays a single standard facet. Use this to override the default rendering. | | [StandardFacets(props)](./search-ui-react.standardfacets.md) | A component that displays simple facets applicable to the current vertical search. | | [StandardSection(props)](./search-ui-react.standardsection.md) | A component that displays all the results for a vertical using a standard section template. | | [StaticFilters(props)](./search-ui-react.staticfilters.md) | A component that displays a group of user-configured field value filters that will be applied to the current vertical search. | @@ -57,15 +57,13 @@ | [ApplyFiltersButtonCssClasses](./search-ui-react.applyfiltersbuttoncssclasses.md) | The CSS class interface for [ApplyFiltersButtonProps](./search-ui-react.applyfiltersbuttonprops.md). | | [ApplyFiltersButtonProps](./search-ui-react.applyfiltersbuttonprops.md) | Props for [ApplyFiltersButton()](./search-ui-react.applyfiltersbutton.md) | | [AutocompleteResultCssClasses](./search-ui-react.autocompleteresultcssclasses.md) | The CSS class interface for the Autocomplete Result. | -| [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) | The base CSS class interface for a single facet component. | -| [BaseFacetProps](./search-ui-react.basefacetprops.md) | Base props for a single facet component. | -| [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) | Props for a standard facet. | | [CardProps](./search-ui-react.cardprops.md) | The props provided to every [CardComponent](./search-ui-react.cardcomponent.md). | | [Coordinate](./search-ui-react.coordinate.md) | Coordinate use to represent the result's location on a map. | | [CtaData](./search-ui-react.ctadata.md) | The shape of a StandardCard CTA field's data. | | [DirectAnswerCssClasses](./search-ui-react.directanswercssclasses.md) | The CSS class interface for [DirectAnswer()](./search-ui-react.directanswer.md). | | [DirectAnswerProps](./search-ui-react.directanswerprops.md) | Props for [DirectAnswer()](./search-ui-react.directanswer.md). | | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | The CSS class interface for [Facets()](./search-ui-react.facets.md). | +| [FacetsProps](./search-ui-react.facetsprops.md) | Props for the [Facets()](./search-ui-react.facets.md) component. | | [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) | The CSS class interface for FilterGroup. | | [FilterGroupProps](./search-ui-react.filtergroupprops.md) | Props for the FilterGroup component. | | [FilterOptionConfig](./search-ui-react.filteroptionconfig.md) | The configuration data for a field value filter option. | @@ -97,7 +95,6 @@ | [StandardCardCssClasses](./search-ui-react.standardcardcssclasses.md) | The CSS class interface used for the StandardCardDisplay. | | [StandardCardData](./search-ui-react.standardcarddata.md) | The data used by the [StandardCard()](./search-ui-react.standardcard.md) and taken from the original Result. | | [StandardCardProps](./search-ui-react.standardcardprops.md) | Props for a StandardCard. | -| [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) | The CSS class interface for [StandardFacet()](./search-ui-react.standardfacet.md). | | [StandardFacetProps](./search-ui-react.standardfacetprops.md) | Props for the [StandardFacet()](./search-ui-react.standardfacet.md) component. | | [StandardFacetsCssClasses](./search-ui-react.standardfacetscssclasses.md) | The CSS class interface for [StandardFacets()](./search-ui-react.standardfacets.md). | | [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) | Props for the [StandardFacets()](./search-ui-react.standardfacets.md) component. | @@ -134,7 +131,7 @@ | [CoordinateGetter](./search-ui-react.coordinategetter.md) | A function use to derive a result's coordinate. | | [DefaultRawDataType](./search-ui-react.defaultrawdatatype.md) | The default type for "rawData" field of type Result. | | [DropdownItemProps](./search-ui-react.dropdownitemprops.md) | Props for the [DropdownItem()](./search-ui-react.dropdownitem.md). | -| [FacetsProps](./search-ui-react.facetsprops.md) | Props for the [Facets()](./search-ui-react.facets.md) component. | +| [FacetProps](./search-ui-react.facetprops.md) | Props for a single facet component. | | [FeedbackType](./search-ui-react.feedbacktype.md) | Analytics event types for quality feedback. | | [FocusedItemData](./search-ui-react.focuseditemdata.md) | The data associated with the currently focused item. | | [OnDragHandler](./search-ui-react.ondraghandler.md) | A function which is called when user drag the map. | diff --git a/docs/search-ui-react.standardfacet.md b/docs/search-ui-react.standardfacet.md index ddcde9b87..6592863d3 100644 --- a/docs/search-ui-react.standardfacet.md +++ b/docs/search-ui-react.standardfacet.md @@ -4,26 +4,23 @@ ## StandardFacet() function -A component that displays a single standard facet. +A component that displays a single standard facet. Use this to override the default rendering. Signature: ```typescript -export declare function StandardFacet({ props, renderDivider }: { - props: any; - renderDivider?: boolean | undefined; -}): JSX.Element; +export declare function StandardFacet(props: StandardFacetProps): null; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| { props, renderDivider } | { props: any; renderDivider?: boolean \| undefined; } | | +| props | [StandardFacetProps](./search-ui-react.standardfacetprops.md) | [StandardFacetProps](./search-ui-react.standardfacetprops.md) | Returns: -JSX.Element +null -A React component for the facet +ReactElement diff --git a/docs/search-ui-react.standardfacetcssclasses.md b/docs/search-ui-react.standardfacetcssclasses.md deleted file mode 100644 index 9c4ee9709..000000000 --- a/docs/search-ui-react.standardfacetcssclasses.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) - -## StandardFacetCssClasses interface - -The CSS class interface for [StandardFacet()](./search-ui-react.standardfacet.md). - -Signature: - -```typescript -export interface StandardFacetCssClasses extends BaseFacetCssClasses -``` -Extends: [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| [standardFacetContainer?](./search-ui-react.standardfacetcssclasses.standardfacetcontainer.md) | string | (Optional) | - diff --git a/docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md b/docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md deleted file mode 100644 index 052ed4da5..000000000 --- a/docs/search-ui-react.standardfacetcssclasses.standardfacetcontainer.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) > [standardFacetContainer](./search-ui-react.standardfacetcssclasses.standardfacetcontainer.md) - -## StandardFacetCssClasses.standardFacetContainer property - -Signature: - -```typescript -standardFacetContainer?: string; -``` diff --git a/docs/search-ui-react.basestandardfacetprops.collapsible.md b/docs/search-ui-react.standardfacetprops.collapsible.md similarity index 55% rename from docs/search-ui-react.basestandardfacetprops.collapsible.md rename to docs/search-ui-react.standardfacetprops.collapsible.md index 86c34cc05..82508d336 100644 --- a/docs/search-ui-react.basestandardfacetprops.collapsible.md +++ b/docs/search-ui-react.standardfacetprops.collapsible.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [collapsible](./search-ui-react.basestandardfacetprops.collapsible.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [collapsible](./search-ui-react.standardfacetprops.collapsible.md) -## BaseStandardFacetProps.collapsible property +## StandardFacetProps.collapsible property Whether or not the filter is collapsible. Defaults to true. diff --git a/docs/search-ui-react.standardfacetprops.customcssclasses.md b/docs/search-ui-react.standardfacetprops.customcssclasses.md index 0f8ed33c2..0c8758dcd 100644 --- a/docs/search-ui-react.standardfacetprops.customcssclasses.md +++ b/docs/search-ui-react.standardfacetprops.customcssclasses.md @@ -9,5 +9,5 @@ CSS classes for customizing the component styling. Signature: ```typescript -customCssClasses?: StandardFacetCssClasses; +customCssClasses?: FilterGroupCssClasses; ``` diff --git a/docs/search-ui-react.basestandardfacetprops.defaultexpanded.md b/docs/search-ui-react.standardfacetprops.defaultexpanded.md similarity index 57% rename from docs/search-ui-react.basestandardfacetprops.defaultexpanded.md rename to docs/search-ui-react.standardfacetprops.defaultexpanded.md index f1d98c786..c8d2e25d6 100644 --- a/docs/search-ui-react.basestandardfacetprops.defaultexpanded.md +++ b/docs/search-ui-react.standardfacetprops.defaultexpanded.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [defaultExpanded](./search-ui-react.basestandardfacetprops.defaultexpanded.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [defaultExpanded](./search-ui-react.standardfacetprops.defaultexpanded.md) -## BaseStandardFacetProps.defaultExpanded property +## StandardFacetProps.defaultExpanded property If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. diff --git a/docs/search-ui-react.basefacetprops.fieldid.md b/docs/search-ui-react.standardfacetprops.fieldid.md similarity index 56% rename from docs/search-ui-react.basefacetprops.fieldid.md rename to docs/search-ui-react.standardfacetprops.fieldid.md index 1c6a60c21..73096426d 100644 --- a/docs/search-ui-react.basefacetprops.fieldid.md +++ b/docs/search-ui-react.standardfacetprops.fieldid.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) > [fieldId](./search-ui-react.basefacetprops.fieldid.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [fieldId](./search-ui-react.standardfacetprops.fieldid.md) -## BaseFacetProps.fieldId property +## StandardFacetProps.fieldId property The fieldId corresponding to the facet diff --git a/docs/search-ui-react.basefacetprops.label.md b/docs/search-ui-react.standardfacetprops.label.md similarity index 60% rename from docs/search-ui-react.basefacetprops.label.md rename to docs/search-ui-react.standardfacetprops.label.md index 1c51d6a6f..a1e0c7a0f 100644 --- a/docs/search-ui-react.basefacetprops.label.md +++ b/docs/search-ui-react.standardfacetprops.label.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) > [label](./search-ui-react.basefacetprops.label.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [label](./search-ui-react.standardfacetprops.label.md) -## BaseFacetProps.label property +## StandardFacetProps.label property The label of the facet. Defaults to facet's displayName if not provided. diff --git a/docs/search-ui-react.standardfacetprops.md b/docs/search-ui-react.standardfacetprops.md index 6de7c9f6a..62e93d797 100644 --- a/docs/search-ui-react.standardfacetprops.md +++ b/docs/search-ui-react.standardfacetprops.md @@ -9,13 +9,19 @@ Props for the [StandardFacet()](./search-ui-react.standardfacet.md) component. Signature: ```typescript -export interface StandardFacetProps extends BaseFacetProps, BaseStandardFacetProps +export interface StandardFacetProps ``` -Extends: [BaseFacetProps](./search-ui-react.basefacetprops.md), [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) ## Properties | Property | Type | Description | | --- | --- | --- | -| [customCssClasses?](./search-ui-react.standardfacetprops.customcssclasses.md) | [StandardFacetCssClasses](./search-ui-react.standardfacetcssclasses.md) | (Optional) CSS classes for customizing the component styling. | +| [collapsible?](./search-ui-react.standardfacetprops.collapsible.md) | boolean | (Optional) Whether or not the filter is collapsible. Defaults to true. | +| [customCssClasses?](./search-ui-react.standardfacetprops.customcssclasses.md) | [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) | (Optional) CSS classes for customizing the component styling. | +| [defaultExpanded?](./search-ui-react.standardfacetprops.defaultexpanded.md) | boolean | (Optional) If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. | +| [fieldId](./search-ui-react.standardfacetprops.fieldid.md) | string | The fieldId corresponding to the facet | +| [label?](./search-ui-react.standardfacetprops.label.md) | string | (Optional) The label of the facet. Defaults to facet's displayName if not provided. | +| [showMoreLimit?](./search-ui-react.standardfacetprops.showmorelimit.md) | number | (Optional) Limit on the number of options to be displayed. Defaults to 10. | +| [showOptionCounts?](./search-ui-react.standardfacetprops.showoptioncounts.md) | boolean | (Optional) Whether or not to show the option counts for each filter. Defaults to true. | +| [transformOptions?](./search-ui-react.standardfacetprops.transformoptions.md) | (options: DisplayableFacetOption\[\]) => DisplayableFacetOption\[\] | (Optional) A function to transform facet's options. | diff --git a/docs/search-ui-react.basestandardfacetprops.showmorelimit.md b/docs/search-ui-react.standardfacetprops.showmorelimit.md similarity index 55% rename from docs/search-ui-react.basestandardfacetprops.showmorelimit.md rename to docs/search-ui-react.standardfacetprops.showmorelimit.md index 9b98a6c9d..40dae1672 100644 --- a/docs/search-ui-react.basestandardfacetprops.showmorelimit.md +++ b/docs/search-ui-react.standardfacetprops.showmorelimit.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [showMoreLimit](./search-ui-react.basestandardfacetprops.showmorelimit.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [showMoreLimit](./search-ui-react.standardfacetprops.showmorelimit.md) -## BaseStandardFacetProps.showMoreLimit property +## StandardFacetProps.showMoreLimit property Limit on the number of options to be displayed. Defaults to 10. diff --git a/docs/search-ui-react.basestandardfacetprops.showoptioncounts.md b/docs/search-ui-react.standardfacetprops.showoptioncounts.md similarity index 55% rename from docs/search-ui-react.basestandardfacetprops.showoptioncounts.md rename to docs/search-ui-react.standardfacetprops.showoptioncounts.md index 87e0d2012..a449f9916 100644 --- a/docs/search-ui-react.basestandardfacetprops.showoptioncounts.md +++ b/docs/search-ui-react.standardfacetprops.showoptioncounts.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) > [showOptionCounts](./search-ui-react.basestandardfacetprops.showoptioncounts.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [showOptionCounts](./search-ui-react.standardfacetprops.showoptioncounts.md) -## BaseStandardFacetProps.showOptionCounts property +## StandardFacetProps.showOptionCounts property Whether or not to show the option counts for each filter. Defaults to true. diff --git a/docs/search-ui-react.basefacetprops.transformoptions.md b/docs/search-ui-react.standardfacetprops.transformoptions.md similarity index 59% rename from docs/search-ui-react.basefacetprops.transformoptions.md rename to docs/search-ui-react.standardfacetprops.transformoptions.md index 2e5ec2a45..fb174ecb3 100644 --- a/docs/search-ui-react.basefacetprops.transformoptions.md +++ b/docs/search-ui-react.standardfacetprops.transformoptions.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [BaseFacetProps](./search-ui-react.basefacetprops.md) > [transformOptions](./search-ui-react.basefacetprops.transformoptions.md) +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetProps](./search-ui-react.standardfacetprops.md) > [transformOptions](./search-ui-react.standardfacetprops.transformoptions.md) -## BaseFacetProps.transformOptions property +## StandardFacetProps.transformOptions property A function to transform facet's options. diff --git a/docs/search-ui-react.standardfacets.md b/docs/search-ui-react.standardfacets.md index f786896b3..ae2d5ce08 100644 --- a/docs/search-ui-react.standardfacets.md +++ b/docs/search-ui-react.standardfacets.md @@ -4,6 +4,11 @@ ## StandardFacets() function +> Warning: This API is now obsolete. +> +> Use [Facets()](./search-ui-react.facets.md) instead. +> + A component that displays simple facets applicable to the current vertical search. Signature: diff --git a/docs/search-ui-react.standardfacetscssclasses.divider.md b/docs/search-ui-react.standardfacetscssclasses.divider.md new file mode 100644 index 000000000..061b1d9c8 --- /dev/null +++ b/docs/search-ui-react.standardfacetscssclasses.divider.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsCssClasses](./search-ui-react.standardfacetscssclasses.md) > [divider](./search-ui-react.standardfacetscssclasses.divider.md) + +## StandardFacetsCssClasses.divider property + +Signature: + +```typescript +divider?: string; +``` diff --git a/docs/search-ui-react.standardfacetscssclasses.md b/docs/search-ui-react.standardfacetscssclasses.md index 9b1b6c785..06f87d59f 100644 --- a/docs/search-ui-react.standardfacetscssclasses.md +++ b/docs/search-ui-react.standardfacetscssclasses.md @@ -4,18 +4,24 @@ ## StandardFacetsCssClasses interface +> Warning: This API is now obsolete. +> +> Use [Facets()](./search-ui-react.facets.md) instead. +> + The CSS class interface for [StandardFacets()](./search-ui-react.standardfacets.md). Signature: ```typescript -export interface StandardFacetsCssClasses extends BaseFacetCssClasses +export interface StandardFacetsCssClasses extends FilterGroupCssClasses ``` -Extends: [BaseFacetCssClasses](./search-ui-react.basefacetcssclasses.md) +Extends: [FilterGroupCssClasses](./search-ui-react.filtergroupcssclasses.md) ## Properties | Property | Type | Description | | --- | --- | --- | +| [divider?](./search-ui-react.standardfacetscssclasses.divider.md) | string | (Optional) | | [standardFacetsContainer?](./search-ui-react.standardfacetscssclasses.standardfacetscontainer.md) | string | (Optional) | diff --git a/docs/search-ui-react.standardfacetsprops.collapsible.md b/docs/search-ui-react.standardfacetsprops.collapsible.md new file mode 100644 index 000000000..318d68c7e --- /dev/null +++ b/docs/search-ui-react.standardfacetsprops.collapsible.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [collapsible](./search-ui-react.standardfacetsprops.collapsible.md) + +## StandardFacetsProps.collapsible property + +Whether or not the filter is collapsible. Defaults to true. + +Signature: + +```typescript +collapsible?: boolean; +``` diff --git a/docs/search-ui-react.standardfacetsprops.defaultexpanded.md b/docs/search-ui-react.standardfacetsprops.defaultexpanded.md new file mode 100644 index 000000000..35e5de393 --- /dev/null +++ b/docs/search-ui-react.standardfacetsprops.defaultexpanded.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [defaultExpanded](./search-ui-react.standardfacetsprops.defaultexpanded.md) + +## StandardFacetsProps.defaultExpanded property + +If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. + +Signature: + +```typescript +defaultExpanded?: boolean; +``` diff --git a/docs/search-ui-react.standardfacetsprops.md b/docs/search-ui-react.standardfacetsprops.md index b131daa0a..903e12f43 100644 --- a/docs/search-ui-react.standardfacetsprops.md +++ b/docs/search-ui-react.standardfacetsprops.md @@ -4,19 +4,28 @@ ## StandardFacetsProps interface +> Warning: This API is now obsolete. +> +> Use [Facets()](./search-ui-react.facets.md) instead. +> + Props for the [StandardFacets()](./search-ui-react.standardfacets.md) component. Signature: ```typescript -export interface StandardFacetsProps extends BaseStandardFacetProps +export interface StandardFacetsProps ``` -Extends: [BaseStandardFacetProps](./search-ui-react.basestandardfacetprops.md) ## Properties | Property | Type | Description | | --- | --- | --- | +| [collapsible?](./search-ui-react.standardfacetsprops.collapsible.md) | boolean | (Optional) Whether or not the filter is collapsible. Defaults to true. | | [customCssClasses?](./search-ui-react.standardfacetsprops.customcssclasses.md) | [StandardFacetsCssClasses](./search-ui-react.standardfacetscssclasses.md) | (Optional) CSS classes for customizing the component styling. | +| [defaultExpanded?](./search-ui-react.standardfacetsprops.defaultexpanded.md) | boolean | (Optional) If the filter group is collapsible, whether or not it should start out expanded. Defaults to true. | | [excludedFieldIds?](./search-ui-react.standardfacetsprops.excludedfieldids.md) | string\[\] | (Optional) List of filter ids that should not be displayed. | +| [searchOnChange?](./search-ui-react.standardfacetsprops.searchonchange.md) | boolean | (Optional) Whether or not a search is automatically run when a filter is selected. Defaults to true. | +| [showMoreLimit?](./search-ui-react.standardfacetsprops.showmorelimit.md) | number | (Optional) Limit on the number of options to be displayed. Defaults to 10. | +| [showOptionCounts?](./search-ui-react.standardfacetsprops.showoptioncounts.md) | boolean | (Optional) Whether or not to show the option counts for each filter. Defaults to true. | diff --git a/docs/search-ui-react.standardfacetsprops.searchonchange.md b/docs/search-ui-react.standardfacetsprops.searchonchange.md new file mode 100644 index 000000000..1da216ddd --- /dev/null +++ b/docs/search-ui-react.standardfacetsprops.searchonchange.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [searchOnChange](./search-ui-react.standardfacetsprops.searchonchange.md) + +## StandardFacetsProps.searchOnChange property + +Whether or not a search is automatically run when a filter is selected. Defaults to true. + +Signature: + +```typescript +searchOnChange?: boolean; +``` diff --git a/docs/search-ui-react.standardfacetsprops.showmorelimit.md b/docs/search-ui-react.standardfacetsprops.showmorelimit.md new file mode 100644 index 000000000..d2686a663 --- /dev/null +++ b/docs/search-ui-react.standardfacetsprops.showmorelimit.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [showMoreLimit](./search-ui-react.standardfacetsprops.showmorelimit.md) + +## StandardFacetsProps.showMoreLimit property + +Limit on the number of options to be displayed. Defaults to 10. + +Signature: + +```typescript +showMoreLimit?: number; +``` diff --git a/docs/search-ui-react.standardfacetsprops.showoptioncounts.md b/docs/search-ui-react.standardfacetsprops.showoptioncounts.md new file mode 100644 index 000000000..92420e0f1 --- /dev/null +++ b/docs/search-ui-react.standardfacetsprops.showoptioncounts.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [StandardFacetsProps](./search-ui-react.standardfacetsprops.md) > [showOptionCounts](./search-ui-react.standardfacetsprops.showoptioncounts.md) + +## StandardFacetsProps.showOptionCounts property + +Whether or not to show the option counts for each filter. Defaults to true. + +Signature: + +```typescript +showOptionCounts?: boolean; +``` diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index 3f3c0ffb4..7fb08c2bc 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -22,7 +22,7 @@ import { Matcher } from '@yext/search-headless-react'; import { NumberRangeValue } from '@yext/search-headless-react'; import { PropsWithChildren } from 'react'; import { QuerySource } from '@yext/search-headless-react'; -import { ReactNode } from 'react'; +import { ReactElement } from 'react'; import { Result } from '@yext/search-headless-react'; import { SearchActions } from '@yext/search-headless-react'; import { SearchHeadless } from '@yext/search-headless-react'; @@ -117,29 +117,6 @@ export interface AutocompleteResultCssClasses { option?: string; } -// @public -export interface BaseFacetCssClasses extends FilterGroupCssClasses { - // (undocumented) - divider?: string; -} - -// @public -export interface BaseFacetProps { - fieldId: string; - label?: string; - transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[]; -} - -// @public -export interface BaseStandardFacetProps { - collapsible?: boolean; - customCssClasses?: BaseFacetCssClasses; - defaultExpanded?: boolean; - searchOnChange?: boolean; - showMoreLimit?: number; - showOptionCounts?: boolean; -} - // @public export type CardAnalyticsDataType = DirectAnswer_2 | Result; @@ -225,21 +202,26 @@ export function executeAutocomplete(searchActions: SearchActions): Promise; +// @public +export type FacetProps = StandardFacetProps; + // @public export function Facets(props: FacetsProps): JSX.Element; // @public export interface FacetsCssClasses { + // (undocumented) + divider?: string; // (undocumented) facetsContainer?: string; } // @public -export type FacetsProps = PropsWithChildren<{ - overriddenFieldIds?: string[]; +export interface FacetsProps { + children?: ReactElement[] | ReactElement | undefined | null; customCssClasses?: FacetsCssClasses; - children?: ReactNode; -}>; + searchOnChange?: boolean; +} // @public export type FeedbackType = 'THUMBS_UP' | 'THUMBS_DOWN'; @@ -709,35 +691,40 @@ export interface StandardCardProps extends CardProps } // @public -export function StandardFacet({ props, renderDivider }: { - props: any; - renderDivider?: boolean | undefined; -}): JSX.Element; +export function StandardFacet(props: StandardFacetProps): null; // @public -export interface StandardFacetCssClasses extends BaseFacetCssClasses { - // (undocumented) - standardFacetContainer?: string; -} - -// @public -export interface StandardFacetProps extends BaseFacetProps, BaseStandardFacetProps { - customCssClasses?: StandardFacetCssClasses; +export interface StandardFacetProps { + collapsible?: boolean; + customCssClasses?: FilterGroupCssClasses; + defaultExpanded?: boolean; + fieldId: string; + label?: string; + showMoreLimit?: number; + showOptionCounts?: boolean; + transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[]; } -// @public +// @public @deprecated export function StandardFacets(props: StandardFacetsProps): JSX.Element; -// @public -export interface StandardFacetsCssClasses extends BaseFacetCssClasses { +// @public @deprecated +export interface StandardFacetsCssClasses extends FilterGroupCssClasses { + // (undocumented) + divider?: string; // (undocumented) standardFacetsContainer?: string; } -// @public -export interface StandardFacetsProps extends BaseStandardFacetProps { +// @public @deprecated +export interface StandardFacetsProps { + collapsible?: boolean; customCssClasses?: StandardFacetsCssClasses; + defaultExpanded?: boolean; excludedFieldIds?: string[]; + searchOnChange?: boolean; + showMoreLimit?: number; + showOptionCounts?: boolean; } // @public diff --git a/src/components/FacetProps.tsx b/src/components/FacetProps.tsx index 17e400ea5..7f7654a68 100644 --- a/src/components/FacetProps.tsx +++ b/src/components/FacetProps.tsx @@ -1,54 +1,62 @@ import { DisplayableFacetOption } from '@yext/search-core'; import { FilterGroupCssClasses } from './FilterGroup'; +import { ReactElement } from 'react'; /** - * The base CSS class interface for a single facet component. + * The CSS class interface for {@link Facets}. * * @public */ -export interface BaseFacetCssClasses extends FilterGroupCssClasses { +export interface FacetsCssClasses { + facetsContainer?: string, divider?: string } /** - * Base props for a single facet component. + * Props for the {@link Facets} component. * * @public */ -export interface BaseFacetProps { - /** The fieldId corresponding to the facet */ - fieldId: string, - /** The label of the facet. Defaults to facet's displayName if not provided. */ - label?: string, - /** A function to transform facet's options. */ - transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[] +export interface FacetsProps { + /** Whether or not a search is automatically run when a filter is selected. Defaults to true. */ + searchOnChange?: boolean, + /** CSS classes for customizing the component styling. */ + customCssClasses?: FacetsCssClasses, + /** The custom facet components that will override the default rendering. + * + * @remarks + * Supported components include {@link StandardFacet}. + */ + children?: ReactElement[] | ReactElement | undefined | null } /** - * Props for a standard facet. + * Props for the {@link StandardFacet} component. * * @public */ -export interface BaseStandardFacetProps { +export interface StandardFacetProps { + /** The fieldId corresponding to the facet */ + fieldId: string, + /** The label of the facet. Defaults to facet's displayName if not provided. */ + label?: string, + /** A function to transform facet's options. */ + transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[], /** {@inheritDoc FilterGroupProps.collapsible} */ collapsible?: boolean, /** {@inheritDoc FilterGroupProps.defaultExpanded} */ defaultExpanded?: boolean, - /** - * Whether or not a search is automatically run when a filter is selected. - * Defaults to true. - */ - searchOnChange?: boolean, - /** - * Whether or not to show the option counts for each filter. - * Defaults to true. - */ + /** Whether or not to show the option counts for each filter. Defaults to true. */ showOptionCounts?: boolean, - /** - * Limit on the number of options to be displayed. - * Defaults to 10. - */ + /** Limit on the number of options to be displayed. Defaults to 10. */ showMoreLimit?: number, /** CSS classes for customizing the component styling. */ - customCssClasses?: BaseFacetCssClasses + customCssClasses?: FilterGroupCssClasses } + +/** + * Props for a single facet component. + * + * @public + */ +export type FacetProps = StandardFacetProps; diff --git a/src/components/Facets.tsx b/src/components/Facets.tsx index cde51f7dc..d03ebf5bb 100644 --- a/src/components/Facets.tsx +++ b/src/components/Facets.tsx @@ -1,34 +1,22 @@ -import { StandardFacets } from './StandardFacets'; +import { FacetsProvider } from './Filters'; +import { StandardFacetContent } from './StandardFacetContent'; +import { + FacetProps, + FacetsProps, + StandardFacetProps +} from './FacetProps'; +import { isNumericalFacet, isStringFacet } from '../utils/filterutils'; +import { FilterDivider } from './FilterDivider'; +import { Fragment, ReactElement } from 'react'; import { NumericalFacets } from './NumericalFacets'; -import { PropsWithChildren, ReactNode } from 'react'; -/** - * The CSS class interface for {@link Facets}. - * - * @public - */ -export interface FacetsCssClasses { - facetsContainer?: string +/** @internal */ +enum FacetType { + STANDARD = 'STANDARD', + NUMERICAL = 'NUMERICAL', + HIERARCHICAL = 'HIERARCHICAL' } -/** - * Props for the {@link Facets} component. - * - * @public - */ -export type FacetsProps = PropsWithChildren<{ - /** List of filter ids that should be overridden. */ - overriddenFieldIds?: string[], - /** CSS classes for customizing the component styling. */ - customCssClasses?: FacetsCssClasses, - /** The custom facet components that will override the default rendering. - * - * @remarks - * Supported components include {@link StandardFacet}. - */ - children?: ReactNode -}>; - /** * A component that displays all facets applicable to the current vertical search. * @@ -38,7 +26,7 @@ export type FacetsProps = PropsWithChildren<{ * and {@link HierarchicalFacets} components can be used instead for more control over facet * configuration. * - * To override a single facet, use {@link StandardFacet} and set the field id on overriddenFieldIds. + * To override a single facet, use {@link StandardFacet}. * * @param props - {@link FacetsProps} * @returns A React component for facets @@ -46,13 +34,87 @@ export type FacetsProps = PropsWithChildren<{ * @public */ export function Facets(props: FacetsProps) { - const { overriddenFieldIds, children, customCssClasses = {} } = props; + const { searchOnChange, children, customCssClasses = {} } = props; + + const fieldIdToCustomFacetProps = new Map(); + if (children) { + (Array.isArray(children) ? children : [children]) + .forEach(child => fieldIdToCustomFacetProps.set(child.props.fieldId, child)); + } return ( -
- {children} - +
+ + {facets => facets + .map((facet, i) => { + let facetType: FacetType = FacetType.STANDARD; + let facetProps: FacetProps = { + fieldId: facet.fieldId, + label: facet.displayName, + }; + if (fieldIdToCustomFacetProps.has(facet.fieldId)) { + const customFacetElement: ReactElement = fieldIdToCustomFacetProps.get(facet.fieldId); + facetProps = customFacetElement.props; + facetType = getFacetTypeFromReactElementType( + (typeof customFacetElement.type === 'function') ? customFacetElement.type.name : ''); + } else { + if (isStringFacet(facet)) { + facetType = FacetType.STANDARD; + } else if (isNumericalFacet(facet)) { + facetType = FacetType.NUMERICAL; + } + } + + let facetComponent: ReactElement; + switch (facetType) { + case FacetType.NUMERICAL: + facetComponent =
; + break; + case FacetType.STANDARD: + // fall through + default: + facetComponent = ( + ); + } + + return ( + + {facetComponent} + {(i < facets.length - 1) && } + + ); + }) + } +
); -} \ No newline at end of file +} + +/** + * A component that displays a single standard facet. Use this to override the default rendering. + * + * @param props - {@link StandardFacetProps} + * @returns ReactElement + * @public + */ +export function StandardFacet(props: StandardFacetProps) { return null; } + +/** + * Returns the type of the facet based on the props. + * @param elementType - string + * @returns {@link FacetType} + * + * @internal + */ +export function getFacetTypeFromReactElementType(elementType: string) { + switch (elementType) { + case StandardFacet.toString(): + // fall through + default: + return FacetType.STANDARD; + } +} diff --git a/src/components/StandardFacet.tsx b/src/components/StandardFacet.tsx deleted file mode 100644 index 19efa9fa9..000000000 --- a/src/components/StandardFacet.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { FacetsProvider } from './Filters'; -import { FilterGroup } from './FilterGroup'; -import { Fragment } from 'react'; -import { DisplayableFacet } from '@yext/search-headless-react'; -import { FilterDivider } from './FilterDivider'; -import { BaseStandardFacetProps, BaseFacetCssClasses, BaseFacetProps } from './FacetProps'; -import { DisplayableFacetOption } from '@yext/search-core'; - -/** - * The CSS class interface for {@link StandardFacet}. - * - * @public - */ -export interface StandardFacetCssClasses extends BaseFacetCssClasses { - standardFacetContainer?: string -} - -/** - * Props for the {@link StandardFacet} component. - * - * @public - */ -export interface StandardFacetProps extends BaseFacetProps, BaseStandardFacetProps { - /** CSS classes for customizing the component styling. */ - customCssClasses?: StandardFacetCssClasses -} - -/** - * A component that displays a single standard facet. - * - * @param props - {@link StandardFacetProps} - * @param renderDivider - boolean - * whether to render a divider after the facet or not, defaults to false - * @returns A React component for the facet - * - * @public - */ -export function StandardFacet({ props, renderDivider = false }) { - const { - fieldId, - searchOnChange, - customCssClasses, - } = props; - return ( - - {facets => facets - .filter(facet => facet.fieldId === fieldId) - .map(facet => - ) - } - - ); -} - -/** - * A component that displays the content of a standard facet. - * - * @param fieldId - string - * @param label - string - * @param facet - {@link DisplayableFacet} - * @param renderDivider - boolean - * @param props - {@link BaseStandardFacetProps} - * @param transformOptions - a function to transform facet's options - * @returns A React component for the content of a standard facet - * - * @internal - */ -export function StandardFacetContent({ - fieldId, - label, - facet, - props, - renderDivider = false, - transformOptions = undefined -}: { - fieldId: string, - label: string, - facet: DisplayableFacet, - props: BaseStandardFacetProps, - renderDivider?: boolean, - transformOptions?: (options: DisplayableFacetOption[]) => DisplayableFacetOption[] -}) { - const { - customCssClasses, - showMoreLimit = 10, - showOptionCounts = true, - ...filterGroupProps - } = props; - - const options = facet.options || []; - const transformedOptions = transformOptions ? (transformOptions(options) || []) : options; - - return ( - - { - return showOptionCounts ? { ...o, resultsCount: o.count } : o; - })} - title={label || facet?.displayName} - customCssClasses={customCssClasses} - showMoreLimit={showMoreLimit} - searchable={facet?.options.length > showMoreLimit} - {...filterGroupProps} - /> - {renderDivider && } - - ); -} diff --git a/src/components/StandardFacetContent.tsx b/src/components/StandardFacetContent.tsx new file mode 100644 index 000000000..a1155a7c7 --- /dev/null +++ b/src/components/StandardFacetContent.tsx @@ -0,0 +1,39 @@ +import { FilterGroup } from './FilterGroup'; +import { DisplayableFacet } from '@yext/search-headless-react'; +import { StandardFacetProps } from './FacetProps'; + +/** + * A component that displays the content of a standard facet. + * + * @param props - props to render the component + * @returns A React component for the content of a standard facet + * + * @internal + */ +export function StandardFacetContent({ + fieldId, + customCssClasses, + transformOptions, + facet, + label = '', + showMoreLimit = 10, + showOptionCounts = true, + ...filterGroupProps +}: StandardFacetProps & { facet: DisplayableFacet }) { + const options = facet.options || []; + const transformedOptions = transformOptions ? (transformOptions(options) || []) : options; + + return ( + { + return showOptionCounts ? { ...o, resultsCount: o.count } : o; + })} + title={label} + customCssClasses={customCssClasses} + showMoreLimit={showMoreLimit} + searchable={facet?.options.length > showMoreLimit} + {...filterGroupProps} + /> + ); +} diff --git a/src/components/StandardFacets.tsx b/src/components/StandardFacets.tsx index 62d80f446..3b2ade707 100644 --- a/src/components/StandardFacets.tsx +++ b/src/components/StandardFacets.tsx @@ -1,27 +1,50 @@ import { FacetsProvider } from './Filters'; -import { DisplayableFacet } from '@yext/search-headless-react'; -import { BaseStandardFacetProps, BaseFacetCssClasses } from './FacetProps'; -import { StandardFacetContent } from './StandardFacet'; +import { FilterGroup, FilterGroupCssClasses } from './FilterGroup'; +import { Fragment } from 'react'; +import { FilterDivider } from './FilterDivider'; +import { isStringFacet } from '../utils/filterutils'; /** * The CSS class interface for {@link StandardFacets}. * + * @deprecated Use {@link Facets} instead. * @public */ -export interface StandardFacetsCssClasses extends BaseFacetCssClasses { - standardFacetsContainer?: string +export interface StandardFacetsCssClasses extends FilterGroupCssClasses { + standardFacetsContainer?: string, + divider?: string } /** * Props for the {@link StandardFacets} component. * + * @deprecated Use {@link Facets} instead. * @public */ -export interface StandardFacetsProps extends BaseStandardFacetProps { +export interface StandardFacetsProps { + /** {@inheritDoc FilterGroupProps.collapsible} */ + collapsible?: boolean, + /** {@inheritDoc FilterGroupProps.defaultExpanded} */ + defaultExpanded?: boolean, + /** + * Whether or not a search is automatically run when a filter is selected. + * Defaults to true. + */ + searchOnChange?: boolean, /** List of filter ids that should not be displayed. */ excludedFieldIds?: string[], + /** + * Whether or not to show the option counts for each filter. + * Defaults to true. + */ + showOptionCounts?: boolean, /** CSS classes for customizing the component styling. */ - customCssClasses?: StandardFacetsCssClasses + customCssClasses?: StandardFacetsCssClasses, + /** + * Limit on the number of options to be displayed. + * Defaults to 10. + */ + showMoreLimit?: number } /** @@ -35,31 +58,41 @@ export interface StandardFacetsProps extends BaseStandardFacetProps { * @param props - {@link StandardFacetsProps} * @returns A React component for facets * + * @deprecated Use {@link Facets} instead. * @public */ export function StandardFacets(props: StandardFacetsProps) { const { searchOnChange, excludedFieldIds = [], - customCssClasses = {} + customCssClasses = {}, + showMoreLimit = 10, + showOptionCounts = true, + ...filterGroupProps } = props; return ( {facets => facets .filter(f => !excludedFieldIds.includes(f.fieldId) && isStringFacet(f)) - .map((f, i) => - ) + .map((f, i) => { + return ( + + { + return showOptionCounts ? { ...o, resultsCount: o.count } : o; + })} + title={f.displayName} + customCssClasses={customCssClasses} + showMoreLimit={showMoreLimit} + searchable={f.options.length > showMoreLimit} + {...filterGroupProps} + /> + {(i < facets.length - 1) && } + + ); + }) } ); } - -function isStringFacet(facet: DisplayableFacet): boolean { - return facet.options.length > 0 && typeof facet.options[0].value === 'string'; -} \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index 3badb1c70..ba055d85a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -127,20 +127,14 @@ export { export { Facets, - FacetsCssClasses, - FacetsProps + StandardFacet } from './Facets'; export { - StandardFacet, - StandardFacetCssClasses, + FacetsCssClasses, + FacetsProps, + FacetProps, StandardFacetProps -} from './StandardFacet'; - -export { - BaseFacetProps, - BaseFacetCssClasses, - BaseStandardFacetProps, } from './FacetProps'; export { diff --git a/src/utils/filterutils.tsx b/src/utils/filterutils.tsx index 7347bf8f5..0f746e42c 100644 --- a/src/utils/filterutils.tsx +++ b/src/utils/filterutils.tsx @@ -17,6 +17,13 @@ export function isNumberRangeValue(obj: unknown): obj is NumberRangeValue { return typeof obj === 'object' && !!obj && ('start' in obj || 'end' in obj); } +/** + * Checks if the facet is a string facet with string options. + */ +export function isStringFacet(facet: DisplayableFacet): boolean { + return facet.options.length > 0 && typeof facet.options[0].value === 'string'; +} + /** * Checks if the facet is a numerical facet with number range filter options. */ diff --git a/tests/components/Facets.test.tsx b/tests/components/Facets.test.tsx index 2783c45d3..e1b70fde3 100644 --- a/tests/components/Facets.test.tsx +++ b/tests/components/Facets.test.tsx @@ -103,8 +103,8 @@ describe('Facets', () => { }; render( - - + + ); const regularFilter = DisplayableFacets[0]; diff --git a/tests/components/StandardFacet.stories.tsx b/tests/components/StandardFacet.stories.tsx index e3315bce3..cbb3255c8 100644 --- a/tests/components/StandardFacet.stories.tsx +++ b/tests/components/StandardFacet.stories.tsx @@ -9,8 +9,8 @@ export default meta; export const Primary: Story = (args) => { return ( - - + + ); }; \ No newline at end of file From d44553699333ead9a8da99ec3e1da613aec0e870 Mon Sep 17 00:00:00 2001 From: Emily Zhang Date: Fri, 12 May 2023 12:27:03 -0400 Subject: [PATCH 3/3] update imports, add excludedFieldIds --- .../search-ui-react.facetsprops.excludedfieldids.md | 13 +++++++++++++ docs/search-ui-react.facetsprops.md | 1 + etc/search-ui-react.api.md | 3 ++- src/components/FacetProps.tsx | 4 +++- test-site/package-lock.json | 8 ++++---- 5 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 docs/search-ui-react.facetsprops.excludedfieldids.md diff --git a/docs/search-ui-react.facetsprops.excludedfieldids.md b/docs/search-ui-react.facetsprops.excludedfieldids.md new file mode 100644 index 000000000..ea330c1e5 --- /dev/null +++ b/docs/search-ui-react.facetsprops.excludedfieldids.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [FacetsProps](./search-ui-react.facetsprops.md) > [excludedFieldIds](./search-ui-react.facetsprops.excludedfieldids.md) + +## FacetsProps.excludedFieldIds property + +List of filter ids that should not be displayed. + +Signature: + +```typescript +excludedFieldIds?: string[]; +``` diff --git a/docs/search-ui-react.facetsprops.md b/docs/search-ui-react.facetsprops.md index f9adc94d9..6a2ac75a1 100644 --- a/docs/search-ui-react.facetsprops.md +++ b/docs/search-ui-react.facetsprops.md @@ -18,5 +18,6 @@ export interface FacetsProps | --- | --- | --- | | [children?](./search-ui-react.facetsprops.children.md) | ReactElement\[\] \| ReactElement \| undefined \| null | (Optional) The custom facet components that will override the default rendering. | | [customCssClasses?](./search-ui-react.facetsprops.customcssclasses.md) | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | (Optional) CSS classes for customizing the component styling. | +| [excludedFieldIds?](./search-ui-react.facetsprops.excludedfieldids.md) | string\[\] | (Optional) List of filter ids that should not be displayed. | | [searchOnChange?](./search-ui-react.facetsprops.searchonchange.md) | boolean | (Optional) Whether or not a search is automatically run when a filter is selected. Defaults to true. | diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md index 7fb08c2bc..82b5d8ffb 100644 --- a/etc/search-ui-react.api.md +++ b/etc/search-ui-react.api.md @@ -10,7 +10,7 @@ import { AnalyticsConfig } from '@yext/analytics'; import { AnalyticsService } from '@yext/analytics'; import { AutocompleteResponse } from '@yext/search-headless-react'; import { DirectAnswer as DirectAnswer_2 } from '@yext/search-headless-react'; -import { DisplayableFacetOption } from '@yext/search-core'; +import { DisplayableFacetOption } from '@yext/search-headless-react'; import { FieldValueStaticFilter } from '@yext/search-headless-react'; import { FilterSearchResponse } from '@yext/search-headless-react'; import { HighlightedValue } from '@yext/search-headless-react'; @@ -220,6 +220,7 @@ export interface FacetsCssClasses { export interface FacetsProps { children?: ReactElement[] | ReactElement | undefined | null; customCssClasses?: FacetsCssClasses; + excludedFieldIds?: string[]; searchOnChange?: boolean; } diff --git a/src/components/FacetProps.tsx b/src/components/FacetProps.tsx index 7f7654a68..de5de039a 100644 --- a/src/components/FacetProps.tsx +++ b/src/components/FacetProps.tsx @@ -1,4 +1,4 @@ -import { DisplayableFacetOption } from '@yext/search-core'; +import { DisplayableFacetOption } from '@yext/search-headless-react'; import { FilterGroupCssClasses } from './FilterGroup'; import { ReactElement } from 'react'; @@ -22,6 +22,8 @@ export interface FacetsProps { searchOnChange?: boolean, /** CSS classes for customizing the component styling. */ customCssClasses?: FacetsCssClasses, + /** List of filter ids that should not be displayed. */ + excludedFieldIds?: string[], /** The custom facet components that will override the default rendering. * * @remarks diff --git a/test-site/package-lock.json b/test-site/package-lock.json index 762030b58..5a6e34d16 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -32,7 +32,7 @@ }, "..": { "name": "@yext/search-ui-react", - "version": "1.1.0", + "version": "1.2.0-beta.0", "license": "BSD-3-Clause", "dependencies": { "@microsoft/api-documenter": "^7.15.3", @@ -80,7 +80,7 @@ "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.1.0", + "@yext/search-headless-react": "^2.2.0-beta.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "eslint": "^8.11.0", @@ -97,7 +97,7 @@ "typescript": "~4.5.5" }, "peerDependencies": { - "@yext/search-headless-react": "^2.1.0", + "@yext/search-headless-react": "^2.2.0-beta.0", "react": "^16.14 || ^17 || ^18", "react-dom": "^16.14 || ^17 || ^18" } @@ -20112,7 +20112,7 @@ "@typescript-eslint/parser": "^5.16.0", "@yext/analytics": "^0.2.0-beta.3", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.1.0", + "@yext/search-headless-react": "^2.2.0-beta.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "classnames": "^2.3.1",