@kitconcept/volto-light-theme 6.0.0-alpha.8 → 6.0.0

package/src/components/Header/Header.tsx

@@ -0,0 +1,257 @@
+// SemanticUI-free pre-@plone/components
+import { useEffect, useState } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { Button, Container } from '@plone/components';
+import isEmpty from 'lodash/isEmpty';
+import cx from 'classnames';
+
+import {
+  setSidebarTab,
+  setMetadataFocus,
+} from '@plone/volto/actions/sidebar/sidebar';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import LanguageSelector from '@plone/volto/components/theme/LanguageSelector/LanguageSelector';
+import Logo from '@plone/volto/components/theme/Logo/Logo';
+import Navigation from '@plone/volto/components/theme/Navigation/Navigation';
+import SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
+
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+
+import MobileNavigation from '../MobileNavigation/MobileNavigation';
+import IntranetSearchWidget from '../SearchWidget/IntranetSearchWidget';
+
+import type { SiteHeaderSettings } from '../../types';
+import type { Content } from '@plone/types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  navroot: {
+    data: {
+      navroot: Content;
+    };
+  };
+  form: {
+    global: Content;
+  };
+};
+
+const InternetHeader = ({ pathname, content }) => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const dispatch = useDispatch();
+
+  const formData = useSelector<FormState, Content>(
+    (state) => state.form.global,
+  );
+
+  const intranet_flag = useLiveData<SiteHeaderSettings['intranet_flag']>(
+    content,
+    'voltolighttheme.header',
+    'intranet_flag',
+  );
+
+  const header_actions = useLiveData<SiteHeaderSettings['header_actions']>(
+    content,
+    'voltolighttheme.header',
+    'header_actions',
+  );
+
+  const pointToSidebar = (fieldSetName, fieldId) => {
+    dispatch(setSidebarTab(0));
+    dispatch(setMetadataFocus(fieldSetName, fieldId));
+  };
+
+  return (
+    <>
+      <div className="header">
+        <div className="tools-wrapper">
+          <LanguageSelector />
+
+          <div className="tools">
+            {header_actions &&
+              Array.isArray(header_actions) &&
+              header_actions.map((item) => (
+                <UniversalLink
+                  key={item['@id']}
+                  href={item.href?.[0]['@id']}
+                  openLinkInNewTab={item.openInNewTab}
+                >
+                  {item.title}
+                </UniversalLink>
+              ))}
+          </div>
+          {intranet_flag &&
+            isClient &&
+            (!isEmpty(formData) ? (
+              <Button
+                className="intranet-flag"
+                onPress={() =>
+                  pointToSidebar('header customizations', 'intranet_flag')
+                }
+              >
+                <p>{intranet_flag}</p>
+              </Button>
+            ) : (
+              <div className="intranet-flag">
+                <p>{intranet_flag}</p>
+              </div>
+            ))}
+        </div>
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
+          </div>
+          <Navigation pathname={pathname} />
+          <MobileNavigation pathname={pathname} />
+          <div className="search-wrapper navigation-desktop">
+            <div className="search">
+              <SearchWidget />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const IntranetHeader = ({ pathname, content }) => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const dispatch = useDispatch();
+
+  const formData = useSelector<FormState, Content>(
+    (state) => state.form.global,
+  );
+
+  const intranet_flag = useLiveData<SiteHeaderSettings['intranet_flag']>(
+    content,
+    'voltolighttheme.header',
+    'intranet_flag',
+  );
+
+  const complementary_logo = useLiveData<
+    SiteHeaderSettings['complementary_logo']
+  >(content, 'voltolighttheme.header', 'complementary_logo');
+
+  const complementaryLogoSrc = complementary_logo?.data
+    ? `data:${complementary_logo['content-type']};base64,${complementary_logo.data}`
+    : flattenToAppURL(complementary_logo?.download);
+
+  const header_actions = useLiveData<SiteHeaderSettings['header_actions']>(
+    content,
+    'voltolighttheme.header',
+    'header_actions',
+  );
+
+  const pointToSidebar = (fieldSetName, fieldId) => {
+    dispatch(setSidebarTab(0));
+    dispatch(setMetadataFocus(fieldSetName, fieldId));
+  };
+
+  return (
+    <>
+      <div className="header">
+        <div className="tools-wrapper">
+          <LanguageSelector />
+
+          <div className="tools">
+            <SlotRenderer name="headerTools" content={content} />
+
+            {header_actions &&
+              Array.isArray(header_actions) &&
+              header_actions.map((item) => (
+                <UniversalLink
+                  key={item['@id']}
+                  href={item.href?.[0]['@id']}
+                  openLinkInNewTab={item.openInNewTab}
+                >
+                  {item.title}
+                </UniversalLink>
+              ))}
+          </div>
+          {intranet_flag &&
+            isClient &&
+            (!isEmpty(formData) ? (
+              <Button
+                className="intranet-flag"
+                onPress={() =>
+                  pointToSidebar('header customizations', 'intranet_flag')
+                }
+              >
+                <p>{intranet_flag}</p>
+              </Button>
+            ) : (
+              <div className="intranet-flag">
+                <p>{intranet_flag}</p>
+              </div>
+            ))}
+        </div>
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
+          </div>
+          <div className="search-wrapper">
+            <div className="search">
+              <IntranetSearchWidget />
+            </div>
+          </div>
+          <MobileNavigation pathname={pathname} />
+          <div className="complementary-logo">
+            {complementary_logo && (
+              <img src={complementaryLogoSrc} alt="complementary logo" />
+            )}
+          </div>
+        </div>
+        <Navigation pathname={pathname} />
+      </div>
+    </>
+  );
+};
+
+const Header = (props) => {
+  const { pathname } = props;
+  const content = useSelector<FormState, Content>(
+    (state) => state.content.data,
+    shallowEqual,
+  );
+
+  const navRoot = useSelector<FormState, Content>(
+    (state) => state.navroot?.data?.navroot,
+  );
+
+  const has_intranet_header = useLiveData<
+    SiteHeaderSettings['has_intranet_header']
+  >(content, 'voltolighttheme.header', 'has_intranet_header');
+
+  return (
+    <>
+      <SlotRenderer name="aboveHeader" content={content} navRoot={navRoot} />
+      <header
+        className={cx('header-wrapper', {
+          'intranet-header': has_intranet_header,
+        })}
+      >
+        <Container layout>
+          {has_intranet_header ? (
+            <IntranetHeader pathname={pathname} content={content} />
+          ) : (
+            <InternetHeader pathname={pathname} content={content} />
+          )}
+        </Container>
+      </header>
+      <SlotRenderer name="belowHeader" content={content} navRoot={navRoot} />
+    </>
+  );
+};
+
+export default Header;

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,85 @@
+// SemanticUI-free pre-@plone/components
+import { defineMessages, useIntl } from 'react-intl';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Link } from 'react-router-dom';
+import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import type { SiteHeaderSettings } from '../../types';
+import type { Content } from '@plone/types';
+
+const messages = defineMessages({
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
+  logoOf: {
+    id: 'Logo of',
+    defaultMessage: 'Logo of',
+  },
+});
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  navroot: {
+    data: {
+      navroot: Content;
+    };
+  };
+  site: {
+    data: Content['@components']['site'];
+  };
+  form: {
+    global: Content;
+  };
+};
+
+const Logo = () => {
+  const intl = useIntl();
+  const site = useSelector<FormState, Content>((state) => state.site.data);
+  const navroot = useSelector<FormState, Content>(
+    (state) => state.navroot.data,
+  );
+  const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
+
+  const content = useSelector<FormState, Content>(
+    (state) => state.content.data,
+    shallowEqual,
+  );
+
+  const logo = useLiveData<SiteHeaderSettings['logo']>(
+    content,
+    'voltolighttheme.header',
+    'logo',
+  );
+
+  const logoSrc = logo?.data
+    ? `data:${logo['content-type']};base64,${logo.data}`
+    : flattenToAppURL(logo?.download);
+
+  const logoWidth = logo?.width || null;
+  const logoHeight = logo?.height || null;
+
+  return (
+    <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
+      <img
+        src={
+          logoSrc
+            ? logoSrc
+            : site['plone.site_logo']
+              ? flattenToAppURL(site['plone.site_logo'])
+              : LogoImage
+        }
+        width={logoWidth}
+        height={logoHeight}
+        alt={
+          intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
+        }
+      />
+    </Link>
+  );
+};
+
+export default Logo;

package/src/components/{Footer/FooterLogos.tsx → LogosContainer/LogosContainer.tsx}

@@ -1,33 +1,27 @@
-import type { Content } from '@plone/types';
-import isEmpty from 'lodash/isEmpty';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
-import { useSelector } from 'react-redux';
 import { Container } from '@plone/components';
+import cx from 'classnames';
+import type { SiteFooterSettings } from '../../types';
 
-type FormState = {
-  content: {
-    data: Content;
-  };
-  navroot: {
-    data: {
-      navroot: Content;
-    };
-  };
+type LogosContainerProps = {
+  logos: SiteFooterSettings['footer_logos'];
+  logos_size: SiteFooterSettings['footer_logos_size'];
+  logos_container_width: SiteFooterSettings['footer_logos_container_width'];
 };
 
-const FooterLogos = () => {
-  const navroot = useSelector<FormState, Content>(
-    (state) => state.navroot.data.navroot,
-  );
-  const logos = navroot?.footer_logos;
+const LogosContainer = (props: LogosContainerProps) => {
+  const { logos, logos_size, logos_container_width } = props;
 
   return (
-    <Container layout>
-      <ul className="footer-logos">
-        {!isEmpty(logos?.blocks)
-          ? logos.blocks_layout.items.map((itemId) => {
-              const logo = logos.blocks[itemId];
+    <Container className={cx({ [logos_container_width]: 1 })}>
+      <ul
+        className={cx('logos-container', {
+          [logos_size]: logos_size,
+        })}
+      >
+        {logos && Array.isArray(logos)
+          ? logos.map((logo) => {
               const logoInfo: {
                 hrefTitle: string;
                 href: string;
@@ -41,7 +35,7 @@ const FooterLogos = () => {
                 src: '',
                 srcAlt: '',
               };
-              if (logo?.href) {
+              if (logo?.href?.length > 0) {
                 logoInfo.hrefTitle = logo.href[0]['title'];
                 logoInfo.href = flattenToAppURL(logo.href[0]['@id']);
               }
@@ -49,17 +43,22 @@ const FooterLogos = () => {
                 logoInfo.logoHref = logo.logo[0]['@id'];
                 logoInfo.srcAlt = logo['alt'];
                 logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/${logo.logo[0].image_scales[logo.logo[0].image_field][0].download}`;
+              } else if (logo?.logo && logo.logo[0]) {
+                logoInfo.logoHref = logo.logo[0]['@id'];
+                logoInfo.srcAlt = logo['alt'];
+                logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/@@images/image`;
               }
 
               if (!logoInfo.src) return null;
 
               return (
-                <li className="item" key={logoInfo.href}>
+                <li className="item" key={logo['@id']}>
                   {/* @ts-ignore */}
                   <ConditionalLink
                     condition={logoInfo.href}
                     to={logoInfo.href}
                     title={logoInfo.hrefTitle || logoInfo.srcAlt}
+                    openLinkInNewTab={logo.openInNewTab}
                   >
                     <img src={logoInfo.src} alt={logoInfo.srcAlt} />
                   </ConditionalLink>
@@ -72,4 +71,4 @@ const FooterLogos = () => {
   );
 };
 
-export default FooterLogos;
+export default LogosContainer;

package/src/components/MobileNavigation/MobileNavigation.jsx

@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import cx from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-
+import doesNodeContainClick from '../../helpers/doesNodeContainClick';
+import isEmpty from 'lodash/isEmpty';
 import config from '@plone/volto/registry';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
@@ -61,6 +61,17 @@ const MenuItem = ({
     }
   }, [resetToRoot]);
 
+  const headerSettings = useSelector(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
+        ?.data,
+  );
+  const formData = useSelector((state) => state.form.global);
+
+  const has_intranet_header = !isEmpty(formData)
+    ? formData.has_intranet_header
+    : headerSettings?.has_intranet_header;
+
   return (
     <li className={section.url === pathname ? 'current' : ''}>
       <Link
@@ -79,19 +90,31 @@ const MenuItem = ({
         unmountOnExit
       >
         <div className="menu-drawer subsection">
-          <div className="search-header">
-            <div className="search-wrapper">
-              <div className="search">
-                <SearchWidget />
+          {!has_intranet_header ? (
+            <div className="search-header">
+              <div className="search-wrapper">
+                <div className="search">
+                  <SearchWidget />
+                </div>
               </div>
+
+              <button onClick={closeSubMenu}>
+                <Icon name={arrowLeftSVG} size="60px" />
+                <span>
+                  <FormattedMessage {...messages.back} />
+                </span>
+              </button>
+            </div>
+          ) : (
+            <div>
+              <button onClick={closeSubMenu}>
+                <Icon name={arrowLeftSVG} size="60px" />
+                <span>
+                  <FormattedMessage {...messages.back} />
+                </span>
+              </button>
             </div>
-            <button onClick={closeSubMenu}>
-              <Icon name={arrowLeftSVG} size="60px" />
-              <span>
-                <FormattedMessage {...messages.back} />
-              </span>
-            </button>
-          </div>
+          )}
           <ul className="sections">
             <li className="header">{section.nav_title || section.title}</li>
             <li>
@@ -132,6 +155,16 @@ const MobileNavigation = (props) => {
   const items = useSelector((state) => state.navigation.items || []);
   const history = useHistory();
 
+  const headerSettings = useSelector(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
+        ?.data,
+  );
+  const formData = useSelector((state) => state.form.global);
+  const has_intranet_header = !isEmpty(formData)
+    ? formData.has_intranet_header
+    : headerSettings?.has_intranet_header;
+
   const Footer = props.MobileToolsFooter || MobileToolsFooter;
 
   const toggleMobileMenu = useCallback(() => {
@@ -218,13 +251,15 @@ const MobileNavigation = (props) => {
         classNames="menu-drawer"
       >
         <div className="menu-drawer">
-          <div className="search-header">
-            <div className="search-wrapper">
-              <div className="search">
-                <SearchWidget />
+          {!has_intranet_header && (
+            <div className="search-header">
+              <div className="search-wrapper">
+                <div className="search">
+                  <SearchWidget />
+                </div>
               </div>
             </div>
-          </div>
+          )}
           <ul className="sections">
             <li className="header">
               <Link

package/src/components/Navigation/Navigation.jsx

@@ -2,9 +2,10 @@
 
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { NavLink } from 'react-router-dom';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import doesNodeContainClick from '../../helpers/doesNodeContainClick';
 import { useIntl, defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
@@ -33,7 +34,17 @@ const Navigation = ({ pathname }) => {
   const navigation = useRef(null);
   const dispatch = useDispatch();
   const intl = useIntl();
-  const enableFatMenu = config.settings.enableFatMenu;
+  const headerSettings = useSelector(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
+        ?.data,
+  );
+  const formData = useSelector((state) => state.form.global);
+
+  const has_fat_menu =
+    !isEmpty(formData) && formData?.has_fat_menu
+      ? formData.has_fat_menu
+      : headerSettings?.has_fat_menu;
 
   const lang = useSelector((state) => state.intl.locale);
   const token = useSelector((state) => state.userSession.token, shallowEqual);
@@ -102,7 +113,7 @@ const Navigation = ({ pathname }) => {
         <ul className="desktop-menu">
           {items.map((item, index) => (
             <li key={item.url}>
-              {enableFatMenu ? (
+              {has_fat_menu ? (
                 <>
                   <button
                     onClick={() => openMenu(index)}

package/src/components/SearchWidget/IntranetSearchWidget.jsx

@@ -9,6 +9,7 @@ import { Form, Input } from 'semantic-ui-react';
 import { compose } from 'redux';
 import { PropTypes } from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
@@ -78,13 +79,24 @@ class IntranetSearchWidget extends Component {
    * @returns {undefined}
    */
   onSubmit(event) {
+    const searchURL =
+      this.props.site['kitconcept.intranet.external_search_url'];
     const path =
       this.props.pathname?.length > 0
         ? `&path=${encodeURIComponent(this.props.pathname)}`
         : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+
+    if (searchURL) {
+      window.open(
+        `${searchURL}?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
+        '_blank',
+        'noopener,noreferrer',
+      );
+    } else {
+      this.props.history.push(
+        `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
+      );
+    }
     // reset input value
     this.setState({
       text: '',
@@ -99,6 +111,8 @@ class IntranetSearchWidget extends Component {
    */
   render() {
     const { intl } = this.props;
+    const searchFieldPlaceholder =
+      this.props.site['kitconcept.intranet.search_field_placeholder'];
     return (
       <Form action="/search" onSubmit={this.onSubmit}>
         <Form.Field className="searchbox">
@@ -109,7 +123,14 @@ class IntranetSearchWidget extends Component {
             value={this.state.text}
             transparent
             autoComplete="off"
-            placeholder={intl.formatMessage(messages.placeholder)}
+            placeholder={
+              searchFieldPlaceholder
+                ? intl.formatMessage({
+                    id: searchFieldPlaceholder,
+                    defaultMessage: searchFieldPlaceholder,
+                  })
+                : intl.formatMessage(messages.placeholder)
+            }
             title={intl.formatMessage(messages.search)}
           />
           <button aria-label={intl.formatMessage(messages.search)}>
@@ -121,4 +142,10 @@ class IntranetSearchWidget extends Component {
   }
 }
 
-export default compose(withRouter, injectIntl)(IntranetSearchWidget);
+export default compose(
+  withRouter,
+  injectIntl,
+  connect((state, props) => ({
+    site: state.site.data,
+  })),
+)(IntranetSearchWidget);

package/src/components/SearchWidget/SearchWidget.jsx

@@ -8,7 +8,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import doesNodeContainClick from '../../helpers/doesNodeContainClick';
 
 const messages = defineMessages({
   search: {