@eeacms/volto-cca-policy 0.3.14 → 0.3.16

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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.16](https://github.com/eea/volto-cca-policy/compare/0.3.15...0.3.16) - 17 March 2025
+
+#### :rocket: New Features
+
+- feat(block): add mission signatories profile block [kreafox - [`818f2ee`](https://github.com/eea/volto-cca-policy/commit/818f2eee63310c8d461fefc0d973882768a71fdb)]
+
+#### :bug: Bug Fixes
+
+- fix: multiple semantic-ui-react imports [kreafox - [`b73246f`](https://github.com/eea/volto-cca-policy/commit/b73246f05a49c94ff8cf6063c28fb597ee4e73b9)]
+
+#### :hammer_and_wrench: Others
+
+- test: increase coverage [kreafox - [`7c501ed`](https://github.com/eea/volto-cca-policy/commit/7c501ed316d845b17b1787bd124bf89a44495c9a)]
+- make block available on mission [kreafox - [`2059222`](https://github.com/eea/volto-cca-policy/commit/2059222f1ff962bc8c8c84e8b06c6018fd058d47)]
+### [0.3.15](https://github.com/eea/volto-cca-policy/compare/0.3.14...0.3.15) - 6 March 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-globalsearch@2.0.9 [EEA Jenkins - [`4ec7cea`](https://github.com/eea/volto-cca-policy/commit/4ec7ceaad21b2fc3a7ce9474f91142934350a63e)]
+- Release @eeacms/volto-searchlib@2.0.13 [EEA Jenkins - [`37a98dd`](https://github.com/eea/volto-cca-policy/commit/37a98ddb1709bc7925124d2b841f99659e729b21)]
+
 ### [0.3.14](https://github.com/eea/volto-cca-policy/compare/0.3.13...0.3.14) - 6 March 2025
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -32,10 +32,10 @@
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "^1.35.0",
     "@eeacms/volto-embed": "^9.1.1",
-    "@eeacms/volto-globalsearch": "2.0.8",
+    "@eeacms/volto-globalsearch": "2.0.9",
     "@eeacms/volto-hero-block": "^7.1.0",
     "@eeacms/volto-openlayers-map": "*",
-    "@eeacms/volto-searchlib": "2.0.12",
+    "@eeacms/volto-searchlib": "2.0.13",
     "@eeacms/volto-slate-label": "^0.6.0",
     "@eeacms/volto-tabs-block": "^7.5.1",
     "@elastic/search-ui": "1.21.2",

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { TabPane, Tab } from 'semantic-ui-react';
-import { Accordion, Icon } from 'semantic-ui-react';
+import { TabPane, Tab, Accordion, Icon } from 'semantic-ui-react';
 import CountryTabPane from './CountryTabPane';
 
 import './styles.less';

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

@@ -0,0 +1,28 @@
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import MissionSignatoriesProfile from './MissionSignatoriesProfileView';
+import schema from './schema';
+
+export default function Edit(props) {
+  const { block, data, onChangeBlock, selected } = props;
+  return (
+    <>
+      <MissionSignatoriesProfile {...props} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+}

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  Tab,
+  AccordionTitle,
+  AccordionContent,
+  Accordion,
+  Icon,
+} from 'semantic-ui-react';
+import { Callout } from '@eeacms/volto-eea-design-system/ui';
+
+export default function 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);
+  }
+
+  return (
+    <>
+      <div>
+        {/* {
+          dataJson['Cooperation_Experience'][0][
+            'DescribeDetailCooperationEnhance'
+          ]
+        } */}
+        <h1>{result?.Signatory}</h1>
+        <Tab
+          menu={{
+            fluid: true,
+            className: 'secondary',
+            vertical: true,
+            pointing: true,
+          }}
+          grid={{ paneWidth: 9, tabWidth: 3, stackable: true }}
+          onTabChange={() => {}}
+          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>
+              ),
+            },
+            {
+              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>
+              ),
+            },
+            {
+              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>
+              ),
+            },
+            {
+              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>
+              ),
+            },
+            {
+              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>
+              ),
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/src/components/manage/Blocks/MissionSignatoriesProfile/MissionSignatoriesProfileView.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent } from '@testing-library/react';
+import MissionSignatoriesProfileView from './MissionSignatoriesProfileView';
+
+describe('MissionSignatoriesProfileView', () => {
+  it('should render the component with data', () => {
+    const data = {
+      _v_results: [
+        {
+          Signatory: 'Test Signatory',
+          Describe: 'Test description',
+          Provide: 'Test evidence',
+        },
+      ],
+    };
+
+    const { getByText } = render(<MissionSignatoriesProfileView data={data} />);
+
+    expect(getByText('Test Signatory')).toBeInTheDocument();
+    expect(getByText('Governance')).toBeInTheDocument();
+    expect(getByText('Assessment')).toBeInTheDocument();
+    expect(getByText('Planning')).toBeInTheDocument();
+    expect(getByText('Action Pages')).toBeInTheDocument();
+  });
+
+  it('should render tabs and switch content', () => {
+    const data = {
+      _v_results: [
+        {
+          Signatory: 'Test Signatory',
+        },
+      ],
+    };
+
+    const { getByText } = render(<MissionSignatoriesProfileView data={data} />);
+    const governanceTab = getByText('Governance');
+    fireEvent.click(governanceTab);
+    expect(
+      getByText('Opportunities and benefits of climate action'),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,25 @@
+import MissionSignatoriesProfileEdit from './MissionSignatoriesProfileEdit';
+import MissionSignatoriesProfileView from './MissionSignatoriesProfileView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
+import worldSVG from '@plone/volto/icons/world.svg';
+
+export default function installMissionSignatoriesProfileBlock(config) {
+  config.blocks.blocksConfig.missionSignatoriesProfile = {
+    id: 'missionSignatoriesProfile',
+    title: 'Mission Signatories Profile',
+    icon: worldSVG,
+    group: 'site',
+    edit: MissionSignatoriesProfileEdit,
+    view: MissionSignatoriesProfileView,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
+  };
+
+  return config;
+}

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

@@ -0,0 +1,18 @@
+export default {
+  title: 'Mission Signatories Profile',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['profile_id'],
+    },
+  ],
+  properties: {
+    profile_id: {
+      title: 'Profile ID',
+      type: 'number',
+      default: '54403',
+    },
+  },
+  required: [],
+};

package/src/components/manage/Blocks/index.js

@@ -22,6 +22,7 @@ import installTabsBlock from './TabsBlock';
 import installRedirectBlock from './RedirectBlock';
 import installContentLinks from './ContentLinks';
 import installASTNavigation from './ASTNavigation';
+import installMissionSignatoriesProfileBlock from './MissionSignatoriesProfile';
 
 export default function installBlocks(config) {
   config.blocks.blocksConfig.title.restricted = false;
@@ -53,5 +54,6 @@ export default function installBlocks(config) {
     installRedirectBlock,
     installContentLinks,
     installASTNavigation,
+    installMissionSignatoriesProfileBlock,
   )(config);
 }

package/src/utils.js

@@ -1,7 +1,7 @@
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 export const blockAvailableInMission = (properties, block) => {
-  const missionBlocks = ['mkh_map', 'rastBlock'];
+  const missionBlocks = ['mkh_map', 'rastBlock', 'missionSignatoriesProfile'];
   const id = properties?.['@id'];
 
   if (!id) {

package/theme/globals/mission.less

@@ -35,6 +35,13 @@ body.view-viewview.contenttype-subsite.section-mission
 }
 
 body.subsite-mkh {
+  --text-color-secondary: @green-5;
+  --border-color-secondary: @green-5;
+
+  .column > .ui.segment {
+    background-color: transparent;
+  }
+
   &.subsite-root {
     .content-area {
       padding: 0 !important;
@@ -86,6 +93,15 @@ body.subsite-mkh {
     background: @green-1;
   }
 
+  .ui.statistics:not(.inverted) .ui.statistic .slate.secondary {
+    color: @green-5;
+  }
+
+  .ui.secondary.pointing.menu .active.item {
+    color: @green-5;
+    border-color: @green-5;
+  }
+
   #mega-menu {
     .ui.accordion .title i,
     .ui.accordion button.title i {