@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

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/Footer/ColumnLinks.tsx

@@ -14,8 +14,8 @@ const ColumnLinks = (props: ColumnLinksProps) => {
         ? links.map((link) => {
             if (isEmpty(link) || !link.href) return null;
 
-            const title = link.title || link.href[0]['title'];
-            const href = flattenToAppURL(link.href[0]?.['@id']);
+            const title = link?.title || link?.href[0]?.['title'];
+            const href = flattenToAppURL(link?.href[0]?.['@id']);
 
             if (!href) return null;
 

package/src/components/Footer/slots/Colophon.tsx

@@ -2,8 +2,11 @@ import { Container } from '@plone/components';
 import Copyright from './Copyright';
 import Logo from '../../Logo/Logo';
 import type { Content } from '@plone/types';
+import isString from 'lodash/isString';
 import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
 import type { SiteFooterSettings, SiteHeaderSettings } from '../../../types';
+import config from '@plone/volto/registry';
+import { createParagraph } from '@plone/volto-slate/utils';
 
 const Colophon = ({ content }: { content: Content }) => {
   const logo = useLiveData<SiteHeaderSettings['logo']>(
@@ -12,14 +15,23 @@ const Colophon = ({ content }: { content: Content }) => {
     'logo',
   );
 
+  const getValue = (value) => {
+    // Previously this was a text field
+    if (isString(value)) {
+      return [createParagraph(value)];
+    }
+    return value;
+  };
+
   const footer_colophon_text = useLiveData<
     SiteFooterSettings['footer_colophon_text']
   >(content, 'voltolighttheme.footer', 'footer_colophon_text');
+  const RenderSlateToHtml = config.widgets.views.widget.slate_richtext;
 
   return (
     <Container className="colophon">
       {footer_colophon_text ? (
-        <>{footer_colophon_text}</>
+        <RenderSlateToHtml value={getValue(footer_colophon_text)} />
       ) : (
         <>
           <div className="powered-by">

package/src/components/Footer/slots/CoreFooter.tsx

@@ -38,8 +38,10 @@ const CoreFooter = ({ content }: { content: Content }) => {
       <Container className="default">
         <div className="footer-grid">
           <div className="address-column">
-            {/* @ts-ignore the Logo definition is different from the Volto one */}
-            <Logo isFooterLogo />
+            <div className="logo">
+              {/* @ts-ignore the Logo definition is different from the Volto one */}
+              <Logo isFooterLogo />
+            </div>
             <p
               style={{ whiteSpace: 'pre-line' }}
               dangerouslySetInnerHTML={{

package/src/components/Header/Header.tsx

@@ -82,7 +82,7 @@ const InternetHeader = ({ pathname, content }) => {
               header_actions.map((item) => (
                 <UniversalLink
                   key={item['@id']}
-                  href={item.href?.[0]['@id']}
+                  href={item.href?.[0]?.['@id']}
                   openLinkInNewTab={item.openInNewTab}
                 >
                   {item.title}
@@ -162,7 +162,7 @@ const IntranetHeader = ({ pathname, content }) => {
 
   return (
     <>
-      <div className="header">
+      <div className="header header-intranet">
         <div className="tools-wrapper">
           <LanguageSelector />
 
@@ -174,7 +174,7 @@ const IntranetHeader = ({ pathname, content }) => {
               header_actions.map((item) => (
                 <UniversalLink
                   key={item['@id']}
-                  href={item.href?.[0]['@id']}
+                  href={item.href?.[0]?.['@id']}
                   openLinkInNewTab={item.openInNewTab}
                 >
                   {item.title}

package/src/components/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,91 @@
+import { Link } from 'react-router-dom';
+
+import { useSelector } from 'react-redux';
+import cx from 'classnames';
+
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
+
+import { defineMessages, useIntl, type IntlShape } from 'react-intl';
+import type {
+  Content,
+  GetSiteResponse,
+  GetTranslationResponse,
+} from '@plone/types';
+
+const messages = defineMessages({
+  switchLanguageTo: {
+    id: 'Switch to',
+    defaultMessage: 'Switch to',
+  },
+});
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  intl: IntlShape;
+  site: {
+    data: GetSiteResponse;
+  };
+};
+
+const LanguageSelector = ({
+  onClickAction = () => {},
+}: {
+  onClickAction?: () => void;
+}) => {
+  const intl = useIntl();
+  const currentLang = useSelector<FormState, IntlShape['locale']>(
+    (state) => state.intl.locale,
+  );
+  const translations = useSelector<
+    FormState,
+    GetTranslationResponse['items'] | undefined
+  >((state) => state.content.data?.['@components']?.translations?.items);
+  const isMultilingual = useSelector<
+    FormState,
+    GetSiteResponse['features']['multilingual']
+  >((state) => state.site.data.features?.multilingual);
+  const availableLanguages = useSelector<
+    FormState,
+    GetSiteResponse['plone.available_languages']
+  >((state) => state.site.data?.['plone.available_languages']);
+
+  return isMultilingual ? (
+    <div className="language-selector">
+      {availableLanguages?.map((lang) => {
+        const langKey = lang as keyof typeof langmap;
+        const translation = translations?.find(
+          (t: { language: string }) => t.language === lang,
+        );
+        return (
+          <Link
+            aria-label={`${intl.formatMessage(
+              messages.switchLanguageTo,
+            )} ${(langmap[langKey]?.nativeName || langKey).toLowerCase()}`}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
+            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
+            title={langmap[langKey]?.nativeName || langKey}
+            onClick={() => {
+              onClickAction();
+            }}
+            key={`language-selector-${lang}`}
+          >
+            {/* START CUSTOMIZATION */}
+            {langKey.slice(0, 2)}
+            {/*  END CUSTOMIZATION} */}
+          </Link>
+        );
+      })}
+    </div>
+  ) : (
+    <Helmet>
+      <html lang={toReactIntlLang(currentLang)} />
+    </Helmet>
+  );
+};
+
+export default LanguageSelector;

package/src/components/MobileNavigation/MobileNavigation.jsx

@@ -14,7 +14,7 @@ import arrowRightSVG from '@plone/volto/icons/right-key.svg';
 import arrowLeftSVG from '@plone/volto/icons/left-key.svg';
 import { MobileNavigationToggler } from './MobileNavigationToggler';
 import { MobileToolsFooter } from './MobileToolsFooter';
-
+import { useClient } from '@plone/volto/hooks/client/useClient';
 const messages = defineMessages({
   closeMobileMenu: {
     id: 'Close menu',
@@ -43,7 +43,7 @@ const MenuItem = ({
   pathname,
 }) => {
   const [isSubMenuOpen, setSubMenuOpen] = useState(false);
-
+  const isClient = useClient();
   const openSubMenu = useCallback((e) => {
     e.stopPropagation();
     setSubMenuOpen(true);
@@ -68,9 +68,10 @@ const MenuItem = ({
   );
   const formData = useSelector((state) => state.form.global);
 
-  const has_intranet_header = !isEmpty(formData)
-    ? formData.has_intranet_header
-    : headerSettings?.has_intranet_header;
+  const has_intranet_header =
+    isClient && !isEmpty(formData)
+      ? formData.has_intranet_header
+      : headerSettings?.has_intranet_header;
 
   return (
     <li className={section.url === pathname ? 'current' : ''}>
@@ -154,16 +155,17 @@ const MobileNavigation = (props) => {
   const currentLang = useSelector((state) => state.intl.locale);
   const items = useSelector((state) => state.navigation.items || []);
   const history = useHistory();
-
+  const isClient = useClient();
   const headerSettings = useSelector(
     (state) =>
       state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
         ?.data,
   );
   const formData = useSelector((state) => state.form.global);
-  const has_intranet_header = !isEmpty(formData)
-    ? formData.has_intranet_header
-    : headerSettings?.has_intranet_header;
+  const has_intranet_header =
+    isClient && !isEmpty(formData)
+      ? formData.has_intranet_header
+      : headerSettings?.has_intranet_header;
 
   const Footer = props.MobileToolsFooter || MobileToolsFooter;