@eeacms/volto-cca-policy 1.0.3 → 1.0.4

package/src/components/theme/CompareTools/CompareToolsView.test.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { useAtom } from 'jotai';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import CompareToolsView from './CompareToolsView';
+import { fetchResultsByUid } from './utils';
+
+jest.mock('jotai', () => ({
+  ...jest.requireActual('jotai'),
+  useAtom: jest.fn(),
+}));
+
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn(),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+  useLocation: jest.fn(),
+}));
+
+jest.mock('@plone/volto/helpers/Helmet/Helmet', () => () => null);
+jest.mock('@plone/volto/helpers/BodyClass/BodyClass', () => () => null);
+jest.mock('../BannerTitle/BannerTitle', () => () => null);
+jest.mock(
+  '@plone/volto/components/manage/UniversalLink/UniversalLink',
+  () =>
+    ({ children, href, ...props }) => (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    ),
+);
+jest.mock('@plone/volto/registry', () => ({
+  __esModule: true,
+  default: {
+    settings: {
+      searchlib: {
+        searchui: {
+          navigatorCatalogueSearch: {
+            landingPageURL: '/en/navigator/tool-catalogue',
+          },
+        },
+      },
+    },
+  },
+}));
+
+jest.mock('./utils', () => ({
+  MAX_COMPARE_TOOLS: 4,
+  compareToolsAtom: {},
+  fetchResultsByUid: jest.fn(),
+  getCompareToolUid: (result) => result.cca_uid?.raw || '',
+  getPathname: (url) => url?.split('?')[0] || '',
+}));
+
+describe('CompareToolsView accessibility', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useAtom.mockReturnValue([[], jest.fn()]);
+    useDispatch.mockReturnValue(jest.fn());
+    useSelector.mockReturnValue('en');
+    useHistory.mockReturnValue({ push: jest.fn() });
+    useLocation.mockReturnValue({
+      pathname: '/en/navigator/compare',
+      search: '?uid=one&uid=two',
+      hash: '',
+      state: {},
+    });
+    fetchResultsByUid.mockResolvedValue([
+      {
+        cca_uid: { raw: 'one' },
+        title: 'Tool one',
+        href: '/tool-one',
+      },
+      {
+        cca_uid: { raw: 'two' },
+        title: 'Tool two',
+        href: '/tool-two',
+      },
+    ]);
+  });
+
+  it('labels the table, row headers, and remove actions', async () => {
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+
+    expect(
+      await screen.findByRole('table', { name: 'Compare tools' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('rowheader', { name: 'Usability' }),
+    ).toHaveAttribute('scope', 'row');
+    expect(
+      screen.getByRole('rowheader', { name: 'Functionality' }),
+    ).toHaveAttribute('scope', 'row');
+    expect(
+      screen.getByRole('button', {
+        name: 'Remove Tool one from comparison',
+      }),
+    ).toBeInTheDocument();
+  });
+});

package/src/constants.js

@@ -123,54 +123,6 @@ export const DOWNLOAD_MISSION_FUNDING_FIELDS = [
   },
 ];
 
-// Download fields for mission content types
-// Don't delete - might be needed later (ticket refs #295149)
-// export const DOWNLOAD_MISSION_STORIES_FIELDS = [
-//   { field: 'about', name: 'About' },
-//   { field: 'title', name: 'Title' },
-//   { field: 'main_content', name: 'Content' },
-//   { field: 'created', name: 'Creation Date' },
-//   { field: 'issued', name: 'Issued Date' },
-//   { field: 'cca_climate_impacts', name: 'Climate impact' },
-//   { field: 'cca_adaptation_sectors', name: 'Sectors' },
-//   { field: 'key_system', name: 'Key Community Systems' },
-//   { field: 'cca_funding_programme', name: 'Funding programme' },
-//   {
-//     field: 'spatial',
-//     name: 'Countries ',
-//   },
-//   { field: 'cca_keywords', name: 'Keywords' },
-// ];
-
-// export const DOWNLOAD_MISSION_PROJECTS_FIELDS = [
-//   { field: 'about', name: 'About' },
-//   { field: 'title', name: 'Title' },
-//   { field: 'main_content', name: 'Content' },
-//   { field: 'created', name: 'Creation Date' },
-//   { field: 'issued', name: 'Issued Date' },
-//   { field: 'cca_keywords', name: 'Keywords' },
-//   { field: 'cca_funding_programme', name: 'Funding Programme' },
-//   { field: 'cca_climate_impacts', name: 'Climate impact' },
-//   { field: 'cca_adaptation_elements', name: 'Adaptation Approaches' },
-//   { field: 'cca_adaptation_sectors', name: 'Sectors' },
-//   { field: 'cca_geographic_countries', name: 'Countries' },
-// ];
-
-// export const DOWNLOAD_MISSION_TOOLS_FIELDS = [
-//   { field: 'about', name: 'About' },
-//   { field: 'title', name: 'Title' },
-//   { field: 'main_content', name: 'Content' },
-//   { field: 'created', name: 'Creation Date' },
-//   { field: 'issued', name: 'Issued Date' },
-//   { field: 'cca_rast_steps', name: 'RAST step(s) of relevance' },
-//   { field: 'cca_geographical_scale', name: 'Geographical scale' },
-//   { field: 'cca_climate_impacts', name: 'Climate impact' },
-//   { field: 'cca_tool_language', name: 'Language(s) of the tool' },
-//   { field: 'cca_adaptation_sectors', name: 'Sectors' },
-//   { field: 'cca_most_useful_for', name: 'Most useful for' },
-//   { field: 'cca_user_requirements', name: 'User requirements' },
-// ];
-
 export const EEA_LANGUAGES = [
   { name: 'български', code: 'bg' },
   { name: 'Español', code: 'es' },

package/theme/globals/navigator.less

@@ -8,6 +8,39 @@
 @navigatorIconBackgroundColor: #f5f9fb;
 @navigatorIconColor: #7890a2;
 
+.navigator-small-clear-button() {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  min-height: 28px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+  border: 0;
+  border-radius: 50%;
+  margin: 0 !important;
+  background: transparent;
+  box-shadow: none;
+  color: #607482;
+  line-height: 1;
+
+  i.icon {
+    display: block;
+    width: auto;
+    height: auto;
+    margin: 0 !important;
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  &:hover,
+  &:focus {
+    background: #e8f0f5;
+    box-shadow: none;
+    color: #30495b;
+  }
+}
+
 .navigator-tool-icon {
   display: inline-flex;
   flex: 0 0 auto;
@@ -154,37 +187,8 @@
   }
 
   .ui.button.compare-panel-tool-clear {
-    display: inline-flex;
-    width: 28px;
-    height: 28px;
-    min-height: 28px;
+    .navigator-small-clear-button();
     flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    padding: 0 !important;
-    border: 0;
-    border-radius: 50%;
-    margin: 0 !important;
-    background: transparent;
-    box-shadow: none;
-    color: #607482;
-    line-height: 1;
-
-    i.icon {
-      display: block;
-      width: auto;
-      height: auto;
-      margin: 0 !important;
-      font-size: 1rem;
-      line-height: 1;
-    }
-
-    &:hover,
-    &:focus {
-      background: #e8f0f5;
-      box-shadow: none;
-      color: #30495b;
-    }
   }
 
   .compare-panel-actions {
@@ -320,7 +324,8 @@
     table-layout: fixed;
 
     thead th,
-    tbody td {
+    tbody td,
+    tbody th {
       border-color: @navigatorBorderColor;
     }
 
@@ -335,15 +340,18 @@
       vertical-align: bottom;
     }
 
-    tbody td {
+    tbody td,
+    tbody th {
       min-height: 84px;
       padding: 1.35rem 1.25rem;
       line-height: 1.45;
       vertical-align: top;
       background: #fff;
+      font-weight: inherit;
+      text-align: left;
     }
 
-    tbody td:first-child {
+    tbody th:first-child {
       background: @navigatorCriteriaBackgroundColor;
     }
   }
@@ -430,40 +438,144 @@
   }
 }
 
-body.searchlib-page .searchapp-navigatorCatalogueSearch {
-  .back-link {
-    display: none;
+.navigator-catalogue-map {
+  display: grid;
+  width: 100%;
+  height: 600px;
+  min-height: 600px;
+  align-items: stretch;
+  gap: 1.5rem;
+  grid-template-columns: minmax(0, 4fr) minmax(12rem, 1fr);
+
+  .ol-map-wrapper,
+  .ol-map {
+    height: 600px;
   }
 
-  .search-input,
-  .sui-search-box {
-    margin-bottom: 2rem;
+  .navigator-catalogue-map-canvas {
+    position: relative;
+    min-width: 0;
+    height: 100%;
   }
 
-  .navigator-catalogue-map-placeholder {
+  .ol-map {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ol-layer {
+    transition: opacity 0.3s ease;
+  }
+}
+
+.navigator-catalogue-map-loading {
+  display: flex;
+  min-height: 400px;
+  align-items: center;
+  justify-content: center;
+  color: #7c8a96;
+  font-size: 1rem;
+  gap: 1rem;
+
+  i.icon.loading {
+    font-size: 1.5rem;
+  }
+}
+
+.navigator-catalogue-map-tooltip {
+  position: absolute;
+  z-index: 1000;
+  min-width: 200px;
+  max-width: 280px;
+  padding: 1em;
+  margin-top: -10px;
+  margin-left: 15px;
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+
+  .tooltip-header {
+    font-size: 16px;
+  }
+
+  .tooltip-body {
+    margin: 1em 0;
+    font-size: 0.875rem;
+  }
+
+  .tooltip-actions {
+    .ui.button {
+      width: 100%;
+      margin: 0;
+    }
+  }
+
+  .ui.button.tooltip-close {
+    .navigator-small-clear-button();
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+.navigator-catalogue-map-legend {
+  font-size: 16px;
+
+  .legend-title {
+    margin-top: 0;
+  }
+
+  .legend-item {
     display: flex;
-    min-height: 320px;
     align-items: center;
-    justify-content: center;
-    border: 1px dashed @navigatorBorderColor;
-    color: @navigatorMetaTextColor;
-    gap: 1rem;
+    padding: 0.2rem 0;
+    gap: 0.5rem;
 
-    i.icon {
-      color: @secondaryColor;
-      font-size: 2.5rem;
+    .legend-color {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
     }
+  }
+}
 
-    h3 {
-      margin-bottom: 0.25rem;
-      color: @primaryColor;
-    }
+@media only screen and (max-width: 768px) {
+  .navigator-catalogue-map {
+    height: auto;
+    min-height: 0;
+    grid-template-columns: minmax(0, 1fr);
 
-    p {
-      margin: 0;
+    .navigator-catalogue-map-canvas {
+      height: 400px;
+      min-height: 350px;
     }
   }
 
+  .navigator-catalogue-map-tooltip {
+    top: auto !important;
+    bottom: 1rem;
+    left: 50% !important;
+    margin-left: 0;
+    transform: translateX(-50%);
+  }
+
+  .navigator-catalogue-map-legend {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+body.searchlib-page .searchapp-navigatorCatalogueSearch {
+  .back-link {
+    display: none;
+  }
+
+  .search-input,
+  .sui-search-box {
+    margin-bottom: 2rem;
+  }
+
   .ui.right.sidebar {
     background-color: #fff;
     box-shadow: -4px 0 4px rgba(0, 0, 0, 0.25);
@@ -687,12 +799,22 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
     background: #ddd8f5;
     color: #51458a;
   }
+
+  &.more {
+    border: 0;
+    cursor: pointer;
+    font-family: inherit;
+  }
 }
 
 .navigator-guide-search {
   .navigator-guide-header {
     margin-bottom: 2rem;
     text-align: center;
+
+    h2 {
+      margin-top: 0.5em;
+    }
   }
 
   .navigator-guide-preview-header {
@@ -705,10 +827,11 @@ body.searchlib-page .searchapp-navigatorCatalogueSearch {
 
   .navigator-guide-eyebrow,
   .navigator-guide-preview-label {
-    font-size: 0.75rem;
+    font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
+    color: @navigatorAccentColor;
   }
 
   .navigator-guide-layout {

package/artifacts/BLOCKS.md

@@ -1,167 +0,0 @@
-# Custom Blocks in `volto-cca-policy`
-
-This addon registers **20 custom blocks** and extends **2 existing blocks** (Listing, Tabs Block) with new variations.
-All blocks are installed via `src/components/manage/Blocks/index.js`.
-
----
-
-## Custom Blocks
-
-### AST Navigation
-- **Block ID:** `astNavigation`
-- **Group:** `site`
-- **Restricted to:** Mission pages (via `blockAvailableInMission`)
-- **What it does:** Renders a visual navigation map (logo map) for the *Adaptation Support Tool (AST)*. Supports two image types (`ast` and `uast`). Editors configure 6 linked items that map to clickable regions on the logo image. Clicking a region navigates to the corresponding content page.
-
-### C3S Indicators Glossary
-- **Block ID:** `c3SIndicatorsGlossaryBlock`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Displays a glossary table of C3S (Copernicus Climate Change Service) indicator terms. The content is provided by a server-side `@components` view (`c3s_indicators_glossary_table`) and rendered as raw HTML.
-
-### C3S Indicators Listing
-- **Block ID:** `c3SIndicatorListingBlock`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Renders a description and a linked list of C3S indicators. Content (description text + item list with URLs) is provided by the server-side `@components` view `c3s_indicators_listing`.
-
-### C3S Indicators Overview
-- **Block ID:** `c3SIndicatorsOverviewBlock`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Displays an HTML description/overview of C3S indicators, fetched from the server-side `@components` view `c3s_indicators_overview`.
-
-### Case Study Explorer
-- **Block ID:** `caseStudyExplorer`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** An interactive map-based explorer for climate adaptation case studies. Loads case study data from an ArcGIS JSON endpoint (`@@case-studies-map.arcgis.json`). Provides filter controls (sectors, impacts, etc.) and an interactive map with clickable features. Supports URL-based filter parameters.
-
-### Collection Statistics
-- **Block ID:** `collectionStats`
-- **Group:** `site`
-- **What it does:** Displays aggregated statistics for a content collection. Shows two groups of stats with icons and counts:
-  - **Health impacts:** Climate-sensitive diseases, Heat, Wildfires, Droughts and floods, Air pollution and aero-allergens
-  - **Content types:** Adaptation options, Case studies, Guidance, Indicators, Information portals, Organisations, Publications, Research projects, Tools, Videos
-- Stats are computed from query stats via `getQueryStats` and can link to filtered search results.
-
-### Content Links
-- **Block ID:** `contentLinks`
-- **Group:** `site`
-- **Variations:**
-  - `default` — Simple list of linked content items
-  - `navigationList` — Navigation-style list with active-state highlighting based on current URL
-  - `dropdown` — Dropdown selector for linking to content items (with configurable placeholder text)
-- **What it does:** Displays a set of manually selected content items as links. Useful for sidebars, navigation menus, or quick-access link groups.
-
-### Country Map Heat Index
-- **Block ID:** `countryMapHeatIndex`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** An interactive OpenLayers map of European countries colored by heat index data. Fetches metadata from `@@countries-heat-index-json`. Countries are highlighted with tooltips and are clickable, navigating to the respective country page. Includes a filter control and supports lazy loading via visibility sensor.
-
-### Country Map Observatory
-- **Block ID:** `countryMapObservatory`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** An interactive OpenLayers map for the Health Observatory section. Renders EU countries with metadata from `@@countries-metadata-extract-2025`. Supports thematic map modes (e.g., "National adaptation policy"), tooltips, and click-to-navigate interactions. Uses WMS tile sources and lazy loading.
-
-### Country Map Profile
-- **Block ID:** `countryMapProfile`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** An interactive OpenLayers map for country profiles. Renders EU countries with metadata from `@@countries-metadata-extract-2025` (including flag images). Supports thematic map modes, tooltips, click-to-navigate, and a filter control. Uses WMS tile sources and lazy loading.
-
-### Country Profile Detail
-- **Block ID:** `countryProfileDetail`
-- **Group:** `site`
-- **What it does:** Renders the detailed country profile content provided by a server-side `@components` view (`countryprofile.html`). Displays tabbed sections with accordions, including a language disclaimer for non-English content and optional top messages/accordions.
-
-### Data Connected Embed Block
-- **Block ID:** `data_connected_embed` (extends `@eeacms/volto-datablocks`)
-- **What it does:** Customizes the data-connected embed block from `volto-datablocks` to inject the current page language (`lang`) as an additional query parameter. This ensures embedded data visualizations respect the page's language context. Wraps the base `ViewEmbedBlock` with Redux connectivity and `injectIntl`.
-
-### ECDE Indicators
-- **Block ID:** `ecdeIndicators`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Embeds European Climate Data Explorer (ECDE) indicator visualizations from the Copernicus Climate Data Store (CDS). Loads region data from an EEA ArcGIS service and renders interactive CDS toolbox apps (e.g., growing degree days, mean temperature) for selected European NUTS regions.
-
-### Filter AceContent
-- **Block ID:** `filterAceContent`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **Variations:**
-  - `simpleListing` — Listing view (default)
-  - `simpleCards` — Card grid view
-- **What it does:** Provides a faceted search/filter interface for ACE (Adaptation Content Exchange) content. Supports filtering by bio-regions, countries, climate impacts, sectors, element types, funding programmes, macro-regions, key types, and free-text search. Uses a custom select widget with styled dropdowns.
-
-### Flourish Visualization
-- **Block ID:** `FlourishEmbedBlock`
-- **Group:** `site`
-- **What it does:** Embeds interactive data visualizations from [Flourish.studio](https://flourish.studio). Editors paste a Flourish embed code, and the block extracts the visualization URL, wraps it in an iframe with privacy protection (lazy loading via consent gate), and displays it at a fixed height of 980px.
-
-### RAST (Related And Sub-Tree) Block
-- **Block ID:** `rastBlock`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Renders a contextual navigation block showing related content and sub-items from a configurable root path. Supports skipping specific items and optionally showing subfolders. Uses `ContextNavigation` and `RASTAccordion` components to display a hierarchical accordion-style navigation tree.
-
-### Read More
-- **Block ID:** `readMoreBlock`
-- **Group:** `site`
-- **What it does:** Creates a collapsible "read more" section. Wraps all preceding sibling blocks in a height-constrained container with an expand/collapse button. Configurable properties include open/closed labels, button position, and initial height.
-
-### Redirection Block
-- **Block ID:** `redirectBlock`
-- **Group:** `site`
-- **What it does:** Automatically redirects anonymous users to a configured target URL. Logged-in users (editors) see a discreet notice showing the redirect target instead of being redirected, so they can still edit the page.
-
-### Relevant AceContent
-- **Block ID:** `relevantAceContent`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Displays a list of relevant ACE (Adaptation Content Exchange) items. Supports two modes: manually selected items and dynamically searched results (by element type, sector, search type, special tags, or search text). Can combine both modes. Renders as a simple linked list.
-
-### Search AceContent
-- **Block ID:** `searchAceContent`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Displays search results from the ACE content search API. Shows results as a linked list with translated labels and counts. Includes a "Share your information" button linking to the share page.
-
-### Tabs Block — Spotlight Variation
-- **Block ID:** `tabs_block` (extends `@eeacms/volto-tabs-block`)
-- **Variation added:** `spotlight`
-- **What it does:** Adds a "Spotlight" variation to the standard tabs block. Renders tab content with a spotlight-style layout featuring configurable icons or images (with position and size options), simple markdown support, and scroll-to-target behavior.
-
-### Trans Region Select
-- **Block ID:** `transRegionSelect`
-- **Group:** `site`
-- **Restricted to:** Mission pages
-- **What it does:** Renders a dropdown selector for transnational regions. Fetches region data from the content's `@components` view (`transnationalregion`) and provides a dropdown with links to each region's page, plus a default "Other regions" option.
-
----
-
-## Extended Standard Blocks
-
-### Listing (standard Volto block — extended)
-The standard Volto `listing` block is extended with **6 new variations**:
-
-| Variation | Description |
-|-----------|-------------|
-| `dropdown` | Renders listed items as a dropdown selector with a configurable placeholder text |
-| `organisationCards` | Displays items as a 4-column card grid with logo/image and description (for organisations) |
-| `indicatorCards` | Displays C3S/Lancet Countdown indicators as styled cards with title and description |
-| `eventCards` | Displays events as cards with date info, contact details, event URL, and EEA branding |
-| `eventAccordion` | Displays events in an accordion layout with formatted date ranges and "read more" expand |
-| `simpleListing` | Plain text list of linked items (minimal styling) |
-| `simpleCards` | Generic 4-column card grid with image/logo and title |
-
-Additionally, the listing block's `noResultsComponent` is overridden to render nothing (instead of showing "No results" text).
-
----
-
-## Shared Utilities
-
-- **`withResponsiveContainer.js`** — HOC that wraps map blocks in a responsive container (used by Country Map blocks)
-- **`withVisibilitySensor.jsx`** — HOC that defers map initialization until the block is visible in the viewport (lazy loading)