GDA: citations component override (#451)

Changes:
- Added `CitationsContainer` prop to `<GenerativeDirectAnswer>` to allow custom components to be passed in
- Updated test cases and test-site with new component passed through

J=CLIP-1369
TEST=manual|auto

Ran `npm run build`, `npm run test`, and `npm run wcag` and did manual testing on test-site

docs/search-ui-react.citationsprops.citationcard.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; [CitationsProps](./search-ui-react.citationsprops.md) &gt; [CitationCard](./search-ui-react.citationsprops.citationcard.md)
+
+## CitationsProps.CitationCard property
+
+The component for citation card
+
+**Signature:**
+
+```typescript
+CitationCard?: (props: CitationProps) => JSX.Element | null;
+```

docs/search-ui-react.citationsprops.citationsheader.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; [CitationsProps](./search-ui-react.citationsprops.md) &gt; [citationsHeader](./search-ui-react.citationsprops.citationsheader.md)
+
+## CitationsProps.citationsHeader property
+
+The header for the citations section generative direct answer.
+
+**Signature:**
+
+```typescript
+citationsHeader?: string | JSX.Element;
+```

docs/search-ui-react.citationsprops.cssclasses.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; [CitationsProps](./search-ui-react.citationsprops.md) &gt; [cssClasses](./search-ui-react.citationsprops.cssclasses.md)
+
+## CitationsProps.cssClasses property
+
+CSS classes for customizing the component styling.
+
+**Signature:**
+
+```typescript
+cssClasses: GenerativeDirectAnswerCssClasses;
+```

docs/search-ui-react.citationsprops.gdaresponse.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; [CitationsProps](./search-ui-react.citationsprops.md) &gt; [gdaResponse](./search-ui-react.citationsprops.gdaresponse.md)
+
+## CitationsProps.gdaResponse property
+
+Response object containing generative direct answer info.
+
+**Signature:**
+
+```typescript
+gdaResponse: GenerativeDirectAnswerResponse;
+```

docs/search-ui-react.citationsprops.md

@@ -0,0 +1,24 @@
+<!-- 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; [CitationsProps](./search-ui-react.citationsprops.md)
+
+## CitationsProps interface
+
+Props for citations component.
+
+**Signature:**
+
+```typescript
+interface CitationsProps 
+```
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [CitationCard?](./search-ui-react.citationsprops.citationcard.md) |  | (props: [CitationProps](./search-ui-react.citationprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citation card |
+|  [citationsHeader?](./search-ui-react.citationsprops.citationsheader.md) |  | string \| JSX.Element | _(Optional)_ The header for the citations section generative direct answer. |
+|  [cssClasses](./search-ui-react.citationsprops.cssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) | CSS classes for customizing the component styling. |
+|  [gdaResponse](./search-ui-react.citationsprops.gdaresponse.md) |  | GenerativeDirectAnswerResponse | Response object containing generative direct answer info. |
+|  [searchResults](./search-ui-react.citationsprops.searchresults.md) |  | Result\[\] | Returned results relevant to the users' query to be used in Citations. |
+

docs/search-ui-react.citationsprops.searchresults.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; [CitationsProps](./search-ui-react.citationsprops.md) &gt; [searchResults](./search-ui-react.citationsprops.searchresults.md)
+
+## CitationsProps.searchResults property
+
+Returned results relevant to the users' query to be used in Citations.
+
+**Signature:**
+
+```typescript
+searchResults: Result[];
+```

docs/search-ui-react.generativedirectanswer.md

@@ -9,14 +9,14 @@ Displays the AI generated answer of a generative direct answer.
 **Signature:**
 
 ```typescript
-declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null;
+declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, CitationsContainer, }: GenerativeDirectAnswerProps): JSX.Element | null;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { customCssClasses, answerHeader, citationsHeader, CitationCard, } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
+|  { customCssClasses, answerHeader, citationsHeader, CitationCard, CitationsContainer, } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
 
 **Returns:**
 

docs/search-ui-react.generativedirectanswerprops.citationscontainer.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; [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) &gt; [CitationsContainer](./search-ui-react.generativedirectanswerprops.citationscontainer.md)
+
+## GenerativeDirectAnswerProps.CitationsContainer property
+
+The component for citations container
+
+**Signature:**
+
+```typescript
+CitationsContainer?: (props: CitationsProps) => JSX.Element | null;
+```

docs/search-ui-react.generativedirectanswerprops.md

@@ -18,6 +18,7 @@ interface GenerativeDirectAnswerProps
 |  --- | --- | --- | --- |
 |  [answerHeader?](./search-ui-react.generativedirectanswerprops.answerheader.md) |  | string \| JSX.Element | _(Optional)_ The header for the answer section of the generative direct answer. |
 |  [CitationCard?](./search-ui-react.generativedirectanswerprops.citationcard.md) |  | (props: [CitationProps](./search-ui-react.citationprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citation card |
+|  [CitationsContainer?](./search-ui-react.generativedirectanswerprops.citationscontainer.md) |  | (props: [CitationsProps](./search-ui-react.citationsprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citations container |
 |  [citationsHeader?](./search-ui-react.generativedirectanswerprops.citationsheader.md) |  | string \| JSX.Element | _(Optional)_ The header for the citations section of the generative direct answer. |
 |  [customCssClasses?](./search-ui-react.generativedirectanswerprops.customcssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
 

docs/search-ui-react.md

@@ -20,7 +20,7 @@
 |  [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, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
-|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
+|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, CitationsContainer, })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
 |  [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. |
 |  [getSearchIntents(searchActions)](./search-ui-react.getsearchintents.md) | Get search intents of the current query stored in headless using autocomplete request. |
 |  [getUserLocation(geolocationOptions)](./search-ui-react.getuserlocation.md) | Retrieves user's location using navigator.geolocation API. |
@@ -64,6 +64,7 @@
 |  [AutocompleteResultCssClasses](./search-ui-react.autocompleteresultcssclasses.md) | The CSS class interface for the Autocomplete Result. |
 |  [CardProps](./search-ui-react.cardprops.md) | The props provided to every [CardComponent](./search-ui-react.cardcomponent.md)<!-- -->. |
 |  [CitationProps](./search-ui-react.citationprops.md) | Props for citation card. |
+|  [CitationsProps](./search-ui-react.citationsprops.md) | Props for citations component. |
 |  [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)<!-- -->. |

etc/search-ui-react.api.md

@@ -144,6 +144,15 @@ export interface CitationProps {
     searchResult: Result;
 }
 
+// @public
+export interface CitationsProps {
+    CitationCard?: (props: CitationProps) => JSX.Element | null;
+    citationsHeader?: string | JSX.Element;
+    cssClasses: GenerativeDirectAnswerCssClasses;
+    gdaResponse: GenerativeDirectAnswerResponse;
+    searchResults: Result[];
+}
+
 // @public
 export const ComponentsContentPath = "node_modules/@yext/search-ui-react/lib/**/*.{js,jsx}";
 
@@ -321,7 +330,7 @@ export interface FilterSearchProps {
 export type FocusedItemData = Record<string, unknown>;
 
 // @public
-export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, }: GenerativeDirectAnswerProps): JSX.Element | null;
+export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, CitationsContainer, }: GenerativeDirectAnswerProps): JSX.Element | null;
 
 // @public
 export interface GenerativeDirectAnswerCssClasses {
@@ -347,6 +356,7 @@ export interface GenerativeDirectAnswerCssClasses {
 export interface GenerativeDirectAnswerProps {
     answerHeader?: string | JSX.Element;
     CitationCard?: (props: CitationProps) => JSX.Element | null;
+    CitationsContainer?: (props: CitationsProps) => JSX.Element | null;
     citationsHeader?: string | JSX.Element;
     customCssClasses?: GenerativeDirectAnswerCssClasses;
 }