@eeacms/volto-eea-website-theme 2.3.0 → 2.4.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;