@eeacms/volto-eea-website-theme 1.1.0 → 1.3.0

package/.project.eslintrc.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project');    // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 

package/CHANGELOG.md

@@ -4,6 +4,46 @@ 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).
 
+### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
+
+#### :rocket: New Features
+
+- feat(footer): Get footer, copyright, social and contact actions from backend - refs #151856 [Alin Voinea - [`2560a5f`](https://github.com/eea/volto-eea-website-theme/commit/2560a5f57262999b1aa0bd3fa949cc33dd85bd31)]
+
+#### :bug: Bug Fixes
+
+- fix(header): removed capitalization of Know from header dropdown section [David Ichim - [`14b45a3`](https://github.com/eea/volto-eea-website-theme/commit/14b45a391abf039357f8f19e64b9b04402e8ba4c)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.3.0 [Alin Voinea - [`082f468`](https://github.com/eea/volto-eea-website-theme/commit/082f468fd56a37063b7d80fcfc6f5f599b74e7c4)]
+### [1.2.0](https://github.com/eea/volto-eea-website-theme/compare/1.1.0...1.2.0) - 16 November 2022
+
+#### :rocket: New Features
+
+- feat(dependencies): volto-subsites [Alin Voinea - [`7e196b3`](https://github.com/eea/volto-eea-website-theme/commit/7e196b3ba0ffdae32d15fc1a9a020a7f760461ac)]
+
+#### :bug: Bug Fixes
+
+- fix(eslint): remove .project.eslintrc.js [Miu Razvan - [`5cf763f`](https://github.com/eea/volto-eea-website-theme/commit/5cf763f4451dab6b63705b8346912145e6b8cc73)]
+
+#### :nail_care: Enhancements
+
+- change(theme): modified volto-columns-block padding and margin values [David Ichim - [`830b571`](https://github.com/eea/volto-eea-website-theme/commit/830b5711c89c3bcceda01a5cf9372ae4118dfa9d)]
+- change(theme): modified path for site theme [David Ichim - [`3996f88`](https://github.com/eea/volto-eea-website-theme/commit/3996f8836741242fd75517a5a5a9c5180be75aad)]
+- change(website-theme): removed dependency on slate now that plone has slate builtin [David Ichim - [`5840c03`](https://github.com/eea/volto-eea-website-theme/commit/5840c03a8f2c89e44014c93b2b2198467d111b84)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.2.0 [Alin Voinea - [`567f1b1`](https://github.com/eea/volto-eea-website-theme/commit/567f1b12d6915f960b73016de3ac53e00a47e9f7)]
+- Add volto-subsite dependency [kreafox - [`7f2751f`](https://github.com/eea/volto-eea-website-theme/commit/7f2751f3da169138971e3c06b932bbe6fb909abf)]
+- Remove console.log [kreafox - [`098f028`](https://github.com/eea/volto-eea-website-theme/commit/098f0282f8694e164b1724c214706c566943e340)]
+- Fix undefined error [kreafox - [`461d693`](https://github.com/eea/volto-eea-website-theme/commit/461d6938630d0c110e9c9f369846bfaac314ea2c)]
+- Improve subsite [kreafox - [`108b03a`](https://github.com/eea/volto-eea-website-theme/commit/108b03a8d31bf642509f0ab9c624aa0309b5faec)]
+- Add .project.eslintrc.js [Alin Voinea - [`b7be5f5`](https://github.com/eea/volto-eea-website-theme/commit/b7be5f5628f555100293e06e9fd7a25b8b7ec16b)]
+- Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
+- Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
+- fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -14,7 +14,8 @@
     "react"
   ],
   "addons": [
-    "@eeacms/volto-eea-design-system"
+    "@eeacms/volto-eea-design-system",
+    "volto-subsites"
   ],
   "repository": {
     "type": "git",
@@ -22,8 +23,7 @@
   },
   "dependencies": {
     "@eeacms/volto-eea-design-system": "*",
-    "slate": "^0.71.0",
-    "slate-react": "^0.71.0"
+    "volto-subsites": "*"
   },
   "devDependencies": {
     "@plone/scripts": "*",

package/src/components/theme/SubsiteClass.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { BodyClass } from '@plone/volto/helpers';
+import { isSubsiteRoot } from 'volto-subsites/utils';
+
+const SubsiteClass = () => {
+  const subsite = useSelector(
+    (state) => state.content?.data?.['@components']?.subsite || {},
+  );
+  const location = useLocation();
+
+  return (
+    <BodyClass
+      className={cx('subsite', `subsite-${subsite.subsite_css_class?.token}`, {
+        'subsite-root': isSubsiteRoot(location.pathname, subsite),
+      })}
+    />
+  );
+};
+export default SubsiteClass;

package/src/config.js

@@ -8,7 +8,8 @@ import copernicusLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/
 import industryLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
 import marineLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
 import eionetLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
-import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
+import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
+import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
 import climateLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/climate-health.svg';
 
 // TODO: to be consolidated with headerLinks
@@ -92,7 +93,7 @@ export const footerOpts = {
   managedBy: [
     {
       link: 'https://www.eea.europa.eu/',
-      src: eeaLogo,
+      src: eeaWhiteLogo,
       alt: 'EEA Logo',
       className: 'site logo',
       columnSize: {
@@ -175,42 +176,47 @@ export const footerOpts = {
   address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
 };
 
-export const globalHeaderPartnerLinks = {
-  title: 'Environmental information systems',
-  links: [
-    {
-      title: 'Biodiversity Information System for Europe',
-      href: 'https://biodiversity.europa.eu/',
-    },
-    {
-      title: 'Climate Adaptation Platform',
-      href: 'https://climate-adapt.eea.europa.eu/',
-    },
-    {
-      title: 'Copernicus in situ component',
-      href: 'https://insitu.copernicus.eu/',
-    },
-    {
-      title: 'European Industrial Emissions Portal',
-      href: 'https://industry.eea.europa.eu/',
-    },
-    {
-      title: 'Forest Information System for Europe',
-      href: 'https://forest.eea.europa.eu/',
-    },
-    {
-      title: 'Information Platform for Chemical Monitoring',
-      href: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
-    },
-    {
-      title: 'Marine Water Information System for Europe',
-      href: 'https://water.europa.eu/marine',
-    },
-    {
-      title: 'Fresh Water Information System for Europe',
-      href: 'https://water.europa.eu/freshwater',
-    },
-  ],
+// Header.jsx config options
+export const headerOpts = {
+  logo: eeaLogo,
+  logoWhite: eeaWhiteLogo,
+  partnerLinks: {
+    title: 'Environmental information systems',
+    links: [
+      {
+        title: 'Biodiversity Information System for Europe',
+        href: 'https://biodiversity.europa.eu/',
+      },
+      {
+        title: 'Climate Adaptation Platform',
+        href: 'https://climate-adapt.eea.europa.eu/',
+      },
+      {
+        title: 'Copernicus in situ component',
+        href: 'https://insitu.copernicus.eu/',
+      },
+      {
+        title: 'European Industrial Emissions Portal',
+        href: 'https://industry.eea.europa.eu/',
+      },
+      {
+        title: 'Forest Information System for Europe',
+        href: 'https://forest.eea.europa.eu/',
+      },
+      {
+        title: 'Information Platform for Chemical Monitoring',
+        href: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
+      },
+      {
+        title: 'Marine Water Information System for Europe',
+        href: 'https://water.europa.eu/marine',
+      },
+      {
+        title: 'Fresh Water Information System for Europe',
+        href: 'https://water.europa.eu/freshwater',
+      },
+    ],
+  },
 };
 
 export const languages = [

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

@@ -4,20 +4,75 @@
  */
 
 import React from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
 import config from '@plone/volto/registry';
 
-const Footer = (props) => {
+const Footer = () => {
   const { eea } = config.settings;
+  const {
+    footerActions = [],
+    copyrightActions = [],
+    socialActions = [],
+    contactActions = [],
+  } = useSelector(
+    (state) => ({
+      footerActions: state.actions?.actions?.footer_actions,
+      copyrightActions: state.actions?.actions?.copyright_actions,
+      socialActions: state.actions?.actions?.social_actions,
+      contactActions: state.actions?.actions?.contact_actions,
+    }),
+    shallowEqual,
+  );
+  // ZMI > portal_actions > footer_actions
+  const actions = footerActions.length
+    ? footerActions.map((action) => ({
+        title: action.title,
+        link: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.actions;
+
+  // ZMI > portal_actions > copyright_actions
+  const copyright = copyrightActions.length
+    ? copyrightActions.map((action) => ({
+        title: action.title,
+        site: action.title,
+        link: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.copyright;
+
+  // ZMI > portal_actions > social_actions
+  const social = socialActions.length
+    ? socialActions.map((action) => ({
+        name: action.id,
+        icon: action.icon,
+        link: action.url,
+      }))
+    : eea.footerOpts.social;
+
+  // ZMI > portal_actions > contact_actions
+  const contacts = contactActions.length
+    ? contactActions.map((action) => ({
+        text: action.title,
+        icon: action.icon,
+        link: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.contacts;
+
+  // Update options with actions from backend
+  const options = {
+    ...eea.footerOpts,
+    social,
+    contacts,
+  };
+
   return (
     <EEAFooter>
-      <EEAFooter.SubFooter {...eea.footerOpts} />
+      <EEAFooter.SubFooter {...options} />
       <EEAFooter.Header>{eea.footerOpts.header}</EEAFooter.Header>
       <EEAFooter.Sites sites={eea.footerOpts.sites} />
-      <EEAFooter.Actions
-        actions={eea.footerOpts.actions}
-        copyright={eea.footerOpts.copyright}
-      />
+      <EEAFooter.Actions actions={actions} copyright={copyright} />
     </EEAFooter>
   );
 };

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

@@ -18,8 +18,6 @@ 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 WhiteLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
-import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
 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';
 
@@ -29,22 +27,30 @@ 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 }) => {
+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 state.router?.location?.pathname || '';
+    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';
+    const has_home_layout =
+      layout === 'homepage_inverse_view' ||
+      (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
     return (
       has_home_layout &&
       (pathname === router_pathname || router_pathname.endsWith('/edit'))
@@ -52,6 +58,8 @@ const EEAHeader = ({ pathname, token, items, history }) => {
   });
 
   const { eea } = config.settings;
+  const headerOpts = eea.headerOpts || {};
+  const { logo, logoWhite } = headerOpts || {};
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
   const previousToken = usePrevious(token);
@@ -84,7 +92,7 @@ const EEAHeader = ({ pathname, token, items, history }) => {
         <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?"
+            text="An official website of the European Union | How do you know?"
             tabletText="EEA information systems"
             mobileText=" "
             icon="chevron down"
@@ -116,82 +124,94 @@ const EEAHeader = ({ pathname, token, items, history }) => {
           </Header.TopDropdownMenu>
         </Header.TopItem>
 
-        <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="noreferrer"
+                    >
+                      {item.title}
+                    </a>
+                  </Dropdown.Item>
+                ))}
+              </div>
+            </Header.TopDropdownMenu>
+          </Header.TopItem>
+        )}
+
+        {config.settings.isMultilingual && (
           <Header.TopDropdownMenu
-            id="theme-sites"
-            text={eea.globalHeaderPartnerLinks.title}
+            id="language-switcher"
+            className="item"
+            text={`${language.toUpperCase()}`}
+            mobileText={`${language.toUpperCase()}`}
+            icon={
+              <Image src={globeIcon} alt="language dropdown globe icon"></Image>
+            }
             viewportWidth={width}
           >
-            <div className="wrapper">
-              {eea.globalHeaderPartnerLinks.links.map((item, index) => (
-                <Dropdown.Item key={index}>
-                  <a
-                    href={item.href}
-                    className="site"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {item.title}
-                  </a>
-                </Dropdown.Item>
+            <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>
               ))}
-            </div>
+            </ul>
           </Header.TopDropdownMenu>
-        </Header.TopItem>
-
-        <Header.TopDropdownMenu
-          id="language-switcher"
-          className="item"
-          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}
         inverted={isHomePageInverse ? true : false}
         transparency={isHomePageInverse ? true : false}
         logo={
-          <Logo
-            src={isHomePageInverse ? WhiteLogoImage : LogoImage}
-            title={eea.websiteTitle}
-            alt={eea.organisationName}
-            url={eea.logoTargetUrl}
-          />
+          <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.title}
+              </UniversalLink>
+            )}
+          </div>
         }
         menuItems={items}
         renderGlobalMenuItem={(item, { onClick }) => (
@@ -231,6 +251,7 @@ export default compose(
     (state) => ({
       token: state.userSession.token,
       items: state.navigation.items,
+      subsite: state.content.data?.['@components']?.subsite,
     }),
     { getNavigation },
   ),

package/src/index.js

@@ -4,6 +4,7 @@ import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manag
 import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS';
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
+import SubsiteClass from './components/theme/SubsiteClass';
 import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
 import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
 import { Icon } from '@plone/volto/components';
@@ -81,6 +82,10 @@ const applyConfig = (config) => {
       match: '',
       component: DraftBackground,
     },
+    {
+      match: '',
+      component: SubsiteClass,
+    },
   ];
 
   if (config.settings.slate) {

package/theme/addons/volto-addons/columnsBlocks/columns.variables

@@ -0,0 +1,7 @@
+@columnBlocksWrapperPaddingTop: 0;
+@columnBlocksWrapperPaddingBottom: 0;
+
+
+// Column grid
+@columnGridMarginTop: 1rem;
+@columnGridMarginBottom: 1rem;

package/theme/site/Readme.md

@@ -0,0 +1,2 @@
+### Site theme
+- Add here variables and overrides

package/theme/theme.config

@@ -119,7 +119,7 @@
 @themesFolder: '~volto-themes';
 
 /* Path to site override folder */
-@siteFolder: '~@eeacms/volto-eea-website-theme/../theme';
+@siteFolder: '~@eeacms/volto-eea-website-theme/../theme/site';
 
 /*******************************
          Import Theme