@kitconcept/volto-light-theme 8.0.0-alpha.5 → 8.0.0-alpha.7

package/.changelog.draft

@@ -1,16 +1,14 @@
-## 8.0.0-alpha.5 (2025-11-11)
-
-### Feature
-
-- Registry color definitions support for ColorSwatch widget. @sneridagh [#723](https://github.com/kitconcept/volto-light-theme/pull/723)
+## 8.0.0-alpha.7 (2025-11-24)
 
 ### Bugfix
 
-- Fixes text in the sticky menu if the text was long enough to wrap. @jnptk [#691](https://github.com/kitconcept/volto-light-theme/pull/691)
-- Identify intranet header with a className in `header header-intranet` div. @sneridagh 
+- Fix css of unauthorized Page @iRohitSingh [#unauthorizedpageCss](https://github.com/kitconcept/volto-light-theme/pull/unauthorizedpageCss)
+- Fixed Accordion arrow/buttons no longer shrink when the title text becomes too long. @jnptk 
 
 ### Internal
 
-- Normalize all remaining add-ons to be "alpha" versions exclusively for vlt8. @sneridagh 
+- Refactoring to TS some components. @sneridagh [#731](https://github.com/kitconcept/volto-light-theme/pull/731)
+- Update to latest RAC to match the @plone/components one. @sneridagh 
+- Use forked Razzle. Update to use Volto 19a14. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,25 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.7 (2025-11-24)
+
+### Bugfix
+
+- Fix css of unauthorized Page @iRohitSingh [#unauthorizedpageCss](https://github.com/kitconcept/volto-light-theme/pull/unauthorizedpageCss)
+- Fixed Accordion arrow/buttons no longer shrink when the title text becomes too long. @jnptk 
+
+### Internal
+
+- Refactoring to TS some components. @sneridagh [#731](https://github.com/kitconcept/volto-light-theme/pull/731)
+- Update to latest RAC to match the @plone/components one. @sneridagh 
+- Use forked Razzle. Update to use Volto 19a14. @sneridagh 
+
+## 8.0.0-alpha.6 (2025-11-13)
+
+### Bugfix
+
+- Missing @kitconcept/volto-bm3-compat as dep. @sneridagh [#726](https://github.com/kitconcept/volto-light-theme/pull/726)
+
 ## 8.0.0-alpha.5 (2025-11-11)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.7",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -45,7 +45,7 @@
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
     "vitest": "^3.1.2",
-    "@plone/types": "2.0.0-alpha.10"
+    "@plone/types": "2.0.0-alpha.11"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -54,10 +54,11 @@
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "react-animate-height": "^3.2.3",
-    "react-aria-components": "^1.12.1",
+    "react-aria-components": "^1.13.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "@plone/components": "^4.0.0-alpha.1"
+    "@plone/components": "^4.0.0-alpha.4",
+    "@kitconcept/volto-bm3-compat": "^1.0.0-alpha.1"
   },
   "peerDependencies": {
     "classnames": "^2.5.1",

package/src/__mocks__/semantic-ui-react.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+type GenericProps = {
+  children?: React.ReactNode;
+} & Record<string, unknown>;
+
+const createComponent =
+  (element: keyof JSX.IntrinsicElements = 'div') =>
+  ({ children, ...rest }: GenericProps) =>
+    React.createElement(element, rest, children);
+
+export const Container = createComponent('div');
+export const Segment = createComponent('section');
+export const Button = createComponent('button');
+export const Form = createComponent('form');
+export const Input = createComponent('input');
+export const Pagination = createComponent('div');
+export const Dimmer = createComponent('div');
+export const Loader = createComponent('div');
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  Container,
+  Segment,
+  Button,
+  Form,
+  Input,
+  Pagination,
+  Dimmer,
+  Loader,
+};

package/src/components/Blocks/schema.ts

@@ -0,0 +1,69 @@
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+import { defineMessages } from 'react-intl';
+import config from '@plone/volto/registry';
+import type {
+  BlocksFormData,
+  JSONSchema,
+  SchemaEnhancerArgs,
+  StyleDefinition,
+} from '@plone/types';
+
+const messages = defineMessages({
+  backgroundColor: {
+    id: 'Background color',
+    defaultMessage: 'Background color',
+  },
+});
+
+const getThemes = (formData: BlocksFormData): StyleDefinition[] | undefined => {
+  const blockConfig = config.blocks?.blocksConfig?.[formData['@type']];
+
+  return blockConfig?.themes || config.blocks.themes;
+};
+
+const getDefaultTheme = (formData: BlocksFormData): string | undefined => {
+  const blockConfig = config.blocks?.blocksConfig?.[formData['@type']];
+
+  return (
+    blockConfig?.defaultTheme || config.blocks.themes?.[0]?.name || undefined
+  );
+};
+
+export const defaultStylingSchema = ({
+  schema,
+  formData,
+  intl,
+}: SchemaEnhancerArgs): JSONSchema => {
+  const themes = getThemes(formData);
+  const defaultTheme = getDefaultTheme(formData);
+
+  addStyling({ schema, intl });
+
+  const stylingIndex = schema.fieldsets.findIndex(
+    (item) => item.id === 'styling',
+  );
+
+  if (stylingIndex === -1 || !schema.fieldsets[stylingIndex]) {
+    return schema;
+  }
+
+  const stylingFieldset = schema.fieldsets[stylingIndex];
+
+  stylingFieldset.fields = [...stylingFieldset.fields, 'theme'];
+
+  schema.properties.theme = {
+    widget: 'color_picker',
+    title: intl.formatMessage(messages.backgroundColor),
+    themes,
+    default: defaultTheme,
+  };
+
+  return schema;
+};
+
+export const removeStylingSchema = ({
+  schema,
+}: Pick<SchemaEnhancerArgs, 'schema'>): JSONSchema => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+import Breadcrumbs from './Breadcrumbs';
+import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+
+vi.mock('@plone/components', () => ({
+  Container: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="container">{children}</div>
+  ),
+}));
+
+vi.mock('@plone/volto/components/theme/Icon/Icon', () => ({
+  __esModule: true,
+  default: () => <span data-testid="home-icon" />,
+}));
+
+vi.mock('@plone/volto/actions/breadcrumbs/breadcrumbs', () => ({
+  getBreadcrumbs: vi.fn(() => ({ type: 'GET_BREADCRUMBS' })),
+}));
+
+vi.mock('@plone/volto/helpers/Url/Url', () => ({
+  getBaseUrl: vi.fn(() => '/base'),
+}));
+
+vi.mock('@plone/volto/helpers/Utils/Utils', () => ({
+  hasApiExpander: vi.fn(() => false),
+}));
+
+const mockStore = configureStore<{
+  breadcrumbs: {
+    items: { title: string; url: string }[];
+    root?: string;
+  };
+  intl: {
+    locale: string;
+    messages: Record<string, string>;
+  };
+}>();
+
+const mockedGetBreadcrumbs = vi.mocked(getBreadcrumbs);
+const mockedGetBaseUrl = vi.mocked(getBaseUrl);
+const mockedHasApiExpander = vi.mocked(hasApiExpander);
+
+const renderBreadcrumbs = (
+  options: {
+    pathname?: string;
+    items?: { title: string; url: string }[];
+    root?: string;
+  } = {},
+) => {
+  const {
+    pathname = '/current-path',
+    items = [
+      { title: 'Section one', url: '/section-one' },
+      { title: 'Current page', url: '/section-one/current' },
+    ],
+    root = '/home',
+  } = options;
+
+  const store = mockStore({
+    breadcrumbs: {
+      items,
+      root,
+    },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const renderResult = render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <Breadcrumbs pathname={pathname} />
+      </MemoryRouter>
+    </Provider>,
+  );
+
+  return { store, ...renderResult };
+};
+
+describe('Breadcrumbs', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedGetBaseUrl.mockReturnValue('/base');
+    mockedGetBreadcrumbs.mockReturnValue({ type: 'GET_BREADCRUMBS' });
+  });
+
+  it('renders the home link and breadcrumb items', () => {
+    mockedHasApiExpander.mockReturnValue(true);
+    const { container } = renderBreadcrumbs();
+
+    const homeLink = screen.getByTitle('Home') as HTMLAnchorElement;
+    expect(homeLink).toHaveAttribute('href', '/home');
+    expect(screen.getByText('Section one')).toBeInTheDocument();
+    expect(screen.getByText('Current page')).toHaveClass('section', {
+      exact: false,
+    });
+    expect(container.querySelector('.section.active')?.textContent).toBe(
+      'Current page',
+    );
+  });
+
+  it('dispatches breadcrumb fetching when no expander is registered', () => {
+    mockedHasApiExpander.mockReturnValue(false);
+    mockedGetBaseUrl.mockReturnValue('/base-url');
+    const { store } = renderBreadcrumbs({ pathname: '/another-path' });
+
+    expect(mockedGetBaseUrl).toHaveBeenCalledWith('/another-path');
+    expect(mockedGetBreadcrumbs).toHaveBeenCalledWith('/base-url');
+    expect(store.getActions()).toEqual([{ type: 'GET_BREADCRUMBS' }]);
+  });
+
+  it('skips fetching when breadcrumbs expander already exists', () => {
+    mockedHasApiExpander.mockReturnValue(true);
+    const { store } = renderBreadcrumbs();
+
+    expect(mockedGetBreadcrumbs).not.toHaveBeenCalled();
+    expect(store.getActions()).toHaveLength(0);
+  });
+});

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+  type TypedUseSelectorHook,
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Container } from '@plone/components';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+
+import homeSVG from '@plone/volto/icons/home.svg';
+
+const messages = defineMessages({
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
+  breadcrumbs: {
+    id: 'Breadcrumbs',
+    defaultMessage: 'Breadcrumbs',
+  },
+  controlpanel: {
+    id: 'Site Setup',
+    defaultMessage: 'Site Setup',
+  },
+});
+
+type BreadcrumbItem = {
+  title: string;
+  url: string;
+};
+
+type BreadcrumbsProps = {
+  pathname: string;
+};
+
+type BreadcrumbState = {
+  items: BreadcrumbItem[];
+  root?: string | null;
+};
+
+type RootState = {
+  breadcrumbs: BreadcrumbState;
+};
+
+const useRootSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+export const BreadcrumbsComponent = ({ pathname }: BreadcrumbsProps) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname: realPath } = useLocation();
+  const controlpanelItems = useMemo(
+    () => [
+      {
+        url: '/controlpanel',
+        title: intl.formatMessage(messages.controlpanel),
+      },
+    ],
+    [intl],
+  );
+  const storeItems = useRootSelector((state) => state.breadcrumbs.items);
+  const root = useRootSelector((state) => state.breadcrumbs.root);
+  const items = realPath.startsWith('/controlpanel')
+    ? controlpanelItems
+    : storeItems;
+
+  useEffect(() => {
+    const baseUrl = getBaseUrl(pathname);
+
+    if (!hasApiExpander('breadcrumbs', baseUrl)) {
+      dispatch(getBreadcrumbs(baseUrl));
+    }
+  }, [dispatch, pathname]);
+
+  return (
+    <div
+      role="navigation"
+      aria-label={intl.formatMessage(messages.breadcrumbs)}
+      className="breadcrumbs"
+    >
+      <Container layout>
+        <div className="breadcrumb">
+          <Link
+            to={root || '/'}
+            className="home"
+            title={intl.formatMessage(messages.home)}
+          >
+            <Icon name={homeSVG} size="25px" />
+          </Link>
+          {items.map((item, index) => {
+            const isLast = index === items.length - 1;
+
+            return (
+              <React.Fragment key={item.url}>
+                <div className="divider" />
+                {isLast ? (
+                  <div className="section active">{item.title}</div>
+                ) : (
+                  <Link to={item.url} className="section">
+                    {item.title}
+                  </Link>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default BreadcrumbsComponent;

package/src/components/Caption/Caption.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import Caption from './Caption';
+
+describe('Caption', () => {
+  it('renders title, description lines, and credits', () => {
+    const { container } = render(
+      <Caption
+        title="My image"
+        description={'First line\n\nThird line'}
+        credit="Photo: Someone"
+      />,
+    );
+
+    expect(screen.getByText('My image')).toBeInTheDocument();
+    const paragraphs = Array.from(
+      container.querySelectorAll('.description p'),
+    ).map((node) => node.textContent);
+    expect(paragraphs).toEqual(['First line', '\u00A0', 'Third line']);
+    expect(screen.getByText('Photo: Someone')).toHaveClass('credits');
+  });
+
+  it('allows configuring the wrapper tag', () => {
+    const { container } = render(<Caption as="div" title="Custom tag" />);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.tagName).toBe('DIV');
+  });
+});

package/src/components/Caption/{Caption.jsx → Caption.tsx}

@@ -1,9 +1,9 @@
-/**
- * Image/video caption component.
- * @module components/Image/Caption
- */
-import React from 'react';
-import PropTypes from 'prop-types';
+type CaptionProps = {
+  as?: keyof JSX.IntrinsicElements;
+  title?: string;
+  description?: string;
+  credit?: string;
+};
 
 /**
  * Image/video caption component class.
@@ -14,10 +14,14 @@ import PropTypes from 'prop-types';
  * @params {object} credit Credit text.
  * @returns {string} Markup of the component.
  */
-const Caption = ({ as = 'figcaption', title, description, credit }) => {
-  const As = as;
+const Caption = ({
+  as: Tag = 'figcaption',
+  title,
+  description,
+  credit,
+}: CaptionProps) => {
   return (
-    <As>
+    <Tag>
       {title && <strong className="title">{title}</strong>}
       {description && (
         <div className="description">
@@ -27,19 +31,8 @@ const Caption = ({ as = 'figcaption', title, description, credit }) => {
         </div>
       )}
       {credit && <p className="credits">{credit}</p>}
-    </As>
+    </Tag>
   );
 };
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Caption.propTypes = {
-  credit: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
-};
-
 export default Caption;

package/src/components/Navigation/Navigation.test.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+import Navigation from './Navigation';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+
+vi.mock('../../helpers/doesNodeContainClick', () => ({
+  __esModule: true,
+  default: () => false,
+}));
+
+vi.mock('@plone/volto/components/theme/Icon/Icon', () => ({
+  __esModule: true,
+  default: () => <span data-testid="icon" />,
+}));
+
+vi.mock('@plone/volto/components/theme/Navigation/NavItem', () => ({
+  __esModule: true,
+  default: ({ item }: { item: { title: string } }) => (
+    <span data-testid="nav-item">{item.title}</span>
+  ),
+}));
+
+vi.mock('@plone/volto/actions/navigation/navigation', () => ({
+  getNavigation: vi.fn(() => ({ type: 'GET_NAVIGATION' })),
+}));
+
+vi.mock('@plone/volto/helpers/Url/Url', () => ({
+  getBaseUrl: vi.fn((path: string) => path),
+}));
+
+vi.mock('@plone/volto/helpers/Utils/Utils', () => ({
+  hasApiExpander: vi.fn(() => false),
+}));
+
+vi.mock('@plone/volto/registry', () => ({
+  __esModule: true,
+  default: {
+    settings: {
+      navDepth: 3,
+    },
+  },
+}));
+
+vi.mock('@plone/volto/icons/clear.svg', () => ({
+  __esModule: true,
+  default: 'clear.svg',
+}));
+
+const mockStore = configureStore();
+
+const mockedHasApiExpander = vi.mocked(hasApiExpander);
+const mockedGetNavigation = vi.mocked(getNavigation);
+const mockedGetBaseUrl = vi.mocked(getBaseUrl);
+
+type TestNavigationItem = {
+  title: string;
+  url: string;
+  nav_title?: string;
+  items?: TestNavigationItem[];
+};
+
+const baseItems: TestNavigationItem[] = [
+  { title: 'About', url: '/about' },
+  { title: 'News', url: '/news' },
+];
+
+const renderNavigation = ({
+  items = baseItems,
+  hasFatMenuHeader = false,
+  formFatMenu,
+  pathname = '/news',
+}: {
+  items?: TestNavigationItem[];
+  hasFatMenuHeader?: boolean;
+  formFatMenu?: boolean;
+  pathname?: string;
+} = {}) => {
+  const store = mockStore({
+    content: {
+      data: {
+        '@components': {
+          inherit: {
+            'voltolighttheme.header': {
+              data: { has_fat_menu: hasFatMenuHeader },
+            },
+          },
+        },
+      },
+    },
+    form: {
+      global:
+        formFatMenu === undefined ? undefined : { has_fat_menu: formFatMenu },
+    },
+    intl: {
+      locale: 'en',
+    },
+    userSession: {
+      token: null,
+    },
+    navigation: {
+      items,
+    },
+  });
+
+  const renderResult = render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <Navigation pathname={pathname} />
+      </MemoryRouter>
+    </Provider>,
+  );
+
+  return { store, ...renderResult };
+};
+
+describe('Navigation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedHasApiExpander.mockReturnValue(false);
+    mockedGetNavigation.mockReturnValue({ type: 'GET_NAVIGATION' });
+    mockedGetBaseUrl.mockImplementation((path: string) => path);
+  });
+
+  it('renders simple nav items when fat menu is disabled', () => {
+    renderNavigation({ hasFatMenuHeader: false });
+
+    const navItems = screen.getAllByTestId('nav-item');
+    expect(navItems).toHaveLength(baseItems.length);
+    expect(navItems[0]).toHaveTextContent('About');
+  });
+
+  it('expands and collapses the fat menu', () => {
+    const { container } = renderNavigation({
+      hasFatMenuHeader: true,
+      items: [
+        {
+          title: 'Sections',
+          url: '/sections',
+          items: [
+            {
+              title: 'First',
+              url: '/sections/first',
+              items: [],
+            },
+          ],
+        },
+      ],
+    });
+
+    const openButtons = screen.getAllByRole('button', {
+      name: 'Open menu',
+    });
+    fireEvent.click(openButtons[0]);
+    expect(container.querySelector('.submenu.active')).not.toBeNull();
+
+    const closeButton = screen.getByLabelText('Close menu');
+    fireEvent.click(closeButton);
+    expect(container.querySelector('.submenu.active')).toBeNull();
+  });
+
+  it('fetches navigation data when no expander is present', () => {
+    mockedGetBaseUrl.mockReturnValue('/base');
+    const { store } = renderNavigation({ pathname: '/blog' });
+
+    expect(mockedGetBaseUrl).toHaveBeenCalledWith('/blog');
+    expect(mockedGetNavigation).toHaveBeenCalledWith('/base', 3);
+    expect(store.getActions()).toEqual([{ type: 'GET_NAVIGATION' }]);
+  });
+});

package/src/components/Navigation/{Navigation.jsx → Navigation.tsx}

@@ -1,12 +1,9 @@
-// SemanticUI-free pre-@plone/components
-
 import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import doesNodeContainClick from '../../helpers/doesNodeContainClick';
-import { useIntl, defineMessages, injectIntl } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
@@ -28,31 +25,87 @@ const messages = defineMessages({
   },
 });
 
-const Navigation = ({ pathname }) => {
-  const [desktopMenuOpen, setDesktopMenuOpen] = useState(null);
-  const [currentOpenIndex, setCurrentOpenIndex] = useState(null);
-  const navigation = useRef(null);
+type NavigationItem = {
+  title: string;
+  nav_title?: string;
+  url: string;
+  items?: NavigationItem[];
+};
+
+type NavigationProps = {
+  pathname: string;
+};
+
+type HeaderSettings = {
+  has_fat_menu?: boolean;
+};
+
+type RootState = {
+  content: {
+    data?: {
+      '@components'?: {
+        inherit?: {
+          'voltolighttheme.header'?: {
+            data?: HeaderSettings;
+          };
+        };
+      };
+    };
+  };
+  form: {
+    global?: {
+      has_fat_menu?: boolean;
+      [key: string]: unknown;
+    };
+  };
+  intl: {
+    locale: string;
+  };
+  userSession: {
+    token?: string | null;
+  };
+  navigation: {
+    items: NavigationItem[];
+  };
+};
+
+const Navigation = ({ pathname }: NavigationProps) => {
+  const [desktopMenuOpen, setDesktopMenuOpen] = useState<number | null>(null);
+  const [currentOpenIndex, setCurrentOpenIndex] = useState<number | null>(null);
+  const navigation = useRef<HTMLElement | null>(null);
   const dispatch = useDispatch();
   const intl = useIntl();
   const headerSettings = useSelector(
-    (state) =>
+    (state: RootState) =>
       state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
         ?.data,
   );
-  const formData = useSelector((state) => state.form.global);
+  const formData = useSelector((state: RootState) => state.form.global);
 
-  const has_fat_menu =
-    !isEmpty(formData) && formData?.has_fat_menu
+  const hasFatMenuSetting =
+    !isEmpty(formData) && formData?.has_fat_menu !== undefined
       ? formData.has_fat_menu
       : headerSettings?.has_fat_menu;
+  const hasFatMenu = hasFatMenuSetting ?? false;
+
+  const lang = useSelector((state: RootState) => state.intl.locale);
+  const token = useSelector(
+    (state: RootState) => state.userSession.token,
+    shallowEqual,
+  );
+  const items = useSelector(
+    (state: RootState) => state.navigation.items,
+    shallowEqual,
+  );
 
-  const lang = useSelector((state) => state.intl.locale);
-  const token = useSelector((state) => state.userSession.token, shallowEqual);
-  const items = useSelector((state) => state.navigation.items, shallowEqual);
+  const closeMenu = () => {
+    setDesktopMenuOpen(null);
+    setCurrentOpenIndex(null);
+  };
 
   useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (navigation.current && doesNodeContainClick(navigation.current, e))
+    const handleClickOutside = (event: MouseEvent) => {
+      if (navigation.current && doesNodeContainClick(navigation.current, event))
         return;
       closeMenu();
     };
@@ -70,11 +123,11 @@ const Navigation = ({ pathname }) => {
     }
   }, [pathname, token, dispatch]);
 
-  const isActive = (url) => {
+  const isActive = (url: string) => {
     return (url === '' && pathname === '/') || (url !== '' && pathname === url);
   };
 
-  const openMenu = (index) => {
+  const openMenu = (index: number) => {
     if (index === currentOpenIndex) {
       setDesktopMenuOpen(null);
       setCurrentOpenIndex(null);
@@ -84,14 +137,9 @@ const Navigation = ({ pathname }) => {
     }
   };
 
-  const closeMenu = (index) => {
-    setDesktopMenuOpen(null);
-    setCurrentOpenIndex(null);
-  };
-
   useEffect(() => {
-    const handleEsc = (event) => {
-      if (event.keyCode === 27) {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' || event.keyCode === 27) {
         closeMenu();
       }
     };
@@ -113,7 +161,7 @@ const Navigation = ({ pathname }) => {
         <ul className="desktop-menu">
           {items.map((item, index) => (
             <li key={item.url}>
-              {has_fat_menu ? (
+              {hasFatMenu ? (
                 <>
                   <button
                     onClick={() => openMenu(index)}
@@ -123,7 +171,7 @@ const Navigation = ({ pathname }) => {
                         (!desktopMenuOpen && pathname === item.url),
                     })}
                     aria-label={intl.formatMessage(messages.openFatMenu)}
-                    aria-expanded={desktopMenuOpen === index ? true : false}
+                    aria-expanded={desktopMenuOpen === index}
                   >
                     {item.title}
                   </button>
@@ -212,12 +260,4 @@ const Navigation = ({ pathname }) => {
   );
 };
 
-Navigation.propTypes = {
-  pathname: PropTypes.string.isRequired,
-};
-
-Navigation.defaultProps = {
-  token: null,
-};
-
-export default injectIntl(Navigation);
+export default Navigation;

package/src/components/Tags/Tags.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import Tags from './Tags';
+import type { Content } from '@plone/types';
+
+const mockConfig = vi.hoisted(() => ({
+  getComponent: vi.fn(() => ({
+    component: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="container">{children}</div>
+    ),
+  })),
+  settings: {
+    showTags: true,
+  },
+}));
+
+vi.mock('@plone/registry', () => ({
+  __esModule: true,
+  default: mockConfig,
+}));
+
+const mockUseLiveData = vi.fn();
+
+vi.mock('@kitconcept/volto-light-theme/helpers/useLiveData', () => ({
+  useLiveData: (content: unknown, behavior: unknown, field: string) =>
+    mockUseLiveData(content, behavior, field),
+}));
+
+describe('Tags', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfig.settings.showTags = true;
+  });
+
+  it('renders tag links when enabled', () => {
+    mockUseLiveData.mockReturnValue(['React', 'Volto']);
+    render(
+      <MemoryRouter>
+        <Tags content={{ subjects: ['React', 'Volto'] } as Content} />
+      </MemoryRouter>,
+    );
+
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/search?Subject=React');
+    expect(links[1]).toHaveTextContent('Volto');
+  });
+
+  it('returns null when tags are hidden or empty', () => {
+    mockConfig.settings.showTags = false;
+    mockUseLiveData.mockReturnValue(['React']);
+    const { container: hidden } = render(
+      <MemoryRouter>
+        <Tags />
+      </MemoryRouter>,
+    );
+    expect(hidden.firstChild).toBeNull();
+
+    mockConfig.settings.showTags = true;
+    mockUseLiveData.mockReturnValue([]);
+    const { container: empty } = render(
+      <MemoryRouter>
+        <Tags />
+      </MemoryRouter>,
+    );
+    expect(empty.firstChild).toBeNull();
+  });
+});

package/src/components/Tags/{Tags.jsx → Tags.tsx}

@@ -1,11 +1,17 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import config from '@plone/registry';
 import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import type { Content } from '@plone/types';
 
-const Tags = ({ content }) => {
-  const tags = useLiveData(content, undefined, 'subjects') || [];
+type TagsProps = {
+  content?: Content;
+};
+
+const Tags: React.FC<TagsProps> = ({ content }) => {
+  const safeContent = content ?? ({ subjects: [] } as Content);
+  const tags = useLiveData<string[]>(safeContent, undefined, 'subjects') || [];
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
@@ -22,26 +28,4 @@ const Tags = ({ content }) => {
   );
 };
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Tags.propTypes = {
-  content: PropTypes.shape({
-    subjects: PropTypes.arrayOf(PropTypes.string),
-  }),
-};
-
-/**
- * Default properties.
- * @property {Object} defaultProps Default properties.
- * @static
- */
-Tags.defaultProps = {
-  content: {
-    subjects: [],
-  },
-};
-
 export default Tags;

package/src/config/blocks.tsx

@@ -65,6 +65,7 @@ declare module '@plone/types' {
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
+    defaultTheme: string;
     allowedBlocks?: string[];
     allowed_headline_tags?: string[][];
     unwantedButtons?: string[];

package/src/internalChecks.test.ts

@@ -0,0 +1,94 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const recommendedAddonsPath = path.resolve(
+  __dirname,
+  '../../../..',
+  'recommendedAddons.json',
+);
+const mrsDeveloperPath = path.resolve(
+  __dirname,
+  '../../..',
+  'mrs.developer.json',
+);
+
+const readJSON = <T>(filePath: string): T =>
+  JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+
+const normalizeVersion = (version: unknown) =>
+  typeof version === 'string' ? version.replace(/^[\\^~]/, '') : version;
+
+const excludedPackages = new Set(['@eeacms/volto-accordion-block']);
+
+describe('internal checks', () => {
+  it('keeps recommended add-ons in sync with mrs.developer.json', () => {
+    const recommendedAddons = readJSON<Record<string, string>>(
+      recommendedAddonsPath,
+    );
+    const mrsDeveloper = readJSON<Record<string, unknown>>(mrsDeveloperPath);
+
+    const mrsByPackage = Object.entries(mrsDeveloper).reduce<
+      Record<string, Record<string, unknown> & { configKey: string }>
+    >((acc, [configKey, configValue]) => {
+      if (
+        configValue &&
+        typeof configValue === 'object' &&
+        'package' in configValue
+      ) {
+        acc[String((configValue as Record<string, unknown>).package)] = {
+          ...(configValue as Record<string, unknown>),
+          configKey,
+        };
+      }
+      return acc;
+    }, {});
+
+    const issues: string[] = [];
+
+    Object.entries(recommendedAddons).forEach(
+      ([packageName, recommendedVersion]) => {
+        if (excludedPackages.has(packageName)) return;
+
+        const mrsEntry = mrsByPackage[packageName];
+
+        if (!mrsEntry) {
+          issues.push(
+            `${packageName} is listed in recommendedAddons.json but missing from frontend/mrs.developer.json.`,
+          );
+          return;
+        }
+
+        const mrsVersion =
+          (mrsEntry.tag as string | undefined) ||
+          (mrsEntry.branch as string | undefined) ||
+          (mrsEntry.version as string | undefined);
+
+        if (!mrsVersion) {
+          issues.push(
+            `${packageName} (${mrsEntry.configKey}) has no tag, branch, or version specified in frontend/mrs.developer.json.`,
+          );
+          return;
+        }
+
+        const normalizedRecommended = normalizeVersion(recommendedVersion);
+        const normalizedMrsVersion = normalizeVersion(mrsVersion);
+
+        if (
+          recommendedVersion !== mrsVersion &&
+          normalizedRecommended !== normalizedMrsVersion
+        ) {
+          issues.push(
+            `${packageName} differs: recommendedAddons.json=${recommendedVersion} vs frontend/mrs.developer.json(${mrsEntry.configKey})=${mrsVersion}.`,
+          );
+        }
+      },
+    );
+
+    expect(issues).toEqual([]);
+  });
+});

package/src/theme/blocks/_accordion.scss

@@ -26,6 +26,7 @@
       & > span,
       .input-accordion-title {
         @include introduction();
+        max-width: calc(100% - 50px); // 100% - svg height
         color: $darkGrey;
       }
 

package/src/theme/notfound.scss

@@ -1,3 +1,4 @@
+.view-editview.is-anonymous,
 .page-not-found {
   .content-area {
     @include default-container-width();

package/vitest.config.mjs

@@ -10,6 +10,10 @@ export default defineConfig({
       // Alias for absolute imports
       '@kitconcept/volto-light-theme': path.resolve(__dirname, './src'),
       '@kitconcept/volto-light-theme/': path.resolve(__dirname, './src/'),
+      'semantic-ui-react': path.resolve(
+        __dirname,
+        './src/__mocks__/semantic-ui-react.ts',
+      ),
     },
   },
   server: {

package/razzle.extend.js

@@ -1,38 +0,0 @@
-const plugins = (defaultPlugins) => {
-  const newPlugins = defaultPlugins.filter((plugin) => plugin !== 'scss');
-  newPlugins.push({
-    name: 'scss',
-    options: {
-      sass: {
-        dev: {
-          sassOptions: {
-            includePaths: ['node_modules'],
-            outputStyle: 'expanded',
-            sourceMap: true,
-            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
-            quietDeps: true,
-          },
-        },
-        prod: {
-          sassOptions: {
-            includePaths: ['node_modules'],
-            outputStyle: 'expanded',
-            sourceMap: true,
-            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
-            quietDeps: true,
-          },
-        },
-      },
-    },
-  });
-  return newPlugins;
-};
-
-const modify = (config, { target, dev }, webpack) => {
-  return config;
-};
-
-module.exports = {
-  plugins,
-  modify,
-};

package/src/components/Blocks/schema.js

@@ -1,44 +0,0 @@
-import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
-import { defineMessages } from 'react-intl';
-import config from '@plone/volto/registry';
-
-const messages = defineMessages({
-  backgroundColor: {
-    id: 'Background color',
-    defaultMessage: 'Background color',
-  },
-});
-
-export const defaultStylingSchema = ({ schema, formData, intl }) => {
-  const themes =
-    config.blocks?.blocksConfig?.[formData['@type']]?.themes ||
-    config.blocks.themes;
-
-  const defaultTheme =
-    config.blocks?.blocksConfig?.[formData['@type']]?.defaultTheme ||
-    // The default color is the first color in the themes list
-    config.blocks.themes?.[0].name;
-
-  addStyling({ schema, intl });
-
-  const stylingIndex = schema.fieldsets.findIndex(
-    (item) => item.id === 'styling',
-  );
-  schema.fieldsets[stylingIndex].fields = [
-    ...schema.fieldsets[stylingIndex].fields,
-    'theme',
-  ];
-  schema.properties.theme = {
-    widget: 'color_picker',
-    title: intl.formatMessage(messages.backgroundColor),
-    themes,
-    default: defaultTheme,
-  };
-
-  return schema;
-};
-
-export const removeStylingSchema = ({ schema, formData, intl }) => {
-  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
-  return schema;
-};

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,118 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Container } from '@plone/components';
-
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
-import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
-
-import homeSVG from '@plone/volto/icons/home.svg';
-
-const messages = defineMessages({
-  home: {
-    id: 'Home',
-    defaultMessage: 'Home',
-  },
-  breadcrumbs: {
-    id: 'Breadcrumbs',
-    defaultMessage: 'Breadcrumbs',
-  },
-});
-
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
-    }
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-      >
-        <Container layout>
-          <div className="breadcrumb">
-            <Link
-              to={this.props.root || '/'}
-              className="home"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="25px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <div className="divider" key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <div className="section active" key={item.url}>
-                  {item.title}
-                </div>
-              ),
-            ])}
-          </div>
-        </Container>
-      </div>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);