fix(currentRefinements): implement noRefinementRoot modifier class (#…

…5114)
algolia · Sep 22, 2022 · cb66830 · cb66830
1 parent d48ed26
commit cb66830
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 5 deletions.
diff --git a/src/components/CurrentRefinements/CurrentRefinements.tsx b/src/components/CurrentRefinements/CurrentRefinements.tsx
@@ -1,6 +1,7 @@
 /** @jsx h */
 
 import { h } from 'preact';
+import cx from 'classnames';
 import { isSpecialClick, capitalize } from '../../lib/utils';
 import type {
   CurrentRefinementsConnectorParamsItem,
@@ -15,6 +16,7 @@ export type CurrentRefinementsComponentCSSClasses =
 export type CurrentRefinementsProps = {
   items: CurrentRefinementsConnectorParamsItem[];
   cssClasses: CurrentRefinementsComponentCSSClasses;
+  canRefine: boolean;
 };
 
 const createItemKey = ({
@@ -37,8 +39,16 @@ const handleClick = (callback: () => void) => (event: any) => {
   callback();
 };
 
-const CurrentRefinements = ({ items, cssClasses }: CurrentRefinementsProps) => (
-  <div className={cssClasses.root}>
+const CurrentRefinements = ({
+  items,
+  cssClasses,
+  canRefine,
+}: CurrentRefinementsProps) => (
+  <div
+    className={cx(cssClasses.root, {
+      [cssClasses.noRefinementRoot]: !canRefine,
+    })}
+  >
     <ul className={cssClasses.list}>
       {items.map((item, index) => (
         <li

diff --git a/src/components/CurrentRefinements/__tests__/CurrentRefinements-test.tsx b/src/components/CurrentRefinements/__tests__/CurrentRefinements-test.tsx
@@ -10,6 +10,7 @@ import CurrentRefinements from '../CurrentRefinements';
 describe('CurrentRefinements', () => {
   const cssClasses = {
     root: 'root',
+    noRefinementRoot: 'noRefinementRoot',
     list: 'list',
     item: 'item',
     label: 'label',
@@ -21,6 +22,7 @@ describe('CurrentRefinements', () => {
   it('renders', () => {
     const props = {
       cssClasses,
+      canRefine: true,
       items: [
         {
           indexName: 'indexName',
@@ -122,10 +124,25 @@ describe('CurrentRefinements', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('renders without items', () => {
+    const props = {
+      cssClasses,
+      canRefine: false,
+      items: [],
+    };
+
+    const { container } = render(<CurrentRefinements {...props} />);
+    const root = container.querySelector('.root')!;
+
+    expect(root.classList).toContain('noRefinementRoot');
+    expect(container).toMatchSnapshot();
+  });
+
   describe('options.refinements', () => {
     it('can be used with a facet', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',
@@ -152,6 +169,7 @@ describe('CurrentRefinements', () => {
     it('can be used with an exclude', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',
@@ -179,6 +197,7 @@ describe('CurrentRefinements', () => {
     it('can be used with a disjunctive facet', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',
@@ -205,6 +224,7 @@ describe('CurrentRefinements', () => {
     it('can be used with a hierarchical facet', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',
@@ -231,6 +251,7 @@ describe('CurrentRefinements', () => {
     it('can be used with numeric filters', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',
@@ -288,6 +309,7 @@ describe('CurrentRefinements', () => {
     it('can be used with a tag', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',
@@ -314,6 +336,7 @@ describe('CurrentRefinements', () => {
     it('can be used with a query', () => {
       const props = {
         cssClasses,
+        canRefine: true,
         items: [
           {
             indexName: 'indexName',

diff --git a/src/components/CurrentRefinements/__tests__/__snapshots__/CurrentRefinements-test.tsx.snap b/src/components/CurrentRefinements/__tests__/__snapshots__/CurrentRefinements-test.tsx.snap
@@ -479,3 +479,15 @@ exports[`CurrentRefinements renders 1`] = `
   </div>
 </div>
 `;
+
+exports[`CurrentRefinements renders without items 1`] = `
+<div>
+  <div
+    class="root noRefinementRoot"
+  >
+    <ul
+      class="list"
+    />
+  </div>
+</div>
+`;
diff --git a/src/widgets/current-refinements/__tests__/__snapshots__/current-refinements-test.ts.snap b/src/widgets/current-refinements/__tests__/__snapshots__/current-refinements-test.ts.snap
@@ -2,13 +2,15 @@
 
 exports[`currentRefinements() render() DOM output renders correctly 1`] = `
 {
+  "canRefine": true,
   "cssClasses": {
     "category": "ais-CurrentRefinements-category category",
     "categoryLabel": "ais-CurrentRefinements-categoryLabel categoryLabel",
     "delete": "ais-CurrentRefinements-delete delete",
     "item": "ais-CurrentRefinements-item item",
     "label": "ais-CurrentRefinements-label label",
     "list": "ais-CurrentRefinements-list list",
+    "noRefinementRoot": "ais-CurrentRefinements--noRefinement",
     "root": "ais-CurrentRefinements root",
   },
   "items": [
@@ -144,13 +146,15 @@ exports[`currentRefinements() render() DOM output renders correctly 1`] = `
 
 exports[`currentRefinements() render() options.container should render with a HTMLElement container 1`] = `
 {
+  "canRefine": false,
   "cssClasses": {
     "category": "ais-CurrentRefinements-category",
     "categoryLabel": "ais-CurrentRefinements-categoryLabel",
     "delete": "ais-CurrentRefinements-delete",
     "item": "ais-CurrentRefinements-item",
     "label": "ais-CurrentRefinements-label",
     "list": "ais-CurrentRefinements-list",
+    "noRefinementRoot": "ais-CurrentRefinements--noRefinement",
     "root": "ais-CurrentRefinements",
   },
   "items": [],
@@ -159,13 +163,15 @@ exports[`currentRefinements() render() options.container should render with a HT
 
 exports[`currentRefinements() render() should render twice <CurrentRefinements ... /> 1`] = `
 {
+  "canRefine": true,
   "cssClasses": {
     "category": "ais-CurrentRefinements-category",
     "categoryLabel": "ais-CurrentRefinements-categoryLabel",
     "delete": "ais-CurrentRefinements-delete",
     "item": "ais-CurrentRefinements-item",
     "label": "ais-CurrentRefinements-label",
     "list": "ais-CurrentRefinements-list",
+    "noRefinementRoot": "ais-CurrentRefinements--noRefinement",
     "root": "ais-CurrentRefinements",
   },
   "items": [
@@ -191,13 +197,15 @@ exports[`currentRefinements() render() should render twice <CurrentRefinements .
 
 exports[`currentRefinements() render() should render twice <CurrentRefinements ... /> 2`] = `
 {
+  "canRefine": true,
   "cssClasses": {
     "category": "ais-CurrentRefinements-category",
     "categoryLabel": "ais-CurrentRefinements-categoryLabel",
     "delete": "ais-CurrentRefinements-delete",
     "item": "ais-CurrentRefinements-item",
     "label": "ais-CurrentRefinements-label",
     "list": "ais-CurrentRefinements-list",
+    "noRefinementRoot": "ais-CurrentRefinements--noRefinement",
     "root": "ais-CurrentRefinements",
   },
   "items": [

diff --git a/src/widgets/current-refinements/current-refinements.tsx b/src/widgets/current-refinements/current-refinements.tsx
@@ -22,6 +22,11 @@ export type CurrentRefinementsCSSClasses = Partial<{
    */
   root: string | string[];
 
+  /**
+   * CSS class to add to the root element when no refinements.
+   */
+  noRefinementRoot: string | string[];
+
   /**
    * CSS class to add to the list element.
    */
@@ -73,7 +78,7 @@ const suit = component('CurrentRefinements');
 const renderer: Renderer<
   CurrentRefinementsRenderState,
   Partial<CurrentRefinementsWidgetParams>
-> = ({ items, widgetParams }, isFirstRender) => {
+> = ({ items, widgetParams, canRefine }, isFirstRender) => {
   if (isFirstRender) {
     return;
   }
@@ -84,7 +89,11 @@ const renderer: Renderer<
   };
 
   render(
-    <CurrentRefinements cssClasses={cssClasses} items={items} />,
+    <CurrentRefinements
+      cssClasses={cssClasses}
+      items={items}
+      canRefine={canRefine}
+    />,
     container
   );
 };
@@ -112,8 +121,12 @@ const currentRefinements: CurrentRefinementsWidget =
     }
 
     const containerNode = getContainerNode(container);
-    const cssClasses = {
+    const cssClasses: CurrentRefinementsCSSClasses = {
       root: cx(suit(), userCssClasses.root),
+      noRefinementRoot: cx(
+        suit({ modifierName: 'noRefinement' }),
+        userCssClasses.noRefinementRoot
+      ),
       list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
       item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
       label: cx(suit({ descendantName: 'label' }), userCssClasses.label),