fix(queryRules): add initial filter story to QueryRuleContext

algolia · Mar 25, 2019 · 8dc2b2e · 8dc2b2e
1 parent 8e51c1f
commit 8dc2b2e
Showing 1 changed file with 87 additions and 33 deletions.
diff --git a/stories/query-rule-context.stories.ts b/stories/query-rule-context.stories.ts
@@ -15,48 +15,102 @@ const searchOptions = {
   playground: moviesPlayground,
 };
 
-storiesOf('QueryRuleContext', module).add(
-  'default',
-  withHits(({ search, container, instantsearch }) => {
-    const widgetContainer = document.createElement('div');
-    const description = document.createElement('ul');
-    description.innerHTML = `
+storiesOf('QueryRuleContext', module)
+  .add(
+    'default',
+    withHits(({ search, container, instantsearch }) => {
+      const widgetContainer = document.createElement('div');
+      const description = document.createElement('ul');
+      description.innerHTML = `
         <li>Select the "Drama" category and The Shawshank Redemption appears</li>
         <li>Select the "Thriller" category and Pulp Fiction appears</li>
         <li>Type <q>music</q> and a banner will appear.</li>
       `;
 
-    container.appendChild(description);
-    container.appendChild(widgetContainer);
-
-    search.addWidget(
-      instantsearch.widgets.queryRuleContext({
-        trackedFilters: {
-          genre: () => ['Thriller', 'Drama'],
-        },
-      })
-    );
-
-    search.addWidget(
-      instantsearch.widgets.queryRuleCustomData({
-        container: widgetContainer,
-        transformItems: (items: CustomDataItem[]) => items[0],
-        templates: {
-          default({ title, banner, link }: CustomDataItem) {
-            if (!banner) {
-              return '';
-            }
-
-            return `
+      container.appendChild(description);
+      container.appendChild(widgetContainer);
+
+      search.addWidget(
+        instantsearch.widgets.queryRuleContext({
+          trackedFilters: {
+            genre: () => ['Thriller', 'Drama'],
+          },
+        })
+      );
+
+      search.addWidget(
+        instantsearch.widgets.queryRuleCustomData({
+          container: widgetContainer,
+          transformItems: (items: CustomDataItem[]) => items[0],
+          templates: {
+            default({ title, banner, link }: CustomDataItem) {
+              if (!banner) {
+                return '';
+              }
+
+              return `
+              <h2>${title}</h2>
+
+              <a href="${link}">
+                <img src="${banner}" alt="${title}">
+              </a>
+            `;
+            },
+          },
+        })
+      );
+    }, searchOptions)
+  )
+  .add(
+    'with initial filter',
+    withHits(({ search, container, instantsearch }) => {
+      const widgetContainer = document.createElement('div');
+      const description = document.createElement('ul');
+      description.innerHTML = `
+        <li>Select the "Drama" category and The Shawshank Redemption appears</li>
+        <li>Select the "Thriller" category and Pulp Fiction appears</li>
+        <li>Type <q>music</q> and a banner will appear.</li>
+      `;
+
+      container.appendChild(description);
+      container.appendChild(widgetContainer);
+
+      search.addWidget(
+        instantsearch.widgets.configure({
+          disjunctiveFacetsRefinements: {
+            genre: ['Drama'],
+          },
+        })
+      );
+
+      search.addWidget(
+        instantsearch.widgets.queryRuleContext({
+          trackedFilters: {
+            genre: () => ['Thriller', 'Drama'],
+          },
+        })
+      );
+
+      search.addWidget(
+        instantsearch.widgets.queryRuleCustomData({
+          container: widgetContainer,
+          transformItems: (items: CustomDataItem[]) => items[0],
+          templates: {
+            default({ title, banner, link }: CustomDataItem) {
+              if (!banner) {
+                return '';
+              }
+
+              return `
               <h2>${title}</h2>
 
               <a href="${link}">
                 <img src="${banner}" alt="${title}">
               </a>
             `;
+            },
           },
-        },
-      })
-    );
-  }, searchOptions)
-);
+        })
+      );
+    }, searchOptions)
+  );