@eeacms/volto-eea-website-theme 0.6.7 → 0.6.10

package/CHANGELOG.md

@@ -4,8 +4,39 @@ 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).
 
+#### [0.6.10](https://github.com/eea/volto-eea-website-theme/compare/0.6.9...0.6.10)
+
+- Use window.searchContext.resetSearch for search widget [`#41`](https://github.com/eea/volto-eea-website-theme/pull/41)
+- change(header): add homepage class also on edit page [`0a10847`](https://github.com/eea/volto-eea-website-theme/commit/0a108477a3a15f9d0e2172286837ddfd94e078fa)
+- Use window.searchContext.resetSearch [`c3a968b`](https://github.com/eea/volto-eea-website-theme/commit/c3a968b91646102dad461541a1501b93a653e2c9)
+- fix(header): homepage is now true only on view page [`a0618a7`](https://github.com/eea/volto-eea-website-theme/commit/a0618a74431a280c3ccb95597d7f771385fac2eb)
+
+#### [0.6.9](https://github.com/eea/volto-eea-website-theme/compare/0.6.8...0.6.9)
+
+> 14 June 2022
+
+- Add custom styles: Content Box [`#40`](https://github.com/eea/volto-eea-website-theme/pull/40)
+
+#### [0.6.8](https://github.com/eea/volto-eea-website-theme/compare/0.6.7...0.6.8)
+
+> 13 June 2022
+
+- change(theme): added homepage and homepage inverted pages [`#39`](https://github.com/eea/volto-eea-website-theme/pull/39)
+- Fix HomepageView typo [`41582a3`](https://github.com/eea/volto-eea-website-theme/commit/41582a39f8e84cd3ef62d9ef302798627e8350f1)
+- fix import to please jslint [`b4a6555`](https://github.com/eea/volto-eea-website-theme/commit/b4a655548600ef9b9c8ecdd156d0062d4b54d00e)
+- change(header): added homepage and homepage_inverse views [`6df68d7`](https://github.com/eea/volto-eea-website-theme/commit/6df68d7a592d623af76c1036c38d2c480fc6ce88)
+- Fifty shades of gray [`9deae59`](https://github.com/eea/volto-eea-website-theme/commit/9deae599dc0e1431727067b281c32a58c1ac544c)
+- Minimal search integration for Header popup [`14870df`](https://github.com/eea/volto-eea-website-theme/commit/14870df1b0d82d1e04955bfa8cc07c7b853737c6)
+- Customize eea-design-system HeaderSearchPopUp. Copied unchanged [`4c9306c`](https://github.com/eea/volto-eea-website-theme/commit/4c9306c6afe4c62cbc74f3510339c4a6dbbd210a)
+- Customize available colors in volto-block-style [`5c5adb5`](https://github.com/eea/volto-eea-website-theme/commit/5c5adb541b3e7d84daf110e9eab7ec7950e0e989)
+- change(theme): set draft bg to the content-area instead of the body area [`33be595`](https://github.com/eea/volto-eea-website-theme/commit/33be595a353afc570f8887c3bf55f6482c573fd8)
+- change(header): add homepage class to plone site [`c6f912b`](https://github.com/eea/volto-eea-website-theme/commit/c6f912b59f288e7ddb4679f2a3b7011c6ce02c8c)
+
 #### [0.6.7](https://github.com/eea/volto-eea-website-theme/compare/0.6.6...0.6.7)
 
+> 9 June 2022
+
+- change(footer): updated managed by grid sizes from footer.stories [`#38`](https://github.com/eea/volto-eea-website-theme/pull/38)
 - change(footer): updated managed by grid sizes from footer.stories #37 [`63b86be`](https://github.com/eea/volto-eea-website-theme/commit/63b86becdf5a501b133e3b4ff05b1ab0e6281f12)
 - change(footer): updated managed by grid sizes as se [`6be36fa`](https://github.com/eea/volto-eea-website-theme/commit/6be36fa6e8d8a2762fce65b71bb0e0c795a050a2)
 

package/package.json

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

package/src/components/theme/DraftBackground/draft.css

@@ -1,3 +1,3 @@
-body.view-viewview:not(.wf-state-published) {
+.view-viewview:not(.wf-state-published) .content-area {
   background-image: url('draft.png') !important;
 }

package/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;

package/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;

package/src/customizations/@eeacms/volto-block-style/StyleWrapper/EEAColorscheme.js

@@ -0,0 +1,38 @@
+const updatedEEAColorcheme = [
+  // Primary & shades
+  '#007B6C',
+  '#005248',
+  '#007B6C',
+  '#00A390',
+  '#00CCB4',
+  '#00F5D8',
+  '#85FFF1',
+  '#C8FFF8',
+  // Secondary & shades
+  '#004B7F',
+  '#003052',
+  '#004B7F',
+  '#006BB8',
+  '#0083E0',
+  '#0A99FF',
+  '#47B3FF',
+  '#A0D7FF',
+  // Tertiary & shades
+  '#2E3E4C',
+  '#3D5265',
+  '#4C677F',
+  '#6989A5',
+  '#8EA6C2',
+  '#ACCAE5',
+  '#DAE8F4',
+  // Black & White shades
+  '#000000',
+  '#323232',
+  '#67696b',
+  '#BCBEC0',
+  '#E6E7E8',
+  '#F9F9F9',
+  '#FFFFFF',
+];
+
+export default updatedEEAColorcheme;

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Container, Input } from 'semantic-ui-react';
+import { withRouter } from 'react-router-dom';
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+
+function HeaderSearchPopUp({ history, onClose, triggerRefs = [] }) {
+  const nodeRef = React.useRef();
+  const [text, setText] = React.useState('');
+
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  const onChangeText = (event, { value }) => {
+    setText(value);
+    event.preventDefault();
+  };
+
+  const onSubmit = (event) => {
+    history.push(`/en/advanced-search?q=${text}`);
+
+    if (window?.searchContext?.resetSearch) {
+      window.searchContext.resetSearch({ searchTerm: text });
+    }
+
+    onClose();
+    event.preventDefault();
+  };
+
+  return (
+    <form id="search-box" ref={nodeRef} method="get" onSubmit={onSubmit}>
+      <Container>
+        <div className="wrapper">
+          <Input
+            className="search"
+            onChange={onChangeText}
+            icon={{
+              className: 'ri-search-line',
+              link: true,
+              onClick: onSubmit,
+            }}
+            placeholder="Search..."
+            fluid
+          />
+        </div>
+      </Container>
+    </form>
+  );
+}
+
+export default withRouter(HeaderSearchPopUp);

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

@@ -18,12 +18,14 @@ 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 config from '@plone/volto/registry';
 import { compose } from 'recompose';
+import { BodyClass } from '@plone/volto/helpers';
 
 /**
  * EEA Specific Header component.
@@ -34,6 +36,19 @@ const EEAHeader = ({ pathname, token, items, history }) => {
     (state) => state.content.data?.['@components']?.translations?.items,
   );
 
+  const router_pathname = useSelector((state) => {
+    return state.router?.location?.pathname || '';
+  });
+
+  const isHomePageInverse = useSelector((state) => {
+    const layout = state.content?.data?.layout;
+    const has_home_layout = layout === 'homepage_inverse_view';
+    return (
+      has_home_layout &&
+      (pathname === router_pathname || router_pathname.endsWith('/edit'))
+    );
+  });
+
   const { eea } = config.settings;
   const width = useSelector((state) => state.screen?.width);
   const dispatch = useDispatch();
@@ -44,9 +59,9 @@ const EEAHeader = ({ pathname, token, items, history }) => {
 
   React.useEffect(() => {
     const { settings } = config;
-    const base = getBaseUrl(pathname);
-    if (!hasApiExpander('navigation', base)) {
-      dispatch(getNavigation(base, settings.navDepth));
+    const base_url = getBaseUrl(pathname);
+    if (!hasApiExpander('navigation', base_url)) {
+      dispatch(getNavigation(base_url, settings.navDepth));
     }
   }, [pathname, dispatch]);
 
@@ -62,6 +77,7 @@ const EEAHeader = ({ pathname, token, items, history }) => {
 
   return (
     <Header menuItems={items}>
+      {isHomePageInverse && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
           <Image src={eeaFlag} alt="eea flag"></Image>
@@ -154,9 +170,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}

package/src/index.js

@@ -4,13 +4,22 @@ 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 '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
+import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
 
 const applyConfig = (config) => {
+  // EEA specific settings
   config.settings.eea = {
     ...eea,
     ...(config.settings.eea || {}),
   };
 
+  // Homepage
+  config.views.layoutViews = {
+    homepage_view: HomePageView,
+    homepage_inverse_view: HomePageInverseView,
+  };
+
   // Apply accordion block customization
   if (config.blocks.blocksConfig.accordion) {
     config.blocks.blocksConfig.accordion.semanticIcon = 'ri-arrow-down-s-line';
@@ -45,8 +54,8 @@ const applyConfig = (config) => {
     },
   ];
 
+  // Custom CSS voltoCustom.css and Draft Background
   const appExtras = config.settings.appExtras || [];
-
   config.settings.appExtras = [
     ...appExtras,
     {
@@ -59,6 +68,64 @@ const applyConfig = (config) => {
     },
   ];
 
+  // Custom block styles
+  config.settings.pluggableStyles = [
+    ...(config.settings.pluggableStyles || []),
+    {
+      id: 'content-box-gray',
+      title: 'Content Box',
+      viewComponent: (props) => {
+        return (
+          <div className="content-box">
+            <div className="content-box-inner ui container">
+              {props.children}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: 'content-box-primary',
+      title: 'Content Box (primary)',
+      viewComponent: (props) => {
+        return (
+          <div className="content-box primary">
+            <div className="content-box-inner ui container">
+              {props.children}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: 'content-box-secondary',
+      title: 'Content Box (secondary)',
+      viewComponent: (props) => {
+        return (
+          <div className="content-box secondary">
+            <div className="content-box-inner ui container">
+              {props.children}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: 'content-box-tertiary',
+      title: 'Content Box (tertiary)',
+      viewComponent: (props) => {
+        return (
+          <div className="content-box tertiary">
+            <div className="content-box-inner ui container">
+              {props.children}
+            </div>
+          </div>
+        );
+      },
+    },
+  ];
+
+  // Custom blocks
   return [installCustomTitle].reduce((acc, apply) => apply(acc), config);
 };