@eeacms/volto-cca-policy 0.3.25 → 0.3.26

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.26](https://github.com/eea/volto-cca-policy/compare/0.3.25...0.3.26) - 15 April 2025
+
+#### :rocket: New Features
+
+- feat: add extractFirstURL to parse first URL from text; update formatTextToHTML - refs #285361 [kreafox - [`a348454`](https://github.com/eea/volto-cca-policy/commit/a348454d52a06c4cbd668a7ffeaebed74d4a6788)]
+
+#### :nail_care: Enhancements
+
+- change: better link handler, update planning section, update tests - refs #285361 [kreafox - [`547fbb7`](https://github.com/eea/volto-cca-policy/commit/547fbb7ac308c274b94ff961b4abbae629adf93e)]
+- change: update Governance section - refs #285296 [kreafox - [`0a9b924`](https://github.com/eea/volto-cca-policy/commit/0a9b92433239cf8d288885e561d6ecdd1beac6b5)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`7396574`](https://github.com/eea/volto-cca-policy/commit/7396574df65205350cedb1e105927cb9d01ce3ae)]
+- style: Automated code fix [eea-jenkins - [`2f6ca50`](https://github.com/eea/volto-cca-policy/commit/2f6ca50ad766066511659ac8dd85a3daceeca1d8)]
+
 ### [0.3.25](https://github.com/eea/volto-cca-policy/compare/0.3.24...0.3.25) - 14 April 2025
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/GovernanceTab.jsx

@@ -4,85 +4,29 @@ 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 StatisticsSection from './../StatisticsSection';
 
 const GovernanceTab = ({ result }) => {
-  const statisticsData = [
-    {
-      value: '460km',
-      label: 'Duis non quam et nisi tincidunt',
-    },
-    {
-      value: '51-60%',
-      label: 'Vestibulum ante ipsum primis',
-    },
-    {
-      value: '2.431.213',
-      label: 'Aliquam erat volutpat',
-    },
-    {
-      value: '2023',
-      label: 'Etiam accumsan urna a mauris',
-    },
-  ];
+  const { Introduction, Describe_Title, Describe, Provide_Title, Provide } =
+    result || {};
 
   return (
     <Tab.Pane>
       <h2>Governance</h2>
       <Callout>
-        <p>
-          Sed at risus vel nulla consequat fermentum. Donec et orci mauris.
-          Nullam tempor velit id mi luctus, a scelerisque libero accumsan. In
-          hac habitasse platea dictumst. Cras ac nunc nec massa tristique
-          fringilla.
-        </p>
+        <p>{Introduction}</p>
       </Callout>
 
-      <StatisticsSection statistics={statisticsData} />
+      <h3>{Describe_Title}</h3>
 
-      <h3>Climate related issues</h3>
-      <AccordionList
-        accordions={[
-          {
-            title: 'Vestibulum ante ipsum primis',
-            content: 'No additional details provided.',
-          },
-          {
-            title: 'Etiam accumsan urna a mauris',
-            content: 'No additional details provided.',
-          },
-        ]}
-      />
+      <HTMLField value={{ data: formatTextToHTML(Describe) }} />
 
-      <h3>Opportunities and benefits of climate action</h3>
-
-      <HTMLField value={{ data: formatTextToHTML(result?.Describe) }} />
+      <br />
 
       <AccordionList
         accordions={[
           {
-            title: ' Further details and evidence',
-            content: (
-              <HTMLField value={{ data: formatTextToHTML(result?.Provide) }} />
-            ),
-          },
-        ]}
-      />
-
-      <h3>
-        {result?.Signatory} engages with other levels of government regarding
-        their:
-      </h3>
-
-      <AccordionList
-        accordions={[
-          {
-            title: 'Vestibulum ante ipsum primis',
-            content: 'No additional details provided.',
-          },
-          {
-            title: 'Etiam accumsan urna a mauris',
-            content: 'No additional details provided.',
+            title: <>{Provide_Title}</>,
+            content: <HTMLField value={{ data: formatTextToHTML(Provide) }} />,
           },
         ]}
       />

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/GovernanceTab.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import GovernanceTab from './GovernanceTab';
+
+describe('GovernanceTab', () => {
+  const mockResult = {
+    Describe_Title: 'Opportunities and benefits of climate action',
+    Provide_Title: 'Further details and evidence',
+  };
+
+  it('renders the governance tab correctly', () => {
+    const { getByText } = render(<GovernanceTab result={mockResult} />);
+
+    expect(
+      getByText('Opportunities and benefits of climate action'),
+    ).toBeInTheDocument();
+    expect(getByText('Further details and evidence')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/PlanningTab.jsx

@@ -11,7 +11,10 @@ import {
 } 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 {
+  formatTextToHTML,
+  extractPlanNameAndURL,
+} from '@eeacms/volto-cca-policy/utils';
 import AccordionList from './../AccordionList';
 import image from '@eeacms/volto-cca-policy/../theme/assets/images/image-narrow.svg';
 
@@ -51,7 +54,7 @@ const PlanningGoalContent = ({ goal }) => {
         <Grid.Column mobile={12} tablet={12} computer={hasHazards ? 6 : 12}>
           {hasComments && (
             <>
-              <h5>{goal.Comments_Label}</h5>
+              <h5 className="small-label">{goal.Comments_Label}</h5>
               <Segment>
                 <HTMLField value={{ data: formatTextToHTML(goal.Comments) }} />
               </Segment>
@@ -59,7 +62,7 @@ const PlanningGoalContent = ({ goal }) => {
           )}
           {hasDescription && (
             <>
-              <h5>{goal.Description_Label}</h5>
+              <h5 className="small-label">{goal.Description_Label}</h5>
               <Segment>
                 <HTMLField
                   value={{ data: formatTextToHTML(goal.Description) }}
@@ -99,21 +102,17 @@ const PlanningTab = ({ result }) => {
       )}
 
       {sortedGoals.map((goal, index) => {
-        const goalNumber = parseInt(
-          goal.Adaptation_Goal_Id.replace(/\D/g, ''),
-          10,
-        );
         return (
           <div key={index} className="section-wrapper">
-            <h5>
-              <span className="section-number">{goalNumber}. </span>
-              {goal.Title}
-            </h5>
+            <span className="goal-title-label">{goal?.Title_Label}</span>
+
+            <HTMLField value={{ data: formatTextToHTML(goal?.Title) }} />
+
             <AccordionList
-              variation="secondary"
+              variation="tertiary"
               accordions={[
                 {
-                  title: goal.More_Details_Label || 'More details',
+                  title: goal?.More_Details_Label || 'More details',
                   content: <PlanningGoalContent goal={goal} />,
                 },
               ]}
@@ -123,19 +122,18 @@ const PlanningTab = ({ result }) => {
       })}
 
       {goalData?.Climate_Action_Title && (
-        <>
-          <h2>{goalData.Climate_Action_Title}</h2>
-          {goalData?.Climate_Action_Abstract && (
-            <Callout>
-              <p>{goalData.Climate_Action_Abstract}</p>
-            </Callout>
-          )}
-        </>
+        <h2>{goalData.Climate_Action_Title}</h2>
+      )}
+
+      {goalData?.Climate_Action_Abstract && (
+        <Callout>
+          <p>{goalData.Climate_Action_Abstract}</p>
+        </Callout>
       )}
 
       {planning_climate_action.map((action, index) => {
         return (
-          <>
+          <React.Fragment key={index}>
             <br />
             {action?.Sectors_Introduction && (
               <Message>
@@ -143,7 +141,7 @@ const PlanningTab = ({ result }) => {
               </Message>
             )}
 
-            <ItemsSection items={action.Sectors} />
+            <ItemsSection items={action?.Sectors} />
             {action?.Description && <p>{action.Description}</p>}
 
             {(action?.Approval_Year || action?.End_Year) && (
@@ -158,21 +156,26 @@ const PlanningTab = ({ result }) => {
             {action?.Name_Of_Plan_And_Hyperlink && (
               <p>
                 {(() => {
-                  const [
-                    planName,
-                    planUrl,
-                  ] = action.Name_Of_Plan_And_Hyperlink.split(';').map((part) =>
-                    part.trim(),
+                  const { name, url } = extractPlanNameAndURL(
+                    action.Name_Of_Plan_And_Hyperlink,
                   );
-                  return (
-                    <a href={planUrl} title={planName}>
-                      <strong>{action.Further_Information_Link_Text}</strong>
+
+                  return url ? (
+                    <a href={url} title={name} target="_blank" rel="noreferrer">
+                      <strong>
+                        {action.Further_Information_Link_Text}
+                        {name && ` [${name}]`}
+                      </strong>
                     </a>
+                  ) : (
+                    <strong>
+                      {action.Further_Information_Link_Text}
+                      {name && ` [${name}]`}
+                    </strong>
                   );
                 })()}
               </p>
             )}
-
             {action?.Attachment && (
               <p>
                 <a href={action.Attachment}>
@@ -180,7 +183,7 @@ const PlanningTab = ({ result }) => {
                 </a>
               </p>
             )}
-          </>
+          </React.Fragment>
         );
       })}
     </Tab.Pane>

package/src/components/manage/Blocks/MissionSignatoriesProfile/TabSections/PlanningTab.test.jsx

@@ -3,15 +3,18 @@ import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import PlanningTab from './PlanningTab';
 
-// Mock child components
-jest.mock('./../AccordionList', () => () => <div>Mock AccordionList</div>);
 jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
   HTMLField: ({ value }) => (
     <div dangerouslySetInnerHTML={{ __html: value.data }} />
   ),
 }));
+
 jest.mock('@eeacms/volto-cca-policy/utils', () => ({
   formatTextToHTML: (text) => text,
+  extractPlanNameAndURL: (str) => ({
+    name: 'Plan Example',
+    url: 'https://plan-link.com',
+  }),
 }));
 
 describe('PlanningTab', () => {
@@ -23,6 +26,7 @@ describe('PlanningTab', () => {
       {
         Adaptation_Goal_Id: 'AG-001',
         Title: 'Goal Title 1',
+        Title_Label: 'Goal 1 Label',
         More_Details_Label: 'Details',
         Climate_Hazards: ['Heat', 'Flood'],
         Climate_Hazards_Addressed_Label: 'Hazards',
@@ -36,6 +40,7 @@ describe('PlanningTab', () => {
       {
         Adaptation_Goal_Id: 'AG-002',
         Title: 'Goal Title 2',
+        Title_Label: 'Goal 2 Label',
         More_Details_Label: 'Details',
         Climate_Hazards: ['Drought', 'Storm'],
         Climate_Hazards_Addressed_Label: 'Hazards',
@@ -65,9 +70,7 @@ describe('PlanningTab', () => {
   };
 
   it('renders planning tab with basic data', () => {
-    const { getByText, getAllByText } = render(
-      <PlanningTab result={mockResult} />,
-    );
+    const { getByText } = render(<PlanningTab result={mockResult} />);
 
     expect(getByText('Planning Title')).toBeInTheDocument();
     expect(getByText('Abstract info')).toBeInTheDocument();
@@ -75,8 +78,6 @@ describe('PlanningTab', () => {
     expect(getByText('Goal Title 1')).toBeInTheDocument();
     expect(getByText('Goal Title 2')).toBeInTheDocument();
 
-    expect(getAllByText('Mock AccordionList').length).toBe(2);
-
     expect(getByText('Action Title')).toBeInTheDocument();
     expect(getByText('Intro to sectors')).toBeInTheDocument();
     expect(getByText('Sector description')).toBeInTheDocument();
@@ -85,8 +86,6 @@ describe('PlanningTab', () => {
     expect(getByText(/2023/)).toBeInTheDocument();
     expect(getByText(/End Year:/)).toBeInTheDocument();
     expect(getByText(/2030/)).toBeInTheDocument();
-
-    expect(getByText('Explore Plan')).toBeInTheDocument();
   });
 
   it('renders ItemsSection if there are sectors', () => {
@@ -94,4 +93,18 @@ describe('PlanningTab', () => {
 
     expect(getByText(/Agriculture/)).toBeInTheDocument();
   });
+
+  it('renders image in ItemsSection', () => {
+    const { container } = render(<PlanningTab result={mockResult} />);
+    const images = container.querySelectorAll('img');
+    expect(images.length).toBeGreaterThan(0);
+  });
+
+  it('renders hyperlink with extracted name and URL', () => {
+    const { getByText } = render(<PlanningTab result={mockResult} />);
+
+    const link = getByText(/More Info \[Plan Example\]/);
+    expect(link).toBeInTheDocument();
+    expect(link.closest('a')).toHaveAttribute('href', 'https://plan-link.com');
+  });
 });

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

@@ -24,12 +24,24 @@
   }
 
   .section-wrapper {
-    padding: 1.5em;
-    margin: 2em 0;
-    background-color: #f9f9f9;
+    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;
+    }
 
-    .section-number {
-      color: @pineGreen;
+    .small-label {
+      font-size: 1em;
     }
   }
 

package/src/utils.js

@@ -81,18 +81,41 @@ export const filterBlocks = (content, blockTypes = []) => {
 export const formatTextToHTML = (text) => {
   if (!text) return '';
 
-  let formattedText = text;
+  let formattedText = text
+    .replace(/\\\\/g, '\\') // unescape backslashes
+    .replace(/\\'/g, "'") // unescape single quotes
+    .replace(/\\"/g, '"') // unescape double quotes
+    .replace(/\\t\\n/g, '') // handle \t\n
+    .replace(/\\n\\n/g, '</p><p>') // double line break = paragraph
+    .replace(/\\no\s*/g, '<br />• ') // list-like "o " to bullet point
+    .replace(/\\n/g, '<br />'); // single line break
 
-  // Handle common escape issues
-  formattedText = formattedText.replace(/\\\\/g, '\\'); // unescape backslashes
-  formattedText = formattedText.replace(/\\'/g, "'"); // unescape single quotes
-  formattedText = formattedText.replace(/\\"/g, '"'); // unescape double quotes
-
-  // Replace \\n\\n with </p><p> for paragraph separation
-  formattedText = formattedText.replace(/\\n\\n/g, '</p><p>');
+  return `<p>${formattedText}</p>`;
+};
 
-  // Replace \\n with <br /> for line breaks
-  formattedText = formattedText.replace(/\\n/g, '<br />');
+export const extractPlanNameAndURL = (text) => {
+  if (!text) return { name: '', url: '' };
+
+  // Match URL inside parentheses
+  const parenthesisMatch = text.match(/\((https?:\/\/[^\s)]+)\)/);
+  // Match first direct URL not inside parentheses
+  const directMatch = text.match(/https?:\/\/[^\s,;)]+/);
+  const url = parenthesisMatch?.[1] || directMatch?.[0] || '';
+
+  let name = text;
+
+  if (url) {
+    // Remove URL and any punctuation before it
+    name = name
+      .replace(`(${url})`, '')
+      .replace(url, '')
+      .replace(/[-–;,:\s]+$/, '')
+      .replace(/[-–;,:\s]+$/, '')
+      .trim();
+  }
 
-  return `<p>${formattedText}</p>`;
+  return {
+    name: name,
+    url,
+  };
 };