change(header): added homepage and homepage_inverse views

- to be set on the homepage in order to get header menu to turn
  white when using the inverse option

src/components/theme/Homepage/HomePageInverseView.jsx

@@ -0,0 +1,60 @@
+/**
+ * Document view component.
+ * @module components/theme/View/HomePageInverseView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DefaultView } from '@plone/volto/components/';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+import { hasBlocksData } from '@plone/volto/helpers';
+
+/**
+ * Component to display the default view.
+ * @function HomePageInverseView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const HomePageInverseView = ({ content }) => {
+  return hasBlocksData(content) ? (
+    <>
+      <BodyClass className="homepage homepage-inverse" />
+      <DefaultView content={content} />
+    </>
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+HomePageInverseView.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 HomePageInverseView;

src/components/theme/Homepage/HomePageView.jsx

@@ -0,0 +1,60 @@
+/**
+ * Document view component.
+ * @module components/theme/View/HomePageView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DefaultView } from '@plone/volto/components/';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+import { hasBlocksData } from '@plone/volto/helpers';
+
+/**
+ * Component to display the default view.
+ * @function HomePageView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const HomePageView = ({ content }) => {
+  return hasBlocksData(content) ? (
+    <>
+      <BodyClass className="homepage" />
+      <DefaultView content={content} />
+    </>
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+HomePageView.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 HomePageView;

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

@@ -18,10 +18,10 @@ import { getNavigation } from '@plone/volto/actions';
 import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
 import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
 import { find } from 'lodash';
+import WhiteLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
 import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
-import { BodyClass } from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 import { compose } from 'recompose';
@@ -34,8 +34,8 @@ const EEAHeader = ({ pathname, token, items, history }) => {
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
-  const isHomePage = useSelector((state) => {
-    return state.content?.data?.['@type'] === 'Plone Site';
+  const isHomePageInverse = useSelector((state) => {
+    return state.content?.data?.layout === 'homepage_inverse_view';
   });
 
   const { eea } = config.settings;
@@ -66,7 +66,6 @@ const EEAHeader = ({ pathname, token, items, history }) => {
 
   return (
     <Header menuItems={items}>
-      {isHomePage && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
           <Image src={eeaFlag} alt="eea flag"></Image>
@@ -159,9 +158,11 @@ const EEAHeader = ({ pathname, token, items, history }) => {
       </Header.TopHeader>
       <Header.Main
         pathname={pathname}
+        inverted={isHomePageInverse ? true : false}
+        transparency={isHomePageInverse ? true : false}
         logo={
           <Logo
-            src={LogoImage}
+            src={isHomePageInverse ? WhiteLogoImage : LogoImage}
             title={eea.websiteTitle}
             alt={eea.organisationName}
             url={eea.logoTargetUrl}

src/index.js

@@ -4,12 +4,18 @@ import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manag
 import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS';
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
+import HomePageView from './components/theme/Homepage/HomepageView';
+import HomePageInverseView from './components/theme/Homepage/HomePageInverseView';
 
 const applyConfig = (config) => {
   config.settings.eea = {
     ...eea,
     ...(config.settings.eea || {}),
   };
+  config.views.layoutViews = {
+    homepage_view: HomePageView,
+    homepage_inverse_view: HomePageInverseView,
+  };
 
   // Apply accordion block customization
   if (config.blocks.blocksConfig.accordion) {