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

package/src/hocs/withDeviceSize.test.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import withDeviceSize from './withDeviceSize.jsx';
+
+describe('withDeviceSize HOC', () => {
+  // Mock the WrappedComponent
+  const WrappedComponent = ({ device }) => (
+    <div data-testid="device">{device}</div>
+  );
+
+  const mockResize = (width) => {
+    Object.defineProperty(document.documentElement, 'clientWidth', {
+      writable: true,
+      configurable: true,
+      value: width,
+    });
+    window.dispatchEvent(new Event('resize'));
+  };
+
+  it('should return mobile for screen width less than 768px', () => {
+    const ComponentWithDeviceSize = withDeviceSize(WrappedComponent);
+
+    const { getByTestId } = render(<ComponentWithDeviceSize />);
+
+    act(() => {
+      mockResize(500); // Simulating a mobile screen
+    });
+
+    expect(getByTestId('device').textContent).toBe('mobile');
+  });
+
+  it('should return tablet for screen width between 768px and 992px', () => {
+    const ComponentWithDeviceSize = withDeviceSize(WrappedComponent);
+
+    const { getByTestId } = render(<ComponentWithDeviceSize />);
+
+    act(() => {
+      mockResize(800); // Simulating a tablet screen
+    });
+
+    expect(getByTestId('device').textContent).toBe('tablet');
+  });
+
+  it('should return computer for screen width between 992px and 1200px', () => {
+    const ComponentWithDeviceSize = withDeviceSize(WrappedComponent);
+
+    const { getByTestId } = render(<ComponentWithDeviceSize />);
+
+    act(() => {
+      mockResize(1000); // Simulating a computer screen
+    });
+
+    expect(getByTestId('device').textContent).toBe('computer');
+  });
+
+  it('should return large for screen width between 1200px and 1920px', () => {
+    const ComponentWithDeviceSize = withDeviceSize(WrappedComponent);
+
+    const { getByTestId } = render(<ComponentWithDeviceSize />);
+
+    act(() => {
+      mockResize(1500); // Simulating a large screen
+    });
+
+    expect(getByTestId('device').textContent).toBe('large');
+  });
+
+  it('should return widescreen for screen width above 1920px', () => {
+    const ComponentWithDeviceSize = withDeviceSize(WrappedComponent);
+
+    const { getByTestId } = render(<ComponentWithDeviceSize />);
+
+    act(() => {
+      mockResize(2000); // Simulating a widescreen display
+    });
+
+    expect(getByTestId('device').textContent).toBe('widescreen');
+  });
+});

package/src/index.js

@@ -11,6 +11,7 @@ import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCS
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
 import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
 import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
+import WebReportSectionView from '@eeacms/volto-eea-website-theme/components/theme/WebReport/WebReportSectionView';
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
 import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
@@ -26,6 +27,7 @@ import {
 } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 
 import installLayoutSettingsBlock from '@eeacms/volto-eea-website-theme/components/manage/Blocks/LayoutSettings';
+import installContextNavigationBlock from '@eeacms/volto-eea-website-theme/components/manage/Blocks/ContextNavigation';
 import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title';
 
 import FlexGroup from '@eeacms/volto-eea-website-theme/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup';
@@ -241,7 +243,14 @@ const applyConfig = (config) => {
     ...(config.views.layoutViewsNamesMapping || {}),
     homepage_view: 'Homepage view',
     homepage_inverse_view: 'Homepage white view',
+    web_report_section: 'Web report section',
   };
+
+  config.views.contentTypesViews = {
+    ...(config.views.contentTypesViews || {}),
+    web_report_section: WebReportSectionView,
+  };
+
   config.views.errorViews = {
     ...config.views.errorViews,
     404: NotFound,
@@ -486,11 +495,11 @@ const applyConfig = (config) => {
     // },
   };
 
-  // layout settings
-  config = [installLayoutSettingsBlock].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  //If you don't want to show the content type as a link in the breadcrumbs, you can set it to a number
+  // where 1 is the last item in the breadcrumbs, 2 is the second last, etc.
+  config.settings.contentTypeToAvoidAsLinks = {
+    web_report_section: 2,
+  };
 
   // Group
   if (config.blocks.blocksConfig.group) {
@@ -559,8 +568,12 @@ const applyConfig = (config) => {
     GET_CONTENT: ['breadcrumbs'], // 'navigation', 'actions', 'types'],
   });
 
-  // Custom blocks: Title
-  return [installCustomTitle].reduce((acc, apply) => apply(acc), config);
+  // Custom blocks: Title,Layout settings, Context navigation
+  return [
+    installCustomTitle,
+    installLayoutSettingsBlock,
+    installContextNavigationBlock,
+  ].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;

package/src/customizations/volto/components/manage/Blocks/Block/BlocksForm.diff

@@ -1,12 +0,0 @@
-3c3
-< import EditBlock from './Edit';
----
-> import EditBlock from '@plone/volto/components/manage/Blocks/Block/Edit.jsx';
-20c20
-< import EditBlockWrapper from './EditBlockWrapper';
----
-> import EditBlockWrapper from '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx';
-41a42
->     errors,
-261a263
->               errors,

package/src/customizations/volto/components/manage/Blocks/Block/BlocksForm.jsx

@@ -1,289 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import EditBlock from '@plone/volto/components/manage/Blocks/Block/Edit.jsx';
-import { DragDropList } from '@plone/volto/components';
-import {
-  getBlocks,
-  getBlocksFieldname,
-  applyBlockDefaults,
-} from '@plone/volto/helpers';
-import {
-  addBlock,
-  insertBlock,
-  changeBlock,
-  deleteBlock,
-  moveBlock,
-  mutateBlock,
-  nextBlockId,
-  previousBlockId,
-} from '@plone/volto/helpers';
-import EditBlockWrapper from '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper.jsx';
-import { setSidebarTab } from '@plone/volto/actions';
-import { useDispatch } from 'react-redux';
-import { useDetectClickOutside, useEvent } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-
-const BlocksForm = (props) => {
-  const {
-    pathname,
-    onChangeField,
-    properties,
-    type,
-    navRoot,
-    onChangeFormData,
-    selectedBlock,
-    multiSelected,
-    onSelectBlock,
-    allowedBlocks,
-    showRestricted,
-    title,
-    description,
-    metadata,
-    errors,
-    manage,
-    children,
-    isMainForm = true,
-    isContainer,
-    stopPropagation,
-    disableAddBlockOnEnterKey,
-    blocksConfig = config.blocks.blocksConfig,
-    editable = true,
-    direction = 'vertical',
-  } = props;
-
-  const blockList = getBlocks(properties);
-
-  const dispatch = useDispatch();
-  const intl = useIntl();
-
-  const ClickOutsideListener = () => {
-    onSelectBlock(null);
-    dispatch(setSidebarTab(0));
-  };
-
-  const ref = useDetectClickOutside({
-    onTriggered: ClickOutsideListener,
-    triggerKeys: ['Escape'],
-    // Disabled feature for now https://github.com/plone/volto/pull/2389#issuecomment-830027413
-    disableClick: true,
-    disableKeys: !isMainForm,
-  });
-
-  const handleKeyDown = (
-    e,
-    index,
-    block,
-    node,
-    {
-      disableEnter = false,
-      disableArrowUp = false,
-      disableArrowDown = false,
-    } = {},
-  ) => {
-    const isMultipleSelection = e.shiftKey;
-    if (e.key === 'ArrowUp' && !disableArrowUp) {
-      onFocusPreviousBlock(block, node, isMultipleSelection);
-      e.preventDefault();
-    }
-    if (e.key === 'ArrowDown' && !disableArrowDown) {
-      onFocusNextBlock(block, node, isMultipleSelection);
-      e.preventDefault();
-    }
-    if (e.key === 'Enter' && !disableEnter) {
-      if (!disableAddBlockOnEnterKey) {
-        onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
-      }
-      e.preventDefault();
-    }
-  };
-
-  const onFocusPreviousBlock = (
-    currentBlock,
-    blockNode,
-    isMultipleSelection,
-  ) => {
-    const prev = previousBlockId(properties, currentBlock);
-    if (prev === null) return;
-
-    blockNode.blur();
-
-    onSelectBlock(prev, isMultipleSelection);
-  };
-
-  const onFocusNextBlock = (currentBlock, blockNode, isMultipleSelection) => {
-    const next = nextBlockId(properties, currentBlock);
-    if (next === null) return;
-
-    blockNode.blur();
-
-    onSelectBlock(next, isMultipleSelection);
-  };
-
-  const onMutateBlock = (id, value) => {
-    const newFormData = mutateBlock(properties, id, value);
-    onChangeFormData(newFormData);
-  };
-
-  const onInsertBlock = (id, value, current) => {
-    const [newId, newFormData] = insertBlock(
-      properties,
-      id,
-      value,
-      current,
-      config.experimental.addBlockButton.enabled ? 1 : 0,
-    );
-
-    const blocksFieldname = getBlocksFieldname(newFormData);
-    const blockData = newFormData[blocksFieldname][newId];
-    newFormData[blocksFieldname][newId] = applyBlockDefaults({
-      data: blockData,
-      intl,
-      metadata,
-      properties,
-    });
-
-    onChangeFormData(newFormData);
-    return newId;
-  };
-
-  const onAddBlock = (type, index) => {
-    if (editable) {
-      const [id, newFormData] = addBlock(properties, type, index);
-      const blocksFieldname = getBlocksFieldname(newFormData);
-      const blockData = newFormData[blocksFieldname][id];
-      newFormData[blocksFieldname][id] = applyBlockDefaults({
-        data: blockData,
-        intl,
-        metadata,
-        properties,
-      });
-      onChangeFormData(newFormData);
-      return id;
-    }
-  };
-
-  const onChangeBlock = (id, value) => {
-    const newFormData = changeBlock(properties, id, value);
-    onChangeFormData(newFormData);
-  };
-
-  const onDeleteBlock = (id, selectPrev) => {
-    const previous = previousBlockId(properties, id);
-
-    const newFormData = deleteBlock(properties, id);
-    onChangeFormData(newFormData);
-
-    onSelectBlock(selectPrev ? previous : null);
-  };
-
-  const onMoveBlock = (dragIndex, hoverIndex) => {
-    const newFormData = moveBlock(properties, dragIndex, hoverIndex);
-    onChangeFormData(newFormData);
-  };
-
-  const defaultBlockWrapper = ({ draginfo }, editBlock, blockProps) => (
-    <EditBlockWrapper draginfo={draginfo} blockProps={blockProps}>
-      {editBlock}
-    </EditBlockWrapper>
-  );
-
-  const editBlockWrapper = children || defaultBlockWrapper;
-
-  // Remove invalid blocks on saving
-  // Note they are alreaady filtered by DragDropList, but we also want them
-  // to be removed when the user saves the page next. Otherwise the invalid
-  // blocks would linger for ever.
-  for (const [n, v] of blockList) {
-    if (!v) {
-      const newFormData = deleteBlock(properties, n);
-      onChangeFormData(newFormData);
-    }
-  }
-
-  useEvent('voltoClickBelowContent', () => {
-    if (!config.experimental.addBlockButton.enabled || !isMainForm) return;
-    onSelectBlock(
-      onAddBlock(config.settings.defaultBlockType, blockList.length),
-    );
-  });
-
-  return (
-    <div
-      className="blocks-form"
-      role="presentation"
-      ref={ref}
-      onKeyDown={(e) => {
-        if (stopPropagation) {
-          e.stopPropagation();
-        }
-      }}
-    >
-      <fieldset className="invisible" disabled={!editable}>
-        <DragDropList
-          childList={blockList}
-          onMoveItem={(result) => {
-            const { source, destination } = result;
-            if (!destination) {
-              return;
-            }
-            const newFormData = moveBlock(
-              properties,
-              source.index,
-              destination.index,
-            );
-            onChangeFormData(newFormData);
-            return true;
-          }}
-          direction={direction}
-        >
-          {(dragProps) => {
-            const { child, childId, index } = dragProps;
-            const blockProps = {
-              allowedBlocks,
-              showRestricted,
-              block: childId,
-              data: child,
-              handleKeyDown,
-              id: childId,
-              formTitle: title,
-              formDescription: description,
-              index,
-              manage,
-              onAddBlock,
-              onInsertBlock,
-              onChangeBlock,
-              onChangeField,
-              onChangeFormData,
-              onDeleteBlock,
-              onFocusNextBlock,
-              onFocusPreviousBlock,
-              onMoveBlock,
-              onMutateBlock,
-              onSelectBlock,
-              errors,
-              pathname,
-              metadata,
-              properties,
-              contentType: type,
-              navRoot,
-              blocksConfig,
-              selected: selectedBlock === childId,
-              multiSelected: multiSelected?.includes(childId),
-              type: child['@type'],
-              editable,
-              showBlockChooser: selectedBlock === childId,
-              detached: isContainer,
-            };
-            return editBlockWrapper(
-              dragProps,
-              <EditBlock key={childId} {...blockProps} />,
-              blockProps,
-            );
-          }}
-        </DragDropList>
-      </fieldset>
-    </div>
-  );
-};
-
-export default BlocksForm;

package/src/customizations/volto/components/manage/Blocks/Block/BlocksForm.txt

@@ -1,2 +0,0 @@
-Customize from @plone/volto 17.18.2 - refs https://taskman.eionet.europa.eu/issues/269086
-Should be safe to remove with @plone/volto 18.x - https://github.com/plone/volto/pull/6181