@eeacms/volto-eea-website-theme 1.0.0 → 1.2.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,7 +4,41 @@ 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.0.0](https://github.com/eea/volto-eea-website-theme/compare/0.7.7...1.0.0) - 28 October 2022
+### [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)]
+- feat(header): customization of logo + check if multilingual [Miu Razvan - [`cc5bb39`](https://github.com/eea/volto-eea-website-theme/commit/cc5bb3927b79b87f269c8a2a77b1913785892658)]
+
+#### :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
+
+- refactor(customizations): Upgrade to volto 16.alpha.45 [Alin Voinea - [`930b77f`](https://github.com/eea/volto-eea-website-theme/commit/930b77fa6113d423a82704883a349bc1f919bb85)]
+
+## [1.0.0](https://github.com/eea/volto-eea-website-theme/compare/0.7.7...1.0.0) - 28 October 2022
 
 #### :nail_care: Enhancements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.0.0",
+  "version": "1.2.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/manage/Form/Form.jsx

@@ -74,6 +74,7 @@ class Form extends Component {
     onCancel: PropTypes.func,
     submitLabel: PropTypes.string,
     resetAfterSubmit: PropTypes.bool,
+    resetOnCancel: PropTypes.bool,
     isEditForm: PropTypes.bool,
     isAdminForm: PropTypes.bool,
     title: PropTypes.string,
@@ -105,6 +106,7 @@ class Form extends Component {
     onCancel: null,
     submitLabel: null,
     resetAfterSubmit: false,
+    resetOnCancel: false,
     isEditForm: false,
     isAdminForm: false,
     title: null,
@@ -399,7 +401,7 @@ class Form extends Component {
     if (event) {
       event.preventDefault();
     }
-    if (this.props.resetAfterSubmit) {
+    if (this.props.resetOnCancel || this.props.resetAfterSubmit) {
       this.setState({
         formData: this.props.formData,
       });
@@ -418,11 +420,13 @@ class Form extends Component {
       event.preventDefault();
     }
 
-    const errors = FormValidation.validateFieldsPerFieldset({
-      schema: this.props.schema,
-      formData: this.state.formData,
-      formatMessage: this.props.intl.formatMessage,
-    });
+    const errors = this.props.schema
+      ? FormValidation.validateFieldsPerFieldset({
+          schema: this.props.schema,
+          formData: this.state.formData,
+          formatMessage: this.props.intl.formatMessage,
+        })
+      : {};
 
     if (keys(errors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
@@ -653,6 +657,11 @@ class Form extends Component {
                             {this.props.title}
                           </Segment>
                         ),
+                        item.description && (
+                          <Message attached="bottom">
+                            {item.description}
+                          </Message>
+                        ),
                         ...map(item.fields, (field, index) => (
                           <Field
                             {...schema.properties[field]}

package/src/customizations/volto/components/manage/Form/ModalForm.jsx

@@ -94,6 +94,7 @@ class ModalForm extends Component {
     loadingMessage: null,
     submitError: null,
     className: null,
+    dimmer: null,
   };
 
   /**
@@ -224,7 +225,11 @@ class ModalForm extends Component {
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
-      <Modal open={this.props.open} className={this.props.className}>
+      <Modal
+        dimmer={this.props.dimmer}
+        open={this.props.open}
+        className={this.props.className}
+      >
         <Header>{this.props.title}</Header>
         <Dimmer active={this.props.loading}>
           <Loader>

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

@@ -4,6 +4,7 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Plug, Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -291,146 +292,162 @@ class SharingComponent extends Component {
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Segment className="primary">
-            <FormattedMessage
-              id="Sharing for {title}"
-              defaultMessage="Sharing for {title}"
-              values={{ title: <q>{this.props.title}</q> }}
-            />
-          </Segment>
-          <Segment secondary>
-            <FormattedMessage
-              id="You can control who can view and edit your item using the list below."
-              defaultMessage="You can control who can view and edit your item using the list below."
-            />
-          </Segment>
-          <Segment>
-            <Form onSubmit={this.onSearch}>
-              <Form.Field>
-                <Input
-                  name="SearchableText"
-                  action={{ icon: 'search' }}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.searchForUserOrGroup,
-                  )}
-                  onChange={this.onChangeSearch}
-                />
-              </Form.Field>
-            </Form>
-          </Segment>
-          <Form onSubmit={this.onSubmit}>
-            <Table celled padded striped attached>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell>
-                    <FormattedMessage id="Name" defaultMessage="Name" />
-                  </Table.HeaderCell>
-                  {this.props.available_roles?.map((role) => (
-                    <Table.HeaderCell key={role.id}>
-                      {role.title}
+          <Pluggable name="sharing-component" />
+          <Plug pluggable="sharing-component" id="sharing-component-title">
+            <Segment className="primary">
+              <FormattedMessage
+                id="Sharing for {title}"
+                defaultMessage="Sharing for {title}"
+                values={{ title: <q>{this.props.title}</q> }}
+              />
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-description"
+          >
+            <Segment secondary>
+              <FormattedMessage
+                id="You can control who can view and edit your item using the list below."
+                defaultMessage="You can control who can view and edit your item using the list below."
+              />
+            </Segment>
+          </Plug>
+          <Plug pluggable="sharing-component" id="sharing-component-search">
+            <Segment>
+              <Form onSubmit={this.onSearch}>
+                <Form.Field>
+                  <Input
+                    name="SearchableText"
+                    action={{ icon: 'search' }}
+                    placeholder={this.props.intl.formatMessage(
+                      messages.searchForUserOrGroup,
+                    )}
+                    onChange={this.onChangeSearch}
+                  />
+                </Form.Field>
+              </Form>
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-form"
+            dependencies={[this.state.entries, this.props.available_roles]}
+          >
+            <Form onSubmit={this.onSubmit}>
+              <Table celled padded striped attached>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell>
+                      <FormattedMessage id="Name" defaultMessage="Name" />
                     </Table.HeaderCell>
-                  ))}
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {this.state.entries?.map((entry) => (
-                  <Table.Row key={entry.id}>
-                    <Table.Cell>
-                      <IconOld
-                        name={entry.type === 'user' ? 'user' : 'users'}
-                        title={
-                          entry.type === 'user'
-                            ? this.props.intl.formatMessage(messages.user)
-                            : this.props.intl.formatMessage(messages.group)
-                        }
-                      />{' '}
-                      {entry.title}
-                      {entry.login && ` (${entry.login})`}
-                    </Table.Cell>
                     {this.props.available_roles?.map((role) => (
-                      <Table.Cell key={role.id}>
-                        {entry.roles[role.id] === 'global' && (
-                          <IconOld
-                            name="check circle outline"
-                            title={this.props.intl.formatMessage(
-                              messages.globalRole,
-                            )}
-                            color="blue"
-                          />
-                        )}
-                        {entry.roles[role.id] === 'acquired' && (
-                          <IconOld
-                            name="check circle outline"
-                            color="green"
-                            title={this.props.intl.formatMessage(
-                              messages.inheritedValue,
-                            )}
-                          />
-                        )}
-                        {typeof entry.roles[role.id] === 'boolean' && (
-                          <Checkbox
-                            onChange={this.onChange}
-                            value={`${entry.id}:${role.id}`}
-                            checked={entry.roles[role.id]}
-                            disabled={entry.login === this.props.login}
-                          />
-                        )}
-                      </Table.Cell>
+                      <Table.HeaderCell key={role.id}>
+                        {role.title}
+                      </Table.HeaderCell>
                     ))}
                   </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-            <Segment attached>
-              <Form.Field>
-                <Checkbox
-                  checked={this.state.inherit}
-                  onChange={this.onToggleInherit}
-                  label={this.props.intl.formatMessage(messages.inherit)}
-                />
-              </Form.Field>
-              <p className="help">
-                <FormattedMessage
-                  id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                  defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                  values={{
-                    inherited: (
-                      <IconOld name="check circle outline" color="green" />
-                    ),
-                    global: (
-                      <IconOld name="check circle outline" color="blue" />
-                    ),
-                  }}
-                />
-              </p>
-            </Segment>
-            <Segment className="actions" attached clearing>
-              <Button
-                basic
-                icon
-                primary
-                floated="right"
-                type="submit"
-                aria-label={this.props.intl.formatMessage(messages.save)}
-                title={this.props.intl.formatMessage(messages.save)}
-                loading={this.props.updateRequest.loading}
-                onClick={this.onSubmit}
-              >
-                <Icon className="circled" name={aheadSVG} size="30px" />
-              </Button>
-              <Button
-                basic
-                icon
-                secondary
-                aria-label={this.props.intl.formatMessage(messages.cancel)}
-                title={this.props.intl.formatMessage(messages.cancel)}
-                floated="right"
-                onClick={this.onCancel}
-              >
-                <Icon className="circled" name={clearSVG} size="30px" />
-              </Button>
-            </Segment>
-          </Form>
+                </Table.Header>
+                <Table.Body>
+                  {this.state.entries?.map((entry) => (
+                    <Table.Row key={entry.id}>
+                      <Table.Cell>
+                        <IconOld
+                          name={entry.type === 'user' ? 'user' : 'users'}
+                          title={
+                            entry.type === 'user'
+                              ? this.props.intl.formatMessage(messages.user)
+                              : this.props.intl.formatMessage(messages.group)
+                          }
+                        />{' '}
+                        {entry.title}
+                        {entry.login && ` (${entry.login})`}
+                      </Table.Cell>
+                      {this.props.available_roles?.map((role) => (
+                        <Table.Cell key={role.id}>
+                          {entry.roles[role.id] === 'global' && (
+                            <IconOld
+                              name="check circle outline"
+                              title={this.props.intl.formatMessage(
+                                messages.globalRole,
+                              )}
+                              color="blue"
+                            />
+                          )}
+                          {entry.roles[role.id] === 'acquired' && (
+                            <IconOld
+                              name="check circle outline"
+                              color="green"
+                              title={this.props.intl.formatMessage(
+                                messages.inheritedValue,
+                              )}
+                            />
+                          )}
+                          {typeof entry.roles[role.id] === 'boolean' && (
+                            <Checkbox
+                              onChange={this.onChange}
+                              value={`${entry.id}:${role.id}`}
+                              checked={entry.roles[role.id]}
+                              disabled={entry.login === this.props.login}
+                            />
+                          )}
+                        </Table.Cell>
+                      ))}
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+              <Segment attached>
+                <Form.Field>
+                  <Checkbox
+                    checked={this.state.inherit}
+                    onChange={this.onToggleInherit}
+                    label={this.props.intl.formatMessage(messages.inherit)}
+                  />
+                </Form.Field>
+                <p className="help">
+                  <FormattedMessage
+                    id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    values={{
+                      inherited: (
+                        <IconOld name="check circle outline" color="green" />
+                      ),
+                      global: (
+                        <IconOld name="check circle outline" color="blue" />
+                      ),
+                    }}
+                  />
+                </p>
+              </Segment>
+              <Segment className="actions" attached clearing>
+                <Button
+                  basic
+                  icon
+                  primary
+                  floated="right"
+                  type="submit"
+                  aria-label={this.props.intl.formatMessage(messages.save)}
+                  title={this.props.intl.formatMessage(messages.save)}
+                  loading={this.props.updateRequest.loading}
+                  onClick={this.onSubmit}
+                >
+                  <Icon className="circled" name={aheadSVG} size="30px" />
+                </Button>
+                <Button
+                  basic
+                  icon
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  floated="right"
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
+              </Segment>
+            </Form>
+          </Plug>
         </Segment.Group>
         {this.state.isClient && (
           <Portal node={document.getElementById('toolbar')}>

package/src/customizations/volto/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -65,6 +65,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     description: PropTypes.string,
     mode: PropTypes.string, // link, image, multiple
     return: PropTypes.string, // single, multiple
+    initialPath: PropTypes.string,
     required: PropTypes.bool,
     error: PropTypes.arrayOf(PropTypes.string),
     value: PropTypes.oneOfType([
@@ -74,6 +75,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     onChange: PropTypes.func.isRequired,
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
+    placeholder: PropTypes.string,
   };
 
   /**
@@ -88,6 +90,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     value: [],
     mode: 'multiple',
     return: 'multiple',
+    initialPath: '',
     allowExternals: false,
   };
 
@@ -148,7 +151,10 @@ export class ObjectBrowserWidgetComponent extends Component {
   };
 
   onChange = (item) => {
-    let value = this.props.mode === 'multiple' ? [...this.props.value] : [];
+    let value =
+      this.props.mode === 'multiple' && this.props.value
+        ? [...this.props.value]
+        : [];
     value = value.filter((item) => item != null);
     const maxSize =
       this.props.widgetOptions?.pattern_options?.maximumSelectionSize || -1;
@@ -239,7 +245,7 @@ export class ObjectBrowserWidgetComponent extends Component {
             } else {
               this.props.onChange(this.props.id, [
                 {
-                  '@id': normalizeUrl(link),
+                  '@id': flattenToAppURL(link),
                   title: removeProtocol(link),
                 },
               ]);
@@ -273,15 +279,17 @@ export class ObjectBrowserWidgetComponent extends Component {
     ev.preventDefault();
     this.props.openObjectBrowser({
       mode: this.props.mode,
-      currentPath: this.props.location.pathname,
+      currentPath: this.props.initialPath || this.props.location.pathname,
       propDataName: 'value',
       onSelectItem: (url, item) => {
         this.onChange(item);
       },
-      selectableTypes: this.props.widgetOptions?.pattern_options
-        ?.selectableTypes,
-      maximumSelectionSize: this.props.widgetOptions?.pattern_options
-        ?.maximumSelectionSize,
+      selectableTypes:
+        this.props.widgetOptions?.pattern_options?.selectableTypes ||
+        this.props.selectableTypes,
+      maximumSelectionSize:
+        this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
+        this.props.maximumSelectionSize,
     });
   };
 
@@ -349,7 +357,8 @@ export class ObjectBrowserWidgetComponent extends Component {
 
             {items.length === 0 && this.props.mode === 'multiple' && (
               <div className="placeholder" ref={this.placeholderRef}>
-                {this.props.intl.formatMessage(messages.placeholder)}
+                {this.props.placeholder ??
+                  this.props.intl.formatMessage(messages.placeholder)}
               </div>
             )}
             {this.props.allowExternals &&
@@ -359,9 +368,10 @@ export class ObjectBrowserWidgetComponent extends Component {
                   onKeyDown={this.onKeyDownManualLink}
                   onChange={this.onManualLinkInput}
                   value={this.state.manualLinkInput}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.placeholder,
-                  )}
+                  placeholder={
+                    this.props.placeholder ??
+                    this.props.intl.formatMessage(messages.placeholder)
+                  }
                 />
               )}
           </div>

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);
@@ -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