feedback

sample-app/src/components/Navigation.tsx

@@ -34,11 +34,11 @@ interface LinkData {
 interface NavigationProps {
   links: LinkData[],
   customCssClasses?: NavigationCssClasses,
-  compositionMethod?: CompositionMethod
+  cssCompositionMethod?: CompositionMethod
 }
 
-export default function Navigation({ links, customCssClasses, compositionMethod }: NavigationProps) {
-  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, compositionMethod);
+export default function Navigation({ links, customCssClasses, cssCompositionMethod }: NavigationProps) {
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, cssCompositionMethod);
   // Close the menu when clicking the document
   const [menuOpen, setMenuOpen] = useState<boolean>(false);
   const menuRef = useRef<HTMLButtonElement>(null);

sample-app/src/components/UniversalResults.tsx

@@ -32,7 +32,7 @@ interface UniversalResultsProps {
   appliedFiltersConfig?: AppliedFiltersConfig,
   verticalConfigs: Record<string, VerticalConfig>,
   customCssClasses?: UniversalResultsCssClasses,
-  compositionMethod?: CompositionMethod
+  cssCompositionMethod?: CompositionMethod
 }
 
 /**
@@ -42,9 +42,9 @@ export default function UniversalResults({
   verticalConfigs,
   appliedFiltersConfig,
   customCssClasses,
-  compositionMethod
+  cssCompositionMethod
 }: UniversalResultsProps): JSX.Element | null {
-  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, compositionMethod)
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, cssCompositionMethod)
   const resultsFromAllVerticals = useAnswersState(state => state?.universal?.verticals) || [];
   const isLoading = useAnswersState(state => state.searchStatus.isLoading);
 

sample-app/src/components/VerticalResults.tsx

@@ -17,7 +17,7 @@ interface VerticalResultsDisplayProps {
   isLoading?: boolean,
   results: Result[],
   customCssClasses?: VerticalResultsCssClasses,
-  compositionMethod?: CompositionMethod
+  cssCompositionMethod?: CompositionMethod
 }
 
 /**
@@ -27,8 +27,8 @@ interface VerticalResultsDisplayProps {
  *                to be used.
  */
 export function VerticalResultsDisplay(props: VerticalResultsDisplayProps): JSX.Element | null {
-  const { CardComponent, results, cardConfig = {}, isLoading = false, customCssClasses, compositionMethod } = props;
-  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, compositionMethod);
+  const { CardComponent, results, cardConfig = {}, isLoading = false, customCssClasses, cssCompositionMethod } = props;
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, cssCompositionMethod);
 
   if (results.length === 0) {
     return null;
@@ -61,7 +61,7 @@ interface VerticalResultsProps {
   cardConfig?: CardConfigTypes,
   displayAllResults?: boolean,
   customCssClasses?: VerticalResultsCssClasses,
-  compositionMethod?: CompositionMethod
+  cssCompositionMethod?: CompositionMethod
 }
 
 export default function VerticalResults(props: VerticalResultsProps): JSX.Element | null {

sample-app/src/components/cards/StandardCard.tsx

@@ -8,7 +8,7 @@ export interface StandardCardConfig {
 export interface StandardCardProps extends CardProps {
   configuration: StandardCardConfig,
   customCssClasses?: StandardCardCssClasses,
-  compositionMethod?: CompositionMethod
+  cssCompositionMethod?: CompositionMethod
 }
 
 export interface StandardCardCssClasses {
@@ -41,47 +41,44 @@ interface CtaData {
   linkType: string
 }
 
+function isCtaData(data: unknown): data is CtaData {
+  if (typeof data !== 'object' || data === null) {
+    return false;
+  }
+  const ctaData = data as CtaData;
+  const expectedKeys = ['label', 'link', 'linkType'];
+  return expectedKeys.every(key => {
+    return key in ctaData;
+  });
+}
+
 /**
  * This Component renders the base result card.
  * 
  * @param props - An object containing the result itself.
  */
 export function StandardCard(props: StandardCardProps): JSX.Element {
-  const { configuration, result, customCssClasses, compositionMethod } = props;
-  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, compositionMethod);
+  const { configuration, result, customCssClasses, cssCompositionMethod } = props;
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, cssCompositionMethod);
 
-  const cta1 = result.rawData.c_primaryCTA as CtaData;
-  const cta2 = result.rawData.c_secondaryCTA as CtaData;
+  const cta1 = isCtaData(result.rawData.c_primaryCTA) ? result.rawData.c_primaryCTA : undefined;
+  const cta2 = isCtaData(result.rawData.c_secondaryCTA) ? result.rawData.c_secondaryCTA : undefined;
 
   // TODO (cea2aj) We need to handle the various linkType so these CTAs are clickable
   function renderCTAs(cta1?: CtaData, cta2?: CtaData) {
     return (<>
       {(cta1 ?? cta2) && 
         <div className={cssClasses.ctaContainer}>
-          {cta1 && renderFirstCTA(cta1)}
-          {cta2 && renderSecondCTA(cta2)}
+          {cta1 && <button className={cssClasses.cta1}>{cta1.label}</button>}
+          {cta2 && <button className={cssClasses.cta2}>{cta2.label}</button>}
         </div>
       }
     </>);
   }
 
-  function renderFirstCTA({ label, link, linkType }: CtaData) {
-    return (
-      <button className={cssClasses.cta1}>{label}</button>
-    )
-  }
-
-  function renderSecondCTA({ label, link, linkType }: CtaData) {
+  function renderOrdinal(index: number) {
     return (
-      <button className={cssClasses.cta2}>{label}</button>
-    )
-  }
-
-  function renderOrdinal(ordinal: number) {
-    return (
-      <div className={cssClasses.ordinal}>
-        {ordinal} -
-      </div>
+      <div className={cssClasses.ordinal}>{index} -</div>
     );
   }
 
@@ -97,9 +94,10 @@ export function StandardCard(props: StandardCardProps): JSX.Element {
       </div>
       {(result.description ?? cta1 ?? cta2) &&
         <div className={cssClasses.body}>
+          {result.description &&
           <div className={cssClasses.descriptionContainer}> 
             <span>{result.description}</span>
-          </div>
+          </div>}
           {renderCTAs(cta1, cta2)}
         </div>
       }

sample-app/src/hooks/useComposedCssClasses.tsx

@@ -25,13 +25,13 @@ export type CompositionMethod = 'merge' | 'replace' | 'assign';
  * A react hook which combines a component's built-in CSS classes with custom CSS classes.
  * @param builtInClasses The component's built-in css classes
  * @param customClasses The custom classes to combine with the built-in ones
- * @param compositionMethod The method of combining the built-in classes with the custom classes
+ * @param cssCompositionMethod The method of combining the built-in classes with the custom classes
  * @returns The composed CSS classes
  */
 export function useComposedCssClasses<ClassInterface> (
   builtInClasses: ClassInterface,
   customClasses?: ClassInterface,
-  compositionMethod?: CompositionMethod
+  cssCompositionMethod?: CompositionMethod
 ): ClassInterface | Theme {
   return useMemo(() => {
     if (!isThemeObject(customClasses)) {
@@ -40,22 +40,22 @@ export function useComposedCssClasses<ClassInterface> (
     if (!isThemeObject(builtInClasses)) {
       return customClasses ?? {};
     }
-    const compose = getCssModulesCompose(compositionMethod);
+    const compose = getCssModulesCompose(cssCompositionMethod);
     return composeTheme([{ theme: builtInClasses }, { theme: customClasses, compose }]);
-  }, [builtInClasses, customClasses, compositionMethod]);
+  }, [builtInClasses, customClasses, cssCompositionMethod]);
 }
 
 /**
  * Transforms the CompositionMethod types to the Compose types of the css-modules-theme library
- * @param compositionMethod The compositionMethod method
+ * @param cssCompositionMethod The cssCompositionMethod method
  * @returns The css-modules-theme Compose type
  */
-function getCssModulesCompose(compositionMethod: CompositionMethod = 'merge'): Compose {
+function getCssModulesCompose(cssCompositionMethod: CompositionMethod = 'merge'): Compose {
   return {
     replace: Compose.Replace,
     assign: Compose.Assign,
     merge: Compose.Merge
-  }[compositionMethod];
+  }[cssCompositionMethod];
 }
 
 /**

sample-app/src/sections/SectionHeader.tsx

@@ -26,14 +26,14 @@ interface SectionHeaderConfig {
   resultsCountConfig?: ResultsCountConfig,
   appliedFiltersConfig?: DecoratedAppliedFiltersConfig,
   customCssClasses?: SectionHeaderCssClasses,
-  compositionMethod?: CompositionMethod,
+  cssCompositionMethod?: CompositionMethod,
   verticalKey: string,
   viewAllButton?: boolean
 }
 
 export default function SectionHeader(props: SectionHeaderConfig): JSX.Element {
-  const { label, resultsCountConfig, verticalKey, viewAllButton = false, appliedFiltersConfig, customCssClasses, compositionMethod } = props;
-  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, compositionMethod)
+  const { label, resultsCountConfig, verticalKey, viewAllButton = false, appliedFiltersConfig, customCssClasses, cssCompositionMethod } = props;
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, cssCompositionMethod)
   const latestQuery = useAnswersState(state => state.query.mostRecentSearch); 
   return (
     <div className={cssClasses.sectionHeaderContainer}>