@eeacms/volto-cca-policy 0.1.102 → 0.2.1

package/CHANGELOG.md

@@ -4,6 +4,76 @@ 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.1](https://github.com/eea/volto-cca-policy/compare/0.2.0...0.2.1) - 5 April 2024
+
+#### :bug: Bug Fixes
+
+- fix: default position for disclaimer [kreafox - [`1a8ab49`](https://github.com/eea/volto-cca-policy/commit/1a8ab496d091ef9894ca31bc2f1d6d226863e720)]
+
+#### :hammer_and_wrench: Others
+
+- Style improvements [kreafox - [`91d4e68`](https://github.com/eea/volto-cca-policy/commit/91d4e68512fdbaef0b9f1e9db8a227f629c9d17b)]
+### [0.2.0](https://github.com/eea/volto-cca-policy/compare/0.1.102...0.2.0) - 5 April 2024
+
+#### :rocket: New Features
+
+- feat: add option to use white variant of logo for subsites [kreafox - [`7a443d5`](https://github.com/eea/volto-cca-policy/commit/7a443d534e824f3e576a39810b116aa224ff50c7)]
+- feat: use toast message for translation disclaimers [kreafox - [`941a53c`](https://github.com/eea/volto-cca-policy/commit/941a53c682b922f049740ab56ea996a0d4f7a1bf)]
+- feat: add white variant of logo, add slate styles [kreafox - [`ad0dabf`](https://github.com/eea/volto-cca-policy/commit/ad0dabff55a42ff1b88ef58ac51f752252cf3344)]
+
+#### :bug: Bug Fixes
+
+- fix: banner title component in case of homepage [kreafox - [`868d45d`](https://github.com/eea/volto-cca-policy/commit/868d45d8652935913a9a054e6ce897a1013c5fe6)]
+- fix: disclaimers on inversed homepage [kreafox - [`5d61622`](https://github.com/eea/volto-cca-policy/commit/5d6162289d8cda47452186e85b4e9439b677eebd)]
+
+#### :nail_care: Enhancements
+
+- change: remove CreatableSelectWidget (we can use it now from volto-eea-website-theme) [kreafox - [`6c8a242`](https://github.com/eea/volto-cca-policy/commit/6c8a242cb22b4ee65c8d391ce96e5639bba687bf)]
+- change: move disclaimer to appExtras [kreafox - [`55c665f`](https://github.com/eea/volto-cca-policy/commit/55c665fec06c8174db0d8f92eefc04b5b8af1512)]
+
+#### :house: Internal changes
+
+- style: improve translation disclaimer on mobile [kreafox - [`604e3a1`](https://github.com/eea/volto-cca-policy/commit/604e3a1007a0b0a3daf7f6ce335c41676b6d0efc)]
+
+#### :hammer_and_wrench: Others
+
+- Fix test [Tiberiu Ichim - [`3e2760b`](https://github.com/eea/volto-cca-policy/commit/3e2760b4c3ebb0559283e0fea32c35f44b7cb987)]
+- Refs #268061 - reactui checkbox [Tripon Eugen - [`a227576`](https://github.com/eea/volto-cca-policy/commit/a22757632d0ef96ed365ceab04845961c271450c)]
+- Update README.md (just to retry tests) [Ghiță Bizău - [`db26abd`](https://github.com/eea/volto-cca-policy/commit/db26abd73d52118185340de2b3ca6335939d005e)]
+- Try to fix test: Uncaught [TypeError: Cannot read properties of undefined (reading 'groups')] [GhitaB - [`d1d1e8e`](https://github.com/eea/volto-cca-policy/commit/d1d1e8eefbf96b96384a1584e25eaf0591416308)]
+- RASTMap: fix Invalid DOM property stop-color. Did you mean stopColor?. [GhitaB - [`eb167d4`](https://github.com/eea/volto-cca-policy/commit/eb167d4b012643e8e6fc720767446804a9fdf260)]
+- Refs #268061 - testing [Tripon Eugen - [`095371a`](https://github.com/eea/volto-cca-policy/commit/095371af6eb57b1fcfcadf70c26afdef90b2d8ef)]
+- Add test. [GhitaB - [`6a50882`](https://github.com/eea/volto-cca-policy/commit/6a508821236df764d5ab07c38215f13445fc4e9a)]
+- Don't fail in SSR [Tiberiu Ichim - [`8cd6b71`](https://github.com/eea/volto-cca-policy/commit/8cd6b71cba148e505a00007dfc1c164cb8df401f)]
+- Refs #268061 - coverage test [Tripon Eugen - [`8374f66`](https://github.com/eea/volto-cca-policy/commit/8374f66f2feecfe672596c6b50f70ff1f3fc653e)]
+- Refs #268061 - rastmap coverage unit test [Tripon Eugen - [`07bb646`](https://github.com/eea/volto-cca-policy/commit/07bb646e9c73bb1f42bd258877d0ef01cf8e6353)]
+- Refs #268061 - add filter test and effect [Tripon Eugen - [`e2daa4b`](https://github.com/eea/volto-cca-policy/commit/e2daa4b9c00232ed7fc7cbfdbc7bcd3880940e67)]
+- Refs #268061 - add filter test [Tripon Eugen - [`9bacc3d`](https://github.com/eea/volto-cca-policy/commit/9bacc3d4176d391d6565d32f953054b1bf348e39)]
+- Refs #268061 - key type measure filter css [Tripon Eugen - [`7bd2e22`](https://github.com/eea/volto-cca-policy/commit/7bd2e2266ff18604161b6fba57fa5d7e06f068dd)]
+- Refs #268061 - key type measure filter css [Tripon Eugen - [`270fd0c`](https://github.com/eea/volto-cca-policy/commit/270fd0cb252a08a443ec9a14b32c915c443511f1)]
+- Refs #268061 - accordion css [Tripon Eugen - [`6665dc6`](https://github.com/eea/volto-cca-policy/commit/6665dc630e9292d6b7b2e36e4cd35f5caaa38dcd)]
+- Refs #268061 - add key type measure design, popup design and filter accordion [Tripon Eugen - [`71b1b21`](https://github.com/eea/volto-cca-policy/commit/71b1b211524f3938c0a6e1c09b4e163bd15e31ae)]
+- Refs #161494 - country profile detail [Tripon Eugen - [`109e56a`](https://github.com/eea/volto-cca-policy/commit/109e56ace11974d98667c5e4038d894c9cc0671a)]
+- bump 0.2.0 [kreafox - [`83c5d52`](https://github.com/eea/volto-cca-policy/commit/83c5d52aa9e97ff635d7199acde4cc3d1579dae9)]
+- tests: fix duplicated code issue [kreafox - [`1b291a4`](https://github.com/eea/volto-cca-policy/commit/1b291a43d7461b0b8930c6c9bb87944b8e2e73c5)]
+- eslint fixes [Tiberiu Ichim - [`370410b`](https://github.com/eea/volto-cca-policy/commit/370410b41b2e5b01c11ce1ca2955bb96dcc5e529)]
+- We don't need the category here, its provided by the backend [Tiberiu Ichim - [`1a60c4e`](https://github.com/eea/volto-cca-policy/commit/1a60c4e3cf298effd35608678a1270d29b6c08d9)]
+- Refactor indicators listing/overview blocks [Tiberiu Ichim - [`635a812`](https://github.com/eea/volto-cca-policy/commit/635a812f87e8a7ac248b6aa4012f6c2a6de37283)]
+- No need axios [Tiberiu Ichim - [`1d6e5b1`](https://github.com/eea/volto-cca-policy/commit/1d6e5b1d40a456674683bf09a623139df360c5f8)]
+- Simplify c3s_indicators_overview code [Tiberiu Ichim - [`f29a446`](https://github.com/eea/volto-cca-policy/commit/f29a4462727316dbd661cbca62dd970ba9640f92)]
+- test: update snapshots [kreafox - [`03cdb0b`](https://github.com/eea/volto-cca-policy/commit/03cdb0bfbd42d2f01abdc6d3e1ff1cd80126b943)]
+- Don't call hook conditionally [Tiberiu Ichim - [`2256907`](https://github.com/eea/volto-cca-policy/commit/2256907e6f6a6379b2dd9e3525d0e881febca4b7)]
+- Refactor TransRegionSelectView [Tiberiu Ichim - [`89b00c2`](https://github.com/eea/volto-cca-policy/commit/89b00c272b6407b215a4785e7c7ce9f212797954)]
+- Refs #260715 - test coverage add RASTMap add items [Tripon Eugen - [`58a898c`](https://github.com/eea/volto-cca-policy/commit/58a898c44e3353ed14ff32531dce26bda20901f6)]
+- Refs #260715 - test coverage add RASTMap [Tripon Eugen - [`3fc0193`](https://github.com/eea/volto-cca-policy/commit/3fc0193108808edaac934c5bbd6ec6002cd28917)]
+- Refs #260715 - display arrow icons only if show sub_folders [Tripon Eugen - [`772a8ad`](https://github.com/eea/volto-cca-policy/commit/772a8add196bdeb8d6ebe954225bd5146a6231a1)]
+- Add alias for North West Europe [Tiberiu Ichim - [`644c75b`](https://github.com/eea/volto-cca-policy/commit/644c75bf5a73f87890a6f7fb8199cea9e81634ff)]
+- Refs #260715 - remove comment [Tripon Eugen - [`33283d7`](https://github.com/eea/volto-cca-policy/commit/33283d7f6367bda2ae7d20f830e9ed842ba4a625)]
+- Refs #260715 - rast options show/hide subfolders [Tripon Eugen - [`18bff32`](https://github.com/eea/volto-cca-policy/commit/18bff32426a94a9a174509ffd67d92342e1f12e8)]
+- Refs #260715 - rename label [Tripon Eugen - [`cba2862`](https://github.com/eea/volto-cca-policy/commit/cba28622fc26bedc895511e3e6091430bbcd973d)]
+- Refs #260715 - eslint [Tripon Eugen - [`182369c`](https://github.com/eea/volto-cca-policy/commit/182369c92ecd94694bf704347675984024a9fa42)]
+- Refs #260715 - rast map skip folders by index list [Tripon Eugen - [`09b0ddd`](https://github.com/eea/volto-cca-policy/commit/09b0dddb9b5355cdf68b1f5483d9e1069eeb3615)]
+- Refs #267596 - set extraQueryParams [Tripon Eugen - [`4205b72`](https://github.com/eea/volto-cca-policy/commit/4205b728e863588ff279d03413cd02796b490a38)]
 ### [0.1.102](https://github.com/eea/volto-cca-policy/compare/0.1.101...0.1.102) - 27 March 2024
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -96,4 +96,3 @@ don-template/blob/master/LICENSE.md) for details.
 ## Funding
 
 [European Environment Agency (EU)](http://eea.europa.eu)
-

package/package.json

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

package/src/components/manage/Blocks/C3SIndicatorsGlossaryBlock/C3SIndicatorsGlossaryBlockView.jsx

@@ -1,35 +1,22 @@
 import React from 'react';
-import axios from 'axios';
 
 export default function C3SIndicatorsGlossaryBlockView(props) {
-  const [tableHTML, setTableHTML] = React.useState('');
-
-  const getIndicatorsData = () => {
-    const url =
-      '/++api++/en/knowledge/european-climate-data-explorer/@c3s_indicators_glossary_table_api';
-
-    axios
-      .get(url)
-      .then((response) => {
-        setTableHTML(response.data.c3s_indicators_glossary_table);
-      })
-      .catch((error) => {
-        // console.error(error);
-      });
-  };
-
-  React.useEffect(() => {
-    getIndicatorsData();
-  });
+  const { metadata, properties, mode = 'view' } = props;
+  const content = metadata || properties;
+  const { c3s_indicators_glossary_table } = content?.['@components'] || {};
 
   return (
     <div className="block c3sindicators-glossary-block">
-      <div
-        className="glossary-table"
-        dangerouslySetInnerHTML={{
-          __html: tableHTML,
-        }}
-      />
+      {mode === 'view' ? (
+        <div
+          className="glossary-table"
+          dangerouslySetInnerHTML={{
+            __html: c3s_indicators_glossary_table || 'No content',
+          }}
+        />
+      ) : (
+        <div>C3SIndicatorsGlossaryBlockView</div>
+      )}
     </div>
   );
 }

package/src/components/manage/Blocks/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockEdit.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 C3SIndicatorsListingBlockView from './C3SIndicatorsListingBlockView';
+import schema from './schema';
+
+export default function C3SIndicatorsOverviewBlockEdit(props) {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  return (
+    <div>
+      <C3SIndicatorsListingBlockView 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/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockView.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+
+export default function C3SIndicatorsListingBlockView(props) {
+  const { metadata, properties, mode = 'view' } = props;
+  const content = metadata || properties;
+  const { c3s_indicators_listing } = content?.['@components'] || {};
+
+  if (!c3s_indicators_listing) {
+    if (mode === 'edit') {
+      return <div>C3SIndicatorsListingBlockView</div>;
+    } else {
+      return null;
+    }
+  }
+
+  const { description, items } = c3s_indicators_listing;
+
+  return (
+    <div className="block c3sindicators-listing-block">
+      <div
+        className="description"
+        dangerouslySetInnerHTML={{
+          __html: description,
+        }}
+      />
+      <ul>
+        {items?.map((item, index) => (
+          <li key={index}>
+            <UniversalLink href={item.url}>{item.title}</UniversalLink>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+import C3SIndicatorsListingBlockEdit from './C3SIndicatorsListingBlockEdit';
+import C3SIndicatorsListingBlockView from './C3SIndicatorsListingBlockView';
+
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
+
+export default function installBlock(config) {
+  const blocksConfig = config.blocks.blocksConfig;
+
+  blocksConfig.c3SIndicatorListingBlock = {
+    id: 'c3SIndicatorListingBlock',
+    title: 'C3S Indicators Listing',
+    icon: zoomSVG,
+    group: 'site',
+    view: C3SIndicatorsListingBlockView,
+    edit: C3SIndicatorsListingBlockEdit,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
+  };
+
+  return config;
+}

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

@@ -0,0 +1,14 @@
+export default {
+  title: 'C3S Indicators Listing',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+
+  properties: {},
+  required: [],
+};

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/C3SIndicatorsOverviewBlockView.jsx

@@ -1,55 +1,26 @@
 import React from 'react';
-import axios from 'axios';
-import { UniversalLink } from '@plone/volto/components';
 
 export default function C3SIndicatorsOverviewBlockView(props) {
-  const [pageDescription, setPageDescription] = React.useState('');
-  const [indicators, setIndicators] = React.useState([]);
+  const { metadata, properties, mode = 'view' } = props;
+  const content = metadata || properties;
+  const { c3s_indicators_overview } = content?.['@components'] || {};
 
-  const category = props.data.category;
-
-  const getIndicatorsData = () => {
-    const url =
-      '/++api++/en/knowledge/european-climate-data-explorer/' +
-      category +
-      '/@c3s_indicators_overview_api';
-
-    axios
-      .get(url)
-      .then((response) => {
-        setPageDescription(response.data.c3s_indicators_overview.description);
-        setIndicators(response.data.c3s_indicators_overview.items);
-      })
-      .catch((error) => {
-        // console.error(error);
-      });
-  };
-
-  React.useEffect(() => {
-    getIndicatorsData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [category]);
+  if (!c3s_indicators_overview) {
+    if (mode === 'edit') {
+      return <div>C3SIndicatorsOverviewBlockView</div>;
+    } else {
+      return null;
+    }
+  }
 
   return (
     <div className="block c3sindicators-overview-block">
       <div
         className="description"
         dangerouslySetInnerHTML={{
-          __html: pageDescription,
+          __html: c3s_indicators_overview,
         }}
       />
-
-      {indicators ? (
-        <ul>
-          {indicators.map((item, index) => (
-            <li key={index}>
-              <UniversalLink href={item.url}>{item.title}</UniversalLink>
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>Loading...</p>
-      )}
     </div>
   );
 }

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

@@ -1,4 +1,22 @@
-const fields = ['category'];
+// const fields = ['category'];
+//
+//     category: {
+//       title: 'Category',
+//       type: 'string',
+//       factory: 'Choice',
+//       choices: [
+//         ['health', 'Health'],
+//         ['agriculture', 'Agriculture'],
+//         ['forestry', 'Forestry'],
+//         ['energy', 'Energy'],
+//         ['tourism', 'Tourism'],
+//         ['water-and-coastal', 'Water and Coastal'],
+//       ],
+//       default: 'health',
+//       description: 'Choose indicators category to be used as filter.',
+//       required: true,
+//       noValueOption: false,
+//     },
 
 export default {
   title: 'C3S Indicators Overview',
@@ -7,29 +25,11 @@ export default {
     {
       id: 'default',
       title: 'Default',
-      fields,
+      fields: [],
     },
   ],
 
-  properties: {
-    category: {
-      title: 'Category',
-      type: 'string',
-      factory: 'Choice',
-      choices: [
-        ['health', 'Health'],
-        ['agriculture', 'Agriculture'],
-        ['forestry', 'Forestry'],
-        ['energy', 'Energy'],
-        ['tourism', 'Tourism'],
-        ['water-and-coastal', 'Water and Coastal'],
-      ],
-      default: 'health',
-      description: 'Choose indicators category to be used as filter.',
-      required: true,
-      noValueOption: false,
-    },
-  },
+  properties: {},
 
   required: [],
 };

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

@@ -13,20 +13,46 @@ import './styles.less';
 const cases_url = '@@case-studies-map.arcgis.json';
 
 export default function CaseStudyExplorerView(props) {
-  const cases = useCases(addAppURL(cases_url));
+  const casesData = useCases(addAppURL(cases_url));
+  const [cases, setCases] = React.useState([]);
 
   const [activeFilters, setActiveFilters] = React.useState({
     sectors: [],
     impacts: [],
+    measures: [],
   });
 
   const [activeItems, setActiveItems] = React.useState(cases);
-  const [filters, setFilters] = React.useState([]);
+  const [filters, setFilters] = React.useState({
+    impacts: [],
+    sectors: [],
+    measures: {},
+  });
+
+  React.useEffect(() => {
+    if (casesData.hasOwnProperty('features')) {
+      const _cases = casesData.features;
+      let _filters = filters;
+      setCases(_cases);
+      _filters.measures = casesData.filters.measures;
+      setFilters(_filters);
+    }
+  }, [casesData, filters]);
 
   React.useEffect(() => {
-    const _filters = getFilters(cases);
+    const _filters_data = getFilters(cases);
+    let _filters = filters;
+    _filters.impacts = _filters_data.impacts;
+    _filters.sectors = _filters_data.sectors;
     setFilters(_filters);
-  }, [cases, activeFilters.impacts, activeFilters.sectors, activeItems.length]);
+  }, [
+    filters,
+    cases,
+    activeFilters.impacts,
+    activeFilters.sectors,
+    activeFilters.measures,
+    activeItems.length,
+  ]);
 
   React.useEffect(() => {
     const activeItems = filterCases(cases, activeFilters);
@@ -38,7 +64,7 @@ export default function CaseStudyExplorerView(props) {
   return (
     <div>
       <Grid columns="12">
-        <Grid.Column mobile={9} tablet={9} computer={10} className="col-left">
+        <Grid.Column mobile={9} tablet={9} computer={9} className="col-left">
           {cases.length ? (
             <CaseStudyMap items={cases} activeItems={activeItems} />
           ) : null}
@@ -46,7 +72,7 @@ export default function CaseStudyExplorerView(props) {
         <Grid.Column
           mobile={3}
           tablet={3}
-          computer={2}
+          computer={3}
           className="col-left"
           id="cse-filter"
         >

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

@@ -1,66 +1,145 @@
+import React, { FormEvent } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { Accordion, Icon, Checkbox } from 'semantic-ui-react';
 
 export default function CaseStudyFilters(props) {
   const { filters, activeFilters, setActiveFilters } = props;
+
+  const resetFilters = () => {
+    let clone = { ...activeFilters };
+    Object.keys(activeFilters).forEach((element) => {
+      clone[element] = [];
+    });
+    setActiveFilters(clone);
+  };
+
+  let nrActiveFilters = 0;
+  Object.values(activeFilters).forEach((element) => {
+    nrActiveFilters += element.length;
+  });
+
+  const [activeIndex, setActiveIndex] = React.useState([]);
+
+  function handleClick(e, titleProps) {
+    let index = Object.create(activeIndex);
+    if (index.includes(titleProps.index)) {
+      index = index.filter(function (item) {
+        return item !== titleProps.index;
+      });
+    } else {
+      index.push(titleProps.index);
+    }
+    setActiveIndex(index);
+  }
+
+  const checkboxChangeHandler = (_event: FormEvent<HTMLInputElement>, data) => {
+    const temp = JSON.parse(JSON.stringify(activeFilters));
+
+    if (data.checked) {
+      temp[data.name].push(data.value);
+    } else {
+      temp[data.name] = temp[data.name].filter((value) => {
+        if (value !== data.value) return value;
+        return null;
+      });
+    }
+    setActiveFilters(temp);
+  };
+
   const intl = useIntl();
   return (
     <>
-      <h4>
-        <FormattedMessage
-          id="Adaptation sectors"
-          defaultMessage="Adaptation sectors"
-        />
-      </h4>
-      {Object.entries(filters?.sectors || {}).map(([value, label], index) => (
-        <p key={index}>
-          <span>{intl.formatMessage({ id: label })}</span>
-          <input
-            value={value}
-            type="checkbox"
-            onChange={(e) => {
-              // const value =
-              const temp = JSON.parse(JSON.stringify(activeFilters));
-              if (e.target.checked) {
-                temp.sectors.push(e.target.value);
-              } else {
-                temp.sectors = temp.sectors.filter((value) => {
-                  if (value !== e.target.value) return value;
-                  return null;
-                });
-              }
-              setActiveFilters(temp);
-            }}
+      <Accordion exclusive={false} className="secondary">
+        <Accordion.Title
+          active={activeIndex.includes(0)}
+          index={0}
+          onClick={handleClick}
+        >
+          <Icon name="dropdown" />
+          <FormattedMessage
+            id="Adaptation sectors"
+            defaultMessage="Adaptation sectors"
+          />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(0)}>
+          {Object.entries(filters?.sectors || {}).map(
+            ([value, label], index) => (
+              <Checkbox
+                label={intl.formatMessage({ id: label })}
+                value={value}
+                checked={activeFilters.sectors.includes(value)}
+                name="sectors"
+                onChange={checkboxChangeHandler}
+              />
+            ),
+          )}
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex.includes(1)}
+          index={1}
+          onClick={handleClick}
+        >
+          <Icon name="dropdown" />
+          <FormattedMessage
+            id="Climate impacts"
+            defaultMessage="Climate impacts"
           />
-        </p>
-      ))}
-      <h4>
-        <FormattedMessage
-          id="Climate impacts"
-          defaultMessage="Climate impacts"
-        />
-      </h4>
-      {Object.entries(filters?.impacts || {}).map(([value, label], index) => (
-        <p key={index}>
-          <span>{intl.formatMessage({ id: label })}</span>
-          <input
-            value={value}
-            type="checkbox"
-            onChange={(e) => {
-              // const value =
-              const temp = JSON.parse(JSON.stringify(activeFilters));
-              if (e.target.checked) {
-                temp.impacts.push(e.target.value);
-              } else {
-                temp.impacts = temp.impacts.filter((value) => {
-                  if (value !== e.target.value) return value;
-                  return null;
-                });
-              }
-              setActiveFilters(temp);
-            }}
+        </Accordion.Title>
+        <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)}
+                value={value}
+                name="impacts"
+                onChange={checkboxChangeHandler}
+              />
+              // </p>
+            ),
+          )}
+        </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex.includes(2)}
+          index={2}
+          onClick={handleClick}
+        >
+          <Icon name="dropdown" />
+          <FormattedMessage
+            id="Key type measures"
+            defaultMessage="Key type measures"
           />
-        </p>
-      ))}
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(2)}>
+          {Object.entries(filters?.measures || {}).map(
+            ([key, values], index) => (
+              <div className="subcategory">
+                <p>
+                  <strong>{intl.formatMessage({ id: key })}</strong>
+                </p>
+                {Object.entries(values).map(([valKey, valData]) => (
+                  <Checkbox
+                    label={intl.formatMessage({ id: valData.value })}
+                    value={valData.key}
+                    checked={activeFilters.measures.includes(valData.key)}
+                    name="measures"
+                    onChange={checkboxChangeHandler}
+                  />
+                ))}
+              </div>
+            ),
+          )}
+        </Accordion.Content>
+      </Accordion>
+      {nrActiveFilters ? (
+        <button
+          className="ui primary button reset"
+          onClick={(_e) => resetFilters()}
+        >
+          Reset
+        </button>
+      ) : null}
     </>
   );
 }