Merge pull request #271 from eea/develop

Release
eea · Nov 14, 2024 · c4fc5f9 · c4fc5f9
2 parents 6e9068e + 60275af
commit c4fc5f9
Show file tree

Hide file tree

Showing 16 changed files with 476 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,15 @@ 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).
 
-### [3.1.0](https://github.com/eea/volto-eea-website-theme/compare/3.0.0...3.1.0) - 5 November 2024
+### [3.2.0](https://github.com/eea/volto-eea-website-theme/compare/3.1.0...3.2.0) - 11 November 2024
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [Ichim David - [`4b5073b`](https://github.com/eea/volto-eea-website-theme/commit/4b5073b60a7d144597363f89d5cba6357baa9e19)]
+### [3.1.0](https://github.com/eea/volto-eea-website-theme/compare/3.0.0...3.1.0) - 6 November 2024
 
 #### :hammer_and_wrench: Others
 
-- fix Grid conversion, ref #278618 [Miu Razvan - [`f80b786`](https://github.com/eea/volto-eea-website-theme/commit/f80b7869b4ac060bf35250cf5045ab930a0003de)]
 ## [3.0.0](https://github.com/eea/volto-eea-website-theme/compare/2.4.0...3.0.0) - 21 October 2024
 
 #### :nail_care: Enhancements
@@ -115,7 +119,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - modified param of dateIsInFuture to signal it's a string and not a date [David Ichim - [`e3243a0`](https://github.com/eea/volto-eea-website-theme/commit/e3243a075969a379462ba0b7889fe0d8b52af62a)]
-## [2.0.0](https://github.com/eea/volto-eea-website-theme/compare/1.34.0...2.0.0) - 13 May 2024
+## [2.0.0](https://github.com/eea/volto-eea-website-theme/compare/1.35.0...2.0.0) - 13 May 2024
 
 #### :rocket: New Features
 
@@ -140,6 +144,18 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Bump package version to 2.0.0 to signal major release due to Volto 17 jump [David Ichim - [`ffe3049`](https://github.com/eea/volto-eea-website-theme/commit/ffe3049b3b656093a44f05044dbe7cd63bac495f)]
+### [1.35.0](https://github.com/eea/volto-eea-website-theme/compare/1.34.0...1.35.0) - 6 November 2024
+
+#### :bug: Bug Fixes
+
+- fix(slate) - fix console error on list element  - ref #278427 [kreafox - [`2ea7dd1`](https://github.com/eea/volto-eea-website-theme/commit/2ea7dd1488782db09ca3b8636a932930326f1175)]
+- fix: cypress 13.1.0 [kreafox - [`0636604`](https://github.com/eea/volto-eea-website-theme/commit/0636604cf023730927c0006dcb146d5f9e086f1c)]
+
+#### :hammer_and_wrench: Others
+
+- Revert "Release 1.35.0" [alin - [`dcc318a`](https://github.com/eea/volto-eea-website-theme/commit/dcc318a5082e3c7fff44d00bfd9bb140c4efc21a)]
+- Revert "1.35.1" [alin - [`6012bc6`](https://github.com/eea/volto-eea-website-theme/commit/6012bc68cf7a692fc964610a6071c82d4211fb2e)]
+- Release 1.35.0 [kreafox - [`e21bee6`](https://github.com/eea/volto-eea-website-theme/commit/e21bee61e55e6c6b46d0119059f7a6063b0edad8)]
 ### [1.34.0](https://github.com/eea/volto-eea-website-theme/compare/1.33.2...1.34.0) - 9 May 2024
 
 #### :bug: Bug Fixes

diff --git a/cypress/e2e/01-block-basics.cy.js b/cypress/e2e/01-block-basics.cy.js
@@ -105,6 +105,16 @@ describe('Blocks Tests', () => {
 
     // then the page view should contain our changes
     cy.get('.accordion-header').contains('Nav title');
+
+    // resize window to make tablet or mobile condition work
+    cy.viewport(375, 667);
     cy.get('.accordion-header').click();
+
+    // trigger outside click
+    cy.get('body').click();
+
+    // use enter to open accordion
+    cy.get('.accordion-header').trigger('keydown', { keyCode: 13, which: 13 });
+    cy.get('.accordion-header').contains('Nav title');
   });
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,8 +24,8 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
-    "@eeacms/volto-block-style": "*",
     "@eeacms/volto-block-toc": "*",
+    "@eeacms/volto-block-style": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-group-block": "*",
     "volto-subsites": "*"

diff --git a/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx b/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx
@@ -4,18 +4,15 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { withRouter } from 'react-router';
 import { compose } from 'redux';
-import { Accordion } from 'semantic-ui-react';
+import { Accordion, Icon } from 'semantic-ui-react';
 
 import Slugger from 'github-slugger';
 
-import { Icon, UniversalLink } from '@plone/volto/components';
+import { UniversalLink, MaybeWrap } from '@plone/volto/components';
 import { withContentNavigation } from '@plone/volto/components/theme/Navigation/withContentNavigation';
 import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
-import downIcon from '@plone/volto/icons/down-key.svg';
-import upIcon from '@plone/volto/icons/up-key.svg';
-
 const messages = defineMessages({
   navigation: {
     id: 'Navigation',
@@ -33,6 +30,8 @@ const AccordionNavigation = ({
   const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
   const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
   const [activeItems, setActiveItems] = React.useState({});
+  const contextNavigationListRef = React.useRef(null);
+  const summaryRef = React.useRef(null);
 
   const onClickSummary = React.useCallback((e) => {
     e.preventDefault();
@@ -43,6 +42,26 @@ const AccordionNavigation = ({
     if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
   }, [isMenuOpenOnOutsideClick]);
 
+  React.useEffect(() => {
+    if (!navOpen) {
+      const handleOutsideClick = (event) => {
+        if (
+          summaryRef.current &&
+          contextNavigationListRef.current &&
+          !summaryRef.current.contains(event.target) &&
+          !contextNavigationListRef.current.contains(event.target)
+        ) {
+          setIsNavOpen(false);
+        }
+      };
+
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [summaryRef, navOpen]);
+
   const onKeyDownSummary = React.useCallback(
     (e) => {
       if (e.keyCode === 13 || e.keyCode === 32) {
@@ -95,7 +114,11 @@ const AccordionNavigation = ({
               id={`accordion-title-${normalizedTitle}`}
             >
               <span className="title-text">{title}</span>
-              <Icon name={isActive ? upIcon : downIcon} size="32px" />
+              <Icon
+                className={
+                  isActive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
+                }
+              />
             </Accordion.Title>
             <Accordion.Content
               active={isActive}
@@ -127,20 +150,40 @@ const AccordionNavigation = ({
 
   return items.length ? (
     <>
-      <nav className="context-navigation">
+      <nav className="context-navigation" aria-label={title}>
         <details open={isNavOpen}>
           {/* eslint-disable-next-line */}
           <summary
             className="context-navigation-header accordion-header"
             onClick={onClickSummary}
             onKeyDown={onKeyDownSummary}
+            ref={summaryRef}
           >
-            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
-            <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+            <MaybeWrap
+              condition={!navOpen}
+              className="ui container d-flex flex-items-center"
+            >
+              {has_custom_name
+                ? title
+                : intl.formatMessage(messages.navigation)}
+              <Icon
+                className={
+                  isNavOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
+                }
+              />
+            </MaybeWrap>
           </summary>
-          <ul className="context-navigation-list accordion-list">
-            {items.map((item) => renderItems({ item }))}
-          </ul>
+          <MaybeWrap
+            condition={!navOpen}
+            className="ui container d-flex flex-items-center"
+          >
+            <ul
+              className="context-navigation-list accordion-list"
+              ref={contextNavigationListRef}
+            >
+              {items.map((item) => renderItems({ item }))}
+            </ul>
+          </MaybeWrap>
         </details>
       </nav>
     </>
@@ -174,6 +217,9 @@ export default compose(
   (WrappedComponent) => (props) =>
     withEEASideMenu(WrappedComponent)({
       ...props,
+      targetParent: '.eea.header ',
+      fixedVisibilitySwitchTarget: '.main.bar',
+      insertBeforeOnMobile: '.banner',
       shouldRender: props.navigation?.items?.length > 0,
     }),
 )(AccordionNavigation);
diff --git a/src/components/manage/Blocks/Title/index.js b/src/components/manage/Blocks/Title/index.js
@@ -3,7 +3,6 @@ import View from './View';
 import DefaultTemplate from './variations/Default';
 import WebReport from './variations/WebReport';
 import WebReportPage from './variations/WebReportPage';
-import './variations/styles.less';
 
 const applyConfig = (config) => {
   config.blocks.blocksConfig.title = {

diff --git a/src/components/manage/Blocks/Title/schema.js b/src/components/manage/Blocks/Title/schema.js
@@ -2,12 +2,20 @@ import alignTopSVG from '@plone/volto/icons/move-up.svg';
 import alignCenterSVG from '@plone/volto/icons/row.svg';
 import alignBottomSVG from '@plone/volto/icons/move-down.svg';
 
+import alignTextLeftSVG from '@plone/volto/icons/align-left.svg';
+import alignTextCenterSVG from '@plone/volto/icons/align-center.svg';
+
 const ALIGN_INFO_MAP_IMAGE_POSITION = {
   'has--bg--top': [alignTopSVG, 'Top'],
   'has--bg--center': [alignCenterSVG, 'Center'],
   'has--bg--bottom': [alignBottomSVG, 'Bottom'],
 };
 
+const ALIGN_INFO_MAP_TEXT_ALIGN = {
+  'has--text--left': [alignTextLeftSVG, 'Left'],
+  'has--text--center': [alignTextCenterSVG, 'Center'],
+};
+
 const infoSchema = {
   title: 'Info',
   fieldsets: [
@@ -145,8 +153,8 @@ const titleSchema = {
     copyrightPosition: {
       title: 'Align',
       widget: 'style_align',
-      actions: ['left', 'right'],
-      defaultValue: 'left',
+      actions: ['left', 'center', 'right'],
+      defaultValue: '',
     },
     styles: {
       widget: 'object',
@@ -156,7 +164,7 @@ const titleSchema = {
           {
             id: 'default',
             title: 'Default',
-            fields: ['bg'],
+            fields: ['bg', 'textAlign'],
           },
         ],
         properties: {
@@ -167,6 +175,13 @@ const titleSchema = {
             actionsInfoMap: ALIGN_INFO_MAP_IMAGE_POSITION,
             defaultValue: 'has--bg--center',
           },
+          textAlign: {
+            title: 'Text align',
+            widget: 'style_align',
+            actions: Object.keys(ALIGN_INFO_MAP_TEXT_ALIGN),
+            actionsInfoMap: ALIGN_INFO_MAP_TEXT_ALIGN,
+            defaultValue: '',
+          },
         },
         required: [],
       },

diff --git a/src/components/manage/Blocks/Title/variations/WebReport.jsx b/src/components/manage/Blocks/Title/variations/WebReport.jsx
@@ -38,11 +38,12 @@ const WebReport = (props) => {
         {...props}
         data={{
           ...props.data,
-          hideContentType: true,
-          aboveTitle: (
+          aboveTitle: !props.data.hideContentType ? (
             <div className="content-type">
               {props.data.content_type || props.properties.type_title}
             </div>
+          ) : (
+            ' '
           ),
           belowTitle: (
             <>

diff --git a/src/components/manage/Blocks/Title/variations/WebReportPage.jsx b/src/components/manage/Blocks/Title/variations/WebReportPage.jsx
@@ -32,12 +32,13 @@ const WebReportPage = (props) => {
         {...props}
         data={{
           ...props.data,
-          hideContentType: true,
           aboveTitle: (
             <>
-              <div className="content-type">
-                {props.data.content_type || props.properties.type_title}
-              </div>
+              {!props.data.hideContentType && (
+                <div className="content-type">
+                  {props.data.content_type || props.properties.type_title}
+                </div>
+              )}
               <div className="subtitle">{props.data.subtitle}</div>
             </>
           ),

diff --git a/src/components/manage/Blocks/Title/variations/styles.less b/src/components/manage/Blocks/Title/variations/styles.less
diff --git a/src/components/theme/Banner/View.jsx b/src/components/theme/Banner/View.jsx
@@ -300,7 +300,9 @@ const View = (props) => {
         <Banner.Metadata>
           <Banner.MetadataField
             type="type"
-            hidden={hideContentType}
+            hidden={
+              hideContentType || props.variation.id.indexOf('report') !== -1
+            }
             value={type}
           />
           <Banner.MetadataField

diff --git a/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx b/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx
@@ -3,7 +3,7 @@
  * @module components/theme/Breadcrumbs/Breadcrumbs
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useLocation } from 'react-router';
@@ -32,26 +32,17 @@ const isContentRoute = (pathname) => {
 const Breadcrumbs = (props) => {
   const dispatch = useDispatch();
   const { items = [], root = '/' } = useSelector((state) => state?.breadcrumbs);
-  const content = useSelector((state) => state?.content?.data);
+  const token = useSelector((state) => state?.userSession?.token);
 
   // 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 contentTypesAsBreadcrumbSection = !token
+    ? config.settings.contentTypesAsBreadcrumbSection
+    : [];
 
   const sections = items.map((item) => ({
-    title: item.title,
-    href: item.url,
+    ...item,
     key: item.title,
   }));
 
@@ -71,7 +62,7 @@ const Breadcrumbs = (props) => {
         pathname={pathname}
         sections={sections}
         root={root}
-        linkLevels={linkLevels}
+        contentTypesAsBreadcrumbSection={contentTypesAsBreadcrumbSection}
       />
     </React.Fragment>
   );