Merge pull request #29 from eea/develop

Develop

README.md

@@ -3,7 +3,7 @@
 [![Release](https://img.shields.io/github/v/release/eea/advisory-board-frontend?sort=semver)](https://github.com/eea/advisory-board-frontend/releases)
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto%2Fadvisory-board-frontend%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto/job/advisory-board-frontend/job/master/lastBuild/display/redirect)
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto%2Fadvisory-board-frontend%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto/job/advisory-board-frontend/job/develop/lastBuild/display/redirect)
-[![Release pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto%2Fadvisory-board-frontend%2F0.18.0&build=last&subject=release%20v0.18.0%20pipeline)](https://ci.eionet.europa.eu/view/Github/job/volto/job/advisory-board-frontend/job/0.18.0/lastBuild/display/redirect/)
+[![Release pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto%2Fadvisory-board-frontend%2F0.19.0&build=last&subject=release%20v0.19.0%20pipeline)](https://ci.eionet.europa.eu/view/Github/job/volto/job/advisory-board-frontend/job/0.19.0/lastBuild/display/redirect/)
 
 
 ## Documentation

mrs.developer.json

@@ -238,5 +238,21 @@
     "branch": "develop",
     "develop": false,
     "path": "src"
+  },
+  "volto-hero-block": {
+    "url": "[email protected]:eea/volto-hero-block.git",
+    "https": "https://github.com/eea/volto-hero-block.git",
+    "package": "@eeacms/volto-hero-block",
+    "branch": "develop",
+    "develop": false,
+    "path": "src"
+  },
+  "volto-eea-website-theme": {
+    "url": "[email protected]:eea/volto-eea-website-theme.git",
+    "https": "https://github.com/eea/volto-eea-website-theme.git",
+    "package": "@eeacms/volto-eea-website-theme",
+    "branch": "develop",
+    "develop": false,
+    "path": "src"
   }
-}
+}

package.json

@@ -2,7 +2,7 @@
   "name": "advisory-board-frontend",
   "description": "A Volto-powered Plone frontend",
   "license": "MIT",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "scripts": {
     "start": "razzle start",
     "postinstall": "make omelette && make patches",

src/components/manage/Blocks/Hero/Edit.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import HeroEdit from '@eeacms/volto-hero-block/components/Blocks/Hero/Edit';
+
+const Edit = (props) => {
+  return (
+    <React.Fragment>
+      <BodyClass className="with-hero-block" />
+      <HeroEdit {...props} />
+    </React.Fragment>
+  );
+};
+
+export default Edit;

src/components/manage/Blocks/Hero/View.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Portal } from 'react-portal';
+import { BodyClass } from '@plone/volto/helpers';
+import HeroView from '@eeacms/volto-hero-block/components/Blocks/Hero/View';
+
+function IsomorphicPortal({ children }) {
+  const [isClient, setIsClient] = React.useState();
+  React.useEffect(() => setIsClient(true), []);
+
+  return isClient ? (
+    <Portal node={document.getElementById('page-header')}>{children}</Portal>
+  ) : (
+    children
+  );
+}
+
+const View = (props) => {
+  return (
+    <React.Fragment>
+      <BodyClass className="with-hero-block" />
+      <IsomorphicPortal>
+        <div className="ui container hero-block-container">
+          <HeroView {...props} />
+        </div>
+      </IsomorphicPortal>
+    </React.Fragment>
+  );
+};
+
+export default View;

src/components/manage/Blocks/Hero/index.js

@@ -0,0 +1,14 @@
+import HeroEdit from './Edit';
+import HeroView from './View';
+
+export default (config) => {
+  if (config.blocks.blocksConfig.hero) {
+    config.blocks.blocksConfig.hero = {
+      ...config.blocks.blocksConfig.hero,
+      edit: HeroEdit,
+      view: HeroView,
+    };
+  }
+
+  return config;
+};

src/components/manage/Blocks/Title/Edit.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import TitleEdit from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title/Edit';
+
+const Edit = (props) => {
+  return (
+    <React.Fragment>
+      <BodyClass className="with-title-block" />
+      <TitleEdit {...props} />
+    </React.Fragment>
+  );
+};
+
+export default Edit;

src/components/manage/Blocks/Title/View.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import TitleView from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title/View';
+
+const View = (props) => {
+  return (
+    <React.Fragment>
+      <BodyClass className="with-title-block" />
+      <TitleView {...props} />
+    </React.Fragment>
+  );
+};
+
+export default View;

src/components/manage/Blocks/Title/index.js

@@ -0,0 +1,14 @@
+import TitleEdit from './Edit';
+import TitleView from './View';
+
+export default (config) => {
+  if (config.blocks.blocksConfig.title) {
+    config.blocks.blocksConfig.title = {
+      ...config.blocks.blocksConfig.title,
+      edit: TitleEdit,
+      view: TitleView,
+    };
+  }
+
+  return config;
+};

src/components/manage/Blocks/index.js

@@ -0,0 +1,9 @@
+import installHeroBlock from './Hero';
+import installTitleBlock from './Title';
+
+export default function applyConfig(config) {
+  return [installHeroBlock, installTitleBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+}

src/components/theme/NewsletterForm/NewsletterForm.js

@@ -1,75 +1,11 @@
-import React, { useMemo } from 'react';
-import { Button, Checkbox, Form } from 'semantic-ui-react';
-import Logo from './Logo.png';
+import React from 'react';
+import newsLetterFormHTML from './newsLetterFormHTML'
 
-import './newsletterForm.less';
+const markup = { __html: newsLetterFormHTML };
 
 const NewsletterForm = (props) => {
-  const query = useMemo(() => new URLSearchParams(props.location.search), [
-    props.location.search,
-  ]);
-  const email = query.get('email');
-
-  const handleSubmit = (event) => {
-    const form = event.target;
-    const data =
-      form.checkboxPrivacy?.checked === true
-        ? {
-            email,
-            firstName: form.firstName?.value,
-            lastName: form.lastName?.value,
-            organization: form.organization?.value,
-            checkboxPrivacy: form.checkboxPrivacy?.checked,
-            checkboxNewsletter: form.checkboxNewsletter?.checked,
-          }
-        : 'checkbox not selected';
-    return data;
-  };
-
   return (
-    <div className="newsletterFormPage">
-      <a href="/">
-        <img className="newsletterLogo" src={Logo} alt="logo"></img>
-      </a>
-      <p>
-        Get the latest information about the European Scientific Advisory Board
-        on Climate Change
-      </p>
-      <hr style={{ width: '100%' }} />
-      <Form onSubmit={handleSubmit}>
-        <Form.Field>
-          <p className="required">First Name</p>
-          <input name="firstName" required />
-        </Form.Field>
-        <Form.Field>
-          <p className="required">Last Name</p>
-          <input name="lastName" required />
-        </Form.Field>
-        <Form.Field>
-          <p className="required">Organization</p>
-          <input name="organization" required />
-        </Form.Field>
-        <Form.Field>
-          <Checkbox
-            className="checkboxPrivacy"
-            name="checkboxPrivacy"
-            label="I agree to ESABCC’s Privacy Policy"
-          />
-        </Form.Field>
-        <Form.Field>
-          <Checkbox
-            name="checkboxNewsletter"
-            label="I agree to have my response to ESABCC newsletters tracked (for example opned newsletter, link clicks, city location)"
-          />
-        </Form.Field>
-        <Form.Field>
-          <a href="/">Link to Privacy Policy</a>
-        </Form.Field>
-        <Button className="newsletterButton" type="submit">
-          Subscribe
-        </Button>
-      </Form>
-    </div>
+      <div dangerouslySetInnerHTML={markup} ></div>
   );
 };
 

src/config.js

@@ -16,7 +16,10 @@
 // All your imports required for the config here BEFORE this line
 import '@plone/volto/config';
 
+import installBlocks from './components/manage/Blocks';
+
 export default function applyConfig(config) {
   // Add here your project's configuration here by modifying `config` accordingly
-  return config;
+
+  return [installBlocks].reduce((acc, apply) => apply(acc), config);
 }

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

@@ -351,7 +351,7 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
                 </Dropdown>
               </div> */}
               <div className="search-ab">
-                <SearchWidget pathname={pathname} />
+                <SearchWidget pathname="" />
               </div>
               <Header.BurgerAction
                 className={`mobile ${burger} ${