@eeacms/volto-cca-policy 0.3.16 → 0.3.18

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-03-06T11:58:52.605Z\n"
+"POT-Creation-Date: 2025-03-18T08:52:34.397Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -20,6 +20,7 @@ msgstr ""
 
 #. Default: "Adaptation Approaches"
 #: search/cca/facets
+#: search/facets
 #: search/health_observatory/facets-health
 #: search/mission_all/facets-all
 #: search/mission_projects/facets-projects
@@ -44,6 +45,7 @@ msgstr ""
 #. Default: "Adaptation Sectors"
 #: search/cca/facets
 #: search/common
+#: search/facets
 msgid "Adaptation Sectors"
 msgstr ""
 
@@ -84,6 +86,11 @@ msgstr ""
 msgid "Background information"
 msgstr ""
 
+#. Default: "Belgium"
+#: helpers/Constants
+msgid "Belgium"
+msgstr ""
+
 #. Default: "Biogeographical regions:"
 #: helpers/ContentMetadata
 msgid "Biogeographical regions:"
@@ -142,6 +149,7 @@ msgstr ""
 #. Default: "Climate Impacts"
 #: search/cca/facets
 #: search/common
+#: search/facets
 msgid "Climate Impacts"
 msgstr ""
 
@@ -295,6 +303,11 @@ msgstr ""
 msgid "For more search options"
 msgstr ""
 
+#. Default: "France"
+#: helpers/Constants
+msgid "France"
+msgstr ""
+
 #. Default: "Fullscreen"
 #: components/theme/Views/C3SIndicatorView
 msgid "Fullscreen"
@@ -302,6 +315,7 @@ msgstr ""
 
 #. Default: "Funding Programme"
 #: search/cca/facets
+#: search/facets
 #: search/mission_projects/facets-projects
 #: search/mission_stories/facets-stories
 msgid "Funding Programme"
@@ -347,6 +361,11 @@ msgstr ""
 msgid "Hazard Type"
 msgstr ""
 
+#. Default: "Health Impacts"
+#: search/health_observatory/config-health
+msgid "Health Impacts"
+msgstr ""
+
 #. Default: "Health impact:"
 #: helpers/ContentMetadata
 msgid "Health impact:"
@@ -410,6 +429,7 @@ msgstr ""
 
 #. Default: "Item from third parties"
 #: search/cca/facets
+#: search/facets
 msgid "Item from third parties"
 msgstr ""
 
@@ -421,6 +441,7 @@ msgstr ""
 #. Default: "Key Type Measure"
 #: components/manage/Blocks/FilterAceContent/FilterAceContentView
 #: search/cca/facets
+#: search/facets
 msgid "Key Type Measure"
 msgstr ""
 
@@ -567,6 +588,7 @@ msgid "Observatory contributions"
 msgstr ""
 
 #. Default: "Observatory partner"
+#: search/health_observatory/config-health
 #: search/health_observatory/facets-health
 msgid "Observatory partner"
 msgstr ""
@@ -701,6 +723,7 @@ msgstr ""
 
 #. Default: "Section"
 #: search/cca/facets
+#: search/facets
 msgid "Section"
 msgstr ""
 
@@ -819,6 +842,7 @@ msgstr ""
 
 #. Default: "Transnational regions"
 #: search/cca/facets
+#: search/facets
 msgid "Transnational regions"
 msgstr ""
 
@@ -828,6 +852,11 @@ msgstr ""
 msgid "Type of item"
 msgstr ""
 
+#. Default: "Types"
+#: search/health_observatory/config-health
+msgid "Types"
+msgstr ""
+
 #. Default: "Updating notes"
 #: components/theme/Views/CaseStudyView
 msgid "Updating notes"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "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/AccordionList.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import {
+  Icon,
+  Accordion,
+  AccordionTitle,
+  AccordionContent,
+} from 'semantic-ui-react';
+
+const AccordionList = ({ accordions }) => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const handleAccordionClick = (index) => {
+    setActiveIndex(activeIndex === index ? -1 : index);
+  };
+
+  return (
+    <Accordion>
+      {accordions.map((accordion, index) => (
+        <React.Fragment key={index}>
+          <AccordionTitle
+            active={activeIndex === index}
+            onClick={() => handleAccordionClick(index)}
+          >
+            <Icon
+              name={
+                activeIndex === index
+                  ? 'ri-arrow-up-s-line'
+                  : 'ri-arrow-down-s-line'
+              }
+            />
+            {accordion.title}
+          </AccordionTitle>
+          <AccordionContent active={activeIndex === index}>
+            <p>{accordion.content}</p>
+          </AccordionContent>
+        </React.Fragment>
+      ))}
+    </Accordion>
+  );
+};
+
+export default AccordionList;

package/src/components/manage/Blocks/MissionSignatoriesProfile/MissionSignatoriesProfileView.js

@@ -1,36 +1,30 @@
 import React from 'react';
-import {
-  Tab,
-  AccordionTitle,
-  AccordionContent,
-  Accordion,
-  Icon,
-} from 'semantic-ui-react';
-import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import { Tab } from 'semantic-ui-react';
 
-export default function MissionSignatoriesProfileView(props) {
+import IntroductionTab from './TabSections/IntroductionTab';
+import GovernanceTab from './TabSections/GovernanceTab';
+import AssessmentTab from './TabSections/AssessmentTab';
+import PlanningTab from './TabSections/PlanningTab';
+import ActionPagesTab from './TabSections/ActionPagesTab';
+
+import './style.less';
+
+const MissionSignatoriesProfileView = (props) => {
   const { data } = props;
   const result = data?._v_results?.[0] || {};
   // const dataJson = JSON.parse(result?.Cooperation_Experience);
-
-  const [activeAccIndex, setActiveAccIndex] = React.useState(-1);
-
-  function handleAccClick(e, titleProps) {
-    const { index } = titleProps;
-    const newIndex = activeAccIndex === index ? -1 : index;
-
-    setActiveAccIndex(newIndex);
-  }
+  const [activeIndex, setActiveIndex] = React.useState(0);
 
   return (
     <>
-      <div>
+      <div className="signatories-profile">
         {/* {
           dataJson['Cooperation_Experience'][0][
             'DescribeDetailCooperationEnhance'
           ]
         } */}
         <h1>{result?.Signatory}</h1>
+
         <Tab
           menu={{
             fluid: true,
@@ -39,111 +33,34 @@ export default function MissionSignatoriesProfileView(props) {
             pointing: true,
           }}
           grid={{ paneWidth: 9, tabWidth: 3, stackable: true }}
-          onTabChange={() => {}}
+          activeIndex={activeIndex}
+          onTabChange={(e, { activeIndex }) => setActiveIndex(activeIndex)}
           panes={[
             {
               menuItem: 'Introduction',
-              render: () => (
-                <Tab.Pane>
-                  <h2>Introduction</h2>
-                  <p>
-                    Nullam quis arcu in magna pulvinar tincidunt. Lorem ipsum
-                    dolor sit amet, consectetur adipiscing elit. Nam hendrerit
-                    nulla ut cursus laoreet. Nullam elementum lorem vel
-                    facilisis laoreet. Cras ac turpis vel erat vehicula
-                    venenatis.
-                  </p>
-                </Tab.Pane>
-              ),
+              render: () => <IntroductionTab activeIndex={activeIndex} />,
             },
             {
               menuItem: 'Governance',
-              render: () => (
-                <Tab.Pane>
-                  <h2>Governance</h2>
-                  <Callout>
-                    <p>
-                      Etiam id velit feugiat, scelerisque velit a, scelerisque
-                      nunc. Vestibulum ante ipsum primis in faucibus orci luctus
-                      et ultrices posuere cubilia curae; Integer dignissim risus
-                      non nibh scelerisque, sit amet tincidunt sapien rutrum.
-                    </p>
-                  </Callout>
-
-                  <h3>Opportunities and benefits of climate action</h3>
-                  <p>{result?.Describe}</p>
-
-                  <Accordion>
-                    <AccordionTitle
-                      active={activeAccIndex === 0}
-                      index={0}
-                      onClick={handleAccClick}
-                    >
-                      <Icon
-                        name={
-                          activeAccIndex
-                            ? 'ri-arrow-down-s-line'
-                            : 'ri-arrow-up-s-line'
-                        }
-                      />
-                      Further details and evidence
-                    </AccordionTitle>
-                    <AccordionContent active={activeAccIndex === 0}>
-                      <p>{result?.Provide}</p>
-                    </AccordionContent>
-                  </Accordion>
-                </Tab.Pane>
-              ),
+              render: () => <GovernanceTab result={result} />,
             },
             {
               menuItem: 'Assessment',
-              render: () => (
-                <Tab.Pane>
-                  <h2>Assessment</h2>
-                  <p>
-                    Etiam accumsan urna a mauris dapibus, nec aliquet nunc
-                    convallis. Phasellus eget justo et libero ultrices posuere.
-                    Cras euismod, arcu nec congue convallis, ipsum nunc cursus
-                    nibh, vel condimentum sapien orci non libero. Integer
-                    ullamcorper felis sit amet felis placerat, eu convallis
-                    lorem iaculis.
-                  </p>
-                </Tab.Pane>
-              ),
+              render: () => <AssessmentTab result={result} />,
             },
             {
               menuItem: 'Planning',
-              render: () => (
-                <Tab.Pane>
-                  <h2>Planning</h2>
-                  <p>
-                    Suspendisse potenti. Vivamus non arcu tincidunt, congue
-                    massa at, porttitor velit. Curabitur lacinia nisl ut turpis
-                    convallis, at dictum urna aliquet. Nullam non urna eget
-                    felis interdum feugiat. Morbi vel neque elit. Nullam a
-                    luctus leo. Integer maximus sapien in bibendum scelerisque.
-                  </p>
-                </Tab.Pane>
-              ),
+              render: () => <PlanningTab result={result} />,
             },
             {
               menuItem: 'Action Pages',
-              render: () => (
-                <Tab.Pane>
-                  <h2>Action PAges</h2>
-                  <p>
-                    Phasellus ac eros at urna condimentum lacinia. Pellentesque
-                    habitant morbi tristique senectus et netus et malesuada
-                    fames ac turpis egestas. Sed bibendum, sapien a venenatis
-                    fermentum, mauris augue cursus turpis, vitae elementum massa
-                    orci sit amet massa. In hac habitasse platea dictumst.
-                  </p>
-                </Tab.Pane>
-              ),
+              render: () => <ActionPagesTab result={result} />,
             },
           ]}
         />
       </div>
     </>
   );
-}
+};
+
+export default MissionSignatoriesProfileView;

package/src/components/manage/Blocks/MissionSignatoriesProfile/StatisticsSection.jsx

@@ -0,0 +1,23 @@
+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/manage/Blocks/MissionSignatoriesProfile/TabSections/ActionPagesTab.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Tab } from 'semantic-ui-react';
+import { Callout } from '@eeacms/volto-eea-design-system/ui';
+
+const ActionPagesTab = () => {
+  return (
+    <Tab.Pane>
+      <h2>Action Pages</h2>
+      <Callout>
+        <p>
+          Donec et urna vel risus feugiat pharetra. Proin id lacus vitae velit
+          accumsan venenatis. Aenean non mi vel nisi lacinia maximus.
+        </p>
+      </Callout>
+      <p>
+        Duis efficitur, sapien quis bibendum auctor, lectus risus feugiat
+        sapien, ac pulvinar orci est a arcu. Integer id augue vitae urna
+        tristique tempus. Etiam id velit feugiat, scelerisque velit a,
+        scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus
+        et ultrices posuere cubilia curae; Integer dignissim risus non nibh
+        scelerisque, sit amet tincidunt sapien rutrum.
+      </p>
+    </Tab.Pane>
+  );
+};
+
+export default ActionPagesTab;

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+  Tab,
+  Image,
+  Button,
+  Segment,
+  Grid,
+  GridColumn,
+  Item,
+  ItemGroup,
+  ItemContent,
+} from 'semantic-ui-react';
+import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import AccordionList from './../AccordionList';
+
+import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
+
+const AssessmentTab = () => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  return (
+    <Tab.Pane>
+      <h2>Assessment</h2>
+      <Callout>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+      </Callout>
+
+      <div className="profile-content-box">
+        <h3>Climate Risk Assessment</h3>
+        <div className="profile-content-box-info">
+          <ItemGroup unstackable className="row">
+            <Item>
+              <Image size="miny" src={image} />
+              <ItemContent
+                verticalAlign="middle"
+                style={{ paddingLeft: '5px' }}
+              >
+                Lorem ipsum dolor sit amet
+              </ItemContent>
+            </Item>
+          </ItemGroup>
+
+          <div className="date">
+            <p>Year of publication: 2022</p>
+          </div>
+        </div>
+
+        <h4>The CRA conducted considers the following factors</h4>
+
+        <div className="items-wrapper">
+          <Grid className="column-grid">
+            <GridColumn width={6} className="column-blocks-wrapper">
+              <ItemGroup unstackable className="row">
+                <Item>
+                  <Image size="small" src={image} />
+                  <ItemContent verticalAlign="middle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                  </ItemContent>
+                </Item>
+
+                <Item>
+                  <Image size="small" src={image} />
+                  <ItemContent verticalAlign="middle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                  </ItemContent>
+                </Item>
+
+                <Item>
+                  <Image size="small" src={image} />
+                  <ItemContent verticalAlign="middle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                  </ItemContent>
+                </Item>
+              </ItemGroup>
+            </GridColumn>
+
+            <GridColumn width={6}>
+              <ItemGroup unstackable className="row">
+                <Item>
+                  <Image size="small" src={image} />
+                  <ItemContent verticalAlign="middle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                  </ItemContent>
+                </Item>
+
+                <Item>
+                  <Image size="small" src={image} />
+                  <ItemContent verticalAlign="middle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                  </ItemContent>
+                </Item>
+
+                <Item>
+                  <Image size="small" src={image} />
+                  <ItemContent verticalAlign="middle">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                  </ItemContent>
+                </Item>
+              </ItemGroup>
+            </GridColumn>
+          </Grid>
+        </div>
+
+        <h4>Further details</h4>
+        <Segment>
+          Nam tempor finibus lorem, nec varius arcu convallis sed. Nunc id orci
+          a neque vehicula malesuada. Donec vehicula libero vel leo convallis,
+          nec tincidunt felis tincidunt. Maecenas euismod tristique leo, vel
+          malesuada ligula malesuada sed. Donec eget libero id leo congue
+          venenatis.
+        </Segment>
+        <Button primary inverted>
+          Download
+        </Button>
+      </div>
+
+      <h3>Climate related hazards & sectors most exposed</h3>
+      <p>
+        Donec eget libero id leo congue venenatis. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur.
+      </p>
+
+      <br />
+
+      <Tab
+        menu={{
+          fluid: true,
+          className: 'secondary',
+          vertical: true,
+          pointing: true,
+        }}
+        grid={{ paneWidth: 9, tabWidth: 3, stackable: true }}
+        activeIndex={activeIndex}
+        onTabChange={(e, { activeIndex }) => setActiveIndex(activeIndex)}
+        panes={[
+          {
+            menuItem: 'Water related',
+            render: () => (
+              <AccordionList
+                accordions={[
+                  {
+                    title: 'Vestibulum ante ipsum primis',
+                    content: 'No additional details provided.',
+                  },
+                  {
+                    title: 'Etiam accumsan urna a mauris',
+                    content: 'No additional details provided.',
+                  },
+                ]}
+              />
+            ),
+          },
+          {
+            menuItem: 'Heat related',
+            render: () => (
+              <div>
+                Nam tempor finibus lorem, nec varius arcu convallis sed. Nunc id
+                orci a neque vehicula malesuada. Donec vehicula libero vel leo
+                convallis, nec tincidunt felis tincidunt. Maecenas euismod
+                tristique leo, vel malesuada ligula malesuada sed.
+              </div>
+            ),
+          },
+          {
+            menuItem: 'Other hazards',
+            render: () => (
+              <div>
+                Nam tempor finibus lorem, nec varius arcu convallis sed. Nunc id
+                orci a neque vehicula malesuada. Donec vehicula libero vel leo
+                convallis, nec tincidunt felis tincidunt. Maecenas euismod
+                tristique leo, vel malesuada ligula malesuada sed.
+              </div>
+            ),
+          },
+        ]}
+      />
+    </Tab.Pane>
+  );
+};
+
+export default AssessmentTab;

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Tab } from 'semantic-ui-react';
+import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import AccordionList from './../AccordionList';
+import StatisticsSection from './../StatisticsSection';
+import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
+import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
+
+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',
+    },
+  ];
+
+  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>
+      </Callout>
+
+      <StatisticsSection statistics={statisticsData} />
+
+      <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.',
+          },
+        ]}
+      />
+
+      <h3>Opportunities and benefits of climate action</h3>
+
+      <HTMLField value={{ data: formatTextToHTML(result?.Describe) }} />
+
+      <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.',
+          },
+        ]}
+      />
+    </Tab.Pane>
+  );
+};
+
+export default GovernanceTab;