@eeacms/volto-cca-policy 0.3.40 → 0.3.42

package/CHANGELOG.md

@@ -4,6 +4,34 @@ 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.42](https://github.com/eea/volto-cca-policy/compare/0.3.41...0.3.42) - 15 May 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-globalsearch@2.1.2 [EEA Jenkins - [`e8281dd`](https://github.com/eea/volto-cca-policy/commit/e8281dd309f4c2734d137946554d1ff50d3e5c97)]
+
+#### :bug: Bug Fixes
+
+- fix: production crash by using safe Statistic subcomponent access [kreafox - [`af7b1d7`](https://github.com/eea/volto-cca-policy/commit/af7b1d745b0080e0a01325b35b860dc537510689)]
+
+### [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.40",
+  "version": "0.3.42",
   "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.2",
     "@eeacms/volto-hero-block": "^7.1.0",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-searchlib": "2.0.16",

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

@@ -6,7 +6,12 @@ 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 || {};
@@ -19,12 +24,27 @@ const MissionSignatoryProfileView = (props) => {
   const assessment = result?.assessment || {};
   const action = result?.action || {};
   const footer_text = result?.footer_text || {};
-  const tab_labels = result?.tab_labels || {};
-  const { Governance_Label, Assessment_Label, Planning_Label, Action_Label } =
-    tab_labels || {};
+  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
@@ -39,7 +59,7 @@ const MissionSignatoryProfileView = (props) => {
           hideShareButton: false,
         }}
       />
-      <div className="signatories-profile">
+      <div className="signatory-profile">
         <br />
 
         <Tab
@@ -52,24 +72,7 @@ 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 && (

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/StatisticSection.jsx

@@ -0,0 +1,16 @@
+import { Statistic } from 'semantic-ui-react';
+
+const StatisticSection = ({ statistic }) => {
+  return (
+    <Statistic.Group widths="two" size="small">
+      {statistic.map((stat, index) => (
+        <Statistic key={index}>
+          <Statistic.Value>{stat.value}</Statistic.Value>
+          <Statistic.Label>{stat.label}</Statistic.Label>
+        </Statistic>
+      ))}
+    </Statistic.Group>
+  );
+};
+
+export default StatisticSection;

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

@@ -65,11 +65,7 @@ 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>
@@ -85,7 +81,7 @@ const ActionPagesTab = ({ result }) => {
         return (
           <div key={index} className="section-wrapper">
             <h5 className="section-title">
-              <span className="section-number">{action.Action_Id}. </span>
+              <span className="section-number">{action.Order}. </span>
               <HTMLField value={{ data: formatTextToHTML(action?.Action) }} />
             </h5>
 

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

@@ -1,4 +1,3 @@
-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';

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/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/StatisticsSection.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import {
-  Statistic,
-  StatisticValue,
-  StatisticLabel,
-  StatisticGroup,
-} from 'semantic-ui-react';
-
-const StatisticsSection = ({ statistics }) => {
-  return (
-    <StatisticGroup widths="two" size="small">
-      {statistics.map((stat, index) => (
-        <Statistic key={index}>
-          <StatisticValue>{stat.value}</StatisticValue>
-          <StatisticLabel>{stat.label}</StatisticLabel>
-        </Statistic>
-      ))}
-    </StatisticGroup>
-  );
-};
-
-export default StatisticsSection;

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

@@ -1,100 +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;
-    }
-  }
-
-  .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;
-  }
-}