@eeacms/volto-cca-policy 1.0.11 → 1.0.13

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.13](https://github.com/eea/volto-cca-policy/compare/1.0.12...1.0.13) - 31 August 2026
+
+#### :hammer_and_wrench: Others
+
+- Refs #307245 - Visualizations: fix order in view mode. [GhitaB - [`bfbe754`](https://github.com/eea/volto-cca-policy/commit/bfbe7549af5a4f767c3d023b894b55b5eb81918e)]
+- Refs #307245 - Visualizations: order and descriptions. [GhitaB - [`5fff846`](https://github.com/eea/volto-cca-policy/commit/5fff846b623250e89cbf2a844828f545c0f2f9f9)]
+### [1.0.12](https://github.com/eea/volto-cca-policy/compare/1.0.11...1.0.12) - 24 August 2026
+
+#### :bug: Bug Fixes
+
+- fix: disable unavailable navigator guide options [kreafox - [`4b114c2`](https://github.com/eea/volto-cca-policy/commit/4b114c2b0ea7a6a6528ae8ae378c2e671b640945)]
+
+#### :nail_care: Enhancements
+
+- change: add custom hook for guide facet options and add tests [kreafox - [`872eb9b`](https://github.com/eea/volto-cca-policy/commit/872eb9b35c41fc2094c605b113411448a8cef9a8)]
+
+#### :hammer_and_wrench: Others
+
+- test: increase utility coverage [kreafox - [`d9c3db8`](https://github.com/eea/volto-cca-policy/commit/d9c3db8cc6fb91ead00f83b822f6fe48c26a70b1)]
 ### [1.0.11](https://github.com/eea/volto-cca-policy/compare/1.0.10...1.0.11) - 21 August 2026
 
 ### [1.0.10](https://github.com/eea/volto-cca-policy/compare/1.0.9...1.0.10) - 19 August 2026
@@ -288,7 +307,25 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test: pin Chromium version 149 to work with Cypress [valentinab25 - [`659ec82`](https://github.com/eea/volto-cca-policy/commit/659ec823dd71fe592a3a7accda22effbe1fb07bc)]
-## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.23...1.0.0) - 12 June 2026
+## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.26...1.0.0) - 12 June 2026
+
+### [1.0.0-alpha.26](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.25...1.0.0-alpha.26) - 28 August 2026
+
+### [1.0.0-alpha.25](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.24...1.0.0-alpha.25) - 27 August 2026
+
+#### :bug: Bug Fixes
+
+- fix: disable unavailable navigator guide options [kreafox - [`4b114c2`](https://github.com/eea/volto-cca-policy/commit/4b114c2b0ea7a6a6528ae8ae378c2e671b640945)]
+
+#### :nail_care: Enhancements
+
+- change: add custom hook for guide facet options and add tests [kreafox - [`872eb9b`](https://github.com/eea/volto-cca-policy/commit/872eb9b35c41fc2094c605b113411448a8cef9a8)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #307245 - Visualizations: order and descriptions. [GhitaB - [`5fff846`](https://github.com/eea/volto-cca-policy/commit/5fff846b623250e89cbf2a844828f545c0f2f9f9)]
+- test: increase utility coverage [kreafox - [`d9c3db8`](https://github.com/eea/volto-cca-policy/commit/d9c3db8cc6fb91ead00f83b822f6fe48c26a70b1)]
+### [1.0.0-alpha.24](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.23...1.0.0-alpha.24) - 24 August 2026
 
 ### [1.0.0-alpha.23](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.22...1.0.0-alpha.23) - 19 August 2026
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.jsx

@@ -8,6 +8,8 @@ import URLManager from '@elastic/search-ui/lib/cjs/URLManager';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
 import guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
+import { mergeGuideOptions } from './utils';
+import useGuideFacetOptions from './useGuideFacetOptions';
 
 const messages = defineMessages({
   noSteps: {
@@ -111,6 +113,7 @@ const NavigatorGuideContentView = ({ appConfig }) => {
     totalResults,
   } = searchContext;
   const steps = guideSteps;
+  const allFacetOptions = useGuideFacetOptions(appConfig, steps);
   const [storedActiveStep, setActiveStep] = useAtom(navigatorGuideStepAtom);
   const activeStep =
     Number.isInteger(storedActiveStep) &&
@@ -122,11 +125,16 @@ const NavigatorGuideContentView = ({ appConfig }) => {
   const selectedValues =
     (filters || []).find((filter) => filter.field === step?.field)?.values ||
     [];
-  const options = getFacetOptions(facets, step?.field);
-  const isLastStep = activeStep === steps.length - 1;
   const hasSelections = steps.some(({ field }) =>
     isStepSelected(filters, field),
   );
+  const options = mergeGuideOptions(
+    allFacetOptions?.[step?.field],
+    getFacetOptions(facets, step?.field),
+    selectedValues,
+    hasSelections,
+  );
+  const isLastStep = activeStep === steps.length - 1;
   const selectedStepLabels = steps
     .filter(({ field }) => isStepSelected(filters, field))
     .map(({ label }) =>
@@ -262,10 +270,12 @@ const NavigatorGuideContentView = ({ appConfig }) => {
                   key={option.value}
                   className={`navigator-guide-option${
                     selectedValues.includes(option.value) ? ' selected' : ''
-                  }`}
+                  }${option.disabled ? ' disabled' : ''}`}
+                  aria-disabled={option.disabled || undefined}
                 >
                   <Checkbox
                     checked={selectedValues.includes(option.value)}
+                    disabled={option.disabled}
                     onChange={() => toggleValue(option.value)}
                   />
                   <span>{option.value}</span>

package/src/components/Search/NavigatorGuide/useGuideFacetOptions.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { getFacetOptions } from '@eeacms/search/components/SearchApp/useFacetsWithAllOptions';
+
+const useGuideFacetOptions = (appConfig, steps) => {
+  const [allFacetOptions, setAllFacetOptions] = React.useState({});
+
+  React.useEffect(() => {
+    let isCurrent = true;
+    const stepFields = steps.map(({ field }) => field);
+
+    getFacetOptions(appConfig, stepFields)
+      .then((facetOptions) => {
+        if (isCurrent) setAllFacetOptions(facetOptions);
+      })
+      .catch(() => {
+        // Live facet options remain available if the supplementary request fails.
+      });
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [appConfig, steps]);
+
+  return allFacetOptions;
+};
+
+export default useGuideFacetOptions;

package/src/components/Search/NavigatorGuide/useGuideFacetOptions.test.js

@@ -0,0 +1,58 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { getFacetOptions } from '@eeacms/search/components/SearchApp/useFacetsWithAllOptions';
+import useGuideFacetOptions from './useGuideFacetOptions';
+
+jest.mock(
+  '@eeacms/search/components/SearchApp/useFacetsWithAllOptions',
+  () => ({ getFacetOptions: jest.fn() }),
+);
+
+const flushPromises = () => act(() => Promise.resolve());
+
+describe('useGuideFacetOptions', () => {
+  const appConfig = { facets: [] };
+  const steps = [{ field: 'sector' }, { field: 'stage' }];
+
+  beforeEach(() => {
+    getFacetOptions.mockReset();
+  });
+
+  it('loads the complete option list for every guide field', async () => {
+    const facetOptions = { sector: ['Energy'], stage: ['Step 1'] };
+    getFacetOptions.mockResolvedValue(facetOptions);
+
+    const { result } = renderHook(() => useGuideFacetOptions(appConfig, steps));
+    await flushPromises();
+
+    expect(getFacetOptions).toHaveBeenCalledWith(appConfig, [
+      'sector',
+      'stage',
+    ]);
+    expect(result.current).toEqual(facetOptions);
+  });
+
+  it('keeps the fallback state when loading fails', async () => {
+    getFacetOptions.mockRejectedValue(new Error('Search unavailable'));
+
+    const { result } = renderHook(() => useGuideFacetOptions(appConfig, steps));
+    await flushPromises();
+
+    expect(result.current).toEqual({});
+  });
+
+  it('does not update state after unmounting', async () => {
+    let resolveRequest;
+    getFacetOptions.mockReturnValue(
+      new Promise((resolve) => {
+        resolveRequest = resolve;
+      }),
+    );
+
+    const { unmount } = renderHook(() =>
+      useGuideFacetOptions(appConfig, steps),
+    );
+    unmount();
+    resolveRequest({ sector: ['Energy'] });
+    await flushPromises();
+  });
+});

package/src/components/Search/NavigatorGuide/utils.js

@@ -0,0 +1,30 @@
+export const mergeGuideOptions = (
+  availableValues = [],
+  facetOptions = [],
+  selectedValues = [],
+  hasGuideSelections = false,
+) => {
+  const optionsByValue = new Map(
+    facetOptions.map(({ value, count }) => [value, { value, count }]),
+  );
+
+  availableValues.forEach((value) => {
+    if (!optionsByValue.has(value)) {
+      optionsByValue.set(value, { value, count: 0 });
+    }
+  });
+
+  selectedValues.forEach((value) => {
+    if (!optionsByValue.has(value)) {
+      optionsByValue.set(value, { value, count: 0 });
+    }
+  });
+
+  return Array.from(optionsByValue.values()).map((option) => ({
+    ...option,
+    disabled:
+      hasGuideSelections &&
+      option.count === 0 &&
+      !selectedValues.includes(option.value),
+  }));
+};

package/src/components/Search/NavigatorGuide/utils.test.js

@@ -0,0 +1,40 @@
+import { mergeGuideOptions } from './utils';
+
+describe('Navigator Guide utilities', () => {
+  it('keeps unavailable values and marks them as disabled', () => {
+    expect(
+      mergeGuideOptions(
+        ['Step 1', 'Step 2', 'Step 6'],
+        [
+          { value: 'Step 1', count: 4 },
+          { value: 'Step 2', count: 2 },
+        ],
+        [],
+        true,
+      ),
+    ).toEqual([
+      { value: 'Step 1', count: 4, disabled: false },
+      { value: 'Step 2', count: 2, disabled: false },
+      { value: 'Step 6', count: 0, disabled: true },
+    ]);
+  });
+
+  it('keeps a selected zero-count value enabled so it can be removed', () => {
+    expect(mergeGuideOptions([], [], ['Step 6'], true)).toEqual([
+      { value: 'Step 6', count: 0, disabled: false },
+    ]);
+  });
+
+  it('keeps every value enabled before the guide has been refined', () => {
+    expect(mergeGuideOptions(['Step 1', 'Step 6'], [], [])).toEqual([
+      { value: 'Step 1', count: 0, disabled: false },
+      { value: 'Step 6', count: 0, disabled: false },
+    ]);
+  });
+
+  it('falls back to live facet options while the full list is loading', () => {
+    expect(mergeGuideOptions([], [{ value: 'Energy', count: 3 }], [])).toEqual([
+      { value: 'Energy', count: 3, disabled: false },
+    ]);
+  });
+});

package/src/components/manage/Widgets/VisualizationsWidget.jsx

@@ -7,6 +7,7 @@ import './visualizations.less';
 
 const emptyVisualization = {
   title: '',
+  description: '',
   embed_code: '',
   height: '',
   full_width: false,
@@ -43,6 +44,19 @@ const VisualizationsWidget = (props) => {
     );
   };
 
+  const moveItem = (index, direction) => {
+    const nextIndex = index + direction;
+
+    if (nextIndex < 0 || nextIndex >= visualizations.length) return;
+
+    const nextVisualizations = [...visualizations];
+    [nextVisualizations[index], nextVisualizations[nextIndex]] = [
+      nextVisualizations[nextIndex],
+      nextVisualizations[index],
+    ];
+    updateVisualizations(nextVisualizations);
+  };
+
   return (
     <FormFieldWrapper {...props}>
       <div className="visualizations-widget">
@@ -53,16 +67,30 @@ const VisualizationsWidget = (props) => {
           >
             <div className="visualizations-widget-item-header">
               <h4>Visualization {index + 1}</h4>
-              <Button
-                type="button"
-                basic
-                compact
-                negative
-                disabled={isDisabled}
-                onClick={() => deleteItem(index)}
-              >
-                Delete
-              </Button>
+              <Button.Group basic compact>
+                <Button
+                  type="button"
+                  disabled={isDisabled || index === 0}
+                  onClick={() => moveItem(index, -1)}
+                >
+                  Up
+                </Button>
+                <Button
+                  type="button"
+                  disabled={isDisabled || index === visualizations.length - 1}
+                  onClick={() => moveItem(index, 1)}
+                >
+                  Down
+                </Button>
+                <Button
+                  type="button"
+                  negative
+                  disabled={isDisabled}
+                  onClick={() => deleteItem(index)}
+                >
+                  Delete
+                </Button>
+              </Button.Group>
             </div>
 
             <Form.Field>
@@ -77,6 +105,19 @@ const VisualizationsWidget = (props) => {
               />
             </Form.Field>
 
+            <Form.Field>
+              <label htmlFor={`${id}-${index}-description`}>Description</label>
+              <TextArea
+                id={`${id}-${index}-description`}
+                value={item.description || ''}
+                disabled={isDisabled}
+                rows={3}
+                onChange={(event) =>
+                  updateItem(index, 'description', event.target.value)
+                }
+              />
+            </Form.Field>
+
             <Form.Field>
               <label htmlFor={`${id}-${index}-embed-code`}>
                 Embed code or URL

package/src/components/manage/Widgets/visualizations.less

@@ -22,6 +22,10 @@
       color: #1f405c;
       font-size: 1rem;
     }
+
+    .ui.buttons {
+      flex-shrink: 0;
+    }
   }
 
   .field {

package/src/components/theme/Views/DatabaseItemView.jsx

@@ -107,6 +107,9 @@ const MaybeIframeVisualization = ({ visualization }) => {
 const Visualization = ({ visualization }) => (
   <>
     {visualization?.title && <h2>{visualization.title}</h2>}
+    {visualization?.description && (
+      <p className="visualization-description">{visualization.description}</p>
+    )}
     <MaybeFlourishVisualization visualization={visualization} />
     <MaybeIframeVisualization visualization={visualization} />
   </>
@@ -129,6 +132,20 @@ const getVisualizations = (content) => {
     : [];
 };
 
+const groupVisualizations = (visualizations) =>
+  visualizations.reduce((groups, visualization) => {
+    const fullWidth = !!visualization.full_width;
+    const lastGroup = groups[groups.length - 1];
+
+    if (lastGroup && lastGroup.fullWidth === fullWidth) {
+      lastGroup.items.push(visualization);
+    } else {
+      groups.push({ fullWidth, items: [visualization] });
+    }
+
+    return groups;
+  }, []);
+
 const BottomInfo = (props) => {
   const { content } = props;
   const { organisational_websites, organisational_contact_information } =
@@ -185,13 +202,11 @@ const DatabaseItemView = (props) => {
   const item_title = acronym ? title + ' (' + acronym + ')' : title;
   const subtitle = CONTENT_TYPE_LABELS[type] ?? '';
   const visualizations = getVisualizations(content);
-  const columnVisualizations = visualizations.filter(
-    (visualization) => !visualization.full_width,
+  const visualizationGroups = groupVisualizations(visualizations);
+  const firstVisualizationGroup = visualizationGroups[0];
+  const hasFullWidthVisualizations = visualizationGroups.some(
+    (group) => group.fullWidth,
   );
-  const fullWidthVisualizations = visualizations.filter(
-    (visualization) => visualization.full_width,
-  );
-  const hasFullWidthVisualizations = !!fullWidthVisualizations.length;
 
   const is_cmshare_video = SHARE_EEA.some((domain) =>
     content?.embed_url?.includes(domain),
@@ -284,9 +299,12 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              {!!columnVisualizations.length && (
-                <Visualizations visualizations={columnVisualizations} />
-              )}
+              {firstVisualizationGroup &&
+                !firstVisualizationGroup.fullWidth && (
+                  <Visualizations
+                    visualizations={firstVisualizationGroup.items}
+                  />
+                )}
 
               {!hasFullWidthVisualizations && <BottomInfo {...props} />}
             </Grid.Column>
@@ -304,11 +322,22 @@ const DatabaseItemView = (props) => {
 
           {hasFullWidthVisualizations && (
             <>
-              <Grid.Row>
-                <Grid.Column mobile={12} tablet={12} computer={12}>
-                  <Visualizations visualizations={fullWidthVisualizations} />
-                </Grid.Column>
-              </Grid.Row>
+              {visualizationGroups.map((group, index) => {
+                if (index === 0 && !group.fullWidth) return null;
+
+                return (
+                  <Grid.Row key={`visualization-group-${index}`}>
+                    <Grid.Column
+                      mobile={12}
+                      tablet={12}
+                      computer={group.fullWidth ? 12 : 8}
+                      className={group.fullWidth ? undefined : 'col-left'}
+                    >
+                      <Visualizations visualizations={group.items} />
+                    </Grid.Column>
+                  </Grid.Row>
+                );
+              })}
               <Grid.Row>
                 <Grid.Column
                   mobile={12}

package/src/components/theme/Views/DatabaseItemView.test.jsx

@@ -46,6 +46,7 @@ const visualizationEmbedCode =
 
 const getVisualization = (overrides = {}) => ({
   title: '',
+  description: '',
   embed_code: visualizationEmbedCode,
   height: '',
   full_width: false,
@@ -125,6 +126,39 @@ describe('DatabaseItemView', () => {
     expect(fullWidthColumn.findAllByType('iframe')).toHaveLength(1);
   });
 
+  it('renders visualization descriptions', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      visualizations: [
+        getVisualization({ description: 'Visualization summary text.' }),
+      ],
+    });
+
+    expect(
+      component.root.findByProps({
+        className: 'visualization-description',
+      }).children,
+    ).toEqual(['Visualization summary text.']);
+  });
+
+  it('preserves visualization order when full-width and column items are mixed', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      visualizations: [
+        getVisualization({ title: 'First', full_width: true }),
+        getVisualization({ title: 'Second' }),
+        getVisualization({ title: 'Third', full_width: true }),
+      ],
+    });
+
+    const headings = component.root
+      .findAllByType('h2')
+      .map((heading) => heading.children.join(''))
+      .filter((title) => ['First', 'Second', 'Third'].includes(title));
+
+    expect(headings).toEqual(['First', 'Second', 'Third']);
+  });
+
   it('does not render a visualization when the visualizations field is empty', () => {
     const component = renderDatabaseItemView({
       ...baseContent,

package/src/utils.test.js

@@ -0,0 +1,127 @@
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import {
+  blockAvailableInMission,
+  extractPlanNameAndURL,
+  filterBlocks,
+  formatTextToHTML,
+  getBaseUrl,
+  getFilteredBlocks,
+  hasTypeOfBlock,
+  isEmpty,
+  normalizeImageFileName,
+} from './utils';
+
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
+  flattenToAppURL: jest.fn((url) => url.replace('https://example.com', '')),
+}));
+
+describe('general utilities', () => {
+  it('checks whether blocks are available inside and outside Mission', () => {
+    expect(blockAvailableInMission({}, { id: 'text' })).toBe(false);
+    expect(
+      blockAvailableInMission(
+        { '@id': 'https://example.com/en/mission/page' },
+        { id: 'mkh_map' },
+      ),
+    ).toBe(false);
+    expect(
+      blockAvailableInMission(
+        { '@id': 'https://example.com/en/mission/page' },
+        { id: 'text' },
+      ),
+    ).toBe(true);
+    expect(
+      blockAvailableInMission(
+        { '@id': 'https://example.com/en/page' },
+        { id: 'rastBlock' },
+      ),
+    ).toBe(true);
+  });
+
+  it('resolves a block base URL from the supported properties', () => {
+    expect(
+      getBaseUrl({ data: { href: [{ '@id': 'https://example.com/page' }] } }),
+    ).toBe('/page');
+    expect(getBaseUrl({ path: '/from-path' })).toBe('/from-path');
+    expect(getBaseUrl({ location: { pathname: '/from-location' } })).toBe(
+      '/from-location',
+    );
+    expect(getBaseUrl({})).toBe('');
+    expect(flattenToAppURL).toHaveBeenCalledTimes(3);
+  });
+
+  it('finds nested block types and removes selected block types', () => {
+    expect(
+      hasTypeOfBlock({ blocks: { child: { '@type': 'listing' } } }, 'listing'),
+    ).toBe(true);
+    expect(hasTypeOfBlock({ child: null }, 'listing')).toBe(false);
+
+    expect(
+      filterBlocks(
+        {
+          blocks: {
+            one: { '@type': 'text' },
+            two: { '@type': 'listing' },
+          },
+          blocks_layout: { items: ['one', 'two'] },
+        },
+        ['listing'],
+      ),
+    ).toEqual({
+      blocks: { one: { '@type': 'text' } },
+      blocks_layout: { items: ['one'] },
+      hasBlockTypes: true,
+    });
+  });
+
+  it('formats escaped text, paragraphs, bullets, and links as HTML', () => {
+    expect(formatTextToHTML()).toBe('');
+    expect(formatTextToHTML('Simple text')).toBe('<p>Simple text</p>');
+    expect(formatTextToHTML('First\\n\\nSecond')).toBe('First</p><p>Second');
+    expect(formatTextToHTML('Item\\no next')).toBe('<p>Item<br />• next</p>');
+    expect(formatTextToHTML('See https://example.com')).toContain(
+      '<a href="https://example.com"',
+    );
+  });
+
+  it('keeps only parent blocks without the excluded nested type', () => {
+    const result = getFilteredBlocks(
+      {
+        blocks: {
+          keep: { '@type': 'group', blocks: { child: { '@type': 'text' } } },
+          exclude: {
+            '@type': 'group',
+            data: { blocks: { child: { '@type': 'map' } } },
+          },
+          other: { '@type': 'text' },
+        },
+        blocks_layout: { items: ['keep', 'exclude', 'other'] },
+      },
+      'group',
+      'map',
+    );
+
+    expect(result.keptKeys).toEqual(['keep']);
+    expect(result.blocks_layout.items).toEqual(['keep']);
+    expect(result.hasMatches).toBe(true);
+  });
+
+  it('extracts plan links and normalizes common values', () => {
+    expect(extractPlanNameAndURL()).toEqual({ name: '', url: '' });
+    expect(
+      extractPlanNameAndURL('Adaptation plan (https://example.com/plan)'),
+    ).toEqual({ name: 'Adaptation plan', url: 'https://example.com/plan' });
+    expect(
+      extractPlanNameAndURL(
+        'Plan https://example.com/source https://example.com/document',
+      ),
+    ).toEqual({ name: 'Plan', url: 'https://example.com/document' });
+
+    expect(isEmpty()).toBe(true);
+    expect(isEmpty([])).toBe(true);
+    expect(isEmpty(['value'])).toBe(false);
+    expect(normalizeImageFileName()).toBe('');
+    expect(normalizeImageFileName('map(final).png')).toBe('map-final.png');
+    expect(normalizeImageFileName('map(final)')).toBe('map-final-');
+  });
+});

package/theme/globals/navigator.less

@@ -1004,6 +1004,12 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
       background: fade(@primaryColor, 5%);
     }
 
+    &.disabled {
+      background: #f5f5f5;
+      color: @navigatorInactiveColor;
+      opacity: 0.65;
+    }
+
     > span {
       flex: 1;
     }