@eeacms/volto-eea-website-theme 3.19.0 → 4.0.0

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -13,11 +13,12 @@ import {
   Label,
 } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
-import { getSchema } from '@plone/volto/actions';
+import { getSchema } from '@plone/volto/actions/schema/schema';
 import { getWidget } from '@plone/volto/helpers/Widget/utils';
-import { RenderBlocks } from '@plone/volto/components';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
-import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { useDispatch, shallowEqual, useSelector } from 'react-redux';
 
 import isEqual from 'lodash/isEqual';

package/src/customizations/volto/components/theme/View/EventView.jsx

@@ -5,10 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
+import { flattenHTMLToAppURL } from '@plone/volto/helpers/Url/Url';
 import { Image } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { EventDetails } from '@plone/volto/components';
+import EventDetails from '@plone/volto/components/theme/EventDetails/EventDetails';
 import './style.less';
 
 const EventTextfieldView = ({ content }) => (

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import serialize from 'serialize-javascript';
-import { join } from 'lodash';
+import join from 'lodash/join';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import config from '@plone/volto/registry';
@@ -104,6 +104,13 @@ class Html extends Component {
           {head.link.toComponent()}
           {head.script.toComponent()}
 
+          {config.settings.cssLayers && (
+            // Load the CSS layers from config, if any
+            <style>{`@layer ${config.settings.cssLayers.join(', ')};`}</style>
+          )}
+
+          {head.style.toComponent()}
+
           {React.createElement('script', {
             nonce: nonce,
             dangerouslySetInnerHTML: {
@@ -118,6 +125,9 @@ class Html extends Component {
                   ...(publicURL && {
                     publicURL,
                   }),
+                  ...(process.env.SITE_DEFAULT_LANGUAGE && {
+                    defaultLanguage: process.env.SITE_DEFAULT_LANGUAGE,
+                  }),
                 },
                 { space: 2 },
               )};`,
@@ -134,7 +144,7 @@ class Html extends Component {
           <link rel="manifest" href="/site.webmanifest" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <meta name="mobile-web-app-capable" content="yes" />
           {process.env.NODE_ENV === 'production' && criticalCss && (
             <style
               dangerouslySetInnerHTML={{ __html: this.props.criticalCss }}
@@ -148,8 +158,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
+                  ? 'prefetch'
+                  : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,
@@ -162,8 +172,8 @@ class Html extends Component {
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}
                 ></script>
-                {extractor.getStyleElements().map((elem) => (
-                  <noscript>
+                {extractor.getStyleElements().map((elem, index) => (
+                  <noscript key={elem.key ?? `noscript-style-${index}`}>
                     {React.cloneElement(elem, {
                       rel: 'stylesheet',
                       crossOrigin:

package/src/customizations/volto/helpers/Html/Readme.md

@@ -1 +1,7 @@
-Customized for CSP support. Copy of https://github.com/plone/volto/blob/8b0f2af98ce0362f6975ce9c50137f6bd7cc3bb8/src/helpers/Html/Html.jsx Volto 17.x.x branch
+Customized for CSP support: adds a `nonce` prop that is applied to both inline
+`<script>` tags (`window.env` and `window.__data`) and to all extracted script
+elements, enabling a strict Content-Security-Policy `script-src 'nonce-...'`
+header generated by the paired `server.jsx` customization.
+
+Rebased against Volto 18 — also includes cssLayers support, head.style.toComponent(),
+SITE_DEFAULT_LANGUAGE in window.env, and mobile-web-app-capable meta tag.

package/src/customizations/volto/reducers/breadcrumbs/breadcrumbs.js

@@ -4,12 +4,9 @@
  * Customized reducer as part of ticket 271001 in order to receive portal_type info
  */
 
-import { map } from 'lodash';
-import {
-  flattenToAppURL,
-  getBaseUrl,
-  hasApiExpander,
-} from '@plone/volto/helpers';
+import map from 'lodash/map';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
 
 import {
   GET_BREADCRUMBS,

package/src/customizations/volto/server.jsx

@@ -8,7 +8,6 @@ import express from 'express';
 import { renderToString } from 'react-dom/server';
 import { createMemoryHistory } from 'history';
 import { parse as parseUrl } from 'url';
-import { keys } from 'lodash';
 import locale from 'locale';
 import { detect } from 'detect-browser';
 import path from 'path';
@@ -22,23 +21,21 @@ import crypto from 'crypto';
 import routes from '@plone/volto/routes';
 import config from '@plone/volto/registry';
 
+import Html from '@plone/volto/helpers/Html/Html';
+import Api from '@plone/volto/helpers/Api/Api';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { persistAuthToken } from '@plone/volto/helpers/AuthToken/AuthToken';
 import {
-  flattenToAppURL,
-  Html,
-  Api,
-  persistAuthToken,
   toBackendLang,
   toGettextLang,
   toReactIntlLang,
-} from '@plone/volto/helpers';
-import { changeLanguage } from '@plone/volto/actions';
+} from '@plone/volto/helpers/Utils/Utils';
+import { changeLanguage } from '@plone/volto/actions//language/language';
 
 import userSession from '@plone/volto/reducers/userSession/userSession';
 
 import ErrorPage from '@plone/volto/error';
 
-import languages from '@plone/volto/constants/Languages';
-
 import configureStore from '@plone/volto/store';
 import {
   ReduxAsyncConnect,
@@ -61,7 +58,10 @@ function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
 
-const supported = new locale.Locales(keys(languages), 'en');
+const supported = new locale.Locales(
+  config.settings?.supportedLanguages || ['en'],
+  'en',
+);
 
 const server = express()
   .disable('x-powered-by')

package/src/helpers/schema-utils.js

@@ -5,7 +5,7 @@ import imageFullSVG from '@plone/volto/icons/image-full.svg';
 import alignTopSVG from '@plone/volto/icons/move-up.svg';
 import alignCenterSVG from '@plone/volto/icons/row.svg';
 import alignBottomSVG from '@plone/volto/icons/move-down.svg';
-import { addStyling } from '@plone/volto/helpers';
+import { addStyling } from '@plone/volto/helpers/Extensions';
 
 export const ALIGN_INFO_MAP = {
   narrow_width: [imageNarrowSVG, 'Narrow width'],

package/src/helpers/schema-utils.test.js

@@ -16,7 +16,7 @@ jest.mock('@plone/volto/icons/move-up.svg', () => 'move-up-svg');
 jest.mock('@plone/volto/icons/row.svg', () => 'row-svg');
 jest.mock('@plone/volto/icons/move-down.svg', () => 'move-down-svg');
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Extensions', () => ({
   addStyling: jest.fn((props) => ({
     properties: {
       styles: {

package/src/hocs/withErrorBoundary.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ErrorBoundary } from '@plone/volto/components';
+import ErrorBoundary from '@plone/volto/components/theme/Error/ErrorBoundary';
 
 export default function withErrorBoundary(WrappedComponent, options = {}) {
   // Handle backward compatibility - if second param is a component, treat as fallback

package/src/hocs/withErrorBoundary.test.jsx

@@ -1,18 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { ErrorBoundary } from '@plone/volto/components';
+import ErrorBoundary from '@plone/volto/components/theme/Error/ErrorBoundary';
 import withErrorBoundary from './withErrorBoundary';
 
-// Mock the ErrorBoundary component from Volto
-jest.mock('@plone/volto/components', () => ({
-  ErrorBoundary: jest.fn(({ children, fallback, onError }) => {
-    try {
-      return children;
-    } catch (error) {
-      if (onError) onError(error, { componentStack: 'test-stack' });
-      return fallback || <div>Error occurred</div>;
-    }
-  }),
+jest.mock('@plone/volto/components/theme/Error/ErrorBoundary', () => ({
+  __esModule: true,
+  default: jest.fn(({ children, fallback }) => children || fallback || null),
 }));
 
 // Test components

package/src/hocs/withRootNavigation.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect, useDispatch } from 'react-redux';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-import { getNavigation } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
 import config from '@plone/volto/registry';
 
 export default function withRootNavigation(WrappedComponent) {

package/src/hocs/withRootNavigation.test.jsx

@@ -4,24 +4,28 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk'; // ✅ Add redux-thunk middleware
 import { render } from '@testing-library/react';
 import withRootNavigation from './withRootNavigation';
-import { getNavigation } from '@plone/volto/actions';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
 import config from '@plone/volto/registry';
 
-// Mock dependencies
-jest.mock('@plone/volto/actions', () => ({
-  getNavigation: jest.fn(() => ({ type: 'GET_NAVIGATION' })), // ✅ Ensure it returns a plain object
+jest.mock('@plone/volto/actions/navigation/navigation', () => ({
+  getNavigation: jest.fn(() => ({ type: 'GET_NAVIGATION' })),
 }));
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
   getBaseUrl: jest.fn(() => '/en'),
+}));
+jest.mock('@plone/volto/helpers/Utils/Utils', () => ({
   hasApiExpander: jest.fn(() => false),
 }));
 jest.mock('@plone/volto/registry', () => ({
-  settings: { navDepth: 2 },
+  __esModule: true,
+  default: {
+    settings: { navDepth: 2 },
+  },
 }));
 
-// ✅ Use redux-thunk middleware
-const mockStore = configureStore([thunk]); // Add thunk to support async actions
+const mockStore = configureStore([thunk]);
 
 const initialState = {
   navigation: { items: [{ title: 'Home', url: '/' }] },
@@ -51,13 +55,13 @@ describe('withRootNavigation HOC', () => {
       </Provider>,
     );
 
-    expect(getBaseUrl).toHaveBeenCalledWith('/en'); // Check base URL calculation
-    expect(hasApiExpander).toHaveBeenCalledWith('navigation', '/en'); // Ensure API expander is checked
-    expect(getNavigation).toHaveBeenCalledWith('/en', config.settings.navDepth); // Ensure getNavigation is dispatched
+    expect(getBaseUrl).toHaveBeenCalledWith('/en');
+    expect(hasApiExpander).toHaveBeenCalledWith('navigation', '/en');
+    expect(getNavigation).toHaveBeenCalledWith('/en', config.settings.navDepth);
   });
 
   test('does not call getNavigation if API expander is already set', () => {
-    hasApiExpander.mockReturnValue(true); // Simulate that API expander is already set
+    hasApiExpander.mockReturnValue(true);
 
     render(
       <Provider store={store}>
@@ -65,6 +69,6 @@ describe('withRootNavigation HOC', () => {
       </Provider>,
     );
 
-    expect(getNavigation).not.toHaveBeenCalled(); // Ensure getNavigation is NOT called
+    expect(getNavigation).not.toHaveBeenCalled();
   });
 });

package/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import TableBlockEdit from '@plone/volto-slate/blocks/Table/TableBlockEdit';
@@ -396,8 +396,8 @@ const applyConfig = (config) => {
       return override_toc && level
         ? [parseInt(level.slice(1)), entry_text]
         : config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), plaintext]
-        : null;
+          ? [parseInt(type.slice(1)), plaintext]
+          : null;
     };
   }
   // Apply accordion block customization

package/src/slate.js

@@ -6,7 +6,7 @@ import {
   BlockButton,
 } from '@plone/volto-slate/editor/ui';
 import installCallout from '@plone/volto-slate/editor/plugins/Callout';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { Editor, Transforms, Text } from 'slate';
 import { useSlate } from 'slate-react';
 

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.jsx

@@ -1,76 +0,0 @@
-import { defineMessages, useIntl } from 'react-intl';
-import { Icon } from '@plone/volto/components';
-import { Button } from 'semantic-ui-react';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-  wide: {
-    id: 'Wide',
-    defaultMessage: 'Wide',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-const AlignChooser = ({
-  align,
-  onChangeBlock,
-  data,
-  block,
-  actions = ['left', 'right', 'center', 'full'],
-}) => {
-  const intl = useIntl();
-
-  const ICON_MAP = {
-    left: imageLeftSVG,
-    right: imageRightSVG,
-    center: imageFitSVG,
-    wide: imageWideSVG,
-    full: imageFullSVG,
-  };
-
-  function onAlignBlock(align) {
-    onChangeBlock(block, {
-      ...data,
-      copyrightPosition: align,
-    });
-  }
-
-  return (
-    <div className="align-buttons">
-      {actions.map((action) => (
-        <Button.Group key={action}>
-          <Button
-            icon
-            basic
-            aria-label={intl.formatMessage(messages[action])}
-            onClick={() => onAlignBlock(action)}
-            active={data.copyrightPosition === action}
-          >
-            <Icon name={ICON_MAP[action]} size="24px" />
-          </Button>
-        </Button.Group>
-      ))}
-    </div>
-  );
-};
-
-export default AlignChooser;

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.test.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import { render } from '@testing-library/react';
-import AlignChooser from './AlignChooser';
-
-const mockStore = configureStore();
-
-describe('AlignChooser', () => {
-  const props = {
-    align: 'left',
-    onChangeBlock: jest.fn(),
-    data: { copyrightPosition: 'left' },
-    block: '123',
-    actions: ['left', 'right', 'center', 'full'],
-  };
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  });
-
-  it('renders the align buttons', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <AlignChooser {...props} />
-      </Provider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('calls onChangeBlock when an align button is clicked', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <AlignChooser {...props} />
-      </Provider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('marks the active align button as active', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <AlignChooser {...props} />
-      </Provider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/customizations/volto/components/manage/Sidebar/SidebarPopup copy.jsx

@@ -1,82 +0,0 @@
-// Check this https://github.com/plone/volto/pull/5520
-import React from 'react';
-import { Portal } from 'react-portal';
-import { CSSTransition } from 'react-transition-group';
-import PropTypes from 'prop-types';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-
-const DEFAULT_TIMEOUT = 500;
-
-const SidebarPopup = (props) => {
-  const { children, open, onClose, overlay } = props;
-
-  const asideElement = React.useRef();
-
-  const handleClickOutside = (e) => {
-    if (asideElement && doesNodeContainClick(asideElement.current, e)) return;
-    onClose();
-  };
-
-  React.useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside, false);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside, false);
-    };
-  });
-
-  return (
-    <>
-      {overlay && (
-        <CSSTransition
-          in={open}
-          timeout={DEFAULT_TIMEOUT}
-          classNames="overlay-container"
-          unmountOnExit
-        >
-          <Portal node={document?.body}>
-            <div className="overlay-container"></div>
-          </Portal>
-        </CSSTransition>
-      )}
-      <CSSTransition
-        in={open}
-        timeout={DEFAULT_TIMEOUT}
-        classNames="sidebar-container"
-        unmountOnExit
-      >
-        <Portal>
-          <aside
-            id="test"
-            role="presentation"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onKeyDown={(e) => {
-              e.stopPropagation();
-            }}
-            ref={asideElement}
-            key="sidebarpopup"
-            className="sidebar-container"
-            style={{ overflowY: 'auto' }}
-          >
-            {children}
-          </aside>
-        </Portal>
-      </CSSTransition>
-    </>
-  );
-};
-
-SidebarPopup.propTypes = {
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-  overlay: PropTypes.bool,
-};
-
-SidebarPopup.defaultProps = {
-  open: false,
-  onClose: () => {},
-  overlay: false,
-};
-
-export default SidebarPopup;