design-comuni-plone-theme 11.22.0 → 11.22.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 
 
+## [11.22.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.22.0...v11.22.1) (2024-09-09)
+
+
+### Bug Fixes
+
+* removed RemoveBodyClass component in favor of a customized BodyClass component ([61062d8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/61062d84041f52182c2d04716b0411673a98e1f9))
+
 ## [11.22.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.21.1...v11.22.0) (2024-09-05)
 
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.22.0",
+  "version": "11.22.1",
   "main": "src/index.js",
   "repository": {
     "type": "git",

package/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { BodyClass } from '@plone/volto/helpers';
-import { RemoveBodyClass } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import ScrollToTop from 'design-comuni-plone-theme/components/ItaliaTheme/ScrollToTop/ScrollToTop';
 import { SubsiteLoader } from 'volto-subsites';
 import config from '@plone/volto/registry';
@@ -28,7 +27,7 @@ const GenericAppExtras = (props) => {
       {isPublicUI && (
         <>
           <BodyClass className="public-ui" />
-          <RemoveBodyClass className="cms-ui" />
+          <BodyClass className="cms-ui" remove={true} />
         </>
       )}
       <ScrollToTop />

package/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx

@@ -11,10 +11,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import { Login } from '@plone/volto/components';
 import { Row, Col, Container } from 'design-react-kit';
-import {
-  RemoveBodyClass,
-  LoginAgidButtons,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Button } from 'design-react-kit';
 import { useLocation } from 'react-router-dom';
 import { getBaseUrl } from '@plone/volto/helpers';
@@ -72,7 +69,7 @@ const LoginAgid = (props) => {
         <div id="page-login">
           <Helmet title={intl.formatMessage(messages.login)} />
           <BodyClass className="public-ui" />
-          <RemoveBodyClass className="cms-ui" />
+          <BodyClass className="cms-ui" remove={true} />
           <Container className="view-wrapper py-5">
             <Row className="view-container">
               <Col xs={12} lg={{ size: 10, offset: 1 }}>

package/src/components/ItaliaTheme/Search/Search.jsx

@@ -24,7 +24,7 @@ import {
 import { Skiplink, SkiplinkItem } from 'design-react-kit';
 import { useLocation, useHistory } from 'react-router-dom';
 
-import { Helmet, flattenToAppURL } from '@plone/volto/helpers';
+import { Helmet, flattenToAppURL, BodyClass } from '@plone/volto/helpers';
 import { resetSubsite } from 'volto-subsites';
 
 import {
@@ -33,7 +33,6 @@ import {
   SearchTopics,
   SearchCTs,
   Icon,
-  RemoveBodyClass,
   SearchResultItem,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import {
@@ -727,7 +726,7 @@ const Search = () => {
         </Container>
       </div>
       {/*force remove body class for subsite search pages*/}
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
     </>
   );
 };

package/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx

@@ -13,10 +13,7 @@ import { BodyClass } from '@plone/volto/helpers';
 import { useLocation } from 'react-router-dom';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import {
-  LoginAgidButtons,
-  RemoveBodyClass,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 /**
  * unauthorized function.
@@ -58,7 +55,7 @@ const Unauthorized = (props) => {
   return (
     <div id="unauthorized-agid" className="view-wrapper">
       <BodyClass className="public-ui" />
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
 
       <Container className="view-wrapper py-5">
         {spidLoginUrl || spidLogin ? (

package/src/customizations/volto/helpers/BodyClass/BodyClass.jsx

@@ -0,0 +1,78 @@
+/**
+ * CUSTOMIZATIONS:
+ * - handle bodyclass removal
+ */
+import { Component, Children } from 'react';
+import PropTypes from 'prop-types';
+import withSideEffect from 'react-side-effect';
+
+/**
+ * @export
+ * @class BodyClass
+ * @extends {Component}
+ */
+class BodyClass extends Component {
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    if (this.props.children) {
+      return Children.only(this.props.children);
+    }
+    return null;
+  }
+}
+
+BodyClass.propTypes = {
+  children: PropTypes.element,
+  className: PropTypes.string,
+  remove: PropTypes.bool,
+};
+
+BodyClass.defaultProps = {
+  children: null,
+  className: null,
+  remove: false,
+};
+
+/**
+ * reducePropsToState
+ * @function reducePropsToState
+ * @param {*} propsList propsList
+ * @returns {List} classList
+ */
+function reducePropsToState(propsList) {
+  let classList = [];
+  propsList.forEach((props) => {
+    if (props.className) {
+      if (props.remove) {
+        classList = classList.filter((c) => c !== props.className);
+      } else {
+        classList = classList.concat(props.className.split(' '));
+      }
+    }
+  });
+  return classList;
+}
+
+/**
+ * handleStateChangeOnClient
+ * @function handleStateChangeOnClient
+ * @param {*} classList classList
+ * @returns {null} null
+ */
+function handleStateChangeOnClient(classList) {
+  document.body.className = '';
+  classList.forEach((className) => {
+    if (!document.body.classList.contains(className)) {
+      document.body.classList.add(className);
+    }
+  });
+}
+
+export default withSideEffect(
+  reducePropsToState,
+  handleStateChangeOnClient,
+)(BodyClass);