@eeacms/volto-cca-policy 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -4,6 +4,58 @@ 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).
 
+### [0.2.7](https://github.com/eea/volto-cca-policy/compare/0.2.6...0.2.7) - 19 April 2024
+
+#### :rocket: New Features
+
+- feat(view): add RASTWidgetView [kreafox - [`2a80745`](https://github.com/eea/volto-cca-policy/commit/2a80745b6f97d03ca33bda8cd3b40e3fd030c521)]
+
+#### :nail_care: Enhancements
+
+- change: remove MissionFundingView, use dexterity layout - Refs #267791 [kreafox - [`f27de36`](https://github.com/eea/volto-cca-policy/commit/f27de36778d57f5b11b3d9d2abf26bd5bde134f4)]
+- change(view): remove MissionToolView, use dexterity layout - Refs #268126 [kreafox - [`1d11d7d`](https://github.com/eea/volto-cca-policy/commit/1d11d7d6f3429af7a2ea5fd94060893066b68c33)]
+
+#### :house: Internal changes
+
+- chore: update components export [kreafox - [`5c81f64`](https://github.com/eea/volto-cca-policy/commit/5c81f641275a4ab6087b09c21e333f5a01009c7f)]
+- chore: cleanup code -  remove unused widget [kreafox - [`6c6297d`](https://github.com/eea/volto-cca-policy/commit/6c6297df2dbd13010807e409634dfe7a90031407)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #260715 - remove icons [Tripon Eugen - [`cacff37`](https://github.com/eea/volto-cca-policy/commit/cacff37322171b8faaf6fc1a1e4cd2335376bc41)]
+- Refs #260715 - remove icons [Tripon Eugen - [`7fd9186`](https://github.com/eea/volto-cca-policy/commit/7fd91866c88a9bec53422412c967219242aad5f6)]
+- test: fix SyntaxError [kreafox - [`e942845`](https://github.com/eea/volto-cca-policy/commit/e942845ce658b084715c39eea9f90adbb7bc60fe)]
+- Styleling [Tiberiu Ichim - [`39a22cb`](https://github.com/eea/volto-cca-policy/commit/39a22cbc76a245286d9daa6da84ee5bf539f3dc4)]
+- Remove logging [Tiberiu Ichim - [`ace005c`](https://github.com/eea/volto-cca-policy/commit/ace005c3e7a9d0ab708d48a16cb286253bb44ab9)]
+- Better buffer [Tiberiu Ichim - [`8a7d99f`](https://github.com/eea/volto-cca-policy/commit/8a7d99f901752a2d2eb8db799e415a2aab88a1f6)]
+- Better height [Tiberiu Ichim - [`4928376`](https://github.com/eea/volto-cca-policy/commit/492837652238098e2ce8b5e7bc593db3b8c0ba04)]
+- Hardcode buffer value [Tiberiu Ichim - [`95ed23d`](https://github.com/eea/volto-cca-policy/commit/95ed23dd4dfc53c5ed82108b97023600cc455bcb)]
+- Zoom to point [Tiberiu Ichim - [`2043cb9`](https://github.com/eea/volto-cca-policy/commit/2043cb98ce1db30b6dc80b890e4dee9183ccb092)]
+- Code cleanup [Tiberiu Ichim - [`43fdf78`](https://github.com/eea/volto-cca-policy/commit/43fdf78af12cb6ee2b588ec7641f22052c6bf6fa)]
+- Tweak layer [Tiberiu Ichim - [`f33d894`](https://github.com/eea/volto-cca-policy/commit/f33d894730f9459d7f8638fa680b7ad9572e685f)]
+- Improvements to casestudy explorer map [Tiberiu Ichim - [`b5cf129`](https://github.com/eea/volto-cca-policy/commit/b5cf129ad6106125fb367a25f6bc218a349c1982)]
+### [0.2.6](https://github.com/eea/volto-cca-policy/compare/0.2.5...0.2.6) - 17 April 2024
+
+#### :rocket: New Features
+
+- feat(view): add MissionToolView for mission_tool content type - Refs #268126 [kreafox - [`598f038`](https://github.com/eea/volto-cca-policy/commit/598f038b17754d272424a04e45ebc2b41766d724)]
+
+#### :bug: Bug Fixes
+
+- fix(view): fix condition in MissionFundingView [kreafox - [`45f8741`](https://github.com/eea/volto-cca-policy/commit/45f87418982cad2ec33d72a3bacb907ff39a6336)]
+
+#### :nail_care: Enhancements
+
+- change(view): use semantic List [kreafox - [`3cba130`](https://github.com/eea/volto-cca-policy/commit/3cba130f2c9cf3d39e8131b04beca5750affe73f)]
+- change(view): use MetadataItemList [kreafox - [`a501d41`](https://github.com/eea/volto-cca-policy/commit/a501d413ceb4a78bfdfe38eaaaec38d93eddb7f7)]
+- change(view): use MetadataItemList instead of ItemsList [kreafox - [`df2a28d`](https://github.com/eea/volto-cca-policy/commit/df2a28da12a37252e745ac87984eedea2701e16f)]
+
+#### :hammer_and_wrench: Others
+
+- test: update snapshot [kreafox - [`a8589e3`](https://github.com/eea/volto-cca-policy/commit/a8589e32cd506eae790cde287fbdf82fa0e29012)]
+- test: reduce duplicated code , move disclaimer to separate component - Refs #268126 [kreafox - [`3ae3d09`](https://github.com/eea/volto-cca-policy/commit/3ae3d09ebdf6b32ef858051eb08d8088bec89d23)]
+- test: add tests for Mission Tool content type [kreafox - [`5214c0f`](https://github.com/eea/volto-cca-policy/commit/5214c0f58646956055f10a07da8acf72398b6e29)]
+- test: update snapshots [kreafox - [`8ce574c`](https://github.com/eea/volto-cca-policy/commit/8ce574cdf17edfe72ece2e4cc59d984746693f03)]
 ### [0.2.5](https://github.com/eea/volto-cca-policy/compare/0.2.4...0.2.5) - 15 April 2024
 
 #### :rocket: New Features

package/package.json

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

package/src/components/index.js

@@ -1,6 +1,9 @@
-export ImageGallery from './theme/ImageGallery/ImageGallery';
-export BannerTitle from './theme/BannerTitle/BannerTitle';
-export PortalMessage from './theme/PortalMessage/PortalMessage';
-export TranslationDisclaimer from './theme/TranslationDisclaimer/TranslationDisclaimer';
-export ShareInfoButton from './theme/ShareInfoButton/ShareInfoButton';
-export ASTNavigation from './theme/ASTNavigation/ASTNavigation';
+export { default as ImageGallery } from './theme/ImageGallery/ImageGallery';
+export { default as BannerTitle } from './theme/BannerTitle/BannerTitle';
+export { default as PortalMessage } from './theme/PortalMessage/PortalMessage';
+export { default as TranslationDisclaimer } from './theme/TranslationDisclaimer/TranslationDisclaimer';
+export { default as ShareInfoButton } from './theme/ShareInfoButton/ShareInfoButton';
+export { default as ASTNavigation } from './theme/ASTNavigation/ASTNavigation';
+
+// Widgets
+export { default as RASTWidgetView } from './theme/Widgets/RASTWidgetView';

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

@@ -62,7 +62,7 @@ export default function CaseStudyExplorerView(props) {
   if (__SERVER__) return '';
 
   return (
-    <div>
+    <div className="casestudy-explorer-map">
       <Grid columns="12">
         <Grid.Column mobile={9} tablet={9} computer={9} className="col-left">
           {cases.length ? (

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

@@ -1,4 +1,4 @@
-import React, { FormEvent } from 'react';
+import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Accordion, Icon, Checkbox } from 'semantic-ui-react';
 
@@ -32,7 +32,7 @@ export default function CaseStudyFilters(props) {
     setActiveIndex(index);
   }
 
-  const checkboxChangeHandler = (_event: FormEvent<HTMLInputElement>, data) => {
+  const checkboxChangeHandler = (_event, data) => {
     const temp = JSON.parse(JSON.stringify(activeFilters));
 
     if (data.checked) {
@@ -48,7 +48,7 @@ export default function CaseStudyFilters(props) {
 
   const intl = useIntl();
   return (
-    <>
+    <div className="casestudy-filters">
       <Accordion exclusive={false} className="secondary">
         <Accordion.Title
           active={activeIndex.includes(0)}
@@ -89,7 +89,6 @@ export default function CaseStudyFilters(props) {
         <Accordion.Content active={activeIndex.includes(1)}>
           {Object.entries(filters?.impacts || {}).map(
             ([value, label], index) => (
-              // <p key={index}>
               <Checkbox
                 label={intl.formatMessage({ id: label })}
                 checked={activeFilters.impacts.includes(value)}
@@ -98,7 +97,6 @@ export default function CaseStudyFilters(props) {
                 onChange={checkboxChangeHandler}
                 key={'impact' + index}
               />
-              // </p>
             ),
           )}
         </Accordion.Content>
@@ -120,7 +118,7 @@ export default function CaseStudyFilters(props) {
                 <p>
                   <strong>{intl.formatMessage({ id: key })}</strong>
                 </p>
-                {Object.entries(values).map(([valKey, valData]) => (
+                {Object.entries(values).map(([_, valData]) => (
                   <Checkbox
                     label={intl.formatMessage({ id: valData.value })}
                     value={valData.key}
@@ -145,17 +143,20 @@ export default function CaseStudyFilters(props) {
       ) : null}
       <div className="case-study-legend">
         <p>
-          <strong>Climate-ADAPT case studies</strong>
-        </p>
-        <p>
-          <span></span>Climate-ADAPT case studies
+          <span></span>
+          <FormattedMessage
+            id="Climate-ADAPT case studies"
+            defaultMessage="Climate-ADAPT case studies"
+          />
         </p>
         <p>
           <span className="light-blue"></span>
-          Case studies collected at national level in Spain, provided by
-          AdapteCCA.es
+          <FormattedMessage
+            id="Case studies collected at national level in Spain, provided by AdapteCCA.es"
+            defaultMessage="Case studies collected at national level in Spain, provided by AdapteCCA.es"
+          />
         </p>
       </div>
-    </>
+    </div>
   );
 }

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

@@ -15,11 +15,11 @@ export default function CaseStudyMap(props) {
   const features = getFeatures(items);
 
   const [tileWMSSources] = React.useState([
-    // , setTileWMSSources
     new ol.source.TileWMS({
+      // see https://gisco-services.ec.europa.eu/maps/demo/ for more layers
       url: 'https://gisco-services.ec.europa.eu/maps/service',
       params: {
-        LAYERS: 'OSMBlossomComposite',
+        LAYERS: 'OSMCartoComposite',
         TILED: true,
       },
       serverType: 'geoserver',

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

@@ -59,7 +59,12 @@ export default function FeatureInteraction({ onFeatureSelect }) {
         const subfeatures = feature.values_.features;
         if (subfeatures.length === 1) {
           const selectedFeature = subfeatures[0].values_;
+          const extent = selectedFeature.geometry.extent_;
+
           onFeatureSelect(selectedFeature);
+          const paddedExtent = ol.extent.buffer(extent, 50000);
+
+          map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
         } else {
           // zoom to extent of cluster points
           const extent = getExtentOfFeatures(subfeatures);
@@ -68,8 +73,6 @@ export default function FeatureInteraction({ onFeatureSelect }) {
             (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
           extentBuffer = extentBuffer < 500 ? 500 : extentBuffer;
           const paddedExtent = ol.extent.buffer(extent, extentBuffer);
-
-          // const paddedExtent = ol.extent.buffer(extent, 50000);
           map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
         }
       });

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

@@ -20,6 +20,9 @@ export default function InfoOverlay({
 
   const prevLayerId = usePrevious(layerId);
 
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
+
   React.useEffect(() => {
     if (prevLayerId && layerId !== prevLayerId) {
       setShowTooltip(false);
@@ -32,7 +35,7 @@ export default function InfoOverlay({
     const overlay = new ol.Overlay({
       element: document.getElementById('popup-overlay'),
       positioning: 'bottom-center',
-      offset: [0, -10],
+      offset: [10, -10],
       stopEvent: false,
     });
     map.addOverlay(overlay);
@@ -61,9 +64,6 @@ export default function InfoOverlay({
     };
   }, [map, tooltip, onFeatureSelect, hasCusters]);
 
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => setIsClient(true), []);
-
   return isClient ? (
     <div
       id="popup-overlay"

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

@@ -5,7 +5,10 @@
 }
 
 #csepopup {
+  width: 300px;
+  padding: 10px 0;
   border-bottom: 6px solid #005c96;
+  background-color: white;
 
   p {
     padding: 0 10px 0 10px;
@@ -35,84 +38,110 @@
   }
 }
 
-#cse-filter {
-  h4 {
-    position: relative;
-    padding: 10px;
-    border-bottom: 1px solid #d8d8d8;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    background-color: #fff;
-    clear: both;
-    color: #005c96;
-    cursor: pointer;
-    font-size: 14px;
+.section-case-study-explorer #popup-overlay {
+  width: 340px;
+  // max-height: 300px;
+  padding: 0;
+  background-color: #fff;
+}
+
+@mapHeight: 70vh;
+
+.casestudy-explorer-map {
+  // height: @mapHeight;
+  min-height: @mapHeight;
+
+  .ol-map {
+    // height: @mapHeight;
+    min-height: @mapHeight;
   }
 
-  p {
-    // padding: 2px;
-    padding-bottom: 10px;
-    clear: both;
-    line-height: 20px;
-
-    span {
-      float: left;
-      font-family: OpenSansM, sans-serif;
-      font-size: 12px;
+  .casestudy-filters {
+    display: flex;
+    min-height: @mapHeight;
+    flex-direction: column;
+  }
+
+  #cse-filter {
+    h4 {
+      position: relative;
+      padding: 10px;
+      border-bottom: 1px solid #d8d8d8;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      background-color: #fff;
+      clear: both;
+      color: #005c96;
+      cursor: pointer;
+      font-size: 14px;
     }
 
-    input {
-      float: right;
+    p {
+      // padding: 2px;
+      padding-bottom: 10px;
+      clear: both;
+      line-height: 20px;
+
+      span {
+        float: left;
+        font-family: OpenSansM, sans-serif;
+        font-size: 12px;
+      }
+
+      input {
+        float: right;
+      }
     }
-  }
 
-  div.title {
-    width: 100%;
-  }
+    div.title {
+      width: 100%;
+    }
 
-  .ui.accordion > .title > .icon {
-    line-height: 1rem;
-  }
+    .ui.accordion {
+      & > .title > .icon {
+        line-height: 1rem;
+      }
 
-  .ui.accordion p {
-    margin: 0;
-  }
+      p {
+        margin: 0;
+      }
 
-  .ui.accordion .subcategory {
-    margin-bottom: 30px;
-  }
+      .content {
+        overflow: auto;
+        max-height: 400px;
 
-  button.reset {
-    margin-top: 20px;
-  }
+        .subcategory {
+          margin-bottom: 30px;
+        }
+      }
+    }
 
-  .ui.checkbox {
-    width: 100%;
-  }
+    button.reset {
+      margin-top: 20px;
+    }
 
-  .case-study-legend {
-    padding-top: 20px;
-
-    span {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      margin-top: 3px;
-      margin-right: 5px;
-      background-color: #005c96 !important;
-      background-color: #bbb;
-      border-radius: 50%;
+    .ui.checkbox {
+      width: 100%;
     }
 
-    span.light-blue {
-      background-color: #00ffff !important;
+    .case-study-legend {
+      padding-top: 20px;
+      margin-top: auto;
+
+      span {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-top: 3px;
+        margin-right: 5px;
+        background-color: #005c96 !important;
+        background-color: #bbb;
+        border-radius: 50%;
+      }
+
+      span.light-blue {
+        background-color: #00ffff !important;
+      }
     }
   }
 }
-
-.section-case-study-explorer #popup-overlay {
-  width: 340px;
-  // max-height: 300px;
-  padding: 0;
-  background-color: #fff;
-}

package/src/components/manage/Blocks/CountryMapProfile/Interactions.jsx

@@ -40,21 +40,19 @@ export const Interactions = ({
       ) {
         // if (countries_metadata.length>0) {
         let countryName = feature.get('na');
-        let noDataReportedMsg =
-          'No data reported through the reporting mechanism of the Governance Regulation. Last information is available <a href="' +
-          baseUrl +
-          '/' +
-          countryName.toLowerCase() +
-          '">here</a>';
+        let noDataReportedMsg = `
+No data reported through the reporting mechanism of the Governance Regulation.
+Last information is available
+<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
+
         if (countryName === 'Türkiye') {
           countryName = 'Turkiye';
-          noDataReportedMsg =
-            'Data reported in 2021 through the reporting mechanism of the Governance Regulation. Information is available <a href="' +
-            baseUrl +
-            '/' +
-            countryName.toLowerCase() +
-            '">here</a>';
+          noDataReportedMsg = `
+Data reported in 2021 through the reporting mechanism of the Governance Regulation.
+Information is available
+<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
         }
+
         if (!Object.hasOwn(countries_metadata[0], countryName)) {
           return;
         }
@@ -65,7 +63,7 @@ export const Interactions = ({
         let tooltipContent = '';
         if (thematicMapMode === 'National adaption policy') {
           if (metadata[0]?.notreported) {
-            tooltipContent = '<span>' + noDataReportedMsg + '</span>';
+            tooltipContent = `<span>${noDataReportedMsg}</span>`;
           } else {
             tooltipContent =
               metadata[0]?.mixed || '<span>NAS and NAP not reported</span>';
@@ -79,28 +77,19 @@ export const Interactions = ({
         // overlaySource.addFeature(feature);
         map.getTargetElement().style.cursor = 'pointer';
         const node = tooltipRef.current;
-        let tooltipContentDiv =
-          `<div id="country-name">
-            <a href="https://climate-adapt.eea.europa.eu/en/countries-regions/countries/` +
-          countryName.toLowerCase() +
-          `">
-              <h3>` +
-          countryName +
-          `</h3>
-            </a>
-            <img class="tooltip-country-flag" src="` +
-          feature.get('flag').src +
-          // feature.getflag +
-          `" height="33" width="54">
-          </div><div class="tooltip-content">` +
-          tooltipContent +
-          `</div>`;
-        setTooltipVisibility(
-          node,
-          '<div class="country-tooltip">' + tooltipContentDiv + '</div>',
-          domEvt,
-          true,
-        );
+        const flag = feature.get('flag').src;
+        const cn = countryName.toLowerCase();
+        let tooltipContentDiv = `
+<div class="country-tooltip">
+  <div id="country-name">
+    <a href="/en/countries-regions/countries/${cn}"><h3>${countryName}</h3></a>
+    <img class="tooltip-country-flag" src="${flag}" height="33" width="54">
+  </div>
+  <div class="tooltip-content">${tooltipContent}</div>
+</div>
+`;
+
+        setTooltipVisibility(node, tooltipContentDiv, domEvt, true);
       }
 
       // if (feature) {

package/src/components/manage/Blocks/CountryProfileDetail/View.js

@@ -6,9 +6,10 @@ import CountryTabPane from './CountryTabPane';
 import './styles.less';
 
 export default function View(props) {
-  const dataJson = JSON.parse(
-    props?.properties['@components']?.countryprofile?.html,
-  );
+  // const dataJson = JSON.parse(
+  //   props?.properties['@components']?.countryprofile?.html,
+  // );
+  const dataJson = props?.properties['@components']?.countryprofile?.html;
   const [activePanes, setActivePanes] = React.useState({});
 
   const panes = [];
@@ -35,8 +36,9 @@ export default function View(props) {
       {dataJson.message_top ? (
         <div class="eea callout">{dataJson.message_top}</div>
       ) : null}
-      {dataJson.top_accordeon
-        ? dataJson.top_accordeon.map((accordion, index) => (
+      {dataJson.top_accordeon ? (
+        <div className="top-accordion">
+          {dataJson.top_accordeon.map((accordion, index) => (
             <Accordion className="secondary">
               <Accordion.Title
                 role="button"
@@ -57,8 +59,9 @@ export default function View(props) {
                 dangerouslySetInnerHTML={{ __html: accordion.value }}
               ></Accordion.Content>
             </Accordion>
-          ))
-        : null}
+          ))}
+        </div>
+      ) : null}
       <Tab
         className="secondary menu"
         panes={panes}
@@ -73,7 +76,9 @@ export default function View(props) {
           tabIndex: 0,
         }}
       />
-      {dataJson.updated ? <p>Last updated:{dataJson.updated}</p> : null}
+      {dataJson.updated ? (
+        <p>Reported updated until: {dataJson.updated}</p>
+      ) : null}
     </>
   );
 }

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

@@ -1,8 +1,12 @@
 .section-countries-regions.section-countries {
-  .secondary.menu a {
+  .secondary.menu > a {
     text-transform: uppercase;
   }
 
+  .top-accordion {
+    margin-bottom: 40px;
+  }
+
   .ui.segment.active.tab > table {
     margin-top: 0px !important;
   }

package/src/components/manage/Blocks/RASTBlock/RASTAccordion.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Accordion, Icon } from 'semantic-ui-react';
+import { Accordion } from 'semantic-ui-react';
 import RASTAccordionContent from './RASTAccordionContent';
 import { useHistory } from 'react-router-dom';
 
@@ -36,13 +36,6 @@ const RASTAccordion = (props) => {
               }}
             >
               <span className="item-title">{item.title}</span>
-              {show_subfolders ? (
-                active ? (
-                  <Icon className="ri-arrow-up-s-line" />
-                ) : (
-                  <Icon className="ri-arrow-down-s-line" />
-                )
-              ) : null}
             </Accordion.Title>
             {show_subfolders ? (
               <Accordion.Content active={active}>

package/src/components/manage/Blocks/RASTBlock/RASTMap.jsx

@@ -21,8 +21,10 @@ export default function RASTMap(props) {
   const { path, pathname, activeMenu, skip_items } = props;
   const currentPath = path || pathname;
 
-  const items = props.items;
   let data = skip_items.split(',');
+  const items = props.items.filter(
+    (_item, index) => !data.includes(index.toString()),
+  );
   let currentMenu = activeMenu;
 
   if (activeMenu !== null) {

package/src/components/theme/Widgets/RASTWidgetView.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List } from 'semantic-ui-react';
+import cx from 'classnames';
+
+const RASTWidgetView = ({ value, className }) => {
+  return value && value.length > 0 ? (
+    <span className={cx(className, 'widget')}>
+      <List>
+        {value.map((step, index) => (
+          <List.Item key={index}>{step.title}</List.Item>
+        ))}
+      </List>
+    </span>
+  ) : (
+    ''
+  );
+};
+export default RASTWidgetView;

package/src/helpers/ContentMetadata.jsx

@@ -1,3 +1,7 @@
+import { Fragment } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Popup, Segment } from 'semantic-ui-react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import {
   ACE_COUNTRIES,
   BIOREGIONS,
@@ -9,11 +13,10 @@ import {
   INDICATOR,
   PUBICATION_REPORT,
 } from '@eeacms/volto-cca-policy/helpers/Constants';
-import { Fragment } from 'react';
-import { Popup, Segment } from 'semantic-ui-react';
-import { isObservatoryMetadataURL } from '@eeacms/volto-cca-policy/helpers';
-import { useLocation } from 'react-router-dom';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import {
+  isObservatoryMetadataURL,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
 
 const messages = defineMessages({
   'The date refers to the moment in which the item has been prepared or updated by contributing experts to be submitted for the publication in Climate ADAPT': {
@@ -312,27 +315,8 @@ function PublicationDateInfo(props) {
   ) : null;
 }
 
-function ItemsList(props) {
-  let { value, join } = props;
-  if (join === undefined) {
-    join = ', ';
-  }
-  if (join === '<br />') {
-    return (
-      <span>
-        {value.map((item, index) => (
-          <Fragment key={index}>
-            <span>{item.title}</span>
-            <br />
-          </Fragment>
-        ))}
-      </span>
-    );
-  }
-  return <span>{value.map((item) => item.title).join(join)}</span>;
-}
-
 function ContentMetadata(props) {
+  const intl = useIntl();
   const { content } = props;
   const {
     sectors,
@@ -353,8 +337,6 @@ function ContentMetadata(props) {
   const isObservatoryItem = isObservatoryMetadataURL(location.pathname);
   const hasGeoChars = geochars !== null || spatial_layer.length > 0;
 
-  const intl = useIntl();
-
   let date_title;
   if (type === VIDEO) {
     date_title = intl.formatMessage(messages['Date of release:']);
@@ -387,7 +369,7 @@ function ContentMetadata(props) {
                     defaultMessage="Health impact:"
                   />
                 </h5>
-                <ItemsList value={health_impacts} />
+                <MetadataItemList value={health_impacts} />
               </>
             )}
           </>
@@ -410,7 +392,7 @@ function ContentMetadata(props) {
                 defaultMessage="Key Type Measures:"
               />
             </h5>
-            <ItemsList value={key_type_measures} />
+            <MetadataItemList value={key_type_measures} />
           </>
         )}
 
@@ -422,7 +404,7 @@ function ContentMetadata(props) {
                 defaultMessage="IPCC adaptation options categories:"
               />
             </h5>
-            <ItemsList value={ipcc_category} />
+            <MetadataItemList value={ipcc_category} />
           </>
         )}
 
@@ -436,7 +418,7 @@ function ContentMetadata(props) {
                     defaultMessage="Climate impacts:"
                   />
                 </h5>
-                <ItemsList value={climate_impacts} />
+                <MetadataItemList value={climate_impacts} />
               </>
             )}
 
@@ -448,7 +430,7 @@ function ContentMetadata(props) {
                     defaultMessage="Adaptation elements:"
                   />
                 </h5>
-                <ItemsList value={elements} />
+                <MetadataItemList value={elements} />
               </>
             )}
 
@@ -457,7 +439,7 @@ function ContentMetadata(props) {
                 <h5>
                   <FormattedMessage id="Sectors:" defaultMessage="Sectors:" />
                 </h5>
-                <ItemsList value={sectors} />
+                <MetadataItemList value={sectors} />
               </>
             )}
           </>
@@ -471,7 +453,7 @@ function ContentMetadata(props) {
                 defaultMessage="Governance level:"
               />
             </h5>
-            <ItemsList value={governance_level} join="<br />" />
+            <MetadataItemList value={governance_level} join_type="<br />" />
           </>
         )}
 

package/src/helpers/Utils.jsx

@@ -482,3 +482,26 @@ export const EventDetails = (props) => {
     </>
   );
 };
+
+export const MetadataItemList = (props) => {
+  const { value, join_type } = props;
+
+  return value && value.length > 0 ? (
+    <>
+      {!join_type ? (
+        <p>{value.map((item) => item.title).join(', ')}</p>
+      ) : (
+        <>
+          {value.map((item, index) => (
+            <React.Fragment key={index}>
+              <span>{item.title}</span>
+              {index !== value.length - 1 && (
+                <span dangerouslySetInnerHTML={{ __html: join_type }} />
+              )}
+            </React.Fragment>
+          ))}
+        </>
+      )}
+    </>
+  ) : null;
+};

package/src/helpers/index.js

@@ -15,6 +15,7 @@ export {
   ItemLogo,
   SubjectTags,
   EventDetails,
+  MetadataItemList,
 } from './Utils';
 export { default as ContentMetadata } from './ContentMetadata';
 export {

package/src/index.js

@@ -1,6 +1,11 @@
 import { compose } from 'redux';
-
 import { Sitemap } from '@plone/volto/components';
+import {
+  RASTWidgetView,
+  TranslationDisclaimer,
+} from '@eeacms/volto-cca-policy/components';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
+
 import CcaEventView from './components/theme/Views/CcaEventView';
 import NewsItemView from './components/theme/Views/NewsItemView';
 import EventView from './components/theme/Views/EventView';
@@ -9,28 +14,23 @@ import CaseStudyView from './components/theme/Views/CaseStudyView';
 import ProjectView from './components/theme/Views/ProjectView';
 import C3SIndicatorView from './components/theme/Views/C3SIndicatorView';
 import DatabaseItemView from './components/theme/Views/DatabaseItemView';
-import MissionFundingCCAView from './components/theme/Views/MissionFundingCCAView';
 
+import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
+import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
+import MigrationButtons from './components/MigrationButtons';
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
 
-import ccaLogo from '@eeacms/volto-cca-policy/../theme/assets/images/Header/climate-adapt-logo.svg';
-import ccaLogoWhite from '@eeacms/volto-cca-policy/../theme/assets/images/Header/climate-adapt-logo-white.svg';
-import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
-
-import observatoryLogoWhite from '@eeacms/volto-cca-policy/../theme/assets/images/Header/observatory-white-logo.svg';
-import europeanComissionLogo from '@eeacms/volto-cca-policy/../theme/assets/images/Footer/ec_logo.svg';
+import { langRedirection } from './store/middleware';
 
 import installBlocks from './components/manage/Blocks';
 import installSearchEngine from './search';
 import installStore from './store';
 
-import GeocharsWidget from './components/theme/Widgets/GeocharsWidget';
-import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
-import MigrationButtons from './components/MigrationButtons';
-import { TranslationDisclaimer } from '@eeacms/volto-cca-policy/components';
-
-import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
-import { langRedirection } from './store/middleware';
+import ccaLogo from '@eeacms/volto-cca-policy/../theme/assets/images/Header/climate-adapt-logo.svg';
+import ccaLogoWhite from '@eeacms/volto-cca-policy/../theme/assets/images/Header/climate-adapt-logo-white.svg';
+import observatoryLogoWhite from '@eeacms/volto-cca-policy/../theme/assets/images/Header/observatory-white-logo.svg';
+import europeanComissionLogo from '@eeacms/volto-cca-policy/../theme/assets/images/Footer/ec_logo.svg';
+import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-logo-white.svg';
 
 import './slate-styles.less';
 
@@ -286,7 +286,6 @@ const applyConfig = (config) => {
     'eea.climateadapt.c3sindicator': C3SIndicatorView,
     'eea.climateadapt.adaptationoption': AdaptationOptionView,
     'News Item': NewsItemView,
-    mission_funding_cca: MissionFundingCCAView,
   };
 
   config.views.layoutViewsNamesMapping.view_cca_event = 'CCA Event View';
@@ -387,6 +386,11 @@ const applyConfig = (config) => {
   config.widgets.id.geochars = GeocharsWidget;
   config.widgets.id.geolocation = GeolocationWidget;
 
+  if (config.widgets.views?.widget) {
+    config.widgets.views.id.rast_steps = RASTWidgetView;
+    config.widgets.views.widget.rast_steps = RASTWidgetView;
+  }
+
   config.settings.slate.styleMenu.inlineStyles = [
     ...(config.settings.slate.styleMenu?.inlineStyles || []),
     { cssClass: 'large-text', label: 'Large text' },
@@ -442,7 +446,6 @@ const applyConfig = (config) => {
   ];
 
   // plug custom redux middleware
-  //
   const storeExtender = (stack) => [langRedirection, ...stack];
   config.settings.storeExtenders = [
     storeExtender,

package/theme/elements/list.variables

@@ -6,4 +6,4 @@
          View
 --------------------*/
 
-@listFontWeight: 500;
+@listFontWeight: 400;

package/theme/extras/hero.overrides

@@ -1,4 +1,4 @@
 .styled-hero {
   margin-top: 0;
   margin-bottom: 0;
-}
+}

package/theme/globals/mission.less

@@ -1,5 +1,20 @@
 /* Mission subsite */
 
+.mission-item-view {
+  .ui.segment.metadata {
+    border: none;
+    background-color: #f9f9f9;
+
+    h5 {
+      margin: 1em 0 0.5em 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
 body.view-viewview.contenttype-subsite.section-mission
   .block.__grid.teaserGrid.centered
   h2 {

package/src/components/theme/Views/MissionFundingCCAView.jsx

@@ -1,190 +0,0 @@
-import { HTMLField, BannerTitle } from '@eeacms/volto-cca-policy/helpers';
-import { Container, Grid } from 'semantic-ui-react';
-import { PortalMessage } from '@eeacms/volto-cca-policy/components';
-import './styles.less';
-
-function MissiongFundingCCAView(props) {
-  const { content } = props;
-
-  return (
-    <div className="mission-funding-cca-view">
-      <BannerTitle
-        content={{ ...content, image: '' }}
-        data={{
-          info: [{ description: '' }],
-          hideContentType: true,
-          hideCreationDate: true,
-          hideModificationDate: true,
-          hidePublishingDate: true,
-          hideDownloadButton: false,
-          hideShareButton: false,
-          subtitle: 'EU and National Funding of Climate Change Adaption',
-        }}
-      />
-
-      <Container>
-        <PortalMessage content={content} />
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={8}
-              className="col-left"
-            >
-              {!!content.objective && content.objective.data.length > 7 && (
-                <>
-                  <h3>Objective of the funding programme</h3>
-                  <HTMLField value={content.objective} />
-                </>
-              )}
-
-              {!!content.funding_type && (
-                <>
-                  <h3>Type of funding</h3>
-                  <HTMLField value={content.funding_type} />
-                </>
-              )}
-
-              {!!content.budget_range && (
-                <>
-                  <h3>Expected budget range of proposals</h3>
-                  <p>{content.budget_range}</p>
-                </>
-              )}
-
-              {!!content.funding_rate && (
-                <>
-                  <h3>Funding rate (percentage of covered costs)</h3>
-                  <p>{content.funding_rate}</p>
-                </>
-              )}
-              <h3>
-                Can the received funding be combined with other funding sources
-                (blended)?
-              </h3>
-              <p>{content.is_blended === true ? 'Yes' : 'No'}</p>
-              <h3>Is a Consortium required to apply for the funding?</h3>
-              <p>{content.is_consortium_required === true ? 'Yes' : 'No'}</p>
-              {!!content.authority && (
-                <>
-                  <h3>Administering authority</h3>
-                  <p>{content.authority}</p>
-                </>
-              )}
-              {!!content.publication_page && (
-                <>
-                  <h3>Publication page</h3>
-                  <a href={content.publication_page}>
-                    {content.publication_page}
-                  </a>
-                </>
-              )}
-              {!!content.general_info && (
-                <>
-                  <h3>General information</h3>
-                  <a href={content.general_info}>{content.general_info}</a>
-                </>
-              )}
-              {!!content.further_info && (
-                <>
-                  <h3>Further information</h3>
-                  <p>{content.further_info}</p>
-                </>
-              )}
-            </Grid.Column>
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={4}
-              className="col-right"
-            >
-              <div className="metadata">
-                {!!content.country && content.country.length > 0 && (
-                  <>
-                    <h5>Countries where the funding opportunity is offered</h5>
-                    <p>
-                      {content.country
-                        .map((country) => country.title)
-                        .join(', ')}
-                    </p>
-                  </>
-                )}
-                {!!content.regions && content.regions.length > 0 && (
-                  <>
-                    <h5>Region where the funding is offered</h5>
-                    <p>{content.regions}</p>
-                  </>
-                )}
-                {!!content.rast_steps && content.rast_steps.length > 0 && (
-                  <>
-                    <h5>RAST step(s) of relevance</h5>
-                    <ul>
-                      {content.rast_steps.map((step) => (
-                        <li>{step.title}</li>
-                      ))}
-                    </ul>
-                  </>
-                )}
-                {!!content.eligible_entities &&
-                  content.eligible_entities.length > 0 && (
-                    <>
-                      <h5>Eligible to receive funding</h5>
-                      <ul>
-                        {content.eligible_entities.map((entity) => (
-                          <li>{entity.title}</li>
-                        ))}
-                      </ul>
-                    </>
-                  )}
-                {!!content.sectors && content.eligible_entities.length > 0 && (
-                  <>
-                    <h5>Adaptation Sectors</h5>
-                    <ul>
-                      {content.sectors.map((sector) => (
-                        <li>{sector.title}</li>
-                      ))}
-                    </ul>
-                  </>
-                )}
-              </div>
-            </Grid.Column>
-          </div>
-        </Grid>
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={12}
-              className="col-full"
-            >
-              <div className="styled-slate has--style_name--content-box-gray styled">
-                <div className="disclaimer content-box">
-                  <div className="content-box-inner">
-                    <p>
-                      <strong>Disclaimer</strong>
-                      <br />
-                      The contents and links to third-party items on this
-                      Mission webpage are developed by the MIP4Adapt team led by
-                      Ricardo, under contract CINEA/2022/OP/0013/SI2.884597
-                      funded by the European Union and do not necessarily
-                      reflect those of the European Union, CINEA, or those of
-                      the European Environment Agency (EEA) as host of the
-                      Climate-ADAPT Platform. Neither the European Union nor
-                      CINEA nor the EEA accepts responsibility or liability
-                      arising out of or in connection with the information on
-                      these pages.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </Grid.Column>
-          </div>
-        </Grid>
-      </Container>
-    </div>
-  );
-}
-
-export default MissiongFundingCCAView;

package/src/components/theme/Views/MissionFundingCCAView.test.jsx

@@ -1,106 +0,0 @@
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { Provider } from 'react-intl-redux';
-import MissiongFundingCCAView from './MissionFundingCCAView';
-import config from '@plone/volto/registry';
-
-config.blocks = {
-  blocksConfig: {
-    title: {
-      view: () => <div>Title Block Component</div>,
-    },
-  },
-};
-
-const mockStore = configureStore();
-
-describe('MissiongFundingCCAView', () => {
-  it('should render the component', () => {
-    const data = {
-      content: {
-        contributors: [],
-        country: [
-          {
-            title: 'Albania',
-            token: 'AL',
-          },
-          {
-            title: 'Armenia',
-            token: 'AM',
-          },
-        ],
-        description: 'Summary',
-        eligible_entities: [
-          {
-            title: 'Social, cultural, educational bodies',
-            token: 'B_SOCIAL_CULTURAL',
-          },
-          {
-            title: 'NGOs',
-            token: 'D_NGOS',
-          },
-        ],
-        funding_rate: 'funding rate',
-        funding_type: {
-          'content-type': 'text/html',
-          data: '<p>type of funding</p>',
-          encoding: 'utf8',
-        },
-        further_info: 'further info',
-        general_info: '/sandbox',
-        is_blended: true,
-        is_consortium_required: false,
-        objective: {
-          'content-type': 'text/html',
-          data: '<p></p>',
-          encoding: 'utf8',
-        },
-        publication_page: 'https://google.com',
-        rast_steps: [
-          {
-            title: 'Step 1. Preparing the ground for adaptation',
-            token: 'STEP_1',
-          },
-          {
-            title: 'Step 4. Assessing and selecting adaptation options',
-            token: 'STEP_4',
-          },
-        ],
-        regions: 'region here',
-        sectors: [
-          {
-            title: 'Biodiversity',
-            token: 'BIODIVERSITY',
-          },
-          {
-            title: 'Coastal areas',
-            token: 'COASTAL',
-          },
-        ],
-        title: 'Title here',
-      },
-    };
-
-    const store = mockStore({
-      userSession: { token: '1234' },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <MissiongFundingCCAView {...data} />
-        </MemoryRouter>
-      </Provider>,
-    );
-    expect(
-      container.querySelector('.mission-funding-cca-view'),
-    ).toBeInTheDocument();
-  });
-});

package/src/components/theme/Views/styles.less

@@ -1,7 +0,0 @@
-// MissionFundingCCAView
-div.col-right {
-  div.metadata {
-    padding: 10px;
-    background: #e6e7e8;
-  }
-}

package/src/components/theme/Widgets/TokenWidget.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
-
-export const TokenWidget = ({ value, children, className }) =>
-  value ? (
-    <span className={cx(className, 'token', 'widget')}>
-      {value.map((tag) => (
-        <Tag href={`http://search.apps.eea.europa.eu/?q=${tag}`} key={tag}>
-          {children ? children(tag) : tag}
-        </Tag>
-      ))}
-    </span>
-  ) : (
-    ''
-  );