@eeacms/volto-cca-policy 1.0.28 → 1.0.29

package/CHANGELOG.md

@@ -4,6 +4,23 @@ 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.29](https://github.com/eea/volto-cca-policy/compare/1.0.28...1.0.29) - 25 September 2026
+
+#### :rocket: New Features
+
+- feat(navigator): add empty state message in geographic facet [kreafox - [`7b35b4b`](https://github.com/eea/volto-cca-policy/commit/7b35b4b1e88364d6f209c0f1908dd0ef18359802)]
+- feat(navigator): add active filters section [kreafox - [`3f2ced0`](https://github.com/eea/volto-cca-policy/commit/3f2ced0e5601228caccde2f72aefa0b4bd6671f3)]
+- feat(navigator): update facets to enable filtering and display in facets list [kreafox - [`48f4aea`](https://github.com/eea/volto-cca-policy/commit/48f4aea15cb74162482c5b1f9be8433cf06918bd)]
+- feat(navigator): add custom navigator geographic coverage facet [kreafox - [`fee357a`](https://github.com/eea/volto-cca-policy/commit/fee357a811f69ca1c80224b6b182a6d1e0fdc14a)]
+
+#### :bug: Bug Fixes
+
+- fix(navigator): add aria-label to checkbox [kreafox - [`c9ccf40`](https://github.com/eea/volto-cca-policy/commit/c9ccf40402f37faf389d61ee79e722e7f981704b)]
+
+#### :nail_care: Enhancements
+
+- refactor(navigator): simplify option sorting and update styles for geographic facet [kreafox - [`e82f79d`](https://github.com/eea/volto-cca-policy/commit/e82f79dc5253b800e70d8ea4ec3c247aa5c26921)]
+
 ### [1.0.28](https://github.com/eea/volto-cca-policy/compare/1.0.27...1.0.28) - 22 September 2026
 
 #### :rocket: New Features
@@ -481,7 +498,11 @@ 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.28...1.0.0) - 12 June 2026
+## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.30...1.0.0) - 12 June 2026
+
+### [1.0.0-alpha.30](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.29...1.0.0-alpha.30) - 23 September 2026
+
+### [1.0.0-alpha.29](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.28...1.0.0-alpha.29) - 21 September 2026
 
 ### [1.0.0-alpha.28](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.27...1.0.0-alpha.28) - 21 September 2026
 

package/package.json

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

package/src/components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet.jsx

@@ -0,0 +1,252 @@
+import React from 'react';
+import { Button, Card, Icon } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Term } from '@eeacms/search/components';
+import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { markSelectedFacetValuesFromFilters } from '@eeacms/search/lib/search/helpers';
+
+export const CHARACTERISATION_FIELD = 'cca_geographic_characterisation.keyword';
+export const TRANSNATIONAL_REGION_FIELD =
+  'cca_geographic_transnational_region.keyword';
+export const COUNTRIES_FIELD = 'cca_geographic_countries.keyword';
+
+const messages = defineMessages({
+  transnationalRegions: {
+    id: 'Macro-Transnational region',
+    defaultMessage: 'Macro-Transnational region',
+  },
+  countries: { id: 'Countries', defaultMessage: 'Countries' },
+  noOptionsAvailable: {
+    id: 'No options available',
+    defaultMessage: 'No options available',
+  },
+});
+
+const valueAsText = (value) =>
+  value && typeof value === 'object' && value.name
+    ? value.name
+    : String(value ?? '');
+
+export const getFacetOptions = (facets, filters, field) => {
+  const facetValue = facets?.[field];
+  const facet = Array.isArray(facetValue) ? facetValue[0] : facetValue;
+
+  return facet?.data
+    ? markSelectedFacetValuesFromFilters(facet, filters || [], field, 'any')
+        .data
+    : [];
+};
+
+const FacetOption = ({ field, option, onChange }) => {
+  const intl = useIntl();
+  const value = valueAsText(option.value);
+  const inputId = `navigator-geographic-${field}-${value}`.replace(
+    /[^a-zA-Z0-9_-]/g,
+    '-',
+  );
+
+  return (
+    <label htmlFor={inputId} className="sui-multi-checkbox-facet__option-label">
+      <span className="sui-multi-checkbox-facet__option-input-wrapper">
+        <input
+          id={inputId}
+          type="checkbox"
+          aria-label={value}
+          className="sui-multi-checkbox-facet__checkbox"
+          checked={Boolean(option.selected)}
+          onChange={() => onChange(option)}
+        />
+        <span className="checkmark" />
+        <span className="sui-multi-checkbox-facet__input-text">
+          <Term
+            term={intl.formatMessage({
+              id: value || 'no-id',
+              defaultMessage: value,
+            })}
+            field={field}
+          />
+        </span>
+      </span>
+      <span className="sui-multi-checkbox-facet__option-count">
+        ({Number(option.count || 0).toLocaleString('en')})
+      </span>
+    </label>
+  );
+};
+
+const ExpandableFacetGroup = ({
+  field,
+  id,
+  label,
+  options,
+  emptyMessage,
+  onChange,
+}) => {
+  const hasSelection = options.some(({ selected }) => selected);
+  const [isOpen, setIsOpen] = React.useState(hasSelection);
+
+  React.useEffect(() => {
+    if (hasSelection) setIsOpen(true);
+  }, [hasSelection]);
+
+  return (
+    <div className="navigator-geographic-facet-group">
+      <button
+        type="button"
+        className={`navigator-geographic-facet-group-toggle${
+          isOpen ? ' active' : ''
+        }`}
+        aria-expanded={isOpen}
+        aria-controls={id}
+        onClick={() => setIsOpen((current) => !current)}
+      >
+        <span>{label}</span>
+        <Icon name={isOpen ? 'chevron up' : 'chevron down'} />
+      </button>
+      {isOpen &&
+        (options.length > 0 ? (
+          <div id={id} className="sui-multi-checkbox-facet">
+            {options.map((option) => (
+              <FacetOption
+                key={valueAsText(option.value)}
+                field={field}
+                option={option}
+                onChange={onChange}
+              />
+            ))}
+          </div>
+        ) : (
+          <div id={id} className="navigator-geographic-facet-empty">
+            {emptyMessage}.
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const NavigatorActiveFilters = ({ filters, onRemove }) => {
+  const intl = useIntl();
+  const geographicFields = [
+    CHARACTERISATION_FIELD,
+    TRANSNATIONAL_REGION_FIELD,
+    COUNTRIES_FIELD,
+  ];
+  const activeFilters = filters.filter(
+    ({ field, values }) =>
+      geographicFields.includes(field) && values?.length > 0,
+  );
+
+  if (!activeFilters.length) return null;
+
+  return (
+    <div className="active-filters">
+      <h5>Active filters:</h5>
+      <div className="facets-wrapper">
+        {activeFilters.flatMap(({ field, values, type }) =>
+          values.map((value, index) => (
+            <Card key={`${field}-${index}`} className="term active-term">
+              <Card.Content>
+                <Card.Header className="card-header">
+                  <Term
+                    term={intl.formatMessage({
+                      id: value,
+                      defaultMessage: value,
+                    })}
+                    field={field}
+                  />
+                  <Button
+                    className="clear-filters"
+                    onClick={() => onRemove(field, value, type)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        onRemove(field, value, type);
+                      }
+                    }}
+                  >
+                    <Icon name="close" role="button" />
+                  </Button>
+                </Card.Header>
+              </Card.Content>
+            </Card>
+          )),
+        )}
+      </div>
+      <Button
+        size="mini"
+        className="clear-btn"
+        content="Clear all"
+        onClick={() =>
+          activeFilters.forEach(({ field, values, type }) =>
+            values.forEach((value) => onRemove(field, value, type)),
+          )
+        }
+      />
+    </div>
+  );
+};
+
+const NavigatorGeographicCoverageFacet = ({
+  className = '',
+  onRemove,
+  onSelect,
+  options = [],
+}) => {
+  const intl = useIntl();
+  const { addFilter, facets, filters = [], removeFilter } = useSearchContext();
+  const transnationalOptions = getFacetOptions(
+    facets,
+    filters,
+    TRANSNATIONAL_REGION_FIELD,
+  );
+  const countryOptions = getFacetOptions(facets, filters, COUNTRIES_FIELD);
+
+  const updateChildFilter = (field, option) =>
+    option.selected
+      ? removeFilter(field, option.value, 'any')
+      : addFilter(field, option.value, 'any');
+
+  return (
+    <fieldset
+      className={`sui-facet searchlib-multiterm-facet navigator-geographic-facet ${className}`}
+    >
+      <div className="sui-multi-checkbox-facet navigator-geographic-facet-direct-options">
+        {options.map((option) => (
+          <FacetOption
+            key={valueAsText(option.value)}
+            field={CHARACTERISATION_FIELD}
+            option={option}
+            onChange={(selectedOption) =>
+              selectedOption.selected
+                ? onRemove(selectedOption.value)
+                : onSelect(selectedOption.value)
+            }
+          />
+        ))}
+      </div>
+      <ExpandableFacetGroup
+        field={TRANSNATIONAL_REGION_FIELD}
+        id="navigator-geographic-transnational-regions"
+        label={intl.formatMessage(messages.transnationalRegions)}
+        emptyMessage={intl.formatMessage(messages.noOptionsAvailable)}
+        options={transnationalOptions}
+        onChange={(option) =>
+          updateChildFilter(TRANSNATIONAL_REGION_FIELD, option)
+        }
+      />
+      <ExpandableFacetGroup
+        field={COUNTRIES_FIELD}
+        id="navigator-geographic-countries"
+        label={intl.formatMessage(messages.countries)}
+        emptyMessage={intl.formatMessage(messages.noOptionsAvailable)}
+        options={countryOptions}
+        onChange={(option) => updateChildFilter(COUNTRIES_FIELD, option)}
+      />
+      <NavigatorActiveFilters
+        filters={filters}
+        onRemove={(field, value, type) => removeFilter(field, value, type)}
+      />
+    </fieldset>
+  );
+};
+
+export default NavigatorGeographicCoverageFacet;

package/src/components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet.test.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { useSearchContext } from '@eeacms/search/lib/hocs';
+import NavigatorGeographicCoverageFacet, {
+  COUNTRIES_FIELD,
+  TRANSNATIONAL_REGION_FIELD,
+} from './NavigatorGeographicCoverageFacet';
+
+jest.mock('@eeacms/search/components', () => ({
+  Term: ({ term }) => <>{term}</>,
+}));
+jest.mock('@eeacms/search/lib/hocs', () => ({
+  useSearchContext: jest.fn(),
+}));
+
+const renderFacet = ({
+  filters = [],
+  onRemove = jest.fn(),
+  onSelect = jest.fn(),
+} = {}) => {
+  const addFilter = jest.fn();
+  const removeFilter = jest.fn();
+
+  useSearchContext.mockReturnValue({
+    addFilter,
+    removeFilter,
+    filters,
+    facets: {
+      [TRANSNATIONAL_REGION_FIELD]: [
+        {
+          data: [
+            { value: 'Alpine Space', count: 3 },
+            { value: 'Outermost regions', count: 2 },
+          ],
+        },
+      ],
+      [COUNTRIES_FIELD]: [
+        {
+          data: [
+            { value: 'Germany', count: 4 },
+            { value: 'Spain', count: 2 },
+          ],
+        },
+      ],
+    },
+  });
+
+  render(
+    <IntlProvider locale="en">
+      <NavigatorGeographicCoverageFacet
+        onRemove={onRemove}
+        onSelect={onSelect}
+        options={[
+          { value: 'Global', count: 5, selected: false },
+          { value: 'Europe', count: 8, selected: false },
+          {
+            value: 'Macro-Transnational region',
+            count: 4,
+            selected: false,
+          },
+          { value: 'Countries', count: 6, selected: false },
+        ]}
+      />
+    </IntlProvider>,
+  );
+
+  return { addFilter, onRemove, onSelect, removeFilter };
+};
+
+describe('NavigatorGeographicCoverageFacet', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows Globe and Europe as direct options and filters by the raw value', () => {
+    const { onSelect } = renderFacet();
+
+    expect(screen.getByText('Global')).toBeInTheDocument();
+    expect(screen.getByText('Europe')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('Global'));
+
+    expect(onSelect).toHaveBeenCalledWith('Global');
+  });
+
+  it('expands and filters Macro-Transnational region values', () => {
+    const { addFilter } = renderFacet();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Macro-Transnational region' }),
+    );
+    fireEvent.click(screen.getByLabelText('Outermost regions'));
+
+    expect(addFilter).toHaveBeenCalledWith(
+      TRANSNATIONAL_REGION_FIELD,
+      'Outermost regions',
+      'any',
+    );
+  });
+
+  it('opens Countries when it contains an active selection and removes it', () => {
+    const { removeFilter } = renderFacet({
+      filters: [
+        {
+          field: COUNTRIES_FIELD,
+          values: ['Germany'],
+          type: 'any',
+        },
+      ],
+    });
+
+    fireEvent.click(screen.getByLabelText('Germany'));
+
+    expect(removeFilter).toHaveBeenCalledWith(
+      COUNTRIES_FIELD,
+      'Germany',
+      'any',
+    );
+  });
+});

package/src/index.js

@@ -54,6 +54,7 @@ import ClusterHorizontalCardItem from './components/Search/Result/ClusterHorizon
 import NavigatorCatalogueCardItem from './components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem';
 import NavigatorCatalogueMapView from './components/Search/NavigatorCatalogue/NavigatorCatalogueMapView';
 import NavigatorCatalogueContentView from './components/Search/NavigatorCatalogue/NavigatorCatalogueContentView';
+import NavigatorGeographicCoverageFacet from './components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet';
 import NavigatorGuideLayout from './components/Search/NavigatorGuide/NavigatorGuideLayout';
 import NavigatorGuideContentView from './components/Search/NavigatorGuide/NavigatorGuideContentView';
 
@@ -434,6 +435,10 @@ const applyConfig = (config) => {
   config.settings.searchlib.resolve.NavigatorCatalogueContentView = {
     component: NavigatorCatalogueContentView,
   };
+  config.settings.searchlib.resolve.NavigatorGeographicCoverageFacet = {
+    ...config.settings.searchlib.resolve.MultiTermFacet,
+    component: NavigatorGeographicCoverageFacet,
+  };
   config.settings.searchlib.resolve.NavigatorGuideLayout = {
     component: NavigatorGuideLayout,
   };

package/src/search/navigator_catalogue/facets.js

@@ -7,6 +7,14 @@ import {
 } from './../common';
 
 const messages = defineMessages({
+  geographicCoverage: {
+    id: 'Geographic coverage',
+    defaultMessage: 'Geographic coverage',
+  },
+  macroTransnationalRegion: {
+    id: 'Macro-Transnational region',
+    defaultMessage: 'Macro-Transnational region',
+  },
   climateHazards: {
     id: 'Climate hazards',
     defaultMessage: 'Climate hazards',
@@ -59,7 +67,28 @@ const facets = [
     label: messages.implementationLevel,
     alwaysVisible: false,
   }),
-  geographic_countries,
+  multiTermFacet({
+    field: 'cca_geographic_characterisation.keyword',
+    factory: 'NavigatorGeographicCoverageFacet',
+    isFilterable: false,
+    isMulti: true,
+    label: messages.geographicCoverage,
+    hideActiveFilters: true,
+    alwaysVisible: true,
+  }),
+  multiTermFacet({
+    field: 'cca_geographic_transnational_region.keyword',
+    isFilterable: false,
+    isFilter: true,
+    isMulti: true,
+    label: messages.macroTransnationalRegion,
+    showInFacetsList: true,
+  }),
+  {
+    ...geographic_countries,
+    isFilter: true,
+    showInFacetsList: true,
+  },
   multiTermFacet({
     field: 'cca_adaptation_support_cycle_step.keyword',
     isFilterable: false,

package/theme/globals/navigator.less

@@ -117,6 +117,55 @@
   }
 }
 
+.navigator-geographic-facet {
+  min-width: 18rem;
+
+  .navigator-geographic-facet-group {
+    border-top: 1px solid @navigatorBorderColor;
+  }
+
+  .navigator-geographic-facet-group-toggle {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.65em 0.5em;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
+
+    &.active {
+      background: @navigatorCriteriaBackgroundColor;
+    }
+
+    i.icon {
+      width: auto;
+      height: auto;
+      margin: 0 0 0 1rem;
+    }
+  }
+
+  #navigator-geographic-countries {
+    column-count: 2;
+    column-gap: 1rem;
+  }
+
+  .sui-multi-checkbox-facet
+    .sui-multi-checkbox-facet__option-label:first-child {
+    margin-top: 0;
+  }
+}
+
+.navigator-geographic-facet-empty {
+  padding: 0.8em 0.5em;
+  font-size: 14px;
+}
+
 .catalogue-compare-panel {
   position: fixed;
   z-index: 1000;