@eeacms/volto-eea-website-theme 2.2.2 → 2.4.0

package/src/components/manage/Blocks/ContextNavigation/variations/Accordion.jsx

@@ -0,0 +1,179 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+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 Slugger from 'github-slugger';
+
+import { Icon, UniversalLink } 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',
+    defaultMessage: 'Navigation',
+  },
+});
+
+const AccordionNavigation = ({
+  navigation = {},
+  device,
+  isMenuOpenOnOutsideClick,
+}) => {
+  const { items = [], title, has_custom_name } = navigation;
+  const intl = useIntl();
+  const navOpen = ['mobile', 'tablet'].includes(device) ? false : true;
+  const [isNavOpen, setIsNavOpen] = React.useState(navOpen);
+  const [activeItems, setActiveItems] = React.useState({});
+
+  const onClickSummary = React.useCallback((e) => {
+    e.preventDefault();
+    setIsNavOpen((prev) => !prev);
+  }, []);
+
+  React.useEffect(() => {
+    if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
+  }, [isMenuOpenOnOutsideClick]);
+
+  const onKeyDownSummary = React.useCallback(
+    (e) => {
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        e.preventDefault();
+        onClickSummary(e);
+      }
+    },
+    [onClickSummary],
+  );
+
+  const renderItems = ({ item, level = 0 }) => {
+    const {
+      title,
+      href,
+      is_current,
+      is_in_path,
+      items: childItems,
+      type,
+    } = item;
+    const hasChildItems = childItems && childItems.length > 0;
+    const normalizedTitle = Slugger.slug(title);
+
+    const checkIfActive = () => {
+      return activeItems[href] !== undefined ? activeItems[href] : is_in_path;
+    };
+
+    const isActive = checkIfActive();
+
+    const handleTitleClick = () => {
+      setActiveItems((prev) => ({ ...prev, [href]: !isActive }));
+    };
+
+    return (
+      <li
+        className={cx({
+          is_in_path,
+          'accordion-list-title': !hasChildItems,
+          'accordion-list-item': hasChildItems,
+        })}
+        key={href}
+      >
+        {hasChildItems ? (
+          <Accordion className="default">
+            <Accordion.Title
+              active={isActive}
+              as={'button'}
+              aria-expanded={isActive}
+              onClick={handleTitleClick}
+              aria-controls={`accordion-content-${normalizedTitle}`}
+              id={`accordion-title-${normalizedTitle}`}
+            >
+              <span className="title-text">{title}</span>
+              <Icon name={isActive ? upIcon : downIcon} size="32px" />
+            </Accordion.Title>
+            <Accordion.Content
+              active={isActive}
+              id={`accordion-content-${normalizedTitle}`}
+              aria-labelledby={`accordion-title-${normalizedTitle}`}
+              role="region"
+            >
+              <ul className="accordion-list">
+                {childItems.map((child) =>
+                  renderItems({ item: child, level: level + 1 }),
+                )}
+              </ul>
+            </Accordion.Content>
+          </Accordion>
+        ) : (
+          <UniversalLink
+            href={flattenToAppURL(href)}
+            className={cx(`title-link contenttype-${type}`, {
+              current: is_current,
+              in_path: is_in_path,
+            })}
+          >
+            {title}
+          </UniversalLink>
+        )}
+      </li>
+    );
+  };
+
+  return items.length ? (
+    <>
+      <nav className="context-navigation">
+        <details open={isNavOpen}>
+          {/* eslint-disable-next-line */}
+          <summary
+            className="context-navigation-header accordion-header"
+            onClick={onClickSummary}
+            onKeyDown={onKeyDownSummary}
+          >
+            {has_custom_name ? title : intl.formatMessage(messages.navigation)}
+            <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+          </summary>
+          <ul className="context-navigation-list accordion-list">
+            {items.map((item) => renderItems({ item }))}
+          </ul>
+        </details>
+      </nav>
+    </>
+  ) : null;
+};
+
+AccordionNavigation.propTypes = {
+  /**
+   * Navigation tree returned from @contextnavigation restapi endpoint
+   */
+  navigation: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+        href: PropTypes.string,
+        is_current: PropTypes.bool,
+        is_in_path: PropTypes.bool,
+        items: PropTypes.array,
+        type: PropTypes.string,
+      }),
+    ),
+    has_custom_name: PropTypes.bool,
+    title: PropTypes.string,
+  }),
+};
+
+export default compose(
+  withRouter,
+  withContentNavigation,
+  (WrappedComponent) => (props) =>
+    withEEASideMenu(WrappedComponent)({
+      ...props,
+      shouldRender: props.navigation?.items?.length > 0,
+    }),
+)(AccordionNavigation);

package/src/components/manage/Blocks/ContextNavigation/variations/Default.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+
+const Default = (props) => {
+  const { params } = props;
+  return <ConnectedContextNavigation params={params} />;
+};
+
+export default Default;

package/src/components/manage/Blocks/ContextNavigation/variations/index.js

@@ -0,0 +1,18 @@
+import Accordion from './Accordion';
+import Default from './Default';
+
+const contextBlockVariations = [
+  {
+    id: 'default',
+    title: 'Listing (default)',
+    view: Default,
+    isDefault: true,
+  },
+  {
+    id: 'accordion',
+    title: 'Accordion',
+    view: Accordion,
+  },
+];
+
+export default contextBlockVariations;

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -11,8 +11,8 @@ import { ReactEditor, Editable, Slate, withReact } from 'slate-react';
 import config from '@plone/volto/registry';
 import { SidebarPortal } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
+import View from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title/View';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import schema from './schema';
 
 const messages = defineMessages({
@@ -165,8 +165,9 @@ export const TitleBlockEdit = (props) => {
   return (
     <React.Fragment>
       <BodyClass className="with-title-block" />
-      <BannerView
+      <View
         {...props}
+        isEditMode={true}
         banner={{
           title: {
             view: (
@@ -185,7 +186,7 @@ export const TitleBlockEdit = (props) => {
         fluid
       />
       <SidebarPortal selected={props.selected}>
-        <InlineForm
+        <BlockDataForm
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
@@ -194,7 +195,9 @@ export const TitleBlockEdit = (props) => {
               [id]: value,
             });
           }}
+          onChangeBlock={props.onChangeBlock}
           formData={props.data}
+          block={props.block}
         />
       </SidebarPortal>
     </React.Fragment>

package/src/components/manage/Blocks/Title/View.jsx

@@ -4,36 +4,26 @@
  */
 
 import React from 'react';
-import { Portal } from 'react-portal';
-import PropTypes from 'prop-types';
-import { BodyClass } from '@plone/volto/helpers';
-
-import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
 
-function IsomorphicPortal({ children }) {
-  const [isClient, setIsClient] = React.useState();
-  React.useEffect(() => setIsClient(true), []);
-
-  return isClient ? (
-    <Portal node={document.getElementById('page-header')}>{children}</Portal>
-  ) : (
-    children
-  );
-}
+import PropTypes from 'prop-types';
+import { withBlockExtensions, BodyClass } from '@plone/volto/helpers';
+import DefaultTemplate from './variations/Default';
 
 /**
  * View title block class.
  * @class View
  * @extends Component
  */
-const View = (props) => (
-  <React.Fragment>
-    <BodyClass className="with-title-block" />
-    <IsomorphicPortal>
-      <BannerView {...props} />
-    </IsomorphicPortal>
-  </React.Fragment>
-);
+const View = (props = {}) => {
+  const { variation } = props;
+  const Renderer = variation?.view ?? DefaultTemplate;
+  return (
+    <>
+      <BodyClass className="with-title-block" />
+      <Renderer {...props} />
+    </>
+  );
+};
 
 /**
  * Property types.
@@ -44,4 +34,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default View;
+export default withBlockExtensions(View);

package/src/components/manage/Blocks/Title/index.js

@@ -1,11 +1,63 @@
 import Edit from './Edit';
 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 = {
     ...config.blocks.blocksConfig.title,
     edit: Edit,
     view: View,
+    variations: [
+      {
+        id: 'default',
+        title: 'Default',
+        view: DefaultTemplate,
+        isDefault: true,
+      },
+      {
+        id: 'web_report',
+        title: 'Web Report',
+        view: WebReport,
+        schemaEnhancer: ({ schema }) => {
+          const fields = schema.fieldsets[0].fields;
+          schema.fieldsets[0].fields = [
+            ...fields,
+            'content_type',
+            'hero_header',
+          ];
+
+          schema.properties.content_type = {
+            title: 'Content type name',
+            description:
+              'Add a custom content-type name, leave empty for default',
+          };
+          schema.properties.hero_header = {
+            title: 'Hero header size',
+            type: 'boolean',
+          };
+          return schema;
+        },
+      },
+      {
+        id: 'web_report_page',
+        title: 'Web Report Page',
+        view: WebReportPage,
+        schemaEnhancer: ({ schema }) => {
+          const fields = schema.fieldsets[0].fields;
+          schema.fieldsets[0].fields = [...fields, 'content_type'];
+
+          schema.properties.content_type = {
+            title: 'Content type name',
+            description:
+              'Add a custom content-type name, leave empty for default',
+          };
+          return schema;
+        },
+      },
+    ],
     copyrightPrefix: 'Image',
     sidebarTab: 1,
   };

package/src/components/manage/Blocks/Title/variations/Default.jsx

@@ -0,0 +1,43 @@
+/**
+ * View title block.
+ * @module components/manage/Blocks/Title/View
+ */
+
+import React from 'react';
+import { Portal } from 'react-portal';
+import PropTypes from 'prop-types';
+
+import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
+
+function IsomorphicPortal({ children }) {
+  const [isClient, setIsClient] = React.useState();
+  React.useEffect(() => setIsClient(true), []);
+
+  return isClient ? (
+    <Portal node={document.getElementById('page-header')}>{children}</Portal>
+  ) : (
+    children
+  );
+}
+
+const DefaultTemplate = (props) =>
+  props.isEditMode ? (
+    <BannerView {...props} />
+  ) : (
+    <React.Fragment>
+      <IsomorphicPortal>
+        <BannerView {...props} />
+      </IsomorphicPortal>
+    </React.Fragment>
+  );
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+DefaultTemplate.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default DefaultTemplate;

package/src/components/manage/Blocks/Title/variations/WebReport.jsx

@@ -0,0 +1,69 @@
+/**
+ * Web Report title block variation.
+ * @module components/manage/Blocks/Title/variations/WebReport
+ */
+
+import React from 'react';
+import { Portal } from 'react-portal';
+import PropTypes from 'prop-types';
+
+import { MaybeWrap } from '@plone/volto/components';
+import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
+import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
+import clsx from 'clsx';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+function IsomorphicPortal({ children }) {
+  const [isClient, setIsClient] = React.useState();
+  React.useEffect(() => setIsClient(true), []);
+
+  return isClient ? (
+    <Portal node={document.querySelector('.eea.header')}>{children}</Portal>
+  ) : (
+    children
+  );
+}
+
+const WebReport = (props) => {
+  return (
+    <MaybeWrap condition={!props.isEditMode} as={IsomorphicPortal}>
+      <BodyClass
+        className={clsx(
+          'homepage-inverse homepage-header light-header',
+          props.data.hero_header ? 'hero-header' : '',
+        )}
+      />
+      <BannerView
+        {...props}
+        data={{
+          ...props.data,
+          hideContentType: true,
+          aboveTitle: (
+            <div className="content-type">
+              {props.data.content_type || props.properties.type_title}
+            </div>
+          ),
+          belowTitle: (
+            <>
+              <Banner.Subtitle>
+                <span className="subtitle-light">{props.data.subtitle}</span>
+              </Banner.Subtitle>
+            </>
+          ),
+        }}
+      />
+    </MaybeWrap>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+WebReport.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default WebReport;

package/src/components/manage/Blocks/Title/variations/WebReportPage.jsx

@@ -0,0 +1,59 @@
+/**
+ * Web Report Page title block variation.
+ * @module components/manage/Title/variations/WebReport
+ */
+
+import React from 'react';
+import { Portal } from 'react-portal';
+import PropTypes from 'prop-types';
+
+import { MaybeWrap } from '@plone/volto/components';
+import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/View';
+import clsx from 'clsx';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+function IsomorphicPortal({ children }) {
+  const [isClient, setIsClient] = React.useState();
+  React.useEffect(() => setIsClient(true), []);
+
+  return isClient ? (
+    <Portal node={document.querySelector('.eea.header')}>{children}</Portal>
+  ) : (
+    children
+  );
+}
+
+const WebReportPage = (props) => {
+  return (
+    <MaybeWrap condition={!props.isEditMode} as={IsomorphicPortal}>
+      <BodyClass className={clsx('homepage-inverse light-header')} />
+      <BannerView
+        {...props}
+        data={{
+          ...props.data,
+          hideContentType: true,
+          aboveTitle: (
+            <>
+              <div className="content-type">
+                {props.data.content_type || props.properties.type_title}
+              </div>
+              <div className="subtitle">{props.data.subtitle}</div>
+            </>
+          ),
+        }}
+      />
+    </MaybeWrap>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+WebReportPage.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default WebReportPage;

package/src/components/manage/Blocks/Title/variations/styles.less

@@ -0,0 +1,28 @@
+.view-viewview.light-header .main.bar {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  margin-bottom: -160px;
+}
+//Gradient styles for web report
+.light-header .gradient {
+  background: linear-gradient(
+    0deg,
+    #ffffff,
+    rgba(255, 255, 255, 0.9) 30%,
+    rgba(46, 82, 114, 0.7) 70%,
+    rgba(14, 21, 26, 0.8) 100%
+  ) !important;
+}
+
+.ui.block.title .eea.banner .content {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.share-popup {
+  .actions {
+    display: flex;
+    flex-flow: row;
+  }
+}

package/src/components/theme/Banner/View.jsx

@@ -291,8 +291,12 @@ const View = (props) => {
           </>
         }
       >
-        {subtitle && <Banner.Subtitle>{subtitle}</Banner.Subtitle>}
+        {!props.data.aboveTitle && subtitle && (
+          <Banner.Subtitle>{subtitle}</Banner.Subtitle>
+        )}
+        {props.data.aboveTitle}
         <Title config={banner.title} properties={metadata} />
+        {props.data.belowTitle}
         <Banner.Metadata>
           <Banner.MetadataField
             type="type"

package/src/components/theme/SubsiteClass.jsx

@@ -14,8 +14,10 @@ const SubsiteClass = () => {
 
   return (
     <BodyClass
-      className={cx('subsite', `subsite-${subsite.subsite_css_class?.token}`, {
+      className={cx('subsite', {
         'subsite-root': isSubsiteRoot(location.pathname, subsite),
+        [`subsite-${subsite.subsite_css_class?.token}`]:
+          subsite.subsite_css_class?.token,
       })}
     />
   );

package/src/components/theme/WebReport/WebReportSectionView.jsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { DefaultView } from '@plone/volto/components/';
+import { Redirect } from 'react-router-dom';
+
+const WebReportSectionView = (props) => {
+  const { content, token } = props;
+  const history = useHistory();
+  const redirectUrl = React.useMemo(() => {
+    if (content) {
+      const items = content.items;
+      const firstItem = items?.[0];
+      return firstItem?.['@id'];
+    }
+  }, [content]);
+
+  useEffect(() => {
+    if (!token) {
+      if (isInternalURL(redirectUrl)) {
+        history.replace(flattenToAppURL(redirectUrl));
+      } else if (!__SERVER__ && redirectUrl) {
+        window.location.href = flattenToAppURL(redirectUrl);
+      }
+    }
+  }, [history, content, redirectUrl, token]);
+
+  if (__SERVER__ && redirectUrl && !token) {
+    return <Redirect to={redirectUrl} />;
+  }
+  return <DefaultView {...props} />;
+};
+
+WebReportSectionView.propTypes = {
+  content: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string,
+      }),
+    ),
+  }),
+};
+
+WebReportSectionView.defaultProps = {
+  content: null,
+};
+
+export default WebReportSectionView;

package/src/components/theme/Widgets/DateWidget.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
+
+export const DateWidget = ({ value, children, className }) => {
+  const lang = useSelector((state) => state.intl.locale);
+  const backendLang = toBackendLang(lang);
+  const locale =
+    backendLang === 'en' ? config.settings.dateLocale : backendLang;
+  const formatOptions = {
+    date: value,
+    format: {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+    },
+    locale,
+  };
+
+  return value ? (
+    <span className={cx(className, 'date', 'widget')}>
+      {children
+        ? children(formatDate(formatOptions))
+        : formatDate(formatOptions)}
+    </span>
+  ) : (
+    ''
+  );
+};