@eeacms/volto-cca-policy 0.2.71 → 0.2.73

package/CHANGELOG.md

@@ -4,6 +4,32 @@ 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.73](https://github.com/eea/volto-cca-policy/compare/0.2.72...0.2.73) - 22 October 2024
+
+#### :rocket: New Features
+
+- feat: update RAST block navigation based on the new design - refs #278874 [kreafox - [`138ce4d`](https://github.com/eea/volto-cca-policy/commit/138ce4df9ad3a328d1b135e9df9a077c7dac8c80)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`43c9245`](https://github.com/eea/volto-cca-policy/commit/43c9245fa8c35853c761ecc47544fd098f8a2978)]
+- style: fix text color in RAST block [kreafox - [`490ab1c`](https://github.com/eea/volto-cca-policy/commit/490ab1cb665910d04c18afd4f26e07913e427706)]
+- style: Automated code fix [eea-jenkins - [`7f54efb`](https://github.com/eea/volto-cca-policy/commit/7f54efb5deafb8773c7db5bac14cf07968ed883e)]
+
+### [0.2.72](https://github.com/eea/volto-cca-policy/compare/0.2.71...0.2.72) - 14 October 2024
+
+#### :bug: Bug Fixes
+
+- fix: file formatting, cleanup [kreafox - [`bd0ca50`](https://github.com/eea/volto-cca-policy/commit/bd0ca5096912d76c1d6cc7cc55adcaccf501d88a)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`78293a1`](https://github.com/eea/volto-cca-policy/commit/78293a1562c33890e957ce3e1f5292b80beb68b8)]
+- style: fix filter & legend styling for country profiles map; cleanup CSS - refs #277718 [kreafox - [`9847b6b`](https://github.com/eea/volto-cca-policy/commit/9847b6b48e0e898c328954af80dac4e708a8987d)]
+
+#### :hammer_and_wrench: Others
+
+- update README [kreafox - [`be8bb46`](https://github.com/eea/volto-cca-policy/commit/be8bb4608560436f5ea150733fe684435d9f2f4e)]
 ### [0.2.71](https://github.com/eea/volto-cca-policy/compare/0.2.70...0.2.71) - 9 October 2024
 
 #### :hammer_and_wrench: Others
@@ -1596,13 +1622,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
@@ -1619,9 +1642,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)]
@@ -1838,7 +1858,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
 
@@ -2319,7 +2338,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/README.md

@@ -14,6 +14,8 @@
 [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-cca-policy-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-cca-policy-develop)
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-cca-policy-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-cca-policy-develop)
 
+Climate-ADAPT Frontend Policy
+
 [Volto](https://github.com/plone/volto) add-on
 
 ## Release

package/package.json

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import {
   euCountryNames,
   setTooltipVisibility,
@@ -9,14 +8,13 @@ import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 import { useMapContext } from '@eeacms/volto-openlayers-map/api';
 
 export const Interactions = ({
-  tooltipRef,
-  // onFeatureClick,
-  countries_metadata,
   baseUrl,
+  highlight,
+  tooltipRef,
   thematicMapMode,
   euCountryFeatures,
-  highlight,
   setStateHighlight,
+  countries_metadata,
 }) => {
   const map = useMapContext().map;
 
@@ -44,19 +42,18 @@ export const Interactions = ({
         feature &&
         euCountryNames.includes(feature.get('na'))
       ) {
-        // if (countries_metadata.length>0) {
         let countryName = feature.get('na');
         let noDataReportedMsg = `
-No data reported through the reporting mechanism of the Governance Regulation.
-Last information is available
-<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
+          No data reported through the reporting mechanism of the Governance Regulation.
+          Last information is available
+          <a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
 
         if (countryName === 'Türkiye') {
           countryName = 'Turkiye';
           noDataReportedMsg = `
-Data reported in 2021 through the reporting mechanism of the Governance Regulation.
-Information is available
-<a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
+            Data reported in 2021 through the reporting mechanism of the Governance Regulation.
+            Information is available
+            <a href="${baseUrl}/${countryName.toLowerCase()}">here</a>`;
         }
 
         if (!Object.hasOwn(countries_metadata[0], countryName)) {
@@ -78,29 +75,23 @@ Information is available
           tooltipContent =
             metadata[0]?.ccivportal_info ||
             '<span>No portal or platform reported</span>';
-          // tooltipContent.split('<p style="font-weight:bold;"></p>').join('');
         }
-        // overlaySource.addFeature(feature);
+
         map.getTargetElement().style.cursor = 'pointer';
         const node = tooltipRef.current;
         const flag = feature.get('flag').src;
         const cn = countryName.toLowerCase();
         let tooltipContentDiv = `
-<div class="country-tooltip">
-  <div id="country-name">
-    <a href="/en/countries-regions/countries/${cn}"><h3>${countryName}</h3></a>
-    <img class="tooltip-country-flag" src="${flag}" height="33" width="54">
-  </div>
-  <div class="tooltip-content">${tooltipContent}</div>
-</div>
-`;
+          <div class="country-tooltip">
+            <div id="country-name">
+              <a href="/en/countries-regions/countries/${cn}"><h3>${countryName}</h3></a>
+              <img class="tooltip-country-flag" src="${flag}" height="33" width="54">
+            </div>
+            <div class="tooltip-content">${tooltipContent}</div>
+          </div>`;
 
         setTooltipVisibility(node, tooltipContentDiv, domEvt, true);
       }
-
-      // if (feature) {
-      //   onFeatureClick(feature);
-      // }
     });
 
     map.on('pointermove', function (evt) {
@@ -118,6 +109,6 @@ Information is available
       setStateHighlight(highlight.current);
     });
   });
-  // }, [map, tooltipRef, onFeatureClick]);
+
   return null;
 };

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

@@ -1,25 +1,22 @@
 import React from 'react';
 import { compose } from 'redux';
-import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
-
-import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
-import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { Grid } from 'semantic-ui-react';
 import {
-  euCountryNames as euCountryNamesRaw,
-  tooltipStyle,
   getImageUrl,
+  tooltipStyle,
   adjustEuCountryNames,
+  euCountryNames as euCountryNamesRaw,
 } from '@eeacms/volto-cca-policy/helpers/country_map/countryMap';
 import { withGeoJsonData } from '@eeacms/volto-cca-policy/helpers/country_map/hocs';
-
-import withResponsiveContainer from '../withResponsiveContainer';
-import withVisibilitySensor from '../withVisibilitySensor';
+import { clientOnly } from '@eeacms/volto-cca-policy/helpers';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { Map, Layer, Layers, Controls } from '@eeacms/volto-openlayers-map/api';
 import { makeStyles } from './mapstyle';
 import { Interactions } from './Interactions';
-
-import Filter from './Filter';
-import { Grid } from 'semantic-ui-react';
 import { useCountriesMetadata } from './hooks';
+import Filter from './Filter';
+import withResponsiveContainer from '../withResponsiveContainer';
+import withVisibilitySensor from '../withVisibilitySensor';
 import { addAppURL } from '@plone/volto/helpers';
 
 import './styles.less';

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

@@ -1,4 +1,5 @@
 @height: 600px;
+@fpHeight: 450px;
 
 .countryMapProfile {
   height: @height;
@@ -55,10 +56,6 @@
     stroke-width: 0.6;
   }
 
-  .country-outline path {
-    fill: #e9e9e9;
-  }
-
   .country-outline path {
     fill: #f5f5f5;
     stroke: #d1d1d1;
@@ -69,24 +66,28 @@
     fill: #0170b7;
   }
 
+  label {
+    margin-bottom: 0.5em;
+  }
+
   .legend {
-    .legend-text {
-      width: 16em;
-    }
+    margin-top: 1em;
 
     .legend-el {
       display: flex;
       flex-direction: row;
-      padding: 0.8em 0;
+      padding: 0.6em 0;
     }
 
     .legend-box {
-      width: 40px;
-      height: 19px;
-      margin-top: 3px;
+      position: relative;
+      top: 4px;
+      height: 17px;
+      flex: 0 0 17px;
       margin-right: 0.5em;
     }
 
+    // Legend color mapping
     .content-available {
       background-color: #0170b7;
     }
@@ -103,12 +104,9 @@
       background-color: #78d9fc;
     }
 
-    .country-none {
-      border: 1px solid #ddd;
-      background-color: #fbfae6;
-    }
-
+    .country-none,
     .country-outside {
+      border: 1px solid #ddd;
       background-color: #fbfae6;
     }
   }
@@ -154,10 +152,7 @@
       background-color: #fff3ac;
     }
 
-    .country-none {
-      background-color: #f5f5f5;
-    }
-
+    .country-none,
     .country-outside {
       border: 1px solid #ddd;
       background-color: #fbfae6;
@@ -168,63 +163,55 @@
     }
   }
 
-  .country-blue path {
+  // Country color mapping and cursor style
+  .country-blue path,
+  .country-notreported path,
+  .country-noportal path,
+  .country-nasnapsap path,
+  .country-nassap path,
+  .country-napsap path,
+  .country-nasnap path,
+  .country-nas path,
+  .country-nap path,
+  .country-none path,
+  .country-nodata path {
     cursor: pointer;
-    // fill: @secondary-blue;
   }
 
   .country-notreported path {
-    cursor: pointer;
     fill: #fed7da;
   }
 
-  .country-noportal path {
-    cursor: pointer;
+  .country-noportal path,
+  .country-none path {
     fill: #e0e0e0;
   }
 
   .country-nasnapsap path {
-    cursor: pointer;
     fill: url(#nasnapsap);
   }
 
   .country-nassap path {
-    cursor: pointer;
     fill: url(#nassap);
   }
 
   .country-napsap path {
-    cursor: pointer;
     fill: url(#napsap);
   }
 
-  .country-nasnapsap path {
-    cursor: pointer;
-    fill: url(#nasnapsap);
-  }
-
   .country-nasnap path {
-    cursor: pointer;
     fill: #007db6;
   }
 
   .country-nas path {
-    cursor: pointer;
     fill: #78d9fc;
   }
 
   .country-nap path {
-    cursor: pointer;
     fill: #11cbff;
   }
 
-  .country-none path {
-    cursor: pointer;
-    fill: #e0e0e0;
-  }
-
   .country-nodata path {
-    cursor: pointer;
     fill: #f5f5f5;
   }
 
@@ -232,7 +219,9 @@
     fill: #8a9c3a;
   }
 
-  #map-tooltip {
+  // Tooltip for countries
+  #map-tooltip,
+  .country-tooltip {
     position: absolute;
     width: 400px;
     padding: 1em;
@@ -241,12 +230,6 @@
   }
 
   .country-tooltip {
-    position: absolute;
-    width: 400px;
-    padding: 1em;
-    border: 1px solid #c7c7c7;
-    background-color: #f7f7f7;
-
     span,
     li {
       color: #3a3a3a;
@@ -294,3 +277,37 @@
     }
   }
 }
+
+.cca-main-homepage .tabs-block {
+  .countryMapProfile {
+    min-height: @fpHeight;
+
+    .ol-map-wrapper,
+    .ol-map {
+      height: @fpHeight;
+    }
+
+    #country-map-filter {
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    .legend-box {
+      top: 2px;
+    }
+
+    label,
+    .legend .legend-text {
+      font-size: 14px !important;
+      line-height: 17px;
+    }
+
+    .legend {
+      margin-top: 0.2em;
+
+      .legend-el {
+        padding: 1em 0 0 0;
+      }
+    }
+  }
+}

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

@@ -1,59 +1,76 @@
 import React from 'react';
 import { Accordion } from 'semantic-ui-react';
-import RASTAccordionContent from './RASTAccordionContent';
 import { useHistory } from 'react-router-dom';
+import { Icon } from '@plone/volto/components';
+
+import RASTAccordionContent from './RASTAccordionContent';
 
-const RASTAccordion = (props) => {
+import step1 from './icons/icon_01.svg';
+import step2 from './icons/icon_02.svg';
+import step3 from './icons/icon_03.svg';
+import step4 from './icons/icon_04.svg';
+import step5 from './icons/icon_05.svg';
+import step6 from './icons/icon_06.svg';
+
+const icons = [step1, step2, step3, step4, step5, step6];
+
+const RASTAccordion = ({
+  items = [],
+  activeMenu,
+  show_subfolders,
+  curent_location,
+}) => {
   const history = useHistory();
-  const { items = {}, curent_location, activeMenu, show_subfolders } = props;
 
-  const handleClick = (e, item) => {
-    let itemUrl = '/' + item['@id'].split('/').slice(3).join('/');
-    history.push(itemUrl);
+  const handleNavigation = (url) => {
+    history.push(url);
   };
 
-  return (
-    <>
-      {items.map((item, index) => {
-        const { id } = item;
-        const active = activeMenu === index;
-
-        return (
-          <Accordion id={id} key={index} className="secondary">
-            <Accordion.Title
-              role="button"
-              tabIndex={0}
-              active={active}
-              aria-expanded={active}
-              index={index}
-              onClick={(e) => handleClick(e, item)}
-              onKeyDown={(e) => {
-                if (e.keyCode === 13 || e.keyCode === 32) {
-                  e.preventDefault();
-                  handleClick(e, item);
-                }
+  const handleKeyDown = (e, url) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleNavigation(url);
+    }
+  };
+
+  const renderAccordionItem = (item, index) => {
+    const active = activeMenu === index;
+    // Icons start from the second item
+    const icon = icons[index - 1] || null;
+
+    return (
+      <Accordion key={item.id} className={`step-${index}`}>
+        <Accordion.Title
+          role="button"
+          tabIndex={0}
+          index={index}
+          active={active}
+          aria-expanded={active}
+          onClick={() => handleNavigation(item.url)}
+          onKeyDown={(e) => handleKeyDown(e, item.url)}
+        >
+          {icon && <Icon name={icon} size="70px" />}
+          <span className="item-title">{item.title}</span>
+        </Accordion.Title>
+
+        {show_subfolders && (
+          <Accordion.Content active={active}>
+            <RASTAccordionContent
+              curent_location={curent_location}
+              key={index}
+              main={{
+                title: item.title,
+                href: item['@id'],
+                url: item.url,
               }}
-            >
-              <span className="item-title">{item.title}</span>
-            </Accordion.Title>
-            {show_subfolders ? (
-              <Accordion.Content active={active}>
-                <RASTAccordionContent
-                  curent_location={curent_location}
-                  key={index}
-                  main={{
-                    title: item.title,
-                    href: item['@id'],
-                    url: item.url,
-                  }}
-                />
-              </Accordion.Content>
-            ) : null}
-          </Accordion>
-        );
-      })}
-    </>
-  );
+            />
+          </Accordion.Content>
+        )}
+      </Accordion>
+    );
+  };
+
+  return <>{items.map(renderAccordionItem)}</>;
 };
 
 export default RASTAccordion;

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

@@ -24,28 +24,26 @@ const RASTAccordionContent = (props) => {
   );
 
   return (
-    <div className="dataset-content">
-      <div>
-        {items.length
-          ? items
-              .filter((item) => item['@type'] === 'Folder')
-              .map((item) => {
-                const active = item['@id'].endsWith(curent_location.pathname);
-                return (
-                  <List.Item
-                    key={item.id}
-                    className={cx('substep', {
-                      active: active,
-                    })}
-                  >
-                    <Link to={flattenToAppURL(getBaseUrl(item['@id']))}>
-                      {item.title}
-                    </Link>
-                  </List.Item>
-                );
-              })
-          : null}
-      </div>
+    <div>
+      {items.length
+        ? items
+            .filter((item) => item['@type'] === 'Folder')
+            .map((item) => {
+              const active = item['@id'].endsWith(curent_location.pathname);
+              return (
+                <List.Item
+                  key={item.id}
+                  className={cx('substep', {
+                    active: active,
+                  })}
+                >
+                  <Link to={flattenToAppURL(getBaseUrl(item['@id']))}>
+                    {item.title}
+                  </Link>
+                </List.Item>
+              );
+            })
+        : null}
     </div>
   );
 };

package/src/components/manage/Blocks/RASTBlock/icons/icon_01.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_2">
+      <g id="g1975">
+        <g id="g1981">
+          <path id="path1983" class="cls-1" d="M136.2,87.4h-59.7l-4.8-9.9c-.6-1.2-1.7-1.9-2.9-1.9h-26.2c-1.8,0-3.3,1.6-3.3,3.6v64.7c0,2.6,2,4.7,4.4,4.7h92.5c2.4,0,4.4-2.1,4.4-4.7v-51.8c0-2.6-2-4.7-4.4-4.7Z"/>
+        </g>
+        <g id="g1985">
+          <path id="path1987" class="cls-1" d="M103.6,141.6h-27.2v-1.9c0-8.1,6.1-14.6,13.6-14.6s13.6,6.6,13.6,14.6c0,0,0,1.9,0,1.9Z"/>
+        </g>
+        <g id="g1989">
+          <path id="path1991" class="cls-1" d="M100.4,113.9c0,6.2-4.7,11.2-10.4,11.2s-10.4-5-10.4-11.2,4.7-11.2,10.4-11.2,10.4,5,10.4,11.2Z"/>
+        </g>
+        <g id="g1993">
+          <path id="path1995" class="cls-1" d="M115.9,141.6h-51.7c-2.1,0-3.7-1.8-3.7-4v-38.5c0-2.2,1.7-4,3.7-4h51.7c2.1,0,3.7,1.8,3.7,4v38.5c0,2.2-1.7,4-3.7,4Z"/>
+        </g>
+        <g id="g1997">
+          <path id="path1999" class="cls-1" d="M72.9,50.7h17.8"/>
+        </g>
+        <g id="g2001">
+          <path id="path2003" class="cls-1" d="M72.9,61.4h8.9"/>
+        </g>
+        <g id="g2005">
+          <path id="path2007" class="cls-1" d="M72.9,70.2h8.9"/>
+        </g>
+        <g id="g2009">
+          <path id="path2011" class="cls-1" d="M119,61.4h-28.3"/>
+        </g>
+        <g id="g2013">
+          <path id="path2015" class="cls-1" d="M119,70.2h-28.3"/>
+        </g>
+        <g id="g2017">
+          <path id="path2019" class="cls-1" d="M72.9,78.9h8.9"/>
+        </g>
+        <g id="g2021">
+          <path id="path2023" class="cls-1" d="M119,78.9h-28.3"/>
+        </g>
+        <g id="g2025">
+          <path id="path2027" class="cls-1" d="M136.2,87.4h-59.7l-4.8-9.9c-.6-1.2-1.7-1.9-2.9-1.9h-26.2c-1.8,0-3.3,1.6-3.3,3.6v64.7c0,2.6,2,4.7,4.4,4.7h92.5c2.4,0,4.4-2.1,4.4-4.7v-51.8c0-2.6-2-4.7-4.4-4.7Z"/>
+        </g>
+        <g id="g2029">
+          <path id="path2031" class="cls-1" d="M68.9,75.7c1.2,0,2.4.7,2.9,1.9l4.8,9.9h50.4v-42c0-2.6-2-4.7-4.4-4.7h-53.3c-2.4,0-4.4,2.1-4.4,4.7v30.2h4Z"/>
+        </g>
+        <g id="g2033">
+          <path id="path2035" class="cls-1" d="M64.9,75.7v-30.2c0-2.6,2-4.7,4.4-4.7h45.8v-4.7c0-2.6-2-4.7-4.4-4.7h-53.3c-2.4,0-4.4,2.1-4.4,4.7v39.7h11.9Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/RASTBlock/icons/icon_02.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_2">
+      <g id="g2731">
+        <g id="g2745">
+          <path id="path2747" class="cls-1" d="M40.8,119.3l41.7-67.8c3.4-5.6,11.6-5.6,15,0l41.7,67.8c3.6,5.9-.6,13.4-7.5,13.4H48.3c-6.9,0-11.1-7.6-7.5-13.4Z"/>
+        </g>
+        <g id="g2749">
+          <path id="path2751" class="cls-1" d="M94.1,115c0,2.3-1.9,4.1-4.1,4.1s-4.1-1.9-4.1-4.1,1.8-4.1,4.1-4.1,4.1,1.9,4.1,4.1"/>
+        </g>
+        <g id="g2753">
+          <path id="path2755" class="cls-1" d="M90.1,98.4v-26.7"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/RASTBlock/icons/icon_03.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_2">
+      <g>
+        <g>
+          <path class="cls-1" d="M55.7,114.7h.5c9,0,16.2,7.3,16.2,16.2v3.4h-33v-3.4c0-9,7.3-16.2,16.2-16.2h0Z"/>
+          <circle class="cls-1" cx="56" cy="105" r="9.7"/>
+        </g>
+        <g>
+          <path class="cls-1" d="M88.7,114.7h.5c9,0,16.2,7.3,16.2,16.2v3.4h-33v-3.4c0-9,7.3-16.2,16.2-16.2h.1Z"/>
+          <circle class="cls-1" cx="88.9" cy="105" r="9.7"/>
+        </g>
+        <g>
+          <path class="cls-1" d="M121.7,114.7h.5c9,0,16.2,7.3,16.2,16.2v3.4h-33v-3.4c0-9,7.3-16.2,16.2-16.2h.1Z"/>
+          <circle class="cls-1" cx="121.9" cy="105" r="9.7"/>
+        </g>
+      </g>
+      <g>
+        <polygon class="cls-1" points="138.4 35.4 138.4 76.5 99 76.5 89 89.1 88.9 89.2 88.9 89.1 78.9 76.5 39.5 76.5 39.5 35.4 138.4 35.4"/>
+        <rect class="cls-1" x="51.8" y="48.7" width="14.6" height="14.6"/>
+        <polygon class="cls-1" points="99.3 64.1 78.6 64.1 88.9 47.8 88.9 47.7 89 47.8 99.3 64.1"/>
+        <path class="cls-1" d="M118,64.2h-.3c-4.5,0-8.1-3.6-8.1-8.1v-.3c0-4.5,3.6-8.1,8.1-8.1h.3c4.5,0,8.1,3.6,8.1,8.1v.3c0,4.5-3.6,8.1-8.1,8.1Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/RASTBlock/icons/icon_04.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_2">
+      <g id="g2116">
+        <g id="g2122">
+          <path id="path2124" class="cls-1" d="M107.8,99.6l8.7,8.7,27.5,27.5-9.3,9.3-27.5-27.5-8.7-8.7"/>
+        </g>
+        <g id="g2126">
+          <path id="path2128" class="cls-1" d="M62.5,83.3c0-3.6-2.9-6.6-6.6-6.6s-6.6,2.9-6.6,6.6,2.9,6.6,6.6,6.6,6.6-2.9,6.6-6.6Z"/>
+        </g>
+        <g id="g2130">
+          <path id="path2132" class="cls-1" d="M82.2,63.6c0-3.6-2.9-6.6-6.6-6.6s-6.6,2.9-6.6,6.6,2.9,6.6,6.6,6.6,6.6-2.9,6.6-6.6Z"/>
+        </g>
+        <g id="g2134">
+          <path id="path2136" class="cls-1" d="M102,83.3c0-3.6-2.9-6.6-6.6-6.6s-3.5.7-4.7,1.9c-1.2,1.2-1.9,2.8-1.9,4.7,0,3.6,2.9,6.6,6.6,6.6s6.6-2.9,6.6-6.6Z"/>
+        </g>
+        <g id="g2138">
+          <path id="path2140" class="cls-1" d="M60.6,78.7l10.4-10.4"/>
+        </g>
+        <g id="g2142">
+          <path id="path2144" class="cls-1" d="M80.3,68.2l10.4,10.4"/>
+        </g>
+        <g id="g2146">
+          <path id="path2148" class="cls-1" d="M100,78.7l13.4-13.4,10.2-10.2"/>
+        </g>
+        <g id="g2150">
+          <path id="path2152" class="cls-1" d="M134.8,50.4c0,3.6-2.9,6.6-6.6,6.6s-6.6-2.9-6.6-6.6,2.9-6.6,6.6-6.6,6.6,2.9,6.6,6.6Z"/>
+        </g>
+        <g id="g2154">
+          <path id="path2156" class="cls-1" d="M107.2,117.6l9.3-9.3"/>
+        </g>
+        <g id="g2158">
+          <path id="path2160" class="cls-1" d="M77.7,37.1c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2,1-2.2,2.2-2.2,2.2,1,2.2,2.2"/>
+        </g>
+        <g id="g2162">
+          <path id="path2164" class="cls-1" d="M85.3,38.4c13.4,3.4,24.1,13.7,28.1,26.9,1.1,3.6,1.7,7.5,1.7,11.5,0,8.5-2.7,16.4-7.3,22.9-2.6,3.6-5.7,6.7-9.3,9.3-6.5,4.6-14.3,7.3-22.9,7.3-21.8,0-39.6-17.7-39.6-39.5s12.6-33.9,29.7-38.3"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/RASTBlock/icons/icon_05.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_2">
+      <g id="g3617">
+        <g id="g3623">
+          <path id="path3625" class="cls-1" d="M73.8,141.4h57.6c5.5,0,10-4.5,10-10"/>
+        </g>
+        <g id="g3627">
+          <path id="path3629" class="cls-1" d="M38.6,131.4c0,5.5,4.5,10,10,10h18"/>
+        </g>
+        <g id="g3631">
+          <path id="path3633" class="cls-1" d="M90,64.8c-2.9,0-5.2-2.3-5.2-5.2s2.3-5.2,5.2-5.2,5.2,2.3,5.2,5.2-2.3,5.2-5.2,5.2ZM111,61.4v-3.8c0-1-.7-1.8-1.7-1.9l-3.1-.5c-.7,0-1.3-.6-1.5-1.2,0-.3-.2-.6-.4-.9-.3-.6-.2-1.4.2-1.9l1.8-2.5c.6-.8.5-1.9-.2-2.5l-2.7-2.7c-.7-.7-1.8-.8-2.5-.2l-2.5,1.8c-.6.4-1.3.5-1.9.2-.3,0-.6-.3-.9-.4-.7-.2-1.1-.8-1.2-1.5l-.5-3.1c0-1-1-1.7-1.9-1.7h-3.8c-1,0-1.8.7-1.9,1.7l-.5,3.1c0,.7-.6,1.3-1.2,1.5-.3,0-.6.2-.9.4-.6.3-1.4.2-1.9-.2l-2.5-1.8c-.8-.6-1.9-.5-2.5.2l-2.7,2.7c-.7.7-.8,1.8-.2,2.5l1.8,2.5c.4.6.5,1.3.2,1.9,0,.3-.3.6-.4.9-.2.7-.8,1.1-1.5,1.2l-3.1.5c-1,0-1.7,1-1.7,1.9v3.8c0,1,.7,1.8,1.7,1.9l3.1.5c.7,0,1.3.6,1.5,1.2,0,.3.2.6.4.9.3.6.2,1.4-.2,1.9l-1.8,2.5c-.6.8-.5,1.9.2,2.5l2.7,2.7c.7.7,1.8.8,2.5.2l2.5-1.8c.6-.4,1.3-.5,1.9-.2.3,0,.6.3.9.4.7.2,1.1.8,1.2,1.5l.5,3.1c0,1,1,1.7,1.9,1.7h3.8c1,0,1.8-.7,1.9-1.7l.5-3.1c0-.7.6-1.3,1.2-1.5.3,0,.6-.2.9-.4.6-.3,1.4-.2,1.9.2l2.5,1.8c.8.6,1.9.5,2.5-.2l2.7-2.7c.7-.7.8-1.8.2-2.5l-1.8-2.5c-.4-.6-.5-1.3-.2-1.9,0-.3.3-.6.4-.9.2-.7.8-1.1,1.5-1.2l3.1-.5c1,0,1.7-1,1.7-1.9h0Z"/>
+        </g>
+        <g id="g3635">
+          <path id="path3637" class="cls-1" d="M38.6,77.3v54.1c0-5.5,4.5-10,10-10s2.9.3,4.2.9c1.4.6,2.9-.4,2.9-1.9v-63.9c0-1.5-.8-2.9-2.1-3.6-1.5-.8-3.1-1.3-5-1.4-5.6,0-10.1,4.6-10.1,10.2v8.3"/>
+        </g>
+        <g id="g3639">
+          <path id="path3641" class="cls-1" d="M124.3,92.1v28.2c0,1.5,1.6,2.5,2.9,1.9,1.3-.6,2.7-.9,4.2-.9,5.5,0,10,4.5,10,10V61.7c0-5.6-4.6-10.3-10.1-10.2-1.8,0-3.5.5-5,1.4-1.3.7-2.1,2.1-2.1,3.6v28.4"/>
+        </g>
+        <g id="g3643">
+          <path id="path3645" class="cls-1" d="M90,97.2v6.3h18.8v6.3"/>
+        </g>
+        <g id="g3647">
+          <path id="path3649" class="cls-1" d="M97.6,97.2h-15.3c-.9,0-1.6-.7-1.6-1.6v-6.9c0-.9.7-1.6,1.6-1.6h15.3c.9,0,1.6.7,1.6,1.6v6.9c0,.9-.7,1.6-1.6,1.6Z"/>
+        </g>
+        <g id="g3651">
+          <path id="path3653" class="cls-1" d="M116.5,119.8h-15.3c-.9,0-1.6-.7-1.6-1.6v-6.9c0-.9.7-1.6,1.6-1.6h15.3c.9,0,1.6.7,1.6,1.6v6.9c0,.9-.7,1.6-1.6,1.6Z"/>
+        </g>
+        <g id="g3655">
+          <path id="path3657" class="cls-1" d="M90,103.5h-18.8v6.3"/>
+        </g>
+        <g id="g3659">
+          <path id="path3661" class="cls-1" d="M63.5,119.8h15.3c.9,0,1.6-.7,1.6-1.6v-6.9c0-.9-.7-1.6-1.6-1.6h-15.3c-.9,0-1.6.7-1.6,1.6v6.9c0,.9.7,1.6,1.6,1.6Z"/>
+        </g>
+        <g id="g3663">
+          <path id="path3665" class="cls-1" d="M90,80.5v6.7"/>
+        </g>
+        <g id="g3667">
+          <path id="path3669" class="cls-1" d="M62,128.5h56"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/RASTBlock/icons/icon_06.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000;
+        stroke-dasharray: 0 0 0 0 63 5.9;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
+  <g>
+    <g id="Layer_2">
+      <g id="g19">
+        <g id="g25">
+          <path id="path27" class="cls-1" d="M90,72.6c9.6,0,17.4,7.8,17.4,17.4s-7.8,17.4-17.4,17.4-17.4-7.8-17.4-17.4,7.8-17.4,17.4-17.4Z"/>
+        </g>
+        <g id="g29">
+          <path id="path31" class="cls-1" d="M90,83.9c3.4,0,6.1,2.7,6.1,6.1s-2.7,6.1-6.1,6.1-6.1-2.7-6.1-6.1,2.7-6.1,6.1-6.1Z"/>
+        </g>
+        <g id="g33">
+          <path id="path35" class="cls-1" d="M55.7,90h0c.5.9,10.6,17.4,34.6,17.4s33.2-16.1,33.9-17.4c-.5-.9-10.6-17.4-34.6-17.4s-33.2,16.1-33.9,17.4Z"/>
+        </g>
+        <g id="g37">
+          <path id="path39" class="cls-1" d="M136.9,90c0,25.9-21,46.9-46.9,46.9s-46.9-21-46.9-46.9,21-46.9,46.9-46.9,46.9,21,46.9,46.9Z"/>
+        </g>
+        <g id="g41">
+          <path id="path43" class="cls-1" d="M90,35.5v16.6"/>
+        </g>
+        <g id="g45">
+          <path id="path47" class="cls-1" d="M90,129.2v15.3"/>
+        </g>
+        <g id="g49">
+          <path id="path51" class="cls-1" d="M144.5,90h-7.6"/>
+        </g>
+        <g id="g53">
+          <path id="path55" class="cls-1" d="M43.1,90h-7.6"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -3,6 +3,17 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
+@grey-light: #f1f0f5;
+@grey-dark: #e1e1e1;
+@blue: #004b80;
+@teal: #007b6a;
+@sand: #b78b02;
+@light-blue: #50afa3;
+@purple: #9e85b6;
+@blue-grey: #6889a6;
+@border-color: #3d5265;
+@text-color: #212d39;
+
 .rast-map-block {
   display: flex;
   align-items: center;
@@ -104,3 +115,154 @@
     }
   }
 }
+
+.rast-block {
+  .ui.accordion {
+    margin-bottom: 0.7em;
+    color: @text-color;
+
+    &:has(svg) {
+      .title:not(.ui) {
+        padding: 0.3rem 0.5rem 0.3rem 0;
+      }
+    }
+
+    .title {
+      justify-content: flex-start;
+      border: none;
+      background-color: @grey-light;
+
+      &.active {
+        background-color: @grey-dark;
+      }
+
+      .item-title {
+        color: @text-color;
+        font-size: 15px;
+      }
+
+      > .icon {
+        order: unset;
+      }
+    }
+
+    .content {
+      padding: 1rem;
+      background-color: @grey-light;
+
+      &.active {
+        border: 2px solid @grey-dark;
+      }
+
+      .item {
+        a {
+          color: @text-color;
+          font-size: 14px;
+        }
+
+        &:not(:last-child) {
+          padding-bottom: 0.8em;
+          border-bottom: 1px solid @border-color;
+        }
+
+        &:not(:first-child) {
+          padding-top: 0.8em;
+        }
+      }
+
+      .substep.active {
+        a {
+          color: @text-color;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .cls-1 {
+      stroke: @text-color;
+      stroke-width: 3;
+    }
+
+    &.step-1,
+    &.step-2,
+    &.step-3,
+    &.step-4,
+    &.step-5,
+    &.step-6 {
+      .title.active {
+        .item-title {
+          color: @white;
+        }
+
+        .icon {
+          fill: @white !important;
+        }
+
+        .cls-1 {
+          stroke: @white;
+          stroke-width: 3;
+        }
+      }
+    }
+
+    &.step-1 {
+      .title.active {
+        background-color: @teal;
+      }
+
+      .content {
+        border: 2px solid @teal;
+      }
+    }
+
+    &.step-2 {
+      .title.active {
+        background-color: @blue;
+      }
+
+      .content {
+        border: 2px solid @blue;
+      }
+    }
+
+    &.step-3 {
+      .title.active {
+        background-color: @blue-grey;
+      }
+
+      .content {
+        border: 2px solid @blue-grey;
+      }
+    }
+
+    &.step-4 {
+      .title.active {
+        background-color: @purple;
+      }
+
+      .content {
+        border: 2px solid @purple;
+      }
+    }
+
+    &.step-5 {
+      .title.active {
+        background-color: @sand;
+      }
+
+      .content {
+        border: 2px solid @sand;
+      }
+    }
+
+    &.step-6 {
+      .title.active {
+        background-color: @light-blue;
+      }
+
+      .content {
+        border: 2px solid @light-blue;
+      }
+    }
+  }
+}