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

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`df350bf`](https://github.com/eea/volto-eea-website-theme/commit/df350bfff7b6e0ca4227a29d4fd6108293a55b04)]
+
+#### :hammer_and_wrench: Others
+
+- Bump package.json version to 2.3.0 [ichim-david - [`c81b67e`](https://github.com/eea/volto-eea-website-theme/commit/c81b67e70a826af43b3876d531778c4320f64add)]
+- fix conflicts with develop [Teodor - [`801f4fc`](https://github.com/eea/volto-eea-website-theme/commit/801f4fc45fb9a3e985a7351bb8998dcb53e8fa19)]
+- update both widgets and tests [Teodor - [`8d295f7`](https://github.com/eea/volto-eea-website-theme/commit/8d295f7bb736b48c02ad0aa1ea1f6071752ecf1c)]
+- code cleanup [Teodor - [`8e27f48`](https://github.com/eea/volto-eea-website-theme/commit/8e27f48c6fde1f66e76d01e03e7001c620c4c585)]
+- update test and add DateWidget in config too [Teodor - [`f14f9e4`](https://github.com/eea/volto-eea-website-theme/commit/f14f9e44c3779e40cf8d7bcc42efc5768a919250)]
+- Fix test [Tiberiu Ichim - [`42012c6`](https://github.com/eea/volto-eea-website-theme/commit/42012c6bce80d0d6f13ae9d2a9c0deea8fa19eb0)]
+- remake snapshots and fix import [Teodor - [`5bb47d6`](https://github.com/eea/volto-eea-website-theme/commit/5bb47d6e7bdb0cad7f1fd4c7055c7d8f7b06d9e6)]
+- Fix test [Tiberiu Ichim - [`f73cf32`](https://github.com/eea/volto-eea-website-theme/commit/f73cf32ae50cd768d56a991d7c9177e89ae53599)]
+- add test for the widget [Teodor - [`543c5bc`](https://github.com/eea/volto-eea-website-theme/commit/543c5bcf1246953e06ee79c5b559d0ba9e3307cf)]
+- use formatDate from Volto [Teodor - [`24114b3`](https://github.com/eea/volto-eea-website-theme/commit/24114b3dac79418293d271bff06afd8d985d380d)]
+### [2.2.2](https://github.com/eea/volto-eea-website-theme/compare/2.2.1...2.2.2) - 29 August 2024
+
 ### [2.2.1](https://github.com/eea/volto-eea-website-theme/compare/2.2.0...2.2.1) - 28 August 2024
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,32 @@
+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 DateWidget = ({ 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',
+    },
+    locale,
+  };
+
+  return value ? (
+    <span className={cx(className, 'date', 'widget')}>
+      {children
+        ? children(formatDate(formatOptions))
+        : formatDate(formatOptions)}
+    </span>
+  ) : (
+    ''
+  );
+};

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/config.js

@@ -16,7 +16,7 @@ import climateLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/ass
 // Footer.jsx config options
 export const footerOpts = {
   buttonName: 'Explore our environmental information systems',
-  hrefButton: 'https://www.eea.europa.eu/en/information-systems',
+  hrefButton: 'https://www.eea.europa.eu/en/information-systems#',
   logosHeader: '',
   contactHeader: 'Contact Us',
   actions: [

package/src/index.js

@@ -1,3 +1,11 @@
+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';
@@ -6,11 +14,10 @@ import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homep
 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 {
@@ -30,11 +37,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'];
 
@@ -330,11 +334,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

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: {},