@eeacms/volto-cca-policy 0.3.21 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.3.21",
+  "version": "0.3.23",
   "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

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

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Item, ItemGroup, ItemContent, Image } from 'semantic-ui-react';
+
+import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
+
+const ItemsSection = ({ items }) => {
+  return (
+    <ItemGroup className="items-group">
+      <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>
+
+      <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>
+  );
+};
+
+export default ItemsSection;

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

@@ -4,14 +4,13 @@ import {
   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 ItemsSection from './../ItemsSection';
 
 import image from '@eeacms/volto-cca-policy/../theme//assets/images/image-narrow.svg';
 
@@ -27,9 +26,9 @@ const AssessmentTab = () => {
         </p>
       </Callout>
 
-      <div className="profile-content-box">
+      <div className="section-wrapper">
         <h3>Climate Risk Assessment</h3>
-        <div className="profile-content-box-info">
+        <div className="section-wrapper-info">
           <ItemGroup unstackable className="row">
             <Item>
               <Image size="miny" src={image} />
@@ -50,57 +49,7 @@ const AssessmentTab = () => {
         <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>
+          <ItemsSection />
         </div>
 
         <h4>Further details</h4>

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

@@ -1,10 +1,10 @@
 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';
+import AccordionList from './../AccordionList';
+import StatisticsSection from './../StatisticsSection';
 
 const GovernanceTab = ({ result }) => {
   const statisticsData = [
@@ -73,6 +73,7 @@ const GovernanceTab = ({ result }) => {
         {result?.Signatory} engages with other levels of government regarding
         their:
       </h3>
+
       <AccordionList
         accordions={[
           {

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Tab } from 'semantic-ui-react';
+import { Tab, Message } from 'semantic-ui-react';
 import { Callout } from '@eeacms/volto-eea-design-system/ui';
+import AccordionList from './../AccordionList';
+import ItemsSection from './../ItemsSection';
 
 const PlanningTab = () => {
   return (
@@ -14,6 +16,76 @@ const PlanningTab = () => {
           in magna.
         </p>
       </Callout>
+      <div className="section-wrapper">
+        <h5>
+          <span className="section-number">1. </span>
+          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
+          eleifend ipsum cursus.
+        </h5>
+        <AccordionList
+          variation="secondary"
+          accordions={[
+            {
+              title: 'Vestibulum ante ipsum primis',
+              content: 'No additional details provided.',
+            },
+          ]}
+        />
+      </div>
+      <div className="section-wrapper">
+        <h5>
+          <span className="section-number">2. </span>
+          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
+          eleifend ipsum cursus.
+        </h5>
+        <AccordionList
+          variation="secondary"
+          accordions={[
+            {
+              title: 'Vestibulum ante ipsum primis',
+              content: 'No additional details provided.',
+            },
+          ]}
+        />
+      </div>
+      <div className="section-wrapper">
+        <h5>
+          <span className="section-number">3. </span>
+          Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim, a
+          eleifend ipsum cursus.
+        </h5>
+        <AccordionList
+          variation="secondary"
+          accordions={[
+            {
+              title: 'Vestibulum ante ipsum primis',
+              content: 'No additional details provided.',
+            },
+          ]}
+        />
+      </div>
+      <h2>
+        Quisque suscipit ligula eu turpis dignissim, a eleifend ipsum cursus.
+      </h2>
+
+      <Callout>
+        <p>
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+          posuere cubilia curae; Pellentesque sodales, velit nec euismod
+          scelerisque, lectus est interdum eros, sit amet bibendum eros sapien
+          in magna.
+        </p>
+      </Callout>
+      <br />
+      <Message>
+        <p>
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+          posuere cubilia curae. Nunc euismod bibendum augue. Cras nec ligula
+          velit. Donec in laoreet leo. Quisque suscipit ligula eu turpis
+          dignissim, a eleifend ipsum cursus.
+        </p>
+      </Message>
+      <ItemsSection />
       <p>
         Curabitur at felis non libero suscipit fermentum. Duis volutpat, ante et
         scelerisque luctus, sem nulla placerat leo, at aliquet libero justo id
@@ -21,6 +93,25 @@ const PlanningTab = () => {
         augue. Cras nec ligula velit. Donec in laoreet leo. Quisque suscipit
         ligula eu turpis dignissim, a eleifend ipsum cursus.
       </p>
+      <p>
+        Year of formal approval of plan: <strong className="date">2023</strong>{' '}
+        End year of plan: {''}
+        <strong className="date">2030</strong>
+      </p>
+
+      <p>
+        <a href="/">
+          <strong>Nunc euismod bibendum augue</strong>
+        </a>
+      </p>
+
+      <p>
+        <a href="/">
+          <strong>
+            Donec in laoreet leo. Quisque suscipit ligula eu turpis dignissim
+          </strong>
+        </a>
+      </p>
     </Tab.Pane>
   );
 };

package/src/components/manage/Blocks/MissionSignatoriesProfile/style.less

@@ -1,21 +1,48 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
 .signatories-profile {
-  .profile-content-box {
+  .items-wrapper {
+    margin: 2em 0;
+  }
+
+  .section-wrapper-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+
+    .date {
+      position: relative;
+      top: 5px;
+    }
+  }
+
+  .section-wrapper {
     padding: 1.5em;
     margin: 2em 0;
     background-color: #f9f9f9;
 
-    .items-wrapper {
-      margin: 2em 0;
+    .section-number {
+      color: @pineGreen;
     }
+  }
+
+  strong.date {
+    margin-right: 0.5em;
+  }
+
+  .items-group {
+    display: block !important;
+    column-count: 2;
 
-    .profile-content-box-info {
-      display: flex;
-      justify-content: space-between;
-      font-size: 14px;
+    .item {
+      padding: 0.5em 0 !important;
+      break-inside: avoid-column;
 
-      .date {
-        position: relative;
-        top: 5px;
+      .content {
+        padding-left: 0.5rem !important;
       }
     }
   }

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -102,8 +102,8 @@ const DefaultView = (props) => {
                     name: currentNavigation.title,
                     includeTop: false,
                     // currentFolderOnly: true,
-                    topLevel: currentNavigation.topLevel,
-                    bottomLevel: currentNavigation.bottomLevel,
+                    topLevel: currentNavigation.topLevel + 1,
+                    bottomLevel: currentNavigation.bottomLevel + 1,
                     rootPath: `${currentLang}/${currentNavigation.rootPath}`,
                   }}
                 />

package/src/index.js

@@ -3,6 +3,7 @@ import loadable from '@loadable/component';
 import { compose } from 'redux';
 import { Sitemap } from '@plone/volto/components';
 import DefaultView from '@plone/volto/components/theme/View/DefaultView';
+import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
 import {
   RASTWidgetView,
   TranslationDisclaimer,
@@ -522,6 +523,10 @@ const applyConfig = (config) => {
     ...config.settings.storeExtenders,
   ];
 
+  config.widgets.vocabulary[
+    'plone.app.vocabularies.Users'
+  ] = SelectAutoCompleteWidget;
+
   return compose(installBlocks, installSearchEngine, installStore)(config);
 };
 

package/src/search/cca/config.js

@@ -70,11 +70,24 @@ export default function installMainSearch(config) {
 
   // console.log('config.searchui.ccaSearch clusers', clusters);
   // debugger;
-  config.searchui.globalsearch.download_fields = [
+  config.searchui.ccaSearch = {
+    ...mergeConfig(envConfig, config.searchui.globalsearchbase),
+    elastic_index: '_es/globalsearch',
+    index_name: 'data_searchui',
+    host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
+    runtime_mappings: cca_build_runtime_mappings,
+    ...vocabs,
+  };
+
+  config.searchui.ccaSearch.download_fields = [
+    // { field: 'cca_uid', name: 'UID' },
     { field: 'about', name: 'About' },
-    { field: 'title', name: 'title' },
-    { field: 'issued', name: 'Issued' },
+    { field: 'title', name: 'Title' },
+    { field: 'created', name: 'Creation Date' },
+    { field: 'issued', name: 'Publication Date' },
+    { field: 'creators', name: 'Creator' },
     { field: 'objectProvides', name: 'Content type' },
+    { field: 'cca_keywords', name: 'Keywords' },
     { field: 'cca_adaptation_sectors', name: 'Sectors' },
     { field: 'cca_climate_impacts', name: 'Climate impact' },
     { field: 'transnational_regions', name: 'Transnational regions' },
@@ -85,15 +98,8 @@ export default function installMainSearch(config) {
     { field: 'cca_origin_websites', name: 'Origin website' },
     { field: 'cca_health_impacts', name: 'Health impacts' },
     { field: 'cca_partner_contributors', name: 'Observatory impacts' },
+    // { field: 'fulltext', name: 'Description' },
   ];
-  config.searchui.ccaSearch = {
-    ...mergeConfig(envConfig, config.searchui.globalsearchbase),
-    elastic_index: '_es/globalsearch',
-    index_name: 'data_searchui',
-    host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
-    runtime_mappings: cca_build_runtime_mappings,
-    ...vocabs,
-  };
 
   const { ccaSearch } = config.searchui;
 

package/src/utils.js

@@ -87,7 +87,5 @@ export const formatTextToHTML = (text) => {
   // Replace \\n with <br /> (line breaks within paragraphs)
   formattedText = formattedText.replace(/\\n/g, '<br />');
 
-  formattedText = `<p>${formattedText}</p>`;
-
-  return formattedText;
+  return `<p>${formattedText}</p>`;
 };

package/theme/globals/mission.less

@@ -35,8 +35,8 @@ body.view-viewview.contenttype-subsite.section-mission
 }
 
 body.subsite-mkh {
-  --text-color-secondary: @green-5;
-  --border-color-secondary: @green-5;
+  --text-color-secondary: @pineGreen;
+  --border-color-secondary: @pineGreen;
 
   .column > .ui.segment {
     background-color: transparent;
@@ -94,12 +94,12 @@ body.subsite-mkh {
   }
 
   .ui.statistics:not(.inverted) .ui.statistic .slate.secondary {
-    color: @green-5;
+    color: @pineGreen;
   }
 
   .ui.secondary.pointing.menu .active.item {
-    color: @green-5;
-    border-color: @green-5;
+    color: @pineGreen;
+    border-color: @pineGreen;
   }
 
   #mega-menu {

package/theme/globals/search.less

@@ -11,6 +11,12 @@ body.searchlib-page .searchlib-block {
   }
 }
 
+body.is-anonymous .searchlib-block .search-body-footer {
+  button.download-btn {
+    display: none;
+  }
+}
+
 .searchlib-page .content-section-tabs.menu .item i.icon.small {
   width: 32px;
   height: 32px;