Skip to content

Commit 456f7b8

Browse files
HaroenvHaroenv
committed
docs(stories): use function for all templates
1 parent 8edb3e4 commit 456f7b8

22 files changed

+232
-245
lines changed

‎packages/instantsearch.js/.storybook/playgrounds/default.ts‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1+
import { HitsTemplates } from '../../src/widgets/hits/hits';
12
import { Playground } from '../decorators';
23

3-
export const hitsItemTemplate = `
4-
<div
5-
class="hits-image"
6-
style="background-image: url({{image}})"
7-
></div>
8-
<article>
9-
<header>
10-
<strong>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</strong>
11-
</header>
12-
<p>
13-
{{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}
14-
</p>
15-
<footer>
16-
<p>
17-
<strong>{{price}}$</strong>
18-
</p>
19-
</footer>
20-
</article>
4+
export const hitsItemTemplate: HitsTemplates['item'] = (
5+
hit,
6+
{ html, components }
7+
) => html`
8+
<div class="hits-image" style="background-image: url(${hit.image})"></div>
9+
<article>
10+
<header>
11+
<strong>${components.Highlight({ hit, attribute: 'name' })}</strong>
12+
</header>
13+
<p>${components.Snippet({ hit, attribute: 'description' })}</p>
14+
<footer>
15+
<p>
16+
<strong>${hit.price}$</strong>
17+
</p>
18+
</footer>
19+
</article>
2120
`;
2221

2322
const instantSearchPlayground: Playground = function instantSearchPlayground({
@@ -33,7 +32,7 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
3332
typeof instantsearch.widgets.refinementList
3433
>({
3534
templates: {
36-
header: 'Brands',
35+
header: () => 'Brands',
3736
},
3837
})(instantsearch.widgets.refinementList);
3938

@@ -49,7 +48,9 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
4948

5049
const priceMenu = instantsearch.widgets.panel<
5150
typeof instantsearch.widgets.numericMenu
52-
>({ templates: { header: 'Price' } })(instantsearch.widgets.numericMenu);
51+
>({ templates: { header: () => 'Price' } })(
52+
instantsearch.widgets.numericMenu
53+
);
5354

5455
search.addWidgets([
5556
priceMenu({
@@ -72,7 +73,7 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
7273
typeof instantsearch.widgets.ratingMenu
7374
>({
7475
templates: {
75-
header: 'Rating',
76+
header: () => 'Rating',
7677
},
7778
})(instantsearch.widgets.ratingMenu);
7879

@@ -127,6 +128,14 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
127128
instantsearch.widgets.pagination({
128129
container: pagination,
129130
}),
131+
instantsearch.widgets.hitsPerPage({
132+
container: rightPanel.appendChild(document.createElement('div')),
133+
items: [
134+
{ label: '16 per page', value: 16 },
135+
{ label: '32 per page', value: 32 },
136+
{ label: '64 per page', value: 64, default: true },
137+
],
138+
}),
130139
]);
131140

132141
const insights = instantsearch.middlewares.createInsightsMiddleware({

‎packages/instantsearch.js/.storybook/playgrounds/movies.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const demoQueryRulesPlayground: Playground = function demoQueryRulesPlayground({
1313
typeof instantsearch.widgets.refinementList
1414
>({
1515
templates: {
16-
header: 'Genres',
16+
header: () => 'Genres',
1717
},
1818
})(instantsearch.widgets.refinementList);
1919

@@ -53,16 +53,18 @@ const demoQueryRulesPlayground: Playground = function demoQueryRulesPlayground({
5353
instantsearch.widgets.hits({
5454
container: hits,
5555
templates: {
56-
item: `
57-
<div
58-
class="hits-image"
59-
style="background-image: url({{image}})"
60-
></div>
61-
<article>
62-
<header>
63-
<strong>{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}</strong>
64-
</header>
65-
</article>
56+
item: (hit, { html, components }) => html`
57+
<div
58+
class="hits-image"
59+
style="background-image: url(${hit.image})"
60+
></div>
61+
<article>
62+
<header>
63+
<strong
64+
>${components.Highlight({ attribute: 'title', hit })}</strong
65+
>
66+
</header>
67+
</article>
6668
`,
6769
},
6870
cssClasses: {

‎packages/instantsearch.js/stories/answers.stories.ts‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,11 @@ storiesOf('Results/Answers', module)
7474
queryLanguages: ['en'],
7575
attributesForPrediction: ['description'],
7676
templates: {
77-
header: ({ hits }) => {
78-
return hits.length === 0 ? '' : `<p>Answers</p>`;
79-
},
80-
loader: `loading...`,
81-
item: (hit) => {
82-
return `<p>${hit._answer.extract}</p>`;
77+
header: ({ hits }, { html }) => {
78+
return hits.length === 0 ? '' : html`<p>Answers</p>`;
8379
},
80+
loader: () => `loading...`,
81+
item: (hit, { html }) => html`<p>${hit._answer.extract}</p>`,
8482
},
8583
}),
8684
]);
@@ -104,24 +102,22 @@ storiesOf('Results/Answers', module)
104102
root: 'my-Answers',
105103
},
106104
templates: {
107-
loader: `
108-
<div class="card-skeleton">
109-
<div class="animated-background">
110-
<div class="skel-mask-container">
111-
<div class="skel-mask skel-mask-1"></div>
112-
<div class="skel-mask skel-mask-2"></div>
113-
<div class="skel-mask skel-mask-3"></div>
105+
loader: (_, { html }) => html`
106+
<div class="card-skeleton">
107+
<div class="animated-background">
108+
<div class="skel-mask-container">
109+
<div class="skel-mask skel-mask-1"></div>
110+
<div class="skel-mask skel-mask-2"></div>
111+
<div class="skel-mask skel-mask-3"></div>
112+
</div>
114113
</div>
115114
</div>
116-
</div>
117115
`,
118-
item: (hit) => {
119-
return `
120-
<p class="title one-line">${hit.title}</p>
121-
<div class="separator"></div>
122-
<p class="description three-lines">${hit._answer.extract}</p>
123-
`;
124-
},
116+
item: (hit, { html }) => html`
117+
<p class="title one-line">${hit.title}</p>
118+
<div class="separator"></div>
119+
<p class="description three-lines">${hit._answer.extract}</p>
120+
`,
125121
},
126122
}),
127123
]);

‎packages/instantsearch.js/stories/breadcrumb.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ storiesOf('Metadata/Breadcrumb', module)
6969
'hierarchicalCategories.lvl2',
7070
],
7171
templates: {
72-
separator: ' + ',
72+
separator: () => ' + ',
7373
},
7474
}),
7575
]);
@@ -105,7 +105,7 @@ storiesOf('Metadata/Breadcrumb', module)
105105
'hierarchicalCategories.lvl2',
106106
],
107107
templates: {
108-
home: 'Home Page',
108+
home: () => 'Home Page',
109109
},
110110
}),
111111
]);

‎packages/instantsearch.js/stories/clear-refinements.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ storiesOf('Refinements/ClearRefinements', module)
3232
container,
3333
includedAttributes: ['query'],
3434
templates: {
35-
resetLabel: 'Clear query',
35+
resetLabel: () => 'Clear query',
3636
},
3737
}),
3838
]);
@@ -47,7 +47,7 @@ storiesOf('Refinements/ClearRefinements', module)
4747
container,
4848
excludedAttributes: [],
4949
templates: {
50-
resetLabel: 'Clear refinements and query',
50+
resetLabel: () => 'Clear refinements and query',
5151
},
5252
}),
5353
]);

‎packages/instantsearch.js/stories/configure-related-items.stories.ts‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -106,20 +106,18 @@ storiesOf('Basics/ConfigureRelatedItems', module).add(
106106
instantsearch.widgets.hits({
107107
container: widgetParams.container,
108108
templates: {
109-
item(item) {
110-
return `
111-
<li class="ais-RelatedHits-item">
112-
<div class="ais-RelatedHits-item-image">
113-
<img src="${item.image}" alt="${item.name}">
114-
</div>
115-
116-
<div class="ais-RelatedHits-item-title">
117-
<h4>${item.name}</h4>
118-
</div>
119-
</li>
120-
`;
121-
},
122-
empty: '',
109+
item: (item, { html }) => html`
110+
<li class="ais-RelatedHits-item">
111+
<div class="ais-RelatedHits-item-image">
112+
<img src="${item.image}" alt="${item.name}" />
113+
</div>
114+
115+
<div class="ais-RelatedHits-item-title">
116+
<h4>${item.name}</h4>
117+
</div>
118+
</li>
119+
`,
120+
empty: () => '',
123121
},
124122
}),
125123
]),
@@ -134,26 +132,26 @@ storiesOf('Basics/ConfigureRelatedItems', module).add(
134132
instantsearch.widgets.hits({
135133
container: productContainer,
136134
templates: {
137-
item: `
138-
<div
139-
class="hits-image"
140-
style="background-image: url({{image}})"
141-
></div>
142-
<article>
143-
<header>
144-
<strong>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</strong>
145-
</header>
146-
<p>
147-
{{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}
148-
</p>
149-
<footer>
150-
<p>
151-
<strong>{{price}}$</strong>
152-
</p>
153-
</footer>
154-
</article>
155-
`,
156-
empty: '',
135+
item: (hit, { html, components }) => html`
136+
<div
137+
class="hits-image"
138+
style="background-image: url(${hit.image})"
139+
></div>
140+
<article>
141+
<header>
142+
<strong>
143+
${components.Highlight({ attribute: 'name', hit })})}
144+
</strong>
145+
</header>
146+
<p>${components.Snippet({ attribute: 'description', hit })})}</p>
147+
<footer>
148+
<p>
149+
<strong>${hit.price}$</strong>
150+
</p>
151+
</footer>
152+
</article>
153+
`,
154+
empty: () => '',
157155
},
158156
cssClasses: {
159157
item: 'hits-item',

‎packages/instantsearch.js/stories/current-refinements.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ storiesOf('Refinements/CurrentRefinements', module)
141141
container: toggleRefinementContainer,
142142
attribute: 'free_shipping',
143143
templates: {
144-
labelText: 'Free Shipping',
144+
labelText: () => 'Free Shipping',
145145
},
146146
}),
147147
]);

‎packages/instantsearch.js/stories/dynamic-widgets.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ storiesOf('Basics/DynamicWidgets', module)
3434
}),
3535
(container) =>
3636
instantsearch.widgets.panel({
37-
templates: { header: 'hierarchy' },
37+
templates: { header: () => 'hierarchy' },
3838
})(instantsearch.widgets.hierarchicalMenu)({
3939
container,
4040
attributes: [
@@ -79,7 +79,7 @@ storiesOf('Basics/DynamicWidgets', module)
7979
}),
8080
(container) =>
8181
instantsearch.widgets.panel({
82-
templates: { header: 'hierarchy' },
82+
templates: { header: () => 'hierarchy' },
8383
})(instantsearch.widgets.hierarchicalMenu)({
8484
container,
8585
attributes: [

0 commit comments

Comments
 (0)