@eeacms/volto-bise-policy 1.3.9 → 1.3.11

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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
+
+#### :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
+
+- feat(CaseStudyExplorer): add image and link icon to feature popup [laszlocseh - [`ceba7db`](https://github.com/eea/volto-bise-policy/commit/ceba7db816f00fd430edab13812aac348a3042c2)]
+- feat: replace NRR article with legislation and biogeographical region filters [laszlocseh - [`6f6c0b4`](https://github.com/eea/volto-bise-policy/commit/6f6c0b479f046977a8ff63524f7db32ebdb1ae03)]
+
+#### :nail_care: Enhancements
+
+- refactor(CaseStudyExplorer): use Image component in FeatureDisplay [laszlocseh - [`19e4a0f`](https://github.com/eea/volto-bise-policy/commit/19e4a0fa357391ab96a12c676ae79c3501f0a2ba)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`9df6965`](https://github.com/eea/volto-bise-policy/commit/9df696548aac424140d0db0b1f1181a19c8ba2a0)]
+
 ### [1.3.9](https://github.com/eea/volto-bise-policy/compare/1.3.8...1.3.9) - 27 August 2026
 
 #### :bug: Bug Fixes
@@ -92,10 +113,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)]
@@ -121,7 +138,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)]
@@ -147,7 +163,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)]
@@ -196,11 +211,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)]
@@ -462,7 +472,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)]
 
@@ -472,23 +481,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
@@ -609,10 +606,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)]
@@ -630,7 +623,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.9",
+  "version": "1.3.11",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Widgets/NRRWidgets.jsx

@@ -85,6 +85,34 @@ export const NRRArticleView = ({ value }) => {
   );
 };
 
+export const NRRLegislationView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
+
+  return (
+    <InlineList
+      label="NRR Legislation"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
+
+export const NRRBiogeographicalRegionView = ({ value }) => {
+  const items = parseItems(value);
+  if (items.length === 0) return null;
+
+  return (
+    <InlineList
+      label="Biogeographical region"
+      secondary
+      items={items}
+      render={(item) => item.title}
+    />
+  );
+};
+
 export const NRRrelatedCaseStudiesView = ({ value }) => {
   const items = parseItems(value);
   if (items.length === 0) return null;

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

@@ -21,11 +21,12 @@ export default function CaseStudyExplorerView(props) {
   const hideFilters = caseStudiesIds ? true : false;
 
   const [activeFilters, setActiveFilters] = React.useState({
+    nrr_legislation: [],
+    nrr_biogeographical_region: [],
     measures_implemented: [],
     typology_of_measures: [],
     current_status: [],
     habitat_ecosystem_type: [],
-    nrr_article: [],
     scale_of_planning: [],
   });
 

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

@@ -114,6 +114,16 @@ function CaseStudyFiltersComponent(props) {
 
   return (
     <>
+      <CaseStudyFilter
+        filterTitle="Legislation"
+        filterName="nrr_legislation"
+        {...props}
+      />
+      <CaseStudyFilter
+        filterTitle="Biogeographical region"
+        filterName="nrr_biogeographical_region"
+        {...props}
+      />
       <CaseStudyFilter
         filterTitle="Measures"
         filterName="measures_implemented"
@@ -144,11 +154,6 @@ function CaseStudyFiltersComponent(props) {
         filterName="habitat_ecosystem_type"
         {...props}
       />
-      <CaseStudyFilter
-        filterTitle="NRR Article"
-        filterName="nrr_article"
-        {...props}
-      />
       <CaseStudyFilter
         filterTitle="Scale of Planning"
         filterName="scale_of_planning"
@@ -347,9 +352,16 @@ function ActiveFiltersComponent(props) {
             onRemoveFilter={removeFilter}
           />
           <FilterGroup
-            filterName="nrr_article"
-            filterLabel="NRR Article:"
-            activeFilterCodes={activeFilters.nrr_article}
+            filterName="nrr_legislation"
+            filterLabel="Legislation:"
+            activeFilterCodes={activeFilters.nrr_legislation}
+            filters={filters}
+            onRemoveFilter={removeFilter}
+          />
+          <FilterGroup
+            filterName="nrr_biogeographical_region"
+            filterLabel="Biogeographical region:"
+            activeFilterCodes={activeFilters.nrr_biogeographical_region}
             filters={filters}
             onRemoveFilter={removeFilter}
           />

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

@@ -1,41 +1,24 @@
 import React from 'react';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 export default function FeatureDisplay({ feature }) {
   return feature ? (
     <div id="csepopup">
+      {feature.image ? (
+        <Image
+          className="csepopup-image"
+          src={feature.image}
+          alt={feature.title || ''}
+        />
+      ) : null}
       <h3>
         <strong>
           <a target="_blank" rel="noopener noreferrer" href={feature.path}>
             {feature.title}
+            <i class="ri-external-link-line"></i>
           </a>
         </strong>
       </h3>
-      {/* <div>
-        <h4>Measures implemented</h4>
-        <ul>
-          {feature.measures_implemented.map((item, index) => {
-            return (
-              <li key={index}>
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={item['path']}
-                >
-                  {item['title']}
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div> */}
-      {/* <div>
-        <h4>typology_of_measures </h4>
-        <ul>
-          {feature.typology_of_measures.map((item, index) => {
-            return <li key={index}>{item}</li>;
-          })}
-        </ul>
-      </div> */}
     </div>
   ) : null;
 }

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureDisplay.test.jsx

@@ -9,6 +9,7 @@ describe('FeatureDisplay Component', () => {
     const feature = {
       title: 'Sample Feature',
       path: 'https://example.com/sample-feature',
+      image: 'https://example.com/preview.jpg',
       measures_implemented: [
         { path: 'https://example.com/nwrm-1', title: 'NWRM 1' },
         { path: 'https://example.com/nwrm-2', title: 'NWRM 2' },
@@ -23,6 +24,22 @@ describe('FeatureDisplay Component', () => {
       'href',
       'https://example.com/sample-feature',
     );
+    expect(getByRole('img')).toHaveAttribute(
+      'src',
+      'https://example.com/preview.jpg',
+    );
+  });
+
+  it('does not render an image when the feature has none', () => {
+    const { queryByRole, getByRole } = render(
+      <FeatureDisplay feature={{ title: 'No image', path: '/no-image' }} />,
+    );
+
+    expect(queryByRole('img')).not.toBeInTheDocument();
+    expect(getByRole('link', { name: 'No image' })).toHaveAttribute(
+      'href',
+      '/no-image',
+    );
   });
 
   it('renders nothing when feature is null', () => {

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

@@ -14,6 +14,17 @@ function InfoOverlay({
   const { map } = useMapContext();
   const [tooltip, setTooltipRef] = React.useState();
   const [showTooltip, setShowTooltip] = React.useState();
+  const overlayRef = React.useRef(null);
+
+  // `ol` is a fresh object literal on every render (see withOpenLayers) and
+  // `onFeatureSelect`/`hideFilters` can change identity; keep them in refs so
+  // the overlay and its map handler are created only once per mount.
+  const olRef = React.useRef(ol);
+  olRef.current = ol;
+  const onFeatureSelectRef = React.useRef(onFeatureSelect);
+  onFeatureSelectRef.current = onFeatureSelect;
+  const hideFiltersRef = React.useRef(hideFilters);
+  hideFiltersRef.current = hideFilters;
 
   const prevLayerId = usePrevious(layerId);
 
@@ -26,12 +37,13 @@ function InfoOverlay({
   React.useEffect(() => {
     if (!(map && tooltip)) return;
 
-    const overlay = new ol.Overlay({
-      element: document.getElementById('popup-overlay'),
+    const overlay = new olRef.current.Overlay({
+      element: tooltip,
       positioning: 'bottom-center',
       offset: [0, -10],
       stopEvent: false,
     });
+    overlayRef.current = overlay;
     map.addOverlay(overlay);
 
     function handler(evt) {
@@ -41,7 +53,7 @@ function InfoOverlay({
 
       if (
         features.length &&
-        !hideFilters // && !isCluster(features)
+        !hideFiltersRef.current // && !isCluster(features)
       ) {
         setShowTooltip(true);
       } else {
@@ -49,7 +61,7 @@ function InfoOverlay({
         if (evt.originalEvent.target.tagName === 'A') return;
         setShowTooltip(false);
         popupOverlay.style.display = 'none';
-        onFeatureSelect(null);
+        onFeatureSelectRef.current(null);
       }
     }
 
@@ -58,8 +70,25 @@ function InfoOverlay({
     return () => {
       map.un('click', handler);
       map.removeOverlay(overlay);
+      overlayRef.current = null;
     };
-  }, [map, tooltip, onFeatureSelect, hideFilters, ol]); //
+  }, [map, tooltip]);
+
+  // Anchor the popup to the selected case study and show it above the marker.
+  // Selecting a cluster (null feature) or clicking the map clears the popup.
+  React.useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+
+    const coordinates = selectedFeature?.geometry?.flatCoordinates;
+    if (coordinates) {
+      overlay.setPosition(coordinates);
+      setShowTooltip(true);
+    } else {
+      overlay.setPosition(undefined);
+      setShowTooltip(false);
+    }
+  }, [selectedFeature, tooltip]);
 
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => setIsClient(true), []);

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.test.jsx

@@ -31,6 +31,7 @@ jest.mock('ol/Overlay', () => {
 const mockOl = {
   Overlay: jest.fn((config) => ({
     element: config.element,
+    setPosition: jest.fn(),
   })),
 };
 
@@ -111,7 +112,8 @@ describe('InfoOverlay', () => {
     handler(evt);
 
     expect(onFeatureSelect).toHaveBeenCalledWith(null);
-    expect(document.getElementById('popup-overlay').style.display).toBe('none');
+    const overlay = mockOl.Overlay.mock.results[0].value;
+    expect(overlay.element.style.display).toBe('none');
   });
 
   it('ignores click when target is a link (A tag)', () => {
@@ -135,4 +137,23 @@ describe('InfoOverlay', () => {
 
     expect(onFeatureSelect).not.toHaveBeenCalled();
   });
+
+  it('positions the overlay over the selected feature', () => {
+    render(
+      <InfoOverlay
+        {...defaultProps}
+        selectedFeature={{ geometry: { flatCoordinates: [10, 20] } }}
+      />,
+    );
+
+    const overlay = mockOl.Overlay.mock.results[0].value;
+    expect(overlay.setPosition).toHaveBeenCalledWith([10, 20]);
+  });
+
+  it('clears the overlay position when no feature is selected', () => {
+    render(<InfoOverlay {...defaultProps} selectedFeature={null} />);
+
+    const overlay = mockOl.Overlay.mock.results[0].value;
+    expect(overlay.setPosition).toHaveBeenCalledWith(undefined);
+  });
 });

package/src/components/manage/Blocks/CaseStudyExplorer/styles.less

@@ -35,6 +35,14 @@
   opacity: 0.55;
 }
 
+.ol-overlaycontainer {
+  z-index: 1 !important;
+}
+
+.ol-viewport {
+  overflow: visible !important;
+}
+
 #csepopup > span {
   display: 'block';
   margin-bottom: '10px';
@@ -42,21 +50,30 @@
 }
 
 #csepopup {
-  // width: 300px;
-  width: 100%;
+  width: 300px;
   // height: 100%;
   padding: 1em;
+  background-color: #f9f9f9;
   // border: 1px solid black;
-  // font-size: 14px;
   // line-height: initial;
   font-size: 1rem;
 
+  .csepopup-image {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    max-height: 160px;
+    margin-bottom: 10px;
+    object-fit: cover;
+  }
+
   a:hover {
     color: #289588;
   }
 
   h3 {
-    font-size: 1.4rem;
+    margin: 0px;
+    font-size: 1rem;
   }
 
   h4 {
@@ -96,6 +113,10 @@
       max-height: 133px;
     }
   }
+
+  .ri-external-link-line {
+    margin-left: 0.25rem;
+  }
 }
 
 #external-popup-overlay {

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -104,7 +104,8 @@ export function getFeatures({ cases, ol }) {
           properties,
           'habitat_ecosystem_type',
         ),
-        nrr_article: properties.nrr_article,
+        nrr_legislation: properties.nrr_legislation,
+        nrr_biogeographical_region: properties.nrr_biogeographical_region,
         scale_of_planning: properties.scale_of_planning,
         description: properties.description,
         index,
@@ -143,11 +144,12 @@ function hasWholeWord(text, needle) {
 }
 
 const FILTER_FIELDS = [
+  'nrr_legislation',
+  'nrr_biogeographical_region',
   'measures_implemented',
   'typology_of_measures',
   'current_status',
   'habitat_ecosystem_type',
-  'nrr_article',
   'scale_of_planning',
 ];
 

package/src/components/manage/Blocks/CaseStudyExplorer/utils.test.js

@@ -96,11 +96,12 @@ describe('utils.js', () => {
       },
     ];
     const noFilters = {
+      nrr_legislation: [],
+      nrr_biogeographical_region: [],
       measures_implemented: [],
       typology_of_measures: [],
       current_status: [],
       habitat_ecosystem_type: [],
-      nrr_article: [],
       scale_of_planning: [],
     };
 
@@ -127,7 +128,8 @@ describe('utils.js', () => {
           url: '/planned-river-case',
           current_status: 'planned',
           ecosystem_typology: ['River', 'Wetland'],
-          nrr_article: [{ id: 'article-1', title: 'Article 1' }],
+          nrr_legislation: [{ id: 'article-1', title: 'Article 1' }],
+          nrr_biogeographical_region: [{ id: 'region-1', title: 'Alpine' }],
           scale_of_planning: 'Regional',
         },
       },
@@ -139,7 +141,8 @@ describe('utils.js', () => {
           url: '/future-case',
           current_status: 'Future',
           ecosystem_typology: ['Forest'],
-          nrr_article: ['article-2'],
+          nrr_legislation: ['article-2'],
+          nrr_biogeographical_region: ['region-2'],
           scale_of_planning: 'National',
         },
       },
@@ -147,18 +150,23 @@ describe('utils.js', () => {
 
     expect(
       filterCases(cases, {
+        nrr_legislation: ['article-1'],
+        nrr_biogeographical_region: ['region-1'],
         measures_implemented: [],
         typology_of_measures: [],
         current_status: ['planned'],
         habitat_ecosystem_type: ['River'],
-        nrr_article: ['article-1'],
         scale_of_planning: ['Regional'],
       }),
     ).toHaveLength(1);
-    expect(getFilters(cases).nrr_article).toEqual({
+    expect(getFilters(cases).nrr_legislation).toEqual({
       'article-1': 'Article 1',
       'article-2': 'article-2',
     });
+    expect(getFilters(cases).nrr_biogeographical_region).toEqual({
+      'region-1': 'Alpine',
+      'region-2': 'region-2',
+    });
   });
 
   test('getFilters', () => {
@@ -176,7 +184,8 @@ describe('utils.js', () => {
       },
       current_status: {},
       habitat_ecosystem_type: {},
-      nrr_article: {},
+      nrr_legislation: {},
+      nrr_biogeographical_region: {},
       scale_of_planning: {},
     });
   });

package/src/index.js

@@ -30,6 +30,8 @@ import {
   NRRTypologyOfMeasuresView,
   NRREcosystemTypologyView,
   NRRArticleView,
+  NRRLegislationView,
+  NRRBiogeographicalRegionView,
   NRRrelatedCaseStudiesView,
   NRRMeasuresImplementedView,
   NRRHabitatEcosystemTypeView,
@@ -284,14 +286,23 @@ const applyConfig = (config) => {
   }
 
   config.widgets.id.geolocation = GeolocationWidget;
+  // NRR Measure widgets
   config.widgets.views.id.nrr_typology_of_measures = NRRTypologyOfMeasuresView;
   config.widgets.views.id.nrr_ecosystem_typology = NRREcosystemTypologyView;
+  config.widgets.views.id.nrr_article = NRRArticleView;
+  config.widgets.views.id.related_case_studies = NRRrelatedCaseStudiesView;
+  // NRR Case study widgets
+  config.widgets.views.id.nrr_measures_implemented = NRRMeasuresImplementedView;
   config.widgets.views.id.nrr_habitat_ecosystem_type =
     NRRHabitatEcosystemTypeView;
   config.widgets.views.id.nrr_scale_of_planning = NRRScaleOfPlanningView;
-  config.widgets.views.id.nrr_article = NRRArticleView;
+  config.widgets.views.id.nrr_legislation = NRRLegislationView;
+  config.widgets.views.id.nrr_biogeographical_region =
+    NRRBiogeographicalRegionView;
   config.widgets.views.id.nrr_current_status = NRRCurrentStatusView;
-  // EUNIS Widgets
+  config.widgets.id.nrr_habitat_directive = EUNISHDWidget;
+  config.widgets.views.id.nrr_habitat_directive = EUNISHDView;
+  // Marine EUNIS habitat Widgets
   config.widgets.id.eunis_national_json = EUNISCountryCodeWidget;
   config.widgets.views.id.eunis_national_json = EUNISCountryCodeView;
   config.widgets.id.eunis_regional_sea_convention_value_json =
@@ -311,8 +322,7 @@ const applyConfig = (config) => {
   config.widgets.views.id.eunis_msfd_relevant_classification_json =
     EUNISMSFDView;
   config.widgets.views.id.eunis_code = EUNISCodeView;
-  config.widgets.views.id.related_case_studies = NRRrelatedCaseStudiesView;
-  config.widgets.views.id.nrr_measures_implemented = NRRMeasuresImplementedView;
+
   config.widgets.views.widget.richtext = RichTextWidget;
 
   return config;

package/theme/globals/natura2000.less

@@ -1,8 +1,4 @@
-.styled.protected-habitats
-  > .tabs-block.default
-  > .styled
-  > .tabs.default
-  > .ui.menu {
+.styled.protected-habitats>.tabs-block.default>.styled>.tabs.default>.ui.menu {
   border-bottom: 2px solid #dadada;
   margin-bottom: 1rem;
   border-radius: 0;
@@ -54,18 +50,19 @@
 
 .is-n2k-site {
   .eea.header .main.bar {
+
     .ui.grid,
     .main-menu,
-    .main-menu > ul,
-    .main-menu > ul > li {
+    .main-menu>ul,
+    .main-menu>ul>li {
       height: 100%;
     }
   }
 
-  .eea.header .main.bar .main-menu > ul > li {
+  .eea.header .main.bar .main-menu>ul>li {
     padding: 0 0.5rem !important;
 
-    > a {
+    >a {
       align-self: center;
     }
   }
@@ -79,7 +76,7 @@
       padding-bottom: 0;
     }
 
-    .ui.accordion > button > a {
+    .ui.accordion>button>a {
       color: #fff !important;
     }
   }
@@ -127,6 +124,7 @@
       @media only screen and (min-width: 992px) {
         > :first-child:not(:last-child) {
           flex: 1;
+
           img {
             object-fit: fill;
           }
@@ -175,3 +173,49 @@
     }
   }
 }
+
+// Habitats
+.section-habitats.section-habitats_rl,
+.section-habitats.section-habitats_eunis2012,
+.section-habitats.section-habitats_res4,
+.section-habitats.section-habitat,
+.section-habitats.section-habitats_eunis_revised {
+  h2 {
+    margin-top: 14px;
+  }
+
+  .light-gray-background {
+    background-color: #f9f9f9;
+    padding: 1em;
+  }
+
+  .column-blocks-wrapper {
+    margin-bottom: 0;
+  }
+
+  .table-of-contents .list {
+    border-left: 3px solid #bbbdbf;
+  }
+
+  .table-of-contents .list li:before {
+    content: none !important;
+  }
+
+  .table-of-contents h2 {
+    font-size: 1.25rem;
+  }
+
+  .white-background {
+    background-color: white;
+    border: 1px solid #efefef;
+    text-align: center;
+    padding: 10px 0px;
+    width: 26% !important;
+  }
+
+  .white-criteria>span {
+    background-color: white;
+    padding: 3px 5px;
+    border: 1px solid #efefef;
+  }
+}