@eeacms/volto-eea-website-theme 3.1.0 → 3.3.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.1.0](https://github.com/eea/volto-eea-website-theme/compare/3.0.0...3.1.0) - 5 November 2024
+### [3.3.0](https://github.com/eea/volto-eea-website-theme/compare/3.2.0...3.3.0) - 28 November 2024
+
+#### :bug: Bug Fixes
+
+- fix(tests): add unit tests for ReportNavigation [ana-oprea - [`55ac4c2`](https://github.com/eea/volto-eea-website-theme/commit/55ac4c2a1edf0c8abdb83a2c7e3c7d578464708a)]
+
+#### :house: Internal changes
+
+- chore: package.json [alin - [`4a8a4cb`](https://github.com/eea/volto-eea-website-theme/commit/4a8a4cb014db839b90eceed935c97b85785ddf71)]
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`53be025`](https://github.com/eea/volto-eea-website-theme/commit/53be025c116dfc71a2de708075e4e77262eeecf8)]
+### [3.2.0](https://github.com/eea/volto-eea-website-theme/compare/3.1.0...3.2.0) - 14 November 2024
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`4b5073b`](https://github.com/eea/volto-eea-website-theme/commit/4b5073b60a7d144597363f89d5cba6357baa9e19)]
+### [3.1.0](https://github.com/eea/volto-eea-website-theme/compare/3.0.0...3.1.0) - 6 November 2024
 
 #### :hammer_and_wrench: Others
 
-- fix Grid conversion, ref #278618 [Miu Razvan - [`f80b786`](https://github.com/eea/volto-eea-website-theme/commit/f80b7869b4ac060bf35250cf5045ab930a0003de)]
 ## [3.0.0](https://github.com/eea/volto-eea-website-theme/compare/2.4.0...3.0.0) - 21 October 2024
 
 #### :nail_care: Enhancements
@@ -115,7 +132,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - modified param of dateIsInFuture to signal it's a string and not a date [David Ichim - [`e3243a0`](https://github.com/eea/volto-eea-website-theme/commit/e3243a075969a379462ba0b7889fe0d8b52af62a)]
-## [2.0.0](https://github.com/eea/volto-eea-website-theme/compare/1.34.0...2.0.0) - 13 May 2024
+## [2.0.0](https://github.com/eea/volto-eea-website-theme/compare/1.35.0...2.0.0) - 13 May 2024
 
 #### :rocket: New Features
 
@@ -140,6 +157,18 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Bump package version to 2.0.0 to signal major release due to Volto 17 jump [David Ichim - [`ffe3049`](https://github.com/eea/volto-eea-website-theme/commit/ffe3049b3b656093a44f05044dbe7cd63bac495f)]
+### [1.35.0](https://github.com/eea/volto-eea-website-theme/compare/1.34.0...1.35.0) - 6 November 2024
+
+#### :bug: Bug Fixes
+
+- fix(slate) - fix console error on list element  - ref #278427 [kreafox - [`2ea7dd1`](https://github.com/eea/volto-eea-website-theme/commit/2ea7dd1488782db09ca3b8636a932930326f1175)]
+- fix: cypress 13.1.0 [kreafox - [`0636604`](https://github.com/eea/volto-eea-website-theme/commit/0636604cf023730927c0006dcb146d5f9e086f1c)]
+
+#### :hammer_and_wrench: Others
+
+- Revert "Release 1.35.0" [alin - [`dcc318a`](https://github.com/eea/volto-eea-website-theme/commit/dcc318a5082e3c7fff44d00bfd9bb140c4efc21a)]
+- Revert "1.35.1" [alin - [`6012bc6`](https://github.com/eea/volto-eea-website-theme/commit/6012bc68cf7a692fc964610a6071c82d4211fb2e)]
+- Release 1.35.0 [kreafox - [`e21bee6`](https://github.com/eea/volto-eea-website-theme/commit/e21bee61e55e6c6b46d0119059f7a6063b0edad8)]
 ### [1.34.0](https://github.com/eea/volto-eea-website-theme/compare/1.33.2...1.34.0) - 9 May 2024
 
 #### :bug: Bug Fixes

package/package.json

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

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

@@ -4,18 +4,15 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { withRouter } from 'react-router';
 import { compose } from 'redux';
-import { Accordion } from 'semantic-ui-react';
+import { Accordion, Icon } from 'semantic-ui-react';
 
 import Slugger from 'github-slugger';
 
-import { Icon, UniversalLink } from '@plone/volto/components';
+import { UniversalLink, MaybeWrap } 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';
 
-import downIcon from '@plone/volto/icons/down-key.svg';
-import upIcon from '@plone/volto/icons/up-key.svg';
-
 const messages = defineMessages({
   navigation: {
     id: 'Navigation',
@@ -33,6 +30,8 @@ const AccordionNavigation = ({
   const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
   const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
   const [activeItems, setActiveItems] = React.useState({});
+  const contextNavigationListRef = React.useRef(null);
+  const summaryRef = React.useRef(null);
 
   const onClickSummary = React.useCallback((e) => {
     e.preventDefault();
@@ -43,6 +42,26 @@ const AccordionNavigation = ({
     if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
   }, [isMenuOpenOnOutsideClick]);
 
+  React.useEffect(() => {
+    if (!navOpen) {
+      const handleOutsideClick = (event) => {
+        if (
+          summaryRef.current &&
+          contextNavigationListRef.current &&
+          !summaryRef.current.contains(event.target) &&
+          !contextNavigationListRef.current.contains(event.target)
+        ) {
+          setIsNavOpen(false);
+        }
+      };
+
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [summaryRef, navOpen]);
+
   const onKeyDownSummary = React.useCallback(
     (e) => {
       if (e.keyCode === 13 || e.keyCode === 32) {
@@ -95,7 +114,11 @@ const AccordionNavigation = ({
               id={`accordion-title-${normalizedTitle}`}
             >
               <span className="title-text">{title}</span>
-              <Icon name={isActive ? upIcon : downIcon} size="32px" />
+              <Icon
+                className={
+                  isActive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
+                }
+              />
             </Accordion.Title>
             <Accordion.Content
               active={isActive}
@@ -127,20 +150,40 @@ const AccordionNavigation = ({
 
   return items.length ? (
     <>
-      <nav className="context-navigation">
+      <nav className="context-navigation" aria-label={title}>
         <details open={isNavOpen}>
           {/* eslint-disable-next-line */}
           <summary
             className="context-navigation-header accordion-header"
             onClick={onClickSummary}
             onKeyDown={onKeyDownSummary}
+            ref={summaryRef}
           >
-            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
-            <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+            <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>
           </summary>
-          <ul className="context-navigation-list accordion-list">
-            {items.map((item) => renderItems({ item }))}
-          </ul>
+          <MaybeWrap
+            condition={!navOpen}
+            className="ui container d-flex flex-items-center"
+          >
+            <ul
+              className="context-navigation-list accordion-list"
+              ref={contextNavigationListRef}
+            >
+              {items.map((item) => renderItems({ item }))}
+            </ul>
+          </MaybeWrap>
         </details>
       </nav>
     </>
@@ -174,6 +217,9 @@ export default compose(
   (WrappedComponent) => (props) =>
     withEEASideMenu(WrappedComponent)({
       ...props,
+      targetParent: '.eea.header ',
+      fixedVisibilitySwitchTarget: '.main.bar',
+      insertBeforeOnMobile: '.banner',
       shouldRender: props.navigation?.items?.length > 0,
     }),
 )(AccordionNavigation);

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

@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import cx from 'classnames';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { UniversalLink, MaybeWrap } from '@plone/volto/components';
+import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
+
+const messages = defineMessages({
+  navigation: {
+    id: 'Navigation',
+    defaultMessage: 'Navigation',
+  },
+});
+
+/**
+ * Handles click on summary links and closes parent details elements
+ * @param {Event} e - Click event
+ * @param {boolean} wrapWithDetails - Whether the element is wrapped in details
+ */
+function handleSummaryClick(e, wrapWithDetails) {
+  if (wrapWithDetails) {
+    e.preventDefault();
+
+    const currentDetails = e.target.closest('details');
+    // toggle the current details
+    if (currentDetails) {
+      currentDetails.open = !currentDetails.open;
+    }
+  }
+}
+
+/**
+ * Renders a navigation node as a list item with proper styling and links
+ * @param {Object} node - Navigation node object containing title, href, type etc
+ * @param {number} parentLevel - Parent level in navigation hierarchy
+ * @returns {React.Component} UL component with navigation node content
+ */
+function renderNode(node, parentLevel) {
+  const level = parentLevel + 1;
+  const hasChildItems = node.items?.length;
+  const nodeType = node.type;
+  const isDocument = nodeType === 'document';
+  let wrapWithDetails = isDocument && level > 2;
+  return (
+    <li
+      key={node['@id']}
+      active={node.is_current}
+      className={`list-item level-${level}`}
+    >
+      <MaybeWrap
+        condition={wrapWithDetails}
+        as="details"
+        className="context-navigation-detail"
+      >
+        {nodeType !== 'link' ? (
+          <MaybeWrap
+            condition={wrapWithDetails}
+            as="summary"
+            className="context-navigation-summary"
+          >
+            <RouterLink
+              to={flattenToAppURL(node.href)}
+              tabIndex={wrapWithDetails ? '-1' : 0}
+              title={node.description}
+              className={cx(`list-link contenttype-${nodeType}`, {
+                in_path: node.is_in_path,
+              })}
+              onClick={(e) =>
+                wrapWithDetails && handleSummaryClick(e, wrapWithDetails)
+              }
+            >
+              {node.title}
+              {nodeType === 'file' && node.getObjSize
+                ? ' [' + node.getObjSize + ']'
+                : ''}
+            </RouterLink>
+          </MaybeWrap>
+        ) : (
+          <UniversalLink href={flattenToAppURL(node.href)}>
+            {node.title}
+          </UniversalLink>
+        )}
+        {(hasChildItems && (
+          <ul className="list">
+            {node.items.map((node) => renderNode(node, level))}
+          </ul>
+        )) ||
+          ''}
+      </MaybeWrap>
+    </li>
+  );
+}
+/**
+ * A navigation slot implementation, similar to the classic Plone navigation
+ * portlet. It uses the same API, so the options are similar to
+ * INavigationPortlet
+ */
+export function ReportNavigation(props) {
+  const { navigation = {} } = props;
+  const { items = [] } = navigation;
+  const intl = useIntl();
+
+  return items.length ? (
+    <nav className="context-navigation smart-toc">
+      {navigation.has_custom_name ? (
+        <div className="context-navigation-header">
+          <RouterLink to={flattenToAppURL(navigation.url || '')}>
+            {navigation.title}
+          </RouterLink>
+        </div>
+      ) : (
+        <div className="context-navigation-header">
+          {intl.formatMessage(messages.navigation)}
+        </div>
+      )}
+      <ul className="list">{items.map((node) => renderNode(node, 0))}</ul>
+    </nav>
+  ) : (
+    ''
+  );
+}
+
+ReportNavigation.propTypes = {
+  /**
+   * Navigation tree returned from @contextnavigation restapi endpoint
+   */
+  navigation: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+      }),
+    ),
+    has_custom_name: PropTypes.bool,
+    title: PropTypes.string,
+  }),
+};
+
+export default compose(withRouter, withContentNavigation)(ReportNavigation);

package/src/components/manage/Blocks/ContextNavigation/variations/ReportNavigation.test.jsx

@@ -0,0 +1,131 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import ReportNavigation from './ReportNavigation';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+jest.mock(
+  '@plone/volto/components/theme/Navigation/withContentNavigation',
+  () => ({
+    withContentNavigation: (Component) => (props) => (
+      <Component {...props} navigation={mockNavigation} />
+    ),
+  }),
+);
+
+// Mock navigation data
+const mockNavigation = {
+  items: [
+    {
+      '@id': '/item1',
+      title: 'Item 1',
+      href: '/item1',
+      type: 'document',
+      description: 'Item 1 description',
+      is_current: false,
+      is_in_path: false,
+      items: [
+        {
+          '@id': '/item1/subitem1',
+          title: 'Subitem 1',
+          href: '/item1/subitem1',
+          type: 'document',
+          is_current: false,
+          is_in_path: false,
+          items: [],
+        },
+      ],
+    },
+    {
+      '@id': '/item2',
+      title: 'Item 2',
+      href: '/item2',
+      type: 'document',
+      description: 'Item 2 description',
+      is_current: true,
+      is_in_path: true,
+      items: [],
+    },
+  ],
+  has_custom_name: true,
+  title: 'Custom Navigation',
+  url: '/custom-navigation',
+};
+
+describe('ReportNavigation', () => {
+  it('renders navigation items correctly', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    // Check if the navigation header is rendered
+    expect(getByText('Custom Navigation')).toBeInTheDocument();
+
+    // Check if the navigation items are rendered
+    expect(getByText('Item 1')).toBeInTheDocument();
+    expect(getByText('Item 2')).toBeInTheDocument();
+    expect(getByText('Subitem 1')).toBeInTheDocument();
+  });
+
+  it('toggles details on summary click', () => {
+    const history = createMemoryHistory();
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    const detailsElement = container.querySelector('a[href="/item1"]');
+
+    // Simulate click on summary
+    fireEvent.click(detailsElement);
+  });
+
+  it('renders links with correct href attributes', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    expect(getByText('Item 1').closest('a')).toHaveAttribute('href', '/item1');
+    expect(getByText('Subitem 1').closest('a')).toHaveAttribute(
+      'href',
+      '/item1/subitem1',
+    );
+  });
+
+  it('applies active class to the current navigation item', () => {
+    const history = createMemoryHistory();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ReportNavigation />
+        </Router>
+      </Provider>,
+    );
+
+    const activeItem = getByText('Item 2');
+    expect(activeItem).toHaveClass('in_path');
+  });
+});

package/src/components/manage/Blocks/ContextNavigation/variations/index.js

@@ -1,5 +1,6 @@
 import Accordion from './Accordion';
 import Default from './Default';
+import ReportNavigation from './ReportNavigation';
 
 const contextBlockVariations = [
   {
@@ -13,6 +14,11 @@ const contextBlockVariations = [
     title: 'Accordion',
     view: Accordion,
   },
+  {
+    id: 'report_navigation',
+    title: 'Additional files',
+    view: ReportNavigation,
+  },
 ];
 
 export default contextBlockVariations;

package/src/components/manage/Blocks/Title/index.js

@@ -3,7 +3,6 @@ import View from './View';
 import DefaultTemplate from './variations/Default';
 import WebReport from './variations/WebReport';
 import WebReportPage from './variations/WebReportPage';
-import './variations/styles.less';
 
 const applyConfig = (config) => {
   config.blocks.blocksConfig.title = {

package/src/components/manage/Blocks/Title/schema.js

@@ -2,12 +2,20 @@ 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 alignTextLeftSVG from '@plone/volto/icons/align-left.svg';
+import alignTextCenterSVG from '@plone/volto/icons/align-center.svg';
+
 const ALIGN_INFO_MAP_IMAGE_POSITION = {
   'has--bg--top': [alignTopSVG, 'Top'],
   'has--bg--center': [alignCenterSVG, 'Center'],
   'has--bg--bottom': [alignBottomSVG, 'Bottom'],
 };
 
+const ALIGN_INFO_MAP_TEXT_ALIGN = {
+  'has--text--left': [alignTextLeftSVG, 'Left'],
+  'has--text--center': [alignTextCenterSVG, 'Center'],
+};
+
 const infoSchema = {
   title: 'Info',
   fieldsets: [
@@ -145,8 +153,8 @@ const titleSchema = {
     copyrightPosition: {
       title: 'Align',
       widget: 'style_align',
-      actions: ['left', 'right'],
-      defaultValue: 'left',
+      actions: ['left', 'center', 'right'],
+      defaultValue: '',
     },
     styles: {
       widget: 'object',
@@ -156,7 +164,7 @@ const titleSchema = {
           {
             id: 'default',
             title: 'Default',
-            fields: ['bg'],
+            fields: ['bg', 'textAlign'],
           },
         ],
         properties: {
@@ -167,6 +175,13 @@ const titleSchema = {
             actionsInfoMap: ALIGN_INFO_MAP_IMAGE_POSITION,
             defaultValue: 'has--bg--center',
           },
+          textAlign: {
+            title: 'Text align',
+            widget: 'style_align',
+            actions: Object.keys(ALIGN_INFO_MAP_TEXT_ALIGN),
+            actionsInfoMap: ALIGN_INFO_MAP_TEXT_ALIGN,
+            defaultValue: '',
+          },
         },
         required: [],
       },

package/src/components/manage/Blocks/Title/variations/WebReport.jsx

@@ -38,11 +38,12 @@ const WebReport = (props) => {
         {...props}
         data={{
           ...props.data,
-          hideContentType: true,
-          aboveTitle: (
+          aboveTitle: !props.data.hideContentType ? (
             <div className="content-type">
               {props.data.content_type || props.properties.type_title}
             </div>
+          ) : (
+            ' '
           ),
           belowTitle: (
             <>

package/src/components/manage/Blocks/Title/variations/WebReportPage.jsx

@@ -32,12 +32,13 @@ const WebReportPage = (props) => {
         {...props}
         data={{
           ...props.data,
-          hideContentType: true,
           aboveTitle: (
             <>
-              <div className="content-type">
-                {props.data.content_type || props.properties.type_title}
-              </div>
+              {!props.data.hideContentType && (
+                <div className="content-type">
+                  {props.data.content_type || props.properties.type_title}
+                </div>
+              )}
               <div className="subtitle">{props.data.subtitle}</div>
             </>
           ),

package/src/components/theme/Banner/View.jsx

@@ -300,7 +300,9 @@ const View = (props) => {
         <Banner.Metadata>
           <Banner.MetadataField
             type="type"
-            hidden={hideContentType}
+            hidden={
+              hideContentType || props.variation.id.indexOf('report') !== -1
+            }
             value={type}
           />
           <Banner.MetadataField

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

@@ -3,7 +3,7 @@
  * @module components/theme/Breadcrumbs/Breadcrumbs
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useLocation } from 'react-router';
@@ -32,26 +32,17 @@ const isContentRoute = (pathname) => {
 const Breadcrumbs = (props) => {
   const dispatch = useDispatch();
   const { items = [], root = '/' } = useSelector((state) => state?.breadcrumbs);
-  const content = useSelector((state) => state?.content?.data);
+  const token = useSelector((state) => state?.userSession?.token);
 
   // const pathname = useSelector((state) => state.location.pathname);
   const location = useLocation();
   const { pathname } = location;
-
-  const linkLevels = useMemo(() => {
-    if (content) {
-      const type = content['@type'];
-      const isContentTypesToAvoid =
-        config.settings.contentTypeToAvoidAsLinks || {};
-      if (isContentTypesToAvoid[type]) {
-        return isContentTypesToAvoid[type];
-      }
-    }
-  }, [content]);
+  const contentTypesAsBreadcrumbSection = !token
+    ? config.settings.contentTypesAsBreadcrumbSection
+    : [];
 
   const sections = items.map((item) => ({
-    title: item.title,
-    href: item.url,
+    ...item,
     key: item.title,
   }));
 
@@ -71,7 +62,7 @@ const Breadcrumbs = (props) => {
         pathname={pathname}
         sections={sections}
         root={root}
-        linkLevels={linkLevels}
+        contentTypesAsBreadcrumbSection={contentTypesAsBreadcrumbSection}
       />
     </React.Fragment>
   );

package/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.test.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import config from '@plone/volto/registry';
+
+import Breadcrumbs from './Breadcrumbs';
+
+const mockStore = configureStore();
+
+describe('Breadcrumbs', () => {
+  it('renders a breadcrumbs component', () => {
+    const store = mockStore({
+      breadcrumbs: {
+        items: [
+          { title: 'Blog', url: '/blog' },
+          { title: 'My first blog', url: '/blog/my-first-blog' },
+        ],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Breadcrumbs pathname="/blog" />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders breadcrumbs with contentTypesAsBreadcrumbSection', () => {
+    // Mock the config settings
+    config.settings = {
+      ...config.settings,
+      contentTypesAsBreadcrumbSection: ['Folder', 'News Item'],
+    };
+
+    const store = mockStore({
+      breadcrumbs: {
+        items: [
+          { title: 'Home', url: '/' },
+          { title: 'News', url: '/news', portal_type: 'Folder' },
+          {
+            title: 'Latest Update',
+            url: '/news/latest-update',
+            portal_type: 'News Item',
+          },
+        ],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {
+        token: null,
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Breadcrumbs pathname="/news/latest-update" />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

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

@@ -94,8 +94,13 @@ const DefaultView = (props) => {
 
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
-  const matchingNavigationPath = navigation_paths.find((navPath) =>
-    path.includes(navPath.url),
+
+  // choose last matching navigation path in case we get more specific paths
+  const matchingNavigationPath = navigation_paths.reduceRight(
+    (acc, navPath) => {
+      return acc || (path.includes(navPath.url) ? navPath : null);
+    },
+    null,
   );
 
   // If the content is not yet loaded, then do not show anything
@@ -113,7 +118,7 @@ const DefaultView = (props) => {
               no_icons: matchingNavigationPath.no_icons || true,
               root_path: matchingNavigationPath.url,
               includeTop: matchingNavigationPath.includeTop || true,
-              bottomLevel: matchingNavigationPath.bottomLevel || 3,
+              bottomLevel: matchingNavigationPath.bottomLevel || 4,
               topLevel: matchingNavigationPath.topLevel || 1,
               currentFolderOnly:
                 matchingNavigationPath.currentFolderOnly || false,

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

@@ -0,0 +1,98 @@
+/**
+ * Breadcrumbs reducer.
+ * @module reducers/breadcrumbs/breadcrumbs
+ * 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 {
+  GET_BREADCRUMBS,
+  GET_CONTENT,
+} from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  error: null,
+  items: [],
+  root: null,
+  loaded: false,
+  loading: false,
+};
+
+/**
+ * Breadcrumbs reducer.
+ * @function breadcrumbs
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function breadcrumbs(state = initialState, action = {}) {
+  let hasExpander;
+  switch (action.type) {
+    case `${GET_BREADCRUMBS}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+    case `${GET_CONTENT}_SUCCESS`:
+      hasExpander = hasApiExpander(
+        'breadcrumbs',
+        getBaseUrl(flattenToAppURL(action.result['@id'])),
+      );
+      if (hasExpander && !action.subrequest) {
+        return {
+          ...state,
+          error: null,
+          items: map(
+            action.result['@components'].breadcrumbs.items,
+            (item) => ({
+              ...item,
+              portal_type: item.portal_type,
+              url: flattenToAppURL(item['@id']),
+            }),
+          ),
+          root: flattenToAppURL(action.result['@components'].breadcrumbs.root),
+          loaded: true,
+          loading: false,
+        };
+      }
+      return state;
+    case `${GET_BREADCRUMBS}_SUCCESS`:
+      hasExpander = hasApiExpander(
+        'breadcrumbs',
+        getBaseUrl(flattenToAppURL(action.result['@id'])),
+      );
+      if (!hasExpander) {
+        return {
+          ...state,
+          error: null,
+          items: map(action.result.items, (item) => ({
+            ...item,
+            portal_type: item.portal_type,
+            url: flattenToAppURL(item['@id']),
+          })),
+          root: flattenToAppURL(action.result.root),
+          loaded: true,
+          loading: false,
+        };
+      }
+      return state;
+    case `${GET_BREADCRUMBS}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        items: [],
+        loaded: false,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+}

package/src/index.js

@@ -4,6 +4,8 @@ import { Icon } from '@plone/volto/components';
 import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
 import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
+import TableBlockEdit from '@plone/volto-slate/blocks/Table/TableBlockEdit';
+import TableBlockView from '@plone/volto-slate/blocks/Table/TableBlockView';
 import { nanoid } from '@plone/volto-slate/utils';
 
 import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation';
@@ -230,6 +232,15 @@ const applyConfig = (config) => {
   config.blocks.blocksConfig.description.restricted = false;
   config.blocks.requiredBlocks = [];
 
+  // 281166 fix paste of tables in edit mode where paste action deemed the type
+  // of slate type to be table which in Volto 17 is mapped to the Table block which is draftjs based
+  // with this fix we load the edit and view of the slateTable avoiding any draftjs loading and error
+  config.blocks.blocksConfig.table = {
+    ...config.blocks.blocksConfig.table,
+    view: TableBlockView,
+    edit: TableBlockEdit,
+  };
+
   // Date format for EU
   config.settings.dateLocale = 'en-gb';
 
@@ -495,11 +506,9 @@ const applyConfig = (config) => {
     // },
   };
 
-  //If you don't want to show the content type as a link in the breadcrumbs, you can set it to a number
-  // where 1 is the last item in the breadcrumbs, 2 is the second last, etc.
-  config.settings.contentTypeToAvoidAsLinks = {
-    web_report_section: 2,
-  };
+  // If you don't want to show the content type as a link in the breadcrumbs, you can set it
+  // contentTypesAsBreadcrumbSection
+  config.settings.contentTypesAsBreadcrumbSection = ['web_report_section'];
 
   // Group
   if (config.blocks.blocksConfig.group) {
@@ -568,7 +577,7 @@ const applyConfig = (config) => {
     GET_CONTENT: ['breadcrumbs'], // 'navigation', 'actions', 'types'],
   });
 
-  // Custom blocks: Title,Layout settings, Context navigation
+  // Custom blocks: Title, Layout settings, Context navigation
   return [
     installCustomTitle,
     installLayoutSettingsBlock,

package/src/components/manage/Blocks/Title/variations/styles.less

@@ -1,28 +0,0 @@
-.view-viewview.light-header .main.bar {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  margin-bottom: -160px;
-}
-//Gradient styles for web report
-.light-header .gradient {
-  background: linear-gradient(
-    0deg,
-    #ffffff,
-    rgba(255, 255, 255, 0.9) 30%,
-    rgba(46, 82, 114, 0.7) 70%,
-    rgba(14, 21, 26, 0.8) 100%
-  ) !important;
-}
-
-.ui.block.title .eea.banner .content {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.share-popup {
-  .actions {
-    display: flex;
-    flex-flow: row;
-  }
-}