@eeacms/volto-eea-website-theme 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -4,6 +4,45 @@ 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).
 
+### [1.9.0](https://github.com/eea/volto-eea-website-theme/compare/1.8.2...1.9.0) - 21 February 2023
+
+#### :rocket: New Features
+
+- feat(contact-form): Redirect to config.settings.contactForm - refs #160689 [Alin Voinea - [`8d93c76`](https://github.com/eea/volto-eea-website-theme/commit/8d93c76f022d0036a43ff1564189dc49530ca4e1)]
+
+#### :bug: Bug Fixes
+
+- fix(dropdown): navigation of links when using the keyboard only [David Ichim - [`1d97367`](https://github.com/eea/volto-eea-website-theme/commit/1d973671a2941ebb1463ba65ae6bbee5447edf1a)]
+
+#### :nail_care: Enhancements
+
+- change(language): hide language dropdown by default on eea-website-theme [David Ichim - [`23ba000`](https://github.com/eea/volto-eea-website-theme/commit/23ba000e7c8998c5f1a6f706f706027e95abeb84)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.9.0 [Alin Voinea - [`895e0ae`](https://github.com/eea/volto-eea-website-theme/commit/895e0ae0f6174976a5ad4965274bfebb2c65433f)]
+### [1.8.2](https://github.com/eea/volto-eea-website-theme/compare/1.8.1...1.8.2) - 14 February 2023
+
+#### :rocket: New Features
+
+- feat: use removeTrailingSlash [Mimi - [`2fa8e23`](https://github.com/eea/volto-eea-website-theme/commit/2fa8e23525af589efb13f5b04e52026a97245556)]
+- feat: compare pathname to contentId to show draft watermark [Mimi - [`de870d8`](https://github.com/eea/volto-eea-website-theme/commit/de870d8be85b7aa64e26697e1e19709c1c4721cb)]
+- feat: show or remove the draft watermark based on the value from the ENV file [Mimi - [`e5d2ce0`](https://github.com/eea/volto-eea-website-theme/commit/e5d2ce00f865cbe5ddb95030cb8ccd8a609ebf02)]
+- feat: remove draft image from control panel and login [Mimi - [`274891a`](https://github.com/eea/volto-eea-website-theme/commit/274891a0810102e445813bb59735c56403125895)]
+
+#### :bug: Bug Fixes
+
+- fix(search): Fix some issues in the search popup #107 from eea/fix-search-popup [ichim-david - [`07b03df`](https://github.com/eea/volto-eea-website-theme/commit/07b03df36022da21d4c80b220cf529840e00c707)]
+- fix(search): Fix undefined [kreafox - [`613d358`](https://github.com/eea/volto-eea-website-theme/commit/613d35860222ede3d40fc61acc0202b95e53108b)]
+- fix(search): Fix some issues in the search popup [kreafox - [`13b5e64`](https://github.com/eea/volto-eea-website-theme/commit/13b5e64b69eacffacf2e65b9c5336cbcb5a9dfa7)]
+
+#### :house: Internal changes
+
+- chore: clean up [Mimi - [`b80f1dc`](https://github.com/eea/volto-eea-website-theme/commit/b80f1dcc5e5cd1d369bdcea574dd8158785af6be)]
+- chore: use runtimeConfig for the RAZZLE_DISABLE_DRAFT_WATERMARK variable [Mimi - [`6b6cc83`](https://github.com/eea/volto-eea-website-theme/commit/6b6cc83dd0e6a4820d75acfdc8d41e092831261d)]
+- chore: clean up [Mimi - [`807ca82`](https://github.com/eea/volto-eea-website-theme/commit/807ca82820319c0d45096dcbe228eee4262b602c)]
+- chore: add missing code [Mimi - [`3a93e94`](https://github.com/eea/volto-eea-website-theme/commit/3a93e944613af0ee3ca1ed25c2439d9c504d4591)]
+
 ### [1.8.1](https://github.com/eea/volto-eea-website-theme/compare/1.8.0...1.8.1) - 9 February 2023
 
 #### :rocket: New Features
@@ -104,7 +143,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -138,7 +176,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -148,7 +185,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -157,9 +193,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
-#### :hammer_and_wrench: Others
-
-- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -200,7 +233,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -248,7 +280,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -516,7 +547,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -558,5 +588,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.8.1",
+  "version": "1.9.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/DraftBackground/DraftBackground.jsx

@@ -2,15 +2,51 @@ import React from 'react';
 import { connect } from 'react-redux';
 import './draft.css';
 import { BodyClass } from '@plone/volto/helpers';
+import { withRouter } from 'react-router-dom';
+import { compose } from 'redux';
+import { runtimeConfig } from '@plone/volto/runtime_config';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
-const DraftBackground = ({ review_state }) => {
-  const draftClass = `wf-state-${review_state}`;
-  return <BodyClass className={draftClass} />;
+const removeTrailingSlash = (str) => {
+  return str.replace(/\/+$/, '');
 };
-function propsAreEqual(prevProps, nextProps) {
-  return prevProps.review_state === nextProps.review_state;
-}
 
-export default connect((state) => ({
-  review_state: state.content.data?.review_state,
-}))(React.memo(DraftBackground, propsAreEqual));
+/**
+ * The review_state and id don't change everytime the page is changed and because of that the draft background
+ * will apear on pages that shouldn't have it. The RAZZLE_DISABLE_DRAFT_WATERMARK varible from ENV file should have two possible values:
+ * "Hide-No-Workflow" and "Hide-All". If the variable is not present, it should follow the current logic(show the draft image everywhere),
+ * if the value is "Hide-No-Workflow", then the draft image is not shown on pages like login or controlpanel and if the value is "Hide-All", then
+ * the draft image is not visible at all.
+ * For example, if the current page is /datatable (that has the draft background) and then we go to Content Types page,
+ * the review_state and id will be the same as the ones from /datatable, so the draft background will still be present. By checking
+ * if the pathname from (from withRouter) is different than the one from state.content.data and based on the varible from ENV,
+ * we decide if the draft backgound can be present or not.
+ * @param {Object} props
+ * @returns
+ */
+const DraftBackground = (props) => {
+  const draftClass = `wf-state-${props.review_state}`;
+  const razzleDraft =
+    runtimeConfig['RAZZLE_DISABLE_DRAFT_WATERMARK'] || 'default';
+  const isReviewableStateComponent =
+    props.review_state &&
+    props.contentId === removeTrailingSlash(props.pathname);
+
+  const draftOptions = {
+    'Hide-All': 'wf-state-published',
+    'Hide-No-Workflow': isReviewableStateComponent
+      ? draftClass
+      : 'wf-state-published',
+    default: draftClass,
+  };
+
+  return <BodyClass className={draftOptions[razzleDraft]} />;
+};
+
+export default compose(
+  withRouter,
+  connect((state, props) => ({
+    review_state: state.content.data?.review_state,
+    contentId: flattenToAppURL(state.content.data?.['@id']),
+  })),
+)(DraftBackground);

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Container, Input, List } from 'semantic-ui-react';
 import { withRouter } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 import config from '@plone/volto/registry';
 
 const getRandomItems = (arr, max) => {
-  return arr.slice(0, max).map(function () {
-    return this.splice(Math.floor(Math.random() * this.length), 1)[0];
-  }, arr.slice());
+  return (
+    arr?.slice(0, max).map(function () {
+      return this.splice(Math.floor(Math.random() * this.length), 1)[0];
+    }, arr.slice()) || []
+  );
 };
 
 function HeaderSearchPopUp({
@@ -32,10 +34,15 @@ function HeaderSearchPopUp({
     searchSuggestions,
   } = activeView;
   const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
+
   const [text, setText] = React.useState('');
-  const visibleSuggestions = suggestions
-    ? getRandomItems(suggestions, maxToShow)
-    : [];
+  const [visibleSuggestions, setVisibileSuggestions] = React.useState(
+    getRandomItems(suggestions, maxToShow),
+  );
+
+  useEffect(() => {
+    setVisibileSuggestions(getRandomItems(suggestions, maxToShow));
+  }, [maxToShow, suggestions]);
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 

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

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import { FormattedMessage } from 'react-intl';
+import { Container } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+
+export class ContactFormComponent extends Component {
+  componentDidMount() {
+    if (config.settings.contactForm) {
+      this.props.history.replace(config.settings.contactForm);
+    }
+  }
+
+  render() {
+    const remoteUrl = config.settings.contactForm;
+    return (
+      <Container id="page-document">
+        <p>
+          <FormattedMessage id="Contact us:" defaultMessage="Contact us:" />{' '}
+          <UniversalLink href={remoteUrl}>{remoteUrl}</UniversalLink>
+        </p>
+      </Container>
+    );
+  }
+}
+
+export default ContactFormComponent;

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

@@ -101,10 +101,9 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
             className=""
             viewportWidth={width}
           >
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
               className="content"
-              role="menu"
-              tabIndex="0"
               onClick={(evt) => evt.stopPropagation()}
               onKeyDown={(evt) => evt.stopPropagation()}
             >
@@ -116,8 +115,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
                 href="https://europa.eu/european-union/contact/institutions-bodies_en"
                 target="_blank"
                 rel="noreferrer"
-                role="option"
-                aria-selected="false"
+                onKeyDown={(evt) => evt.stopPropagation()}
               >
                 See all EU institutions and bodies
               </a>
@@ -140,6 +138,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
                       className="site"
                       target="_blank"
                       rel="noreferrer"
+                      onKeyDown={(evt) => evt.stopPropagation()}
                     >
                       {item.title}
                     </a>
@@ -154,7 +153,10 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
           <Header.TopDropdownMenu
             id="language-switcher"
             className="item"
-            hasLanguageDropdown={config.settings.supportedLanguages.length > 1}
+            hasLanguageDropdown={
+              config.settings.supportedLanguages.length > 1 &&
+              config.settings.hasLanguageDropdown
+            }
             text={`${language.toUpperCase()}`}
             mobileText={`${language.toUpperCase()}`}
             icon={

package/src/icons/eraser.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" version="1.1" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+ <path d="m14.378 14.247-6.8402 6.8402 7.1774 7.1774h1.6168v-0.0028h1.6195l5.2207-5.2207zm1.954-1.9539 8.7942 8.7942 3.9079-3.9093-8.7942-8.7942zm5.5274 15.969h9.673v2.7637h-12.437l-5.5247 0.002764-8.9641-8.9641a1.3819 1.3819 0 0 1 0-1.954l14.655-14.657a1.3819 1.3819 0 0 1 1.9553 0l10.748 10.748a1.3819 1.3819 0 0 1 0 1.9539z" stroke-width="1.3819"/>
+</svg>

package/src/index.js

@@ -20,6 +20,9 @@ const applyConfig = (config) => {
     ...(config.settings.eea || {}),
   };
 
+  // #160689 Redirect contact-form to contact-us
+  config.settings.contactForm = '/contact';
+
   // Insert scripts on Error pages
   if (config.settings?.serverConfig?.extractScripts) {
     config.settings.serverConfig.extractScripts.errorPages = true;
@@ -115,6 +118,9 @@ const applyConfig = (config) => {
   // Custom block-style colors
   config.settings.available_colors = eea.colors;
 
+  // hide language dropdown by default
+  config.settings.hasLanguageDropdown = false;
+
   // Site theme colors
   config.settings.themeColors = [
     { value: undefined, title: 'No theme' },

package/src/slate.js

@@ -3,10 +3,9 @@ import { List } from 'semantic-ui-react';
 import { MarkElementButton, ToolbarButton } from '@plone/volto-slate/editor/ui';
 import installCallout from '@plone/volto-slate/editor/plugins/Callout';
 import { Icon } from '@plone/volto/components';
-import { Editor, Transforms } from 'slate';
+import { Editor, Transforms, Text } from 'slate';
 import { useSlate } from 'slate-react';
 
-import formatClearIcon from '@plone/volto/icons/format-clear.svg';
 import paintSVG from '@plone/volto/icons/paint.svg';
 import alignLeftIcon from '@plone/volto/icons/align-left.svg';
 import alignRightIcon from '@plone/volto/icons/align-right.svg';
@@ -14,6 +13,7 @@ import alignCenterIcon from '@plone/volto/icons/align-center.svg';
 import alignJustifyIcon from '@plone/volto/icons/align-justify.svg';
 import lightIcon from './icons/light.svg';
 import smallIcon from './icons/small.svg';
+import clearIcon from './icons/eraser.svg';
 
 const toggleBlockClassFormat = (editor, format) => {
   const levels = Array.from(Editor.levels(editor, editor.selection));
@@ -59,6 +59,27 @@ function BlockClassButton({ format, icon, ...props }) {
 }
 
 const clearFormatting = (editor) => {
+  const sn = Array.from(
+    Editor.nodes(editor, {
+      mode: 'lowest',
+      match: (n, p) => {
+        // console.log('node', n, p);
+        return Text.isText(n);
+      },
+      at: [0], // uncomment if you want everything to be cleared
+    }),
+  );
+
+  // console.log('sn', sn);
+
+  sn.forEach(([n, at]) => {
+    const toRemove = Object.keys(n).filter((k) => k.startsWith('style-'));
+    if (toRemove.length) {
+      Transforms.unsetNodes(editor, toRemove, { at });
+      // console.log('unset', n, at, toRemove);
+    }
+  });
+
   Transforms.setNodes(editor, {
     type: 'p',
     styleName: null,
@@ -90,7 +111,7 @@ export default function installSlate(config) {
     config = installCallout(config);
 
     config.settings.slate.buttons.clearformatting = (props) => (
-      <ClearFormattingButton title="Clear formatting" icon={formatClearIcon} />
+      <ClearFormattingButton title="Clear formatting" icon={clearIcon} />
     );
 
     // Remove blockquote, italic, strikethrough slate button from toolbarButtons