@eeacms/volto-eea-website-theme 3.7.0 → 3.9.0

package/CHANGELOG.md

@@ -4,11 +4,28 @@ 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).
 
-### [3.7.0](https://github.com/eea/volto-eea-website-theme/compare/3.6.3...3.7.0) - 6 June 2025
+### [3.9.0](https://github.com/eea/volto-eea-website-theme/compare/3.8.0...3.9.0) - 20 August 2025
+
+#### :rocket: New Features
+
+- feat: Provide full versioning for indicators and easy access to previous versions - refs #289335 [dobri1408 - [`6cdeb1d`](https://github.com/eea/volto-eea-website-theme/commit/6cdeb1d56b20d63a5c8c3fc5fc9432620053ba89)]
+- feat: Control Navigation Settings TTW - refs #288509 [dobri1408 - [`0e82ddb`](https://github.com/eea/volto-eea-website-theme/commit/0e82ddb7369be52a63a3ac15e22a18940933a1f4)]
+
+#### :hammer_and_wrench: Others
+
+- Release 3.9.0 [Alin Voinea - [`b19fa21`](https://github.com/eea/volto-eea-website-theme/commit/b19fa2173b646ad105cf2eb2d70aeef480a76356)]
+### [3.8.0](https://github.com/eea/volto-eea-website-theme/compare/3.7.0...3.8.0) - 7 July 2025
+
+#### :rocket: New Features
+
+- feat(side-nav): allow content to be inserted before instead of the default append [David Ichim - [`6e184d2`](https://github.com/eea/volto-eea-website-theme/commit/6e184d2dfff0ee693b2d27527fa538dce8bdede7)]
 
 #### :hammer_and_wrench: Others
 
-- Release 3.7.0 [Alin Voinea - [`b4c7cc5`](https://github.com/eea/volto-eea-website-theme/commit/b4c7cc5218a5ed04d2a53c75d2dfdac7c7959bd5)]
+- Update package.json [David Ichim - [`af355dd`](https://github.com/eea/volto-eea-website-theme/commit/af355dda36692e048779abc80d968096a0cc3c49)]
+- add dependency on volto-anchors since we have a require which we catch [David Ichim - [`135db9f`](https://github.com/eea/volto-eea-website-theme/commit/135db9fc4d50ef535ef80a499ddd3c9d87dabac6)]
+### [3.7.0](https://github.com/eea/volto-eea-website-theme/compare/3.6.3...3.7.0) - 6 June 2025
+
 ### [3.6.3](https://github.com/eea/volto-eea-website-theme/compare/3.6.2...3.6.3) - 2 June 2025
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -14,6 +14,7 @@
     "react"
   ],
   "addons": [
+    "@eeacms/volto-anchors",
     "@eeacms/volto-block-toc",
     "@eeacms/volto-group-block",
     "@eeacms/volto-eea-design-system",
@@ -24,6 +25,7 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
+    "@eeacms/volto-anchors": "*",
     "@eeacms/volto-block-style": "*",
     "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-eea-design-system": "*",

package/src/actions/index.js

@@ -1 +1,2 @@
 export * from './print';
+export * from './navigation';

package/src/actions/navigation.js

@@ -0,0 +1,24 @@
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { GET_NAVIGATION_SETTINGS } from '../constants/ActionTypes';
+
+export const getNavigationSettings = (url = '') => {
+  let cleanedUrl = typeof url === 'string' ? url : '';
+
+  if (
+    cleanedUrl &&
+    typeof cleanedUrl === 'string' &&
+    cleanedUrl.endsWith('/edit')
+  ) {
+    cleanedUrl = cleanedUrl.slice(0, -'/edit'.length);
+  }
+
+  const apiPath = flattenToAppURL(cleanedUrl);
+
+  return {
+    type: GET_NAVIGATION_SETTINGS,
+    request: {
+      op: 'get',
+      path: `${apiPath}/@inherit?expand.inherit.behaviors=eea.enhanced_navigation`,
+    },
+  };
+};

package/src/actions/print.js

@@ -3,7 +3,10 @@
  * @module actions/print
  */
 
-import { SET_ISPRINT } from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
+import {
+  SET_ISPRINT,
+  SET_PRINT_LOADING,
+} from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
 
 export const setIsPrint = (data) => {
   return {
@@ -11,3 +14,8 @@ export const setIsPrint = (data) => {
     payload: data,
   };
 };
+
+export const setPrintLoading = (isLoading) => ({
+  type: SET_PRINT_LOADING,
+  payload: isLoading,
+});

package/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx

@@ -8,7 +8,7 @@ import { Accordion, Icon } from 'semantic-ui-react';
 
 import Slugger from 'github-slugger';
 
-import { UniversalLink, MaybeWrap } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
 import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
 import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
 import { flattenToAppURL } from '@plone/volto/helpers';
@@ -24,10 +24,12 @@ const AccordionNavigation = ({
   navigation = {},
   device,
   isMenuOpenOnOutsideClick,
+  hasWideContent,
 }) => {
   const { items = [], title, has_custom_name } = navigation;
   const intl = useIntl();
-  const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
+  const navOpen =
+    ['mobile', 'tablet'].includes(device) || hasWideContent ? false : true;
   const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
   const [activeItems, setActiveItems] = React.useState({});
   const contextNavigationListRef = React.useRef(null);
@@ -42,6 +44,10 @@ const AccordionNavigation = ({
     if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
   }, [isMenuOpenOnOutsideClick]);
 
+  React.useEffect(() => {
+    setIsNavOpen(navOpen);
+  }, [navOpen]);
+
   React.useEffect(() => {
     if (!navOpen) {
       const handleOutsideClick = (event) => {
@@ -72,7 +78,7 @@ const AccordionNavigation = ({
     [onClickSummary],
   );
 
-  const renderItems = ({ item, level = 0 }) => {
+  const renderItems = ({ item, level = 0, index }) => {
     const {
       title,
       href,
@@ -83,6 +89,7 @@ const AccordionNavigation = ({
     } = item;
     const hasChildItems = childItems && childItems.length > 0;
     const normalizedTitle = Slugger.slug(title);
+    const firstItem = index === 0;
 
     const checkIfActive = () => {
       return activeItems[href] !== undefined ? activeItems[href] : is_in_path;
@@ -126,7 +133,7 @@ const AccordionNavigation = ({
               aria-labelledby={`accordion-title-${normalizedTitle}`}
               role="region"
             >
-              <ul className="accordion-list">
+              <ul className={`accordion-list ${'level-' + level}`}>
                 {childItems.map((child) =>
                   renderItems({ item: child, level: level + 1 }),
                 )}
@@ -139,8 +146,10 @@ const AccordionNavigation = ({
             className={cx(`title-link contenttype-${type}`, {
               current: is_current,
               in_path: is_in_path,
+              navigation_home: firstItem,
             })}
           >
+            {firstItem && <Icon className={'ri-home-2-line'} />}
             {title}
           </UniversalLink>
         )}
@@ -159,31 +168,21 @@ const AccordionNavigation = ({
             onKeyDown={onKeyDownSummary}
             ref={summaryRef}
           >
-            <MaybeWrap
-              condition={!navOpen}
-              className="ui container d-flex flex-items-center"
-            >
-              {has_custom_name
-                ? title
-                : intl.formatMessage(messages.navigation)}
-              <Icon
-                className={
-                  isNavOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
-                }
-              />
-            </MaybeWrap>
+            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
+            <Icon
+              className={
+                isNavOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
+              }
+            />
           </summary>
-          <MaybeWrap
-            condition={!navOpen}
-            className="ui container d-flex flex-items-center"
+          <ul
+            className="context-navigation-list accordion-list"
+            ref={contextNavigationListRef}
           >
-            <ul
-              className="context-navigation-list accordion-list"
-              ref={contextNavigationListRef}
-            >
-              {items.map((item) => renderItems({ item }))}
-            </ul>
-          </MaybeWrap>
+            {items.map((item, index) =>
+              renderItems({ item, level: 0, index: index }),
+            )}
+          </ul>
         </details>
       </nav>
     </>
@@ -209,17 +208,25 @@ AccordionNavigation.propTypes = {
     has_custom_name: PropTypes.bool,
     title: PropTypes.string,
   }),
+  /**
+   * Provided by withEEASideMenu HOC to indicate if page has wide content
+   */
+  hasWideContent: PropTypes.bool,
 };
 
 export default compose(
   withRouter,
   withContentNavigation,
-  (WrappedComponent) => (props) =>
-    withEEASideMenu(WrappedComponent)({
-      ...props,
-      targetParent: '.eea.header ',
-      fixedVisibilitySwitchTarget: '.main.bar',
-      insertBeforeOnMobile: '.banner',
-      shouldRender: props.navigation?.items?.length > 0,
-    }),
+  (WrappedComponent) => (props) => {
+    const Enhanced = withEEASideMenu(WrappedComponent);
+    return (
+      <Enhanced
+        {...props}
+        targetParent=".eea.header"
+        fixedVisibilitySwitchTarget=".main.bar"
+        insertBeforeOnMobile=".banner"
+        shouldRender={Boolean(props.navigation?.items?.length)}
+      />
+    );
+  },
 )(AccordionNavigation);

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsEdit.test.jsx

@@ -0,0 +1,383 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import LayoutSettingsEdit from './LayoutSettingsEdit';
+import { EditSchema } from './schema';
+
+// Add jest-dom matchers
+import '@testing-library/jest-dom';
+
+// Mock dependencies
+jest.mock('./schema', () => ({
+  EditSchema: jest.fn(),
+}));
+
+jest.mock('@plone/volto/components', () => ({
+  BlockDataForm: jest.fn(({ title, schema, formData, onChangeField }) => (
+    <div data-testid="block-data-form">
+      <div data-testid="form-title">{title}</div>
+      <div data-testid="form-schema">{JSON.stringify(schema)}</div>
+      <div data-testid="form-data">{JSON.stringify(formData)}</div>
+      <button
+        data-testid="change-field-button"
+        onClick={() => onChangeField('test-field', 'test-value')}
+      >
+        Change Field
+      </button>
+    </div>
+  )),
+  SidebarPortal: jest.fn(({ selected, children }) => (
+    <div data-testid="sidebar-portal" data-selected={selected}>
+      {children}
+    </div>
+  )),
+}));
+
+jest.mock('./LayoutSettingsView', () => ({
+  __esModule: true,
+  default: jest.fn((props) => (
+    <div data-testid="layout-settings-view" data-props={JSON.stringify(props)}>
+      Layout Settings View
+    </div>
+  )),
+}));
+
+const mockLayoutSettingsView = require('./LayoutSettingsView').default;
+
+const { BlockDataForm, SidebarPortal } = require('@plone/volto/components');
+
+describe('LayoutSettingsEdit', () => {
+  const mockSchema = {
+    title: 'Page layout settings',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['layout_size', 'body_class'],
+      },
+    ],
+    properties: {
+      layout_size: {
+        widget: 'style_align',
+        title: 'Layout size',
+      },
+      body_class: {
+        title: 'Body class',
+        widget: 'creatable_select',
+      },
+    },
+  };
+
+  const defaultProps = {
+    selected: true,
+    block: 'block-id',
+    data: {
+      layout_size: 'container_view',
+      body_class: 'homepage',
+    },
+    onChangeBlock: jest.fn(),
+  };
+
+  beforeEach(() => {
+    EditSchema.mockReturnValue(mockSchema);
+    jest.clearAllMocks();
+    mockLayoutSettingsView.mockClear();
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<LayoutSettingsEdit {...defaultProps} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders the page title', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent(
+      'Page layout settings',
+    );
+  });
+
+  it('renders LayoutSettingsView with correct props', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(mockLayoutSettingsView).toHaveBeenCalledWith(defaultProps, {});
+    expect(screen.getByTestId('layout-settings-view')).toBeInTheDocument();
+  });
+
+  it('renders SidebarPortal with correct selected prop', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(SidebarPortal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selected: true,
+      }),
+      {},
+    );
+    expect(screen.getByTestId('sidebar-portal')).toHaveAttribute(
+      'data-selected',
+      'true',
+    );
+  });
+
+  it('renders SidebarPortal with selected false', () => {
+    const props = { ...defaultProps, selected: false };
+    render(<LayoutSettingsEdit {...props} />);
+
+    expect(SidebarPortal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selected: false,
+      }),
+      {},
+    );
+    expect(screen.getByTestId('sidebar-portal')).toHaveAttribute(
+      'data-selected',
+      'false',
+    );
+  });
+
+  it('renders BlockDataForm when selected is true', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(BlockDataForm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: mockSchema.title,
+        schema: mockSchema,
+        formData: defaultProps.data,
+        onChangeField: expect.any(Function),
+      }),
+      {},
+    );
+    expect(screen.getByTestId('block-data-form')).toBeInTheDocument();
+  });
+
+  it('does not render BlockDataForm when selected is false', () => {
+    const props = { ...defaultProps, selected: false };
+    render(<LayoutSettingsEdit {...props} />);
+
+    expect(BlockDataForm).not.toHaveBeenCalled();
+    expect(screen.queryByTestId('block-data-form')).not.toBeInTheDocument();
+  });
+
+  it('calls EditSchema to get schema', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(EditSchema).toHaveBeenCalled();
+  });
+
+  it('passes correct title to BlockDataForm', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(screen.getByTestId('form-title')).toHaveTextContent(
+      'Page layout settings',
+    );
+  });
+
+  it('passes correct schema to BlockDataForm', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(screen.getByTestId('form-schema')).toHaveTextContent(
+      JSON.stringify(mockSchema),
+    );
+  });
+
+  it('passes correct formData to BlockDataForm', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(screen.getByTestId('form-data')).toHaveTextContent(
+      JSON.stringify(defaultProps.data),
+    );
+  });
+
+  it('handles onChangeField correctly', () => {
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith('block-id', {
+      ...defaultProps.data,
+      'test-field': 'test-value',
+    });
+  });
+
+  it('preserves existing data when changing field', () => {
+    const propsWithData = {
+      ...defaultProps,
+      data: {
+        layout_size: 'wide_view',
+        body_class: 'homepage-inverse',
+        existing_field: 'existing_value',
+      },
+    };
+
+    render(<LayoutSettingsEdit {...propsWithData} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith('block-id', {
+      layout_size: 'wide_view',
+      body_class: 'homepage-inverse',
+      existing_field: 'existing_value',
+      'test-field': 'test-value',
+    });
+  });
+
+  it('handles empty data object', () => {
+    const propsWithEmptyData = {
+      ...defaultProps,
+      data: {},
+    };
+
+    render(<LayoutSettingsEdit {...propsWithEmptyData} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith('block-id', {
+      'test-field': 'test-value',
+    });
+  });
+
+  it('handles null data', () => {
+    const propsWithNullData = {
+      ...defaultProps,
+      data: null,
+    };
+
+    render(<LayoutSettingsEdit {...propsWithNullData} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith('block-id', {
+      'test-field': 'test-value',
+    });
+  });
+
+  it('handles undefined data', () => {
+    const propsWithUndefinedData = {
+      ...defaultProps,
+      data: undefined,
+    };
+
+    render(<LayoutSettingsEdit {...propsWithUndefinedData} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith('block-id', {
+      'test-field': 'test-value',
+    });
+  });
+
+  it('works with different block IDs', () => {
+    const propsWithDifferentBlock = {
+      ...defaultProps,
+      block: 'different-block-id',
+    };
+
+    render(<LayoutSettingsEdit {...propsWithDifferentBlock} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith(
+      'different-block-id',
+      {
+        ...defaultProps.data,
+        'test-field': 'test-value',
+      },
+    );
+  });
+
+  it('handles different schema configurations', () => {
+    const customSchema = {
+      title: 'Custom Layout Settings',
+      fieldsets: [
+        {
+          id: 'advanced',
+          title: 'Advanced',
+          fields: ['custom_field'],
+        },
+      ],
+      properties: {
+        custom_field: {
+          title: 'Custom Field',
+          widget: 'text',
+        },
+      },
+    };
+
+    EditSchema.mockReturnValue(customSchema);
+
+    render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(screen.getByTestId('form-title')).toHaveTextContent(
+      'Custom Layout Settings',
+    );
+    expect(screen.getByTestId('form-schema')).toHaveTextContent(
+      JSON.stringify(customSchema),
+    );
+  });
+
+  it('passes all props to LayoutSettingsView', () => {
+    const customProps = {
+      ...defaultProps,
+      customProp: 'custom-value',
+      anotherProp: { nested: 'object' },
+    };
+
+    render(<LayoutSettingsEdit {...customProps} />);
+
+    expect(mockLayoutSettingsView).toHaveBeenCalledWith(customProps, {});
+  });
+
+  it('renders all components in correct structure', () => {
+    const { container } = render(<LayoutSettingsEdit {...defaultProps} />);
+
+    // Check that h3 is rendered
+    expect(container.querySelector('h3')).toHaveTextContent(
+      'Page layout settings',
+    );
+
+    // Check that LayoutSettingsView is rendered
+    expect(screen.getByTestId('layout-settings-view')).toBeInTheDocument();
+
+    // Check that SidebarPortal is rendered
+    expect(screen.getByTestId('sidebar-portal')).toBeInTheDocument();
+
+    // Check that BlockDataForm is rendered inside SidebarPortal when selected
+    expect(screen.getByTestId('block-data-form')).toBeInTheDocument();
+  });
+
+  it('handles re-renders correctly', () => {
+    const { rerender } = render(<LayoutSettingsEdit {...defaultProps} />);
+
+    expect(EditSchema).toHaveBeenCalledTimes(1);
+
+    // Re-render with different props
+    const newProps = { ...defaultProps, selected: false };
+    rerender(<LayoutSettingsEdit {...newProps} />);
+
+    expect(EditSchema).toHaveBeenCalledTimes(2);
+    expect(screen.queryByTestId('block-data-form')).not.toBeInTheDocument();
+  });
+
+  it('handles onChangeBlock function prop correctly', () => {
+    const mockOnChangeBlock = jest.fn();
+    const propsWithMockFunction = {
+      ...defaultProps,
+      onChangeBlock: mockOnChangeBlock,
+    };
+
+    render(<LayoutSettingsEdit {...propsWithMockFunction} />);
+
+    const changeButton = screen.getByTestId('change-field-button');
+    fireEvent.click(changeButton);
+
+    expect(mockOnChangeBlock).toHaveBeenCalledWith('block-id', {
+      ...defaultProps.data,
+      'test-field': 'test-value',
+    });
+    expect(defaultProps.onChangeBlock).not.toHaveBeenCalled();
+  });
+});