@eeacms/volto-cca-policy 0.2.36 → 0.2.37

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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.37](https://github.com/eea/volto-cca-policy/compare/0.2.36...0.2.37) - 29 May 2024
+
+#### :house: Internal changes
+
+- chore: add @eeacms/volto-embed to dependencies [kreafox - [`87293f1`](https://github.com/eea/volto-cca-policy/commit/87293f13c43fba395b3d247cbe1490285a0ea18b)]
+
+#### :hammer_and_wrench: Others
+
+- test: update snapshot [kreafox - [`f25b1b6`](https://github.com/eea/volto-cca-policy/commit/f25b1b643a96a7bbf7765442dd496334b497fdfa)]
+- Code cleanup [Tiberiu Ichim - [`9867b7b`](https://github.com/eea/volto-cca-policy/commit/9867b7b19bdd124559ab03da8efdacf55dfbb446)]
+- Code cleanup [Tiberiu Ichim - [`955176a`](https://github.com/eea/volto-cca-policy/commit/955176a0fdacb57c890164330ce3f898a7bd6769)]
+- test: mock volto-embed [kreafox - [`6396e9d`](https://github.com/eea/volto-cca-policy/commit/6396e9d89817a10b1fb57c2dcd8a2f651148b846)]
 ### [0.2.36](https://github.com/eea/volto-cca-policy/compare/0.2.35...0.2.36) - 28 May 2024
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,6 +23,7 @@
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme",
     "@eeacms/volto-tabs-block",
+    "@eeacms/volto-embed",
     "@eeacms/volto-globalsearch"
   ],
   "dependencies": {
@@ -30,6 +31,7 @@
     "@eeacms/volto-datablocks": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "^1.33.2",
+    "@eeacms/volto-embed": "9.1.1",
     "@eeacms/volto-globalsearch": "^1.1.0",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-searchlib": "^0.9.3",

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

@@ -59,36 +59,6 @@ const createIframe = (div_id, details_url, details_params, spinner_url) => {
   />`;
 };
 
-const Details = (props) => {
-  const { content } = props;
-  const { details_app_toolbox_url, details_app_parameters } = content;
-
-  const c3s_details_url = details_app_toolbox_url;
-  const c3s_details_params = JSON.stringify(details_app_parameters).replace(
-    /"/g,
-    "'",
-  ); // we avoid double quotes in iframe text
-  const [spinnerUrl, setSpinnerUrl] = useState(null);
-
-  React.useEffect(() => {
-    setSpinnerUrl(spinner);
-  }, []);
-
-  return (
-    <div
-      className="iframe-container"
-      dangerouslySetInnerHTML={{
-        __html: createIframe(
-          'toolbox-app-details',
-          c3s_details_url,
-          c3s_details_params,
-          spinnerUrl,
-        ),
-      }}
-    />
-  );
-};
-
 const Overview = (props) => {
   const { content } = props;
   const { overview_app_toolbox_url, overview_app_parameters } = content;
@@ -105,7 +75,7 @@ const Overview = (props) => {
 
   return (
     <div
-      className="iframe-container"
+      className="iframe-container div-chart-container"
       dangerouslySetInnerHTML={{
         __html: createIframe(
           'toolbox-app-overview',
@@ -123,26 +93,36 @@ function C3SIndicatorView(props) {
   const {
     definition_app,
     long_description,
-    indicator_title,
+    // indicator_title,
     title,
     logo,
+    // c3sjs_overview,
   } = content;
+  // console.log('c3sjs_overview', c3sjs_overview, props);
   const [showDetails, setShowDetails] = useState(false);
-  const hasIndicatorTitle =
-    indicator_title && indicator_title !== '_' && indicator_title !== '-';
+  // const hasIndicatorTitle =
+  //   indicator_title && indicator_title !== '_' && indicator_title !== '-';
 
-  const [activeAccIndex, setActiveAccIndex] = React.useState(null);
+  const [activeAccordion, setActiveAccordion] = React.useState([true, false]);
 
-  function handleAccClick(e, titleProps) {
-    const { index } = titleProps;
-    const newIndex = activeAccIndex === index ? -1 : index;
+  function handleAccordionClick(e, index) {
+    const _activeAccordion = JSON.parse(JSON.stringify(activeAccordion));
+    _activeAccordion[index] = !_activeAccordion[index];
 
-    setActiveAccIndex(newIndex);
+    setActiveAccordion(_activeAccordion);
   }
 
-  const toggleIframe = () => {
-    setShowDetails(!showDetails);
-  };
+  const [showMode, setShowMode] = React.useState('normal');
+
+  function handleShowModeClick(e, mode) {
+    setShowMode(mode);
+    setActiveAccordion(mode === 'full' ? [false, false] : [true, false]);
+    e.preventDefault();
+  }
+
+  // const toggleIframe = () => {
+  //   setShowDetails(!showDetails);
+  // };
 
   useEffect(() => {
     if (window.location.hash === '#details') {
@@ -173,7 +153,7 @@ function C3SIndicatorView(props) {
         }}
       />
 
-      <Container>
+      <Container className="">
         <PortalMessage content={content} />
         <LogoWrapper logo={logo}>
           <h2>
@@ -191,62 +171,86 @@ function C3SIndicatorView(props) {
           )}
         </LogoWrapper>
 
-        <HTMLField value={long_description} />
+        <Accordion id="background" key="background" className="secondary">
+          <Accordion.Title
+            role="button"
+            tabIndex={0}
+            active={activeAccordion[0]}
+            aria-expanded={activeAccordion[0]}
+            index={1}
+            onClick={(e) => handleAccordionClick(e, 0)}
+            onKeyDown={(e) => {
+              if (e.keyCode === 13 || e.keyCode === 32) {
+                e.preventDefault();
+                handleAccordionClick(e, 0);
+              }
+            }}
+          >
+            <span className="item-title">Background Information</span>
+            {activeAccordion[0] ? (
+              <Icon className="ri-arrow-up-s-line" />
+            ) : (
+              <Icon className="ri-arrow-down-s-line" />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeAccordion[0]}>
+            <HTMLField value={long_description} />
+          </Accordion.Content>
+        </Accordion>
+        <Accordion id="visualisation" key="visualisation" className="secondary">
+          <Accordion.Title
+            role="button"
+            tabIndex={0}
+            active={activeAccordion[1]}
+            aria-expanded={activeAccordion[1]}
+            index={1}
+            onClick={(e) => handleAccordionClick(e, 1)}
+            onKeyDown={(e) => {
+              if (e.keyCode === 13 || e.keyCode === 32) {
+                e.preventDefault();
+                handleAccordionClick(e, 1);
+              }
+            }}
+          >
+            <span className="item-title">Visualisation and Navigation</span>
+            {activeAccordion[1] ? (
+              <Icon className="ri-arrow-up-s-line" />
+            ) : (
+              <Icon className="ri-arrow-down-s-line" />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeAccordion[1]}>
+            <HTMLField value={definition_app} />
+          </Accordion.Content>
+        </Accordion>
 
         <div className="c3s-buttons">
-          <a href="#details">
-            <Button primary onClick={toggleIframe}>
-              {showDetails ? (
-                <FormattedMessage id="Go back" defaultMessage="Go back" />
-              ) : (
+          {showMode === 'normal' ? (
+            <a href="#details">
+              <Button primary onClick={(_e) => handleShowModeClick(_e, 'full')}>
+                <FormattedMessage id="Fullscreen" defaultMessage="Fullscreen" />
+              </Button>
+            </a>
+          ) : (
+            <Link to={window.location.pathname}>
+              <Button
+                primary
+                onClick={(_e) => handleShowModeClick(_e, 'normal')}
+              >
                 <FormattedMessage
-                  id="Explore in detail"
-                  defaultMessage="Explore in detail"
+                  id="Exit fullscreen"
+                  defaultMessage="Exit fullscreen"
                 />
-              )}
-            </Button>
-          </a>
-          <Link to="/knowledge/european-climate-data-explorer/">
-            <Button primary>
-              <FormattedMessage
-                id="ECDE homepage"
-                defaultMessage="ECDE homepage"
-              />
-            </Button>
-          </Link>
-        </div>
-
-        {definition_app && !hasIndicatorTitle && (
-          <Accordion>
-            <Accordion.Title
-              className="accordion-title "
-              active={activeAccIndex === 0}
-              index={0}
-              onClick={handleAccClick}
-            >
-              <span>Visualisation and Navigation</span>
-              {activeAccIndex === 0 ? (
-                <Icon className="ri-arrow-up-s-line" />
-              ) : (
-                <Icon className="ri-arrow-down-s-line" />
-              )}
-            </Accordion.Title>
-            <Accordion.Content active={activeAccIndex === 0}>
-              <HTMLField value={definition_app} />
-            </Accordion.Content>
-          </Accordion>
-        )}
-
-        <h2>
-          {hasIndicatorTitle && <>{indicator_title}</>}
-          {showDetails && ' - Explore index'}
-        </h2>
-
-        <div>
-          {!__SERVER__ && !showDetails && <Overview {...props} />}
-          {!__SERVER__ && showDetails && <Details {...props} />}
+              </Button>
+            </Link>
+          )}
         </div>
+      </Container>
 
+      <div className={showMode === 'full' ? 'page-document' : 'ui container'}>
+        <div className="full">{!__SERVER__ && <Overview {...props} />}</div>
+      </div>
+      <Container>
         <Segment>
           <p>
             Content in the European Climate Data Explorer pages is delivered by

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

@@ -1,4 +1,16 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useLocation } from 'react-router-dom';
+import { PrivacyProtection } from '@eeacms/volto-embed';
+import { Container, Divider, Grid } from 'semantic-ui-react';
+import {
+  ShareInfoButton,
+  PortalMessage,
+} from '@eeacms/volto-cca-policy/components';
+import {
+  isObservatoryMetadataURL,
+  fixEmbedURL,
+} from '@eeacms/volto-cca-policy/helpers';
 import {
   TOOL,
   GUIDANCE,
@@ -19,20 +31,28 @@ import {
   ExternalLink,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import {
-  ShareInfoButton,
-  PortalMessage,
-} from '@eeacms/volto-cca-policy/components';
-import {
-  isObservatoryMetadataURL,
-  fixEmbedURL,
-} from '@eeacms/volto-cca-policy/helpers';
-import { Container, Divider, Grid } from 'semantic-ui-react';
-import { useLocation } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
 
 const share_eea = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
 
+const dataprotection = {
+  enabled: true,
+  privacy_cookie_key: 'flourish',
+  privacy_statement: [
+    {
+      children: [
+        {
+          text:
+            'This map is hosted by a third party [Flourish]. ' +
+            'By showing the external content you accept the terms ' +
+            'and conditions of www.flourish.studio. This includes ' +
+            'their cookie policies, which we have no control over.',
+        },
+      ],
+      type: 'p',
+    },
+  ],
+};
+
 const DatabaseItemView = (props) => {
   const { content } = props;
   const type = content['@type'];
@@ -193,18 +213,23 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              {!!data_src(map_graphs) && (
-                <iframe
-                  height="980"
-                  width="100%"
-                  src={`https://flo.uri.sh/${data_src(map_graphs)}/embed`}
-                  title="Interactive or visual content"
-                  className="flourish-embed-iframe"
-                  frameBorder="0"
-                  scrolling="no"
-                  sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
-                ></iframe>
-              )}
+              <PrivacyProtection
+                data={{
+                  dataprotection,
+                }}
+              >
+                {!!data_src(map_graphs) && (
+                  <iframe
+                    height="980"
+                    width="100%"
+                    src={`https://flo.uri.sh/${data_src(map_graphs)}/embed`}
+                    title="Interactive or visual content"
+                    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>
+                )}
+              </PrivacyProtection>
+
               <Divider />
 
               <ReferenceInfo content={content} />

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

@@ -21,6 +21,12 @@ jest.mock('semantic-ui-react', () => ({
   ...jest.requireActual('semantic-ui-react'),
 }));
 
+jest.mock('@eeacms/volto-embed', () => {
+  return {
+    PrivacyProtection: jest.fn(({ children }) => <div>{children}</div>),
+  };
+});
+
 describe('DatabaseItemView', () => {
   it('should render the component', () => {
     const content = {

package/src/helpers/Constants.jsx

@@ -95,7 +95,7 @@ export const BIOREGIONS = {
   COUNTRIES: 'Countries',
   SUBNATIONAL: 'Subnational Regions',
   CITY: 'Municipality Name',
-  TRANS_MACRO_NORTHPERI: 'Northern Periphery',
+  TRANS_MACRO_NORTHPERI: 'Northern Periphery and Arctic',
   TRANS_MACRO_BACLITC: 'Baltic Sea',
   TRANS_MACRO_NW_EUROPE: 'North West Europe',
   TRANS_MACRO_N_SEA: 'North Sea',
@@ -103,20 +103,20 @@ export const BIOREGIONS = {
   TRANS_MACRO_ALP_SPACE: 'Alpine Space',
   TRANS_MACRO_CEN_EUR: 'Central Europe',
   TRANS_MACRO_SW_EUR: 'South West Europe',
-  TRANS_MACRO_MED: 'Mediterranean',
-  TRANS_MACRO_DANUBE: 'Danube',
+  TRANS_MACRO_MED: 'Mediterranean (Euro-Med)',
+  TRANS_MACRO_DANUBE: 'Danube Area',
   TRANS_MACRO_ADR_IONIAN: 'Adriatic-Ionian',
   TRANS_MACRO_BALKAN_MED: 'Balkan-Mediterranean',
   TRANS_MACRO_CAR_AREA: 'Caribbean Area',
   TRANS_MACRO_AMAZONIA: 'Amazonia',
   TRANS_MACRO_IND_OCEAN_AREA: 'Indian Ocean Area',
   TRANS_MACRO_SE_EUR: 'South East Europe',
-  TRANS_MACRO_MED_BASIN: 'Mediterranean Sea Basin',
+  TRANS_MACRO_MED_BASIN: 'Mediterranean Sea Basin (NEXT)',
   TRANS_MACRO_MID_ATLANTIC: 'Mid-Atlantic',
   TRANS_MACRO_ARCTIC: 'Arctic',
   TRANS_MACRO_BLACKSEA: 'Black Sea',
   TRANS_MACRO_ATLANTIC: 'Atlantic',
-  TRANS_MACRO_BLACKSEA_BASIN: 'Black Sea Basin',
+  TRANS_MACRO_BLACKSEA_BASIN: 'Black Sea Basin (NEXT)',
   TRANS_BIO_ALPINE: 'Alpine',
   TRANS_BIO_ANATOLIAN: 'Anatolian',
   TRANS_BIO_ARCTIC: 'Arctic',

package/theme/globals/blocks.less

@@ -1,6 +1,7 @@
 .relevant-acecontent-block,
 .search-acecontent-block {
-  margin: 1.7em 0 !important;
+  margin-top: 1.7em !important;
+  margin-bottom: 1.7em !important;
 
   .ui.list > .item a,
   .ui.list .list > .item a {

package/theme/globals/views.less

@@ -96,6 +96,11 @@ hr {
 .db-item-view {
   position: relative;
 
+  .privacy-protection-wrapper {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+
   .col-left {
     position: relative;
   }