@eeacms/volto-cca-policy 0.3.39 → 0.3.41

package/CHANGELOG.md

@@ -4,6 +4,47 @@ 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.3.41](https://github.com/eea/volto-cca-policy/compare/0.3.40...0.3.41) - 14 May 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-globalsearch@2.1.1 [EEA Jenkins - [`95087df`](https://github.com/eea/volto-cca-policy/commit/95087dfc874dfac0186dbaad184666ab9b8649df)]
+
+#### :bug: Bug Fixes
+
+- fix(mission): fix signatory profile actions order - refs #286863 [kreafox - [`48de556`](https://github.com/eea/volto-cca-policy/commit/48de556432efa9c88676f6b938e451d18cce9582)]
+- fix: update test [kreafox - [`951460d`](https://github.com/eea/volto-cca-policy/commit/951460d723278de41e9749e432aff1891497d4fa)]
+- fix: update test [kreafox - [`4608fc9`](https://github.com/eea/volto-cca-policy/commit/4608fc90c2f68c8625a4ad00d8dca5c79c78551c)]
+
+#### :nail_care: Enhancements
+
+- change(mission): move signatory profile CSS to theme folder [kreafox - [`be3744f`](https://github.com/eea/volto-cca-policy/commit/be3744ff175412dbca210a25ac6d1ac686ff4d83)]
+- change(mission): add statitic for Governance section - refs #285296 [kreafox - [`67774d2`](https://github.com/eea/volto-cca-policy/commit/67774d24334b213dc9e870403df9cd15d005219d)]
+- change: adjust tab labels order from backend response - refs #287273 [kreafox - [`6fc277d`](https://github.com/eea/volto-cca-policy/commit/6fc277d8479198d2307de9c092d460a6676a8a51)]
+
+### [0.3.40](https://github.com/eea/volto-cca-policy/compare/0.3.39...0.3.40) - 13 May 2025
+
+#### :bug: Bug Fixes
+
+- fix: tests [kreafox - [`1852df4`](https://github.com/eea/volto-cca-policy/commit/1852df43cde6f0f173fcd28d79a0576407d9b313)]
+- fix: class -> className [kreafox - [`56124bc`](https://github.com/eea/volto-cca-policy/commit/56124bc768fafcd59fc280d5ed9f8a6840969691)]
+- fix: tests [kreafox - [`4f95457`](https://github.com/eea/volto-cca-policy/commit/4f954579aed4ed94e796be0de712ab1fc025d96a)]
+
+#### :nail_care: Enhancements
+
+- change: update Assessment section to render html tags [kreafox - [`011d752`](https://github.com/eea/volto-cca-policy/commit/011d752a949ca08ece75bed5aed46103216875ba)]
+- change: update mission signatory profile templates - refs #286863, #286151 [kreafox - [`fde31e1`](https://github.com/eea/volto-cca-policy/commit/fde31e1ccb694a6109a49155010edf3fba34e512)]
+- change(view): add footer text - refs #287671 [kreafox - [`864a247`](https://github.com/eea/volto-cca-policy/commit/864a247e754117b56a42608779ea60b0da8b71e2)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`b301fff`](https://github.com/eea/volto-cca-policy/commit/b301fff27818a9317be2b6c4a992ddd9d1672663)]
+- style: Automated code fix [eea-jenkins - [`3aa5289`](https://github.com/eea/volto-cca-policy/commit/3aa52897989a36dae14a0f0c00f4addd233eef18)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #287520 - eslint [Tripon Eugen - [`fe3883e`](https://github.com/eea/volto-cca-policy/commit/fe3883ede70439de7f42cc817f9471996ad98696)]
+- Refs #287520 - test resposition [Tripon Eugen - [`3114d1b`](https://github.com/eea/volto-cca-policy/commit/3114d1b8bb2d1017c590b1405f83cddeda5f5d35)]
 ### [0.3.39](https://github.com/eea/volto-cca-policy/compare/0.3.38...0.3.39) - 9 May 2025
 
 #### :nail_care: Enhancements
@@ -2301,13 +2342,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
@@ -2324,9 +2362,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)]
@@ -2543,7 +2578,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
 
@@ -3024,7 +3058,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.39",
+  "version": "0.3.41",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -32,7 +32,7 @@
     "@eeacms/volto-eea-design-system": "<=1.36.3",
     "@eeacms/volto-eea-website-theme": "^1.35.0",
     "@eeacms/volto-embed": "^9.1.1",
-    "@eeacms/volto-globalsearch": "2.1.0",
+    "@eeacms/volto-globalsearch": "2.1.1",
     "@eeacms/volto-hero-block": "^7.1.0",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-searchlib": "2.0.16",

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

@@ -47,25 +47,38 @@ export function filterCases(cases, activeFilters) {
       impacts: false,
     };
 
-    activeFilters.sectors.forEach((filter) => {
-      if (_case.properties.sectors.includes(',' + filter + ','))
-        flag.sectors = true;
-    });
-
-    activeFilters.elements.forEach((filter) => {
-      if (_case.properties.elements.includes(',' + filter + ','))
-        flag.elements = true;
-    });
-
-    activeFilters.impacts.forEach((filter) => {
-      if (_case.properties.impacts.includes(',' + filter + ','))
-        flag.impacts = true;
-    });
-
-    activeFilters.measures.forEach((filter) => {
-      if (_case.properties.ktms.includes(',' + filter + ','))
-        flag.measures = true;
-    });
+    // activeFilters.sectors.forEach((filter) => {
+    //   if (_case.properties.sectors.includes(',' + filter + ','))
+    //     flag.sectors = true;
+    // });
+    flag.sectors = activeFilters.sectors.every((sub) =>
+      _case.properties.sectors.includes(sub),
+    );
+
+    // ADAPTATION APPROACHES
+    // activeFilters.elements.forEach((filter) => {
+    //   if (_case.properties.elements.includes(',' + filter + ','))
+    //     flag.elements = true;
+    // });
+    flag.elements = activeFilters.elements.every((sub) =>
+      _case.properties.elements.includes(sub),
+    );
+
+    // activeFilters.impacts.forEach((filter) => {
+    //   if (_case.properties.impacts.includes(',' + filter + ','))
+    //     flag.impacts = true;
+    // });
+    flag.impacts = activeFilters.impacts.every((sub) =>
+      _case.properties.impacts.includes(sub),
+    );
+
+    // activeFilters.measures.forEach((filter) => {
+    //   if (_case.properties.ktms.includes(',' + filter + ','))
+    //     flag.measures = true;
+    // });
+    flag.measures = activeFilters.measures.every((sub) =>
+      _case.properties.ktms.includes(sub),
+    );
 
     return (activeFilters.sectors.length ? flag.sectors : true) &&
       (activeFilters.elements.length ? flag.elements : true) &&

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

@@ -35,7 +35,7 @@ export default function View(props) {
   return (
     <>
       {isNonEN && (
-        <Message class="eea callout">
+        <Message className="eea callout">
           <FormattedMessage
             id="officiallyInEnglish"
             defaultMessage="Officially reported governmental information is only available in English"
@@ -43,7 +43,7 @@ export default function View(props) {
         </Message>
       )}
       {dataJson.message_top ? (
-        <div class="eea callout">{dataJson.message_top}</div>
+        <div className="eea callout">{dataJson.message_top}</div>
       ) : null}
       {dataJson.top_accordeon ? (
         <div className="top-accordion">

package/src/components/theme/MissionSignatoryProfile/MissionSignatoryProfileView.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
-import { Tab, Container } from 'semantic-ui-react';
+import { Tab, Container, Divider } from 'semantic-ui-react';
 import { BannerTitle } from '@eeacms/volto-cca-policy/helpers';
 import GovernanceTab from './TabSections/GovernanceTab';
 import AssessmentTab from './TabSections/AssessmentTab';
 import PlanningTab from './TabSections/PlanningTab';
 import ActionPagesTab from './TabSections/ActionPagesTab';
 
-import './style.less';
+const tabRenderers = {
+  Governance_Label: (data) => <GovernanceTab result={data} />,
+  Assessment_Label: (data) => <AssessmentTab result={data} />,
+  Planning_Label: (data) => <PlanningTab result={data} />,
+  Action_Label: (data) => <ActionPagesTab result={data} />,
+};
 
 const MissionSignatoryProfileView = (props) => {
   const { content } = props || {};
@@ -14,16 +19,32 @@ const MissionSignatoryProfileView = (props) => {
     props?.content?.['@components']?.missionsignatoryprofile || {};
 
   const result = dataJson?.result || {};
-  const governance = result?.governance?.[0] || [];
+  const governance = result?.governance?.[0] || {};
   const planning = result?.planning || {};
   const assessment = result?.assessment || {};
   const action = result?.action || {};
-  const tab_labels = result?.tab_labels || {};
-  const { Governance_Label, Assessment_Label, Planning_Label, Action_Label } =
-    tab_labels || {};
+  const footer_text = result?.footer_text || {};
+  const tab_labels = result?.tab_labels || [];
 
   const [activeIndex, setActiveIndex] = React.useState(0);
 
+  const panes = tab_labels
+    .filter(({ key }) => key !== 'Language')
+    .map(({ key, value }) => {
+      const renderTab = tabRenderers[key];
+      const dataMap = {
+        Governance_Label: governance,
+        Assessment_Label: assessment,
+        Planning_Label: planning,
+        Action_Label: action,
+      };
+
+      return {
+        menuItem: value,
+        render: () => (renderTab ? renderTab(dataMap[key]) : null),
+      };
+    });
+
   return (
     <Container>
       <BannerTitle
@@ -38,7 +59,7 @@ const MissionSignatoryProfileView = (props) => {
           hideShareButton: false,
         }}
       />
-      <div className="signatories-profile">
+      <div className="signatory-profile">
         <br />
 
         <Tab
@@ -51,25 +72,16 @@ const MissionSignatoryProfileView = (props) => {
           grid={{ paneWidth: 9, tabWidth: 3, stackable: true }}
           activeIndex={activeIndex}
           onTabChange={(e, { activeIndex }) => setActiveIndex(activeIndex)}
-          panes={[
-            {
-              menuItem: Governance_Label || 'Governance',
-              render: () => <GovernanceTab result={governance} />,
-            },
-            {
-              menuItem: Assessment_Label || 'Assessment',
-              render: () => <AssessmentTab result={assessment} />,
-            },
-            {
-              menuItem: Planning_Label || 'Planning',
-              render: () => <PlanningTab result={planning} />,
-            },
-            {
-              menuItem: Action_Label || 'Action',
-              render: () => <ActionPagesTab result={action} />,
-            },
-          ]}
+          panes={panes}
         />
+
+        {footer_text.Disclaimer && (
+          <div className="footer-text">
+            <Divider />
+            <strong>{footer_text.Disclaimer_Title}</strong>
+            <p>{footer_text.Disclaimer}</p>
+          </div>
+        )}
       </div>
     </Container>
   );

package/src/components/theme/MissionSignatoryProfile/MissionSignatoryProfileView.test.jsx

@@ -17,27 +17,42 @@ jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
 }));
 
 describe('MissionSignatoryProfileView', () => {
-  const data = {
-    _v_results: {
-      planning: {
-        planning_titles: [{}],
+  const content = {
+    '@components': {
+      missionsignatoryprofile: {
+        result: {
+          governance: [{}],
+          assessment: {},
+          planning: {},
+          action: {},
+          footer_text: {
+            Disclaimer_Title: 'Disclaimer Title',
+            Disclaimer: 'This is a disclaimer.',
+          },
+          tab_labels: [
+            { key: 'Governance_Label', value: 'Governance' },
+            { key: 'Assessment_Label', value: 'Assessment' },
+            { key: 'Planning_Label', value: 'Planning & Target' },
+            { key: 'Action_Label', value: 'Action' },
+            { key: 'Language', value: 'en' }, // will be filtered out
+          ],
+        },
       },
-      governance: [{}],
     },
   };
 
   it('renders tab labels and default content', () => {
-    render(<MissionSignatoryProfileView data={data} />);
+    render(<MissionSignatoryProfileView content={content} />);
 
     // Tab labels
     expect(screen.getByText('Governance')).toBeInTheDocument();
     expect(screen.getByText('Assessment')).toBeInTheDocument();
-    expect(screen.getByText('Planning')).toBeInTheDocument();
+    expect(screen.getByText('Planning & Target')).toBeInTheDocument();
     expect(screen.getByText('Action')).toBeInTheDocument();
   });
 
   it('switches tabs and renders corresponding content', () => {
-    render(<MissionSignatoryProfileView data={data} />);
+    render(<MissionSignatoryProfileView content={content} />);
 
     fireEvent.click(screen.getByText('Governance'));
     expect(screen.getByText('Mocked Governance')).toBeInTheDocument();
@@ -45,10 +60,16 @@ describe('MissionSignatoryProfileView', () => {
     fireEvent.click(screen.getByText('Assessment'));
     expect(screen.getByText('Mocked Assessment')).toBeInTheDocument();
 
-    fireEvent.click(screen.getByText('Planning'));
+    fireEvent.click(screen.getByText('Planning & Target'));
     expect(screen.getByText('Mocked Planning')).toBeInTheDocument();
 
     fireEvent.click(screen.getByText('Action'));
     expect(screen.getByText('Mocked Action')).toBeInTheDocument();
   });
+
+  it('renders footer disclaimer text if present', () => {
+    render(<MissionSignatoryProfileView content={content} />);
+    expect(screen.getByText('Disclaimer Title')).toBeInTheDocument();
+    expect(screen.getByText('This is a disclaimer.')).toBeInTheDocument();
+  });
 });

package/src/components/theme/MissionSignatoryProfile/{StatisticsSection.jsx → StatisticSection.jsx}

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   Statistic,
   StatisticValue,
@@ -7,10 +5,10 @@ import {
   StatisticGroup,
 } from 'semantic-ui-react';
 
-const StatisticsSection = ({ statistics }) => {
+const StatisticSection = ({ statistic }) => {
   return (
     <StatisticGroup widths="two" size="small">
-      {statistics.map((stat, index) => (
+      {statistic.map((stat, index) => (
         <Statistic key={index}>
           <StatisticValue>{stat.value}</StatisticValue>
           <StatisticLabel>{stat.label}</StatisticLabel>
@@ -20,4 +18,4 @@ const StatisticsSection = ({ statistics }) => {
   );
 };
 
-export default StatisticsSection;
+export default StatisticSection;

package/src/components/theme/MissionSignatoryProfile/TabSections/ActionPagesTab.jsx

@@ -1,12 +1,14 @@
-import React from 'react';
 import { Tab, Grid } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
+import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from '../AccordionList';
 
 const ActionsTabContent = ({ action }) => {
   const hasHazards = action?.Climate_Hazards?.length > 0;
-  const hasSectors = !!action?.Sectors;
-  const hasBenefits = !!action?.Co_Benefits;
+  const hasSectors = action?.Sectors.length > 0;
+  const hasBenefits = action?.Co_Benefits.length > 0;
+
   return (
     <>
       <Grid columns="12">
@@ -63,30 +65,28 @@ const ActionPagesTab = ({ result }) => {
   const { Title, Abstract, Abstract_Line } = result.action_text?.[0] || [];
   const actions = result.actions || [];
 
-  const sortedActions = [...actions].sort((a, b) => {
-    const aNum = parseInt(a.Action_Id.replace(/\D/g, ''), 10);
-    const bNum = parseInt(b.Action_Id.replace(/\D/g, ''), 10);
-    return aNum - bNum;
-  });
+  const sortedActions = [...actions].sort((a, b) => a.Order - b.Order);
 
   return (
     <Tab.Pane>
       {Title && <h2>{Title}</h2>}
-      {Abstract && <p>{Abstract}</p>}
-      {Abstract_Line && <Callout>{Abstract_Line}</Callout>}
-
-      <br />
+      {Abstract && <HTMLField value={{ data: formatTextToHTML(Abstract) }} />}
+      {Abstract_Line && (
+        <Callout>
+          <HTMLField value={{ data: formatTextToHTML(Abstract_Line) }} />
+        </Callout>
+      )}
 
       {sortedActions.map((action, index) => {
         return (
           <div key={index} className="section-wrapper">
             <h5 className="section-title">
               <span className="section-number">{action.Order}. </span>
-              <span>{action?.Action}</span>
+              <HTMLField value={{ data: formatTextToHTML(action?.Action) }} />
             </h5>
 
             <AccordionList
-              variation="tertiary"
+              variation="secondary"
               accordions={[
                 {
                   title: action?.More_Details_Label || 'More details',

package/src/components/theme/MissionSignatoryProfile/TabSections/ActionPagesTab.test.jsx

@@ -61,7 +61,7 @@ describe('ActionPagesTab', () => {
   };
 
   it('renders action tab content correctly', () => {
-    const { getByText, getAllByText } = render(
+    const { getByText, container } = render(
       <ActionPagesTab result={mockResult} />,
     );
 
@@ -71,9 +71,7 @@ describe('ActionPagesTab', () => {
     ).toBeInTheDocument();
     expect(getByText('Summary line here.')).toBeInTheDocument();
 
-    const sections = getAllByText(/^\d+\./).map((el) =>
-      el.closest('.section-wrapper'),
-    );
+    const sections = container.querySelectorAll('.section-wrapper');
 
     // First action
     const firstAction = within(sections[0]);

package/src/components/theme/MissionSignatoryProfile/TabSections/AssessmentTab.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { Tab, Image, Segment, Item } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
+import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from '../AccordionList';
 
 import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
@@ -38,7 +39,7 @@ const AssessmentAccordionContent = ({ result }) => {
 
       <h5>{result.Further_Details_Label}</h5>
       <Segment className="border">
-        <p>{result.Please_Explain}</p>
+        <HTMLField value={{ data: formatTextToHTML(result.Please_Explain) }} />
       </Segment>
     </>
   );
@@ -63,9 +64,13 @@ const AssessmentTab = ({ result }) => {
   return (
     <Tab.Pane>
       {Title && <h2>{Title}</h2>}
-      {Subheading && <Callout>{Subheading}</Callout>}
+      {Subheading && (
+        <Callout>
+          <HTMLField value={{ data: formatTextToHTML(Subheading) }} />
+        </Callout>
+      )}
 
-      {Abstract && <p>{Abstract}</p>}
+      {Abstract && <HTMLField value={{ data: formatTextToHTML(Abstract) }} />}
 
       <div className="tab-section-wrapper assessment">
         {Cra_Title && <h3>{Cra_Title}</h3>}
@@ -99,7 +104,9 @@ const AssessmentTab = ({ result }) => {
 
       {Hazards_Title && <h3>{Hazards_Title}</h3>}
 
-      {Hazards_Abstract && <p>{Hazards_Abstract}</p>}
+      {Hazards_Abstract && (
+        <HTMLField value={{ data: formatTextToHTML(Hazards_Abstract) }} />
+      )}
 
       <br />
 

package/src/components/theme/MissionSignatoryProfile/TabSections/GovernanceTab.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { Tab } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import AccordionList from '../AccordionList';
+import StatisticSection from '../StatisticSection';
 
 const GovernanceTab = ({ result }) => {
   const {
@@ -13,14 +13,43 @@ const GovernanceTab = ({ result }) => {
     Describe,
     Provide_Title,
     Provide,
+    Statistic_Area,
+    Statistic_Area_Label,
+    Statistic_Jurisdiction_Range,
+    Statistic_Jurisdiction_Range_Label,
+    Statistic_Population_Size,
+    Statistic_Population_Size_Label,
+    Statistic_Population_Year,
+    Statistic_Population_Year_Label,
   } = result;
 
+  const statisticData = [
+    {
+      value: Statistic_Area,
+      label: Statistic_Area_Label,
+    },
+    {
+      value: Statistic_Jurisdiction_Range,
+      label: Statistic_Jurisdiction_Range_Label,
+    },
+    {
+      value: Statistic_Population_Size,
+      label: Statistic_Population_Size_Label,
+    },
+    {
+      value: Statistic_Population_Year,
+      label: Statistic_Population_Year_Label,
+    },
+  ].filter((stat) => stat.value && stat.label);
+
   return (
     <Tab.Pane>
       {Title && <h2>{Title}</h2>}
 
       {Introduction && <Callout>{Introduction}</Callout>}
 
+      <StatisticSection statistic={statisticData} />
+
       {Describe_Title && <h3>{Describe_Title}</h3>}
 
       {Describe && <HTMLField value={{ data: formatTextToHTML(Describe) }} />}

package/src/components/theme/MissionSignatoryProfile/TabSections/PlanningTab.jsx

@@ -88,17 +88,25 @@ const PlanningTab = ({ result }) => {
   return (
     <Tab.Pane>
       {titleData?.Title && <h2>{titleData.Title}</h2>}
-      {titleData?.Abstract_Line && <Callout>{titleData.Abstract_Line}</Callout>}
+      {titleData?.Abstract_Line && (
+        <Callout>
+          <HTMLField
+            value={{ data: formatTextToHTML(titleData?.Abstract_Line) }}
+          />
+        </Callout>
+      )}
 
       {sortedGoals.map((goal, index) => {
         return (
           <div key={index} className="section-wrapper">
-            <span className="goal-title-label">{goal?.Title_Label}</span>
+            <h5 className="section-title">
+              <span className="section-number">{goal?.Title_Label} </span>
 
-            <HTMLField value={{ data: formatTextToHTML(goal?.Title) }} />
+              <HTMLField value={{ data: formatTextToHTML(goal?.Title) }} />
+            </h5>
 
             <AccordionList
-              variation="tertiary"
+              variation="secondary"
               accordions={[
                 {
                   title: goal?.More_Details_Label || 'More details',
@@ -115,7 +123,11 @@ const PlanningTab = ({ result }) => {
       )}
 
       {goalData?.Climate_Action_Abstract && (
-        <Callout>{goalData.Climate_Action_Abstract}</Callout>
+        <Callout>
+          <HTMLField
+            value={{ data: formatTextToHTML(goalData.Climate_Action_Abstract) }}
+          />
+        </Callout>
       )}
 
       {planning_climate_action.map((action, index) => {
@@ -124,12 +136,22 @@ const PlanningTab = ({ result }) => {
             <br />
             {action?.Sectors_Introduction && (
               <Message>
-                <p>{action.Sectors_Introduction}</p>
+                <HTMLField
+                  value={{
+                    data: formatTextToHTML(action.Sectors_Introduction),
+                  }}
+                />
               </Message>
             )}
 
             <ItemsSection items={action?.Sectors} />
-            {action?.Description && <p>{action.Description}</p>}
+
+            {action?.Description && (
+              <HTMLField
+                className="description"
+                value={{ data: formatTextToHTML(action.Description) }}
+              />
+            )}
 
             {(action?.Approval_Year || action?.End_Year) && (
               <p>

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

@@ -9,13 +9,13 @@ import {
 } from '@eeacms/volto-cca-policy/helpers';
 import {
   Container,
-  Segment,
+  // Segment,
   Divider,
   Grid,
   ListItem,
   List,
 } from 'semantic-ui-react';
-import { UniversalLink } from '@plone/volto/components';
+// import { UniversalLink } from '@plone/volto/components';
 import {
   ShareInfoButton,
   PortalMessage,
@@ -253,9 +253,12 @@ function AdaptationOptionView(props) {
               computer={4}
               className="col-right"
             >
-              <ContentMetadata {...props} />
+              <ContentMetadata
+                {...props}
+                related_case_studies={related_case_studies}
+              />
 
-              {related_case_studies?.length > 0 && (
+              {/* {related_case_studies?.length > 0 && (
                 <Segment>
                   <h5>
                     <FormattedMessage
@@ -273,7 +276,7 @@ function AdaptationOptionView(props) {
                     ))}
                   </ul>
                 </Segment>
-              )}
+              )} */}
             </Grid.Column>
           </div>
         </Grid>

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import '@testing-library/jest-dom/extend-expect';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import { BrokenLinksComponent } from './BrokenLinks';
 
@@ -17,7 +16,18 @@ describe('BrokenLinksComponent', () => {
         messages: {},
       },
     });
+
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            broken_links: {},
+          }),
+      }),
+    );
+
     const reactTable = await import('@tanstack/react-table');
+
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
@@ -25,6 +35,9 @@ describe('BrokenLinksComponent', () => {
         </MemoryRouter>
       </Provider>,
     );
-    expect(container).toBeTruthy();
+
+    await waitFor(() => {
+      expect(container).toBeTruthy();
+    });
   });
 });

package/src/helpers/ContentMetadata.jsx

@@ -13,6 +13,7 @@ import {
   PUBLICATION_REPORT,
 } from '@eeacms/volto-cca-policy/helpers/Constants';
 import { MetadataItemList } from '@eeacms/volto-cca-policy/helpers';
+import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
   default_info_tooltip: {
@@ -342,6 +343,11 @@ function ContentMetadata(props) {
     key_type_measures,
     funding_programme,
   } = content;
+  // const related_case_studies = props.hasAttribute('related_case_studies')
+  //   ? props['related_case_studies']
+  //   : [];
+  const related_case_studies = props['related_case_studies'];
+
   const type = content['@type'];
   const hasGeoChars = geochars !== null || spatial_layer.length > 0;
 
@@ -364,6 +370,26 @@ function ContentMetadata(props) {
           portaltype={type}
         />
 
+        {related_case_studies?.length > 0 && (
+          <>
+            <h5>
+              <FormattedMessage
+                id="Case studies related to this option:"
+                defaultMessage="Case studies related to this option:"
+              />
+            </h5>
+            <ul className="related-case-studies">
+              {related_case_studies.map((item, index) => (
+                <li key={index}>
+                  <UniversalLink key={index} href={item.url}>
+                    {item.title}
+                  </UniversalLink>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+
         {keywords && keywords?.length > 0 && (
           <>
             <h5>

package/theme/globals/mission.less

@@ -116,6 +116,103 @@ body.subsite-mkh {
   #mega-menu .ui.accordion .content {
     background: @subsiteBackgroundGradient;
   }
+
+  /* Mission signatory profile */
+  .signatory-profile {
+    .ui.items.items-group {
+      margin: 2em 0 !important;
+    }
+
+    .column > .ui.segment {
+      background-color: #fff !important;
+    }
+
+    .section-wrapper-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+
+      .date {
+        position: relative;
+        top: 5px;
+      }
+    }
+
+    .description > p {
+      margin-bottom: 1em;
+    }
+
+    .tab-section-wrapper {
+      padding: 1.5em;
+      margin: 2em 0;
+      background-color: #f9f9f9;
+
+      &.assessment {
+        .ui.accordion {
+          margin-top: 1em;
+
+          .content.active {
+            padding: 1rem 1rem !important;
+            background-color: @white;
+          }
+
+          .ui.segment.border {
+            border: 1px solid #e6e7e8;
+          }
+        }
+      }
+    }
+
+    .section-wrapper {
+      padding: 1em;
+      margin: 1em 0;
+      background-color: #f9f9f9;
+
+      .section-title {
+        display: flex;
+        align-items: baseline;
+        gap: 0.5em;
+      }
+
+      .ui.accordion {
+        margin-top: 1em;
+
+        .content.active {
+          padding-bottom: 1rem !important;
+        }
+      }
+
+      .small-label {
+        font-size: 1em;
+      }
+    }
+
+    .section-number {
+      color: @pineGreen;
+    }
+
+    strong.date {
+      margin-right: 0.5em;
+    }
+
+    .items-group {
+      display: block !important;
+      column-count: 2;
+
+      .item {
+        padding: 0.5em 0 !important;
+        break-inside: avoid-column;
+
+        .content {
+          padding-left: 0.5rem !important;
+        }
+      }
+    }
+
+    .footer-text {
+      margin-top: 3em;
+    }
+  }
 }
 
 /* Latest news updates, Latest events */

package/src/components/theme/MissionSignatoryProfile/style.less

@@ -1,86 +0,0 @@
-@type: 'extra';
-@element: 'custom';
-
-@import (multiple, reference, optional) '../../theme.config';
-
-.signatories-profile {
-  .ui.items.items-group {
-    margin: 2em 0 !important;
-  }
-
-  .column > .ui.segment {
-    background-color: #fff !important;
-  }
-
-  .section-wrapper-info {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-
-    .date {
-      position: relative;
-      top: 5px;
-    }
-  }
-
-  .tab-section-wrapper {
-    padding: 1.5em;
-    margin: 2em 0;
-    background-color: #f9f9f9;
-
-    &.assessment {
-      .ui.accordion {
-        margin-top: 1em;
-
-        .content.active {
-          padding: 1rem 1rem !important;
-          background-color: @white;
-        }
-
-        .ui.segment.border {
-          border: 1px solid #e6e7e8;
-        }
-      }
-    }
-  }
-
-  .section-wrapper {
-    margin: 1em 0;
-
-    .goal-title-label {
-      display: inline-block;
-      padding: 0.3em 0.5em;
-      margin: 1em 0;
-      background-color: #dbe7f4;
-      font-size: 14px;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-
-    .ui.accordion {
-      margin-top: 1em;
-    }
-
-    .small-label {
-      font-size: 1em;
-    }
-  }
-
-  strong.date {
-    margin-right: 0.5em;
-  }
-
-  .items-group {
-    display: block !important;
-    column-count: 2;
-
-    .item {
-      padding: 0.5em 0 !important;
-      break-inside: avoid-column;
-
-      .content {
-        padding-left: 0.5rem !important;
-      }
-    }
-  }
-}