@eeacms/volto-eea-website-theme 0.6.6 → 0.6.9

package/CHANGELOG.md

@@ -4,10 +4,40 @@ 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.9](https://github.com/eea/volto-eea-website-theme/compare/0.6.8...0.6.9)
+
+- Add custom styles: Content Box [`724257a`](https://github.com/eea/volto-eea-website-theme/commit/724257a840ff52a4be525540272d7a4839ffab34)
+
+#### [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)
+
 #### [0.6.6](https://github.com/eea/volto-eea-website-theme/compare/0.6.5...0.6.6)
 
-- condition config of accordion only if found to avoid error [`21b9cd7`](https://github.com/eea/volto-eea-website-theme/commit/21b9cd7006aed894e0eac5aa4a4b370233b334ab)
-- Add customization for volto-tabs-block [`71878f4`](https://github.com/eea/volto-eea-website-theme/commit/71878f49e9e34f9fbab66c6b805dd9ff6e353b29)
+> 8 June 2022
+
+- condition config of accordion only if found to avoid error [`#36`](https://github.com/eea/volto-eea-website-theme/pull/36)
+- Add customization for volto-tabs-block [`#35`](https://github.com/eea/volto-eea-website-theme/pull/35)
+- change(footer): update footer implementation [`#34`](https://github.com/eea/volto-eea-website-theme/pull/34)
 - change(footer): update footer implementation to use subfooter section #33 [`e4cb3c0`](https://github.com/eea/volto-eea-website-theme/commit/e4cb3c042414ba5811924b40c532738da978fdbd)
 - change(footer): update footer implementation to use latest changes to the subfooter component [`efa23fe`](https://github.com/eea/volto-eea-website-theme/commit/efa23fecee0786c3d9a254c8115b3f28a8be5302)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "0.6.6",
+  "version": "0.6.9",
   "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/config.js

@@ -95,7 +95,7 @@ export const footerOpts = {
       alt: 'EEA Logo',
       className: 'site logo',
       columnSize: {
-        mobile: 12,
+        mobile: 6,
         tablet: 12,
         computer: 5,
       },
@@ -106,9 +106,9 @@ export const footerOpts = {
       alt: 'EIONET Logo',
       className: 'eionet logo',
       columnSize: {
-        mobile: 12,
+        mobile: 6,
         tablet: 12,
-        computer: 6,
+        computer: 7,
       },
     },
   ],

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,44 @@
+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}`);
+    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,6 +18,7 @@ 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';
@@ -33,6 +34,9 @@ const EEAHeader = ({ pathname, token, items, history }) => {
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
+  const isHomePageInverse = useSelector((state) => {
+    return state.content?.data?.layout === 'homepage_inverse_view';
+  });
 
   const { eea } = config.settings;
   const width = useSelector((state) => state.screen?.width);
@@ -154,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}

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);
 };