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

package/CHANGELOG.md

@@ -4,8 +4,41 @@ 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)
+
+#### [0.6.6](https://github.com/eea/volto-eea-website-theme/compare/0.6.5...0.6.6)
+
+> 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)
+
 #### [0.6.5](https://github.com/eea/volto-eea-website-theme/compare/0.6.4...0.6.5)
 
+> 3 June 2022
+
+- fix(tags): Replace customizations of volto-widgets-view with config r… [`#32`](https://github.com/eea/volto-eea-website-theme/pull/32)
 - fix(tags): Replace customizations of volto-widgets-view with config registry [`8f8c6fc`](https://github.com/eea/volto-eea-website-theme/commit/8f8c6fcdc6d48a56fbb35db781432390a703a215)
 
 #### [0.6.4](https://github.com/eea/volto-eea-website-theme/compare/0.6.3...0.6.4)

package/package.json

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

@@ -8,60 +8,151 @@ import ccaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/
 import copernicusLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/copernicus.svg';
 import industryLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
 import marineLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
+import eionetLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
+import eeaLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea.svg';
 
 // TODO: to be consolidated with headerLinks
-export const partnerWebsites = [
-  {
-    link: 'https://biodiversity.europa.eu/',
-    src: biseLogo,
-    alt: 'Biodiversity',
-  },
-  {
-    link: 'https://climate-energy.eea.europa.eu/',
-    src: energyLogo,
-    alt: 'Climate and energy in the EU',
-  },
-  {
-    link: 'https://insitu.copernicus.eu/',
-    src: insituLogo,
-    alt: 'Copernicus in situ',
-  },
-  {
-    link: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
-    src: ipchemLogo,
-    alt: 'Information platform for chemical monitoring',
-  },
-  {
-    link: 'https://water.europa.eu/freshwater',
-    src: freshwaterLogo,
-    alt: 'WISE freshwater',
-  },
-  {
-    link: 'https://forest.eea.europa.eu/',
-    src: fiseLogo,
-    alt: 'Forest information system for europe',
-  },
-  {
-    link: 'https://climate-adapt.eea.europa.eu/',
-    src: ccaLogo,
-    alt: 'Climate adapt',
-  },
-  {
-    link: 'https://land.copernicus.eu/',
-    src: copernicusLogo,
-    alt: 'Copernicus land monitoring service',
-  },
-  {
-    link: 'https://industry.eea.europa.eu/',
-    src: industryLogo,
-    alt: 'European industrial emissions portal',
-  },
-  {
-    link: 'https://water.europa.eu/marine',
-    src: marineLogo,
-    alt: 'WISE marine',
-  },
-];
+// Footer.jsx config options
+export const footerOpts = {
+  header: 'EEA information systems',
+  logosHeader: 'Managed by',
+  contactHeader: 'Contact Us',
+  actions: [
+    {
+      title: 'Login',
+      link: '/login',
+    },
+    {
+      link: '/sitemap',
+      title: 'Sitemap',
+    },
+    {
+      link: '/privacy',
+      title: 'Privacy',
+    },
+    {
+      link: '/copyright',
+      title: 'Copyright',
+      copy: true,
+    },
+  ],
+  sites: [
+    {
+      link: 'https://biodiversity.europa.eu/',
+      src: biseLogo,
+      alt: 'Biodiversity',
+    },
+    {
+      link: 'https://climate-energy.eea.europa.eu/',
+      src: energyLogo,
+      alt: 'Climate and energy in the EU',
+    },
+    {
+      link: 'https://insitu.copernicus.eu/',
+      src: insituLogo,
+      alt: 'Copernicus in situ',
+    },
+    {
+      link: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
+      src: ipchemLogo,
+      alt: 'Information platform for chemical monitoring',
+    },
+    {
+      link: 'https://water.europa.eu/freshwater',
+      src: freshwaterLogo,
+      alt: 'WISE freshwater',
+    },
+    {
+      link: 'https://forest.eea.europa.eu/',
+      src: fiseLogo,
+      alt: 'Forest information system for europe',
+    },
+    {
+      link: 'https://climate-adapt.eea.europa.eu/',
+      src: ccaLogo,
+      alt: 'Climate adapt',
+    },
+    {
+      link: 'https://land.copernicus.eu/',
+      src: copernicusLogo,
+      alt: 'Copernicus land monitoring service',
+    },
+    {
+      link: 'https://industry.eea.europa.eu/',
+      src: industryLogo,
+      alt: 'European industrial emissions portal',
+    },
+    {
+      link: 'https://water.europa.eu/marine',
+      src: marineLogo,
+      alt: 'WISE marine',
+    },
+  ],
+  managedBy: [
+    {
+      link: 'https://www.eea.europa.eu/',
+      src: eeaLogo,
+      alt: 'EEA Logo',
+      className: 'site logo',
+      columnSize: {
+        mobile: 6,
+        tablet: 12,
+        computer: 5,
+      },
+    },
+    {
+      link: 'https://www.eionet.europa.eu/',
+      src: eionetLogo,
+      alt: 'EIONET Logo',
+      className: 'eionet logo',
+      columnSize: {
+        mobile: 6,
+        tablet: 12,
+        computer: 7,
+      },
+    },
+  ],
+  social: [
+    {
+      name: 'twitter',
+      icon: 'ri-twitter-fill',
+      link: 'https://twitter.com/euenvironment',
+    },
+    {
+      name: 'facebook',
+      icon: 'ri-facebook-box-fill',
+      link: 'https://www.facebook.com/European.Environment.Agency',
+    },
+    {
+      name: 'linkedin',
+      icon: 'ri-linkedin-fill',
+      link: 'https://www.linkedin.com/company/european-environment-agency',
+    },
+    {
+      name: 'youtube',
+      icon: 'ri-youtube-fill',
+      link: 'https://www.youtube.com/user/EEAvideos',
+    },
+    {
+      name: 'rss',
+      icon: 'ri-rss-fill',
+      link: '/subscription/news-feeds',
+    },
+  ],
+  contacts: [
+    {
+      icon: 'comment outline',
+      text: 'Ask your question',
+      link: '/contact-us',
+    },
+    {
+      icon: 'envelope outline',
+      text: 'Sign up to our newsletter',
+      link: '/newsletter',
+    },
+  ],
+  address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
+};
 
 export const globalHeaderPartnerLinks = {
   title: 'Environmental information systems',
@@ -101,64 +192,6 @@ export const globalHeaderPartnerLinks = {
   ],
 };
 
-export const globalActions = [
-  {
-    link: '/login',
-    title: 'CMS Login',
-  },
-  {
-    link: '/sitemap',
-    title: 'Sitemap',
-  },
-  {
-    link: '/privacy',
-    title: 'Privacy',
-  },
-  {
-    link: '/copyright',
-    title: 'Copyright',
-    copy: true,
-  },
-];
-
-export const socialActions = [
-  {
-    name: 'twitter',
-    link: 'https://twitter.com/euenvironment',
-  },
-  {
-    name: 'facebook',
-    link: 'https://www.facebook.com/European.Environment.Agency',
-  },
-  {
-    name: 'linkedin',
-    link: 'https://www.linkedin.com/company/european-environment-agency',
-  },
-  {
-    name: 'youtube',
-    link: 'https://www.youtube.com/user/EEAvideos',
-  },
-  {
-    name: 'rss',
-    link: '/subscription/news-feeds',
-  },
-];
-
-export const footerActions = [
-  {
-    icon: 'comment outline',
-    text: 'Ask your question',
-    link: '/contact-us',
-  },
-  {
-    icon: 'envelope outline',
-    text: 'Sign up to our newsletter',
-    link: '/newsletter',
-  },
-];
-
-export const address = 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00';
-
 export const languages = [
   { name: 'Български', code: 'bg' },
   { name: 'čeština', code: 'cs' },

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/Footer/Footer.jsx

@@ -5,68 +5,15 @@
 
 import React from 'react';
 import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
-import { Grid, Image } from 'semantic-ui-react';
-import { Link } from 'react-router-dom';
-
-import EIONETLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EIONETLogo.png';
-import EEALogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EEA-Logo-white.svg';
-
 import config from '@plone/volto/registry';
 
 const Footer = (props) => {
   const { eea } = config.settings;
-
   return (
     <EEAFooter>
-      <EEAFooter.Header>The EEA also contributes to</EEAFooter.Header>
-      <EEAFooter.Sites sites={config.settings.eea.partnerWebsites} />
-
-      <EEAFooter.SubFooter>
-        <div className="subfooter">
-          <Grid>
-            <Grid.Column mobile={6} tablet={7} computer={8}>
-              <div className="item">
-                <div className="site logo">
-                  <Link to="/">
-                    <Image src={EEALogo} alt="EEA Logo"></Image>
-                  </Link>
-                  <p className="description">An agency of the European Union</p>
-                </div>
-
-                <div className="eionet logo">
-                  <a href="https://www.eionet.europa.eu/">
-                    <Image src={EIONETLogo} alt="EIONET Logo"></Image>
-                  </a>
-                  <p className="description">
-                    European Environment
-                    <br />
-                    Information and
-                    <br />
-                    Observation Network
-                  </p>
-                </div>
-              </div>
-            </Grid.Column>
-            <Grid.Column mobile={6} tablet={5} computer={4}>
-              <div className="item">
-                <EEAFooter.Contact
-                  contacts={eea.footerActions}
-                  header="Contact Us"
-                  address={eea.address}
-                />
-                <EEAFooter.Social social={eea.socialActions} />
-              </div>
-            </Grid.Column>
-          </Grid>
-          <Grid>
-            <Grid.Row>
-              <Grid.Column>
-                <EEAFooter.Actions actions={eea.globalActions} />
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </div>
-      </EEAFooter.SubFooter>
+      <EEAFooter.Header>{eea.footerOpts.header}</EEAFooter.Header>
+      <EEAFooter.Sites sites={eea.footerOpts.sites} />
+      <EEAFooter.SubFooter {...eea.footerOpts} />
     </EEAFooter>
   );
 };

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,18 +4,34 @@ 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) {
     config.blocks.blocksConfig.accordion.semanticIcon = 'ri-arrow-down-s-line';
   }
 
+  // Apply tabs block customization
+  if (config.blocks.blocksConfig.tabs_block) {
+    if (config.blocks.blocksConfig.tabs_block.templates.accordion) {
+      config.blocks.blocksConfig.tabs_block.templates.accordion.semanticIcon = {
+        opened: 'ri-arrow-up-s-line',
+        closed: 'ri-arrow-down-s-line',
+      };
+    }
+  }
+
   // Description block custom CSS
   config.blocks.blocksConfig.description.className =
     'documentDescription eea callout';