@eeacms/volto-cca-policy 0.2.42 → 0.2.44

package/CHANGELOG.md

@@ -4,6 +4,51 @@ 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.44](https://github.com/eea/volto-cca-policy/compare/0.2.43...0.2.44) - 20 June 2024
+
+#### :nail_care: Enhancements
+
+- change(block):  RAST svg styling [kreafox - [`da47397`](https://github.com/eea/volto-cca-policy/commit/da47397a0513b8ff55a3796712b7f70c64ec2966)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`b41cc24`](https://github.com/eea/volto-cca-policy/commit/b41cc24fcaf25a32af2fed778af7183b942c2dbd)]
+
+#### :hammer_and_wrench: Others
+
+- Fix bugs [Tiberiu Ichim - [`9585833`](https://github.com/eea/volto-cca-policy/commit/9585833739e2e951bff24c5a33c2d99ab36fb0c1)]
+- Update snapshots [Tiberiu Ichim - [`15a62cf`](https://github.com/eea/volto-cca-policy/commit/15a62cf96d5b112e1d3cf1df44c6758ce0e2d73c)]
+### [0.2.43](https://github.com/eea/volto-cca-policy/compare/0.2.42...0.2.43) - 13 June 2024
+
+#### :rocket: New Features
+
+- feat(event): add i18n messages for documents and improve code readability [kreafox - [`f23168a`](https://github.com/eea/volto-cca-policy/commit/f23168ad982317bdf1523cdd42f39ef84b55da0e)]
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-embed@10.0.2 [EEA Jenkins - [`2e0174c`](https://github.com/eea/volto-cca-policy/commit/2e0174c154250e838535e3f9c8b1c8f83fa8ccde)]
+
+#### :bug: Bug Fixes
+
+- fix(event): use email link interpolation correctly [kreafox - [`0527737`](https://github.com/eea/volto-cca-policy/commit/0527737a47ae1e70a5719b160736be9247d68634)]
+
+#### :nail_care: Enhancements
+
+- change(event): simplify component structure and organize imports [kreafox - [`30a7766`](https://github.com/eea/volto-cca-policy/commit/30a7766d33a04d26d17b798d0ef776603c7fe29c)]
+- change(event): use renderBlocks instead of custom BannerTitle component [kreafox - [`0dd267a`](https://github.com/eea/volto-cca-policy/commit/0dd267af20184dbd683671ef1e23dd3d15606667)]
+
+#### :hammer_and_wrench: Others
+
+- test: fix warning message [kreafox - [`4d31ff2`](https://github.com/eea/volto-cca-policy/commit/4d31ff20dcfce88ad96f608409a5e12b20f13c9e)]
+- test: update snapshot [kreafox - [`c8047ca`](https://github.com/eea/volto-cca-policy/commit/c8047ca5d592fea5db728999f1f7a8f96cad6496)]
+- New version [Tiberiu Ichim - [`8617e34`](https://github.com/eea/volto-cca-policy/commit/8617e343ec075259078b533064bb6de2a3005a48)]
+- https://github.com/elastic/search-ui/issues/1046 [Tiberiu Ichim - [`9eb0d03`](https://github.com/eea/volto-cca-policy/commit/9eb0d03aace62b7692033d9e429c42f10e176354)]
+- Pin @eeacms/volto-embed [kreafox - [`0418854`](https://github.com/eea/volto-cca-policy/commit/04188549444a127e041ef98973900814f86e3859)]
+- Let's try something else [Tiberiu Ichim - [`ab847b7`](https://github.com/eea/volto-cca-policy/commit/ab847b7d35448dadf29892bc10f8024dabf6d664)]
+- Remove dependency for search-ui [Tiberiu Ichim - [`f3bf4a4`](https://github.com/eea/volto-cca-policy/commit/f3bf4a42f1dac44c57b6c1557b583112e328d26d)]
+- Refs #271086 - wip tests [Tripon Eugen - [`e2cfdc7`](https://github.com/eea/volto-cca-policy/commit/e2cfdc78dc82b70d147bc1a7505632b9577719b8)]
+- Refs #271086 - package.json resolutions [Tripon Eugen - [`09cce63`](https://github.com/eea/volto-cca-policy/commit/09cce6376cc489d5466981ce1a8e53bb8a994c1e)]
+- Refs #271086 - add elements filter at cse [Tripon Eugen - [`549030c`](https://github.com/eea/volto-cca-policy/commit/549030cde005331f26a9ccde09394fee3f43f049)]
 ### [0.2.42](https://github.com/eea/volto-cca-policy/compare/0.2.41...0.2.42) - 4 June 2024
 
 ### [0.2.41](https://github.com/eea/volto-cca-policy/compare/0.2.40...0.2.41) - 4 June 2024
@@ -1362,13 +1407,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -1385,9 +1427,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -1604,7 +1643,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -2085,7 +2123,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -31,13 +31,13 @@
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "^1.33.2",
-    "@eeacms/volto-embed": "10.0.1",
+    "@eeacms/volto-embed": "^9.1.1",
     "@eeacms/volto-globalsearch": "^1.1.0",
     "@eeacms/volto-openlayers-map": "*",
-    "@eeacms/volto-searchlib": "^0.9.3",
+    "@eeacms/volto-searchlib": "2.0.2",
+    "@elastic/search-ui": "1.21.2",
     "@eeacms/volto-slate-label": "^0.6.0",
     "@eeacms/volto-tabs-block": "^7.5.1",
-    "@elastic/search-ui": "1.21.2",
     "d3-array": "^2.12.1",
     "jotai": "^1.6.0",
     "query-string": "7.1.0",

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

@@ -19,12 +19,14 @@ export default function CaseStudyExplorerView(props) {
   const [activeFilters, setActiveFilters] = React.useState({
     sectors: [],
     impacts: [],
+    elements: [],
     measures: [],
   });
 
   const [activeItems, setActiveItems] = React.useState(cases);
   const [filters, setFilters] = React.useState({
     impacts: [],
+    elements: [],
     sectors: [],
     measures: {},
   });
@@ -44,12 +46,14 @@ export default function CaseStudyExplorerView(props) {
     let _filters = filters;
     _filters.impacts = _filters_data.impacts;
     _filters.sectors = _filters_data.sectors;
+    _filters.elements = _filters_data.elements;
     setFilters(_filters);
   }, [
     filters,
     cases,
     activeFilters.impacts,
     activeFilters.sectors,
+    activeFilters.elements,
     activeFilters.measures,
     activeItems.length,
   ]);

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

@@ -84,6 +84,31 @@ export default function CaseStudyFilters(props) {
             ),
           )}
         </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex.includes(3)}
+          index={3}
+          onClick={handleClick}
+        >
+          <AccordionIcon active={activeIndex.includes(3)} />
+          <FormattedMessage
+            id="Adaptation elements"
+            defaultMessage="Adaptation elements"
+          />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(3)}>
+          {Object.entries(filters?.elements || {}).map(
+            ([value, label], index) => (
+              <Checkbox
+                label={intl.formatMessage({ id: label })}
+                value={value}
+                checked={activeFilters.elements.includes(value)}
+                name="elements"
+                onChange={checkboxChangeHandler}
+                key={'element' + index}
+              />
+            ),
+          )}
+        </Accordion.Content>
         <Accordion.Title
           active={activeIndex.includes(1)}
           index={1}

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

@@ -16,6 +16,7 @@ describe('CaseStudyFilters', () => {
         // impacts: [{ DROUGHT: 'Drought' }],
         sectors: [],
         impacts: [],
+        elements: [],
         measures: {
           //   Measure1: [
           //     { key: 'M11', value: 'm11' },
@@ -26,6 +27,7 @@ describe('CaseStudyFilters', () => {
       activeFilters: {
         sectors: [],
         impacts: [],
+        elements: [],
         measures: [],
       },
     };

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

@@ -43,7 +43,6 @@ export default function FeatureDisplay({ feature }) {
         <span
           dangerouslySetInnerHTML={{
             __html: feature.adaptation_options_links.replaceAll('<>', '; '),
-            // __html: feature.adaptation_options_links,
           }}
         ></span>
       </p>

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

@@ -35,6 +35,7 @@ export function filterCases(cases, activeFilters) {
     if (
       activeFilters.sectors.length === 0 &&
       activeFilters.measures.length === 0 &&
+      activeFilters.elements.length === 0 &&
       activeFilters.impacts.length === 0
     )
       return _case;
@@ -45,6 +46,10 @@ export function filterCases(cases, activeFilters) {
       if (_case.properties.sectors.includes(',' + filter + ',')) flag = true;
     });
 
+    activeFilters.elements.forEach((filter) => {
+      if (_case.properties.elements.includes(',' + filter + ',')) flag = true;
+    });
+
     activeFilters.impacts.forEach((filter) => {
       if (_case.properties.impacts.includes(',' + filter + ',')) flag = true;
     });
@@ -60,7 +65,7 @@ export function filterCases(cases, activeFilters) {
 }
 
 export function getFilters(cases) {
-  let _filters = { sectors: {}, impacts: {}, measures: {} };
+  let _filters = { sectors: {}, impacts: {}, elements: {}, measures: {} };
 
   for (let key of Object.keys(cases)) {
     const _case = cases[key];
@@ -81,6 +86,17 @@ export function getFilters(cases) {
       }
     }
 
+    let elementKeys = _case.properties?.elements?.split(',');
+    let elementNames = _case.properties?.elements_str?.split(',') || [];
+    for (let i = 0; i < elementNames.length; i++) {
+      if (
+        !_filters.elements.hasOwnProperty(elementKeys[i + 1]) &&
+        elementKeys[i + 1].length
+      ) {
+        _filters.elements[elementKeys[i + 1]] = elementNames[i];
+      }
+    }
+
     // let ktmKeys = _case.properties.ktms.split(',');
     // let ktmNames = _case.properties.impacts_str.split(',');
     // for (let i = 0; i < ktmKeys.length; i++) {

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsEdit.jsx

@@ -6,7 +6,7 @@ import View from './CollectionStatsView';
 import TransparentOverlay from '../../TransparentOverlay';
 
 const Edit = (props) => {
-  const schema = Schema();
+  const schema = Schema(props.data);
   return (
     <>
       <TransparentOverlay>

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.jsx

@@ -66,21 +66,29 @@ const makeSearchBlockQuery = ({ base, query, field, value }) => {
   return `${base}?${params}`;
 };
 
-const makeEEASearchQuery = ({ base, field, value }) => {
+const makeEEASearchQuery = ({ base, field, value, extraFilters }) => {
   // TODO: don't hardcode the language
-  const rest =
-    'filters[1][field]=issued.date' +
-    '&filters[1][values][0]=Last 5 years' +
-    '&filters[1][type]=any' +
-    '&filters[2][field]=language' +
-    '&filters[2][values][0]=en' +
-    '&filters[2][type]=any' +
-    '&sort-field=issued.date' +
-    '&sort-direction=desc';
-
-  const filter = `filters[0][field]=${field}&filters[0][type]=any&filters[0][values][0]=${value}`;
-
-  return `${base}?size=n_10_n&${filter}&${rest}`;
+  const allFields = [
+    ['issued.date', 'Last 5 years'],
+    ['language', 'en'],
+    [field, value],
+    ...(extraFilters?.map(({ id, value }) => [id, value]) || []),
+  ];
+
+  const rest = '&sort-field=issued.date&sort-direction=desc';
+
+  // See FilterAceContentView
+  const filters = allFields
+    .map(([name, anyValue], index) =>
+      [
+        `filters[${index}][field]=${name}`,
+        `filters[${index}][type]=any`,
+        `filters[${index}][values][0]=${anyValue}`,
+      ].join('&'),
+    )
+    .join('&');
+
+  return `${base}?size=n_10_n&${filters}&${rest}`;
 };
 
 const urlBuilders = {
@@ -116,6 +124,7 @@ export default function CollectionStatsView(props) {
 
   const keys = Object.keys(stats);
   const urlHandler = urlBuilders[queryParameterStyle] || nop;
+  const extraFilters = data?.extraFilters || [];
 
   return (
     (field && keys.length > 0 && (
@@ -133,6 +142,7 @@ export default function CollectionStatsView(props) {
                   query: query.query,
                   field: groupDefinition.searchFieldName || field,
                   value: kV,
+                  extraFilters,
                 })}
               >
                 <IconComponent

package/src/components/manage/Blocks/CollectionStatistics/schema.js

@@ -3,14 +3,36 @@ import {
   hasDateOperation,
 } from '@plone/volto/components/manage/Blocks/Search/utils';
 
-const Schema = () => {
+const ExtraFilter = (_) => ({
+  title: 'Extra Filters',
+  fieldsets: [{ id: 'default', fields: ['id', 'value'], title: 'Default' }],
+  properties: {
+    id: {
+      title: 'Field ID',
+    },
+    value: {
+      title: 'Filter value',
+    },
+  },
+  required: [],
+});
+
+const Schema = (formData) => {
+  const isEEASearch = formData?.queryParameterStyle === 'EEASemanticSearch';
+
   return {
     title: 'Collection Statistics',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['aggregateField', 'queryParameterStyle', 'href', 'showLabel'],
+        fields: [
+          'aggregateField',
+          'queryParameterStyle',
+          'href',
+          'showLabel',
+          ...(isEEASearch ? ['extraFilters'] : []),
+        ],
       },
       {
         id: 'query',
@@ -68,6 +90,12 @@ const Schema = () => {
         selectedItemAttrs: [],
         allowExternals: true,
       },
+      extraFilters: {
+        title: 'Extra filters',
+        widget: 'object_list',
+        schema: ExtraFilter({ formData }),
+        // schemaExtender: (schema) => schema,
+      },
     },
     required: [],
   };

package/src/components/manage/Blocks/ContentLinks/DropdownListView.jsx

@@ -12,17 +12,18 @@ const messages = defineMessages({
 });
 
 const getDropdownOptions = (items) => {
-  const options = items?.map((item) => {
-    const source = item?.source?.[0];
-    return {
-      key: source?.id,
-      value: source?.id,
-      text: item.item_title,
-      as: Link,
-      to: flattenToAppURL(source?.['@id']),
-    };
-  });
-  return options;
+  return (
+    items?.map((item, index) => {
+      const source = item?.source?.[0];
+      return {
+        key: source?.id || index,
+        value: source?.id,
+        text: item.item_title,
+        as: Link,
+        to: flattenToAppURL(source?.['@id']),
+      };
+    }) || []
+  );
 };
 
 const DropdownListView = (props) => {

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

@@ -1,11 +1,17 @@
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
 import './styles.less';
 
-const LinkWrap = ({ item, pathname, children, isActive }) => {
+const LinkWrap = ({ item, children, isActive, className }) => {
   return item ? (
-    <UniversalLink item={item} className="step-link">
-      <g className={isActive ? 'link-active' : ''}>
+    <UniversalLink
+      item={item}
+      className={cx('step-link', className, {
+        active: isActive,
+      })}
+    >
+      <g>
         <title>{item.title}</title>
         {children}
       </g>
@@ -15,8 +21,6 @@ const LinkWrap = ({ item, pathname, children, isActive }) => {
   );
 };
 
-// export default function RASTView(props) {
-// const RASTView = (props) => {
 export default function RASTMap(props) {
   const { path, pathname, activeMenu, skip_items } = props;
   const currentPath = path || pathname;
@@ -29,7 +33,7 @@ export default function RASTMap(props) {
 
   if (activeMenu !== null) {
     if (data.includes(activeMenu.toString())) {
-      currentMenu = -1;
+      currentMenu = null;
     } else {
       let activeMenuMinus = 0;
       for (let i = 0; i < data.length; i++) {
@@ -40,7 +44,11 @@ export default function RASTMap(props) {
   }
 
   return (
-    <div className="rast-map-block">
+    <div
+      className={cx('rast-map-block', {
+        landing: currentMenu === null,
+      })}
+    >
       <svg
         width="290"
         height="280"
@@ -337,6 +345,7 @@ export default function RASTMap(props) {
             item={items[0]}
             pathname={currentPath}
             isActive={currentMenu === 0 ? true : false}
+            className="step-0"
           >
             <path
               d="M210.5 32C222.4 32 232 41.6 232 53.5C232 65.4 222.4 75 210.5 75C198.6 75 189 65.4 189 53.5C189 41.6 198.6 32 210.5 32Z"
@@ -356,6 +365,7 @@ export default function RASTMap(props) {
             item={items[1]}
             pathname={currentPath}
             isActive={currentMenu === 1 ? true : false}
+            className="step-1"
           >
             <path
               d="M260.5 128C272.4 128 282 137.6 282 149.5C282 161.4 272.4 171 260.5 171C248.6 171 239 161.4 239 149.5C239 137.6 248.6 128 260.5 128Z"
@@ -375,6 +385,7 @@ export default function RASTMap(props) {
             item={items[2]}
             pathname={currentPath}
             isActive={currentMenu === 2 ? true : false}
+            className="step-2"
           >
             <path
               d="M210.5 228C222.4 228 232 237.6 232 249.5C232 261.4 222.4 271 210.5 271C198.6 271 189 261.4 189 249.5C189 237.6 198.6 228 210.5 228Z"
@@ -394,6 +405,7 @@ export default function RASTMap(props) {
             item={items[3]}
             pathname={currentPath}
             isActive={currentMenu === 3 ? true : false}
+            className="step-3"
           >
             <path
               d="M82.5 228C94.4 228 104 237.6 104 249.5C104 261.4 94.4 271 82.5 271C70.6 271 61 261.4 61 249.5C61 237.6 70.6 228 82.5 228Z"
@@ -413,6 +425,7 @@ export default function RASTMap(props) {
             item={items[4]}
             pathname={currentPath}
             isActive={currentMenu === 4 ? true : false}
+            className="step-4"
           >
             <path
               d="M29.5 128C41.4 128 51 137.6 51 149.5C51 161.4 41.4 171 29.5 171C17.6 171 8 161.4 8 149.5C8 137.6 17.6 128 29.5 128Z"
@@ -432,6 +445,7 @@ export default function RASTMap(props) {
             item={items[5]}
             pathname={currentPath}
             isActive={currentMenu === 5 ? true : false}
+            className="step-5"
           >
             <path
               d="M82.5 32C94.4 32 104 41.6 104 53.5C104 65.4 94.4 75 82.5 75C70.6 75 61 65.4 61 53.5C61 41.6 70.6 32 82.5 32Z"

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

@@ -3,52 +3,104 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
-.rast-block {
-  a rect.circle:hover {
-    fill: #183 !important;
-  }
+.rast-map-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2em;
 
-  // a rect.circle {
-  //   pointer-events: all !important;
-  // }
+  &:not(.landing) {
+    .step-0:not(.active) g path:nth-of-type(1) {
+      fill: #0c3330;
+    }
 
-  // svg,
-  // svg * {
-  //   pointer-events: none;
-  // }
+    .step-1:not(.active) g path:nth-of-type(1) {
+      fill: #031624;
+    }
 
-  .step-link:hover {
-    .circle {
-      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
+    .step-2:not(.active) g path:nth-of-type(1) {
+      fill: #081936;
     }
-  }
 
-  .link-active {
-    .circle {
-      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
+    .step-3:not(.active) g path:nth-of-type(1) {
+      fill: #262c4e;
     }
+
+    .step-4:not(.active) g path:nth-of-type(1) {
+      fill: #534022;
+    }
+
+    .step-5:not(.active) g path:nth-of-type(1) {
+      fill: #39531f;
+    }
+
+    .step-link {
+      path:nth-of-type(2),
+      path:nth-of-type(3) {
+        fill: #929eaf;
+      }
+    }
+  }
+
+  .step-link {
+    transform-box: fill-box;
+    transform-origin: 50% 50%;
+    transition: 0.3s all;
+  }
+
+  .step-0.step-link:hover g path:nth-of-type(1),
+  .step-0.step-link.active g path:nth-of-type(1) {
+    fill: #155246;
+  }
+
+  .step-1.step-link:hover g path:nth-of-type(1),
+  .step-1.step-link.active g path:nth-of-type(1) {
+    fill: #062435;
   }
 
-  .item.active a {
-    font-weight: bold;
+  .step-2.step-link:hover g path:nth-of-type(1),
+  .step-2.step-link.active g path:nth-of-type(1) {
+    fill: #0d284f;
   }
 
-  .ui.accordion .active.content {
-    padding: 1rem 1rem !important;
+  .step-3.step-link:hover g path:nth-of-type(1),
+  .step-3.step-link.active g path:nth-of-type(1) {
+    fill: #434772;
   }
 
-  .substep a {
-    color: inherit;
+  .step-4.step-link:hover g path:nth-of-type(1),
+  .step-4.step-link.active g path:nth-of-type(1) {
+    fill: #926830;
   }
 
-  .substep:not(:last-child) {
-    padding-bottom: 0.8em;
+  .step-5.step-link:hover g path:nth-of-type(1),
+  .step-5.step-link.active g path:nth-of-type(1) {
+    fill: #64862c;
   }
 
-  .rast-map-block {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 2em;
+  .step-link:hover,
+  .step-link.active {
+    transform: scale(1.3, 1.3);
+
+    path:nth-of-type(2),
+    path:nth-of-type(3) {
+      fill: #fff;
+    }
+
+    .step-link .item.active a {
+      font-weight: bold;
+    }
+
+    .ui.accordion .active.content {
+      padding: 1rem 1rem !important;
+    }
+
+    .substep a {
+      color: inherit;
+    }
+
+    .substep:not(:last-child) {
+      padding-bottom: 0.8em;
+    }
   }
 }

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

@@ -1,58 +1,73 @@
 import React from 'react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { Grid, Container, Segment } from 'semantic-ui-react';
 import {
-  DocumentsList,
   HTMLField,
-  BannerTitle,
   EventDetails,
+  DocumentsList,
 } from '@eeacms/volto-cca-policy/helpers';
 import { PortalMessage } from '@eeacms/volto-cca-policy/components';
-import { FormattedMessage } from 'react-intl';
+import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+
+const messages = defineMessages({
+  download_agenda: {
+    id: 'Download the detailed agenda',
+    defaultMessage: 'Download the detailed agenda',
+  },
+  download_documents: {
+    id: 'A background document for the event is available',
+    defaultMessage: 'A background document for the event is available',
+  },
+});
+
+const DocumentSection = ({ title, file }) => (
+  <DocumentsList
+    content={{
+      show_counter: false,
+      section_title: title,
+      cca_files: [
+        {
+          url: file?.download,
+          title: file?.filename,
+        },
+      ],
+    }}
+  />
+);
 
 function CcaEventView(props) {
+  const intl = useIntl();
   const { content } = props;
-  const { event_language } = content;
-  // cca_files: [content.agenda_file]}
-  if (content.agenda_file) {
-    content.agenda_file['url'] = content.agenda_file['download'];
-    content.agenda_file['title'] = content.agenda_file['filename'];
-  }
-  if (content.background_documents) {
-    content.background_documents['url'] =
-      content.background_documents['download'];
-    content.background_documents['title'] =
-      content.background_documents['filename'];
-  }
-  const agenda_files = {
-    section_title: 'Download the detailed agenda',
-    cca_files: [content.agenda_file],
-    show_counter: false,
-  };
-  const background_documents = {
-    section_title: 'A background document for the event is available ',
-    cca_files: [content.background_documents],
-    show_counter: false,
-  };
+  const {
+    event_language,
+    agenda_file,
+    background_documents,
+    participation,
+    contact_email,
+  } = content;
+
+  const {
+    blocks: filtered_blocks,
+    blocks_layout: filtered_blocks_layout,
+  } = filterBlocks(content, 'tabs_block');
 
   return (
     <div className="cca-event-view">
-      <BannerTitle
-        content={{ ...content, '@type': 'Climate adapt event' }}
-        data={{
-          info: [{ description: '' }],
-          hideContentType: false,
-          hideCreationDate: false,
-          hideModificationDate: false,
-          hidePublishingDate: false,
-          hideDownloadButton: false,
-          hideShareButton: false,
+      <RenderBlocks
+        {...props}
+        content={{
+          ...content,
+          '@type': 'climate-adapt-event',
+          blocks: filtered_blocks,
+          blocks_layout: filtered_blocks_layout,
         }}
       />
 
       <Container>
         <PortalMessage content={content} />
         <Grid columns="12">
-          <div className="row">
+          <Grid.Row>
             <Grid.Column
               mobile={12}
               tablet={12}
@@ -69,9 +84,18 @@ function CcaEventView(props) {
               </h2>
               <HTMLField value={content.agenda} />
 
-              {content?.agenda_file && <DocumentsList content={agenda_files} />}
-              {content?.background_documents && (
-                <DocumentsList content={background_documents} />
+              {agenda_file && (
+                <DocumentSection
+                  title={intl.formatMessage(messages.download_agenda)}
+                  file={agenda_file}
+                />
+              )}
+
+              {background_documents && (
+                <DocumentSection
+                  title={intl.formatMessage(messages.download_documents)}
+                  file={background_documents}
+                />
               )}
 
               <h2>
@@ -86,20 +110,21 @@ function CcaEventView(props) {
                   defaultMessage="Participation"
                 />
               </h3>
-              <HTMLField value={content.participation} />
+              <HTMLField value={participation} />
 
               <h2>
                 <FormattedMessage id="Contact" defaultMessage="Contact" />
               </h2>
-              <p>
-                <FormattedMessage
-                  id="If you have any further questions you can contact"
-                  defaultMessage="If you have any further questions you can contact"
-                />{' '}
-                <a href="mailto:{content.contact_email}">
-                  {content.contact_email}
-                </a>
-              </p>
+
+              {contact_email && (
+                <p>
+                  <FormattedMessage
+                    id="If you have any further questions you can contact"
+                    defaultMessage="If you have any further questions you can contact"
+                  />{' '}
+                  <a href={`mailto:${contact_email}`}>{contact_email}</a>
+                </p>
+              )}
 
               {event_language && (
                 <>
@@ -123,7 +148,7 @@ function CcaEventView(props) {
                 <EventDetails {...props} />
               </Segment>
             </Grid.Column>
-          </div>
+          </Grid.Row>
         </Grid>
       </Container>
     </div>

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import { expandToBackendURL } from '@plone/volto/helpers';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Grid, Container, Segment, Button, Icon } from 'semantic-ui-react';
+import { Grid, Container, Segment } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import {
   SubjectTags,
@@ -11,15 +9,7 @@ import {
 import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
 import { PortalMessage } from '@eeacms/volto-cca-policy/components';
 
-const messages = defineMessages({
-  downloadEvent: {
-    id: 'Download this event in iCal format',
-    defaultMessage: 'Download this event in iCal format',
-  },
-});
-
 function EventView(props) {
-  const intl = useIntl();
   const { content } = props;
   const {
     blocks: filtered_blocks,
@@ -56,41 +46,6 @@ function EventView(props) {
             <Grid.Column mobile={12} tablet={12} computer={4}>
               <Segment>
                 <EventDetails {...props} />
-                {content?.event_url && (
-                  <>
-                    <h4>
-                      <FormattedMessage id="Web" defaultMessage="Web" />
-                    </h4>
-                    <p>
-                      <a href={content.event_url} target="_blank">
-                        <FormattedMessage
-                          id="Visit external website"
-                          defaultMessage="Visit external website"
-                        />
-                      </a>
-                    </p>
-                  </>
-                )}
-
-                <div className="download-event">
-                  <a
-                    className="ics-download"
-                    target="_blank"
-                    rel="noreferrer"
-                    href={`${expandToBackendURL(content['@id'])}/ics_view`}
-                  >
-                    <Button
-                      className="icon inverted primary labeled"
-                      title={intl.formatMessage(messages.downloadEvent)}
-                    >
-                      <Icon name="calendar alternate outline" />
-                      <FormattedMessage
-                        id="Download Event"
-                        defaultMessage="Download Event"
-                      />
-                    </Button>
-                  </a>
-                </div>
               </Segment>
             </Grid.Column>
           </Grid.Row>

package/src/helpers/Utils.jsx

@@ -1,17 +1,18 @@
 import React, { Fragment } from 'react';
+import { expandToBackendURL } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-import { UniversalLink } from '@plone/volto/components';
-import config from '@plone/volto/registry';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import {
   Segment,
   Image,
   ListItem,
   List,
-  Button,
   Icon,
   Label,
+  Button,
 } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 import {
   CASE_STUDY,
   PUBLICATION_REPORT,
@@ -22,9 +23,12 @@ import {
 } from '@eeacms/volto-cca-policy/helpers/Constants';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { makeContributionsSearchQuery } from '@eeacms/volto-cca-policy/helpers';
-import { useIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
+  downloadEvent: {
+    id: 'Download this event in iCal format',
+    defaultMessage: 'Download this event in iCal format',
+  },
   documents: {
     id: 'Documents',
     defaultMessage: 'Documents',
@@ -449,8 +453,29 @@ export const SubjectTags = (props) => {
   ) : null;
 };
 
+export const WebDetails = (props) => {
+  const { content } = props;
+  const eventUrl = content?.event_url;
+  return eventUrl ? (
+    <>
+      <h4>
+        <FormattedMessage id="Web" defaultMessage="Web" />
+      </h4>
+      <p>
+        <a href={eventUrl} target="_blank">
+          <FormattedMessage
+            id="Visit external website"
+            defaultMessage="Visit external website"
+          />
+        </a>
+      </p>
+    </>
+  ) : null;
+};
+
 export const EventDetails = (props) => {
   const { content } = props;
+  const intl = useIntl();
 
   return (
     <>
@@ -479,6 +504,28 @@ export const EventDetails = (props) => {
           <p>{content.contact_email}</p>
         </>
       )}
+
+      <WebDetails {...props} />
+
+      <div className="download-event">
+        <a
+          className="ics-download"
+          target="_blank"
+          rel="noreferrer"
+          href={`${expandToBackendURL(content['@id'])}/ics_view`}
+        >
+          <Button
+            className="icon inverted primary labeled"
+            title={intl.formatMessage(messages.downloadEvent)}
+          >
+            <Icon name="calendar alternate outline" />
+            <FormattedMessage
+              id="Download Event"
+              defaultMessage="Download Event"
+            />
+          </Button>
+        </a>
+      </div>
     </>
   );
 };