@eeacms/volto-eea-website-theme 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -4,7 +4,17 @@ 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).
 
-### [2.3.0](https://github.com/eea/volto-eea-website-theme/compare/2.2.2...2.3.0) - 9 September 2024
+### [2.4.0](https://github.com/eea/volto-eea-website-theme/compare/2.3.0...2.4.0) - 11 October 2024
+
+#### :bug: Bug Fixes
+
+- fix: add subsite_css class when not undefined [nileshgulia1 - [`db3f80f`](https://github.com/eea/volto-eea-website-theme/commit/db3f80f9dac34f528030d1d2a2f858555059879e)]
+
+#### :hammer_and_wrench: Others
+
+- Increase test coverage [dobri1408 - [`e2d46a9`](https://github.com/eea/volto-eea-website-theme/commit/e2d46a981c6f50980f0b0bf1f35b2d03121f3c88)]
+- Update package.json [Ichim David - [`24ea8f0`](https://github.com/eea/volto-eea-website-theme/commit/24ea8f0ef7c474bcf171f4720465e12a0d600b46)]
+### [2.3.0](https://github.com/eea/volto-eea-website-theme/compare/2.2.2...2.3.0) - 13 September 2024
 
 #### :house: Internal changes
 

package/package.json

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

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { EditSchema } from './schema';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import ContextNavigationView from './ContextNavigationView';
+
+const ContextNavigationFillEdit = (props) => {
+  const contentTypes = props.properties?.['@components']?.types;
+  const availableTypes = React.useMemo(
+    () => contentTypes?.map((type) => [type.id, type.title || type.name]),
+    [contentTypes],
+  );
+
+  const schema = React.useMemo(
+    () => EditSchema({ availableTypes }),
+    [availableTypes],
+  );
+
+  return (
+    <>
+      <h3>Context navigation</h3>
+      <ContextNavigationView {...props} mode="edit" />{' '}
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+          navRoot={props.navRoot}
+          contentType={props.contentType}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default ContextNavigationFillEdit;

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationEdit.test.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ContextNavigationEdit from './ContextNavigationEdit';
+import { Router } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('@plone/volto/components', () => ({
+  InlineForm: ({ onChangeField }) => (
+    <div>
+      <p>InlineForm</p>
+      <input id="test" onChange={onChangeField} />
+    </div>
+  ),
+  SidebarPortal: ({ children, selected }) =>
+    selected ? (
+      <div>
+        <div>SidebarPortal</div>
+        {children}
+      </div>
+    ) : null,
+}));
+
+jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
+  return {
+    __esModule: true,
+    default: ({ params }) => {
+      return <div>ConnectedContextNavigation {params.root_path}</div>;
+    },
+  };
+});
+
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: () => 'blocks_layout',
+  withVariationSchemaEnhancer: jest.fn((Component) => Component),
+}));
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('ContextNavigationEdit', () => {
+  it('renders corectly', () => {
+    const history = createMemoryHistory();
+    const { getByText, queryByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={false} />
+        </Router>
+        ,
+      </Provider>,
+    );
+
+    expect(getByText('Context navigation')).toBeInTheDocument();
+    expect(getByText('ConnectedContextNavigation')).toBeInTheDocument();
+    expect(queryByText('InlineForm')).toBeNull();
+    expect(queryByText('SidebarPortal')).toBeNull();
+  });
+
+  it('renders corectly', () => {
+    const history = createMemoryHistory();
+    const { container, getByText } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationEdit selected={true} onChangeBlock={() => {}} />
+        </Router>
+        ,
+      </Provider>,
+    );
+
+    expect(getByText('Context navigation')).toBeInTheDocument();
+    expect(getByText('ConnectedContextNavigation')).toBeInTheDocument();
+    expect(getByText('InlineForm')).toBeInTheDocument();
+    expect(getByText('SidebarPortal')).toBeInTheDocument();
+
+    fireEvent.change(container.querySelector('#test'), {
+      target: { value: 'test' },
+    });
+  });
+});

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { flattenToAppURL, withBlockExtensions } from '@plone/volto/helpers';
+import DefaultTemplate from './variations/Default';
+
+const ContextNavigationView = (props = {}) => {
+  const { variation, data = {} } = props;
+  const navProps = { ...data };
+  const root_path = data?.root_node?.[0]?.['@id'];
+  if (root_path) navProps['root_path'] = flattenToAppURL(root_path);
+  const Renderer = variation?.view ?? DefaultTemplate;
+  return <Renderer params={navProps} mode={props.mode} />;
+};
+
+export default withBlockExtensions(ContextNavigationView);

package/src/components/manage/Blocks/ContextNavigation/ContextNavigationView.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ContextNavigationView from './ContextNavigationView';
+import { Router } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { createMemoryHistory } from 'history';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('@plone/volto/components/theme/Navigation/ContextNavigation', () => {
+  return {
+    __esModule: true,
+    default: ({ params }) => {
+      return <div>ConnectedContextNavigation {params.root_path}</div>;
+    },
+  };
+});
+
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: () => 'blocks_layout',
+  flattenToAppURL: () => '',
+}));
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('ContextNavigationView', () => {
+  let history;
+  beforeEach(() => {
+    history = createMemoryHistory();
+  });
+
+  it('renders corectly', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container.firstChild).toHaveTextContent(
+      'ConnectedContextNavigation',
+    );
+  });
+
+  it('renders corectly', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ContextNavigationView
+            data={{
+              navProps: { root_path: 'https://localhost:3000/test' },
+              root_node: [{ '@id': 'root_node' }],
+            }}
+          />
+        </Router>
+      </Provider>,
+    );
+    expect(container.firstChild).toHaveTextContent(
+      'ConnectedContextNavigation',
+    );
+  });
+});

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

@@ -0,0 +1,30 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import ContextNavigationEdit from './ContextNavigationEdit';
+import ContextNavigationView from './ContextNavigationView';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+import variations from './variations';
+
+const applyConfig = (config) => {
+  config.blocks.blocksConfig.contextNavigation = {
+    id: 'contextNavigation',
+    title: 'Navigation',
+    icon: codeSVG,
+    group: 'common',
+    view: ContextNavigationView,
+    edit: ContextNavigationEdit,
+    schema: BlockSettingsSchema,
+    restricted: false,
+    variations,
+    mostUsed: false,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};
+
+export default applyConfig;

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

@@ -0,0 +1,88 @@
+export const EditSchema = ({ availableTypes }) => {
+  return {
+    title: 'Navigation',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'name',
+          'root_node',
+          'portal_type',
+          'includeTop',
+          'currentFolderOnly',
+          'topLevel',
+          'bottomLevel',
+          'no_icons',
+          'thumb_scale',
+          'no_thumbs',
+        ],
+      },
+    ],
+    required: [],
+    properties: {
+      name: {
+        title: 'Title',
+        description: 'The title of the navigation tree',
+      },
+      root_node: {
+        title: 'Root node',
+        description:
+          'You may search for and choose a folder to act as the root of the navigation tree. Leave blank to use the Plone site root.',
+        widget: 'object_browser',
+        // TODO: these don't work. Why?
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+      },
+      portal_type: {
+        title: 'Filter children',
+        description: 'Only show child items of this content type',
+        choices: availableTypes,
+        isMulti: true,
+      },
+      includeTop: {
+        title: 'Include top node',
+        description:
+          "Whether or not to show the top, or 'root', node in the navigation tree. This is affected by the 'Start level' setting.",
+        type: 'boolean',
+      },
+      currentFolderOnly: {
+        title: 'Only show the contents of the current folder',
+        description:
+          'If selected, the navigation tree will only show the current folder and its children at all times.',
+        type: 'boolean',
+      },
+
+      topLevel: {
+        title: 'Start level',
+        description:
+          'An integer value that specifies the number of folder levels below the site root that must be exceeded before the navigation tree will display. 0 means that the navigation tree should be displayed everywhere including pages in the root of the site. 1 means the tree only shows up inside folders located in the root and downwards, never showing at the top level.',
+        type: 'number',
+        default: 1,
+      },
+      bottomLevel: {
+        title: 'Navigation tree depth',
+        description:
+          'How many folders should be included before the navigation tree stops. 0 means no limit. 1 only includes the root folder.',
+        type: 'number',
+        default: 0,
+      },
+      no_icons: {
+        title: 'Suppress icons',
+        description:
+          'If enabled, the portlet will not show document type icons.',
+        type: 'boolean',
+      },
+      thumb_scale: {
+        title: 'Override thumb scale',
+        description:
+          "Enter a valid scale name (see 'Image Handling' control panel) to override (e.g. icon, tile, thumb, mini, preview, ... ). Leave empty to use default (see 'Site' control panel).",
+      },
+      no_thumbs: {
+        title: 'Suppress thumbs',
+        type: 'boolean',
+        description: 'If enabled, the portlet will not show thumbs.',
+      },
+    },
+  };
+};

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

@@ -0,0 +1,179 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+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 Slugger from 'github-slugger';
+
+import { Icon, UniversalLink } from '@plone/volto/components';
+import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
+import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import downIcon from '@plone/volto/icons/down-key.svg';
+import upIcon from '@plone/volto/icons/up-key.svg';
+
+const messages = defineMessages({
+  navigation: {
+    id: 'Navigation',
+    defaultMessage: 'Navigation',
+  },
+});
+
+const AccordionNavigation = ({
+  navigation = {},
+  device,
+  isMenuOpenOnOutsideClick,
+}) => {
+  const { items = [], title, has_custom_name } = navigation;
+  const intl = useIntl();
+  const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
+  const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
+  const [activeItems, setActiveItems] = React.useState({});
+
+  const onClickSummary = React.useCallback((e) => {
+    e.preventDefault();
+    setIsNavOpen((prev) => !prev);
+  }, []);
+
+  React.useEffect(() => {
+    if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
+  }, [isMenuOpenOnOutsideClick]);
+
+  const onKeyDownSummary = React.useCallback(
+    (e) => {
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        e.preventDefault();
+        onClickSummary(e);
+      }
+    },
+    [onClickSummary],
+  );
+
+  const renderItems = ({ item, level = 0 }) => {
+    const {
+      title,
+      href,
+      is_current,
+      is_in_path,
+      items: childItems,
+      type,
+    } = item;
+    const hasChildItems = childItems && childItems.length > 0;
+    const normalizedTitle = Slugger.slug(title);
+
+    const checkIfActive = () => {
+      return activeItems[href] !== undefined ? activeItems[href] : is_in_path;
+    };
+
+    const isActive = checkIfActive();
+
+    const handleTitleClick = () => {
+      setActiveItems((prev) => ({ ...prev, [href]: !isActive }));
+    };
+
+    return (
+      <li
+        className={cx({
+          is_in_path,
+          'accordion-list-title': !hasChildItems,
+          'accordion-list-item': hasChildItems,
+        })}
+        key={href}
+      >
+        {hasChildItems ? (
+          <Accordion className="default">
+            <Accordion.Title
+              active={isActive}
+              as={'button'}
+              aria-expanded={isActive}
+              onClick={handleTitleClick}
+              aria-controls={`accordion-content-${normalizedTitle}`}
+              id={`accordion-title-${normalizedTitle}`}
+            >
+              <span className="title-text">{title}</span>
+              <Icon name={isActive ? upIcon : downIcon} size="32px" />
+            </Accordion.Title>
+            <Accordion.Content
+              active={isActive}
+              id={`accordion-content-${normalizedTitle}`}
+              aria-labelledby={`accordion-title-${normalizedTitle}`}
+              role="region"
+            >
+              <ul className="accordion-list">
+                {childItems.map((child) =>
+                  renderItems({ item: child, level: level + 1 }),
+                )}
+              </ul>
+            </Accordion.Content>
+          </Accordion>
+        ) : (
+          <UniversalLink
+            href={flattenToAppURL(href)}
+            className={cx(`title-link contenttype-${type}`, {
+              current: is_current,
+              in_path: is_in_path,
+            })}
+          >
+            {title}
+          </UniversalLink>
+        )}
+      </li>
+    );
+  };
+
+  return items.length ? (
+    <>
+      <nav className="context-navigation">
+        <details open={isNavOpen}>
+          {/* eslint-disable-next-line */}
+          <summary
+            className="context-navigation-header accordion-header"
+            onClick={onClickSummary}
+            onKeyDown={onKeyDownSummary}
+          >
+            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
+            <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+          </summary>
+          <ul className="context-navigation-list accordion-list">
+            {items.map((item) => renderItems({ item }))}
+          </ul>
+        </details>
+      </nav>
+    </>
+  ) : null;
+};
+
+AccordionNavigation.propTypes = {
+  /**
+   * Navigation tree returned from @contextnavigation restapi endpoint
+   */
+  navigation: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+        href: PropTypes.string,
+        is_current: PropTypes.bool,
+        is_in_path: PropTypes.bool,
+        items: PropTypes.array,
+        type: PropTypes.string,
+      }),
+    ),
+    has_custom_name: PropTypes.bool,
+    title: PropTypes.string,
+  }),
+};
+
+export default compose(
+  withRouter,
+  withContentNavigation,
+  (WrappedComponent) => (props) =>
+    withEEASideMenu(WrappedComponent)({
+      ...props,
+      shouldRender: props.navigation?.items?.length > 0,
+    }),
+)(AccordionNavigation);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+
+const Default = (props) => {
+  const { params } = props;
+  return <ConnectedContextNavigation params={params} />;
+};
+
+export default Default;

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

@@ -0,0 +1,18 @@
+import Accordion from './Accordion';
+import Default from './Default';
+
+const contextBlockVariations = [
+  {
+    id: 'default',
+    title: 'Listing (default)',
+    view: Default,
+    isDefault: true,
+  },
+  {
+    id: 'accordion',
+    title: 'Accordion',
+    view: Accordion,
+  },
+];
+
+export default contextBlockVariations;

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -11,8 +11,8 @@ import { ReactEditor, Editable, Slate, withReact } from 'slate-react';
 import config from '@plone/volto/registry';
 import { SidebarPortal } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
+import View from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title/View';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import schema from './schema';
 
 const messages = defineMessages({
@@ -165,8 +165,9 @@ export const TitleBlockEdit = (props) => {
   return (
     <React.Fragment>
       <BodyClass className="with-title-block" />
-      <BannerView
+      <View
         {...props}
+        isEditMode={true}
         banner={{
           title: {
             view: (
@@ -185,7 +186,7 @@ export const TitleBlockEdit = (props) => {
         fluid
       />
       <SidebarPortal selected={props.selected}>
-        <InlineForm
+        <BlockDataForm
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
@@ -194,7 +195,9 @@ export const TitleBlockEdit = (props) => {
               [id]: value,
             });
           }}
+          onChangeBlock={props.onChangeBlock}
           formData={props.data}
+          block={props.block}
         />
       </SidebarPortal>
     </React.Fragment>