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

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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.8](https://github.com/eea/volto-eea-website-theme/compare/0.6.7...0.6.8)
+
+- 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.8",
   "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,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,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 '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
+import HomePageInverseView from '@eeacms/volto-eea-website-theme/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) {