docs(examples): use htm in examples templates (#6046)

algolia · Feb 13, 2024 · 5edf56b · 5edf56b
1 parent a047839
commit 5edf56b
Show file tree

Hide file tree

Showing 32 changed files with 755 additions and 471 deletions.
diff --git a/examples/js/e-commerce-umd/src/templates/panel.ts b/examples/js/e-commerce-umd/src/templates/panel.ts
@@ -1,12 +1,20 @@
-export const collapseButtonText = ({ collapsed }: { collapsed: boolean }) =>
-  collapsed
-    ? `
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13">
-  <path fill="#21243d" d="M6 6V0h1v6h6v1H7v6H6V7H0V6h6z" fill-rule="evenodd"/>
-</svg>
-  `
-    : `
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13">
-  <path fill="#21243d" d="M0 6h13v1H0z" fill-rule="evenodd"/>
-</svg>
-  `;
+import { refinementList } from 'instantsearch.js/es/widgets';
+import { PanelTemplates } from 'instantsearch.js/es/widgets/panel/panel';
+
+export const collapseButtonText: PanelTemplates<
+  typeof refinementList
+>['collapseButtonText'] = ({ collapsed }, { html }) => {
+  if (collapsed) {
+    return html`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13">
+      <path
+        fill="#21243d"
+        d="M6 6V0h1v6h6v1H7v6H6V7H0V6h6z"
+        fill-rule="evenodd"
+      />
+    </svg>`;
+  }
+
+  return html`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13">
+    <path fill="#21243d" d="M0 6h13v1H0z" fill-rule="evenodd" />
+  </svg>`;
+};
diff --git a/examples/js/e-commerce-umd/src/widgets/Brands.ts b/examples/js/e-commerce-umd/src/widgets/Brands.ts
@@ -1,9 +1,12 @@
 import { collapseButtonText } from '../templates/panel';
 
 const { panel, refinementList } = window.instantsearch.widgets;
-const brandRefinementList = panel({
+
+const brandRefinementList = panel<typeof refinementList>({
   templates: {
-    header: 'Brands',
+    header() {
+      return 'Brands';
+    },
     collapseButtonText,
   },
   collapsed: () => false,
@@ -14,15 +17,29 @@ export const brands = brandRefinementList({
   attribute: 'brand',
   searchable: true,
   searchablePlaceholder: 'Search for brands…',
-  searchableShowReset: false,
   templates: {
-    searchableSubmit: `
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 14 14">
-  <g fill="none" fill-rule="evenodd" stroke="#21243D" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.33" transform="translate(1 1)">
-      <circle cx="5.333" cy="5.333" r="5.333"/>
-      <path d="M12 12L9.1 9.1"/>
-  </g>
-</svg>
-    `,
+    searchableSubmit: (_, { html }) => {
+      return html`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 14 14"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+            stroke="#21243D"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.33"
+            transform="translate(1 1)"
+          >
+            <circle cx="5.333" cy="5.333" r="5.333" />
+            <path d="M12 12L9.1 9.1" />
+          </g>
+        </svg>
+      `;
+    },
   },
 });
diff --git a/examples/js/e-commerce-umd/src/widgets/Categories.ts b/examples/js/e-commerce-umd/src/widgets/Categories.ts
@@ -3,7 +3,9 @@ import { collapseButtonText } from '../templates/panel';
 const { panel, hierarchicalMenu } = window.instantsearch.widgets;
 const categoryHierarchicalMenu = panel({
   templates: {
-    header: 'Category',
+    header() {
+      return 'Category';
+    },
     collapseButtonText,
   },
   collapsed: () => false,

diff --git a/examples/js/e-commerce-umd/src/widgets/ClearFilters.ts b/examples/js/e-commerce-umd/src/widgets/ClearFilters.ts
@@ -3,17 +3,28 @@ const { clearRefinements } = window.instantsearch.widgets;
 export const clearFilters = clearRefinements({
   container: '[data-widget="clear-filters"]',
   templates: {
-    resetLabel: `
-<div class="clear-filters">
-  <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
-    <g fill="none" fill-rule="evenodd" opacity=".4">
-      <path d="M0 0h11v11H0z"/>
-      <path fill="#000" fill-rule="nonzero" d="M8.26 2.75a3.896 3.896 0 1 0 1.102 3.262l.007-.056a.49.49 0 0 1 .485-.456c.253 0 .451.206.437.457 0 0 .012-.109-.006.061a4.813 4.813 0 1 1-1.348-3.887v-.987a.458.458 0 1 1 .917.002v2.062a.459.459 0 0 1-.459.459H7.334a.458.458 0 1 1-.002-.917h.928z"/>
-    </g>
-  </svg>
+    resetLabel(_, { html }) {
+      return html`
+        <div class="clear-filters">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+          >
+            <g fill="none" fill-rule="evenodd" opacity=".4">
+              <path d="M0 0h11v11H0z" />
+              <path
+                fill="#000"
+                fill-rule="nonzero"
+                d="M8.26 2.75a3.896 3.896 0 1 0 1.102 3.262l.007-.056a.49.49 0 0 1 .485-.456c.253 0 .451.206.437.457 0 0 .012-.109-.006.061a4.813 4.813 0 1 1-1.348-3.887v-.987a.458.458 0 1 1 .917.002v2.062a.459.459 0 0 1-.459.459H7.334a.458.458 0 1 1-.002-.917h.928z"
+              />
+            </g>
+          </svg>
 
-  Clear filters
-</div>
-    `,
+          Clear filters
+        </div>
+      `;
+    },
   },
 });
diff --git a/examples/js/e-commerce-umd/src/widgets/ClearFiltersEmptyResults.ts b/examples/js/e-commerce-umd/src/widgets/ClearFiltersEmptyResults.ts
@@ -1,6 +1,6 @@
 const { panel, clearRefinements } = window.instantsearch.widgets;
 
-const clearFilters = panel({
+const clearFilters = panel<typeof clearRefinements>({
   hidden(options) {
     return options.results.nbHits > 0;
   },
@@ -9,17 +9,28 @@ const clearFilters = panel({
 export const clearFiltersEmptyResults = clearFilters({
   container: '[data-widget="clear-filters-empty-state"]',
   templates: {
-    resetLabel: `
-<div class="clear-filters">
-  <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
-    <g fill="none" fill-rule="evenodd">
-      <path d="M0 0h11v11H0z"/>
-      <path fill="#000" fill-rule="nonzero" d="M8.26 2.75a3.896 3.896 0 1 0 1.102 3.262l.007-.056a.49.49 0 0 1 .485-.456c.253 0 .451.206.437.457 0 0 .012-.109-.006.061a4.813 4.813 0 1 1-1.348-3.887v-.987a.458.458 0 1 1 .917.002v2.062a.459.459 0 0 1-.459.459H7.334a.458.458 0 1 1-.002-.917h.928z"/>
-    </g>
-  </svg>
+    resetLabel: (_, { html }) => {
+      return html`
+        <div class="clear-filters">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="11"
+            height="11"
+            viewBox="0 0 11 11"
+          >
+            <g fill="none" fill-rule="evenodd">
+              <path d="M0 0h11v11H0z" />
+              <path
+                fill="#000"
+                fill-rule="nonzero"
+                d="M8.26 2.75a3.896 3.896 0 1 0 1.102 3.262l.007-.056a.49.49 0 0 1 .485-.456c.253 0 .451.206.437.457 0 0 .012-.109-.006.061a4.813 4.813 0 1 1-1.348-3.887v-.987a.458.458 0 1 1 .917.002v2.062a.459.459 0 0 1-.459.459H7.334a.458.458 0 1 1-.002-.917h.928z"
+              />
+            </g>
+          </svg>
 
-  Clear filters
-</div>
-    `,
+          Clear filters
+        </div>
+      `;
+    },
   },
 });
diff --git a/examples/js/e-commerce-umd/src/widgets/FreeShipping.ts b/examples/js/e-commerce-umd/src/widgets/FreeShipping.ts
@@ -3,7 +3,9 @@ import { collapseButtonText } from '../templates/panel';
 const { panel, toggleRefinement } = window.instantsearch.widgets;
 const freeShippingToggleRefinement = panel({
   templates: {
-    header: 'Free shipping',
+    header() {
+      return 'Free shipping';
+    },
     collapseButtonText,
   },
   collapsed: () => false,
@@ -13,6 +15,8 @@ export const freeShipping = freeShippingToggleRefinement({
   container: '[data-widget="free-shipping"]',
   attribute: 'free_shipping',
   templates: {
-    labelText: 'Display only items with free shipping',
+    labelText() {
+      return 'Display only items with free shipping';
+    },
   },
 });
diff --git a/examples/js/e-commerce-umd/src/widgets/Pagination.ts b/examples/js/e-commerce-umd/src/widgets/Pagination.ts
@@ -1,6 +1,6 @@
 const { pagination: paginationWidget, panel } = window.instantsearch.widgets;
 
-const paginationWithMultiplePages = panel({
+const paginationWithMultiplePages = panel<typeof paginationWidget>({
   hidden({ results }) {
     return results.nbPages <= 1;
   },
@@ -13,19 +13,47 @@ export const pagination = paginationWithMultiplePages({
   showFirst: false,
   showLast: false,
   templates: {
-    previous: `
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
-  <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.143">
-    <path d="M9 5H1M5 9L1 5l4-4"/>
-  </g>
-</svg>
-    `,
-    next: `
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
-  <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.143">
-    <path d="M1 5h8M5 9l4-4-4-4"/>
-  </g>
-</svg>
-    `,
+    previous: (_, { html }) => {
+      return html`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.143"
+          >
+            <path d="M9 5H1M5 9L1 5l4-4" />
+          </g>
+        </svg>
+      `;
+    },
+    next: (_, { html }) => {
+      return html`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.143"
+          >
+            <path d="M1 5h8M5 9l4-4-4-4" />
+          </g>
+        </svg>
+      `;
+    },
   },
 });
diff --git a/examples/js/e-commerce-umd/src/widgets/PriceSlider.ts b/examples/js/e-commerce-umd/src/widgets/PriceSlider.ts
@@ -3,7 +3,9 @@ import { collapseButtonText } from '../templates/panel';
 const { panel, rangeSlider } = window.instantsearch.widgets;
 const priceRangeSlider = panel({
   templates: {
-    header: 'Price',
+    header() {
+      return 'Price';
+    },
     collapseButtonText,
   },
   collapsed: () => false,