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

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/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -3,7 +3,7 @@
  * @module components/theme/Breadcrumbs/Breadcrumbs
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useLocation } from 'react-router';
@@ -32,10 +32,23 @@ const isContentRoute = (pathname) => {
 const Breadcrumbs = (props) => {
   const dispatch = useDispatch();
   const { items = [], root = '/' } = useSelector((state) => state?.breadcrumbs);
+  const content = useSelector((state) => state?.content?.data);
+
   // 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 sections = items.map((item) => ({
     title: item.title,
     href: item.url,
@@ -54,7 +67,12 @@ const Breadcrumbs = (props) => {
   return (
     <React.Fragment>
       <div id="page-header" />
-      <EEABreadcrumbs pathname={pathname} sections={sections} root={root} />
+      <EEABreadcrumbs
+        pathname={pathname}
+        sections={sections}
+        root={root}
+        linkLevels={linkLevels}
+      />
     </React.Fragment>
   );
 };

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -17,7 +17,6 @@ import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
-import { BodyClass } from '@plone/volto/helpers';
 
 import cx from 'classnames';
 import loadable from '@loadable/component';
@@ -43,10 +42,12 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
     const has_home_layout =
       layout === 'homepage_inverse_view' ||
       (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
+
     return (
       has_home_layout &&
       (removeTrailingSlash(pathname) === router_pathname ||
-        router_pathname.endsWith('/edit'))
+        router_pathname.endsWith('/edit') ||
+        router_pathname.endsWith('/add'))
     );
   });
 
@@ -75,7 +76,6 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
 
   return (
     <Header menuItems={items}>
-      {isHomePageInverse && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
           <Image src={eeaFlag} alt="European Union flag"></Image>

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -0,0 +1,190 @@
+/**
+ * Document view component.
+ * @module components/theme/View/DefaultView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Container as SemanticContainer,
+  Segment,
+  Grid,
+  Label,
+} from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+import { getSchema } from '@plone/volto/actions';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
+import { RenderBlocks } from '@plone/volto/components';
+
+import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
+import { useDispatch, shallowEqual, useSelector } from 'react-redux';
+
+import isEqual from 'lodash/isEqual';
+import AccordionContextNavigation from '@eeacms/volto-eea-website-theme/components/manage/Blocks/ContextNavigation/variations/Accordion';
+
+/**
+ * Component to display the default view.
+ * @function DefaultView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const DefaultView = (props) => {
+  const { content, location } = props;
+  const [hasLightLayout, setHasLightLayout] = React.useState(false);
+
+  React.useEffect(() => {
+    const updateLightLayout = () => {
+      if (__CLIENT__) {
+        setHasLightLayout(document.body.classList.contains('light-header'));
+      }
+    };
+
+    updateLightLayout();
+
+    if (__CLIENT__) {
+      const observer = new MutationObserver(updateLightLayout);
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+
+      return () => observer.disconnect();
+    }
+  }, []);
+
+  const { contextNavigationActions } = useSelector(
+    (state) => ({
+      contextNavigationActions: state.actions?.actions?.context_navigation,
+    }),
+    shallowEqual,
+  );
+
+  const navigation_paths = contextNavigationActions || [];
+  const path = getBaseUrl(location?.pathname || '');
+  const dispatch = useDispatch();
+  const { views } = config.widgets;
+  const contentSchema = useSelector((state) => state.schema?.schema);
+  const fieldsetsToExclude = [
+    'categorization',
+    'dates',
+    'ownership',
+    'settings',
+  ];
+  const fieldsets = contentSchema?.fieldsets.filter(
+    (fs) => !fieldsetsToExclude.includes(fs.id),
+  );
+
+  // TL;DR: There is a flash of the non block-based view because of the reset
+  // of the content on route change. Subscribing to the content change at this
+  // level has nasty implications, so we can't watch the Redux state for loaded
+  // content flag here (because it forces an additional component update)
+  // Instead, we can watch if the content is "empty", but this has a drawback
+  // since the locking mechanism inserts a `lock` key before the content is there.
+  // So "empty" means `content` is present, but only with a `lock` key, thus the next
+  // ugly condition comes to life
+  const contentLoaded = content && !isEqual(Object.keys(content), ['lock']);
+
+  React.useEffect(() => {
+    content?.['@type'] &&
+      !hasBlocksData(content) &&
+      dispatch(getSchema(content['@type'], location.pathname));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const matchingNavigationPath = navigation_paths.find((navPath) =>
+    path.includes(navPath.url),
+  );
+
+  // If the content is not yet loaded, then do not show anything
+  return contentLoaded ? (
+    hasBlocksData(content) ? (
+      <>
+        <Container id="page-document">
+          <RenderBlocks {...props} path={path} />
+        </Container>
+        {hasLightLayout && matchingNavigationPath && (
+          <AccordionContextNavigation
+            params={{
+              name: matchingNavigationPath.title,
+              no_thumbs: matchingNavigationPath.no_thumbs || true,
+              no_icons: matchingNavigationPath.no_icons || true,
+              root_path: matchingNavigationPath.url,
+              includeTop: matchingNavigationPath.includeTop || true,
+              bottomLevel: matchingNavigationPath.bottomLevel || 3,
+              topLevel: matchingNavigationPath.topLevel || 1,
+              currentFolderOnly:
+                matchingNavigationPath.currentFolderOnly || false,
+            }}
+          />
+        )}
+      </>
+    ) : (
+      <Container id="page-document">
+        {fieldsets?.map((fs) => {
+          return (
+            <div className="fieldset" key={fs.id}>
+              {fs.id !== 'default' && <h2>{fs.title}</h2>}
+              {fs.fields?.map((f, key) => {
+                let field = {
+                  ...contentSchema?.properties[f],
+                  id: f,
+                  widget: getWidget(f, contentSchema?.properties[f]),
+                };
+                let Widget = views?.getWidget(field);
+                return f !== 'title' ? (
+                  <Grid celled="internally" key={key}>
+                    <Grid.Row>
+                      <Label title={field.id}>{field.title}:</Label>
+                    </Grid.Row>
+                    <Grid.Row>
+                      <Segment basic>
+                        <Widget value={content[f]} />
+                      </Segment>
+                    </Grid.Row>
+                  </Grid>
+                ) : (
+                  <Widget key={key} value={content[f]} />
+                );
+              })}
+            </div>
+          );
+        })}
+      </Container>
+    )
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+DefaultView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default DefaultView;