@eeacms/volto-marine-policy 1.0.0

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -0,0 +1,272 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react';
+import { Dropdown, Image } from 'semantic-ui-react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+
+import { withRouter } from 'react-router-dom';
+import { UniversalLink } from '@plone/volto/components';
+import {
+  getBaseUrl,
+  hasApiExpander,
+  flattenToAppURL,
+} from '@plone/volto/helpers';
+import { getNavigation } from '@plone/volto/actions';
+import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
+import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
+import { find } from 'lodash';
+import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
+import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+
+import config from '@plone/volto/registry';
+import { compose } from 'recompose';
+import { BodyClass } from '@plone/volto/helpers';
+
+import cx from 'classnames';
+
+function removeTrailingSlash(path) {
+  return path.replace(/\/+$/, '');
+}
+
+/**
+ * EEA Specific Header component.
+ */
+const EEAHeader = ({ pathname, token, items, history, subsite }) => {
+  const currentLang = useSelector((state) => state.intl.locale);
+  const translations = useSelector(
+    (state) => state.content.data?.['@components']?.translations?.items,
+  );
+
+  const router_pathname = useSelector((state) => {
+    return removeTrailingSlash(state.router?.location?.pathname) || '';
+  });
+
+  const isSubsite = subsite?.['@type'] === 'Subsite';
+
+  const isHomePageInverse = useSelector((state) => {
+    const layout = state.content?.data?.layout;
+    const has_home_layout =
+      layout === 'homepage_inverse_view' ||
+      (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
+    return (
+      router_pathname.endsWith('/marine') ||
+      (has_home_layout &&
+        (removeTrailingSlash(pathname) === router_pathname ||
+          router_pathname.endsWith('/edit')))
+    );
+  });
+
+  const { eea } = config.settings;
+  const headerOpts = eea.headerOpts || {};
+  const headerSearchBox = eea.headerSearchBox || [];
+  const { logo, logoWhite } = headerOpts || {};
+  const width = useSelector((state) => state.screen?.width);
+  const dispatch = useDispatch();
+  const previousToken = usePrevious(token);
+  const [language, setLanguage] = React.useState(
+    currentLang || eea.defaultLanguage,
+  );
+
+  React.useEffect(() => {
+    const { settings } = config;
+    const base_url = getBaseUrl(pathname);
+    if (!hasApiExpander('navigation', base_url)) {
+      dispatch(getNavigation(base_url, settings.navDepth));
+    }
+  }, [pathname, dispatch]);
+
+  React.useEffect(() => {
+    if (token !== previousToken) {
+      const { settings } = config;
+      const base = getBaseUrl(pathname);
+      if (!hasApiExpander('navigation', base)) {
+        dispatch(getNavigation(base, settings.navDepth));
+      }
+    }
+  }, [token, dispatch, pathname, previousToken]);
+
+  return (
+    <Header menuItems={items}>
+      {isHomePageInverse && <BodyClass className="homepage" />}
+      <Header.TopHeader>
+        <Header.TopItem className="official-union">
+          <Image src={eeaFlag} alt="eea flag"></Image>
+          <Header.TopDropdownMenu
+            text="An official website of the European Union | How do you know?"
+            tabletText="EEA information systems"
+            mobileText=" "
+            icon="chevron down"
+            aria-label="dropdown"
+            className=""
+            viewportWidth={width}
+          >
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+            <div
+              className="content"
+              onClick={(evt) => evt.stopPropagation()}
+              onKeyDown={(evt) => evt.stopPropagation()}
+            >
+              <p>
+                All official European Union website addresses are in the{' '}
+                <b>europa.eu</b> domain.
+              </p>
+              <a
+                href="https://europa.eu/european-union/contact/institutions-bodies_en"
+                target="_blank"
+                rel="noopener"
+                onKeyDown={(evt) => evt.stopPropagation()}
+              >
+                See all EU institutions and bodies
+              </a>
+            </div>
+          </Header.TopDropdownMenu>
+        </Header.TopItem>
+
+        {!!headerOpts.partnerLinks && (
+          <Header.TopItem>
+            <Header.TopDropdownMenu
+              id="theme-sites"
+              text={headerOpts.partnerLinks.title}
+              viewportWidth={width}
+            >
+              <div className="wrapper">
+                {headerOpts.partnerLinks.links.map((item, index) => (
+                  <Dropdown.Item key={index}>
+                    <a
+                      href={item.href}
+                      className="site"
+                      target="_blank"
+                      rel="noopener"
+                      onKeyDown={(evt) => evt.stopPropagation()}
+                    >
+                      {item.title}
+                    </a>
+                  </Dropdown.Item>
+                ))}
+              </div>
+            </Header.TopDropdownMenu>
+          </Header.TopItem>
+        )}
+
+        {config.settings.isMultilingual && (
+          <Header.TopDropdownMenu
+            id="language-switcher"
+            className="item"
+            hasLanguageDropdown={
+              config.settings.supportedLanguages.length > 1 &&
+              config.settings.hasLanguageDropdown
+            }
+            text={`${language.toUpperCase()}`}
+            mobileText={`${language.toUpperCase()}`}
+            icon={
+              <Image src={globeIcon} alt="language dropdown globe icon"></Image>
+            }
+            viewportWidth={width}
+          >
+            <ul
+              className="wrapper language-list"
+              role="listbox"
+              aria-label="language switcher"
+            >
+              {eea.languages.map((item, index) => (
+                <Dropdown.Item
+                  as="li"
+                  key={index}
+                  text={
+                    <span>
+                      {item.name}
+                      <span className="country-code">
+                        {item.code.toUpperCase()}
+                      </span>
+                    </span>
+                  }
+                  onClick={() => {
+                    const translation = find(translations, {
+                      language: item.code,
+                    });
+                    const to = translation
+                      ? flattenToAppURL(translation['@id'])
+                      : `/${item.code}`;
+                    setLanguage(item.code);
+                    history.push(to);
+                  }}
+                ></Dropdown.Item>
+              ))}
+            </ul>
+          </Header.TopDropdownMenu>
+        )}
+      </Header.TopHeader>
+      <Header.Main
+        pathname={pathname}
+        headerSearchBox={headerSearchBox}
+        inverted={isHomePageInverse ? true : false}
+        transparency={isHomePageInverse ? true : false}
+        logo={
+          <div {...(isSubsite ? { className: 'logo-wrapper' } : {})}>
+            <Logo
+              src={isHomePageInverse ? logoWhite : logo}
+              title={eea.websiteTitle}
+              alt={eea.organisationName}
+              url={eea.logoTargetUrl}
+            />
+
+            {!!subsite && subsite.title && (
+              <UniversalLink item={subsite} className="subsite-logo">
+                {subsite.subsite_logo ? (
+                  <Image
+                    src={subsite.subsite_logo.scales.mini.download}
+                    alt={subsite.title}
+                  />
+                ) : (
+                  subsite.title
+                )}
+              </UniversalLink>
+            )}
+          </div>
+        }
+        menuItems={items}
+        renderGlobalMenuItem={(item, { onClick }) => (
+          <a
+            href={item.url || '/'}
+            title={item.title}
+            onClick={(e) => {
+              e.preventDefault();
+              onClick(e, item);
+            }}
+          >
+            {item.title}
+          </a>
+        )}
+        renderMenuItem={(item, options, props) => (
+          <UniversalLink
+            href={item.url || '/'}
+            title={item.nav_title || item.title}
+            {...(options || {})}
+            className={cx(options?.className, {
+              active: item.url === router_pathname,
+            })}
+          >
+            {props?.iconPosition !== 'right' && props?.children}
+            <span>{item.nav_title || item.title}</span>
+            {props?.iconPosition === 'right' && props?.children}
+          </UniversalLink>
+        )}
+      ></Header.Main>
+    </Header>
+  );
+};
+
+export default compose(
+  withRouter,
+  connect(
+    (state) => ({
+      token: state.userSession.token,
+      items: state.navigation.items,
+      subsite: state.content.data?.['@components']?.subsite,
+    }),
+    { getNavigation },
+  ),
+)(EEAHeader);

package/src/helpers/index.js

@@ -0,0 +1,2 @@
+export useCopyToClipboard from './useCopyToClipboard';
+export useOutsideClick from './useOutsideClick';

package/src/helpers/useCopyToClipboard.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = React.useState('inactive');
+  const copy = React.useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  React.useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};
+
+export default useCopyToClipboard;

package/src/helpers/useOutsideClick.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  });
+
+  return [ref];
+};
+
+export default useOutsideClick;

package/src/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 32C25.732 32 32 25.732 32 18C32 10.268 25.732 4 18 4C10.268 4 4 10.268 4 18C4 25.732 10.268 32 18 32ZM27.4141 18.0001L19.707 25.7072L18.2927 24.293L23.5857 19H8V17H23.5856L18.2927 11.7072L19.707 10.293L27.4141 18.0001Z"/>
+</svg>

package/src/icons/basket.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd"  d="M6 9V12H8H28H30V9H6ZM5 14H7V29C7 29.5523 7.44772 30 8 30H28C28.5523 30 29 29.5523 29 29V14H31C31.5523 14 32 13.5523 32 13V8C32 7.44772 31.5523 7 31 7H5C4.44772 7 4 7.44772 4 8V13C4 13.5523 4.44771 14 5 14ZM9 28V14H27V28H9ZM14 18H22C22.5523 18 23 18.4477 23 19C23 19.5523 22.5523 20 22 20H14C13.4477 20 13 19.5523 13 19C13 18.4477 13.4477 18 14 18ZM11 19C11 17.3431 12.3431 16 14 16H22C23.6569 16 25 17.3431 25 19C25 20.6569 23.6569 22 22 22H14C12.3431 22 11 20.6569 11 19Z" />
+</svg>

package/src/icons/newspaper.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 8V9V22H26.0312C26.5515 22 27 21.5672 27 21V8H8ZM8 24H6H4C2.34315 24 1 22.6569 1 21V11C1 9.89543 1.89543 9 3 9H6V7.66667C6 6.7611 6.72674 6 7.65625 6H27.3438C28.2732 6 29 6.76105 29 7.66667V21C29 22.6419 27.6856 24 26.0312 24H8ZM6 11H3V21C3 21.5523 3.44772 22 4 22H6V11ZM11 11V13H16V11H11ZM10 9C9.44772 9 9 9.44772 9 10V14C9 14.5523 9.44771 15 10 15H17C17.5523 15 18 14.5523 18 14V10C18 9.44772 17.5523 9 17 9H10ZM19 11C19 10.4477 19.4477 10 20 10H25C25.5523 10 26 10.4477 26 11C26 11.5523 25.5523 12 25 12H20C19.4477 12 19 11.5523 19 11ZM20 13C19.4477 13 19 13.4477 19 14C19 14.5523 19.4477 15 20 15H25C25.5523 15 26 14.5523 26 14C26 13.4477 25.5523 13 25 13H20ZM9 17C9 16.4477 9.44772 16 10 16H25C25.5523 16 26 16.4477 26 17C26 17.5523 25.5523 18 25 18H10C9.44771 18 9 17.5523 9 17ZM10 19C9.44772 19 9 19.4477 9 20C9 20.5523 9.44771 21 10 21H25C25.5523 21 26 20.5523 26 20C26 19.4477 25.5523 19 25 19H10Z" />
+</svg>

package/src/icons/popup.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 7H7V23H23V7ZM7 5H5V7V23V25H7H23H25V23V7V5H23H7ZM9 10H15V12H9V10ZM21 16V14H9V16H21ZM21 18V20H9V18H21ZM29 11H27V9H31V31H9V27H11V29H29V11Z" />
+</svg>

package/src/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9309 24.0522C20.2716 25.2765 18.2202 26 16 26C10.4772 26 6 21.5228 6 16C6 10.4772 10.4772 6 16 6C21.5228 6 26 10.4772 26 16C26 18.2202 25.2765 20.2716 24.0522 21.9309L28.8389 26.7175C29.4247 27.3033 29.4247 28.2531 28.8389 28.8389C28.2531 29.4246 27.3033 29.4246 26.7175 28.8389L21.9309 24.0522ZM23 16C23 19.866 19.866 23 16 23C12.134 23 9 19.866 9 16C9 12.134 12.134 9 16 9C19.866 9 23 12.134 23 16Z" />
+</svg>

package/src/icons/star-full.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" d="M13.5066 12.948L3.40259 14.416L10.7136 21.543L8.98859 31.607L18.0256 26.856L27.0636 31.607L25.3366 21.543L32.6486 14.416L22.5446 12.948L18.0256 3.79199L13.5066 12.948Z"/>
+</svg>

package/src/icons/user.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0586 24.5466C29.2864 22.6639 30 20.4153 30 18C30 11.3726 24.6274 6 18 6C11.3726 6 6 11.3726 6 18C6 20.155 6.56808 22.1774 7.56265 23.9255C10.1493 21.4928 13.6496 20 17.5 20C21.6681 20 25.426 21.7493 28.0586 24.5466ZM26.8119 26.1457C24.537 23.6037 21.2101 22 17.5 22C14.0646 22 10.9577 23.3751 8.71039 25.5968C10.911 28.2847 14.2552 30 18 30C21.4832 30 24.6197 28.516 26.8119 26.1457ZM18 32C25.732 32 32 25.732 32 18C32 10.268 25.732 4 18 4C10.268 4 4 10.268 4 18C4 25.732 10.268 32 18 32ZM18 16C19.6569 16 21 14.6569 21 13C21 11.3431 19.6569 10 18 10C16.3431 10 15 11.3431 15 13C15 14.6569 16.3431 16 18 16ZM18 18C20.7614 18 23 15.7614 23 13C23 10.2386 20.7614 8 18 8C15.2386 8 13 10.2386 13 13C13 15.7614 15.2386 18 18 18Z" />
+</svg>