@eeacms/volto-bise-policy 1.3.11 → 1.3.12

package/CHANGELOG.md

@@ -4,7 +4,37 @@ 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.11](https://github.com/eea/volto-bise-policy/compare/1.3.10...1.3.11) - 28 October 2026
+### [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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.3.11",
+  "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);