@eeacms/volto-eea-website-theme 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -4,6 +4,51 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.15.0](https://github.com/eea/volto-eea-website-theme/compare/1.14.1...1.15.0) - 2 June 2023
+
+#### :rocket: New Features
+
+- feat: can disable all actions from footer - refs #253198 [Teodor Voicu - [`ab52ee8`](https://github.com/eea/volto-eea-website-theme/commit/ab52ee818d4343add1ac641b1a7a2e1c76ce0946)]
+- feat(blocks): add body class option in layout settings block #138 from eea/layout-body-class [ichim-david - [`4409d1c`](https://github.com/eea/volto-eea-website-theme/commit/4409d1c7416ad143eafe578d55c2c9ef70433879)]
+- feat(blocks): add homepage class in layout settings block [kreafox - [`979ed1e`](https://github.com/eea/volto-eea-website-theme/commit/979ed1eae9253735ad20c4558c021a1a0ec267d6)]
+- feat(blocks): add body class option in layout settings block [kreafox - [`d401bd6`](https://github.com/eea/volto-eea-website-theme/commit/d401bd6651481c9e5a1fe626724d80bf7d3babed)]
+
+#### :nail_care: Enhancements
+
+- change(title): use portal type_title instead @type refs151851 [nileshgulia1 - [`aa38e44`](https://github.com/eea/volto-eea-website-theme/commit/aa38e4444f12cab2f80647774b3e4933053fade6)]
+- change(layout-block): removed css that hid the layout settings [David Ichim - [`1e26a94`](https://github.com/eea/volto-eea-website-theme/commit/1e26a94a01fcbc44f6e07c6fa60e5e43f9545788)]
+- change(layout): removed most used from layout block [David Ichim - [`31c901d`](https://github.com/eea/volto-eea-website-theme/commit/31c901d75d509d011269dee4224e0bec6b12bfe4)]
+- change(blocks): remove restriction in layout settings block [kreafox - [`c3b01f6`](https://github.com/eea/volto-eea-website-theme/commit/c3b01f60b84ccc8b4ae6446a2b607615a3546ceb)]
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- other: group restricted blocks in an array [Miu Razvan - [`b79680d`](https://github.com/eea/volto-eea-website-theme/commit/b79680dd4162a0ee316489d15c76eab274888f74)]
+- Bump to 1.15.0 [kreafox - [`48aa9d8`](https://github.com/eea/volto-eea-website-theme/commit/48aa9d8e8dd45bd1ca0a1a63b579ed3db77e7463)]
+### [1.14.1](https://github.com/eea/volto-eea-website-theme/compare/1.14.0...1.14.1) - 22 May 2023
+
+#### :rocket: New Features
+
+- feat(header): Make header aware of lang #151573 #133 from eea/multilingual-header [ichim-david - [`43156bf`](https://github.com/eea/volto-eea-website-theme/commit/43156bf949a424e94577461bebf7c1ed5090525e)]
+
+#### :bug: Bug Fixes
+
+- fix(DRAFT): Draft background appears on public pages - refs #251511 [dobri1408 - [`8505705`](https://github.com/eea/volto-eea-website-theme/commit/8505705fd194487bf70322518931e33d98602a01)]
+
+#### :nail_care: Enhancements
+
+- change(blocks):  moved most used block config within eea-website-theme [David Ichim - [`dc61722`](https://github.com/eea/volto-eea-website-theme/commit/dc61722a83d84a1f3c8ac198d231ccbe910bac65)]
+- change(blocks): moved layout settings block from volto-eea-policy #136 from eea/252559-policy-refactoring [ichim-david - [`02d29e0`](https://github.com/eea/volto-eea-website-theme/commit/02d29e0cb25327bdb83c1f4555adcc22844f89c6)]
+- change(blocks): moved layout settings block from volto-eea-policy to volto-eea-website-theme [David Ichim - [`4ef6f14`](https://github.com/eea/volto-eea-website-theme/commit/4ef6f1490472bbf2e8ee0174124a3248f16cd7f6)]
+
+#### :hammer_and_wrench: Others
+
+- added missing schema-utils.js file [David Ichim - [`ff1c052`](https://github.com/eea/volto-eea-website-theme/commit/ff1c052e2c04a078ca0c69bf971cf33277f1d1d4)]
+- remove console [Dobricean Ioan Dorian - [`82003cb`](https://github.com/eea/volto-eea-website-theme/commit/82003cb3e439ce203472335ec8bc600a5ee7548d)]
+- header multilingual [Dobricean Ioan Dorian - [`3eecd19`](https://github.com/eea/volto-eea-website-theme/commit/3eecd1939fad60716100df5d980060b29792678b)]
+- multilingual prop [Dobricean Ioan Dorian - [`6945c76`](https://github.com/eea/volto-eea-website-theme/commit/6945c76a9b48e98b3a90ad4f9c5db8fa762b6a6a)]
 ### [1.14.0](https://github.com/eea/volto-eea-website-theme/compare/1.13.0...1.14.0) - 10 April 2023
 
 #### :rocket: New Features
@@ -20,9 +65,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - change(icons): set link for remix icon set to our docusaurus [David Ichim - [`df81a4f`](https://github.com/eea/volto-eea-website-theme/commit/df81a4f5f5954c7da228e1e5b2b409af9d82518d)]
 
-#### :hammer_and_wrench: Others
-
-- Release 1.14.0 [Alin Voinea - [`88e08e6`](https://github.com/eea/volto-eea-website-theme/commit/88e08e6b15ba536e7f7c06131f594a157a91daa7)]
 ### [1.13.0](https://github.com/eea/volto-eea-website-theme/compare/1.12.0...1.13.0) - 27 March 2023
 
 #### :rocket: New Features
@@ -331,6 +373,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
+#### :hammer_and_wrench: Others
+
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsEdit.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EditSchema } from './schema';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import LayoutSettingsView from './LayoutSettingsView';
+
+const LayoutSettingsEdit = (props) => {
+  const schema = EditSchema();
+  return (
+    <>
+      <h3>Page layout settings</h3>
+      <LayoutSettingsView {...props} />
+      <SidebarPortal selected={props.selected}>
+        {props.selected && (
+          <BlockDataForm
+            title={schema.title}
+            schema={schema}
+            formData={props.data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default LayoutSettingsEdit;

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsView.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import { getVoltoStyles } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
+import cx from 'classnames';
+
+const LayoutSettingsView = (props) => {
+  const classNames = getVoltoStyles(props.data);
+  return <BodyClass className={cx(classNames)} />;
+};
+
+function propsAreEqual(prevProps, nextProps) {
+  return prevProps.data === nextProps.data;
+}
+
+export default React.memo(LayoutSettingsView, propsAreEqual);

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

@@ -0,0 +1,22 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import LayoutSettingsView from './LayoutSettingsView';
+import LayoutSettingsEdit from './LayoutSettingsEdit';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.layoutSettings = {
+    id: 'layoutSettings',
+    title: 'Layout settings',
+    icon: codeSVG,
+    group: 'common',
+    view: LayoutSettingsView,
+    edit: LayoutSettingsEdit,
+    schema: BlockSettingsSchema,
+    restricted: false,
+    mostUsed: false,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+  };
+
+  return config;
+};

package/src/components/manage/Blocks/LayoutSettings/schema.js

@@ -0,0 +1,38 @@
+import imageNarrowSVG from '@eeacms/volto-eea-website-theme/icons/image-narrow.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+
+export const ALIGN_INFO_MAP = {
+  narrow_view: [imageNarrowSVG, 'Narrow width'],
+  container_view: [imageFitSVG, 'Container width'],
+  wide_view: [imageWideSVG, 'Wide width'],
+};
+
+export const EditSchema = () => {
+  return {
+    title: 'Page layout settings',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['layout_size', 'body_class'],
+      },
+    ],
+    required: [],
+    properties: {
+      layout_size: {
+        widget: 'style_align',
+        title: 'Layout size',
+        actions: Object.keys(ALIGN_INFO_MAP),
+        actionsInfoMap: ALIGN_INFO_MAP,
+      },
+      body_class: {
+        title: 'Body class',
+        choices: [
+          ['homepage', 'Homepage'],
+          ['homepage-inverse', 'Homepage inverse'],
+        ],
+      },
+    },
+  };
+};

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

@@ -3,11 +3,9 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
-import { startCase } from 'lodash';
-import qs from 'querystring';
+import startCase from 'lodash/startCase';
 import { Icon } from 'semantic-ui-react';
 import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import {
@@ -62,7 +60,7 @@ const Title = ({ config = {}, properties }) => {
 };
 
 const View = (props) => {
-  const { banner = {}, intl, location, types = [] } = props;
+  const { banner = {}, intl } = props;
   const metadata = props.metadata || props.properties;
   const popupRef = useRef(null);
   const {
@@ -81,11 +79,6 @@ const View = (props) => {
   const copyrightPrefix =
     config.blocks.blocksConfig.title.copyrightPrefix || '';
 
-  // Set query parameters
-  const parameters = useMemo(
-    () => qs.parse(location.search.replace('?', '')) || {},
-    [location],
-  );
   // Set dates
   const getDate = useCallback(
     (hidden, key) => {
@@ -109,18 +102,7 @@ const View = (props) => {
   // Set image source
   const image = getImageSource(metadata['image']);
   // Get type
-  const type = useMemo(() => {
-    return (
-      types?.filter?.(
-        (type) =>
-          flattenToAppURL(type['@id']) ===
-          `/@types/${metadata['@type'] || parameters.type}`,
-      )[0]?.title ||
-      friendlyId(metadata['@type']) ||
-      metadata['@type'] ||
-      parameters.type
-    );
-  }, [types, metadata, parameters]);
+  const type = metadata.type_title || friendlyId(metadata['@type']);
 
   return (
     <Banner {...props} image={image}>

package/src/components/theme/DraftBackground/DraftBackground.jsx

@@ -11,19 +11,39 @@ import { flattenToAppURL } from '@plone/volto/helpers';
  * @returns
  */
 
-const checkIfNullOrUndefined = (value) => {
-  return value === undefined || value === null;
+const removeTrailingSlash = (str) => {
+  return str.replace(/\/+$/, '');
 };
 
+const checkIfPublished = (props) => {
+  //case 0: the state is not for the current content-type eg: Go to /contents from a page
+  if (props.contentId !== removeTrailingSlash(props.pathname)) return true;
+
+  //case 1 : review_state published
+  if (props?.review_state === 'published') return true;
+
+  //case 2: review_state null, but parent is published eg:Image in published folder
+  if (
+    !props?.review_state &&
+    props?.content?.parent?.review_state === 'published'
+  )
+    return true;
+
+  //case 3: review_state null, but there is no parent eg: PloneSite
+  if (
+    !props?.review_state &&
+    Object.keys(props?.content?.parent || {}).length === 0
+  )
+    return true;
+
+  //case 4: review_state null, and review state of parent is null, eg: Image in PloneSite
+  if (!props?.review_state && !props?.content?.parent?.review_state)
+    return true;
+  return false;
+};
 const DraftBackground = (props) => {
   let draftClass = 'wf-state-is-draft';
-  if (
-    (checkIfNullOrUndefined(props?.review_state) &&
-      props?.content?.parent?.review_state === 'published') ||
-    props?.review_state === 'published' ||
-    (checkIfNullOrUndefined(props?.review_state) &&
-      Object.keys(props?.content?.parent || {}).length === 0)
-  ) {
+  if (checkIfPublished(props)) {
     draftClass = '';
   }
   return draftClass ? <BodyClass className={draftClass} /> : '';

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

@@ -8,6 +8,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
 import config from '@plone/volto/registry';
+import isArray from 'lodash/isArray';
 
 const Footer = () => {
   const { eea } = config.settings;
@@ -28,7 +29,7 @@ const Footer = () => {
     shallowEqual,
   );
   // ZMI > portal_actions > footer_actions
-  const actions = footerActions.length
+  const actions = isArray(footerActions)
     ? footerActions.map((action) => ({
         title: action.title,
         link: flattenToAppURL(action.url),
@@ -36,7 +37,7 @@ const Footer = () => {
     : eea.footerOpts.actions;
 
   // ZMI > portal_actions > copyright_actions
-  const copyright = copyrightActions.length
+  const copyright = isArray(copyrightActions)
     ? copyrightActions.map((action) => ({
         title: action.title,
         site: action.title,
@@ -45,7 +46,7 @@ const Footer = () => {
     : eea.footerOpts.copyright;
 
   // ZMI > portal_actions > social_actions
-  const social = socialActions.length
+  const social = isArray(socialActions)
     ? socialActions.map((action) => ({
         name: action.id,
         icon: action.icon,
@@ -54,7 +55,7 @@ const Footer = () => {
     : eea.footerOpts.social;
 
   // ZMI > portal_actions > contact_actions
-  const contacts = contactActions.length
+  const contacts = isArray(contactActions)
     ? contactActions.map((action, idx) => ({
         text: action.title,
         icon: action.icon,

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

@@ -200,6 +200,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
       </Header.TopHeader>
       <Header.Main
         pathname={pathname}
+        isMultilingual={config.settings.isMultilingual}
         headerSearchBox={headerSearchBox}
         inverted={isHomePageInverse ? true : false}
         transparency={isHomePageInverse ? true : false}

package/src/helpers/index.js

@@ -1,6 +1,7 @@
 import superagent from 'superagent';
 import config from '@plone/volto/registry';
 import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
+// import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-theme/src/helpers/schema-utils';
 
 /**
  * Get a resource image/file with authenticated (if token exist) API headers

package/src/helpers/schema-utils.js

@@ -0,0 +1,67 @@
+import { cloneDeep } from 'lodash';
+import imageNarrowSVG from '@eeacms/volto-eea-website-theme/icons/image-narrow.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+export const ALIGN_INFO_MAP = {
+  narrow_width: [imageNarrowSVG, 'Narrow width'],
+  container_width: [imageFitSVG, 'Container width'],
+  wide_width: [imageWideSVG, 'Wide width'],
+  full: [imageFullSVG, 'Full width'],
+};
+
+export const addStylingFieldsetSchemaEnhancer = ({ schema }) => {
+  const applied = schema?.properties?.styles;
+
+  if (!applied) {
+    const resSchema = cloneDeep(schema);
+
+    resSchema.fieldsets.push({
+      id: 'styling',
+      fields: ['styles'],
+      title: 'Styling',
+    });
+    resSchema.properties.styles = {
+      widget: 'object',
+      title: 'Styling',
+      schema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: ['size'],
+          },
+        ],
+        properties: {
+          size: {
+            widget: 'style_align',
+            title: 'Section size',
+            actions: Object.keys(ALIGN_INFO_MAP),
+            actionsInfoMap: ALIGN_INFO_MAP,
+          },
+        },
+        required: [],
+      },
+    };
+    return resSchema;
+  }
+
+  return schema;
+};
+export const getVoltoStyles = (props) => {
+  // return an object with same key and value for cx class setting
+  const styles = props ? props : {};
+  const output = {};
+  for (const [key, value] of Object.entries(styles)) {
+    if (key === '@type') {
+      continue;
+    }
+    if (styles[key] === true) {
+      output[key] = key;
+    } else {
+      output[value] = value;
+    }
+  }
+  return output;
+};

package/src/icons/image-narrow.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13L11.9333 11V25L10 23H26L24.0667 25V11L26 13H10ZM26 11V18V21.5V23.5V25H10V11H26Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 31H29V29H7V31Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7H29V5H7V7Z"/>
+</svg>

package/src/index.js

@@ -1,6 +1,8 @@
 import * as eea from './config';
 import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation';
 import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title';
+import installLayoutSettingsBlock from '@eeacms/volto-eea-website-theme/components/manage/Blocks/LayoutSettings';
+import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS';
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
@@ -14,6 +16,12 @@ import voltoCustomMiddleware from './middleware/voltoCustom';
 import okMiddleware from './middleware/ok';
 import installSlate from './slate';
 
+const restrictedBlocks = [
+  '__grid', // Grid/Teaser block (kitconcept)
+  'imagesGrid',
+  'teaser',
+];
+
 const applyConfig = (config) => {
   // EEA specific settings
   config.settings.eea = {
@@ -32,6 +40,13 @@ const applyConfig = (config) => {
   // Disable tags on View
   config.settings.showTags = false;
 
+  // Disable some blocks
+  restrictedBlocks.forEach((block) => {
+    if (config.blocks.blocksConfig[block]) {
+      config.blocks.blocksConfig[block].restricted = true;
+    }
+  });
+
   // Enable Title block
   config.blocks.blocksConfig.title.restricted = false;
 
@@ -204,6 +219,48 @@ const applyConfig = (config) => {
     },
   ];
 
+  // layout settings
+  config = [installLayoutSettingsBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+
+  // Group
+  if (config.blocks.blocksConfig.group) {
+    config.blocks.blocksConfig.group.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
+  // Columns
+  if (config.blocks.blocksConfig.columnsBlock) {
+    config.blocks.blocksConfig.columnsBlock.mostUsed = true;
+    config.blocks.blocksConfig.columnsBlock.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
+  // Listing
+  if (config.blocks.blocksConfig.listing) {
+    config.blocks.blocksConfig.listing.title = 'Listing (Content)';
+    config.blocks.blocksConfig.listing.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
+  // Block chooser
+  config.blocks.blocksConfig.image.mostUsed = false;
+  config.blocks.blocksConfig.video.mostUsed = false;
+
+  // Divider
+  if (config.blocks.blocksConfig.dividerBlock) {
+    config.blocks.blocksConfig.dividerBlock.mostUsed = true;
+  }
+
+  // Call to Action
+  if (config.blocks.blocksConfig.callToActionBlock) {
+    config.blocks.blocksConfig.callToActionBlock.mostUsed = true;
+  }
+
+  // Accordion
+  if (config.blocks.blocksConfig.accordion) {
+    config.blocks.blocksConfig.accordion.mostUsed = true;
+  }
+
   // Custom blocks: Title
   return [installCustomTitle].reduce((acc, apply) => apply(acc), config);
 };