@eeacms/volto-eea-website-theme 0.6.3 → 0.6.6

package/CHANGELOG.md

@@ -4,9 +4,34 @@ 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.6.6](https://github.com/eea/volto-eea-website-theme/compare/0.6.5...0.6.6)
+
+- condition config of accordion only if found to avoid error [`21b9cd7`](https://github.com/eea/volto-eea-website-theme/commit/21b9cd7006aed894e0eac5aa4a4b370233b334ab)
+- Add customization for volto-tabs-block [`71878f4`](https://github.com/eea/volto-eea-website-theme/commit/71878f49e9e34f9fbab66c6b805dd9ff6e353b29)
+- change(footer): update footer implementation to use subfooter section #33 [`e4cb3c0`](https://github.com/eea/volto-eea-website-theme/commit/e4cb3c042414ba5811924b40c532738da978fdbd)
+- change(footer): update footer implementation to use latest changes to the subfooter component [`efa23fe`](https://github.com/eea/volto-eea-website-theme/commit/efa23fecee0786c3d9a254c8115b3f28a8be5302)
+
+#### [0.6.5](https://github.com/eea/volto-eea-website-theme/compare/0.6.4...0.6.5)
+
+> 3 June 2022
+
+- fix(tags): Replace customizations of volto-widgets-view with config r… [`#32`](https://github.com/eea/volto-eea-website-theme/pull/32)
+- fix(tags): Replace customizations of volto-widgets-view with config registry [`8f8c6fc`](https://github.com/eea/volto-eea-website-theme/commit/8f8c6fcdc6d48a56fbb35db781432390a703a215)
+
+#### [0.6.4](https://github.com/eea/volto-eea-website-theme/compare/0.6.3...0.6.4)
+
+> 2 June 2022
+
+- Release [`#31`](https://github.com/eea/volto-eea-website-theme/pull/31)
+- Fix: missing translations [`53b0f20`](https://github.com/eea/volto-eea-website-theme/commit/53b0f20daf01f48d81d6b79f9f7a5bcd166b0d2d)
+- Customize Toolbar.jsx - volto 16.0.0-alpha.7 [`b26182f`](https://github.com/eea/volto-eea-website-theme/commit/b26182f9ac7369497f3602fb5842248f7b7da7c5)
+
 #### [0.6.3](https://github.com/eea/volto-eea-website-theme/compare/0.6.2...0.6.3)
 
-- Relase 0.6.3 [`ea16b39`](https://github.com/eea/volto-eea-website-theme/commit/ea16b39873096e16005f360746f4ef92220bc3fd)
+> 2 June 2022
+
+- Relase 0.6.3 [`#30`](https://github.com/eea/volto-eea-website-theme/pull/30)
+- Release [`#29`](https://github.com/eea/volto-eea-website-theme/pull/29)
 - Remove unused languages [`fd988a6`](https://github.com/eea/volto-eea-website-theme/commit/fd988a6f172ad85dd5533e258e0be36e07693717)
 
 #### [0.6.2](https://github.com/eea/volto-eea-website-theme/compare/0.6.1...0.6.2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/config.js

@@ -8,60 +8,151 @@ import ccaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 import copernicusLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/copernicus.svg';
 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.svg';
 
 // TODO: to be consolidated with headerLinks
-export const partnerWebsites = [
-  {
-    link: 'https://biodiversity.europa.eu/',
-    src: biseLogo,
-    alt: 'Biodiversity',
-  },
-  {
-    link: 'https://climate-energy.eea.europa.eu/',
-    src: energyLogo,
-    alt: 'Climate and energy in the EU',
-  },
-  {
-    link: 'https://insitu.copernicus.eu/',
-    src: insituLogo,
-    alt: 'Copernicus in situ',
-  },
-  {
-    link: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
-    src: ipchemLogo,
-    alt: 'Information platform for chemical monitoring',
-  },
-  {
-    link: 'https://water.europa.eu/freshwater',
-    src: freshwaterLogo,
-    alt: 'WISE freshwater',
-  },
-  {
-    link: 'https://forest.eea.europa.eu/',
-    src: fiseLogo,
-    alt: 'Forest information system for europe',
-  },
-  {
-    link: 'https://climate-adapt.eea.europa.eu/',
-    src: ccaLogo,
-    alt: 'Climate adapt',
-  },
-  {
-    link: 'https://land.copernicus.eu/',
-    src: copernicusLogo,
-    alt: 'Copernicus land monitoring service',
-  },
-  {
-    link: 'https://industry.eea.europa.eu/',
-    src: industryLogo,
-    alt: 'European industrial emissions portal',
-  },
-  {
-    link: 'https://water.europa.eu/marine',
-    src: marineLogo,
-    alt: 'WISE marine',
-  },
-];
+// Footer.jsx config options
+export const footerOpts = {
+  header: 'EEA information systems',
+  logosHeader: 'Managed by',
+  contactHeader: 'Contact Us',
+  actions: [
+    {
+      title: 'Login',
+      link: '/login',
+    },
+    {
+      link: '/sitemap',
+      title: 'Sitemap',
+    },
+    {
+      link: '/privacy',
+      title: 'Privacy',
+    },
+    {
+      link: '/copyright',
+      title: 'Copyright',
+      copy: true,
+    },
+  ],
+  sites: [
+    {
+      link: 'https://biodiversity.europa.eu/',
+      src: biseLogo,
+      alt: 'Biodiversity',
+    },
+    {
+      link: 'https://climate-energy.eea.europa.eu/',
+      src: energyLogo,
+      alt: 'Climate and energy in the EU',
+    },
+    {
+      link: 'https://insitu.copernicus.eu/',
+      src: insituLogo,
+      alt: 'Copernicus in situ',
+    },
+    {
+      link: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
+      src: ipchemLogo,
+      alt: 'Information platform for chemical monitoring',
+    },
+    {
+      link: 'https://water.europa.eu/freshwater',
+      src: freshwaterLogo,
+      alt: 'WISE freshwater',
+    },
+    {
+      link: 'https://forest.eea.europa.eu/',
+      src: fiseLogo,
+      alt: 'Forest information system for europe',
+    },
+    {
+      link: 'https://climate-adapt.eea.europa.eu/',
+      src: ccaLogo,
+      alt: 'Climate adapt',
+    },
+    {
+      link: 'https://land.copernicus.eu/',
+      src: copernicusLogo,
+      alt: 'Copernicus land monitoring service',
+    },
+    {
+      link: 'https://industry.eea.europa.eu/',
+      src: industryLogo,
+      alt: 'European industrial emissions portal',
+    },
+    {
+      link: 'https://water.europa.eu/marine',
+      src: marineLogo,
+      alt: 'WISE marine',
+    },
+  ],
+  managedBy: [
+    {
+      link: 'https://www.eea.europa.eu/',
+      src: eeaLogo,
+      alt: 'EEA Logo',
+      className: 'site logo',
+      columnSize: {
+        mobile: 12,
+        tablet: 12,
+        computer: 5,
+      },
+    },
+    {
+      link: 'https://www.eionet.europa.eu/',
+      src: eionetLogo,
+      alt: 'EIONET Logo',
+      className: 'eionet logo',
+      columnSize: {
+        mobile: 12,
+        tablet: 12,
+        computer: 6,
+      },
+    },
+  ],
+  social: [
+    {
+      name: 'twitter',
+      icon: 'ri-twitter-fill',
+      link: 'https://twitter.com/euenvironment',
+    },
+    {
+      name: 'facebook',
+      icon: 'ri-facebook-box-fill',
+      link: 'https://www.facebook.com/European.Environment.Agency',
+    },
+    {
+      name: 'linkedin',
+      icon: 'ri-linkedin-fill',
+      link: 'https://www.linkedin.com/company/european-environment-agency',
+    },
+    {
+      name: 'youtube',
+      icon: 'ri-youtube-fill',
+      link: 'https://www.youtube.com/user/EEAvideos',
+    },
+    {
+      name: 'rss',
+      icon: 'ri-rss-fill',
+      link: '/subscription/news-feeds',
+    },
+  ],
+  contacts: [
+    {
+      icon: 'comment outline',
+      text: 'Ask your question',
+      link: '/contact-us',
+    },
+    {
+      icon: 'envelope outline',
+      text: 'Sign up to our newsletter',
+      link: '/newsletter',
+    },
+  ],
+  address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
+};
 
 export const globalHeaderPartnerLinks = {
   title: 'Environmental information systems',
@@ -101,64 +192,6 @@ export const globalHeaderPartnerLinks = {
   ],
 };
 
-export const globalActions = [
-  {
-    link: '/login',
-    title: 'CMS Login',
-  },
-  {
-    link: '/sitemap',
-    title: 'Sitemap',
-  },
-  {
-    link: '/privacy',
-    title: 'Privacy',
-  },
-  {
-    link: '/copyright',
-    title: 'Copyright',
-    copy: true,
-  },
-];
-
-export const socialActions = [
-  {
-    name: 'twitter',
-    link: 'https://twitter.com/euenvironment',
-  },
-  {
-    name: 'facebook',
-    link: 'https://www.facebook.com/European.Environment.Agency',
-  },
-  {
-    name: 'linkedin',
-    link: 'https://www.linkedin.com/company/european-environment-agency',
-  },
-  {
-    name: 'youtube',
-    link: 'https://www.youtube.com/user/EEAvideos',
-  },
-  {
-    name: 'rss',
-    link: '/subscription/news-feeds',
-  },
-];
-
-export const footerActions = [
-  {
-    icon: 'comment outline',
-    text: 'Ask your question',
-    link: '/contact-us',
-  },
-  {
-    icon: 'envelope outline',
-    text: 'Sign up to our newsletter',
-    link: '/newsletter',
-  },
-];
-
-export const address = 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00';
-
 export const languages = [
   { name: 'Български', code: 'bg' },
   { name: 'čeština', code: 'cs' },

package/src/customizations/volto/components/manage/Toolbar/Toolbar.jsx

@@ -0,0 +1,589 @@
+/**
+ * Toolbar component.
+ * @module components/manage/Toolbar/Toolbar
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import jwtDecode from 'jwt-decode';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { withCookies } from 'react-cookie';
+import { filter, find } from 'lodash';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+import More from '@plone/volto/components/manage/Toolbar/More';
+import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import Types from '@plone/volto/components/manage/Toolbar/Types';
+import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
+import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
+import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
+import {
+  getTypes,
+  listActions,
+  setExpandedToolbar,
+  unlockContent,
+} from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
+import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
+
+import penSVG from '@plone/volto/icons/pen.svg';
+import unlockSVG from '@plone/volto/icons/unlock.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import addSVG from '@plone/volto/icons/add-document.svg';
+import moreSVG from '@plone/volto/icons/more.svg';
+import userSVG from '@plone/volto/icons/user.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit',
+    defaultMessage: 'Edit',
+  },
+  contents: {
+    id: 'Contents',
+    defaultMessage: 'Contents',
+  },
+  add: {
+    id: 'Add',
+    defaultMessage: 'Add',
+  },
+  more: {
+    id: 'More',
+    defaultMessage: 'More',
+  },
+  personalTools: {
+    id: 'Personal tools',
+    defaultMessage: 'Personal tools',
+  },
+  shrinkToolbar: {
+    id: 'Shrink toolbar',
+    defaultMessage: 'Shrink toolbar',
+  },
+  personalInformation: {
+    id: 'Personal Information',
+    defaultMessage: 'Personal Information',
+  },
+  personalPreferences: {
+    id: 'Personal Preferences',
+    defaultMessage: 'Personal Preferences',
+  },
+  collection: {
+    id: 'Collection',
+    defaultMessage: 'Collection',
+  },
+  file: {
+    id: 'File',
+    defaultMessage: 'File',
+  },
+  link: {
+    id: 'Link',
+    defaultMessage: 'Link',
+  },
+  newsItem: {
+    id: 'News Item',
+    defaultMessage: 'News Item',
+  },
+  page: {
+    id: 'Page',
+    defaultMessage: 'Page',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  unlock: {
+    id: 'Unlock',
+    defaultMessage: 'Unlock',
+  },
+});
+
+const toolbarComponents = {
+  personalTools: { component: PersonalTools, wrapper: null },
+  more: { component: More, wrapper: null },
+  types: { component: Types, wrapper: null, contentAsProps: true },
+  profile: {
+    component: PersonalInformation,
+    wrapper: StandardWrapper,
+    wrapperTitle: messages.personalInformation,
+    hideToolbarBody: true,
+  },
+  preferences: {
+    component: PersonalPreferences,
+    wrapper: StandardWrapper,
+    wrapperTitle: messages.personalPreferences,
+    hideToolbarBody: true,
+  },
+};
+
+/**
+ * Toolbar container class.
+ * @class Toolbar
+ * @extends Component
+ */
+class Toolbar extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    actions: PropTypes.shape({
+      object: PropTypes.arrayOf(PropTypes.object),
+      object_buttons: PropTypes.arrayOf(PropTypes.object),
+      user: PropTypes.arrayOf(PropTypes.object),
+    }),
+    token: PropTypes.string,
+    userId: PropTypes.string,
+    pathname: PropTypes.string.isRequired,
+    content: PropTypes.shape({
+      '@type': PropTypes.string,
+      is_folderish: PropTypes.bool,
+      review_state: PropTypes.string,
+    }),
+    getTypes: PropTypes.func.isRequired,
+    types: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string,
+        addable: PropTypes.bool,
+        title: PropTypes.string,
+      }),
+    ),
+    listActions: PropTypes.func.isRequired,
+    unlockContent: PropTypes.func,
+    unlockRequest: PropTypes.objectOf(PropTypes.any),
+    inner: PropTypes.element.isRequired,
+    hideDefaultViewButtons: PropTypes.bool,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    actions: null,
+    token: null,
+    userId: null,
+    content: null,
+    hideDefaultViewButtons: false,
+    types: [],
+  };
+
+  toolbarWindow = React.createRef();
+
+  constructor(props) {
+    super(props);
+    const { cookies } = props;
+    this.state = {
+      expanded: cookies.get('toolbar_expanded') !== 'false',
+      showMenu: false,
+      menuStyle: {},
+      menuComponents: [],
+      loadedComponents: [],
+      hideToolbarBody: false,
+    };
+  }
+
+  /**
+   * Component will mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.listActions(getBaseUrl(this.props.pathname));
+    this.props.getTypes(getBaseUrl(this.props.pathname));
+    this.props.setExpandedToolbar(this.state.expanded);
+    document.addEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.listActions(getBaseUrl(nextProps.pathname));
+      this.props.getTypes(getBaseUrl(nextProps.pathname));
+    }
+
+    // Unlock
+    if (this.props.unlockRequest.loading && nextProps.unlockRequest.loaded) {
+      this.props.listActions(getBaseUrl(nextProps.pathname));
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  handleShrink = () => {
+    const { cookies } = this.props;
+    cookies.set('toolbar_expanded', !this.state.expanded, getCookieOptions());
+    this.setState(
+      (state) => ({ expanded: !state.expanded }),
+      () => this.props.setExpandedToolbar(this.state.expanded),
+    );
+  };
+
+  closeMenu = () =>
+    this.setState(() => ({ showMenu: false, loadedComponents: [] }));
+
+  loadComponent = (type) => {
+    const { loadedComponents } = this.state;
+    if (!this.state.loadedComponents.includes(type)) {
+      this.setState({
+        loadedComponents: [...loadedComponents, type],
+        hideToolbarBody: toolbarComponents[type].hideToolbarBody || false,
+      });
+    }
+  };
+
+  unloadComponent = () => {
+    this.setState((state) => ({
+      loadedComponents: state.loadedComponents.slice(0, -1),
+      hideToolbarBody:
+        toolbarComponents[
+          state.loadedComponents[state.loadedComponents.length - 2]
+        ].hideToolbarBody || false,
+    }));
+  };
+
+  toggleMenu = (e, selector) => {
+    if (this.state.showMenu) {
+      this.closeMenu();
+      return;
+    }
+    // PersonalTools always shows at bottom
+    if (selector === 'personalTools') {
+      this.setState((state) => ({
+        showMenu: !state.showMenu,
+        menuStyle: { bottom: 0 },
+      }));
+    } else {
+      this.setState((state) => ({
+        showMenu: !state.showMenu,
+        menuStyle: { top: 0 },
+      }));
+    }
+    this.loadComponent(selector);
+  };
+
+  handleClickOutside = (e) => {
+    if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+    this.closeMenu();
+  };
+
+  unlock = (e) => {
+    this.props.unlockContent(getBaseUrl(this.props.pathname), true);
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const path = getBaseUrl(this.props.pathname);
+    const lock = this.props.content?.lock;
+    const unlockAction =
+      lock?.locked && lock?.stealable && lock?.creator !== this.props.userId;
+    const editAction =
+      !unlockAction && find(this.props.actions.object, { id: 'edit' });
+    const folderContentsAction = find(this.props.actions.object, {
+      id: 'folderContents',
+    });
+    const { expanded } = this.state;
+
+    return (
+      this.props.token && (
+        <>
+          <BodyClass
+            className={expanded ? 'has-toolbar' : 'has-toolbar-collapsed'}
+          />
+          <div
+            style={this.state.menuStyle}
+            className={
+              this.state.showMenu ? 'toolbar-content show' : 'toolbar-content'
+            }
+            ref={this.toolbarWindow}
+          >
+            {this.state.showMenu && (
+              // This sets the scroll locker in the body tag in mobile
+              <BodyClass className="has-toolbar-menu-open" />
+            )}
+            <div
+              className="pusher-puller"
+              ref={(node) => (this.pusher = node)}
+              style={{
+                transform: this.toolbarWindow.current
+                  ? `translateX(-${
+                      (this.state.loadedComponents.length - 1) *
+                      this.toolbarWindow.current.getBoundingClientRect().width
+                    }px)`
+                  : null,
+              }}
+            >
+              {this.state.loadedComponents.map((component, index) =>
+                (() => {
+                  const ToolbarComponent =
+                    toolbarComponents[component].component;
+                  const WrapperComponent = toolbarComponents[component].wrapper;
+                  const haveActions =
+                    toolbarComponents[component].hideToolbarBody;
+                  const title =
+                    toolbarComponents[component].wrapperTitle &&
+                    this.props.intl.formatMessage(
+                      toolbarComponents[component].wrapperTitle,
+                    );
+                  if (WrapperComponent) {
+                    return (
+                      <WrapperComponent
+                        componentName={component}
+                        componentTitle={title}
+                        pathname={this.props.pathname}
+                        loadComponent={this.loadComponent}
+                        unloadComponent={this.unloadComponent}
+                        componentIndex={index}
+                        theToolbar={this.toolbarWindow}
+                        key={`personalToolsComponent-${index}`}
+                        closeMenu={this.closeMenu}
+                        hasActions={haveActions}
+                      >
+                        <ToolbarComponent
+                          pathname={this.props.pathname}
+                          loadComponent={this.loadComponent}
+                          unloadComponent={this.unloadComponent}
+                          componentIndex={index}
+                          theToolbar={this.toolbarWindow}
+                          closeMenu={this.closeMenu}
+                          isToolbarEmbedded
+                        />
+                      </WrapperComponent>
+                    );
+                  } else {
+                    return (
+                      <ToolbarComponent
+                        pathname={this.props.pathname}
+                        loadComponent={this.loadComponent}
+                        unloadComponent={this.unloadComponent}
+                        componentIndex={index}
+                        theToolbar={this.toolbarWindow}
+                        key={`personalToolsComponent-${index}`}
+                        closeMenu={this.closeMenu}
+                        content={
+                          toolbarComponents[component].contentAsProps
+                            ? this.props.content
+                            : null
+                        }
+                      />
+                    );
+                  }
+                })(),
+              )}
+            </div>
+          </div>
+          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
+            <div className="toolbar-body">
+              <div className="toolbar-actions">
+                {this.props.hideDefaultViewButtons && this.props.inner && (
+                  <>{this.props.inner}</>
+                )}
+                {!this.props.hideDefaultViewButtons && (
+                  <>
+                    {unlockAction && (
+                      <button
+                        aria-label={this.props.intl.formatMessage(
+                          messages.unlock,
+                        )}
+                        className="unlock"
+                        onClick={(e) => this.unlock(e)}
+                        tabIndex={0}
+                      >
+                        <Icon
+                          name={unlockSVG}
+                          size="30px"
+                          className="unlock"
+                          title={this.props.intl.formatMessage(messages.unlock)}
+                        />
+                      </button>
+                    )}
+
+                    {editAction && (
+                      <Link
+                        aria-label={this.props.intl.formatMessage(
+                          messages.edit,
+                        )}
+                        className="edit"
+                        to={`${path}/edit`}
+                      >
+                        <Icon
+                          name={penSVG}
+                          size="30px"
+                          className="circled"
+                          title={this.props.intl.formatMessage(messages.edit)}
+                        />
+                      </Link>
+                    )}
+                    {this.props.content &&
+                      this.props.content.is_folderish &&
+                      folderContentsAction &&
+                      !this.props.pathname.endsWith('/contents') && (
+                        <Link
+                          aria-label={this.props.intl.formatMessage(
+                            messages.contents,
+                          )}
+                          to={`${path}/contents`}
+                        >
+                          <Icon
+                            name={folderSVG}
+                            size="30px"
+                            title={this.props.intl.formatMessage(
+                              messages.contents,
+                            )}
+                          />
+                        </Link>
+                      )}
+                    {this.props.content &&
+                      this.props.content.is_folderish &&
+                      folderContentsAction &&
+                      this.props.pathname.endsWith('/contents') && (
+                        <Link
+                          to={`${path}`}
+                          aria-label={this.props.intl.formatMessage(
+                            messages.back,
+                          )}
+                        >
+                          <Icon
+                            name={clearSVG}
+                            className="contents circled"
+                            size="30px"
+                            title={this.props.intl.formatMessage(messages.back)}
+                          />
+                        </Link>
+                      )}
+                    {this.props.content &&
+                      ((this.props.content.is_folderish &&
+                        this.props.types.length > 0) ||
+                        (config.settings.isMultilingual &&
+                          this.props.content['@components']?.translations)) && (
+                        <button
+                          className="add"
+                          aria-label={this.props.intl.formatMessage(
+                            messages.add,
+                          )}
+                          onClick={(e) => this.toggleMenu(e, 'types')}
+                          tabIndex={0}
+                          id="toolbar-add"
+                        >
+                          <Icon
+                            name={addSVG}
+                            size="30px"
+                            title={this.props.intl.formatMessage(messages.add)}
+                          />
+                        </button>
+                      )}
+                    <div className="toolbar-button-spacer" />
+                    <button
+                      className="more"
+                      aria-label={this.props.intl.formatMessage(messages.more)}
+                      onClick={(e) => this.toggleMenu(e, 'more')}
+                      tabIndex={0}
+                      id="toolbar-more"
+                    >
+                      <Icon
+                        className="mobile hidden"
+                        name={moreSVG}
+                        size="30px"
+                        title={this.props.intl.formatMessage(messages.more)}
+                      />
+                      {this.state.showMenu ? (
+                        <Icon
+                          className="mobile only"
+                          name={clearSVG}
+                          size="30px"
+                        />
+                      ) : (
+                        <Icon
+                          className="mobile only"
+                          name={moreSVG}
+                          size="30px"
+                        />
+                      )}
+                    </button>
+                  </>
+                )}
+              </div>
+              <div className="toolbar-bottom">
+                <Pluggable name="main.toolbar.bottom" />
+                {!this.props.hideDefaultViewButtons && (
+                  <button
+                    className="user"
+                    aria-label={this.props.intl.formatMessage(
+                      messages.personalTools,
+                    )}
+                    onClick={(e) => this.toggleMenu(e, 'personalTools')}
+                    tabIndex={0}
+                    id="toolbar-personal"
+                  >
+                    <Icon
+                      name={userSVG}
+                      size="30px"
+                      title={this.props.intl.formatMessage(
+                        messages.personalTools,
+                      )}
+                    />
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="toolbar-handler">
+              <button
+                aria-label={this.props.intl.formatMessage(
+                  messages.shrinkToolbar,
+                )}
+                className={cx({
+                  [this.props.content?.review_state]: this.props.content
+                    ?.review_state,
+                })}
+                onClick={this.handleShrink}
+              />
+            </div>
+          </div>
+          <div className="pusher" />
+        </>
+      )
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  withCookies,
+  connect(
+    (state, props) => ({
+      actions: state.actions.actions,
+      token: state.userSession.token,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
+      content: state.content.data,
+      pathname: props.pathname,
+      types: filter(state.types.types, 'addable'),
+      unlockRequest: state.content.unlock,
+    }),
+    { getTypes, listActions, setExpandedToolbar, unlockContent },
+  ),
+)(Toolbar);

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

@@ -5,68 +5,15 @@
 
 import React from 'react';
 import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
-import { Grid, Image } from 'semantic-ui-react';
-import { Link } from 'react-router-dom';
-
-import EIONETLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EIONETLogo.png';
-import EEALogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EEA-Logo-white.svg';
-
 import config from '@plone/volto/registry';
 
 const Footer = (props) => {
   const { eea } = config.settings;
-
   return (
     <EEAFooter>
-      <EEAFooter.Header>The EEA also contributes to</EEAFooter.Header>
-      <EEAFooter.Sites sites={config.settings.eea.partnerWebsites} />
-
-      <EEAFooter.SubFooter>
-        <div className="subfooter">
-          <Grid>
-            <Grid.Column mobile={6} tablet={7} computer={8}>
-              <div className="item">
-                <div className="site logo">
-                  <Link to="/">
-                    <Image src={EEALogo} alt="EEA Logo"></Image>
-                  </Link>
-                  <p className="description">An agency of the European Union</p>
-                </div>
-
-                <div className="eionet logo">
-                  <a href="https://www.eionet.europa.eu/">
-                    <Image src={EIONETLogo} alt="EIONET Logo"></Image>
-                  </a>
-                  <p className="description">
-                    European Environment
-                    <br />
-                    Information and
-                    <br />
-                    Observation Network
-                  </p>
-                </div>
-              </div>
-            </Grid.Column>
-            <Grid.Column mobile={6} tablet={5} computer={4}>
-              <div className="item">
-                <EEAFooter.Contact
-                  contacts={eea.footerActions}
-                  header="Contact Us"
-                  address={eea.address}
-                />
-                <EEAFooter.Social social={eea.socialActions} />
-              </div>
-            </Grid.Column>
-          </Grid>
-          <Grid>
-            <Grid.Row>
-              <Grid.Column>
-                <EEAFooter.Actions actions={eea.globalActions} />
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </div>
-      </EEAFooter.SubFooter>
+      <EEAFooter.Header>{eea.footerOpts.header}</EEAFooter.Header>
+      <EEAFooter.Sites sites={eea.footerOpts.sites} />
+      <EEAFooter.SubFooter {...eea.footerOpts} />
     </EEAFooter>
   );
 };

package/src/index.js

@@ -3,6 +3,7 @@ import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigatio
 import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title';
 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';
 
 const applyConfig = (config) => {
   config.settings.eea = {
@@ -15,10 +16,26 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.accordion.semanticIcon = 'ri-arrow-down-s-line';
   }
 
+  // Apply tabs block customization
+  if (config.blocks.blocksConfig.tabs_block) {
+    if (config.blocks.blocksConfig.tabs_block.templates.accordion) {
+      config.blocks.blocksConfig.tabs_block.templates.accordion.semanticIcon = {
+        opened: 'ri-arrow-up-s-line',
+        closed: 'ri-arrow-down-s-line',
+      };
+    }
+  }
+
   // Description block custom CSS
   config.blocks.blocksConfig.description.className =
     'documentDescription eea callout';
 
+  // Custom TokenWidget
+  if (config.widgets.views) {
+    config.widgets.views.id.subjects = TokenWidget;
+    config.widgets.views.widget.tags = TokenWidget;
+  }
+
   // apply inPage navigation
   config.settings.appExtras = [
     ...(config.settings.appExtras || []),