@eeacms/volto-bise-policy 1.3.10 → 1.3.12

package/CHANGELOG.md

@@ -4,6 +4,42 @@ 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.3.12](https://github.com/eea/volto-bise-policy/compare/1.3.11...1.3.12) - 5 November 2026
+
+#### :rocket: New Features
+
+- feat(CaseStudyMap): add selection highlight and title popup [laszlocseh - [`52c3d89`](https://github.com/eea/volto-bise-policy/commit/52c3d894f3da4ecf741ddf0fd9333298cca23187)]
+- feat(CaseStudyExplorer): jump to the page of a case study selected on the map [laszlocseh - [`9c2fd56`](https://github.com/eea/volto-bise-policy/commit/9c2fd5660348bcace5aa4150082a3184ec8c0363)]
+- feat(CaseStudyExplorer): add dynamic ecosystem chip overflow popup [laszlocseh - [`feb69e2`](https://github.com/eea/volto-bise-policy/commit/feb69e24a5cd1330e6fc7f78aaa64d38ca94c47f)]
+
+#### :bug: Bug Fixes
+
+- fix(CaseStudyExplorer): replace useId with a custom hook [laszlocseh - [`45fbbd0`](https://github.com/eea/volto-bise-policy/commit/45fbbd08c9f7be705d86cc37eda505b4a5ca6667)]
+- fix(CaseStudyExplorer): remove media placeholder and adjust map marker size [laszlocseh - [`59a037f`](https://github.com/eea/volto-bise-policy/commit/59a037f718efb17975acd2b7bd084411af17513c)]
+- fix(CaseStudyExplorer): hide pagination when there are no results [laszlocseh - [`2f07403`](https://github.com/eea/volto-bise-policy/commit/2f074037c98a181f5a40f7dc7832f41104660191)]
+- fix: es lint [laszlocseh - [`f226bb7`](https://github.com/eea/volto-bise-policy/commit/f226bb740cad4d83615cd8eca22c091fdeff112c)]
+
+#### :nail_care: Enhancements
+
+- change(CaseStudyExplorer): update filters, design [laszlocseh - [`470a068`](https://github.com/eea/volto-bise-policy/commit/470a068a352e4388d131eb58cfadcf42e94bde87)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`30fc35a`](https://github.com/eea/volto-bise-policy/commit/30fc35a061321bc19679f98adb74030c16a85c41)]
+- style(CaseStudyExplorer): remove duplicate attribute [laszlocseh - [`538b42e`](https://github.com/eea/volto-bise-policy/commit/538b42e3e1c01544a865f778c6cd60582a14a1c4)]
+- style: Automated code fix [eea-jenkins - [`0e2b827`](https://github.com/eea/volto-bise-policy/commit/0e2b8274a79aa0e1acab7725b293a69a3a595a37)]
+- style: Automated code fix [eea-jenkins - [`c2f8597`](https://github.com/eea/volto-bise-policy/commit/c2f8597a3d54d8be36a6e34c6e9a8cbbfae33064)]
+
+#### :hammer_and_wrench: Others
+
+- test(CaseStudyExplorer): fix hooks.test.js [laszlocseh - [`c6d1c03`](https://github.com/eea/volto-bise-policy/commit/c6d1c039593072c1eaef56cb9d642699d61b1b84)]
+- test(CaseStudyExplorer): update test expectations for UI changes [laszlocseh - [`43e2f34`](https://github.com/eea/volto-bise-policy/commit/43e2f349f724a7d6957f01fe8863da1f57740660)]
+### [1.3.11](https://github.com/eea/volto-bise-policy/compare/1.3.10...1.3.11) - 29 October 2026
+
+#### :house: Internal changes
+
+- style(natura2000): add habitat section styles [laszlocseh - [`f816db5`](https://github.com/eea/volto-bise-policy/commit/f816db5c2dc08ea8cb9c24f6e6c97f91468d676d)]
+
 ### [1.3.10](https://github.com/eea/volto-bise-policy/compare/1.3.9...1.3.10) - 21 September 2026
 
 #### :rocket: New Features
@@ -107,10 +143,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - enable attributions for osm [Claudia Ifrim - [`de583af`](https://github.com/eea/volto-bise-policy/commit/de583af4eff7c7a3a91a9845eb372e2bfa86fec1)]
 ### [1.3.3](https://github.com/eea/volto-bise-policy/compare/1.3.2...1.3.3) - 9 July 2026
 
-#### :house: Internal changes
-
-- chore: [JENKINSFILE] sanitize sonarqube command [valentinab25 - [`8e2dc1a`](https://github.com/eea/volto-bise-policy/commit/8e2dc1a14f3230f197f009a76bf87587724b6e3a)]
-
 #### :hammer_and_wrench: Others
 
 - test: pin Chromium version 149 to work with Cypress [valentinab25 - [`5841387`](https://github.com/eea/volto-bise-policy/commit/5841387ae59380ee15af8c82a4df81c4767e1b7c)]
@@ -136,7 +168,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- update jenkinsfile [nileshgulia1 - [`84315d2`](https://github.com/eea/volto-bise-policy/commit/84315d29e36427a50fcc1a939c9e650b69bd81f2)]
 - fix sonarqube [nileshgulia1 - [`2da4f19`](https://github.com/eea/volto-bise-policy/commit/2da4f1921027093a95d9011ef3ff8d2977fc0dcc)]
 - fix duplicated code [nileshgulia1 - [`91cdb7a`](https://github.com/eea/volto-bise-policy/commit/91cdb7ad2221506a15ed988e28c7e918b07bcbbf)]
 - fix slashmenu styles on content box [nileshgulia1 - [`13765ad`](https://github.com/eea/volto-bise-policy/commit/13765ad26acc9af1f1066b164b4c58393b902c01)]
@@ -162,7 +193,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- update jenkinsfile [nileshgulia1 - [`84315d2`](https://github.com/eea/volto-bise-policy/commit/84315d29e36427a50fcc1a939c9e650b69bd81f2)]
 - fix sonarqube [nileshgulia1 - [`2da4f19`](https://github.com/eea/volto-bise-policy/commit/2da4f1921027093a95d9011ef3ff8d2977fc0dcc)]
 - fix duplicated code [nileshgulia1 - [`91cdb7a`](https://github.com/eea/volto-bise-policy/commit/91cdb7ad2221506a15ed988e28c7e918b07bcbbf)]
 - fix slashmenu styles on content box [nileshgulia1 - [`13765ad`](https://github.com/eea/volto-bise-policy/commit/13765ad26acc9af1f1066b164b4c58393b902c01)]
@@ -211,11 +241,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Remove z-index styles from header and toolbar [dobri1408 - [`4fc001e`](https://github.com/eea/volto-bise-policy/commit/4fc001e8e0336540b08b685eed42060fd9ca4190)]
 ### [1.2.39](https://github.com/eea/volto-bise-policy/compare/1.2.38...1.2.39) - 24 February 2026
 
-#### :house: Internal changes
-
-- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`4c2d75b`](https://github.com/eea/volto-bise-policy/commit/4c2d75bbf6dca47929c6613749169b40ed483985)]
-- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`f99c622`](https://github.com/eea/volto-bise-policy/commit/f99c622726cfd711704f50218a2f1fe833974ec3)]
-
 #### :hammer_and_wrench: Others
 
 - add eea brand colors [Dobricean Ioan Dorian - [`ba09f05`](https://github.com/eea/volto-bise-policy/commit/ba09f05dc50952cccd9e3acb8ee2938600b20f9f)]
@@ -477,7 +502,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: customize root theme to use volto-spotlight - refs #259794 [ana-oprea - [`347f96e`](https://github.com/eea/volto-bise-policy/commit/347f96e335139f9656abd34c308c531b05de85e7)]
 - chore: change the theme and alias to volto-spotlight and add volto-spotlight to package.json - refs #259794 [ana-oprea - [`52732a1`](https://github.com/eea/volto-bise-policy/commit/52732a17b3247a04ffae0a3f5118e173afa98157)]
 - chore: change theme to eea-volto-theme, change config.alias - refs #259794 [ana-oprea - [`c2d08ea`](https://github.com/eea/volto-bise-policy/commit/c2d08ea08a7f0e5f6f7d32149e60ea3f3e901923)]
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`a3c9488`](https://github.com/eea/volto-bise-policy/commit/a3c9488c5d09ba97fe5976675524d436080a2460)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`fddc30f`](https://github.com/eea/volto-bise-policy/commit/fddc30f11a1d8ec290edaca2d924282f5e113bc6)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`005ce74`](https://github.com/eea/volto-bise-policy/commit/005ce742dbd014fde27e417059251233365766dd)]
 
@@ -487,23 +511,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix tests [Claudia Ifrim - [`a8fc12f`](https://github.com/eea/volto-bise-policy/commit/a8fc12fbf962289c1aac42f4b54352bb585af735)]
 - test: in cypress don't wait for breadcrumbs [ana-oprea - [`89e3810`](https://github.com/eea/volto-bise-policy/commit/89e38104e6f8292cdbf2b948f7fe4b7dc064bcef)]
 - Replace norefferer with noopener for links that open in new tab [David Ichim - [`ef3781a`](https://github.com/eea/volto-bise-policy/commit/ef3781ac7368bf8f497082aaee0c63538c0760da)]
-- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c1277ba`](https://github.com/eea/volto-bise-policy/commit/c1277bacf840ee9feccbfd6a2c85f0b25a9a9125)]
-- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`c944153`](https://github.com/eea/volto-bise-policy/commit/c944153710fd53c5d48863cf363464273e25f52e)]
-- test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`d648d52`](https://github.com/eea/volto-bise-policy/commit/d648d525a2fc5076577fe0f75ff9782bf0d1d4e9)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`2a7affe`](https://github.com/eea/volto-bise-policy/commit/2a7affe33d737704bdba117c4a5c8c6748ef7a47)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`5929642`](https://github.com/eea/volto-bise-policy/commit/59296420105d0e8c1f1547aa0cd17a019e478c2b)]
-- test: [JENKINS] fix jest config, fail with logs on coverage [valentinab25 - [`b1142f1`](https://github.com/eea/volto-bise-policy/commit/b1142f1da3667a9f56720f65bebce897a5dd8005)]
 - test: cypress should not wait for navigation, actions, types - refs #259794 [ana-oprea - [`188637c`](https://github.com/eea/volto-bise-policy/commit/188637c78a0cae71b5ee48022507d559dfaceb3e)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`fa4e473`](https://github.com/eea/volto-bise-policy/commit/fa4e473018386ec3f09d7300d655c8cccdc19a0e)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`1d9135b`](https://github.com/eea/volto-bise-policy/commit/1d9135bb878b3c7a1b828085b99b9d27d78ce60e)]
 - remove cypress tests as it doesn t work on bise [Dobricean Ioan Dorian - [`ba7e2de`](https://github.com/eea/volto-bise-policy/commit/ba7e2defea2dcfd01537c3abb41fa9515ff0a3e3)]
 - add mega menu layout settings as #259794 said [dobri1408 - [`b9a3683`](https://github.com/eea/volto-bise-policy/commit/b9a3683e7d85f8c88ad8feac975c47c434f62c4a)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`9181908`](https://github.com/eea/volto-bise-policy/commit/9181908c7f4b51bdf83a34f8c7f25827de9b1cc6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`099d796`](https://github.com/eea/volto-bise-policy/commit/099d79669471e6924bf1e0bc51a79d54379c3a1a)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`6d5d8e2`](https://github.com/eea/volto-bise-policy/commit/6d5d8e29b04ddb92628245570055067ca3dcbb6c)]
 - test: fix comment [valentinab25 - [`4f27d5a`](https://github.com/eea/volto-bise-policy/commit/4f27d5af2e8895c7af4f1157521ca42682b96e23)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4c2fcb0`](https://github.com/eea/volto-bise-policy/commit/4c2fcb01065e1ef962317ba7be788fd1df079618)]
-- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`89afaa1`](https://github.com/eea/volto-bise-policy/commit/89afaa15892930452027ef8c8593fc6d193cda70)]
 ### [1.2.7](https://github.com/eea/volto-bise-policy/compare/1.2.6...1.2.7) - 9 August 2023
 
 #### :house: Documentation changes
@@ -624,10 +636,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(package.json): add @eeacms/volto-block-toc addon to addons list [Miu Razvan - [`ba5d5e6`](https://github.com/eea/volto-bise-policy/commit/ba5d5e6931b5ec324f6aa8c6b735e17963e71db2)]
 
-#### :house: Internal changes
-
-- chore(Jenkinsfile): remove VOLTO variable value [Miu Razvan - [`2c64b0d`](https://github.com/eea/volto-bise-policy/commit/2c64b0d534f670a5a8300927b10c398a3dba05ae)]
-
 #### :hammer_and_wrench: Others
 
 - update [Miu Razvan - [`639f91a`](https://github.com/eea/volto-bise-policy/commit/639f91a3830640e0d9062b136dd8184027d288f7)]
@@ -645,7 +653,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add missing dependencies [Miu Razvan - [`3712bf8`](https://github.com/eea/volto-bise-policy/commit/3712bf85fc537fa5448d80242fed56b26e33855b)]
 - Prepare 1.0.0 release [Miu Razvan - [`fbb707d`](https://github.com/eea/volto-bise-policy/commit/fbb707d01afe6642a223e2fb3e88abb677de241e)]
 - Update [Miu Razvan - [`487a390`](https://github.com/eea/volto-bise-policy/commit/487a3900f707d88a40d435d88ff6072f1eb9698f)]
-- Fix Jenkinsfile [Miu Razvan - [`96f92cc`](https://github.com/eea/volto-bise-policy/commit/96f92cc4f14b066ced8ec1c6e48a782780f10d80)]
 - Rename to volto-bise-policy [Miu Razvan - [`045b4aa`](https://github.com/eea/volto-bise-policy/commit/045b4aa61164c51db36db40fee1151d31829b9fa)]
 ### 0.1.0 - 7 December 2022
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -35,6 +35,7 @@
     "@plone-collective/volto-authomatic": "2.0.1",
     "dompurify": "^3.3.1",
     "esri-loader": "3.7.0",
+    "ol": "6.6.x",
     "plotly.js": "^2.28.0",
     "querystring": "0.2.1",
     "react-plotly.js": "2.6.0"

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyCard.jsx

@@ -0,0 +1,404 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import cx from 'classnames';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+import messages from './messages';
+import {
+  asValues,
+  // getArticleInfo,
+  getFacetValues,
+  valueLabel,
+} from './filters';
+import { getStatusColor, visibleChipCount } from './utils';
+
+/** Rows of chips a card shows before collapsing the rest into "+N". */
+const ECOSYSTEM_ROWS = 2;
+const CHIP_GAP_FALLBACK = 8;
+let nextPanelId = 0;
+
+// Volto may run on React versions that do not yet provide useId. Keep IDs
+// stable for the lifetime of a component instance without relying on that API.
+function usePanelId() {
+  const id = React.useRef(null);
+  if (id.current === null) id.current = `cse-panel-${++nextPanelId}`;
+  return id.current;
+}
+
+// Measure before the browser paints where possible, without warning on the
+// server-rendered first pass.
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+// const STATUS_LABELS = {
+//   planned: messages.statusPlanned,
+//   ongoing: messages.statusOngoing,
+//   completed: messages.statusCompleted,
+// };
+
+function StatusBadge({ status }) {
+  // const intl = useIntl();
+  // const label = STATUS_LABELS[status];
+
+  return (
+    <span className="cse-card-status">
+      <span
+        className="cse-card-status-dot"
+        style={{ backgroundColor: getStatusColor(status) }}
+        aria-hidden="true"
+      />
+      {/* <span className="cse-card-status-label">
+        {label ? intl.formatMessage(label) : status}
+      </span> */}
+    </span>
+  );
+}
+
+/**
+ * Ecosystem chips, wrapped over at most two rows. How many fit depends on the
+ * card width, so the full list is mirrored into a hidden, absolutely
+ * positioned list that is measured with real layout; the chips that overflow
+ * two rows collapse into a "+N" trigger that opens a popup listing exactly the
+ * hidden values.
+ *
+ * Without a layout engine (jsdom, SSR) nothing can be measured, so every chip
+ * is rendered and no trigger appears.
+ */
+function EcosystemChips({ ecosystems }) {
+  const intl = useIntl();
+  const [visibleCount, setVisibleCount] = React.useState(ecosystems.length);
+  const [open, setOpen] = React.useState(false);
+  const measureRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const panelId = usePanelId();
+
+  const measure = React.useCallback(() => {
+    const list = measureRef.current;
+    if (!list) return;
+
+    const chips = Array.from(list.querySelectorAll('.cse-card-chip'));
+    const width = list.clientWidth;
+
+    // `visibility: hidden` boxes still measure, but jsdom reports 0 for all of
+    // them: keep every chip visible instead of guessing.
+    if (!width) {
+      setVisibleCount(ecosystems.length);
+      return;
+    }
+
+    const gap =
+      parseFloat(window.getComputedStyle(list).columnGap) || CHIP_GAP_FALLBACK;
+    const tops = chips.map((chip) => chip.offsetTop);
+    const rows = [...new Set(tops)].sort((a, b) => a - b);
+    const moreChip = list.querySelector('.cse-card-chip-more-measure');
+
+    setVisibleCount(
+      visibleChipCount(
+        chips.map((chip, index) => ({
+          row: rows.indexOf(tops[index]),
+          right: chip.offsetLeft + chip.offsetWidth,
+        })),
+        {
+          rows: ECOSYSTEM_ROWS,
+          gap,
+          moreWidth: moreChip?.offsetWidth || 0,
+          width,
+        },
+      ),
+    );
+  }, [ecosystems.length]);
+
+  useIsomorphicLayoutEffect(() => {
+    measure();
+
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(measure);
+    if (measureRef.current) observer.observe(measureRef.current);
+
+    return () => observer.disconnect();
+  }, [measure]);
+
+  React.useEffect(() => {
+    if (!open) return undefined;
+
+    const onDocumentClick = (event) => {
+      if (!panelRef.current?.parentElement?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== 'Escape') return;
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+
+    document.addEventListener('click', onDocumentClick);
+    document.addEventListener('keydown', onKeyDown);
+    panelRef.current?.focus();
+
+    return () => {
+      document.removeEventListener('click', onDocumentClick);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  if (!ecosystems.length) return null;
+
+  const shown = Math.min(visibleCount, ecosystems.length);
+  const hidden = ecosystems.length - shown;
+
+  return (
+    <div className="cse-card-ecosystems-wrap">
+      <ul className="cse-card-ecosystems">
+        {ecosystems.slice(0, shown).map((ecosystem, index) => (
+          <li className="cse-card-chip" key={`${ecosystem}-${index}`}>
+            {ecosystem}
+          </li>
+        ))}
+        {hidden > 0 ? (
+          <li className="cse-card-chip cse-card-chip-more">
+            <button
+              type="button"
+              ref={triggerRef}
+              className="cse-card-chip-more-trigger"
+              aria-expanded={open}
+              aria-controls={panelId}
+              aria-haspopup="dialog"
+              onClick={() => setOpen((wasOpen) => !wasOpen)}
+            >
+              {intl.formatMessage(messages.moreEcosystems, { count: hidden })}
+              <span className="cse-visually-hidden">
+                {' '}
+                {intl.formatMessage(messages.hiddenEcosystems)}
+              </span>
+            </button>
+          </li>
+        ) : null}
+      </ul>
+
+      {hidden > 0 && open ? (
+        <div
+          ref={panelRef}
+          id={panelId}
+          className="cse-card-ecosystems-panel"
+          role="dialog"
+          aria-label={intl.formatMessage(messages.hiddenEcosystems)}
+          tabIndex={-1}
+        >
+          <ul className="cse-card-ecosystems cse-card-ecosystems-panel-list">
+            {ecosystems.slice(shown).map((ecosystem, index) => (
+              <li className="cse-card-chip" key={`${ecosystem}-${index}`}>
+                {ecosystem}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      <ul
+        ref={measureRef}
+        className="cse-card-ecosystems cse-card-ecosystems-measure"
+        aria-hidden="true"
+      >
+        {ecosystems.map((ecosystem, index) => (
+          <li className="cse-card-chip" key={`${ecosystem}-${index}`}>
+            {ecosystem}
+          </li>
+        ))}
+        <li className="cse-card-chip cse-card-chip-more-measure">
+          {intl.formatMessage(messages.moreEcosystems, {
+            count: ecosystems.length,
+          })}
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Related measures, collapsed behind a full-width disclosure bar. The bar
+ * owns the count; the panel stays mounted so its height can animate, and is
+ * `inert` while collapsed so its links stay out of the tab order. Nothing is
+ * rendered at all for a case study without measures.
+ */
+function RelatedMeasures({ measures }) {
+  const intl = useIntl();
+  const panelId = usePanelId();
+  const [open, setOpen] = React.useState(false);
+
+  if (!measures.length) return null;
+
+  return (
+    <div className="cse-card-measures">
+      <button
+        type="button"
+        className="cse-card-measures-toggle"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span className="cse-card-measures-count">
+          {intl.formatNumber(measures.length)}
+        </span>
+        <span className="cse-card-measures-title">
+          {intl.formatMessage(messages.relatedMeasures)}
+        </span>
+        <span className="cse-card-measures-chevron">
+          <i className="icon ri-arrow-down-s-line" aria-hidden="true" />
+        </span>
+      </button>
+      <div
+        id={panelId}
+        className="cse-card-measures-panel"
+        data-open={open ? 'true' : 'false'}
+        inert={open ? undefined : ''}
+      >
+        <div className="cse-card-measures-panel-inner">
+          <ul className="cse-card-measures-list">
+            {measures.map((measure) => (
+              <li key={measure.id || measure.path || measure.title}>
+                <a
+                  className="cse-card-measure-link"
+                  href={measure.path}
+                  title={measure.title}
+                >
+                  <i className="icon ri-file-list-3-line" aria-hidden="true" />
+                  <span className="cse-card-measure-title">
+                    {measure.title}
+                  </span>
+                  <i
+                    className="icon ri-arrow-right-s-line"
+                    aria-hidden="true"
+                  />
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * One result, laid out as image | main content, with a full-width related
+ * measures disclosure bar underneath. The title, the image and the footer's
+ * corner icon are all "open in a new tab" affordances; selecting a card (from
+ * a map pin) only highlights it, while "Show on map" is the reverse link to
+ * the map. Once the card is the selected one, that same button reads "Reset
+ * map" and clears the selection again.
+ */
+function CaseStudyCard({ item, selected = false, onShowOnMap, onResetMap }) {
+  const intl = useIntl();
+  const properties = React.useMemo(() => item?.properties || {}, [item]);
+  // const { directives } = React.useMemo(
+  //   () => getArticleInfo(properties),
+  //   [properties],
+  // );
+  const ecosystems = React.useMemo(
+    () => getFacetValues(properties, 'ecosystem').map(valueLabel),
+    [properties],
+  );
+  const measures = React.useMemo(
+    () => asValues(properties.measures),
+    [properties],
+  );
+
+  return (
+    <article
+      className={cx('cse-card', {
+        selected,
+        'cse-card-no-media': !properties.image,
+      })}
+      id={`cse-card-${encodeURIComponent(properties.path || '')}`}
+      data-selected={selected ? 'true' : undefined}
+    >
+      {properties.image ? (
+        <a
+          className="cse-card-media"
+          href={properties.path}
+          tabIndex={-1}
+          aria-hidden="true"
+        >
+          <Image src={properties.image} alt="" loading="lazy" />
+        </a>
+      ) : null}
+
+      <div className="cse-card-content">
+        <div className="cse-card-head">
+          <h3 className="cse-card-title">
+            <StatusBadge status={properties.current_status} />
+            <a
+              href={properties.path}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={properties.title}
+            >
+              {properties.title}
+              <span className="cse-visually-hidden">
+                {' '}
+                {intl.formatMessage(messages.opensInNewTab)}
+              </span>
+            </a>
+          </h3>
+          <a
+            className="cse-card-open"
+            href={properties.path}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={intl.formatMessage(messages.openCaseStudy)}
+            title={intl.formatMessage(messages.openCaseStudy)}
+          >
+            <i className="icon ri-external-link-line" aria-hidden="true" />
+            <span className="cse-visually-hidden">
+              {intl.formatMessage(messages.opensInNewTab)}
+            </span>
+          </a>
+        </div>
+
+        <div className="cse-card-meta">
+          <StatusBadge status={properties.current_status} />
+          {/* {directives.length ? (
+            <>
+              <span className="cse-card-separator" aria-hidden="true">
+                ·
+              </span>
+              <span className="cse-card-directives">
+                {directives.map((directive) => (
+                  <span className="cse-card-chip" key={directive}>
+                    {directive}
+                  </span>
+                ))}
+              </span>
+            </>
+          ) : null} */}
+          <button
+            type="button"
+            className="cse-card-show-on-map"
+            onClick={() =>
+              selected ? onResetMap?.(item) : onShowOnMap?.(item)
+            }
+          >
+            <i
+              className={cx(
+                'icon',
+                selected ? 'ri-map-2-line' : 'ri-map-pin-line',
+              )}
+              aria-hidden="true"
+            />
+            {intl.formatMessage(
+              selected ? messages.resetMap : messages.showOnMap,
+            )}
+          </button>
+        </div>
+
+        <EcosystemChips ecosystems={ecosystems} />
+      </div>
+
+      <RelatedMeasures measures={measures} />
+    </article>
+  );
+}
+
+export default React.memo(CaseStudyCard);