diff --git a/bundlesize.config.json b/bundlesize.config.json
index 27161e56d1..9013f932b3 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -30,7 +30,7 @@
},
{
"path": "packages/vue-instantsearch/vue3/umd/index.js",
- "maxSize": "68 kB"
+ "maxSize": "68.25 kB"
},
{
"path": "packages/vue-instantsearch/vue2/cjs/index.js",
diff --git a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
index 53a0cf5ebe..65eda916e4 100644
--- a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
+++ b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
@@ -590,9 +590,7 @@ const testOptions = {
createMenuWidgetTests: undefined,
createPaginationWidgetTests: undefined,
createInfiniteHitsWidgetTests: undefined,
- createHitsWidgetTests: {
- skippedTests: { 'banner option': true },
- },
+ createHitsWidgetTests: undefined,
createRangeInputWidgetTests: undefined,
createRatingMenuWidgetTests: undefined,
createInstantSearchWidgetTests: undefined,
diff --git a/packages/vue-instantsearch/src/components/Hits.js b/packages/vue-instantsearch/src/components/Hits.js
index f362de4275..1eea498ecc 100644
--- a/packages/vue-instantsearch/src/components/Hits.js
+++ b/packages/vue-instantsearch/src/components/Hits.js
@@ -19,6 +19,10 @@ export default {
createSuitMixin({ name: 'Hits' }),
],
props: {
+ showBanner: {
+ type: Boolean,
+ default: true,
+ },
escapeHTML: {
type: Boolean,
default: true,
@@ -31,6 +35,7 @@ export default {
computed: {
widgetParams() {
return {
+ showBanner: this.showBanner,
escapeHTML: this.escapeHTML,
transformItems: this.transformItems,
};
@@ -43,6 +48,7 @@ export default {
const defaultSlot = getScopedSlot(this, 'default');
const itemSlot = getScopedSlot(this, 'item');
+ const bannerSlot = getScopedSlot(this, 'banner');
const itemComponent = ({
hit,
@@ -78,7 +84,7 @@ export default {
// We only want to render the default slot
// if no other slots are defined
- if (!itemSlot && defaultSlot) {
+ if (!itemSlot && !bannerSlot && defaultSlot) {
return h(
'div',
{
@@ -88,6 +94,7 @@ export default {
},
[
defaultSlot({
+ banner: this.state.banner,
items: this.state.items,
insights: this.state.insights,
sendEvent: this.state.sendEvent,
@@ -99,11 +106,16 @@ export default {
return h(createHitsComponent({ createElement: h }), {
hits: this.state.items,
itemComponent,
+ banner: this.showBanner ? this.state.banner : undefined,
+ bannerComponent: bannerSlot,
sendEvent: this.state.sendEvent,
classNames: this.classNames && {
root: this.classNames['ais-Hits'],
list: this.classNames['ais-Hits-list'],
item: this.classNames['ais-Hits-item'],
+ bannerRoot: this.classNames['ais-Hits-banner'],
+ bannerImage: this.classNames['ais-Hits-banner-image'],
+ bannerLink: this.classNames['ais-Hits-banner-link'],
},
});
}),
diff --git a/packages/vue-instantsearch/src/components/__tests__/Hits.js b/packages/vue-instantsearch/src/components/__tests__/Hits.js
index fd083f89ef..6b19320dca 100644
--- a/packages/vue-instantsearch/src/components/__tests__/Hits.js
+++ b/packages/vue-instantsearch/src/components/__tests__/Hits.js
@@ -14,6 +14,20 @@ const defaultState = {
sendEvent: jest.fn(),
};
+it('accepts a showBanner prop', () => {
+ __setState({
+ ...defaultState,
+ });
+
+ const wrapper = mount(Hits, {
+ propsData: {
+ showBanner: true,
+ },
+ });
+
+ expect(wrapper.vm.widgetParams.showBanner).toBe(true);
+});
+
it('accepts an escapeHTML prop', () => {
__setState({
...defaultState,
@@ -28,6 +42,37 @@ it('accepts an escapeHTML prop', () => {
expect(wrapper.vm.widgetParams.escapeHTML).toBe(true);
});
+it('exposes banner prop to the banner slot', () => {
+ __setState({
+ ...defaultState,
+ banner: {
+ image: {
+ urls: [{ url: 'https://via.placeholder.com/550x250' }],
+ },
+ },
+ });
+
+ const wrapper = mount(
+ {
+ components: { Hits },
+ template: `
+