@eeacms/volto-cca-policy 0.1.44 → 0.1.46

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.1.46](https://github.com/eea/volto-cca-policy/compare/0.1.45...0.1.46) - 6 October 2023
+
+#### :rocket: New Features
+
+- feat: add icon for external links [kreafox - [`6cfc86b`](https://github.com/eea/volto-cca-policy/commit/6cfc86b1e15773578de3ba6f80467daf5b11b087)]
+
+#### :nail_care: Enhancements
+
+- change: add padding on listing summary view [kreafox - [`d86e321`](https://github.com/eea/volto-cca-policy/commit/d86e321a905dbb925847b2b0b88c20eea7da0003)]
+
+#### :hammer_and_wrench: Others
+
+- test: use volto version 16 [kreafox - [`a7ed678`](https://github.com/eea/volto-cca-policy/commit/a7ed678ac981213177d0377d312692b69e36c7d8)]
+- Add style on listing view as well [kreafox - [`b741ca8`](https://github.com/eea/volto-cca-policy/commit/b741ca82a959a1261e8ec54ef0c7ecce9b8bfb15)]
+### [0.1.45](https://github.com/eea/volto-cca-policy/compare/0.1.44...0.1.45) - 25 September 2023
+
+#### :hammer_and_wrench: Others
+
+- Refs #161483 - Fix name. [GhitaB - [`e614a27`](https://github.com/eea/volto-cca-policy/commit/e614a275681b42d23292f0eb8f371686fefa8d70)]
+- Code cleanup [Tiberiu Ichim - [`c0521db`](https://github.com/eea/volto-cca-policy/commit/c0521dbd4642516c49ec1560d7cc648b2918fddc)]
+- Refs #161483 - Fix jenkins and infinite loop render. [GhitaB - [`2080298`](https://github.com/eea/volto-cca-policy/commit/20802988bbf2bee0759f524c0907da8dd6769284)]
+- Refs #161483 - Add ECDE C3S indicators glossary block. [GhitaB - [`806a768`](https://github.com/eea/volto-cca-policy/commit/806a76888290cb52616dfd6a937a8e49fc6a9ed3)]
+- Refs #161483 - Fix error in documents list when no files. (in add/edit/view publication report form) [GhitaB - [`954f19d`](https://github.com/eea/volto-cca-policy/commit/954f19dd2f09fd2a884c34c95a7c818304b231ae)]
 ### [0.1.44](https://github.com/eea/volto-cca-policy/compare/0.1.43...0.1.44) - 22 September 2023
 
 #### :hammer_and_wrench: Others
@@ -173,7 +196,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -654,7 +676,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/manage/Blocks/C3SIndicatorsGlossaryBlock/C3SIndicatorsGlossaryBlockEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import C3SIndicatorsGlossaryBlockView from './C3SIndicatorsGlossaryBlockView';
+import schema from './schema';
+
+export default function C3SIndicatorsGlossaryBlockEdit(props) {
+  const { block, data, onChangeBlock, selected, id } = props;
+
+  return (
+    <div>
+      <C3SIndicatorsGlossaryBlockView data={data} id={id} 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>
+    </div>
+  );
+}

package/src/components/manage/Blocks/C3SIndicatorsGlossaryBlock/C3SIndicatorsGlossaryBlockView.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import axios from 'axios';
+
+export default function C3SIndicatorsGlossaryBlockView(props) {
+  const [tableHTML, setTableHTML] = React.useState('');
+
+  const getIndicatorsData = () => {
+    const url =
+      '/++api++/en/knowledge/european-climate-data-explorer/@c3s_indicators_glossary_table';
+
+    axios
+      .get(url)
+      .then((response) => {
+        setTableHTML(response.data.c3s_indicators_glossary_table);
+      })
+      .catch((error) => {
+        // console.error(error);
+      });
+  };
+
+  React.useEffect(() => {
+    getIndicatorsData();
+  });
+
+  return (
+    <div className="block c3sindicators-glossary-block">
+      <div
+        className="glossary-table"
+        dangerouslySetInnerHTML={{
+          __html: tableHTML,
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+import C3SIndicatorsGlossaryBlockEdit from './C3SIndicatorsGlossaryBlockEdit';
+import C3SIndicatorsGlossaryBlockView from './C3SIndicatorsGlossaryBlockView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
+
+export default function installBlock(config) {
+  const blocksConfig = config.blocks.blocksConfig;
+
+  blocksConfig.c3SIndicatorsGlossaryBlock = {
+    id: 'c3SIndicatorsGlossaryBlock',
+    title: 'C3S Indicators Glossary',
+    icon: zoomSVG,
+    group: 'site',
+    view: C3SIndicatorsGlossaryBlockView,
+    edit: C3SIndicatorsGlossaryBlockEdit,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
+  };
+
+  return config;
+}

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

@@ -0,0 +1,14 @@
+export default {
+  title: 'C3S Indicators Glossary',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+    },
+  ],
+
+  properties: {},
+
+  required: [],
+};

package/src/components/manage/Blocks/C3SIndicatorsOverviewBlock/C3SIndicatorsOverviewBlockView.jsx

@@ -27,7 +27,8 @@ export default function C3SIndicatorsOverviewBlockView(props) {
 
   React.useEffect(() => {
     getIndicatorsData();
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [category]);
 
   return (
     <div className="block c3sindicators-overview-block">

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

@@ -12,6 +12,7 @@ import installCountryMapProfile from './CountryMapProfile';
 import installListing from './Listing';
 import installRAST from './RASTBlock';
 import installC3SIndicatorsOverviewBlock from './C3SIndicatorsOverviewBlock';
+import installC3SIndicatorsGlossaryBlock from './C3SIndicatorsGlossaryBlock';
 import installReadMore from './ReadMore';
 
 export default function installBlocks(config) {
@@ -22,6 +23,7 @@ export default function installBlocks(config) {
     installRAST,
     installReadMore,
     installC3SIndicatorsOverviewBlock,
+    installC3SIndicatorsGlossaryBlock,
     installMKHMap,
     installECDEIndicatorsBlock,
     installCaseStudyExplorerBlock,

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

@@ -138,16 +138,6 @@ function AdaptationOptionView(props) {
 
               <h4>Adaptation Details</h4>
 
-              <div id={sectionID('Category')} className="section">
-                <h5 className="section-title">Category</h5>
-                {content.category
-                  .map((item) => item.token)
-                  .sort()
-                  .map((cat, index) => (
-                    <Fragment key={index}>{cat}</Fragment>
-                  ))}
-              </div>
-
               <div id={sectionID('IPCC categories')} className="section">
                 <h5 className="section-title">IPCC categories</h5>
                 {content.ipcc_category

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/Header.jsx

@@ -0,0 +1,395 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react'; // , { Component }
+import { useHistory } from 'react-router-dom';
+import cx from 'classnames';
+import { Container, Image, Menu, Dropdown } from 'semantic-ui-react'; // Dropdown,
+
+import closeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/close-line.svg';
+import searchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/menu-line.svg';
+
+import HeaderSearchPopUp from './HeaderSearchPopUp';
+import HeaderMenuPopUp from './HeaderMenuPopUp';
+import PropTypes from 'prop-types';
+
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+Header.propTypes = {
+  transparency: PropTypes.bool,
+  inverted: PropTypes.bool,
+};
+
+function Header({ children }) {
+  return <div className="eea header">{children}</div>;
+}
+
+const TopHeader = ({ children }) => (
+  <div className="top bar">
+    <Container>{children}</Container>
+  </div>
+);
+
+const TopItem = ({ children, className, id }) => (
+  <div className={cx('item', 'header-top-item', className)} id={id}>
+    {children}
+  </div>
+);
+
+const onKeyDownHandler = (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    event.target.click();
+    //event.target.focus();
+  }
+};
+
+const TopDropdownMenu = ({
+  children,
+  className,
+  icon,
+  hasLanguageDropdown = false,
+  id,
+  tabletText,
+  mobileText,
+  text,
+  viewportWidth,
+}) => {
+  const isTablet = viewportWidth < 991;
+  const isMobile = viewportWidth < 767;
+
+  const Component = ({ mobileText }) => {
+    return (
+      <>
+        {children.props['aria-label'] === 'language switcher' ? (
+          hasLanguageDropdown && (
+            <Dropdown
+              id={id}
+              className={className}
+              text={mobileText || text}
+              icon={icon || 'chevron down'}
+              aria-label="dropdown"
+              role="dropdown"
+              lazyLoad
+              closeOnChange={true}
+              closeOnBlur={false}
+              closeOnEscape={true}
+              openOnFocus={false}
+              onKeyDown={onKeyDownHandler}
+            >
+              <Dropdown.Menu role="option">{children}</Dropdown.Menu>
+            </Dropdown>
+          )
+        ) : (
+          <Dropdown
+            id={id}
+            className={className}
+            text={mobileText || text}
+            icon={icon || 'chevron down'}
+            role="dropdown"
+            aria-label="dropdown"
+            lazyLoad
+            closeOnChange={true}
+            closeOnBlur={false}
+            closeOnEscape={true}
+            openOnFocus={false}
+            onKeyDown={onKeyDownHandler}
+          >
+            <Dropdown.Menu role="option">{children}</Dropdown.Menu>
+          </Dropdown>
+        )}
+      </>
+    );
+  };
+  return (
+    <>
+      {isMobile ? (
+        <Component mobileText={mobileText} />
+      ) : isTablet ? (
+        <Component mobileText={tabletText} />
+      ) : (
+        <Component />
+      )}
+    </>
+  );
+};
+
+// disable sticky until it's more stable
+// const useScrollingUp = () => {
+//   let prevScroll;
+//
+//   if (process.browser) {
+//     prevScroll = window.pageYOffset;
+//   }
+//   const [scrollingUp, setScrollingUp] = React.useState(false);
+//   const handleScroll = () => {
+//     const currScroll = window.pageYOffset;
+//     const isScrolled = prevScroll > currScroll;
+//     setScrollingUp(isScrolled);
+//     prevScroll = currScroll;
+//   };
+//   React.useEffect(() => {
+//     window.addEventListener('scroll', handleScroll, { passive: true });
+//     return () => {
+//       window.removeEventListener('scroll', handleScroll, { passive: true });
+//     };
+//   });
+//   return scrollingUp;
+// };
+
+const Main = ({
+  logo,
+  menuItems,
+  menuItemsLayouts,
+  renderMenuItem,
+  renderGlobalMenuItem,
+  headerSearchBox,
+  pathname,
+  transparency,
+  inverted,
+  hideSearch,
+  isMultilingual,
+}) => {
+  const history = useHistory();
+  const [activeItem, setActiveItem] = React.useState(pathname);
+  const [menuIsActive, setMenuIsActive] = React.useState(false);
+  const [searchIsActive, setSearchIsActive] = React.useState(false);
+  const [burger, setBurger] = React.useState('');
+  const searchInputRef = React.useRef(null);
+  const [isClient, setIsClient] = React.useState();
+  const itemsLayouts = menuItemsLayouts || config.settings?.menuItemsLayouts;
+
+  React.useEffect(() => setIsClient(true), []);
+
+  React.useEffect(() => {
+    setMenuIsActive(false);
+    setSearchIsActive(false);
+    setBurger('');
+    // remove active menu when we have no pathname which means we hit logo to go home
+    //remove the lang route in order to check if empty
+    //setActiveItem as pathname when pathname changed
+    if (
+      !pathname ||
+      (isMultilingual === true && !pathname?.split('/')?.slice(2)?.join('/'))
+    ) {
+      setActiveItem('');
+    } else setActiveItem(pathname);
+  }, [isMultilingual, pathname]);
+
+  React.useEffect(() => {
+    if (searchIsActive) {
+      searchInputRef.current && searchInputRef.current.focus();
+    }
+  }, [searchIsActive]);
+
+  const searchOnClick = (e, x) => {
+    if (menuIsActive === true) {
+      setBurger('');
+      setMenuIsActive(false);
+      setActiveItem('');
+    }
+    setSearchIsActive(!searchIsActive);
+  };
+
+  const mobileBurgerOnClick = () => {
+    if (searchIsActive === true) {
+      setSearchIsActive(false);
+    }
+
+    if (burger === '') {
+      setBurger('open');
+      setMenuIsActive(true);
+    } else {
+      setBurger('');
+      setMenuIsActive(false);
+      setActiveItem('');
+    }
+  };
+
+  const menuOnClickOutside = () => {
+    // restore active element if nothing was selected from the menu dropdown
+    if (pathname !== activeItem) {
+      setActiveItem(pathname);
+    }
+    // close mobile navigation when clicking outside if we have value for nav
+    if (burger) {
+      setBurger('');
+    }
+    // always close the  menu
+    setMenuIsActive(false);
+  };
+
+  const menuOnClick = (e, item) => {
+    if (searchIsActive) setSearchIsActive(false);
+    setActiveItem(item['@id'] || item.url);
+    if (item.items.length) {
+      setMenuIsActive(true);
+    } else {
+      if (isInternalURL(item.url)) {
+        history.push(item.url);
+      } else if (isClient) {
+        window.location.replace(item.url);
+      }
+    }
+  };
+
+  // Listens for escape keydown event
+  React.useEffect(() => {
+    const escKeyPressed = (e) => {
+      if (e.key === 'Escape') {
+        // menuOnClickOutside();
+        // restore active element if nothing was selected from the menu dropdown
+        if (pathname !== activeItem) {
+          setActiveItem(pathname);
+        }
+        // close mobile navigation when clicking outside if we have value for nav
+        if (burger) {
+          setBurger('');
+        }
+        // always close the  menu & search
+        setMenuIsActive(false);
+        setSearchIsActive(false);
+      }
+    };
+
+    document.addEventListener('keydown', escKeyPressed);
+
+    return () => {
+      document.removeEventListener('keydown', escKeyPressed);
+    };
+  }, [activeItem, burger, pathname]);
+
+  // React.useEffect(() => {
+  //   if (searchIsActive || burger === 'open' || menuIsActive) {
+  //     document.body.style.overflow = 'hidden';
+  //   } else {
+  //     document.body.style.overflow = 'unset';
+  //   }
+  // }, [searchIsActive, burger, menuIsActive]);
+
+  const node = React.useRef();
+  const searchButtonRef = React.useRef();
+  const mobileMenuBurgerRef = React.useRef();
+  const desktopMenuRef = React.useRef();
+
+  // disable sticky setting until feature is more stable
+  // const isScrollingUp = useScrollingUp();
+  // <div
+  // className={`main bar ${transparency ? 'transparency' : ''} ${
+  //     isScrollingUp ? 'sticky' : ''
+  // }`}
+  // >
+
+  return (
+    <div
+      className={`main bar ${transparency ? 'transparency' : ''}`}
+      ref={node}
+    >
+      <Container>
+        <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
+          <div className="header-wrapper">
+            {logo}
+
+            <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
+              {menuItems && (
+                <ul
+                  className="ui text eea-main-menu tablet or lower hidden menu"
+                  ref={desktopMenuRef}
+                  id={'navigation'}
+                >
+                  {menuItems.map((item) => (
+                    <Menu.Item
+                      name={item['@id'] || item.url}
+                      key={item['@id'] || item.url}
+                      as={'li'}
+                      active={
+                        activeItem.indexOf(item['@id']) !== -1 ||
+                        activeItem.indexOf(item.url) !== -1
+                      }
+                    >
+                      {renderGlobalMenuItem(item, {
+                        onClick: menuOnClick,
+                      })}
+                    </Menu.Item>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+
+          <div className="header-actions">
+            {!hideSearch && (
+              <button
+                className="search-action"
+                onClick={searchOnClick}
+                tabIndex="0"
+                aria-pressed="false"
+                aria-haspopup="true"
+                ref={searchButtonRef}
+              >
+                {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
+                <Image
+                  src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
+                  alt="search button open/close"
+                />
+              </button>
+            )}
+            <Header.BurgerAction
+              className={`mobile ${burger}`}
+              onClick={mobileBurgerOnClick}
+              ref={mobileMenuBurgerRef}
+            >
+              <Image
+                src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
+                alt="menu icon open/close"
+              />
+            </Header.BurgerAction>
+          </div>
+        </div>
+      </Container>
+      {searchIsActive && (
+        <HeaderSearchPopUp
+          onClose={searchOnClick}
+          searchInputRef={searchInputRef}
+          triggerRefs={[searchButtonRef]}
+          headerSearchBox={headerSearchBox}
+        />
+      )}
+      <HeaderMenuPopUp
+        renderMenuItem={renderMenuItem}
+        activeItem={activeItem}
+        menuItems={menuItems}
+        menuItemsLayouts={itemsLayouts}
+        pathName={pathname}
+        onClose={menuOnClickOutside}
+        triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}
+        visible={menuIsActive}
+      />
+    </div>
+  );
+};
+
+const BurgerAction = React.forwardRef((props, ref) => (
+  <button
+    ref={ref}
+    className={`burger-action ${props.className}`}
+    tabIndex="0"
+    aria-pressed="false"
+    aria-haspopup="true"
+    onClick={props.onClick}
+  >
+    {props.children}
+  </button>
+));
+
+Header.BurgerAction = BurgerAction;
+Header.Main = Main;
+Header.TopDropdownMenu = TopDropdownMenu;
+Header.TopHeader = TopHeader;
+Header.TopItem = TopItem;
+
+export default Header;

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderMenuPopUp.js

@@ -0,0 +1,403 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Accordion,
+  Container,
+  Grid,
+  Icon,
+  List,
+  Transition,
+} from 'semantic-ui-react';
+
+import { cloneDeep } from 'lodash';
+
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+
+const createColumns = (item, renderMenuItem, item_id) => {
+  return item.items.map((item, index) => (
+    <React.Fragment key={index}>
+      {renderMenuItem(item, {
+        className: 'item',
+        key: index,
+        id: item_id,
+      })}
+    </React.Fragment>
+  ));
+};
+
+const ItemGrid = ({
+  item,
+  columns,
+  renderMenuItem,
+  hideChildrenFromNavigation,
+}) => {
+  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  return (
+    <>
+      {renderMenuItem(item, { className: 'sub-title', id: item_id })}
+      {item.items.length && !hideChildrenFromNavigation ? (
+        <List
+          aria-labelledby={item_id}
+          className={columns && columns > 1 ? `has--${columns}--columns` : ''}
+        >
+          {createColumns(item, renderMenuItem, item_id)}
+        </List>
+      ) : null}
+    </>
+  );
+};
+
+const Item = ({
+  item,
+  icon = false,
+  iconName,
+  renderMenuItem,
+  hideChildrenFromNavigation,
+}) => {
+  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  return (
+    <>
+      {renderMenuItem(item, {
+        className: 'sub-title',
+        id: item_id,
+      })}
+      {!hideChildrenFromNavigation && (
+        <List className="menu-list" aria-labelledby={item_id}>
+          {item.items.map((listItem, index) => (
+            <React.Fragment key={index}>
+              {renderMenuItem(
+                listItem,
+                {
+                  className: 'item',
+                  key: index,
+                },
+                { children: icon && <Icon className={iconName} /> },
+              )}
+            </React.Fragment>
+          ))}
+        </List>
+      )}
+    </>
+  );
+};
+
+const RenderItem = ({ layout, section, renderMenuItem, index }) => {
+  const hideChildrenFromNavigation =
+    layout.hideChildrenFromNavigation === undefined
+      ? true
+      : layout.hideChildrenFromNavigation;
+  return !layout.menuItemChildrenListColumns ||
+    layout.menuItemChildrenListColumns[index] === 1 ? (
+    <Item
+      item={section}
+      renderMenuItem={renderMenuItem}
+      hideChildrenFromNavigation={hideChildrenFromNavigation}
+    />
+  ) : (
+    <ItemGrid
+      item={section}
+      columns={layout.menuItemChildrenListColumns[index]}
+      renderMenuItem={renderMenuItem}
+      hideChildrenFromNavigation={hideChildrenFromNavigation}
+    />
+  );
+};
+
+export const StandardMegaMenuGrid = ({ menuItem, renderMenuItem, layout }) => {
+  const menuItemColumns = layout && layout.menuItemColumns;
+  const menuItemColumnsLength =
+    (menuItemColumns && menuItemColumns.length - 1) || 0;
+
+  const renderColumnContent = (section, columnIndex) => (
+    <RenderItem
+      layout={layout}
+      section={section}
+      renderMenuItem={renderMenuItem}
+      index={columnIndex}
+    />
+  );
+
+  const renderColumns = () => (
+    <Grid>
+      {menuItemColumns.map((section, columnIndex) => (
+        <div className={layout.menuItemColumns[columnIndex]} key={columnIndex}>
+          {columnIndex !== menuItemColumnsLength
+            ? renderColumnContent(menuItem.items[columnIndex], columnIndex)
+            : menuItem.items
+                .slice(menuItemColumnsLength)
+                .map((section, _idx) =>
+                  renderColumnContent(section, columnIndex),
+                )}
+        </div>
+      ))}
+    </Grid>
+  );
+
+  const renderDefaultColumns = () => (
+    <div className={layout?.gridContainerClass || 'ui four column grid'}>
+      {menuItem.items.map((section, index) => (
+        <Grid.Column key={index}>
+          {renderColumnContent(section, index)}
+        </Grid.Column>
+      ))}
+    </div>
+  );
+
+  return menuItemColumns ? renderColumns() : renderDefaultColumns();
+};
+
+const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
+  const topics = element.title === 'Topics';
+  let defaultIndex = -1;
+
+  return (
+    <>
+      {!topics ? (
+        <React.Fragment>
+          {element.items.map((item, index) => {
+            let firstLevelPanels = [];
+            if (!item.items.length) {
+              return (
+                <React.Fragment key={index}>
+                  {renderMenuItem(item, { className: 'item sub-title' })}
+                </React.Fragment>
+              );
+            }
+            let x = {};
+            x.key = item['@id'] || item['url'];
+            if (pathName.indexOf(item.url) !== -1) {
+              defaultIndex = index;
+            }
+            x.title = (
+              <Accordion.Title
+                key={`title=${index}`}
+                as="button"
+                aria-expanded={false}
+                onClick={(e) => {
+                  e.currentTarget.setAttribute(
+                    'aria-expanded',
+                    e.currentTarget.className.indexOf('active') === -1,
+                  );
+                }}
+              >
+                {item.title}
+                <Icon className="ri-arrow-down-s-line" size="small" />
+              </Accordion.Title>
+            );
+            let overflow_item = cloneDeep(item);
+            overflow_item.title = 'See all';
+            x.content = (
+              <Accordion.Content>
+                {renderMenuItem(overflow_item, {
+                  className: 'item title-item',
+                })}
+                <SecondLevelContent
+                  element={item}
+                  renderMenuItem={renderMenuItem}
+                />
+              </Accordion.Content>
+            );
+            firstLevelPanels.push(x);
+            return (
+              <Accordion.Accordion
+                panels={firstLevelPanels}
+                key={index}
+                defaultActiveIndex={defaultIndex === index ? 0 : -1}
+              />
+            );
+          })}
+        </React.Fragment>
+      ) : (
+        <SecondLevelContent
+          element={element}
+          topics={true}
+          renderMenuItem={renderMenuItem}
+        />
+      )}
+    </>
+  );
+};
+
+const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
+  let content;
+  if (topics) {
+    const atAGlance = element.items.find(
+      (element) => element.title === 'At a glance',
+    );
+    const inDepth = element.items.find(
+      (element) => element.url.indexOf('in-depth') !== -1,
+    );
+    content = (
+      <List>
+        {atAGlance &&
+          atAGlance.items.map((item, index) => (
+            <React.Fragment key={index}>
+              {renderMenuItem(item, {
+                key: index,
+                className: 'item',
+              })}
+            </React.Fragment>
+          ))}
+        {inDepth && (
+          <React.Fragment key={inDepth.url}>
+            {renderMenuItem(inDepth, {
+              key: inDepth.url,
+              className: 'item',
+            })}
+          </React.Fragment>
+        )}
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        {element.items.map((item, index) => (
+          <React.Fragment key={index}>
+            {renderMenuItem(item, {
+              key: index,
+              className: 'item',
+            })}
+          </React.Fragment>
+        ))}
+      </List>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  useEffect(() => {
+    let index = 0;
+    menuItems.forEach((menuItem) => {
+      if (pathName.includes(menuItem.url)) setActiveIndex(index);
+      ++index;
+    });
+  }, [menuItems, pathName]);
+
+  const rootPanels = [];
+  menuItems.forEach((element, index) => {
+    let x = {};
+    x.key = index;
+    x.title = (
+      <Accordion.Title
+        key={`title-${index}`}
+        index={index}
+        aria-expanded={activeIndex === index}
+        as="button"
+        onClick={() => {
+          if (activeIndex === index) {
+            setActiveIndex(-1);
+          } else setActiveIndex(index);
+        }}
+      >
+        {element.title}
+        <Icon className="ri-arrow-down-s-line" size="small" />
+      </Accordion.Title>
+    );
+    let overview = cloneDeep(element);
+    x.content = (
+      <Accordion.Content key={index}>
+        <div className="mega-menu-title">
+          {/* Inverted right labeled button as a category title - Mobile */}
+          {renderMenuItem(
+            overview,
+            { className: 'ui button inverted icon right labeled' },
+            {
+              iconPosition: 'right',
+              children: (
+                <>
+                  {/* Add word overview to titles */}
+                  <span> overview</span>
+                  <Icon className={'arrow right icon'} alt={'Title icon'} />
+                </>
+              ),
+            },
+          )}
+        </div>
+        <FirstLevelContent
+          element={element}
+          renderMenuItem={renderMenuItem}
+          pathName={pathName}
+        />
+      </Accordion.Content>
+    );
+    rootPanels.push(x);
+  });
+
+  return <Accordion activeIndex={activeIndex} panels={rootPanels} />;
+};
+
+function HeaderMenuPopUp({
+  menuItems,
+  menuItemsLayouts,
+  renderMenuItem,
+  pathName,
+  onClose,
+  triggerRefs,
+  activeItem,
+  visible,
+}) {
+  const nodeRef = React.useRef();
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  const menuItem = menuItems.find(
+    (current) => current.url === activeItem || current['@id'] === activeItem,
+  );
+
+  const layout =
+    !!menuItemsLayouts &&
+    Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
+    menuItemsLayouts[menuItem.url];
+
+  return (
+    <Transition visible={visible} animation="slide down" duration={300}>
+      <div id="mega-menu" ref={nodeRef}>
+        <Container>
+          {menuItem && (
+            <div className="menu-content tablet hidden mobile hidden">
+              {/* Inverted right labeled button as a category title,
+                  for topics the button goes inside the grid */}
+              {menuItem.title && (
+                <div className="mega-menu-title">
+                  {renderMenuItem(
+                    menuItem,
+                    { className: 'ui button inverted icon right labeled' },
+                    {
+                      iconPosition: 'right',
+                      children: (
+                        <>
+                          {/* Add word overview to titles */}
+                          <span> overview</span>
+                          <Icon
+                            className={'arrow right icon'}
+                            alt={'Title icon'}
+                          />
+                        </>
+                      ),
+                    },
+                  )}
+                </div>
+              )}
+              <StandardMegaMenuGrid
+                menuItem={menuItem}
+                renderMenuItem={renderMenuItem}
+                layout={layout}
+              />
+            </div>
+          )}
+          <div className="tablet only mobile only">
+            <NestedAccordion
+              menuItems={menuItems}
+              renderMenuItem={renderMenuItem}
+              pathName={pathName}
+            />
+          </div>
+        </Container>
+      </div>
+    </Transition>
+  );
+}
+
+export default HeaderMenuPopUp;

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js

@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react';
+import { Container, Input, List } from 'semantic-ui-react';
+import { withRouter, Link } from 'react-router-dom';
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers';
+
+const getRandomItems = (arr, max) => {
+  return (
+    arr?.slice(0, max).map(function () {
+      return this.splice(Math.floor(Math.random() * this.length), 1)[0];
+    }, arr.slice()) || []
+  );
+};
+
+function HeaderSearchPopUp({
+  history,
+  location,
+  onClose,
+  searchInputRef,
+  headerSearchBox,
+  triggerRefs = [],
+}) {
+  const nodeRef = React.useRef();
+  const headerSearchViews = headerSearchBox || [];
+  const defaultView = headerSearchViews.filter((v) => v.isDefault);
+  const localView = headerSearchViews.filter((v) =>
+    location.pathname.match(v.matchpath ? v.matchpath : v.path),
+  );
+  const activeView = localView.length > 0 ? localView[0] : defaultView[0];
+
+  const {
+    path = '',
+    buttonTitle,
+    buttonUrl,
+    description,
+    placeholder = 'Search',
+    searchSuggestions,
+  } = activeView || {};
+  const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
+
+  const [visibleSuggestions, setVisibileSuggestions] = React.useState(
+    getRandomItems(suggestions, maxToShow),
+  );
+
+  useEffect(() => {
+    setVisibileSuggestions(getRandomItems(suggestions, maxToShow));
+  }, [maxToShow, suggestions]);
+
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  const onSubmit = (event) => {
+    const text = searchInputRef?.current?.inputRef?.current?.value;
+    history.push(`${path}?q=${text}`);
+
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: text });
+    }
+
+    onClose();
+    event.preventDefault();
+  };
+
+  const onClickHandler = (suggestion) => {
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: suggestion });
+    }
+
+    onClose();
+  };
+
+  return (
+    <div id="search-box" ref={nodeRef}>
+      <div className="wrapper">
+        <Container>
+          <form method="get" onSubmit={onSubmit}>
+            <Input
+              ref={searchInputRef}
+              className="icon search"
+              action={{
+                className: 'icon ri-search-line',
+                'aria-label': 'Submit search',
+                onClick: onSubmit,
+                onKeyDown: (event) => {
+                  handleEnterKeyPress(event, onSubmit);
+                },
+              }}
+              placeholder={placeholder}
+              fluid
+            />
+          </form>
+          {searchSuggestions && suggestions.length > 0 && (
+            <div className="search-suggestions">
+              {suggestionsTitle && <h4>{suggestionsTitle}</h4>}
+
+              <List>
+                {visibleSuggestions.map((item, i) => {
+                  return (
+                    <List.Item key={i}>
+                      <Link
+                        to={`${path}?q=${item}`}
+                        onClick={() => onClickHandler(item)}
+                      >
+                        {item}
+                      </Link>
+                    </List.Item>
+                  );
+                })}
+              </List>
+            </div>
+          )}
+        </Container>
+        {buttonTitle && (
+          <div className="advanced-search">
+            <Container>
+              <div>{description}</div>
+              <a
+                href={buttonUrl || defaultView[0].path}
+                className="ui button white inverted"
+                title="Advanced search"
+              >
+                {buttonTitle}
+              </a>
+            </Container>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(HeaderSearchPopUp);

package/src/helpers/Utils.jsx

@@ -121,7 +121,7 @@ export const PublishedModifiedInfo = (props) => {
 export const DocumentsList = (props) => {
   const { content } = props;
   const files = content.cca_files;
-  if (files.length === 0) {
+  if (!files || files.length === 0) {
     return null;
   }
 

package/src/index.js

@@ -310,5 +310,3 @@ const applyConfig = (config) => {
 };
 
 export default applyConfig;
-
-// ('emit("_all_"); def clusters_settings = [["name": "News", "values": ["News","Article"]],["name": "Publications", "values": ["Report","Indicator","Briefing","Topic page","Country fact sheet"]],["name": "Maps and charts", "values": ["Figure (chart/map)","Chart (interactive)","Infographic","Dashboard","Map (interactive)"]],["name": "Data", "values": ["Data set"]],["name": "Others", "values": ["Webpage","Organisation","FAQ","Video","Contract opportunity","Glossary term","Collection","File","Adaptation option","Guidance","Research and knowledge project","Information portal","Tool","Case study","External data reference","Publication reference"]]]; def vals = doc[\'objectProvides\']; def clusters = [\'All\']; for (val in vals) { for (cs in clusters_settings) { if (cs.values.contains(val)) { emit(cs.name) } } }');

package/theme/globals/site.overrides

@@ -23,6 +23,38 @@ p.has--clear--both:empty {
   display: block;
 }
 
+// Add icon for external links
+#page-document {
+  a[rel='noopener noreferrer']:not(.ui.button),
+  a[target='_blank']:not(.ui.button) {
+    &:before {
+      position: relative;
+      top: 2px;
+      margin-right: 3px;
+      color: inherit;
+      content: '\ecaf';
+      font-family: remixicon;
+      font-size: 1em;
+    }
+
+    &:visited {
+      &:before {
+        // fix visited link icon color
+        // doesn't work with color: inherit
+        color: @linkVisitedColor;
+      }
+    }
+
+    &:active {
+      &:before {
+        // fix active link icon color
+        // doesn't work with color: inherit
+        color: @linkActiveColor;
+      }
+    }
+  }
+}
+
 // Adaptation option view styles
 div.adaptation-option-view,
 div.case-study-view {
@@ -126,10 +158,6 @@ body.subsite-mkh {
     }
   }
 
-  .eea.header .eea-logo {
-    max-width: 252px;
-  }
-
   .subfooter .footer-description {
     margin-top: 3em;
     margin-bottom: 1em;
@@ -147,12 +175,6 @@ body.subsite-mkh {
   }
 
   .main-menu {
-    .ui.text.menu {
-      position: absolute;
-      right: 80px;
-      width: 120% !important;
-    }
-
     .item a {
       color: @blue-1;
     }
@@ -171,24 +193,6 @@ body.subsite-mkh {
     background-color: @green-1;
   }
 
-  .eea.header .subsite-logo {
-    z-index: 1;
-    height: 100%;
-
-    .logo {
-      display: inline-block;
-      height: 100%;
-
-      img {
-        max-width: 320px;
-      }
-    }
-
-    &:before {
-      background-color: transparent;
-    }
-  }
-
   .eea.banner {
     background: @green-1;
   }
@@ -209,12 +213,6 @@ body.subsite-mkh {
   }
 }
 
-@media only screen and (min-width: @largestSmallMonitor) {
-  .eea.header .subsite-logo {
-    left: 280px !important;
-  }
-}
-
 body.view-viewview .full {
   position: relative !important;
   right: 50%;
@@ -294,28 +292,98 @@ body.view-viewview.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed) {
 /* Mission: Latest news updates, Latest events */
 body.subsite-root.section-mission {
   div.columns-view {
-    div.block.listing.default {
+    div.block.listing.default,
+    div.block.listing.summary {
       div.items {
         div.listing-item {
-          h4 {
-            padding-left: 1.5em;
-            margin-bottom: 0.5em;
-
-            &:before {
-              position: absolute;
-              left: 0;
-              content: '\ea6c';
-              font-family: remixicon !important;
-              font-style: normal;
-              font-weight: normal;
-            }
-          }
-          padding-bottom: 0.5em;
           border: none;
           margin-bottom: 0px !important;
         }
+
+        .listing-body {
+          position: relative;
+          padding-left: 2em;
+
+          &:before {
+            position: absolute;
+            top: -5px;
+            left: 0;
+            color: inherit;
+            content: '\ea6c';
+            font-family: remixicon !important;
+            font-size: 1.5em;
+          }
+        }
         margin-top: 1.5em;
       }
     }
+
+    div.block.listing.summary {
+      .u-item {
+        padding: 0 0 0.8em 0;
+      }
+    }
+
+    div.block.listing.default {
+      div.listing-item {
+        padding-bottom: 0.5em;
+
+        h4 {
+          margin-bottom: 0.5em;
+        }
+      }
+    }
   }
 }
+
+body.subsite {
+  .eea.header {
+    .logo-wrapper {
+      .eea-logo {
+        max-width: 252px;
+      }
+    }
+
+    .subsite-logo {
+      position: relative !important;
+      top: auto !important;
+      left: auto !important;
+      transform: none !important;
+
+      .logo {
+        img {
+          max-width: 320px;
+        }
+      }
+
+      &:before {
+        background-color: transparent !important;
+      }
+    }
+  }
+}
+
+#main .main.bar {
+  .ui.container {
+    .ui.text.menu {
+      width: 100%;
+    }
+  }
+}
+
+.main-menu {
+  align-items: normal !important;
+  column-gap: 1em;
+
+  > .header-wrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+.header-actions {
+  display: flex;
+  margin-right: auto;
+}