@eeacms/volto-cca-policy 0.1.17 → 0.1.18

package/CHANGELOG.md

@@ -4,7 +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).
 
-### [0.1.17](https://github.com/eea/volto-cca-policy/compare/0.1.16...0.1.17) - 28 April 2023
+### [0.1.18](https://github.com/eea/volto-cca-policy/compare/0.1.17...0.1.18) - 16 May 2023
+
+#### :hammer_and_wrench: Others
+
+- Small Improvement on region select [kreafox - [`1221718`](https://github.com/eea/volto-cca-policy/commit/1221718978f8b20e6cf58bb984f9c9d85b691e83)]
+- Fix region name [kreafox - [`aa8b266`](https://github.com/eea/volto-cca-policy/commit/aa8b26631cf104fabe1a0040a4c0b52f5d5650ca)]
+- Fix case on other regions [kreafox - [`fac6535`](https://github.com/eea/volto-cca-policy/commit/fac653548863808958b422ce669878d1e50d9797)]
+- Fix regions name [kreafox - [`5107f8b`](https://github.com/eea/volto-cca-policy/commit/5107f8b25add8b647debcaa032b9224b147fe6e6)]
+- Refs #252182 - Get rid of listing custom organisation cards. [GhitaB - [`467faaf`](https://github.com/eea/volto-cca-policy/commit/467faafafe3692da58a85a7af95bd508114f7689)]
+- Fix mobile menu background color [kreafox - [`ae00bd8`](https://github.com/eea/volto-cca-policy/commit/ae00bd877f6d2c62fcc6fad13e3151850003aa3e)]
+- Refs #252182 - WIP Custom listing variation for organisation cards. [GhitaB - [`2ebca9a`](https://github.com/eea/volto-cca-policy/commit/2ebca9a3a45ba4f20ebc29b27d9f1a626611760c)]
+- Refs #252182 - WIP Custom listing variation for organisation cards. [GhitaB - [`c638573`](https://github.com/eea/volto-cca-policy/commit/c63857327c582a9dace952e8cabf902096f8ff09)]
+- Fix region name [kreafox - [`6baa26a`](https://github.com/eea/volto-cca-policy/commit/6baa26a32ebdb0c7ec5d91007abcb0e7d206c3f2)]
+- Add trans region select block [kreafox - [`b95f6b3`](https://github.com/eea/volto-cca-policy/commit/b95f6b3cca8075a7a1e6a23ee14010a2d5a07d5b)]
+- Fix macro regions [kreafox - [`388b443`](https://github.com/eea/volto-cca-policy/commit/388b4438b812a42e0f7be1e3d8b023befc21b5ab)]
+- Set default nr of items [kreafox - [`286e83b`](https://github.com/eea/volto-cca-policy/commit/286e83b1cd17d31e749b58583fbe4efcaee47fe2)]
+- Filter block styling [kreafox - [`b718171`](https://github.com/eea/volto-cca-policy/commit/b718171d429e011d372008a8a38de456066915d1)]
+- Code cleanup [kreafox - [`be09233`](https://github.com/eea/volto-cca-policy/commit/be092333735f9c50c1fdcbdcbfdc28f8a3056350)]
+- Make itemModel work [Tiberiu Ichim - [`8fed2bc`](https://github.com/eea/volto-cca-policy/commit/8fed2bce3f777b705ebca06abd58826f744530c3)]
+- WIP filter ace content block [kreafox - [`3f8b97e`](https://github.com/eea/volto-cca-policy/commit/3f8b97e62bb8bb5c93e4b26b61c982efdb5a47c7)]
+### [0.1.17](https://github.com/eea/volto-cca-policy/compare/0.1.16...0.1.17) - 2 May 2023
 
 #### :hammer_and_wrench: Others
 

package/package.json

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

package/src/components/manage/Blocks/FilterAceContent/FilterAceContentEdit.jsx

@@ -1,17 +1,50 @@
 import React from 'react';
-
+import { useSelector, useDispatch } from 'react-redux';
+import { getVocabulary } from '@plone/volto/actions';
 import { SidebarPortal } from '@plone/volto/components';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-
-import schema from './schema';
+import { BIOREGIONS, OTHER_REGIONS } from '@eeacms/volto-cca-policy/helpers';
+import FilterSchema from './schema';
 import FilterAceContentView from './FilterAceContentView';
 
+const REGIONS = 'eea.climateadapt.regions';
+
+const getMacroRegions = (regions, bioregions) => {
+  const macro_regions = [[OTHER_REGIONS, OTHER_REGIONS]];
+  regions.forEach((region) => {
+    Object.entries(bioregions).forEach(([k, v]) => {
+      if (region.label === v) {
+        macro_regions.push([k, region.label]);
+      }
+    });
+  });
+
+  return macro_regions;
+};
+
 export default function RelevantAceContentEdit(props) {
-  const { block, data, onChangeBlock, selected, id } = props;
+  const { block, data, onChangeBlock, selected, id, pathname } = props;
+  const dispatch = useDispatch();
+
+  const regionsVocabItems = useSelector((state) =>
+    state.vocabularies[REGIONS]?.loaded
+      ? state.vocabularies[REGIONS].items
+      : [],
+  );
+
+  React.useEffect(() => {
+    const action = getVocabulary({
+      vocabNameOrURL: REGIONS,
+    });
+    dispatch(action);
+  }, [dispatch]);
+
+  const macro_regions = getMacroRegions(regionsVocabItems, BIOREGIONS);
+  const schema = FilterSchema(data, macro_regions);
 
   return (
     <div>
-      <FilterAceContentView data={data} id={id} mode="edit" />
+      <FilterAceContentView data={data} id={id} mode="edit" path={pathname} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}

package/src/components/manage/Blocks/FilterAceContent/FilterAceContentView.jsx

@@ -1,38 +1,209 @@
 import React from 'react';
-// import { List } from 'semantic-ui-react';
-// import { Link } from 'react-router-dom';
-// import { flattenToAppURL } from '@plone/volto/helpers';
+import loadable from '@loadable/component';
 import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
+import { useSelector, useDispatch } from 'react-redux';
+import { getVocabulary } from '@plone/volto/actions';
+import { OTHER_REGIONS } from '@eeacms/volto-cca-policy/helpers';
+import {
+  Option,
+  DropdownIndicator,
+  selectTheme,
+  customSelectStyles,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-const FilterAceContentView = (props) => {
-  const { data, id, mode = 'view' } = props;
-  //   const { title } = data;
-  //   const results = _v_results || [];
-  const queryData = {
+import './style.less';
+
+const Select = loadable(() => import('react-select'));
+
+const IMPACTS = 'eea.climateadapt.aceitems_climateimpacts';
+const SECTORS = 'eea.climateadapt.aceitems_sectors';
+
+const FIELDS = [
+  'bio_regions',
+  'countries',
+  'element_type',
+  'funding_programme',
+  'macro_regions',
+  'origin_website',
+  'search_text',
+  'search_type',
+  'sector',
+  'special_tags',
+];
+
+const fieldmap = {
+  origin_website: 'origin_website',
+  search_type: 'search_type',
+  element_type: 'elements',
+  search_text: 'SearchableText',
+  special_tags: 'special_tags',
+  sector: 'sectors',
+  countries: 'countries',
+  macro_regions: 'macro_regions',
+  bio_regions: 'bio_regions',
+  funding_programme: 'funding_programme',
+};
+
+const otherMacroRegions = [
+  'TRANS_BIO_MACARO',
+  'TRANS_MACRO_CAR_AREA',
+  'TRANS_MACRO_AMAZONIA',
+  'TRANS_BIO_ANATOLIAN',
+  'TRANS_MACRO_IND_OCEAN_AREA',
+];
+
+const impacts_no_value = [
+  {
+    label: 'All climate impacts',
+    value: '',
+  },
+];
+
+const sectors_no_value = [
+  {
+    label: 'All adaptation sectors',
+    value: '',
+  },
+];
+
+const applyQuery = (id, data, currentLang, impacts, sectors) => {
+  const defaultQuery = Object.entries(data)
+    .filter(
+      ([field, value]) => FIELDS.includes(field) && value && value.length > 0,
+    )
+    .map(([field, value]) => {
+      let values = [];
+      if (value.includes(OTHER_REGIONS)) {
+        values = [...value, ...otherMacroRegions];
+        values.splice(values.indexOf(OTHER_REGIONS), 1);
+      } else {
+        values = value;
+      }
+
+      return {
+        i: fieldmap[field],
+        o: 'plone.app.querystring.operation.selection.any',
+        v: values,
+      };
+    });
+
+  defaultQuery.push({
+    i: 'Language',
+    o: 'plone.app.querystring.operation.selection.any',
+    v: currentLang,
+  });
+
+  if (impacts) defaultQuery.push(impacts);
+  if (sectors) defaultQuery.push(sectors);
+
+  return {
     block: id,
-    querystring: {
-      query: [
-        {
-          i: 'portal_type',
-          o: 'plone.app.querystring.operation.selection.any',
-          v: ['Document'],
-        },
-      ],
-    },
-    sort_order: 'ascending',
+    limit: data.nr_items,
+    query: defaultQuery,
+    sort_on: data.sortBy,
+    sort_order: 'descending',
+    template: 'summary',
+    itemModel: { '@type': 'simpleItem' },
   };
+};
+
+const FilterAceContentView = (props) => {
+  const { data, id, mode = 'view' } = props;
+  const dispatch = useDispatch();
+  const currentLang = useSelector((state) => state.intl.locale);
+  const impactsVocabItems = useSelector((state) =>
+    state.vocabularies[IMPACTS]?.loaded
+      ? state.vocabularies[IMPACTS].items
+      : [],
+  );
+  const sectorsVocabItems = useSelector((state) =>
+    state.vocabularies[SECTORS]?.loaded
+      ? state.vocabularies[SECTORS].items
+      : [],
+  );
+
+  const [impactsQuery, setImpactsQueryQuery] = React.useState();
+  const [sectorsQuery, setSectorsQuery] = React.useState();
+
+  React.useEffect(() => {
+    const action = getVocabulary({
+      vocabNameOrURL: IMPACTS,
+    });
+    dispatch(action);
+  }, [dispatch]);
+
+  React.useEffect(() => {
+    const action = getVocabulary({
+      vocabNameOrURL: SECTORS,
+    });
+    dispatch(action);
+  }, [dispatch]);
+
+  const listingBodyData = applyQuery(
+    id,
+    data,
+    currentLang,
+    impactsQuery,
+    sectorsQuery,
+  );
 
   return (
     <div className="block filter-acecontent-block">
-      Filter ace content view
       {data.title && <h4>{data.title}</h4>}
-      <ListingBody
-        id={id}
-        data={queryData}
-        path={props.path}
-        isEditMode={mode === 'edit'}
-        variation={null}
+      <Select
+        id="field-impacts"
+        name="impacts"
+        disabled={false}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={[impacts_no_value[0], ...(impactsVocabItems || [])]}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        defaultValue={impacts_no_value}
+        onChange={({ value }) => {
+          if (value) {
+            setImpactsQueryQuery({
+              i: 'climate_impacts',
+              o: 'plone.app.querystring.operation.selection.any',
+              v: value,
+            });
+          } else {
+            setImpactsQueryQuery(null);
+          }
+        }}
+      />
+      <Select
+        id="field-sectors"
+        name="sectors"
+        disabled={false}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={[sectors_no_value[0], ...(sectorsVocabItems || [])]}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option }}
+        defaultValue={sectors_no_value}
+        onChange={({ value }) => {
+          if (value) {
+            setSectorsQuery({
+              i: 'sectors',
+              o: 'plone.app.querystring.operation.selection.any',
+              v: value,
+            });
+          } else {
+            setSectorsQuery(null);
+          }
+        }}
       />
+      <div className="listing-wrapper">
+        <ListingBody
+          id={id}
+          data={listingBodyData}
+          path={props.path}
+          isEditMode={mode === 'edit'}
+        />
+      </div>
     </div>
   );
 };

package/src/components/manage/Blocks/FilterAceContent/index.js

@@ -5,7 +5,7 @@ import FilterAceContentView from './FilterAceContentView';
 export default function installBlock(config) {
   config.blocks.blocksConfig.filterAceContent = {
     id: 'filterAceContent',
-    title: 'Filter Ace Content',
+    title: 'Filter AceContent',
     icon: zoomSVG,
     group: 'site',
     view: FilterAceContentView,

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

@@ -1,112 +1,117 @@
-export default {
-  title: 'Filter Ace Content',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: [
-        'title',
-        'search_text',
-        'origin_website',
-        'search_type',
-        'element_type',
-        'sector',
-        'special_tags',
-        'countries',
-        'macro_regions',
-        'bio_regions',
-        'funding_programme',
-        'nr_items',
-      ],
-    },
-  ],
-  properties: {
-    title: {
-      title: 'Block title',
-    },
-    search_text: {
-      title: 'Search text',
-    },
-    origin_website: {
-      title: 'Origin website',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.funding_programme',
+const FilterSchema = (data, macro_regions) => {
+  return {
+    title: 'Filter Ace Content',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'title',
+          'search_text',
+          'origin_website',
+          'search_type',
+          'element_type',
+          'sector',
+          'special_tags',
+          'countries',
+          'macro_regions',
+          'bio_regions',
+          'funding_programme',
+          'nr_items',
+        ],
       },
-    },
-    search_type: {
-      title: 'Aceitem type',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.search_types_vocabulary',
+    ],
+    properties: {
+      title: {
+        title: 'Block title',
       },
-    },
-    element_type: {
-      title: 'Element type',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.element_types_vocabulary',
+      search_text: {
+        title: 'Search text',
       },
-    },
-    sector: {
-      title: 'Sector',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.aceitems_sectors',
+      origin_website: {
+        title: 'Origin website',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.origin_website',
+        },
       },
-    },
-    special_tags: {
-      title: 'Special tags',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.special_tags',
+      search_type: {
+        title: 'Aceitem type',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.search_types_vocabulary',
+        },
       },
-    },
-    countries: {
-      title: 'Countries',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.ace_countries',
+      element_type: {
+        title: 'Element type',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.element_types_vocabulary',
+        },
       },
-    },
-    macro_regions: {
-      title: 'Macro-Transnational Regions',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.regions',
+      sector: {
+        title: 'Sector',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.aceitems_sectors',
+        },
       },
-    },
-    bio_regions: {
-      title: 'Biogeographical Regions',
-      widget: 'array',
-      vocabulary: {
-        '@id': 'eea.climateadapt.bioregions',
+      special_tags: {
+        title: 'Special tags',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.special_tags',
+        },
       },
-    },
-    funding_programme: {
-      title: 'Funding programmes',
-      type: 'choice',
-      vocabulary: {
-        '@id': 'eea.climateadapt.funding_programme',
+      countries: {
+        title: 'Countries',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.ace_countries',
+        },
+      },
+      macro_regions: {
+        title: 'Macro-Transnational Regions',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.regions',
+        },
+        choices: macro_regions, // override to set correct values
+      },
+      bio_regions: {
+        title: 'Biogeographical Regions',
+        widget: 'array',
+        vocabulary: {
+          '@id': 'eea.climateadapt.bioregions',
+        },
+      },
+      funding_programme: {
+        title: 'Funding programmes',
+        type: 'choice',
+        vocabulary: {
+          '@id': 'eea.climateadapt.funding_programme',
+        },
+      },
+      nr_items: {
+        title: 'Nr of items to show',
+        type: 'number',
+        default: '5',
+      },
+      sortBy: {
+        title: 'Sort by',
+        description: 'Sort order for results and assigned items',
+        choices: [
+          ['modified', 'Last Modified'],
+          ['effective', 'Last Published'],
+          ['getId', 'Alphabetical sorting'],
+        ],
+        // vocabulary: {
+        //   '@id': 'sortby_vocabulary',
+        // },
       },
     },
-    nr_items: {
-      title: 'Nr of items to show',
-      type: 'number',
-      default: '0',
-    },
-    sortBy: {
-      title: 'Sort by',
-      description: 'Sort order for results and assigned items',
-      choices: [
-        ['MODIFIED', 'Last Modified'],
-        ['EFFECTIVE', 'Last Published'],
-        ['NAME', 'Alphabetical sorting'],
-      ],
-      // vocabulary: {
-      //   '@id': 'sortby_vocabulary',
-      // },
-    },
-  },
-  required: [],
+    required: [],
+  };
 };
+
+export default FilterSchema;

package/src/components/manage/Blocks/FilterAceContent/style.less

@@ -0,0 +1,3 @@
+.listing-wrapper {
+  margin-top: 1.5em;
+}

package/src/components/manage/Blocks/RelevantAceContent/RelevantAceContentView.jsx

@@ -5,15 +5,12 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 
 const RelevantAceContentView = (props) => {
   const { data } = props;
-  const { title, _v_results, items, combine_results } = data;
+  const { title, _v_results, items = [], combine_results } = data;
   const results = _v_results || [];
 
-  // console.log(data);
-
   return (
     <div className="block relevant-acecontent-block">
       {title && <h4>{title}</h4>}
-
       {combine_results ? (
         <>
           {(items || []).map((item, index) => (
@@ -49,6 +46,7 @@ const RelevantAceContentView = (props) => {
           )}
         </>
       )}
+      {results.length === 0 && items.length === 0 && <div>No items</div>}
     </div>
   );
 };

package/src/components/manage/Blocks/RelevantAceContent/index.js

@@ -5,7 +5,7 @@ import RelevantAceContentView from './RelevantAceContentView';
 export default function installBlock(config) {
   config.blocks.blocksConfig.relevantAceContent = {
     id: 'relevantAceContent',
-    title: 'Relevant acecontent',
+    title: 'Relevant AceContent',
     icon: zoomSVG,
     group: 'site',
     view: RelevantAceContentView,

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

@@ -128,7 +128,7 @@ export default {
     nr_items: {
       title: 'Nr of items to show',
       type: 'number',
-      default: '0',
+      default: '5',
     },
     show_share_btn: {
       title: 'Show the share button',

package/src/components/manage/Blocks/SearchAceContent/SearchAceContentView.jsx

@@ -6,8 +6,6 @@ export default function SearchAceContentView(props) {
   const { data } = props;
   const results = data._v_results || [];
 
-  // console.log(data);
-
   return results && results.length > 0 ? (
     <div className="block search-acecontent-block">
       {data.title && <h4>{data.title}</h4>}

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

@@ -93,7 +93,7 @@ export default {
     nr_items: {
       title: 'Nr of items to show',
       type: 'number',
-      default: '0',
+      default: '5',
     },
   },
   required: [],

package/src/components/manage/Blocks/TransRegionSelect/TransRegionSelectEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import schema from './schema';
+import TransRegionSelectView from './TransRegionSelectView';
+
+export default function TransRegionSelectEdit(props) {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  return (
+    <div>
+      <TransRegionSelectView data={data} id={id} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
+}

package/src/components/manage/Blocks/TransRegionSelect/TransRegionSelectView.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { compose } from 'redux';
+import { Link } from 'react-router-dom';
+import { Dropdown } from 'semantic-ui-react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+import { getQueryStringResults } from '@plone/volto/actions';
+import { regionCountries } from './countries';
+
+const getSiblings = (items) => {
+  const regionsDropdown = (items || []).map((item) => {
+    return {
+      key: item.title,
+      value: item.title,
+      text: item.title,
+      as: Link,
+      to: item['@id'],
+    };
+  });
+
+  regionsDropdown.sort((a, b) =>
+    a.text < b.text ? -1 : a.text > b.text ? 1 : 0,
+  );
+
+  return regionsDropdown;
+};
+
+const TransRegionSelectView = (props) => {
+  const { id, data, content } = props;
+  const { title } = content;
+  const dispatch = useDispatch();
+  const querystringResults = useSelector(
+    (state) => state.querystringsearch.subrequests,
+  );
+  const currentLang = useSelector((state) => state.intl.locale);
+  const regions = getSiblings(querystringResults[id]?.items);
+  const otherRegionsCoverTitle =
+    'EU outermost regions and the overseas countries and territories';
+
+  React.useEffect(() => {
+    dispatch(
+      getQueryStringResults(
+        '/',
+        {
+          b_start: 0,
+          b_size: 10000,
+          limit: 10000,
+          query: [
+            {
+              i: 'path',
+              o: 'plone.app.querystring.operation.string.relativePath',
+              v: '/en/countries-regions/transnational-regions/::1',
+            },
+            {
+              i: 'object_provides',
+              o: 'plone.app.querystring.operation.selection.any',
+              v: 'eea.climateadapt.interfaces.ITransnationalRegionMarker',
+            },
+            {
+              i: 'review_state',
+              o: 'plone.app.querystring.operation.selection.any',
+              v: 'published',
+            },
+          ],
+        },
+        id,
+      ),
+    );
+  }, [dispatch, id]);
+
+  const defaultValue =
+    title === otherRegionsCoverTitle ? 'Other regions' : title;
+
+  return (
+    <div className="block">
+      {data.title && <h5>{data.title}</h5>}
+      <Dropdown
+        selection
+        text="Choose a region"
+        options={regions}
+        defaultValue={defaultValue}
+        icon="angle down"
+      />
+      <p></p>
+      <div className="countries">
+        {title === otherRegionsCoverTitle ||
+        title === 'Other regions' ? null : (
+          <h5>Region's countries:</h5>
+        )}
+        {regionCountries
+          .filter((item) => item.region === title)
+          .map((item, i) => (
+            <div className="countries-listing" key={i}>
+              {item.countries.map((country, i) => {
+                const url = `/${currentLang}${country[1]}`;
+                return (
+                  <React.Fragment key={i}>
+                    {country[1].length > 0 ? (
+                      <Link to={url}>
+                        <span>
+                          {country[0]}
+                          {i < item.countries.length - 1 ? ', ' : ''}
+                        </span>
+                      </Link>
+                    ) : (
+                      <span>
+                        {country[0]}
+                        {i < item.countries.length - 1 ? ', ' : ''}
+                      </span>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default compose(
+  connect((state, props) => ({
+    content: state.content.data,
+  })),
+)(TransRegionSelectView);

package/src/components/manage/Blocks/TransRegionSelect/countries.js

@@ -0,0 +1,170 @@
+export const regionCountries = [
+  {
+    region: 'Adriatic-Ionian Area',
+    countries: [
+      ['Croatia', '/countries/croatia'],
+      ['Greece', '/countries/greece'],
+      ['Italy', '/countries/italy'],
+      ['Slovenia', '/countries/slovenia'],
+      ['Albania', ''],
+      ['Bosnia and Herzegovina', ''],
+      ['Montenegro', ''],
+      ['Republic of North Macedonia', ''],
+      ['Serbia', ''],
+    ],
+  },
+  {
+    region: 'Alpine Space',
+    countries: [
+      ['Austria', '/countries/austria'],
+      ['France', '/countries/france'],
+      ['Germany', '/countries/germany'],
+      ['Italy', '/countries/italy'],
+      ['Slovenia', '/countries/slovenia'],
+      ['Liechtenstein', ''],
+      ['Switzerland', '/countries/switzerland'],
+    ],
+  },
+  {
+    region: 'Northern Periphery and Arctic',
+    countries: [
+      ['Finland', '/countries/finland'],
+      ['Ireland', '/countries/ireland'],
+      ['Sweden', '/countries/sweden'],
+      // ['United Kingdom', '/countries/united-kingdom'],
+      ['Iceland', '/countries/iceland'],
+      ['Norway', '/countries/norway'],
+      ['Greenland', ''],
+      ['Faroe Islands', ''],
+    ],
+  },
+  {
+    region: 'Atlantic Area',
+    countries: [
+      ['France', '/countries/france'],
+      ['Ireland', '/countries/ireland'],
+      ['Portugal', '/countries/portugal'],
+      ['Spain', '/countries/spain'],
+      // ['United Kingdom', '/countries/united-kingdom'],
+    ],
+  },
+  // {
+  //   region: 'Balkan-Mediterranean',
+  //   countries: [
+  //     ['Bulgaria', '/countries/bulgaria'],
+  //     ['Cyprus', '/countries/cyprus'],
+  //     ['Greece', '/countries/greece'],
+  //     ['Albania', ''],
+  //     ['Republic of North Macedonia', ''],
+  //   ],
+  // },
+  {
+    region: 'Baltic Sea',
+    countries: [
+      ['Denmark', '/countries/denmark'],
+      ['Estonia', '/countries/estonia'],
+      ['Finland', '/countries/finland'],
+      ['Germany', '/countries/germany'],
+      ['Latvia', '/countries/latvia'],
+      ['Lithuania', '/countries/lithuania'],
+      ['Poland', '/countries/poland'],
+      ['Sweden', '/countries/sweden'],
+      ['Norway', '/countries/norway'],
+      // ['Russia', ''],
+      // ['Belarus', ''],
+    ],
+  },
+  {
+    region: 'Central Europe',
+    countries: [
+      ['Austria', '/countries/austria'],
+      ['Croatia', '/countries/croatia'],
+      ['Czechia', '/countries/czech-republic'],
+      ['Germany', '/countries/germany'],
+      ['Hungary', '/countries/hungary'],
+      ['Italy', '/countries/italy'],
+      ['Poland', '/countries/poland'],
+      ['Slovakia', '/countries/slovakia'],
+      ['Slovenia', '/countries/slovenia'],
+    ],
+  },
+  {
+    region: 'Danube Area',
+    countries: [
+      ['Austria', '/countries/austria'],
+      ['Bulgaria', '/countries/bulgaria'],
+      ['Croatia', '/countries/croatia'],
+      ['Czechia', '/countries/czech-republic'],
+      ['Germany', '/countries/germany'],
+      ['Hungary', '/countries/hungary'],
+      ['Romania', '/countries/romania'],
+      ['Slovakia', '/countries/slovakia'],
+      ['Slovenia', '/countries/slovenia'],
+      ['Bosnia and Herzegovina, ', ''],
+      ['Montenegro', ''],
+      ['Serbia', ''],
+      ['Ukraine', ''],
+      ['Republic of Moldova', ''],
+    ],
+  },
+  {
+    region: 'Mediterranean Area',
+    countries: [
+      ['Albania', ''],
+      ['Bosnia and Herzegovina', ''],
+      ['Bulgaria', '/countries/bulgaria'],
+      ['Croatia', '/countries/croatia'],
+      ['Cyprus', '/countries/cyprus'],
+      ['France', '/countries/france'],
+      ['Greece', '/countries/greece'],
+      ['Italy', '/countries/italy'],
+      ['Malta', '/countries/malta'],
+      ['Montenegro', ''],
+      ['Portugal', '/countries/portugal'],
+      ['Republic of North Macedonia', ''],
+      ['Slovenia', '/countries/slovenia'],
+      ['Spain', '/countries/spain'],
+      // ['United Kingdom', '/countries/united-kingdom'],
+    ],
+  },
+  {
+    region: 'North Sea Region',
+    countries: [
+      ['Belgium', '/countries/belgium'],
+      ['Denmark', '/countries/denmark'],
+      ['Germany', '/countries/germany'],
+      ['France', '/countries/france'],
+      ['Netherlands', '/countries/netherlands'],
+      ['Sweden', '/countries/sweden'],
+      // ['United Kingdom', '/countries/united-kingdom'],
+      ['Norway', '/countries/norway'],
+    ],
+  },
+  {
+    region: 'North-West Europe',
+    countries: [
+      ['Belgium', '/countries/belgium'],
+      ['France', '/countries/france'],
+      ['Germany', '/countries/germany'],
+      ['Ireland', '/countries/ireland'],
+      ['Luxembourg', '/countries/luxembourg'],
+      ['Netherlands', '/countries/netherlands'],
+      ['Switzerland', '/countries/switzerland'],
+      // ['United Kingdom', '/countries/united-kingdom'],
+    ],
+  },
+  {
+    region: 'South-West Europe',
+    countries: [
+      ['France', '/countries/france'],
+      ['Portugal', '/countries/portugal'],
+      ['Spain', '/countries/spain'],
+      // ['United Kingdom', '/countries/united-kingdom'],
+      ['Andorra', ''],
+    ],
+  },
+  // {
+  //   region: 'Other regions',
+  //   countries: [],
+  // },
+];

package/src/components/manage/Blocks/TransRegionSelect/index.js

@@ -0,0 +1,22 @@
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+import TransRegionSelectEdit from './TransRegionSelectEdit';
+import TransRegionSelectView from './TransRegionSelectView';
+
+export default function installBlock(config) {
+  config.blocks.blocksConfig.transRegionSelect = {
+    id: 'transRegionSelect',
+    title: 'Trans Region Select',
+    icon: zoomSVG,
+    group: 'site',
+    view: TransRegionSelectView,
+    edit: TransRegionSelectEdit,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+  };
+
+  return config;
+}

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

@@ -0,0 +1,16 @@
+export default {
+  title: 'Trans Region Select',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Block title',
+    },
+  },
+  required: [],
+};

package/src/components/manage/Blocks/index.js

@@ -5,6 +5,7 @@ import installCaseStudyExplorerBlock from './CaseStudyExplorer';
 import installSearchAceContent from './SearchAceContent';
 import installRelevantAceContent from './RelevantAceContent';
 import installFilterAceContent from './FilterAceContent';
+import installTransRegionSelect from './TransRegionSelect';
 
 export default function installBlocks(config) {
   config.blocks.blocksConfig.title.restricted = false;
@@ -15,5 +16,6 @@ export default function installBlocks(config) {
     installSearchAceContent,
     installRelevantAceContent,
     installFilterAceContent,
+    installTransRegionSelect,
   )(config);
 }

package/src/helpers/Constants.jsx

@@ -96,6 +96,8 @@ export const BIOREGIONS = {
   TRANS_BIO_STEPPIC: 'Steppic',
 };
 
+export const OTHER_REGIONS = 'Other Regions';
+
 export const SUBNATIONAL_REGIONS = {
   SUBN_Région_de_Bruxelles_Capit:
     'Région de Bruxelles-Capitale/Brussels Hoofdstedelijk Gewest (BE)',

package/src/helpers/index.js

@@ -15,6 +15,7 @@ export ShareInfo from './ShareInfo';
 export {
   ACE_COUNTRIES,
   BIOREGIONS,
+  OTHER_REGIONS,
   SUBNATIONAL_REGIONS,
   EU_COUNTRIES,
   WIDGET_COUNTRIES,

package/theme/globals/site.overrides

@@ -183,9 +183,18 @@ body.subsite-mkh {
     background: @green-1;
   }
 
+  #mega-menu {
+    .ui.accordion .title i,
+    .ui.accordion button.title i {
+      color: @white;
+    }
+  }
+
   footer,
+  .burger-action,
+  #search-box,
   #mega-menu,
-  #search-box {
+  #mega-menu .ui.accordion .content {
     background: @subsiteBackgroundGradient;
   }
 }