feat(experiences): add separate banner component (#6356)

packages/algolia-experiences/src/banner.tsx

@@ -0,0 +1,98 @@
+/** @jsx h */
+
+import { cx } from 'instantsearch-ui-components';
+import { connectHits } from 'instantsearch.js/es/connectors';
+import { h, render } from 'preact';
+
+import type { Banner } from 'algoliasearch-helper';
+import type {
+  ComponentProps,
+  HitsClassNames,
+} from 'instantsearch-ui-components';
+import type { HitsConnectorParams } from 'instantsearch.js/es/connectors/hits/connectHits';
+
+export type BannerWidgetParams = {
+  container: HTMLElement;
+  classNames?: BannerClassNames;
+};
+
+type BannerClassNames = Pick<
+  Partial<HitsClassNames>,
+  'bannerRoot' | 'bannerLink' | 'bannerImage'
+>;
+
+type BannerProps = ComponentProps<'aside'> & {
+  banner?: Banner;
+  classNames: BannerClassNames;
+};
+
+function DefaultBanner(props: BannerProps) {
+  if (!props.banner || !props.banner.image) {
+    return null;
+  }
+  if (!props.banner.image.urls[0].url) {
+    return null;
+  }
+  return (
+    <aside className={cx('ais-Hits-banner', props.classNames.bannerRoot)}>
+      {props.banner.link ? (
+        <a
+          className={cx('ais-Hits-banner-link', props.classNames.bannerLink)}
+          href={props.banner.link.url}
+          target={props.banner.link.target}
+        >
+          <img
+            className={cx(
+              'ais-Hits-banner-image',
+              props.classNames.bannerImage
+            )}
+            src={props.banner.image.urls[0].url}
+            alt={props.banner.image.title}
+          />
+        </a>
+      ) : (
+        <img
+          className={cx('ais-Hits-banner-image', props.classNames.bannerImage)}
+          src={props.banner.image.urls[0].url}
+          alt={props.banner.image.title}
+        />
+      )}
+    </aside>
+  );
+}
+
+function renderer({
+  container,
+  classNames,
+}: {
+  container: HTMLElement;
+  classNames: BannerClassNames;
+}) {
+  return (props: { banner?: Banner }) =>
+    render(
+      <DefaultBanner banner={props.banner} classNames={classNames} />,
+      container
+    );
+}
+
+export function banner(widgetParams: BannerWidgetParams & HitsConnectorParams) {
+  const { container, classNames = {} } = widgetParams || {};
+
+  if (!container) {
+    throw new Error('The `container` option is required.');
+  }
+
+  const specializedRenderer = renderer({
+    container,
+    classNames,
+  });
+
+  const makeWidget = connectHits(specializedRenderer, () =>
+    render(null, container)
+  );
+
+  return {
+    $$widgetType: 'ais.experiences-banner',
+    ...makeWidget({}),
+  };
+}

packages/algolia-experiences/src/render.tsx

@@ -159,6 +159,14 @@ function blockToWidget(child: Block, container: HTMLElement): Widget[] {
       .flat(1);
   }
 
+  if (child.type === 'banner') {
+    return [
+      widgets.banner({
+        container: widgetContainer,
+      }),
+    ];
+  }
+
   if (isTemplateWidget(child)) {
     // type cast is needed here because the spread adding `container` and `templates` loses the type discriminant
     const parameters = child.parameters as Parameters<
@@ -171,6 +179,7 @@ function blockToWidget(child: Block, container: HTMLElement): Widget[] {
         ...parameters,
         container: widgetContainer,
         templates: {
+          banner: () => null,
           item: (hit: any, { components }) => {
             if (!child.children.length) {
               return <code> no item template given</code>;

packages/algolia-experiences/src/types.ts

@@ -99,6 +99,9 @@ export type Block =
   | {
       type: 'column';
       children: Block[];
+    }
+  | {
+      type: 'banner';
     };
 
 export type Configuration = {

packages/algolia-experiences/src/widgets.ts

@@ -24,7 +24,10 @@ import {
   trendingItems,
 } from 'instantsearch.js/es/widgets';
 
+import { banner } from './banner';
+
 export const widgets = {
+  banner,
   'ais.breadcrumb': breadcrumb,
   'ais.clearRefinements': clearRefinements,
   'ais.configure': configure,