@eeacms/volto-cca-policy 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -4,6 +4,28 @@ 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.2.6](https://github.com/eea/volto-cca-policy/compare/0.2.5...0.2.6) - 17 April 2024
+
+#### :rocket: New Features
+
+- feat(view): add MissionToolView for mission_tool content type - Refs #268126 [kreafox - [`598f038`](https://github.com/eea/volto-cca-policy/commit/598f038b17754d272424a04e45ebc2b41766d724)]
+
+#### :bug: Bug Fixes
+
+- fix(view): fix condition in MissionFundingView [kreafox - [`45f8741`](https://github.com/eea/volto-cca-policy/commit/45f87418982cad2ec33d72a3bacb907ff39a6336)]
+
+#### :nail_care: Enhancements
+
+- change(view): use semantic List [kreafox - [`3cba130`](https://github.com/eea/volto-cca-policy/commit/3cba130f2c9cf3d39e8131b04beca5750affe73f)]
+- change(view): use MetadataItemList [kreafox - [`a501d41`](https://github.com/eea/volto-cca-policy/commit/a501d413ceb4a78bfdfe38eaaaec38d93eddb7f7)]
+- change(view): use MetadataItemList instead of ItemsList [kreafox - [`df2a28d`](https://github.com/eea/volto-cca-policy/commit/df2a28da12a37252e745ac87984eedea2701e16f)]
+
+#### :hammer_and_wrench: Others
+
+- test: update snapshot [kreafox - [`a8589e3`](https://github.com/eea/volto-cca-policy/commit/a8589e32cd506eae790cde287fbdf82fa0e29012)]
+- test: reduce duplicated code , move disclaimer to separate component - Refs #268126 [kreafox - [`3ae3d09`](https://github.com/eea/volto-cca-policy/commit/3ae3d09ebdf6b32ef858051eb08d8088bec89d23)]
+- test: add tests for Mission Tool content type [kreafox - [`5214c0f`](https://github.com/eea/volto-cca-policy/commit/5214c0f58646956055f10a07da8acf72398b6e29)]
+- test: update snapshots [kreafox - [`8ce574c`](https://github.com/eea/volto-cca-policy/commit/8ce574cdf17edfe72ece2e4cc59d984746693f03)]
 ### [0.2.5](https://github.com/eea/volto-cca-policy/compare/0.2.4...0.2.5) - 15 April 2024
 
 #### :rocket: New Features

package/package.json

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

package/src/components/index.js

@@ -4,3 +4,6 @@ export PortalMessage from './theme/PortalMessage/PortalMessage';
 export TranslationDisclaimer from './theme/TranslationDisclaimer/TranslationDisclaimer';
 export ShareInfoButton from './theme/ShareInfoButton/ShareInfoButton';
 export ASTNavigation from './theme/ASTNavigation/ASTNavigation';
+
+export { default as MissionToolView } from './theme/Views/MissionToolView';
+export { default as MissionDisclaimer } from './theme/MissionDisclaimer/MissionDisclaimer';

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

@@ -6,9 +6,10 @@ import CountryTabPane from './CountryTabPane';
 import './styles.less';
 
 export default function View(props) {
-  const dataJson = JSON.parse(
-    props?.properties['@components']?.countryprofile?.html,
-  );
+  // const dataJson = JSON.parse(
+  //   props?.properties['@components']?.countryprofile?.html,
+  // );
+  const dataJson = props?.properties['@components']?.countryprofile?.html;
   const [activePanes, setActivePanes] = React.useState({});
 
   const panes = [];
@@ -35,8 +36,9 @@ export default function View(props) {
       {dataJson.message_top ? (
         <div class="eea callout">{dataJson.message_top}</div>
       ) : null}
-      {dataJson.top_accordeon
-        ? dataJson.top_accordeon.map((accordion, index) => (
+      {dataJson.top_accordeon ? (
+        <div className="top-accordion">
+          {dataJson.top_accordeon.map((accordion, index) => (
             <Accordion className="secondary">
               <Accordion.Title
                 role="button"
@@ -57,8 +59,9 @@ export default function View(props) {
                 dangerouslySetInnerHTML={{ __html: accordion.value }}
               ></Accordion.Content>
             </Accordion>
-          ))
-        : null}
+          ))}
+        </div>
+      ) : null}
       <Tab
         className="secondary menu"
         panes={panes}
@@ -73,7 +76,9 @@ export default function View(props) {
           tabIndex: 0,
         }}
       />
-      {dataJson.updated ? <p>Last updated:{dataJson.updated}</p> : null}
+      {dataJson.updated ? (
+        <p>Reported updated until: {dataJson.updated}</p>
+      ) : null}
     </>
   );
 }

package/src/components/manage/Blocks/CountryProfileDetail/styles.less

@@ -1,8 +1,12 @@
 .section-countries-regions.section-countries {
-  .secondary.menu a {
+  .secondary.menu > a {
     text-transform: uppercase;
   }
 
+  .top-accordion {
+    margin-bottom: 40px;
+  }
+
   .ui.segment.active.tab > table {
     margin-top: 0px !important;
   }

package/src/components/manage/Blocks/RASTBlock/RASTMap.jsx

@@ -21,8 +21,10 @@ export default function RASTMap(props) {
   const { path, pathname, activeMenu, skip_items } = props;
   const currentPath = path || pathname;
 
-  const items = props.items;
   let data = skip_items.split(',');
+  const items = props.items.filter(
+    (_item, index) => !data.includes(index.toString()),
+  );
   let currentMenu = activeMenu;
 
   if (activeMenu !== null) {

package/src/components/theme/MissionDisclaimer/MissionDisclaimer.jsx

@@ -0,0 +1,24 @@
+const MissionDisclaimer = () => {
+  return (
+    <div className="styled-slate has--style_name--content-box-gray styled">
+      <div className="disclaimer content-box">
+        <div className="content-box-inner">
+          <p>
+            <strong>Disclaimer</strong>
+            <br />
+            The contents and links to third-party items on this Mission webpage
+            are developed by the MIP4Adapt team led by Ricardo, under contract
+            CINEA/2022/OP/0013/SI2.884597 funded by the European Union and do
+            not necessarily reflect those of the European Union, CINEA, or those
+            of the European Environment Agency (EEA) as host of the
+            Climate-ADAPT Platform. Neither the European Union nor CINEA nor the
+            EEA accepts responsibility or liability arising out of or in
+            connection with the information on these pages.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MissionDisclaimer;

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

@@ -1,13 +1,19 @@
-import { HTMLField, BannerTitle } from '@eeacms/volto-cca-policy/helpers';
-import { Container, Grid } from 'semantic-ui-react';
-import { PortalMessage } from '@eeacms/volto-cca-policy/components';
-import './styles.less';
+import {
+  HTMLField,
+  BannerTitle,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
+import { Container, Grid, Segment, List } from 'semantic-ui-react';
+import {
+  PortalMessage,
+  MissionDisclaimer,
+} from '@eeacms/volto-cca-policy/components';
 
 function MissiongFundingCCAView(props) {
   const { content } = props;
 
   return (
-    <div className="mission-funding-cca-view">
+    <div className="mission-item-view">
       <BannerTitle
         content={{ ...content, image: '' }}
         data={{
@@ -99,7 +105,7 @@ function MissiongFundingCCAView(props) {
               computer={4}
               className="col-right"
             >
-              <div className="metadata">
+              <Segment className="metadata">
                 {!!content.country && content.country.length > 0 && (
                   <>
                     <h5>Countries where the funding opportunity is offered</h5>
@@ -119,69 +125,32 @@ function MissiongFundingCCAView(props) {
                 {!!content.rast_steps && content.rast_steps.length > 0 && (
                   <>
                     <h5>RAST step(s) of relevance</h5>
-                    <ul>
-                      {content.rast_steps.map((step) => (
-                        <li>{step.title}</li>
+                    <List>
+                      {content.rast_steps.map((step, index) => (
+                        <List.Item key={index}>{step.title}</List.Item>
                       ))}
-                    </ul>
+                    </List>
                   </>
                 )}
                 {!!content.eligible_entities &&
                   content.eligible_entities.length > 0 && (
                     <>
                       <h5>Eligible to receive funding</h5>
-                      <ul>
-                        {content.eligible_entities.map((entity) => (
-                          <li>{entity.title}</li>
-                        ))}
-                      </ul>
+                      <MetadataItemList value={content.eligible_entities} />
                     </>
                   )}
-                {!!content.sectors && content.eligible_entities.length > 0 && (
+                {!!content.sectors && content.sectors.length > 0 && (
                   <>
                     <h5>Adaptation Sectors</h5>
-                    <ul>
-                      {content.sectors.map((sector) => (
-                        <li>{sector.title}</li>
-                      ))}
-                    </ul>
+                    <MetadataItemList value={content.sectors} />
                   </>
                 )}
-              </div>
-            </Grid.Column>
-          </div>
-        </Grid>
-        <Grid columns="12">
-          <div className="row">
-            <Grid.Column
-              mobile={12}
-              tablet={12}
-              computer={12}
-              className="col-full"
-            >
-              <div className="styled-slate has--style_name--content-box-gray styled">
-                <div className="disclaimer content-box">
-                  <div className="content-box-inner">
-                    <p>
-                      <strong>Disclaimer</strong>
-                      <br />
-                      The contents and links to third-party items on this
-                      Mission webpage are developed by the MIP4Adapt team led by
-                      Ricardo, under contract CINEA/2022/OP/0013/SI2.884597
-                      funded by the European Union and do not necessarily
-                      reflect those of the European Union, CINEA, or those of
-                      the European Environment Agency (EEA) as host of the
-                      Climate-ADAPT Platform. Neither the European Union nor
-                      CINEA nor the EEA accepts responsibility or liability
-                      arising out of or in connection with the information on
-                      these pages.
-                    </p>
-                  </div>
-                </div>
-              </div>
+              </Segment>
             </Grid.Column>
           </div>
         </Grid>
+
+        <MissionDisclaimer />
       </Container>
     </div>
   );

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

@@ -99,8 +99,6 @@ describe('MissiongFundingCCAView', () => {
         </MemoryRouter>
       </Provider>,
     );
-    expect(
-      container.querySelector('.mission-funding-cca-view'),
-    ).toBeInTheDocument();
+    expect(container.querySelector('.mission-item-view')).toBeInTheDocument();
   });
 });

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

@@ -0,0 +1,226 @@
+import React from 'react';
+import {
+  HTMLField,
+  BannerTitle,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
+import { Container, Grid, Image, Segment, List } from 'semantic-ui-react';
+import {
+  PortalMessage,
+  MissionDisclaimer,
+} from '@eeacms/volto-cca-policy/components';
+
+function MissionToolView(props) {
+  const { content } = props;
+
+  return (
+    <div className="mission-item-view">
+      <BannerTitle
+        content={{ ...content, image: '' }}
+        data={{
+          info: [{ description: '' }],
+          hideContentType: true,
+          hideCreationDate: false,
+          hideModificationDate: false,
+          hidePublishingDate: false,
+          hideDownloadButton: false,
+          hideShareButton: false,
+        }}
+      />
+
+      <Container>
+        <PortalMessage content={content} />
+        <Grid columns="12">
+          <div className="row">
+            <Grid.Column
+              mobile={12}
+              tablet={12}
+              computer={8}
+              className="col-left"
+            >
+              {!!content.objective && (
+                <>
+                  <h2>Objective(s)</h2>
+                  <HTMLField value={content.objective} />
+                </>
+              )}
+
+              {!!content.short_description && (
+                <>
+                  <h2>Short description</h2>
+                  <HTMLField value={content.short_description} />
+                </>
+              )}
+
+              {!!content.free_keywords && (
+                <>
+                  <h2>Free keywords</h2>
+                  <HTMLField value={content.free_keywords} />
+                </>
+              )}
+
+              {!!content.readiness_for_use &&
+                content.readiness_for_use.length > 0 && (
+                  <>
+                    <h2>Readiness for use</h2>
+
+                    <MetadataItemList value={content.readiness_for_use} />
+                  </>
+                )}
+
+              {!!content.applications && (
+                <>
+                  <h2>Applications</h2>
+                  <HTMLField value={content.applications} />
+                </>
+              )}
+
+              {!!content.strengths_weaknesses && (
+                <>
+                  <h2>
+                    Strengths and weaknesses, comparative added value to other
+                    similar tools
+                  </h2>
+                  <HTMLField value={content.strengths_weaknesses} />
+                </>
+              )}
+
+              {!!content.input && (
+                <>
+                  <h2>Input(s)</h2>
+                  <HTMLField value={content.input} />
+                </>
+              )}
+
+              {!!content.output && (
+                <>
+                  <h3>Output(s)</h3>
+                  <HTMLField value={content.output} />
+                </>
+              )}
+
+              {!!content.output_image && (
+                <Image
+                  src={content.output_image?.scales?.large?.download}
+                  alt={content.title}
+                  style={{ margin: '2.5em 0' }}
+                />
+              )}
+
+              {!!content.replicability && (
+                <>
+                  <h2>Replicability: Cost/effort for (new) usage</h2>
+                  <HTMLField value={content.replicability} />
+                </>
+              )}
+
+              {!!content.materials && (
+                <>
+                  <h2>Materials or other support available</h2>
+                  <HTMLField value={content.materials} />
+                </>
+              )}
+
+              {!!content.website && (
+                <>
+                  <h2>Website and maintenance</h2>
+                  <HTMLField value={content.website} />
+                </>
+              )}
+
+              {!!content.contact && (
+                <>
+                  <h2>Contact</h2>
+                  <HTMLField value={content.contact} />
+                </>
+              )}
+
+              {!!content.associated_project && (
+                <>
+                  <h2>Associated project(s)</h2>
+                  <HTMLField value={content.associated_project} />
+                </>
+              )}
+            </Grid.Column>
+            <Grid.Column
+              mobile={12}
+              tablet={12}
+              computer={4}
+              className="col-right"
+            >
+              <Segment className="metadata">
+                {!!content.rast_steps && content.rast_steps.length > 0 && (
+                  <>
+                    <h5>RAST step(s) of relevance:</h5>
+                    <List>
+                      {content.rast_steps.map((step, index) => (
+                        <List.Item key={index}>{step.title}</List.Item>
+                      ))}
+                    </List>
+                  </>
+                )}
+
+                {!!content.geographical_scale &&
+                  content.geographical_scale.length > 0 && (
+                    <>
+                      <h5>Geographical scale:</h5>
+                      <MetadataItemList value={content.geographical_scale} />
+                    </>
+                  )}
+
+                {!!content.geographical_area && (
+                  <>
+                    <h5>Geographical area:</h5>
+                    <HTMLField value={content.geographical_area} />
+                  </>
+                )}
+
+                {!!content.climate_impacts &&
+                  content.climate_impacts.length > 0 && (
+                    <>
+                      <h5>Climate impacts:</h5>
+                      <MetadataItemList value={content.climate_impacts} />
+                    </>
+                  )}
+
+                {!!content.tool_language && content.tool_language.length > 0 && (
+                  <>
+                    <h5>Language(s) of the tool:</h5>
+                    <MetadataItemList value={content.tool_language} />
+                  </>
+                )}
+
+                {!!content.sectors && content.sectors.length > 0 && (
+                  <>
+                    <h5>Adaptation sectors:</h5>
+                    <MetadataItemList value={content.sectors} />
+                  </>
+                )}
+
+                {!!content.most_useful_for &&
+                  content.most_useful_for.length > 0 && (
+                    <>
+                      <h5>Most useful for:</h5>
+                      <MetadataItemList value={content.most_useful_for} />
+                    </>
+                  )}
+
+                {!!content.user_requirements &&
+                  content.user_requirements.length > 0 && (
+                    <>
+                      <h5>User requirements:</h5>
+                      <MetadataItemList value={content.user_requirements} />
+                    </>
+                  )}
+              </Segment>
+            </Grid.Column>
+          </div>
+        </Grid>
+
+        <MissionDisclaimer />
+      </Container>
+    </div>
+  );
+}
+
+export default MissionToolView;

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

@@ -0,0 +1,154 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import MissionToolView from './MissionToolView';
+import config from '@plone/volto/registry';
+
+config.blocks = {
+  blocksConfig: {
+    title: {
+      view: () => <div>Title Block Component</div>,
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+describe('MissionToolView', () => {
+  it('should render the component', () => {
+    const data = {
+      content: {
+        contributors: [],
+        description: 'Summary',
+        objective: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        short_description: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        free_keywords: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        readiness_for_use: [
+          {
+            title: 'Tool tested in several case studies',
+            token: 'Tool tested in several case studies',
+          },
+          {
+            title: 'Tool broadly used',
+            token: 'Tool broadly used',
+          },
+        ],
+        application: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        strengths_weaknesses: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        input: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        output: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        replicability: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        materials: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        website: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        contact: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        associated_project: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        rast_steps: [
+          {
+            title: 'Step 1. Preparing the ground for adaptation',
+            token: 'STEP_1',
+          },
+          {
+            title: 'Step 4. Assessing and selecting adaptation options',
+            token: 'STEP_4',
+          },
+        ],
+        geographical_scale: [
+          {
+            title: 'Item 1',
+            token: 'Item 1',
+          },
+          {
+            title: 'Item 2',
+            token: 'Item 2',
+          },
+        ],
+        geographical_area: {
+          'content-type': 'text/html',
+          data: '<p></p>',
+          encoding: 'utf8',
+        },
+        sectors: [
+          {
+            title: 'Biodiversity',
+            token: 'BIODIVERSITY',
+          },
+          {
+            title: 'Coastal areas',
+            token: 'COASTAL',
+          },
+        ],
+        title: 'Title here',
+      },
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <MissionToolView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/helpers/ContentMetadata.jsx

@@ -1,3 +1,7 @@
+import { Fragment } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Popup, Segment } from 'semantic-ui-react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import {
   ACE_COUNTRIES,
   BIOREGIONS,
@@ -9,11 +13,10 @@ import {
   INDICATOR,
   PUBICATION_REPORT,
 } from '@eeacms/volto-cca-policy/helpers/Constants';
-import { Fragment } from 'react';
-import { Popup, Segment } from 'semantic-ui-react';
-import { isObservatoryMetadataURL } from '@eeacms/volto-cca-policy/helpers';
-import { useLocation } from 'react-router-dom';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import {
+  isObservatoryMetadataURL,
+  MetadataItemList,
+} from '@eeacms/volto-cca-policy/helpers';
 
 const messages = defineMessages({
   'The date refers to the moment in which the item has been prepared or updated by contributing experts to be submitted for the publication in Climate ADAPT': {
@@ -312,27 +315,8 @@ function PublicationDateInfo(props) {
   ) : null;
 }
 
-function ItemsList(props) {
-  let { value, join } = props;
-  if (join === undefined) {
-    join = ', ';
-  }
-  if (join === '<br />') {
-    return (
-      <span>
-        {value.map((item, index) => (
-          <Fragment key={index}>
-            <span>{item.title}</span>
-            <br />
-          </Fragment>
-        ))}
-      </span>
-    );
-  }
-  return <span>{value.map((item) => item.title).join(join)}</span>;
-}
-
 function ContentMetadata(props) {
+  const intl = useIntl();
   const { content } = props;
   const {
     sectors,
@@ -353,8 +337,6 @@ function ContentMetadata(props) {
   const isObservatoryItem = isObservatoryMetadataURL(location.pathname);
   const hasGeoChars = geochars !== null || spatial_layer.length > 0;
 
-  const intl = useIntl();
-
   let date_title;
   if (type === VIDEO) {
     date_title = intl.formatMessage(messages['Date of release:']);
@@ -387,7 +369,7 @@ function ContentMetadata(props) {
                     defaultMessage="Health impact:"
                   />
                 </h5>
-                <ItemsList value={health_impacts} />
+                <MetadataItemList value={health_impacts} />
               </>
             )}
           </>
@@ -410,7 +392,7 @@ function ContentMetadata(props) {
                 defaultMessage="Key Type Measures:"
               />
             </h5>
-            <ItemsList value={key_type_measures} />
+            <MetadataItemList value={key_type_measures} />
           </>
         )}
 
@@ -422,7 +404,7 @@ function ContentMetadata(props) {
                 defaultMessage="IPCC adaptation options categories:"
               />
             </h5>
-            <ItemsList value={ipcc_category} />
+            <MetadataItemList value={ipcc_category} />
           </>
         )}
 
@@ -436,7 +418,7 @@ function ContentMetadata(props) {
                     defaultMessage="Climate impacts:"
                   />
                 </h5>
-                <ItemsList value={climate_impacts} />
+                <MetadataItemList value={climate_impacts} />
               </>
             )}
 
@@ -448,7 +430,7 @@ function ContentMetadata(props) {
                     defaultMessage="Adaptation elements:"
                   />
                 </h5>
-                <ItemsList value={elements} />
+                <MetadataItemList value={elements} />
               </>
             )}
 
@@ -457,7 +439,7 @@ function ContentMetadata(props) {
                 <h5>
                   <FormattedMessage id="Sectors:" defaultMessage="Sectors:" />
                 </h5>
-                <ItemsList value={sectors} />
+                <MetadataItemList value={sectors} />
               </>
             )}
           </>
@@ -471,7 +453,7 @@ function ContentMetadata(props) {
                 defaultMessage="Governance level:"
               />
             </h5>
-            <ItemsList value={governance_level} join="<br />" />
+            <MetadataItemList value={governance_level} join_type="<br />" />
           </>
         )}
 

package/src/helpers/Utils.jsx

@@ -482,3 +482,26 @@ export const EventDetails = (props) => {
     </>
   );
 };
+
+export const MetadataItemList = (props) => {
+  const { value, join_type } = props;
+
+  return value && value.length > 0 ? (
+    <>
+      {!join_type ? (
+        <p>{value.map((item) => item.title).join(', ')}</p>
+      ) : (
+        <>
+          {value.map((item, index) => (
+            <React.Fragment key={index}>
+              <span>{item.title}</span>
+              {index !== value.length - 1 && (
+                <span dangerouslySetInnerHTML={{ __html: join_type }} />
+              )}
+            </React.Fragment>
+          ))}
+        </>
+      )}
+    </>
+  ) : null;
+};

package/src/helpers/index.js

@@ -15,6 +15,7 @@ export {
   ItemLogo,
   SubjectTags,
   EventDetails,
+  MetadataItemList,
 } from './Utils';
 export { default as ContentMetadata } from './ContentMetadata';
 export {

package/src/index.js

@@ -11,6 +11,8 @@ import C3SIndicatorView from './components/theme/Views/C3SIndicatorView';
 import DatabaseItemView from './components/theme/Views/DatabaseItemView';
 import MissionFundingCCAView from './components/theme/Views/MissionFundingCCAView';
 
+import { MissionToolView } from '@eeacms/volto-cca-policy/components';
+
 import HealthHorizontalCardItem from './components/Result/HealthHorizontalCardItem';
 
 import ccaLogo from '@eeacms/volto-cca-policy/../theme/assets/images/Header/climate-adapt-logo.svg';
@@ -287,6 +289,7 @@ const applyConfig = (config) => {
     'eea.climateadapt.adaptationoption': AdaptationOptionView,
     'News Item': NewsItemView,
     mission_funding_cca: MissionFundingCCAView,
+    mission_tool: MissionToolView,
   };
 
   config.views.layoutViewsNamesMapping.view_cca_event = 'CCA Event View';

package/theme/elements/list.variables

@@ -6,4 +6,4 @@
          View
 --------------------*/
 
-@listFontWeight: 500;
+@listFontWeight: 400;

package/theme/globals/mission.less

@@ -1,5 +1,20 @@
 /* Mission subsite */
 
+.mission-item-view {
+  .ui.segment.metadata {
+    border: none;
+    background-color: #f9f9f9;
+
+    h5 {
+      margin: 1em 0 0.5em 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
 body.view-viewview.contenttype-subsite.section-mission
   .block.__grid.teaserGrid.centered
   h2 {

package/src/components/theme/Views/styles.less

@@ -1,7 +0,0 @@
-// MissionFundingCCAView
-div.col-right {
-  div.metadata {
-    padding: 10px;
-    background: #e6e7e8;
-  }
-}