support easily customizable citation card

J=CLIP-1332 TEST=auto,manual ran `npm run test` and test manually on test-site
yext · Jun 27, 2024 · 1eb42ba · 1eb42ba
1 parent a3048dc
commit 1eb42ba
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 22 deletions.
diff --git a/docs/search-ui-react.citationprops.getcitationlink.md b/docs/search-ui-react.citationprops.getcitationlink.md
@@ -7,5 +7,5 @@
 **Signature:**
 
 ```typescript
-getCitationLink?: (searchResult: Result) => string | undefined;
+getCitationLink?: (searchResult: Result) => unknown;
 ```
diff --git a/docs/search-ui-react.citationprops.getcitationsnippet.md b/docs/search-ui-react.citationprops.getcitationsnippet.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; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationSnippet](./search-ui-react.citationprops.getcitationsnippet.md)
+
+## CitationProps.getCitationSnippet property
+
+**Signature:**
+
+```typescript
+getCitationSnippet?: (searchResult: Result) => unknown;
+```
diff --git a/docs/search-ui-react.citationprops.getcitationtitle.md b/docs/search-ui-react.citationprops.getcitationtitle.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; [CitationProps](./search-ui-react.citationprops.md) &gt; [getCitationTitle](./search-ui-react.citationprops.getcitationtitle.md)
+
+## CitationProps.getCitationTitle property
+
+**Signature:**
+
+```typescript
+getCitationTitle?: (searchResult: Result) => unknown;
+```
diff --git a/docs/search-ui-react.citationprops.md b/docs/search-ui-react.citationprops.md
@@ -17,6 +17,8 @@ interface CitationProps
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [cssClasses](./search-ui-react.citationprops.cssclasses.md) |  | [GenerativeDirectAnswerCssClasses](./search-ui-react.generativedirectanswercssclasses.md) |  |
-|  [getCitationLink?](./search-ui-react.citationprops.getcitationlink.md) |  | (searchResult: Result) =&gt; string \| undefined | _(Optional)_ |
+|  [getCitationLink?](./search-ui-react.citationprops.getcitationlink.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
+|  [getCitationSnippet?](./search-ui-react.citationprops.getcitationsnippet.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
+|  [getCitationTitle?](./search-ui-react.citationprops.getcitationtitle.md) |  | (searchResult: Result) =&gt; unknown | _(Optional)_ |
 |  [searchResult](./search-ui-react.citationprops.searchresult.md) |  | Result |  |
 
diff --git a/docs/search-ui-react.generativedirectanswer.md b/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, getCitationLink }: GenerativeDirectAnswerProps): JSX.Element | null;
+declare function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet }: GenerativeDirectAnswerProps): JSX.Element | null;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
+|  { customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet } | [GenerativeDirectAnswerProps](./search-ui-react.generativedirectanswerprops.md) |  |
 
 **Returns:**
 

diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md b/docs/search-ui-react.generativedirectanswerprops.getcitationlink.md
@@ -9,5 +9,5 @@ A function which is called to get the page URL that clicking on a citation card
 **Signature:**
 
 ```typescript
-getCitationLink?: (result: Result) => string | undefined;
+getCitationLink?: (result: Result) => unknown;
 ```
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.md b/docs/search-ui-react.generativedirectanswerprops.getcitationsnippet.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; [getCitationSnippet](./search-ui-react.generativedirectanswerprops.getcitationsnippet.md)
+
+## GenerativeDirectAnswerProps.getCitationSnippet property
+
+A function which is called to get the snippet of citation card.
+
+**Signature:**
+
+```typescript
+getCitationSnippet?: (result: Result) => unknown;
+```
diff --git a/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.md b/docs/search-ui-react.generativedirectanswerprops.getcitationtitle.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; [getCitationTitle](./search-ui-react.generativedirectanswerprops.getcitationtitle.md)
+
+## GenerativeDirectAnswerProps.getCitationTitle property
+
+A function which is called to get the title of citation card.
+
+**Signature:**
+
+```typescript
+getCitationTitle?: (result: Result) => unknown;
+```
diff --git a/docs/search-ui-react.generativedirectanswerprops.md b/docs/search-ui-react.generativedirectanswerprops.md
@@ -20,5 +20,7 @@ interface GenerativeDirectAnswerProps
 |  [CitationCard?](./search-ui-react.generativedirectanswerprops.citationcard.md) |  | (props: [CitationProps](./search-ui-react.citationprops.md)<!-- -->) =&gt; JSX.Element \| null | _(Optional)_ The component for citation card |
 |  [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. |
-|  [getCitationLink?](./search-ui-react.generativedirectanswerprops.getcitationlink.md) |  | (result: Result) =&gt; string \| undefined | _(Optional)_ A function which is called to get the page URL that clicking on a citation card routes to. |
+|  [getCitationLink?](./search-ui-react.generativedirectanswerprops.getcitationlink.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the page URL that clicking on a citation card routes to. |
+|  [getCitationSnippet?](./search-ui-react.generativedirectanswerprops.getcitationsnippet.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the snippet of citation card. |
+|  [getCitationTitle?](./search-ui-react.generativedirectanswerprops.getcitationtitle.md) |  | (result: Result) =&gt; unknown | _(Optional)_ A function which is called to get the title of citation card. |
 
diff --git a/docs/search-ui-react.md b/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, getCitationLink })](./search-ui-react.generativedirectanswer.md) | Displays the AI generated answer of a generative direct answer. |
+|  [GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet })](./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. |

diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md
@@ -141,7 +141,11 @@ export interface CitationProps {
     // (undocumented)
     cssClasses: GenerativeDirectAnswerCssClasses;
     // (undocumented)
-    getCitationLink?: (searchResult: Result) => string | undefined;
+    getCitationLink?: (searchResult: Result) => unknown;
+    // (undocumented)
+    getCitationSnippet?: (searchResult: Result) => unknown;
+    // (undocumented)
+    getCitationTitle?: (searchResult: Result) => unknown;
     // (undocumented)
     searchResult: Result;
 }
@@ -323,7 +327,7 @@ export interface FilterSearchProps {
 export type FocusedItemData = Record<string, unknown>;
 
 // @public
-export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink }: GenerativeDirectAnswerProps): JSX.Element | null;
+export function GenerativeDirectAnswer({ customCssClasses, answerHeader, citationsHeader, CitationCard, getCitationLink, getCitationTitle, getCitationSnippet }: GenerativeDirectAnswerProps): JSX.Element | null;
 
 // @public
 export interface GenerativeDirectAnswerCssClasses {
@@ -351,7 +355,9 @@ export interface GenerativeDirectAnswerProps {
     CitationCard?: (props: CitationProps) => JSX.Element | null;
     citationsHeader?: string | JSX.Element;
     customCssClasses?: GenerativeDirectAnswerCssClasses;
-    getCitationLink?: (result: Result) => string | undefined;
+    getCitationLink?: (result: Result) => unknown;
+    getCitationSnippet?: (result: Result) => unknown;
+    getCitationTitle?: (result: Result) => unknown;
 }
 
 // @public

diff --git a/src/components/GenerativeDirectAnswer.tsx b/src/components/GenerativeDirectAnswer.tsx
@@ -52,7 +52,11 @@ export interface GenerativeDirectAnswerProps {
   /** The component for citation card */
   CitationCard?: (props: CitationProps) => JSX.Element | null,
   /** A function which is called to get the page URL that clicking on a citation card routes to. */
-  getCitationLink?: (result: Result) => string | undefined
+  getCitationLink?: (result: Result) => unknown,
+  /** A function which is called to get the title of citation card. */
+  getCitationTitle?: (result: Result) => unknown,
+  /** A function which is called to get the snippet of citation card. */
+  getCitationSnippet?: (result: Result) => unknown
 }
 
 /**
@@ -68,7 +72,9 @@ export function GenerativeDirectAnswer({
   answerHeader,
   citationsHeader,
   CitationCard,
-  getCitationLink
+  getCitationLink,
+  getCitationTitle,
+  getCitationSnippet
 }: GenerativeDirectAnswerProps): JSX.Element | null {
   const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
 
@@ -110,6 +116,8 @@ export function GenerativeDirectAnswer({
         searchResults={searchResults} 
         CitationCard={CitationCard}
         getCitationLink={getCitationLink}
+        getCitationTitle={getCitationTitle}
+        getCitationSnippet={getCitationSnippet}
       />
     </div>
   );
@@ -144,7 +152,9 @@ interface CitationsProps {
   searchResults: Result[],
   citationsHeader?: string | JSX.Element,
   CitationCard?: (props: CitationProps) => JSX.Element | null,
-  getCitationLink?: (result: Result) => string | undefined
+  getCitationLink?: (result: Result) => unknown,
+  getCitationTitle?: (result: Result) => unknown,
+  getCitationSnippet?: (result: Result) => unknown
 }
 
 /**
@@ -157,7 +167,9 @@ function Citations(props: CitationsProps) {
     searchResults,
     citationsHeader = `Sources (${gdaResponse.citations.length})`,
     CitationCard = Citation,
-    getCitationLink
+    getCitationLink,
+    getCitationTitle,
+    getCitationSnippet
   } = props;
   if (!gdaResponse.citations.length) {
     return null;
@@ -173,6 +185,8 @@ function Citations(props: CitationsProps) {
             searchResult={result} 
             cssClasses={cssClasses}
             getCitationLink={getCitationLink}
+            getCitationTitle={getCitationTitle}
+            getCitationSnippet={getCitationSnippet}
           />
         )
       }
@@ -196,18 +210,24 @@ function Citations(props: CitationsProps) {
 export interface CitationProps {
   searchResult: Result,
   cssClasses: GenerativeDirectAnswerCssClasses,
-  getCitationLink?: (searchResult: Result) => string | undefined
+  getCitationLink?: (searchResult: Result) => unknown,
+  getCitationTitle?: (searchResult: Result) => unknown,
+  getCitationSnippet?: (searchResult: Result) => unknown
 }
 
 function Citation(props: CitationProps) {
   const {
     searchResult,
     cssClasses,
-    getCitationLink
+    getCitationLink,
+    getCitationTitle = (searchResult: Result) => searchResult.rawData.name,
+    getCitationSnippet = (searchResult: Result) => searchResult.rawData.description
   } = props;
-  const citationLink: string | undefined = getCitationLink?.(searchResult);
-  return <a className={cssClasses.citation} href={citationLink}>
-    <div className={cssClasses.citationTitle}>{searchResult.rawData.name}</div>
-    <div className={cssClasses.citationSnippet}>{searchResult.rawData.description}</div>
+  const citationLink: unknown = getCitationLink?.(searchResult);
+  const citationTitle: unknown = getCitationTitle?.(searchResult);
+  const citationSnippet: unknown = getCitationSnippet?.(searchResult);
+  return <a className={cssClasses.citation} href={typeof citationLink === 'string' ? citationLink : undefined}>
+    <div className={cssClasses.citationTitle}>{citationTitle}</div>
+    <div className={cssClasses.citationSnippet}>{citationSnippet}</div>
   </a>;
 }
diff --git a/test-site/src/pages/UniversalPage.tsx b/test-site/src/pages/UniversalPage.tsx
@@ -89,8 +89,10 @@ export default function UniversalPage(): JSX.Element {
       <SpellCheck />
       <GenerativeDirectAnswer 
         answerHeader='A custom answer header' 
-        CitationCard={CustomCitationCard}
-        getCitationLink={searchResult => (typeof searchResult.rawData.link === 'string' ? searchResult.rawData.link : undefined)}
+        getCitationLink={searchResult => searchResult.rawData.link}
+        getCitationTitle={searchResult => `${searchResult.rawData.id} - ${searchResult.rawData.name}`}
+        getCitationSnippet={searchResult => searchResult.rawData.s_snippet}
+        // CitationCard={CustomCitationCard}
       />
       <DirectAnswer />
       <ResultsCount />