instantsearch-ui-components 0.4.0 → 0.5.0

package/dist/cjs/components/Hits.js

@@ -8,11 +8,42 @@ exports.createHitsComponent = createHitsComponent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _lib = require("../lib");
-var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent"];
+var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 // Should be imported from a shared package in the future
 
-function createHitsComponent(_ref) {
+function createDefaultBannerComponent(_ref) {
   var createElement = _ref.createElement;
+  return function DefaultBanner(_ref2) {
+    var _banner$link;
+    var classNames = _ref2.classNames,
+      banner = _ref2.banner;
+    if (!banner.image.urls[0].url) {
+      return null;
+    }
+    return createElement("aside", {
+      className: (0, _lib.cx)('ais-Hits-banner', classNames.bannerRoot)
+    }, (_banner$link = banner.link) !== null && _banner$link !== void 0 && _banner$link.url ? createElement("a", {
+      className: (0, _lib.cx)('ais-Hits-banner-link', classNames.bannerLink),
+      href: banner.link.url,
+      target: banner.link.target
+    }, createElement("img", {
+      className: (0, _lib.cx)('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    })) : createElement("img", {
+      className: (0, _lib.cx)('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    }));
+  };
+}
+function createHitsComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  var DefaultBannerComponent = createDefaultBannerComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
   return function Hits(userProps) {
     var _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
@@ -20,15 +51,18 @@ function createHitsComponent(_ref) {
       ItemComponent = userProps.itemComponent,
       sendEvent = userProps.sendEvent,
       EmptyComponent = userProps.emptyComponent,
+      banner = userProps.banner,
+      BannerComponent = userProps.bannerComponent,
       props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
-    if (hits.length === 0 && EmptyComponent) {
-      return createElement(EmptyComponent, {
-        className: (0, _lib.cx)('ais-Hits', classNames.root, (0, _lib.cx)('ais-Hits--empty', classNames.emptyRoot), props.className)
-      });
-    }
     return createElement("div", (0, _extends2.default)({}, props, {
       className: (0, _lib.cx)('ais-Hits', classNames.root, hits.length === 0 && (0, _lib.cx)('ais-Hits--empty', classNames.emptyRoot), props.className)
-    }), createElement("ol", {
+    }), banner && (BannerComponent ? createElement(BannerComponent, {
+      className: (0, _lib.cx)('ais-Hits-banner', classNames.bannerRoot),
+      banner: banner
+    }) : createElement(DefaultBannerComponent, {
+      classNames: classNames,
+      banner: banner
+    })), hits.length === 0 && EmptyComponent ? createElement(EmptyComponent, null) : createElement("ol", {
       className: (0, _lib.cx)('ais-Hits-list', classNames.list)
     }, hits.map(function (hit, index) {
       return createElement(ItemComponent, {

package/dist/cjs/version.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = '0.4.0';
+var _default = '0.5.0';
 exports.default = _default;

package/dist/es/components/Hits.d.ts

@@ -3,6 +3,18 @@ type Hit = Record<string, unknown> & {
     objectID: string;
 };
 type SendEventForHits = (...props: unknown[]) => void;
+type Banner = {
+    image: {
+        urls: Array<{
+            url: string;
+        }>;
+        title?: string;
+    };
+    link?: {
+        url?: string;
+        target?: '_blank' | '_self';
+    };
+};
 export type HitsProps<THit> = ComponentProps<'div'> & {
     hits: THit[];
     itemComponent: (props: {
@@ -15,7 +27,12 @@ export type HitsProps<THit> = ComponentProps<'div'> & {
     sendEvent: SendEventForHits;
     classNames?: Partial<HitsClassNames>;
     emptyComponent?: (props: {
+        className?: string;
+    }) => JSX.Element;
+    banner?: Banner;
+    bannerComponent?: (props: {
         className: string;
+        banner: Banner;
     }) => JSX.Element;
 };
 export type HitsClassNames = {
@@ -35,6 +52,18 @@ export type HitsClassNames = {
      * Class names to apply to each item element
      */
     item: string | string[];
+    /**
+     * Class names to apply to the banner element
+     */
+    bannerRoot: string | string[];
+    /**
+     * Class names to apply to the banner image element
+     */
+    bannerImage: string | string[];
+    /**
+     * Class names to apply to the banner link element
+     */
+    bannerLink: string | string[];
 };
-export declare function createHitsComponent({ createElement }: Renderer): <THit extends Hit>(userProps: HitsProps<THit>) => JSX.Element;
+export declare function createHitsComponent({ createElement, Fragment }: Renderer): <THit extends Hit>(userProps: HitsProps<THit>) => JSX.Element;
 export {};

package/dist/es/components/Hits.js

@@ -1,12 +1,43 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent"];
+var _excluded = ["classNames", "hits", "itemComponent", "sendEvent", "emptyComponent", "banner", "bannerComponent"];
 import { cx } from "../lib/index.js";
 
 // Should be imported from a shared package in the future
 
-export function createHitsComponent(_ref) {
+function createDefaultBannerComponent(_ref) {
   var createElement = _ref.createElement;
+  return function DefaultBanner(_ref2) {
+    var _banner$link;
+    var classNames = _ref2.classNames,
+      banner = _ref2.banner;
+    if (!banner.image.urls[0].url) {
+      return null;
+    }
+    return createElement("aside", {
+      className: cx('ais-Hits-banner', classNames.bannerRoot)
+    }, (_banner$link = banner.link) !== null && _banner$link !== void 0 && _banner$link.url ? createElement("a", {
+      className: cx('ais-Hits-banner-link', classNames.bannerLink),
+      href: banner.link.url,
+      target: banner.link.target
+    }, createElement("img", {
+      className: cx('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    })) : createElement("img", {
+      className: cx('ais-Hits-banner-image', classNames.bannerImage),
+      src: banner.image.urls[0].url,
+      alt: banner.image.title
+    }));
+  };
+}
+export function createHitsComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  var DefaultBannerComponent = createDefaultBannerComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
   return function Hits(userProps) {
     var _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
@@ -14,15 +45,18 @@ export function createHitsComponent(_ref) {
       ItemComponent = userProps.itemComponent,
       sendEvent = userProps.sendEvent,
       EmptyComponent = userProps.emptyComponent,
+      banner = userProps.banner,
+      BannerComponent = userProps.bannerComponent,
       props = _objectWithoutProperties(userProps, _excluded);
-    if (hits.length === 0 && EmptyComponent) {
-      return createElement(EmptyComponent, {
-        className: cx('ais-Hits', classNames.root, cx('ais-Hits--empty', classNames.emptyRoot), props.className)
-      });
-    }
     return createElement("div", _extends({}, props, {
       className: cx('ais-Hits', classNames.root, hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot), props.className)
-    }), createElement("ol", {
+    }), banner && (BannerComponent ? createElement(BannerComponent, {
+      className: cx('ais-Hits-banner', classNames.bannerRoot),
+      banner: banner
+    }) : createElement(DefaultBannerComponent, {
+      classNames: classNames,
+      banner: banner
+    })), hits.length === 0 && EmptyComponent ? createElement(EmptyComponent, null) : createElement("ol", {
       className: cx('ais-Hits-list', classNames.list)
     }, hits.map(function (hit, index) {
       return createElement(ItemComponent, {

package/dist/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.4.0";
+declare const _default: "0.5.0";
 export default _default;

package/dist/es/version.js

@@ -1 +1 @@
-export default '0.4.0';
+export default '0.5.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch-ui-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Common UI components for InstantSearch.",
   "types": "dist/es/index.d.ts",
   "main": "dist/cjs/index.js",
@@ -49,5 +49,5 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2"
   },
-  "gitHead": "358f849cba15cbbb415da05feb582b47358aa239"
+  "gitHead": "68fe2ee8544096eff8c2fbafe01a50a8acbca2b9"
 }