Create Facets component

docs/search-ui-react.facets.md

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [Facets](./search-ui-react.facets.md)
+
+## Facets() function
+
+A component that displays all facets applicable to the current vertical search.
+
+<b>Signature:</b>
+
+```typescript
+export declare function Facets(props: FacetsProps): JSX.Element;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | [FacetsProps](./search-ui-react.facetsprops.md) | [FacetsProps](./search-ui-react.facetsprops.md) |
+
+<b>Returns:</b>
+
+JSX.Element
+
+A React component for facets
+
+## Remarks
+
+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.
+

docs/search-ui-react.facetscssclasses.facetscontainer.md

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

docs/search-ui-react.facetscssclasses.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsCssClasses](./search-ui-react.facetscssclasses.md)
+
+## FacetsCssClasses interface
+
+The CSS class interface for [Facets()](./search-ui-react.facets.md)<!-- -->.
+
+<b>Signature:</b>
+
+```typescript
+export interface FacetsCssClasses 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [facetsContainer?](./search-ui-react.facetscssclasses.facetscontainer.md) | string | <i>(Optional)</i> |
+

docs/search-ui-react.facetsprops.customcssclasses.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md) &gt; [customCssClasses](./search-ui-react.facetsprops.customcssclasses.md)
+
+## FacetsProps.customCssClasses property
+
+CSS classes for customizing the component styling.
+
+<b>Signature:</b>
+
+```typescript
+customCssClasses?: FacetsCssClasses;
+```

docs/search-ui-react.facetsprops.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FacetsProps](./search-ui-react.facetsprops.md)
+
+## FacetsProps interface
+
+Props for the [Facets()](./search-ui-react.facets.md) component.
+
+<b>Signature:</b>
+
+```typescript
+export interface FacetsProps 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [customCssClasses?](./search-ui-react.facetsprops.customcssclasses.md) | [FacetsCssClasses](./search-ui-react.facetscssclasses.md) | <i>(Optional)</i> CSS classes for customizing the component styling. |
+

docs/search-ui-react.md

@@ -16,6 +16,7 @@
 |  [DropdownItem(\_props)](./search-ui-react.dropdownitem.md) | A wrapper component for specifying a DropdownItemWithIndex. The index will be automatically provided by the Dropdown component instance. |
 |  [executeAutocomplete(searchActions)](./search-ui-react.executeautocomplete.md) | Executes a universal/vertical autocomplete search and return the corresponding response. |
 |  [executeSearch(searchActions)](./search-ui-react.executesearch.md) | Executes a universal/vertical search. |
+|  [Facets(props)](./search-ui-react.facets.md) | A component that displays all facets applicable to the current vertical search. |
 |  [FilterDivider({ className })](./search-ui-react.filterdivider.md) | A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters. |
 |  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
 |  [Geolocation\_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, })](./search-ui-react.geolocation_2.md) | A React Component which collects location information to create a location filter and perform a new search. |
@@ -60,6 +61,8 @@
 |  [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. |

etc/search-ui-react.api.md

@@ -200,6 +200,20 @@ export function executeAutocomplete(searchActions: SearchActions): Promise<Autoc
 // @public
 export function executeSearch(searchActions: SearchActions): Promise<void>;
 
+// @public
+export function Facets(props: FacetsProps): JSX.Element;
+
+// @public
+export interface FacetsCssClasses {
+    // (undocumented)
+    facetsContainer?: string;
+}
+
+// @public
+export interface FacetsProps {
+    customCssClasses?: FacetsCssClasses;
+}
+
 // @public
 export type FeedbackType = 'THUMBS_UP' | 'THUMBS_DOWN';
 

src/components/Facets.tsx

@@ -0,0 +1,45 @@
+import { StandardFacets } from './StandardFacets';
+import { NumericalFacets } from './NumericalFacets';
+
+/**
+ * The CSS class interface for {@link Facets}.
+ *
+ * @public
+ */
+export interface FacetsCssClasses {
+  facetsContainer?: string
+}
+
+/**
+ * Props for the {@link Facets} component.
+ *
+ * @public
+ */
+export interface FacetsProps {
+  /** CSS classes for customizing the component styling. */
+  customCssClasses?: FacetsCssClasses
+}
+
+/**
+ * A component that displays all facets applicable to the current vertical search.
+ *
+ * @remarks
+ * This component is a quick way of getting facets on the page, and it will render standard facets,
+ * numerical facets, and hierarchical facets. The {@link StandardFacets}, {@link NumericalFacets},
+ * and {@link HierarchicalFacets} components can be used instead for more control over facet
+ * configuration.
+ *
+ * @param props - {@link FacetsProps}
+ * @returns A React component for facets
+ *
+ * @public
+ */
+export function Facets(props: FacetsProps) {
+  const { customCssClasses = {} } = props;
+  return (
+    <div className={customCssClasses.facetsContainer}>
+      <StandardFacets/>
+      <NumericalFacets />
+    </div>
+  );
+}

src/components/index.ts

@@ -125,6 +125,12 @@ export {
   NumericalFacetsProps
 } from './NumericalFacets';
 
+export {
+  Facets,
+  FacetsCssClasses,
+  FacetsProps
+} from './Facets';
+
 export {
   FilterGroupProps,
   FilterGroupCssClasses

test-site/src/pages/PeoplePage.tsx

@@ -55,11 +55,13 @@ export function PeoplePage() {
             title='Static Employee Department'
             filterOptions={employeeFilterConfigs}
           />
+          <FilterDivider />
           <StaticFilters
             fieldId='c_hierarchicalFacet'
             title='Static Hierarchical Facets'
             filterOptions={hierarchicalFilterConfigs}
           />
+          <FilterDivider />
           <NumericalFacets />
           <StandardFacets
             excludedFieldIds={hierarchicalFacetFieldIds}

tests/__utils__/facets.ts

@@ -0,0 +1,5 @@
+import { DisplayableFacetOption } from '@yext/search-headless-react';
+
+export function getOptionLabelText(option: DisplayableFacetOption) {
+  return `${option.displayName} (${option.count})`;
+}

tests/components/Facets.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta, Story } from '@storybook/react';
+import { SearchHeadlessContext, State } from '@yext/search-headless-react';
+import { generateMockedHeadless } from '../__fixtures__/search-headless';
+import { RecursivePartial } from '../__utils__/mocks';
+import { DisplayableFacets } from '../__fixtures__/data/filters';
+import { Facets, FacetsProps } from '../../src';
+
+const meta: ComponentMeta<typeof Facets> = {
+  title: 'Facets',
+  component: Facets
+};
+export default meta;
+
+const mockedHeadlessState: RecursivePartial<State> = {
+  filters: {
+    facets: DisplayableFacets
+  }
+};
+
+export const Primary: Story<FacetsProps> = (args) => {
+  return (
+    <SearchHeadlessContext.Provider value={generateMockedHeadless(mockedHeadlessState)}>
+      <Facets {...args} />
+    </SearchHeadlessContext.Provider>
+  );
+};

tests/components/Facets.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import {
+  Source,
+  State
+} from '@yext/search-headless-react';
+import { mockAnswersHooks, mockAnswersState } from '../__utils__/mocks';
+import { DisplayableFacets } from '../__fixtures__/data/filters';
+import { Facets } from '../../src';
+import { getOptionLabelText } from '../__utils__/facets';
+
+const mockedState: Partial<State> = {
+  filters: {
+    static: [],
+    facets: DisplayableFacets
+  },
+  vertical: {
+    verticalKey: 'vertical',
+    results: [{
+      source: Source.KnowledgeManager,
+      rawData: {}
+    }],
+    appliedQueryFilters: []
+  },
+  searchStatus: {
+    isLoading: false
+  },
+  meta: {
+    searchType: 'vertical'
+  }
+};
+
+const mockedActions = {
+  state: mockedState,
+  setOffset: jest.fn(),
+  setFacetOption: jest.fn(),
+  executeVerticalQuery: jest.fn()
+};
+
+const mockedUtils = {
+  isCloseMatch: () => true
+};
+
+jest.mock('@yext/search-headless-react');
+
+describe('Facets', () => {
+  beforeEach(() => {
+    mockAnswersHooks({ mockedState, mockedActions, mockedUtils });
+  });
+  it('Properly renders standard facets if present', () => {
+    render(<Facets/>);
+    const regularFilter = DisplayableFacets[0];
+
+    expect(screen.getByText(regularFilter.displayName)).toBeDefined();
+    regularFilter.options.forEach(o => {
+      expect(screen.getByText(getOptionLabelText(o))).toBeDefined();
+    });
+  });
+
+  it('Properly renders numerical facets if present', () => {
+    render(<Facets/>);
+    const numericalFilter = DisplayableFacets[1];
+
+    expect(screen.getByText(numericalFilter.displayName)).toBeDefined();
+    numericalFilter.options.forEach(o => {
+      expect(screen.getByText(o.displayName)).toBeDefined();
+    });
+  });
+
+  it('Does not render filters if no facets are present', () => {
+    mockAnswersState({
+      ...mockedState,
+      filters: {
+        static: [],
+        facets: []
+      }
+    });
+    render(<Facets/>);
+    const regularFilter = DisplayableFacets[0];
+    const numericalFilter = DisplayableFacets[1];
+
+    expect(screen.queryByText(numericalFilter.displayName)).toBeNull();
+    numericalFilter.options.forEach(o => {
+      expect(screen.queryByText(o.displayName)).toBeNull();
+    });
+
+    expect(screen.queryByText(regularFilter.displayName)).toBeNull();
+    regularFilter.options.forEach(o => {
+      expect(screen.queryByText(`${o.displayName} (${o.count})}`)).toBeNull();
+    });
+  });
+});

tests/components/StandardFacets.test.tsx

@@ -1,9 +1,10 @@
 import { render, screen } from '@testing-library/react';
-import { DisplayableFacetOption, FacetOption, Source, State, SearchActions } from '@yext/search-headless-react';
+import { FacetOption, Source, State, SearchActions } from '@yext/search-headless-react';
 import { mockAnswersHooks, spyOnActions } from '../__utils__/mocks';
 import userEvent from '@testing-library/user-event';
 import { DisplayableFacets } from '../__fixtures__/data/filters';
 import { StandardFacets } from '../../src/components';
+import { getOptionLabelText } from '../__utils__/facets';
 
 const mockedState: Partial<State> = {
   filters: {
@@ -157,8 +158,4 @@ function expectFacetOptionSet(
     { matcher: option.matcher, value: option.value },
     selected
   );
-}
-
-function getOptionLabelText(option: DisplayableFacetOption) {
-  return `${option.displayName} (${option.count})`;
-}
+}