@eeacms/volto-eea-map 2.0.6 → 2.0.7

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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).
 
+### [2.0.7](https://github.com/eea/volto-eea-map/compare/2.0.6...2.0.7) - 10 November 2023
+
+#### :rocket: New Features
+
+- feat: mobile toolbar [Miu Razvan - [`0c8d2fa`](https://github.com/eea/volto-eea-map/commit/0c8d2fa66d175f97f5bed3fbb26de5841fa71905)]
+- feat: use toolbar [Miu Razvan - [`d1c76bb`](https://github.com/eea/volto-eea-map/commit/d1c76bba44c7bf357276b908b00224a4d7837eae)]
+- feat: share option, design improvements [dana-cfc4 - [`33a0d5e`](https://github.com/eea/volto-eea-map/commit/33a0d5e4c386b8507cfba4a59ea73131256e25a8)]
+
+#### :bug: Bug Fixes
+
+- fix: same background colour for popups [dana-cfc4 - [`61e465f`](https://github.com/eea/volto-eea-map/commit/61e465f36a272ee76311665d1a249c070524741d)]
+- fix: volto version  16 [dana-cfc4 - [`abe9ac2`](https://github.com/eea/volto-eea-map/commit/abe9ac29e3657ff8773001d8a9e9b03f72c026a4)]
+- fix: display figure note [dana-cfc4 - [`7f3d58f`](https://github.com/eea/volto-eea-map/commit/7f3d58f9828b9a0fd43075aed2c76559a16bd8fe)]
+
+#### :house: Internal changes
+
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`0ee38a7`](https://github.com/eea/volto-eea-map/commit/0ee38a7bee84694a5e0230e2d17083fbc071f0c8)]
+- chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`8efeb44`](https://github.com/eea/volto-eea-map/commit/8efeb4423da70e421a88cabdeb559eb3613fb96e)]
+- chore: display legend for content type item, fix case when no note is set [dana-cfc4 - [`ae630a8`](https://github.com/eea/volto-eea-map/commit/ae630a88cffa2a8ef60e0bbfead392508b015497)]
+- chore: display figureNote [dana-cfc4 - [`19fa10c`](https://github.com/eea/volto-eea-map/commit/19fa10c92a96d8362af5fbe460085405c4bad517)]
+- chore: add toggle for more info -refs#257682 [dana-cfc4 - [`65d6b7b`](https://github.com/eea/volto-eea-map/commit/65d6b7ba7ae0a2aaf513c8ced0d2bb977e43ef1b)]
+- chore: add figure note and more info extra views, display legend for content type item -refs#257682 [dana-cfc4 - [`720ab02`](https://github.com/eea/volto-eea-map/commit/720ab022cd99947d71c5b598a1637b12255d17af)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #260203: make background_image required [laszlocseh - [`baa5c4f`](https://github.com/eea/volto-eea-map/commit/baa5c4fa2fe618af51df12d48b4512ecafc357a8)]
+- use toolbar from volto-embed [Miu Razvan - [`29b73fb`](https://github.com/eea/volto-eea-map/commit/29b73fb8378ca56b3634bf1f7d57ce69a242b18e)]
 ### [2.0.6](https://github.com/eea/volto-eea-map/compare/2.0.5...2.0.6) - 29 September 2023
 
 #### :house: Internal changes
@@ -19,7 +46,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4c6d141`](https://github.com/eea/volto-eea-map/commit/4c6d1413b67ffc3fe27a7d09dcc99ef98867cec9)]
 - test: Fix package.json scripts to use makefile [Alin Voinea - [`1cd6751`](https://github.com/eea/volto-eea-map/commit/1cd675118165d8631c41d35c00a8c902c7edd803)]
-- test: Fix eslint and yarn i18n [Alin Voinea - [`0184641`](https://github.com/eea/volto-eea-map/commit/018464116ba5b86b2c1e0a4ebc9b2fd95b772b66)]
 - i18n: Add en [Alin Voinea - [`1d29304`](https://github.com/eea/volto-eea-map/commit/1d293049a21e138fa933cd5ed9a04cceac1a5cff)]
 ### [2.0.5](https://github.com/eea/volto-eea-map/compare/2.0.4...2.0.5) - 23 August 2023
 
@@ -76,14 +102,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 2.0.0 [Alin Voinea - [`7be280d`](https://github.com/eea/volto-eea-map/commit/7be280d4809186e663f422687aca3c33dd732904)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`ba6ed22`](https://github.com/eea/volto-eea-map/commit/ba6ed22118406db979457384d4739cced2096137)]
 ### [1.0.2](https://github.com/eea/volto-eea-map/compare/1.0.1...1.0.2) - 21 July 2023
 
 #### :hammer_and_wrench: Others
 
 - Allow blocks in content type [Tiberiu Ichim - [`2ac09a6`](https://github.com/eea/volto-eea-map/commit/2ac09a613aba07f6cbaf42c386660f2d7d09bd13)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`403b4c0`](https://github.com/eea/volto-eea-map/commit/403b4c009e5aaded58203bc292ba3baa4631488b)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`aedb654`](https://github.com/eea/volto-eea-map/commit/aedb6544fd45b147a3385425aba46ffba108f5ca)]
 ### [1.0.1](https://github.com/eea/volto-eea-map/compare/1.0.0...1.0.1) - 22 June 2023
 
 #### :rocket: New Features
@@ -144,7 +167,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - chore: clear unused #254131 [andreiggr - [`ccec2ea`](https://github.com/eea/volto-eea-map/commit/ccec2eaab173c905cd4ea0190a9c6cfd630250f9)]
 - chore: clear block style #254131 [andreiggr - [`af500bc`](https://github.com/eea/volto-eea-map/commit/af500bc10a5f280eff0335f45bae1596d66a7e6b)]
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`76b29e5`](https://github.com/eea/volto-eea-map/commit/76b29e510f5156590723831a524bc39dfba6deba)]
 
 #### :hammer_and_wrench: Others
 
@@ -154,7 +176,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - * versions [andreiggr - [`6d9ff2b`](https://github.com/eea/volto-eea-map/commit/6d9ff2b26a236b6445678e3d84698d1c3c0826f4)]
 - add razzle-plugin-scss dep [andreiggr - [`d74cee5`](https://github.com/eea/volto-eea-map/commit/d74cee51d30c866afe55730e5b25e0bf11d2caea)]
 - volto-object-widget [andreiggr - [`18d0ed7`](https://github.com/eea/volto-eea-map/commit/18d0ed72c1ba7b0f7159a0eefc09ccea9acee5cb)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`5911d01`](https://github.com/eea/volto-eea-map/commit/5911d01f7f3bc79a2c834fab75a9a4ac05d2d042)]
 ### [0.1.32](https://github.com/eea/volto-eea-map/compare/0.1.31...0.1.32) - 20 February 2023
 
 #### :hammer_and_wrench: Others
@@ -162,7 +183,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - remove console.log [tedw87 - [`3aeb3e8`](https://github.com/eea/volto-eea-map/commit/3aeb3e8ec5474387f3cd22eb9b387c6681e17120)]
 - refactor code [tedw87 - [`6d7830e`](https://github.com/eea/volto-eea-map/commit/6d7830eb934f56c255eea5642bdefba30d892946)]
 - add Blossom basemap layer [tedw87 - [`5226ee2`](https://github.com/eea/volto-eea-map/commit/5226ee218df3401cf467afbc7a4d720dc30719e1)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`1dad5c6`](https://github.com/eea/volto-eea-map/commit/1dad5c6617096ff85223165a6dd2b1d5d7deea6a)]
 ### [0.1.31](https://github.com/eea/volto-eea-map/compare/0.1.30...0.1.31) - 11 November 2022
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -34,6 +34,8 @@ Sources (Data provenance) should be set on the visualization. To enable this, "E
     
 After this, sources can be added from the visualization edit interface. "Data Provenance" tab => "Add source"
 
+[EEA MAP](https://raw.githubusercontent.com/eea/volto-eea-map/master/docs/volto-eea-map.gif)
+
 ## Getting started
 
 ### Try volto-eea-map with Docker

package/RELEASE.md

@@ -20,9 +20,9 @@ You need to first install the [release-it](https://github.com/release-it/release
    ```
    npm install -g release-it
    ```
-   
+
 Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
-   
+
 Release-it is a tool that automates 4 important steps in the release process:
 
 1. Version increase in `package.json` ( increased from the current version in `package.json`)
@@ -30,45 +30,45 @@ Release-it is a tool that automates 4 important steps in the release process:
 3. GitHub release on the commit with the changelog and package.json modification on the develop branch
 4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
 
-To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens) 
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
 
    ```
    export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
    ```
- 
+
  To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
- 
+
    ```
    echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
    ```
 
 #### Using release-it tool
-  
+
 There are 3 yarn scripts that can be run to do the release
 
 ##### yarn release-beta
 
-Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input). 
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
 
 ```
-? Select increment (next version): 
-❯ prepatch (0.1.1-beta.0) 
-  preminor (0.2.0-beta.0) 
-  premajor (1.0.0-beta.0) 
-  Other, please specify... 
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
 ```
 
 ##### yarn release-major-beta
 
 Same as `yarn release-beta`, but with premajor version pre-selected.
-    
+
 ##### yarn release
 
 Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
 
 #### Important notes
 
-> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.  
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
 
 > Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
 

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 5000,
+  defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
-  video: true,
+  video: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -36,8 +36,8 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "cypress": "10.3.1",
     "cypress-fail-fast": "^5.0.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -16,7 +16,13 @@ import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
 import { getVisualization } from '@eeacms/volto-eea-map/actions';
 
 const Edit = (props) => {
-  const { block, onChangeBlock, selected, data_provenance = {} } = props;
+  const {
+    block,
+    onChangeBlock,
+    selected,
+    data_provenance = {},
+    figure_note = [],
+  } = props;
   const schema = Schema(props);
   const [mapData, setMapData] = React.useState('');
   const data = React.useMemo(() => props.data, [props.data]);
@@ -29,20 +35,45 @@ const Edit = (props) => {
         show_legend: true,
       });
     }
+    if (!Object.hasOwn(data, 'show_note')) {
+      onChangeBlock(block, {
+        ...data,
+        show_note: true,
+      });
+    }
     if (!Object.hasOwn(data, 'show_sources')) {
       onChangeBlock(block, {
         ...data,
         show_sources: true,
       });
     }
+    if (!Object.hasOwn(data, 'show_more_info')) {
+      onChangeBlock(block, {
+        ...data,
+        show_more_info: true,
+      });
+    }
     if (!Object.hasOwn(data, 'dataprotection')) {
       onChangeBlock(block, {
         ...data,
         dataprotection: { enabled: true },
       });
     }
+    if (!Object.hasOwn(data, 'show_share')) {
+      onChangeBlock(block, {
+        ...data,
+        show_share: true,
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data.show_legend, data.show_sources, data.dataprotection]);
+  }, [
+    data.show_legend,
+    data.show_note,
+    data.show_sources,
+    data.show_more_info,
+    data.dataprotection,
+    data.show_share,
+  ]);
 
   React.useEffect(() => {
     if (props.data.vis_url) {
@@ -74,6 +105,7 @@ const Edit = (props) => {
             data={{
               ...data,
               data_provenance,
+              figure_note,
               map_data: props.map_visualization,
             }}
           />
@@ -104,6 +136,11 @@ export default compose(
   connect(
     (state, props) => ({
       data_query: state.content.data.data_query,
+      '@id': props.data.vis_url
+        ? state.map_visualizations?.data[
+            expandToBackendURL(props.data.vis_url)
+          ]?.['@id']
+        : props.content?.['@id'],
       map_visualization: props.data.vis_url
         ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
             ?.data
@@ -112,6 +149,10 @@ export default compose(
         ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
             ?.data_provenance
         : '',
+      figure_note: props.data.vis_url
+        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
+            ?.figure_note
+        : '',
     }),
     {
       getVisualization,

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -60,10 +60,11 @@ const ProtectionSchema = () => ({
     background_image: {
       title: 'Static map preview image',
       widget: 'file',
+      required: true,
     },
   },
 
-  required: [],
+  required: ['background_image'],
 });
 
 export const Schema = (props) => {
@@ -83,14 +84,26 @@ export const Schema = (props) => {
           'vis_url',
           'description',
           'height',
+          'enable_queries',
+          ...(props.data.enable_queries ? ['data_query_params'] : []),
+        ],
+      },
+      {
+        id: 'toolbar',
+        title: 'Toolbar',
+        fields: [
           'show_legend',
           'show_viewer',
+          'show_note',
           'show_sources',
-          'enable_queries',
-          ...(props.data.enable_queries ? ['data_query_params'] : []),
-          'dataprotection',
+          'show_more_info',
+          'show_share',
         ],
       },
+      {
+        fields: ['dataprotection'],
+        title: 'Data Protection',
+      },
     ],
     properties: {
       vis_url: {
@@ -107,10 +120,26 @@ export const Schema = (props) => {
         title: 'Description',
         widget: 'slate',
       },
+      show_note: {
+        title: 'Show note',
+        type: 'boolean',
+        defaultValue: true,
+      },
       show_sources: {
         title: 'Show sources',
         description: 'Will show sources set in this page Data provenance',
         type: 'boolean',
+        defaultValue: true,
+      },
+      show_more_info: {
+        title: 'Show more info',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      show_share: {
+        title: 'Show share button',
+        type: 'boolean',
+        defaultValue: true,
       },
       show_legend: {
         title: 'Show legend',

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -13,7 +13,7 @@ import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
 import { getVisualization } from '@eeacms/volto-eea-map/actions';
 
 const View = (props) => {
-  const { data, data_provenance = {} } = props || {};
+  const { data, data_provenance = {}, figure_note = [] } = props || {};
   const { height = '' } = data;
 
   const [mapData, setMapData] = React.useState('');
@@ -44,18 +44,24 @@ const View = (props) => {
   ]);
 
   return (
-    <PrivacyProtection data={data} {...props}>
+    <PrivacyProtection
+      data={data}
+      className="embed-map-visualization"
+      {...props}
+    >
       {mapData && (
-        <div>
+        <>
           <Webmap data={mapData} height={height} />
           <ExtraViews
             data={{
               ...data,
               data_provenance,
+              figure_note,
               map_data: props.map_visualization,
+              '@id': props['@id'],
             }}
           />
-        </div>
+        </>
       )}
       {!mapData && (
         <p>No map view to show. Set visualization in block configuration.</p>
@@ -67,6 +73,11 @@ const View = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      '@id': props.data.vis_url
+        ? state.map_visualizations?.data[
+            expandToBackendURL(props.data.vis_url)
+          ]?.['@id']
+        : props.content?.['@id'],
       map_visualization: props.data.vis_url
         ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
             ?.data
@@ -75,6 +86,10 @@ export default compose(
         ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
             ?.data_provenance
         : '',
+      figure_note: props.data.vis_url
+        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
+            ?.figure_note
+        : '',
     }),
     {
       getVisualization,

package/src/components/Blocks/EmbedEEAMap/helpers.js

@@ -2,7 +2,7 @@ import { updateBlockQueryFromPageQuery } from '@eeacms/volto-eea-map/utils';
 
 const deepUpdateDataQueryParams = (block, data, data_query, onChangeBlock) => {
   // If block data_query_params do not exist, init them
-  if (!data?.data_query_params) {
+  if (!data?.data_query_params && data_query) {
     onChangeBlock(block, {
       ...data,
       data_query_params: [...data_query],

package/src/components/ExtraViews.jsx

@@ -1,27 +1,65 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import cx from 'classnames';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
+import {
+  FigureNote,
+  Sources,
+  MoreInfo,
+  Share,
+} from '@eeacms/volto-embed/Toolbar';
 import LegendView from '@eeacms/volto-eea-map/components/LegendView';
-import Sources from './Sources';
 
-const ExtraViews = ({ data }) => {
+import '@eeacms/volto-embed/Toolbar/styles.less';
+
+const ExtraViews = ({ data, screen }) => {
+  const toolbar = useRef();
+  const [mobile, setMobile] = useState(false);
   const {
     map_data = {},
     description,
     show_legend,
     show_viewer,
-    show_sources,
+    show_note = true,
+    show_sources = true,
+    show_more_info = true,
+    show_share = true,
     data_provenance = {},
+    figure_note = [],
   } = data;
 
+  useEffect(() => {
+    if (toolbar.current) {
+      const toolbarParentWidth = toolbar.current.parentElement.offsetWidth;
+
+      if (toolbarParentWidth < 600 && !mobile) {
+        setMobile(true);
+      } else if (toolbarParentWidth >= 600 && mobile) {
+        setMobile(false);
+      }
+    }
+  }, [screen, mobile]);
+
   return (
-    <div className="extra-eea-map-content">
+    <>
       {show_legend && map_data && (
         <LegendView data={map_data} show_viewer={show_viewer} />
       )}
-      {show_sources && <Sources sources={data_provenance?.data} />}
+      <div className={cx('visualization-toolbar', { mobile })} ref={toolbar}>
+        <div className="left-col">
+          {show_note && <FigureNote note={figure_note || []} />}
+          {show_sources && <Sources sources={data_provenance?.data} />}
+          {show_more_info && <MoreInfo href={data['@id']} />}
+        </div>
+        <div className="right-col">
+          {show_share && <Share href={data['@id']} />}
+        </div>
+      </div>
       {description && serializeNodes(description)}
-    </div>
+    </>
   );
 };
 
-export default ExtraViews;
+export default connect((state) => ({
+  screen: state.screen,
+}))(ExtraViews);

package/src/components/FigureNote.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import { isArray } from 'lodash';
+
+export const serializeText = (note) => {
+  if (!serializeNodesToText(note))
+    return <p>There are no notes set for this visualization</p>;
+  return isArray(note) ? serializeNodes(note) : note;
+};
+
+const FigureNote = ({ note = [] }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  return (
+    <div className="eea-map-note-container">
+      <Popup
+        position="bottom left"
+        popper={{ id: 'eea-map-note-popup' }}
+        trigger={
+          <button className={cx('eea-map-note-button', { expanded })}>
+            Note
+          </button>
+        }
+        on="click"
+        onClose={() => {
+          setExpanded(false);
+        }}
+        onOpen={() => {
+          setExpanded(true);
+        }}
+      >
+        <Popup.Content>{serializeText(note)}</Popup.Content>
+      </Popup>
+    </div>
+  );
+};
+
+export default FigureNote;

package/src/components/LegendView.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Button, Grid } from 'semantic-ui-react';
+import cx from 'classnames';
 import { fetchArcGISData, setLegendColumns } from '../utils';
-import { Icon } from '@plone/volto/components';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
-import rightKeySVG from '@plone/volto/icons/right-key.svg';
-import downKeySVG from '@plone/volto/icons/down-key.svg';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
 import codeSVG from '@eeacms/volto-eea-map/static/code-line.svg';
@@ -40,14 +38,7 @@ const LayerLegend = ({ data, show_viewer }) => {
           justifyContent: 'space-between',
         }}
       >
-        <h5
-          style={{
-            marginTop: '15px',
-            marginBottom: '5px',
-          }}
-        >
-          {name}
-        </h5>
+        <h5 style={{ marginBottom: '0.5rem' }}>{name}</h5>
         {show_viewer && map_service_url && (
           <a
             target="_blank"
@@ -112,41 +103,42 @@ const LegendView = (props) => {
 
   const legendColumns =
     map_layers && setLegendColumns(map_layers.length, device);
+
   return (
-    <>
-      <div className="legend-container">
-        <button className="legend-action" onClick={() => setExpand(!expand)}>
-          {/* <h3 role="presentation" className="legend-title"> */}
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Legend:
-          {/* </h3> */}
-        </button>
-        <Grid columns={legendColumns}>
-          {(!map_layers || map_layers.length === 0) && (
-            <p>
-              No layer found for legend. Please add a map layer from editor.
-            </p>
-          )}
-          {expand && (
-            <Grid.Row divided>
-              {map_layers &&
-                map_layers.length > 0 &&
-                map_layers.map((l, i) => (
-                  <LayerLegend
-                    key={i}
-                    data={l.map_layer}
-                    show_viewer={show_viewer}
-                  />
-                ))}
-            </Grid.Row>
-          )}
+    <div className={cx('legend-toolbar', { open: expand })}>
+      <button
+        className={cx('trigger-button', { open: expand })}
+        onClick={() => setExpand(!expand)}
+      >
+        Legend
+        <i
+          className={cx({
+            'ri-arrow-right-s-line': !expand,
+            'ri-arrow-down-s-line': expand,
+          })}
+        />
+      </button>
+      {expand && (
+        <Grid className="legend-container" columns={legendColumns}>
+          <Grid.Row divided>
+            {(!map_layers || map_layers.length === 0) && (
+              <Grid.Column>
+                <p>
+                  No layer found for legend. Please add a map layer from editor.
+                </p>
+              </Grid.Column>
+            )}
+            {map_layers?.map((l, i) => (
+              <LayerLegend
+                key={i}
+                data={l.map_layer}
+                show_viewer={show_viewer}
+              />
+            ))}
+          </Grid.Row>
         </Grid>
-      </div>
-    </>
+      )}
+    </div>
   );
 };
 

package/src/components/MoreInfoLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const MoreInfoLink = ({ contentTypeLink }) => {
+  return (
+    <Link href={contentTypeLink}>
+      <button className={cx('eea-map-more-info-button')}>
+        More info <i class="ri-external-link-line"></i>
+      </button>
+    </Link>
+  );
+};
+
+export default MoreInfoLink;

package/src/components/Share.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Popup, Input, Button } from 'semantic-ui-react';
+import { useCopyToClipboard } from '../utils.js';
+import cx from 'classnames';
+
+const Share = ({ contentTypeLink = '' }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const popupRef = React.useRef();
+
+  const CopyUrlButton = ({ className, url, buttonText }) => {
+    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
+
+    if (copyUrlStatus === 'copied') {
+      buttonText = 'Copied!';
+    } else if (copyUrlStatus === 'failed') {
+      buttonText = 'Copy failed. Please try again.';
+    }
+
+    return (
+      <Button
+        primary
+        onClick={copyUrl}
+        className={cx('copy-button', className)}
+      >
+        {buttonText}
+      </Button>
+    );
+  };
+
+  return (
+    <Popup
+      popper={{ id: 'eea-map-share-popup' }}
+      trigger={
+        <div className="eea-map-share-container">
+          <button className={cx('eea-map-share-button', { expanded })}>
+            <span>Share</span>
+            <i class="ri-share-fill"></i>
+          </button>
+        </div>
+      }
+      position="bottom left"
+      on="click"
+      onClose={() => {
+        setExpanded(false);
+      }}
+      onOpen={() => {
+        setExpanded(true);
+      }}
+      ref={popupRef}
+    >
+      <div>
+        <span className="eea-map-share-popup-text">Copy link</span>
+        <div className="eea-map-share-popup-container">
+          <Input
+            className="eea-map-share-link"
+            defaultValue={contentTypeLink}
+          />
+          <CopyUrlButton
+            className="eea-map-copy-button"
+            url={contentTypeLink}
+            buttonText="Copy"
+          />
+        </div>
+      </div>
+    </Popup>
+  );
+};
+
+export default Share;

package/src/components/Webmap.jsx

@@ -360,7 +360,7 @@ const Webmap = (props) => {
   `;
 
   return (
-    <div>
+    <div className="esri-map-wrapper">
       <style>{dynamicStyle}</style>
       <div ref={mapRef} className="esri-map"></div>
     </div>

package/src/components/visualization/VisualizationView.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Webmap from '../Webmap';
+import LegendView from '../LegendView';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
@@ -13,7 +14,10 @@ const VisualizationView = (props) => {
       {hasBlocksData(content) ? (
         <RenderBlocks {...props} />
       ) : (
-        <Webmap data={map_visualization_data} />
+        <>
+          <Webmap data={map_visualization_data} />
+          <LegendView data={map_visualization_data} show_viewer={true} />
+        </>
       )}
     </div>
   );

package/src/components/visualization/VisualizationViewWidget.jsx

@@ -1,6 +1,12 @@
 import Webmap from '../Webmap';
+import LegendView from '../LegendView';
 
 export default function VisualizationViewWidget(props) {
   const { value: map_visualization_data = {} } = props;
-  return <Webmap data={map_visualization_data} />;
+  return (
+    <>
+      <Webmap data={map_visualization_data} />
+      <LegendView data={map_visualization_data} show_viewer={true} />
+    </>
+  );
 }

package/src/less/global.less

@@ -15,6 +15,10 @@
 
 @import './variables.less';
 
+.esri-map-wrapper {
+  margin-bottom: 1rem;
+}
+
 // TODO: pull out colors and dimensions into variables
 .map-edit-container {
   display: flex;
@@ -182,7 +186,6 @@
 .legend-container {
   display: flex;
   flex-direction: column;
-  margin: 15px 0;
 }
 
 .map_source_param_container {
@@ -198,23 +201,6 @@
   padding: 2px 15px !important;
 }
 
-.legend-action {
-  z-index: 22;
-  display: inline-flex;
-  align-items: center;
-  padding-bottom: 3px;
-  border: none;
-  background: transparent;
-  background-color: transparent;
-  color: #3d5265;
-  cursor: pointer;
-  font-weight: bold;
-
-  &:hover {
-    color: @secondaryColor;
-  }
-}
-
 .map-number-input {
   padding: 5px !important;
 }
@@ -225,43 +211,25 @@
   color: green;
 }
 
-/* sources */
-
-.eea-map-sources-list {
-  margin: 0;
-  list-style: decimal inside;
-  padding-inline-start: 0;
-}
-
-#eea-map-sources-popup .ui.popup {
-  min-width: 600px;
-  background-color: #f9f9f9;
-  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-}
+.eea-map-info {
+  display: flex;
+  flex-direction: row;
 
-.eea-map-sources-button {
-  display: inline-flex;
-  align-items: center;
-  padding-top: 10px;
-  padding-bottom: 3px;
-  border: none;
-  background-color: transparent;
-  color: @textColor;
-  cursor: pointer;
-  font-weight: bold;
+  > * {
+    padding: 0 0.5rem;
+    border-collapse: collapse;
+  }
 
-  .icon {
-    margin-left: 0.5rem;
+  > *:first-child {
+    padding-left: 0;
   }
 
-  &:hover {
-    color: @secondaryColor;
+  > *:last-child {
+    padding-right: 0;
   }
 
-  &.expanded {
-    padding-bottom: 0;
-    border-bottom: 3px solid @secondaryColor;
-    color: @secondaryColor;
+  > *:not(:last-child) {
+    border-right: 1px solid @textColor;
   }
 }
 
@@ -282,9 +250,4 @@
     max-width: 0.2cm;
     height: 0.2cm;
   }
-
-  .eea-map-sources-container,
-  #eea-map-sources-popup {
-    display: none;
-  }
 }

package/src/utils.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-throw-literal */
+import React from 'react';
 import { getBaseUrl } from '@plone/volto/helpers';
+
 const setLegendColumns = (legendsNo, device) => {
   switch (device) {
     case 'widescreen':
@@ -118,9 +120,32 @@ const updateBlockQueryFromPageQuery = (data_query, data_query_params) => {
   return newDataQuery;
 };
 
+const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = React.useState('inactive');
+  const copy = React.useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  React.useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};
+
 export {
   setLegendColumns,
   fetchArcGISData,
   applyQueriesToMapLayers,
   updateBlockQueryFromPageQuery,
+  useCopyToClipboard,
 };