@eeacms/volto-cca-policy 1.0.6 → 1.0.8

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

@@ -19,22 +19,19 @@ jest.mock('@eeacms/volto-cca-policy/components', () => ({
       ))}
     </div>
   ),
-  PortalMessage: () => <div data-testid="portal-message" />,
-  ShareInfoButton: () => <div data-testid="share-info" />,
-}));
-
-jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
+  ContentBannerTitle: () => <div data-testid="banner-title" />,
+  ContentMetadata: () => <div data-testid="content-metadata" />,
   HTMLField: ({ value, className }) => (
     <div data-testid={className ? `html-${className}` : 'html-field'}>
       {value?.data ?? value ?? ''}
     </div>
   ),
-  ContentMetadata: () => <div data-testid="content-metadata" />,
-  PublishedModifiedInfo: () => <div data-testid="published-modified" />,
-  BannerTitle: () => <div data-testid="banner-title" />,
   LinksList: ({ value }) => (
     <div data-testid="links-list">{(value || []).join(',')}</div>
   ),
+  PortalMessage: () => <div data-testid="portal-message" />,
+  PublishedModifiedInfo: () => <div data-testid="published-modified" />,
+  ShareInfoButton: () => <div data-testid="share-info" />,
 }));
 
 jest.mock('@eeacms/volto-eea-design-system/ui', () => ({

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import spinner from '@eeacms/volto-cca-policy/../theme//assets/images/spinner.svg';
 import {
+  ContentBannerTitle,
+  ContentMetadata,
   HTMLField,
-  BannerTitle,
   LogoWrapper,
-  ContentMetadata,
-} from '@eeacms/volto-cca-policy/helpers';
+  PortalMessage,
+} from '@eeacms/volto-cca-policy/components';
 import {
   Icon,
   Grid,
@@ -15,7 +16,6 @@ import {
   Container,
   Accordion,
 } from 'semantic-ui-react';
-import { PortalMessage } from '@eeacms/volto-cca-policy/components';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
@@ -215,7 +215,7 @@ function C3SIndicatorView(props) {
 
   return (
     <div className="db-item-view c3sindicator-view">
-      <BannerTitle
+      <ContentBannerTitle
         content={{ ...content, image: '' }}
         data={{
           info: [{ description: '' }],

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

@@ -1,16 +1,14 @@
 import {
-  ImageGallery,
-  PortalMessage,
-  ShareInfoButton,
-} from '@eeacms/volto-cca-policy/components';
-import {
-  BannerTitle,
+  ContentBannerTitle,
   ContentMetadata,
   DocumentsList,
   HTMLField,
+  ImageGallery,
   LinksList,
+  PortalMessage,
   PublishedModifiedInfo,
-} from '@eeacms/volto-cca-policy/helpers';
+  ShareInfoButton,
+} from '@eeacms/volto-cca-policy/components';
 import React, { Fragment } from 'react';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -360,7 +358,7 @@ function CaseStudyView(props) {
 
   return (
     <div className="db-item-view case-study-view">
-      <BannerTitle
+      <ContentBannerTitle
         content={{ ...content, image: '' }}
         data={{
           info: [{ description: '' }],

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { Grid, Container, Segment } from 'semantic-ui-react';
 import {
-  HTMLField,
-  EventDetails,
   DocumentsList,
-} from '@eeacms/volto-cca-policy/helpers';
-import { PortalMessage } from '@eeacms/volto-cca-policy/components';
+  EventDetails,
+  HTMLField,
+  PortalMessage,
+} from '@eeacms/volto-cca-policy/components';
 import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 

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

@@ -3,8 +3,20 @@ import { FormattedMessage } from 'react-intl';
 import { PrivacyProtection } from '@eeacms/volto-embed';
 import { Container, Divider, Grid } from 'semantic-ui-react';
 import {
-  ShareInfoButton,
+  ArchivedVersionListing,
+  ArchivedVersionNotice,
+  ContentBannerTitle,
+  ContentMetadata,
+  ContentRelatedItems,
+  DocumentsList,
+  ExternalLink,
+  HTMLField,
+  ItemLogo,
   PortalMessage,
+  PublishedModifiedInfo,
+  ReferenceInfo,
+  ShareInfoButton,
+  // VersionsGroup, // commented out - relatedItems already shows versions
 } from '@eeacms/volto-cca-policy/components';
 import { fixEmbedURL } from '@eeacms/volto-cca-policy/helpers';
 import {
@@ -17,31 +29,19 @@ import {
   INDICATOR,
   CONTENT_TYPE_LABELS,
 } from '@eeacms/volto-cca-policy/constants';
-import {
-  HTMLField,
-  ReferenceInfo,
-  ContentMetadata,
-  PublishedModifiedInfo,
-  ItemLogo,
-  ContentRelatedItems,
-  DocumentsList,
-  ExternalLink,
-  BannerTitle,
-} from '@eeacms/volto-cca-policy/helpers';
-import {
-  ArchivedVersionNotice,
-  ArchivedVersionListing,
-  // VersionsGroup, // commented out - relatedItems already shows versions
-} from '@eeacms/volto-cca-policy/components';
 
 const SHARE_EEA = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
 
-const MaybeFlourishVisualization = ({ content }) => {
-  const { map_graphs } = content;
+const getVisualizationEmbedCode = (visualization) =>
+  visualization?.embed_code || visualization?.map_graphs || '';
 
+const MaybeFlourishVisualization = ({ visualization }) => {
+  const embedCode = getVisualizationEmbedCode(visualization);
   // https://helpcenter.flourish.studio/hc/en-us/articles/8761537208463-How-to-embed-Flourish-charts-in-your-CMS
-  const flourishPath = getDataSrcFromEmbedCode(map_graphs);
+  const flourishPath = getDataSrcFromEmbedCode(embedCode);
   const flourishUrl = buildFlourishUrl(flourishPath);
+  const height = visualization?.height || '980';
+  const title = visualization?.title || 'Interactive or visual content';
 
   return !!flourishPath ? (
     <PrivacyProtection
@@ -51,10 +51,10 @@ const MaybeFlourishVisualization = ({ content }) => {
       }}
     >
       <iframe
-        height="980"
+        height={height}
         width="100%"
         src={flourishUrl}
-        title="Interactive or visual content"
+        title={title}
         className="flourish-embed-iframe"
         sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
       ></iframe>
@@ -77,10 +77,11 @@ function getFirstIframeSrc(htmlString) {
   }
 }
 
-const MaybeIframeVisualization = ({ content }) => {
-  const { map_graphs, map_graphs_height } = content;
-  const url = getFirstIframeSrc(map_graphs || '');
-  const height = map_graphs_height || 800;
+const MaybeIframeVisualization = ({ visualization }) => {
+  const embedCode = getVisualizationEmbedCode(visualization);
+  const url = getFirstIframeSrc(embedCode);
+  const height = visualization?.height || 800;
+  const title = visualization?.title || 'Interactive or visual content';
   const [isClient, setIsClient] = React.useState();
 
   React.useEffect(() => setIsClient(true), []);
@@ -98,7 +99,7 @@ const MaybeIframeVisualization = ({ content }) => {
         height={height}
         width="100%"
         src={url}
-        title="Interactive or visual content"
+        title={title}
         className="flourish-embed-iframe"
         sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
       ></iframe>
@@ -106,6 +107,43 @@ const MaybeIframeVisualization = ({ content }) => {
   );
 };
 
+const Visualization = ({ visualization }) => (
+  <>
+    {visualization?.title && <h2>{visualization.title}</h2>}
+    <MaybeFlourishVisualization visualization={visualization} />
+    <MaybeIframeVisualization visualization={visualization} />
+  </>
+);
+
+const Visualizations = ({ visualizations }) => (
+  <>
+    {visualizations.map((visualization, index) => (
+      <Visualization
+        key={`visualization-${index}`}
+        visualization={visualization}
+      />
+    ))}
+  </>
+);
+
+const getVisualizations = (content) => {
+  const visualizations = Array.isArray(content?.visualizations)
+    ? content.visualizations.filter((item) => item?.embed_code)
+    : [];
+
+  return content?.map_graphs
+    ? [
+        ...visualizations,
+        {
+          title: '',
+          embed_code: content.map_graphs,
+          height: content.map_graphs_height,
+          full_width: content.map_graphs_full_width,
+        },
+      ]
+    : visualizations;
+};
+
 const BottomInfo = (props) => {
   const { content } = props;
   const { organisational_websites, organisational_contact_information } =
@@ -161,9 +199,14 @@ const DatabaseItemView = (props) => {
   } = content;
   const item_title = acronym ? title + ' (' + acronym + ')' : title;
   const subtitle = CONTENT_TYPE_LABELS[type] ?? '';
-  const hasVisualization = !!content?.map_graphs?.length;
-  const isFullWidthVisualization =
-    hasVisualization && content?.map_graphs_full_width;
+  const visualizations = getVisualizations(content);
+  const columnVisualizations = visualizations.filter(
+    (visualization) => !visualization.full_width,
+  );
+  const fullWidthVisualizations = visualizations.filter(
+    (visualization) => visualization.full_width,
+  );
+  const hasFullWidthVisualizations = !!fullWidthVisualizations.length;
 
   const is_cmshare_video = SHARE_EEA.some((domain) =>
     content?.embed_url?.includes(domain),
@@ -171,7 +214,7 @@ const DatabaseItemView = (props) => {
 
   return (
     <div className="db-item-view">
-      <BannerTitle
+      <ContentBannerTitle
         content={{ ...content, image: '', title: item_title }}
         data={{
           info: [{ description: '' }],
@@ -256,14 +299,11 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              {hasVisualization && !isFullWidthVisualization && (
-                <>
-                  <MaybeFlourishVisualization {...props} />
-                  <MaybeIframeVisualization {...props} />
-                </>
+              {!!columnVisualizations.length && (
+                <Visualizations visualizations={columnVisualizations} />
               )}
 
-              {!isFullWidthVisualization && <BottomInfo {...props} />}
+              {!hasFullWidthVisualizations && <BottomInfo {...props} />}
             </Grid.Column>
 
             <Grid.Column
@@ -277,12 +317,11 @@ const DatabaseItemView = (props) => {
             </Grid.Column>
           </Grid.Row>
 
-          {isFullWidthVisualization && (
+          {hasFullWidthVisualizations && (
             <>
               <Grid.Row>
                 <Grid.Column mobile={12} tablet={12} computer={12}>
-                  <MaybeFlourishVisualization {...props} />
-                  <MaybeIframeVisualization {...props} />
+                  <Visualizations visualizations={fullWidthVisualizations} />
                 </Grid.Column>
               </Grid.Row>
               <Grid.Row>

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

@@ -17,6 +17,58 @@ config.blocks = {
 
 const mockStore = configureStore();
 
+const baseContent = {
+  title: 'My DatabaseItemView',
+  long_description: {
+    'content-type': null,
+    data: '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
+    encoding: 'utf-8',
+  },
+  publication_date: '2022-06-24',
+  geochars:
+    '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
+  keywords: ['keyword 1', 'keyword 2'],
+  websites: ['https://example.org/'],
+  contributions: [
+    {
+      title: 'Contributor 1',
+      url: '/contributor-1',
+    },
+    {
+      title: 'Contributor 2',
+      url: '/contributor-2',
+    },
+  ],
+};
+
+const visualizationEmbedCode =
+  '<div class="flourish-embed" data-src="visualisation/12345"></div>';
+
+const renderDatabaseItemView = (content = baseContent) => {
+  const store = mockStore({
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  return renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <DatabaseItemView content={content} />
+      </MemoryRouter>
+    </Provider>,
+  );
+};
+
+const findColumnByClassName = (component, className) =>
+  component.root.findAll(
+    (node) =>
+      typeof node.props.className === 'string' &&
+      node.props.className.includes(className),
+  )[0];
+
 jest.mock('semantic-ui-react', () => ({
   ...jest.requireActual('semantic-ui-react'),
 }));
@@ -29,46 +81,54 @@ jest.mock('@eeacms/volto-embed', () => {
 
 describe('DatabaseItemView', () => {
   it('should render the component', () => {
-    const content = {
-      title: 'My DatabaseItemView',
-      long_description: {
-        'content-type': null,
-        data: '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
-        encoding: 'utf-8',
-      },
-      publication_date: '2022-06-24',
-      geochars:
-        '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
-      keywords: ['keyword 1', 'keyword 2'],
-      websites: ['https://example.org/'],
-      contributions: [
-        {
-          title: 'Contributor 1',
-          url: '/contributor-1',
-        },
-        {
-          title: 'Contributor 2',
-          url: '/contributor-2',
-        },
-      ],
-    };
-
-    const store = mockStore({
-      userSession: { token: '1234' },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
+    const component = renderDatabaseItemView();
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders the visualizations field in the left column by default', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      map_graphs: visualizationEmbedCode,
     });
+    const colLeft = findColumnByClassName(component, 'col-left');
+    const fullWidthColumns = component.root.findAll(
+      (node) => node.props.computer === 12,
+    );
 
-    const component = renderer.create(
-      <Provider store={store}>
-        <MemoryRouter>
-          <DatabaseItemView content={content} />
-        </MemoryRouter>
-      </Provider>,
+    expect(colLeft.findAllByType('iframe')).toHaveLength(1);
+    expect(component.root.findByType('iframe').props.src).toBe(
+      'https://flo.uri.sh/visualisation/12345/embed',
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(fullWidthColumns).toHaveLength(0);
+  });
+
+  it('renders the visualizations field full width when enabled', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      map_graphs: visualizationEmbedCode,
+      map_graphs_full_width: true,
+    });
+    const colLeft = findColumnByClassName(component, 'col-left');
+    const fullWidthColumn = component.root.findAll(
+      (node) => node.props.computer === 12,
+    )[0];
+
+    expect(colLeft.findAllByType('iframe')).toHaveLength(0);
+    expect(fullWidthColumn.findAllByType('iframe')).toHaveLength(1);
+  });
+
+  it('does not render a visualization when the visualizations field is empty', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      map_graphs: '',
+      map_graphs_full_width: true,
+    });
+
+    expect(component.root.findAllByType('iframe')).toHaveLength(0);
+    const fullWidthColumns = component.root.findAll(
+      (node) => node.props.computer === 12,
+    );
+    expect(fullWidthColumns).toHaveLength(0);
   });
 });

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

@@ -2,12 +2,12 @@ import React from 'react';
 import { Grid, Container, Segment } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import {
-  SubjectTags,
   EventDetails,
   HTMLField,
-} from '@eeacms/volto-cca-policy/helpers';
+  PortalMessage,
+  SubjectTags,
+} from '@eeacms/volto-cca-policy/components';
 import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
-import { PortalMessage } from '@eeacms/volto-cca-policy/components';
 
 function EventView(props) {
   const { content } = props;

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

@@ -1,17 +1,15 @@
 import { Button, Container, Grid, Icon } from 'semantic-ui-react';
 import {
+  BooleanField,
   CompareToolsPanel,
-  PortalMessage,
-} from '@eeacms/volto-cca-policy/components';
-import {
+  ContentMetadata,
+  DocumentsList,
   HTMLField,
+  ItemLogo,
+  PortalMessage,
   TextField,
-  BooleanField,
   VocabularyField,
-  ContentMetadata,
-  ItemLogo,
-  DocumentsList,
-} from '@eeacms/volto-cca-policy/helpers';
+} from '@eeacms/volto-cca-policy/components';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 import { useCompareTools } from '../CompareTools/utils';

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

@@ -12,14 +12,19 @@ jest.mock('../CompareTools/utils', () => ({
 }));
 
 jest.mock('@eeacms/volto-cca-policy/components', () => ({
+  BooleanField: ({ label, value, yesLabel, noLabel }) => (
+    <div>
+      <span>{label}</span>
+      <span>{value ? yesLabel : noLabel}</span>
+    </div>
+  ),
   CompareToolsPanel: () => <div data-testid="compare-tools-panel" />,
-  PortalMessage: () => <div data-testid="portal-message" />,
-}));
-
-jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
+  ContentMetadata: () => <div data-testid="content-metadata" />,
+  DocumentsList: () => <div data-testid="documents-list" />,
   HTMLField: ({ value }) =>
     value ? <div dangerouslySetInnerHTML={{ __html: value }} /> : null,
-
+  ItemLogo: () => <div data-testid="item-logo" />,
+  PortalMessage: () => <div data-testid="portal-message" />,
   TextField: ({ label, value }) =>
     value !== null && value !== undefined && value !== '' ? (
       <div>
@@ -28,13 +33,6 @@ jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
       </div>
     ) : null,
 
-  BooleanField: ({ label, value, yesLabel, noLabel }) => (
-    <div>
-      <span>{label}</span>
-      <span>{value ? yesLabel : noLabel}</span>
-    </div>
-  ),
-
   VocabularyField: ({ label, values = [], asList }) =>
     values.length > 0 ? (
       <div>
@@ -50,10 +48,6 @@ jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
         )}
       </div>
     ) : null,
-
-  ContentMetadata: () => <div data-testid="content-metadata" />,
-  ItemLogo: () => <div data-testid="item-logo" />,
-  DocumentsList: () => <div data-testid="documents-list" />,
 }));
 
 jest.mock('@plone/volto/registry', () => ({

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/MissionSignatoryProfileView.jsx

@@ -2,7 +2,10 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Tab, Container, Divider, Button, Icon } from 'semantic-ui-react';
 import { formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
-import { BannerTitle, HTMLField } from '@eeacms/volto-cca-policy/helpers';
+import {
+  ContentBannerTitle,
+  HTMLField,
+} from '@eeacms/volto-cca-policy/components';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 import GovernanceTab from './TabSections/GovernanceTab';
@@ -55,7 +58,7 @@ const MissionSignatoryProfileView = ({ content }) => {
 
   return (
     <Container>
-      <BannerTitle
+      <ContentBannerTitle
         content={{ ...content, image: signatoryData?.image }}
         data={{
           info: [{ description: '' }],

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/MissionSignatoryProfileView.test.jsx

@@ -12,8 +12,8 @@ jest.mock('./TabSections/AssessmentTab', () => () => (
 jest.mock('./TabSections/PlanningTab', () => () => <div>Mocked Planning</div>);
 jest.mock('./TabSections/ActionTab', () => () => <div>Mocked Action</div>);
 
-jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
-  BannerTitle: ({ children }) => <div>{children}</div>,
+jest.mock('@eeacms/volto-cca-policy/components', () => ({
+  ContentBannerTitle: ({ children }) => <div>{children}</div>,
   HTMLField: ({ value }) => (
     <div dangerouslySetInnerHTML={{ __html: value?.data }} />
   ),

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/TabSections/ActionTab.jsx

@@ -1,7 +1,6 @@
 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 { AccordionList } from '@eeacms/volto-cca-policy/components';
+import { AccordionList, HTMLField } from '@eeacms/volto-cca-policy/components';
 import { formatTextToHTML, isEmpty } from '@eeacms/volto-cca-policy/utils';
 import NoDataReported from '../NoDataReported';
 import ItemsSection from '../ItemsSection';

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/TabSections/ActionTab.test.jsx

@@ -23,6 +23,9 @@ jest.mock('@eeacms/volto-cca-policy/components', () => ({
       ))}
     </div>
   ),
+  HTMLField: ({ value }) => (
+    <div dangerouslySetInnerHTML={{ __html: value?.data }} />
+  ),
 }));
 
 describe('ActionTab', () => {

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/TabSections/AssessmentTab.jsx

@@ -1,7 +1,6 @@
 import { Tab, Segment } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
-import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
-import { AccordionList } from '@eeacms/volto-cca-policy/components';
+import { AccordionList, HTMLField } from '@eeacms/volto-cca-policy/components';
 import { isEmpty, formatTextToHTML } from '@eeacms/volto-cca-policy/utils';
 import NoDataReported from '../NoDataReported';
 import ItemsSection from '../ItemsSection';

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/TabSections/AssessmentTab.test.jsx

@@ -6,7 +6,17 @@ jest.mock('@eeacms/volto-eea-design-system/ui', () => ({
   Callout: ({ children }) => <div>{children}</div>,
 }));
 
-jest.mock('@eeacms/volto-cca-policy/helpers', () => ({
+jest.mock('@eeacms/volto-cca-policy/components', () => ({
+  AccordionList: ({ accordions }) => (
+    <div>
+      {accordions.map((item, index) => (
+        <div key={index}>
+          <div>{item.title}</div>
+          <div>{item.content}</div>
+        </div>
+      ))}
+    </div>
+  ),
   HTMLField: ({ value }) => <div>{value.data}</div>,
 }));
 

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/TabSections/GovernanceTab.jsx

@@ -1,8 +1,7 @@
 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 '@eeacms/volto-cca-policy/components';
+import { AccordionList, HTMLField } from '@eeacms/volto-cca-policy/components';
 import StatisticSection from '../StatisticSection';
 
 const GovernanceTab = ({ result, general_text }) => {

package/src/components/theme/{MissionSignatoryProfile → Views/MissionSignatoryProfile}/TabSections/PlanningTab.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Tab, Message, Segment, Grid } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
-import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import {
   isEmpty,
   formatTextToHTML,
   extractPlanNameAndURL,
 } from '@eeacms/volto-cca-policy/utils';
-import { AccordionList } from '@eeacms/volto-cca-policy/components';
+import { AccordionList, HTMLField } from '@eeacms/volto-cca-policy/components';
 import NoDataReported from '../NoDataReported';
 import ItemsSection from '../ItemsSection';