@kitconcept/volto-light-theme 2.0.0 → 2.1.0

package/src/components/MobileNavigation/MobileNavigation.jsx

@@ -1,16 +1,15 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import React, { useCallback } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import cx from 'classnames';
 
 import { CSSTransition } from 'react-transition-group';
-import { FormattedMessage } from 'react-intl';
 
-import { BodyClass } from '@plone/volto/helpers';
-import { Icon, LanguageSelector } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
 import arrowRightSVG from '@plone/volto/icons/right-key.svg';
 import arrowLeftSVG from '@plone/volto/icons/left-key.svg';
+import { MobileToolsFooter } from './MobileToolsFooter';
 
 const messages = defineMessages({
   closeMobileMenu: {
@@ -24,79 +23,111 @@ const messages = defineMessages({
 });
 
 const MobileNavigation = (props) => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
-  const [secondaryMenuOpened, setSecondaryMenuOpened] = React.useState(null);
-  const [isSecondaryMobileMenuOpen, setIsSecondaryMobileMenuOpen] =
-    React.useState(false);
-  const [tertiaryMenuOpened, setTertiaryMenuOpened] = React.useState(null);
-  const [isTertiaryMobileMenuOpen, setIsTertiaryMobileMenuOpen] =
-    React.useState(false);
+  const [menuState, setMenuState] = React.useState({
+    isMobileMenuOpen: false,
+    secondaryMenuOpened: null,
+    isSecondaryMobileMenuOpen: false,
+    tertiaryMenuOpened: null,
+    isTertiaryMobileMenuOpen: false,
+  });
+
+  const {
+    isMobileMenuOpen,
+    secondaryMenuOpened,
+    isSecondaryMobileMenuOpen,
+    tertiaryMenuOpened,
+    isTertiaryMobileMenuOpen,
+  } = menuState;
   const intl = useIntl();
   const menus = React.useRef(null);
   const currentLang = useSelector((state) => state.intl.locale);
   const items = useSelector((state) => state.navigation.items || []);
   const history = useHistory();
 
-  const Footer = () => (
-    <ul className="mobile-tools">
-      <li>
-        <LanguageSelector fullLabel={true} />
-      </li>
-    </ul>
-  );
+  const Footer = props.MobileToolsFooter || MobileToolsFooter;
 
-  function toggleMobileMenu() {
+  const toggleMobileMenu = useCallback(() => {
     const body = document.getElementsByTagName('body')[0];
-    if (!isMobileMenuOpen) {
-      body.style.position = 'fixed';
-      body.style.width = '100%';
-      body.style.top = '0px';
-      body.style.left = '0px';
-    } else {
-      body.style = '';
-    }
-    setIsMobileMenuOpen(!isMobileMenuOpen);
+    body.classList.toggle('has-menu-open');
 
-    if (isMobileMenuOpen) {
-      setIsSecondaryMobileMenuOpen(false);
-      setSecondaryMenuOpened(null);
-      setIsTertiaryMobileMenuOpen(false);
-      setTertiaryMenuOpened(null);
-    }
-  }
-
-  function openSecondaryMenu(index) {
-    setSecondaryMenuOpened(index);
-    setIsSecondaryMobileMenuOpen(true);
-  }
+    setMenuState((prevState) => ({
+      ...prevState,
+      isMobileMenuOpen: !prevState.isMobileMenuOpen,
+    }));
+  }, []);
 
-  function closeSecondaryMenu(e) {
+  const openSecondaryMenu = useCallback((e, index) => {
     e.stopPropagation();
-    setIsSecondaryMobileMenuOpen(false);
-    setSecondaryMenuOpened(null);
-  }
 
-  function openTertiaryMenu(index) {
-    setTertiaryMenuOpened(index);
-    setIsTertiaryMobileMenuOpen(true);
-  }
+    setMenuState((prevState) => ({
+      ...prevState,
+      secondaryMenuOpened: index,
+      isSecondaryMobileMenuOpen: true,
+    }));
+  }, []);
 
-  function closeTertiaryMenu(e) {
+  const closeSecondaryMenu = useCallback((e) => {
     e.stopPropagation();
-    setIsTertiaryMobileMenuOpen(false);
-    setTertiaryMenuOpened(null);
-  }
+    setMenuState((prevState) => ({
+      ...prevState,
+      isSecondaryMobileMenuOpen: false,
+      secondaryMenuOpened: null,
+    }));
+  }, []);
 
-  function closeMenus(e) {
+  const openTertiaryMenu = useCallback((e, index) => {
     e.stopPropagation();
-    setIsSecondaryMobileMenuOpen(false);
-    setIsTertiaryMobileMenuOpen(false);
-    setSecondaryMenuOpened(null);
-    setTertiaryMenuOpened(null);
-    setIsMobileMenuOpen(false);
-    const body = document.getElementsByTagName('body')[0];
-    body.style = '';
-  }
+
+    setMenuState((prevState) => ({
+      ...prevState,
+      tertiaryMenuOpened: index,
+      isTertiaryMobileMenuOpen: true,
+    }));
+  }, []);
+
+  const closeTertiaryMenu = useCallback((e) => {
+    e.stopPropagation();
+
+    setMenuState((prevState) => ({
+      ...prevState,
+      isTertiaryMobileMenuOpen: false,
+      tertiaryMenuOpened: null,
+    }));
+  }, []);
+
+  const closeMenus = useCallback((e) => {
+    if (e && e.stopPropagation) {
+      e.stopPropagation();
+    }
+
+    setMenuState(() => ({
+      isSecondaryMobileMenuOpen: false,
+      isTertiaryMobileMenuOpen: false,
+      secondaryMenuOpened: null,
+      tertiaryMenuOpened: null,
+      isMobileMenuOpen: false,
+    }));
+  }, []);
+
+  const handleLinkClicked = useCallback(
+    (e, section, callback, index) => {
+      e.preventDefault();
+      if (section.items.length > 0) {
+        callback(e, index);
+      } else {
+        history.push(section.url);
+        return closeMenus(e);
+      }
+    },
+    [history, closeMenus],
+  );
+
+  React.useEffect(() => {
+    const closeMenuOnHistoryChange = history.listen(() => closeMenus({}));
+    return () => {
+      closeMenuOnHistoryChange();
+    };
+  }, [history, closeMenus]);
 
   return (
     <div className="mobile-nav mobile only tablet only" ref={menus}>
@@ -128,10 +159,8 @@ const MobileNavigation = (props) => {
         in={isMobileMenuOpen}
         timeout={500}
         classNames="menu-drawer"
-        unmountOnExit
       >
         <div className="menu-drawer">
-          <BodyClass className="has-menu-open" />
           <ul className="sections">
             <li className="header">
               <Link to={`/${currentLang}`} onClick={closeMenus}>
@@ -143,18 +172,17 @@ const MobileNavigation = (props) => {
                 <li
                   key={section.url}
                   className={section.url === props.pathname ? 'current' : ''}
-                  onClick={(e) => {
-                    if (section.items.length > 0) {
-                      openSecondaryMenu(index);
-                    } else {
-                      history.push(section.url);
-                      return closeMenus(e);
-                    }
-                  }}
                   role="presentation"
                 >
-                  {section.nav_title || section.title}
-                  {section.items.length > 0 && <Icon name={arrowRightSVG} />}
+                  <Link
+                    to={section.url === '' ? '/' : section.url}
+                    onClick={(e) =>
+                      handleLinkClicked(e, section, openSecondaryMenu, index)
+                    }
+                  >
+                    {section.nav_title || section.title}
+                    {section.items.length > 0 && <Icon name={arrowRightSVG} />}
+                  </Link>
                   <CSSTransition
                     in={
                       isSecondaryMobileMenuOpen && secondaryMenuOpened === index
@@ -179,7 +207,7 @@ const MobileNavigation = (props) => {
                         <li>
                           <Link
                             to={section.url === '' ? '/' : section.url}
-                            onClick={(e) => closeMenus(e)}
+                            onClick={closeMenus}
                           >
                             <FormattedMessage
                               id="Overview"
@@ -197,20 +225,26 @@ const MobileNavigation = (props) => {
                                   ? 'current'
                                   : ''
                               }
-                              onClick={(e) => {
-                                if (subsection.items.length > 0) {
-                                  openTertiaryMenu(index);
-                                } else {
-                                  history.push(subsection.url);
-                                  return closeMenus(e);
-                                }
-                              }}
                               role="presentation"
                             >
-                              {subsection.nav_title || subsection.title}
-                              {subsection.items.length > 0 && (
-                                <Icon name={arrowRightSVG} />
-                              )}
+                              <Link
+                                to={
+                                  subsection.url === '' ? '/' : subsection.url
+                                }
+                                onClick={(e) =>
+                                  handleLinkClicked(
+                                    e,
+                                    subsection,
+                                    openTertiaryMenu,
+                                    index,
+                                  )
+                                }
+                              >
+                                {subsection.nav_title || subsection.title}
+                                {subsection.items.length > 0 && (
+                                  <Icon name={arrowRightSVG} />
+                                )}
+                              </Link>
                               <CSSTransition
                                 in={
                                   isTertiaryMobileMenuOpen &&
@@ -245,7 +279,7 @@ const MobileNavigation = (props) => {
                                             ? '/'
                                             : subsection.url
                                         }
-                                        onClick={(e) => closeMenus(e)}
+                                        onClick={closeMenus}
                                       >
                                         <FormattedMessage
                                           id="Overview"
@@ -269,7 +303,7 @@ const MobileNavigation = (props) => {
                                           >
                                             <Link
                                               to={subsubsection.url}
-                                              onClick={(e) => closeMenus(e)}
+                                              onClick={closeMenus}
                                             >
                                               {subsubsection.nav_title ||
                                                 subsubsection.title}

package/src/components/MobileNavigation/MobileToolsFooter.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LanguageSelector } from '@plone/volto/components';
+
+export const MobileToolsFooter = () => (
+  <ul className="mobile-tools">
+    <li>
+      <LanguageSelector fullLabel={true} />
+    </li>
+  </ul>
+);

package/src/components/Navigation/Navigation.jsx

@@ -2,9 +2,8 @@
 
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { NavLink, withRouter } from 'react-router-dom';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { NavLink } from 'react-router-dom';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { useIntl, defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
@@ -17,19 +16,24 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import NavItem from '@plone/volto/components/theme/Navigation/NavItem';
 
 const messages = defineMessages({
-  overview: {
-    id: 'Overview',
-    defaultMessage: 'Overview',
+  closeMenu: {
+    id: 'Close menu',
+    defaultMessage: 'Close menu',
   },
 });
 
-const Navigation = ({ getNavigation, pathname, items, lang }) => {
+const Navigation = ({ pathname }) => {
   const [desktopMenuOpen, setDesktopMenuOpen] = useState(null);
   const [currentOpenIndex, setCurrentOpenIndex] = useState(null);
   const navigation = useRef(null);
+  const dispatch = useDispatch();
   const intl = useIntl();
   const enableFatMenu = config.settings.enableFatMenu;
 
+  const lang = useSelector((state) => state.intl.locale);
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const items = useSelector((state) => state.navigation.items, shallowEqual);
+
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (navigation.current && doesNodeContainClick(navigation.current, e))
@@ -45,11 +49,10 @@ const Navigation = ({ getNavigation, pathname, items, lang }) => {
   }, []);
 
   useEffect(() => {
-    const { settings } = config;
     if (!hasApiExpander('navigation', getBaseUrl(pathname))) {
-      getNavigation(getBaseUrl(pathname), settings.navDepth);
+      dispatch(getNavigation(getBaseUrl(pathname), config.settings.navDepth));
     }
-  }, [getNavigation, pathname]);
+  }, [pathname, token, dispatch]);
 
   const isActive = (url) => {
     return (url === '' && pathname === '/') || (url !== '' && pathname === url);
@@ -70,6 +73,19 @@ const Navigation = ({ getNavigation, pathname, items, lang }) => {
     setCurrentOpenIndex(null);
   };
 
+  useEffect(() => {
+    const handleEsc = (event) => {
+      if (event.keyCode === 27) {
+        closeMenu();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, []);
+
   return (
     <nav
       id="navigation"
@@ -100,24 +116,21 @@ const Navigation = ({ getNavigation, pathname, items, lang }) => {
                         active: desktopMenuOpen === index,
                       })}
                     >
-                      <div
-                        role="presentation"
-                        className="close"
-                        onClick={closeMenu}
-                      >
-                        <Icon name={clearSVG} size="48px" />
-                      </div>
                       <div className="submenu-inner">
                         <NavLink
                           to={item.url === '' ? '/' : item.url}
                           onClick={() => closeMenu()}
                           className="submenu-header"
                         >
-                          <h2>
-                            {item.nav_title ?? item.title} (
-                            {intl.formatMessage(messages.overview)})
-                          </h2>
+                          <h2>{item.nav_title ?? item.title}</h2>
                         </NavLink>
+                        <button
+                          className="close"
+                          onClick={closeMenu}
+                          aria-label={intl.formatMessage(messages.closeMenu)}
+                        >
+                          <Icon name={clearSVG} size="48px" />
+                        </button>
                         <ul>
                           {item.items &&
                             item.items.length > 0 &&
@@ -192,30 +205,11 @@ const Navigation = ({ getNavigation, pathname, items, lang }) => {
 };
 
 Navigation.propTypes = {
-  getNavigation: PropTypes.func.isRequired,
   pathname: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-    }),
-  ).isRequired,
-  lang: PropTypes.string.isRequired,
 };
 
 Navigation.defaultProps = {
   token: null,
 };
 
-export default compose(
-  injectIntl,
-  withRouter,
-  connect(
-    (state) => ({
-      token: state.userSession.token,
-      items: state.navigation.items,
-      lang: state.intl.locale,
-    }),
-    { getNavigation },
-  ),
-)(Navigation);
+export default injectIntl(Navigation);

package/src/customizations/volto/components/manage/Blocks/Listing/ImageGallery.jsx

@@ -0,0 +1,8 @@
+/**
+ * OVERRIDE ImageGallery.jsx
+ * REASON: To implement Title, Description and Copyright info.
+ */
+
+import ImageGallery from '../../../../../../components/Blocks/Listing/ImageGallery';
+
+export default ImageGallery;

package/src/icons/back-down.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <g fill-rule="evenodd">
+    <polygon points="29 23 29 21 21 21 21 29 23 29 23 24.414 29.293 30.707 30.707 29.293 24.414 23"/>
+    <polygon points="13 11.586 6.707 5.293 5.293 6.707 11.586 13 7 13 7 15 15 15 15 7 13 7"/>
+    <polygon points="29 13 24.414 13 30.707 6.707 29.293 5.293 23 11.586 23 7 21 7 21 15 29 15"/>
+    <polygon points="7 23 11.586 23 5.293 29.293 6.707 30.707 13 24.414 13 29 15 29 15 21 7 21"/>
+  </g>
+</svg>

package/src/icons/fullscreen.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_5704_67)" transform="matrix(0.72424773,0,0,0.72424773,-0.006815,0.49090202)">
+    <path d="m 11.5,11 2.9886,11.1536 8.1649,-8.165 z M 25,24.5 25.7071,25.2071 26.4142,24.5 25.7071,23.7929 Z M 11.5,38 22.6535,35.0114 14.4886,26.8464 Z m 5.6569,-19.9289 7.136,7.136 1.4142,-1.4142 -7.136,-7.136 z m 7.136,5.7218 -7.136,7.136 1.4142,1.4142 7.136,-7.136 z"/>
+    <path d="m 38.391,11 -2.9886,11.1536 -8.165,-8.165 z m -13.5,13.5 -0.7071,0.7071 -0.7071,-0.7071 0.7071,-0.7071 z m 13.5,13.5 -11.1536,-2.9886 8.165,-8.165 z m -5.6569,-19.9289 -7.136,7.136 -1.4142,-1.4142 7.136,-7.136 z m -7.136,5.7218 7.136,7.136 -1.4142,1.4142 -7.136,-7.136 z"/>
+  </g>
+</svg>

package/src/icons/left-key.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 29.100048,0.43270825 7.8737003,18.004379 29.100048,35.576057" fill="none" stroke="#000000" stroke-width="1.2"/>
+</svg>

package/src/icons/pause.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <g fill-rule="evenodd">
+    <path d="m 19,27 h 6 V 9 h -6 z m -8,0 h 6 V 9 h -6 z"/>
+  </g>
+</svg>

package/src/icons/play.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 24.711864,18.593219 12.521032,9.1928375 V 27.993602 Z"/>
+</svg>

package/src/icons/right-key.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 7.2996057,0.43270834 28.525973,18.004385 7.2996057,35.576069" fill="none" stroke="#000000" stroke-width="1.2"/>
+</svg>

package/src/index.js

@@ -53,6 +53,10 @@ const applyConfig = (config) => {
   config.settings.navDepth = 3;
   config.settings.enableFatMenu = true;
   config.settings.slate.useLinkedHeadings = false;
+  config.settings.contentMetadataTagsImageField = 'preview_image';
+
+  // Remove Hero Block
+  config.blocks.blocksConfig.hero.restricted = true;
 
   // No required blocks (eg. Title)
   config.blocks.requiredBlocks = [];
@@ -127,6 +131,7 @@ const applyConfig = (config) => {
   ];
 
   config.settings.slidingSearchAnimation = true;
+  config.settings.openExternalLinkInNewTab = true;
 
   config.blocks.blocksConfig.accordion = {
     ...config.blocks.blocksConfig.accordion,

package/src/theme/_content.scss

@@ -173,7 +173,7 @@
   .content-area {
     figure {
       img {
-        aspect-ratio: $aspect-ratio;
+        object-fit: contain;
       }
       figcaption {
         margin-top: $spacing-small;