From e5ef4a4d4b7649a5ba200c07948bea17b2cbdd8a Mon Sep 17 00:00:00 2001 From: Ichim David Date: Mon, 11 Nov 2024 21:58:22 +0200 Subject: [PATCH 1/4] feat(header): header web report hero size and gradient rework (#270) * Added DefaultView override to assign AccordionContextNavigation to /en/sandbox/david for the development stage * WIP: base for page banner variation * fix: add hero background image styles * refactor(Banner): separate BannerView in its own compoennt for HeroBackground * fix: normalize variations on edit and view components to make them identical * style: Automated code fix * fix: fix empty blocks on Edit page, normalize edit mode, fix styles * feat(Banner): add subtitle and metadata fields to Banner component * feat(web report): add web report section CT view * feat(Banner): add hero_header prop and update styles - Add hero_header prop to Banner component - Update styles to handle hero_header prop - Remove unused hero_background logic - Add BodyClass component to apply homepage-header class when hero_header is true * feat(Title): add hero_header prop and update schema - Add hero_header prop to Title block schema - Remove unused hero_background and height props * style: Automated code fix * feat(Title): update hero_background gradient styles - Add additional gradient stops to create a more visually appealing background * style: Automated code fix * feat(HeroBackground): homepage-header class also on Edit * feat(HeroBackground): add content type and subtitle to banner - Add content type and subtitle to the banner component in the HeroBackground variation - Update the gradient styles to apply to the light-header class instead of the web_report class - Wrap the banner in an IsomorphicPortal component when not in edit mode * fix: do not redirect to self when children are absent * fix react import * update layout view mapping * fix: mapping of layoutViewNames * feat(breadcrumbs): avoid content-types rendering as links based on setting * remove: banner customization * add contextNavigation block * fix: contentTypeViews mapping * refactor: add a comment about tests * Added Web Report and Web Report Page title variations * feat: update homepage header styles * fix(header): simplify again check for isHomePageInverse - Previous logic was not turning the header to inverse when a new content is created and you are on the /add route * fix(header): show homepage inverse only on view, edit and add pages - Update the `WebReport` and `WebReportPage` variations to remove the homepage class that moved the content-area within the header since we have another design which doesn't require such styling * feat(context-navigation): add dynamic context navigation based on redux state - Add dynamic context navigation based on the `context_navigation` actions in the redux state - The context navigation is now rendered conditionally based on the current path matching the configured navigation paths - The context navigation parameters are now dynamically set based on the matching navigation path configuration * fix(title-block): fix header position on non view pages - Update the `.light-header .main.bar` selector to only apply on `.view-viewview` pages for absolute positioning * style: Automated code fix * feat(context-navigation): add shouldRender prop to withEEASideMenu - This ensures the context navigation accordion is only rendered when there are items to display * fix(header): remove homepage class from header - Removed the `BodyClass` component that was adding the `homepage` class to the body when on the homepage - This class was causing the content area to be positioned within the header, which is not the desired behavior for the new report header design * fix(title-block): container width which was shorter when using position absolute * fixed disabling of second level for web_report_section not web_report_page * include the ContextNavigation component only if we have light-header class on the body - this is added by using a web report title block variation since they want to have the current web reports as they are and enable the new layout if they want to * enable context navigation block and enabled testing for it in order to bump code coverage * fixed test as Navigation block is not most used so we need to search for it * feat(context-navigation): add outside click handling and container width adjustments - Add event listener to close context navigation accordion when clicking outside - Wrap context navigation header and list in container to ensure proper width on mobile - Leverage MaybeWrap component to conditionally apply container class * bump bottomLevel depth to 4 in order to get 4 levels of own content for context navigation * removed console logs * check the .main.bar if it's visible or not when deciding when to apply the fixed class on the mobile and tablet side-menu * tweaked light-header gradient to avoid gradient in center of image after design meeting * feat(title-block): add option to hide content type - Add conditional rendering for content type in WebReportPage and WebReport title block variations - Hide content type metadata field in Banner component if content type is hidden or the variation is a report * brought back original gradient for non hero or non web report content type as requested in feedback * reduce z-index of main.bar to 1 to avoid top bar content show up behind the main bar after latest changes * fix(title-block): above title content for Web report variation when we hide content type - previous code allowed the duplication of subtitle due to aboveTitle being false * customized volto breadcrumbs reducer to add portal_type info for each breadcrumb * renamed `contentTypesToAvoidAsLinks` to `contentTypesAsBreadcrumbSection` making it clearer on what this property is supposed to be used for * added index.js missing from previous commit. Detail the right changes in the preview commit: - allow contentTypesAsBreadcrumbSection config to affect which content type shouldn't be displayed in the breadcrumb - Restrict this config for now only for anonymous since we need to use this to restrict the anonymous from navigating to Web Report Section * Use remix icons instead of Volto icons in order to avoid having accordion title with a higher height due to the svg icon sizes * Added textAlign to style options of the title block allowing text to be left or center aligned * Cleaned non prefixed styling and added some fixes for light header from other css files with the intent to have everything in one place * lint fix * moved styles within header.less from volto-eea-design-system * added comment within breadcrumbs.js reducer to summarize the changes * Added Breadcrumbs.test.jsx with test for contentTypesAsBreadcrumbSection * change(context-navigation): use last matched action in case we have a more specific nav action added * modified cypress test to handle clicking on body and user enter on the accordion-header * use trigger keydown instead of type enter for hitting enter on the accordion-header --------- Co-authored-by: nileshgulia1 Co-authored-by: eea-jenkins --- cypress/e2e/01-block-basics.cy.js | 10 ++ package.json | 1 + .../variations/Accordion.jsx | 70 ++++++-- src/components/manage/Blocks/Title/index.js | 1 - src/components/manage/Blocks/Title/schema.js | 21 ++- .../Blocks/Title/variations/WebReport.jsx | 5 +- .../Blocks/Title/variations/WebReportPage.jsx | 9 +- .../Blocks/Title/variations/styles.less | 28 --- src/components/theme/Banner/View.jsx | 4 +- .../theme/Breadcrumbs/Breadcrumbs.jsx | 23 +-- .../theme/Breadcrumbs/Breadcrumbs.test.jsx | 75 ++++++++ .../__snapshots__/Breadcrumbs.test.jsx.snap | 167 ++++++++++++++++++ .../components/theme/View/DefaultView.jsx | 11 +- .../volto/reducers/breadcrumbs/breadcrumbs.js | 98 ++++++++++ src/index.js | 8 +- 15 files changed, 456 insertions(+), 75 deletions(-) delete mode 100644 src/components/manage/Blocks/Title/variations/styles.less create mode 100644 src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.test.jsx create mode 100644 src/customizations/volto/components/theme/Breadcrumbs/__snapshots__/Breadcrumbs.test.jsx.snap create mode 100644 src/customizations/volto/reducers/breadcrumbs/breadcrumbs.js diff --git a/cypress/e2e/01-block-basics.cy.js b/cypress/e2e/01-block-basics.cy.js index 4a9ce0a7..a7989ea9 100644 --- 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 index ab583afe..400a9a1b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "url": "git@github.com:eea/volto-eea-website-theme.git" }, "dependencies": { + "@eeacms/volto-block-toc": "*", "@eeacms/volto-block-style": "*", "@eeacms/volto-block-toc": "*", "@eeacms/volto-eea-design-system": "*", diff --git a/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx b/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx index 82eaeac0..8496d8c1 100644 --- 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}`} > {title} - + -