[Feature #129799] Added Explore the data block

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import ExploreEprtrView from './View';
+import schema from './schema';
+import { connectBlockToProviderData } from 'volto-datablocks/hocs';
+
+const Edit = (props) => {
+  const { data = {}, block = null, selected = false, onChangeBlock } = props;
+
+  return (
+    <>
+      <ExploreEprtrView {...props} mode="edit" />
+
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default connectBlockToProviderData(Edit);

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Grid } from 'semantic-ui-react';
+import about from './images/about.png';
+import analyse from './images/analyse.png';
+import download from './images/download.png';
+import explore from './images/explore.png';
+
+import './styles.css';
+
+const View = (props) => {
+  return (
+    <Grid className="explore-eprtr" columns="12">
+      <Grid.Row>
+        <Grid.Column
+          className="explore-map"
+          widescreen="8"
+          largeScreen="8"
+          computer="8"
+          tablet="7"
+          mobile="12"
+        >
+          <img src={explore} alt="Explore the data" />
+        </Grid.Column>
+        <Grid.Column
+          className="description"
+          widescreen="4"
+          largeScreen="4"
+          computer="4"
+          tablet="5"
+          mobile="12"
+        >
+          <Link to="/analyse">
+            <div className="explore-tile">
+              <img src={analyse} alt="Analyse" />
+              <div>
+                <p className="title">ANALYSE</p>
+                <p>
+                  Find the biggest polluters and compare data across countries
+                </p>
+              </div>
+            </div>
+          </Link>
+          <Link to="/download">
+            <div className="explore-tile">
+              <img src={download} alt="Download" />
+              <div>
+                <p className="title">DOWNLOAD</p>
+                <p>Work with raw datasheets on your own choice of software</p>
+              </div>
+            </div>
+          </Link>
+          <Link to="/about">
+            <div className="explore-tile">
+              <img src={about} alt="About" />
+
+              <div>
+                <p className="title">ABOUT</p>
+                <p>New to this topic?</p>
+                <p>Understand the Industry portal</p>
+              </div>
+            </div>
+          </Link>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,22 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import ExploreEprtrEdit from './Edit';
+import ExploreEprtrView from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.explore_eprtr = {
+    id: 'explore_eprtr',
+    title: 'Explore eprtr',
+    icon: worldSVG,
+    group: 'eprtr_blocks',
+    view: ExploreEprtrView,
+    edit: ExploreEprtrEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

src/components/manage/Blocks/ExploreEprtr/schema.js

@@ -0,0 +1,17 @@
+const Schema = {
+  title: 'Explore the data',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+
+  properties: {},
+
+  required: [],
+};
+
+export default Schema;

src/components/manage/Blocks/ExploreEprtr/styles.css

@@ -0,0 +1,50 @@
+.ui.grid.explore-eprtr {
+  margin-left: -1rem !important;
+  margin-right: -1rem !important;
+}
+
+.ui.grid.explore-eprtr .column {
+  display: flex !important;
+  justify-content: center;
+}
+
+.ui.grid.explore-eprtr .explore-map {
+  margin-bottom: 1rem !important;
+}
+
+.explore-eprtr .description {
+  display: flex !important;
+  justify-content: space-between;
+}
+
+.explore-eprtr .description .explore-tile {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.explore-eprtr .description .explore-tile img {
+  margin-right: 1rem;
+}
+
+.explore-eprtr .description .explore-tile p {
+  margin-bottom: 0;
+  color: #4896B0;
+  font-size: 1.1em;
+}
+
+.explore-eprtr .description .explore-tile p.title {
+  margin-bottom: 0;
+  color: #00435C;
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-bottom: .2rem;
+}
+
+.explore-eprtr .description > a:hover .explore-tile img {
+  opacity: .9;
+}
+
+.explore-eprtr .description > a:hover .explore-tile p {
+  color: #00435C;
+}

src/config.js

@@ -108,19 +108,21 @@ import ListView from '~/components/manage/Blocks/DiscodataComponents/List/View';
 
 import BlocksWidget from '~/components/manage/Widgets/BlocksWidget';
 import QueryParametersListWidget from '~/components/manage/Blocks/DiscodataComponents/Widgets/QueryParametersListWidget';
-import packSVG from '@plone/volto/icons/pack.svg';
-import folderSVG from '@plone/volto/icons/folder.svg';
-import linkSVG from '@plone/volto/icons/link.svg';
-import listSVG from '@plone/volto/icons/content-listing.svg';
-import worldSVG from '@plone/volto/icons/world.svg';
 
+import installExploreEprtr from '~/components/manage/Blocks/ExploreEprtr';
 import {
   installTableau,
   installExpendableList,
   installFolderListing,
 } from 'volto-addons';
 import { installDiscodataSqlBuilder } from 'volto-datablocks/config';
 
+import packSVG from '@plone/volto/icons/pack.svg';
+import folderSVG from '@plone/volto/icons/folder.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import listSVG from '@plone/volto/icons/content-listing.svg';
+import worldSVG from '@plone/volto/icons/world.svg';
+
 // All your imports required for the config here BEFORE this line
 import '@plone/volto/config';
 
@@ -427,6 +429,7 @@ export default function applyConfig(config) {
   };
 
   return [
+    installExploreEprtr,
     installTableau,
     installExpendableList,
     installFolderListing,