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

package/src/components/theme/Widgets/DateWidget.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { DateWidget } from './DateWidget';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+const mockStore = configureStore([thunk]);
+
+const store = mockStore({
+  intl: {
+    locale: 'en-gb',
+    messages: {},
+  },
+});
+
+describe('DateWidget', () => {
+  it('renders an empty date view widget component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget className="metadata" value="2020-08-04T09:00:00" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component with custom format', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget
+          className="metadata"
+          value="2020-08-04T09:00:00"
+          format={{
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+          }}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component with children', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DateWidget className="metadata" value="2020-08-04T09:00:00">
+          {(child) => <strong>{child}</strong>}
+        </DateWidget>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
+
+export const DatetimeWidget = ({ value, children, className }) => {
+  const lang = useSelector((state) => state.intl.locale);
+  const backendLang = toBackendLang(lang);
+  const locale =
+    backendLang === 'en' ? config.settings.dateLocale : backendLang;
+  const formatOptions = {
+    date: value,
+    format: {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    },
+    locale,
+    includeTime: true,
+    formatToParts: true,
+  };
+
+  let formattedParts = formatDate(formatOptions);
+
+  const formattedDate = formattedParts
+    .map((part) => {
+      if (part.type === 'literal' && part.value === ', ') {
+        return ' ';
+      }
+      return part.value;
+    })
+    .join('');
+
+  return value ? (
+    <span className={cx(className, 'datetime', 'widget')}>
+      {children ? children(formattedDate) : formattedDate}
+    </span>
+  ) : (
+    ''
+  );
+};

package/src/components/theme/Widgets/DatetimeWidget.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { DatetimeWidget } from './DatetimeWidget';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+const mockStore = configureStore([thunk]);
+
+const store = mockStore({
+  intl: {
+    locale: 'en-gb',
+    messages: {},
+  },
+});
+
+describe('DatetimeWidget', () => {
+  it('renders an empty datetime view widget component', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DatetimeWidget />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a datetime view widget component with a date and time', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DatetimeWidget className="metadata" value="2024-09-05T15:34:00" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a datetime view widget component with children formatting', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DatetimeWidget className="metadata" value="2024-09-05T15:34:00">
+          {(formattedDate) => <strong>{formattedDate}</strong>}
+        </DatetimeWidget>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('removes the comma in the formatted date and shows correct time', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <DatetimeWidget className="metadata" value="2024-09-05T15:34:00" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+
+    const instance = component.root;
+    const span = instance.findByType('span');
+    expect(span.props.children).toContain('05 Sept 2024 15:34');
+  });
+});

package/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -3,7 +3,7 @@
  * @module components/theme/Breadcrumbs/Breadcrumbs
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useLocation } from 'react-router';
@@ -32,10 +32,23 @@ const isContentRoute = (pathname) => {
 const Breadcrumbs = (props) => {
   const dispatch = useDispatch();
   const { items = [], root = '/' } = useSelector((state) => state?.breadcrumbs);
+  const content = useSelector((state) => state?.content?.data);
+
   // const pathname = useSelector((state) => state.location.pathname);
   const location = useLocation();
   const { pathname } = location;
 
+  const linkLevels = useMemo(() => {
+    if (content) {
+      const type = content['@type'];
+      const isContentTypesToAvoid =
+        config.settings.contentTypeToAvoidAsLinks || {};
+      if (isContentTypesToAvoid[type]) {
+        return isContentTypesToAvoid[type];
+      }
+    }
+  }, [content]);
+
   const sections = items.map((item) => ({
     title: item.title,
     href: item.url,
@@ -54,7 +67,12 @@ const Breadcrumbs = (props) => {
   return (
     <React.Fragment>
       <div id="page-header" />
-      <EEABreadcrumbs pathname={pathname} sections={sections} root={root} />
+      <EEABreadcrumbs
+        pathname={pathname}
+        sections={sections}
+        root={root}
+        linkLevels={linkLevels}
+      />
     </React.Fragment>
   );
 };

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -17,7 +17,6 @@ import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
-import { BodyClass } from '@plone/volto/helpers';
 
 import cx from 'classnames';
 import loadable from '@loadable/component';
@@ -43,10 +42,12 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     const has_home_layout =
       layout === 'homepage_inverse_view' ||
       (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
+
     return (
       has_home_layout &&
       (removeTrailingSlash(pathname) === router_pathname ||
-        router_pathname.endsWith('/edit'))
+        router_pathname.endsWith('/edit') ||
+        router_pathname.endsWith('/add'))
     );
   });
 
@@ -75,7 +76,6 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
 
   return (
     <Header menuItems={items}>
-      {isHomePageInverse && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
           <Image src={eeaFlag} alt="European Union flag"></Image>

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -0,0 +1,190 @@
+/**
+ * Document view component.
+ * @module components/theme/View/DefaultView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Container as SemanticContainer,
+  Segment,
+  Grid,
+  Label,
+} from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import { getSchema } from '@plone/volto/actions';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
+import { RenderBlocks } from '@plone/volto/components';
+
+import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+import { useDispatch, shallowEqual, useSelector } from 'react-redux';
+
+import isEqual from 'lodash/isEqual';
+import AccordionContextNavigation from '@eeacms/volto-eea-website-theme/components/manage/Blocks/ContextNavigation/variations/Accordion';
+
+/**
+ * Component to display the default view.
+ * @function DefaultView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const DefaultView = (props) => {
+  const { content, location } = props;
+  const [hasLightLayout, setHasLightLayout] = React.useState(false);
+
+  React.useEffect(() => {
+    const updateLightLayout = () => {
+      if (__CLIENT__) {
+        setHasLightLayout(document.body.classList.contains('light-header'));
+      }
+    };
+
+    updateLightLayout();
+
+    if (__CLIENT__) {
+      const observer = new MutationObserver(updateLightLayout);
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+
+      return () => observer.disconnect();
+    }
+  }, []);
+
+  const { contextNavigationActions } = useSelector(
+    (state) => ({
+      contextNavigationActions: state.actions?.actions?.context_navigation,
+    }),
+    shallowEqual,
+  );
+
+  const navigation_paths = contextNavigationActions || [];
+  const path = getBaseUrl(location?.pathname || '');
+  const dispatch = useDispatch();
+  const { views } = config.widgets;
+  const contentSchema = useSelector((state) => state.schema?.schema);
+  const fieldsetsToExclude = [
+    'categorization',
+    'dates',
+    'ownership',
+    'settings',
+  ];
+  const fieldsets = contentSchema?.fieldsets.filter(
+    (fs) => !fieldsetsToExclude.includes(fs.id),
+  );
+
+  // TL;DR: There is a flash of the non block-based view because of the reset
+  // of the content on route change. Subscribing to the content change at this
+  // level has nasty implications, so we can't watch the Redux state for loaded
+  // content flag here (because it forces an additional component update)
+  // Instead, we can watch if the content is "empty", but this has a drawback
+  // since the locking mechanism inserts a `lock` key before the content is there.
+  // So "empty" means `content` is present, but only with a `lock` key, thus the next
+  // ugly condition comes to life
+  const contentLoaded = content && !isEqual(Object.keys(content), ['lock']);
+
+  React.useEffect(() => {
+    content?.['@type'] &&
+      !hasBlocksData(content) &&
+      dispatch(getSchema(content['@type'], location.pathname));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const matchingNavigationPath = navigation_paths.find((navPath) =>
+    path.includes(navPath.url),
+  );
+
+  // If the content is not yet loaded, then do not show anything
+  return contentLoaded ? (
+    hasBlocksData(content) ? (
+      <>
+        <Container id="page-document">
+          <RenderBlocks {...props} path={path} />
+        </Container>
+        {hasLightLayout && matchingNavigationPath && (
+          <AccordionContextNavigation
+            params={{
+              name: matchingNavigationPath.title,
+              no_thumbs: matchingNavigationPath.no_thumbs || true,
+              no_icons: matchingNavigationPath.no_icons || true,
+              root_path: matchingNavigationPath.url,
+              includeTop: matchingNavigationPath.includeTop || true,
+              bottomLevel: matchingNavigationPath.bottomLevel || 3,
+              topLevel: matchingNavigationPath.topLevel || 1,
+              currentFolderOnly:
+                matchingNavigationPath.currentFolderOnly || false,
+            }}
+          />
+        )}
+      </>
+    ) : (
+      <Container id="page-document">
+        {fieldsets?.map((fs) => {
+          return (
+            <div className="fieldset" key={fs.id}>
+              {fs.id !== 'default' && <h2>{fs.title}</h2>}
+              {fs.fields?.map((f, key) => {
+                let field = {
+                  ...contentSchema?.properties[f],
+                  id: f,
+                  widget: getWidget(f, contentSchema?.properties[f]),
+                };
+                let Widget = views?.getWidget(field);
+                return f !== 'title' ? (
+                  <Grid celled="internally" key={key}>
+                    <Grid.Row>
+                      <Label title={field.id}>{field.title}:</Label>
+                    </Grid.Row>
+                    <Grid.Row>
+                      <Segment basic>
+                        <Widget value={content[f]} />
+                      </Segment>
+                    </Grid.Row>
+                  </Grid>
+                ) : (
+                  <Widget key={key} value={content[f]} />
+                );
+              })}
+            </div>
+          );
+        })}
+      </Container>
+    )
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+DefaultView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default DefaultView;

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

@@ -1,16 +1,24 @@
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+import { Icon } from '@plone/volto/components';
+import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
+import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
+import { serializeNodesToText } from '@plone/volto-slate/editor/render';
+import { nanoid } from '@plone/volto-slate/utils';
+
 import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation';
 import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS';
 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';
+import { DateWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DateWidget';
+import { DatetimeWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/DatetimeWidget';
 import CreatableSelectWidget from '@eeacms/volto-eea-website-theme/components/theme/Widgets/CreatableSelectWidget';
 
-import { Icon } from '@plone/volto/components';
-import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
-import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
 
 import {
@@ -19,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';
@@ -30,11 +39,8 @@ import okMiddleware from './middleware/ok';
 import voltoCustomMiddleware from './middleware/voltoCustom';
 import installSlate from './slate';
 import { print } from './reducers';
-import { nanoid } from '@plone/volto-slate/utils';
-import { v4 as uuid } from 'uuid';
 
 import * as eea from './config';
-import React from 'react';
 
 const restrictedBlocks = ['imagesGrid', 'teaser', 'dataFigure', 'plotly_chart'];
 
@@ -237,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,
@@ -330,11 +343,17 @@ const applyConfig = (config) => {
   }
 
   // Custom Widgets
-  config.widgets.id.other_organisations = TokenWidgetEdit;
+  // config.widgets.id.other_organisations = TokenWidgetEdit;
+  config.widgets.vocabulary['eea.coremetadata.other_organisations'] =
+    TokenWidgetEdit;
+  config.widgets.views.widget.datetime = DatetimeWidget;
+  config.widgets.views.widget.date = DateWidget;
   config.widgets.views.id.topics = TopicsWidget;
   config.widgets.views.id.subjects = TokenWidget;
   config.widgets.views.widget.tags = TokenWidget;
   config.widgets.widget.creatable_select = CreatableSelectWidget;
+  config.widgets.vocabulary['plone.app.vocabularies.Users'] =
+    SelectAutoCompleteWidget;
 
   // /voltoCustom.css express-middleware
   // /ok express-middleware - see also: https://github.com/plone/volto/pull/4432
@@ -476,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) {
@@ -549,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/index.test.js

@@ -92,6 +92,7 @@ describe('applyConfig', () => {
           },
         },
         widget: {},
+        vocabulary: {},
         id: {},
       },
       settings: {
@@ -247,6 +248,7 @@ describe('applyConfig', () => {
         },
         widget: {},
         id: {},
+        vocabulary: {},
       },
       settings: {
         eea: {},