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

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/StickyMenu/MobileCarouselArrowButton.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
+import type { ComponentPropsWithRef } from 'react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+import leftArrowSVG from '@plone/volto/icons/left-key.svg';
+
+type UsePrevNextButtonsType = {
+  prevBtnDisabled: boolean;
+  nextBtnDisabled: boolean;
+  onPrevButtonClick: () => void;
+  onNextButtonClick: () => void;
+};
+
+export const usePrevNextButtons = (
+  emblaApi: EmblaCarouselType | undefined,
+): UsePrevNextButtonsType => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev());
+    setNextBtnDisabled(!emblaApi.canScrollNext());
+  }, []);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onSelect).on('select', onSelect);
+  }, [emblaApi, onSelect]);
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  };
+};
+
+type PropType = ComponentPropsWithRef<'button'>;
+
+export const PrevButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--prev"
+      type="button"
+      {...restProps}
+    >
+      <Icon name={leftArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};
+
+export const NextButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--next"
+      type="button"
+      {...restProps}
+    >
+      <Icon name={rightArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};

package/src/components/StickyMenu/MobileStickyMenu.tsx

@@ -0,0 +1,76 @@
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import { IconLinkListTemplate } from '@kitconcept/volto-light-theme/primitives/IconLinkList';
+import type { StickyMenuSettings } from '../../types';
+import useEmblaCarousel from 'embla-carousel-react';
+import type { EmblaOptionsType } from 'embla-carousel';
+
+import {
+  usePrevNextButtons,
+  PrevButton,
+  NextButton,
+} from './MobileCarouselArrowButton';
+import type { Content } from '@plone/types';
+
+const MobileStickyMenu = ({ content }: { content: Content }) => {
+  const options: EmblaOptionsType = {};
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi);
+  const showMobileStickyMenu = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'enable_mobile_sticky_menu',
+  );
+  const menuData = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'sticky_menu',
+  );
+
+  const sticky_menu_color = useLiveData<
+    StickyMenuSettings['sticky_menu_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_color');
+
+  const sticky_menu_foreground_color = useLiveData<
+    StickyMenuSettings['sticky_menu_foreground_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_foreground_color');
+
+  if (!showMobileStickyMenu) {
+    return null;
+  }
+
+  return (
+    <div
+      className="mobile-sticky-menu"
+      role="navigation"
+      aria-label="Mobile Sticky menu"
+      style={
+        {
+          '--sticky-menu-color': sticky_menu_color,
+          '--sticky-menu-foreground-color': sticky_menu_foreground_color,
+        } as React.CSSProperties
+      }
+    >
+      <section className="embla">
+        <div className="embla__viewport" ref={emblaRef}>
+          <div className="embla__container">
+            {menuData &&
+              menuData.map((item) => (
+                <ul className="embla__slide" key={item['@id']}>
+                  <IconLinkListTemplate item={item} />
+                </ul>
+              ))}
+          </div>
+        </div>
+        <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+        <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+      </section>
+    </div>
+  );
+};
+
+export default MobileStickyMenu;

package/src/components/Summary/DefaultSummary.tsx

@@ -4,6 +4,7 @@ import { smartTextRenderer } from '../../helpers/smartText';
 
 export type DefaultSummaryProps = {
   item: Partial<ObjectBrowserItem>;
+  LinkToItem?: React.ElementType;
   HeadingTag?: React.ElementType;
   a11yLabelId?: string;
   hide_description?: boolean;
@@ -14,14 +15,20 @@ export type SummaryComponentType = React.ComponentType<DefaultSummaryProps> & {
 };
 
 const DefaultSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   return (
     <>
       {item?.head_title && <div className="headline">{item.head_title}</div>}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/EventSummary.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   parseDateFromCatalog,
   formatDateRange,
@@ -7,7 +8,13 @@ import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
 
 const EventSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   const start = parseDateFromCatalog(item.start);
   const end = parseDateFromCatalog(item.end);
   const headline = [
@@ -29,9 +36,9 @@ const EventSummary = (props: DefaultSummaryProps) => {
     <>
       {headline.length ? <div className="headline">{headline}</div> : null}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/FileSummary.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
@@ -21,15 +22,21 @@ const FileHeadline = (props: { item: any }) => {
 };
 
 const FileSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
 
   return (
     <>
       <FileHeadline item={item} />
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/NewsItemSummary.tsx

@@ -1,10 +1,17 @@
+import * as React from 'react';
 import { parseDateFromCatalog } from '@kitconcept/volto-light-theme/helpers/dates';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
 
 const NewsItemSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
 
   const effective = parseDateFromCatalog(item.effective);
   const headline = [
@@ -31,9 +38,9 @@ const NewsItemSummary = (props: DefaultSummaryProps) => {
     <>
       {headline.length ? <div className="headline">{headline}</div> : null}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/PersonSummary.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import mailSVG from '@plone/volto/icons/email.svg';
 import locationSVG from '@plone/volto/icons/map.svg';
@@ -22,16 +23,22 @@ const messages = defineMessages({
 });
 
 const PersonSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   const intl = useIntl();
 
   return (
     <>
       {item?.head_title && <div className="headline">{item.head_title}</div>}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}