@eeacms/volto-eea-map 0.1.29 → 0.1.31

package/.coverage.babel.config.js

@@ -2,7 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/.project.eslintrc.js

@@ -1,15 +1,18 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project');    // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json'))
+  .compilerOptions;
 
 const pathsConfig = jsConfig.paths;
 
 let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
 
-Object.keys(pathsConfig).forEach(pkg => {
+Object.keys(pathsConfig).forEach((pkg) => {
   if (pkg === '@plone/volto') {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
   }
@@ -18,12 +21,11 @@ const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
 const reg = new AddonConfigurationRegistry(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map(o => [
+const addonAliases = Object.keys(reg.packages).map((o) => [
   o,
   reg.packages[o].modulePath,
 ]);
 
-
 module.exports = {
   extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
   settings: {
@@ -43,4 +45,3 @@ module.exports = {
     },
   },
 };
-

package/CHANGELOG.md

@@ -4,11 +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.1.29](https://github.com/eea/volto-eea-map/compare/0.1.28...0.1.29) - 19 October 2022
+### [0.1.31](https://github.com/eea/volto-eea-map/compare/0.1.30...0.1.31) - 11 November 2022
+
+#### :hammer_and_wrench: Others
+
+- fix project rootpath [andreiggr - [`ad4801d`](https://github.com/eea/volto-eea-map/commit/ad4801d8b17a68bf227f2a75f2d3fdd9a3491c13)]
+- blocks styles for embed map block [andreiggr - [`a6263d5`](https://github.com/eea/volto-eea-map/commit/a6263d54374719914e6f52ee8e3ae7e3cc9450f5)]
+- show first three visible layers in legend [andreiggr - [`1d434e3`](https://github.com/eea/volto-eea-map/commit/1d434e39ca0a5393baebe194948fd1a2a072d73d)]
+### [0.1.30](https://github.com/eea/volto-eea-map/compare/0.1.29...0.1.30) - 4 November 2022
 
 #### :hammer_and_wrench: Others
 
-- Enable opacity control [andreiggr - [`bb88b89`](https://github.com/eea/volto-eea-map/commit/bb88b89857169fd5b8174dcbeaeeba448a7c7d0c)]
+- jest transforms [Andrei Grigore - [`432aeee`](https://github.com/eea/volto-eea-map/commit/432aeeec40be5ecbb04c119df347be5d03950426)]
+- cy10/razzle4 updates [Andrei Grigore - [`419fe6b`](https://github.com/eea/volto-eea-map/commit/419fe6b8a7cfbc7561ba2585a2cc4f5a7583fac5)]
+- config new slate route [andreiggr - [`5343926`](https://github.com/eea/volto-eea-map/commit/5343926755aa0ace5ee4741e00df3aa4679e8bd7)]
+- use alpha in cy [andreiggr - [`775a92c`](https://github.com/eea/volto-eea-map/commit/775a92c959013a08c9a5c9c121df798a289088a9)]
+### [0.1.29](https://github.com/eea/volto-eea-map/compare/0.1.28...0.1.29) - 19 October 2022
+
 ### [0.1.28](https://github.com/eea/volto-eea-map/compare/0.1.27...0.1.28) - 7 October 2022
 
 #### :hammer_and_wrench: Others

package/jest-addon.config.js

@@ -11,16 +11,14 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,15 +18,15 @@
   },
   "addons": [
     "@eeacms/volto-embed",
-    "volto-slate"
+    "@eeacms/volto-block-style"
   ],
   "dependencies": {
-    "@eeacms/volto-embed": "4.0.2",
+    "@eeacms/volto-block-style": "4.1.0",
+    "@eeacms/volto-embed": "5.0.0",
     "@plone/scripts": "*",
     "esri-loader": "3.6.0",
     "lodash": "4.17.21",
-    "react-querybuilder": "4.2.3",
-    "volto-slate": "*"
+    "react-querybuilder": "4.2.3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

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

@@ -4,6 +4,8 @@ import { SidebarPortal } from '@plone/volto/components';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
+import { BlockStyleWrapperEdit } from '@eeacms/volto-block-style/BlockStyleWrapper';
+import cx from 'classnames';
 import { getContent } from '@plone/volto/actions';
 
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
@@ -58,7 +60,20 @@ const Edit = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.block, props.data_query, data.data_query_params]);
   return (
-    <div>
+    <BlockStyleWrapperEdit
+      {...props}
+      role="presentation"
+      data={{
+        ...(props.data || {}),
+        styles: {
+          ...(props.data?.styles || {}),
+          customClass: cx(
+            props.data?.styles?.customClass || '',
+            'custom-map-class',
+          ),
+        },
+      }}
+    >
       <View data={data} id={id} isEdit={true} />
       <SidebarPortal selected={selected}>
         <BlockDataForm
@@ -74,7 +89,7 @@ const Edit = (props) => {
           formData={data}
         />
       </SidebarPortal>
-    </div>
+    </BlockStyleWrapperEdit>
   );
 };
 

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

@@ -9,6 +9,9 @@ import { getContent } from '@plone/volto/actions';
 import Webmap from '../../Webmap';
 import ExtraViews from '../../ExtraViews';
 
+import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
+import cx from 'classnames';
+
 const View = (props) => {
   const { data, id, isEdit, map_visualization = '', data_provenance = {} } =
     props || {};
@@ -74,7 +77,17 @@ const View = (props) => {
   }, [map_visualization, props.data, props.data_query, isEdit, enable_queries]);
 
   return (
-    <div>
+    <StyleWrapperView
+      {...props}
+      data={data}
+      styleData={{
+        ...data.styles,
+        customClass: cx(
+          data.styles?.customClass || '',
+          'columns-tabs-container',
+        ),
+      }}
+    >
       <PrivacyProtection data={data} height={height} {...props}>
         {mapData && (
           <div>
@@ -92,7 +105,7 @@ const View = (props) => {
           <p>No map view to show. Set visualization in block configuration.</p>
         )}
       </PrivacyProtection>
-    </div>
+    </StyleWrapperView>
   );
 };
 

package/src/components/ExtraViews.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UniversalLink, Icon } from '@plone/volto/components';
 
 import LegendWidget from './widgets/LegendWidget';
-import { serializeNodes } from 'volto-slate/editor/render';
+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';

package/src/components/widgets/LayerSelectWidget.jsx

@@ -4,7 +4,7 @@ import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
-import RichTextWidget from 'volto-slate/widgets/RichTextWidget';
+import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
 
 import { connect } from 'react-redux';
 import { compose } from 'redux';

package/src/components/widgets/LegendWidget.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Grid } from 'semantic-ui-react';
 import { fetchArcGISData, setLegendColumns } from '../../utils';
 import { Icon } from '@plone/volto/components';
-import { serializeNodes } from 'volto-slate/editor/render';
+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';
@@ -99,20 +99,19 @@ const LegendWidget = (props) => {
   const [expand, setExpand] = React.useState(true);
 
   const { layers = {} } = data;
-  const map_layers =
-    layers &&
-    layers.map_layers &&
-    layers.map_layers.length > 0 &&
-    layers.map_layers.length > 3
-      ? layers?.map_layers.slice(0, 3)
-      : layers?.map_layers;
 
-  const visible_layers = map_layers
-    ? map_layers.filter((l) => !l?.map_layer?.hide)
-    : '';
+  const visible_layers =
+    layers && layers.map_layers && layers.map_layers.length
+      ? layers.map_layers.filter((l) => !l?.map_layer?.hide)
+      : '';
+
+  const map_layers =
+    visible_layers && visible_layers.length > 0 && visible_layers.length > 3
+      ? visible_layers.slice(0, 3)
+      : visible_layers;
 
   const legendColumns =
-    visible_layers && setLegendColumns(visible_layers.length, device);
+    map_layers && setLegendColumns(map_layers.length, device);
   return (
     <>
       <div className="legend-container">
@@ -127,16 +126,16 @@ const LegendWidget = (props) => {
           </h3>
         </button>
         <Grid columns={legendColumns}>
-          {(!visible_layers || visible_layers.length === 0) && (
+          {(!map_layers || map_layers.length === 0) && (
             <p>
               No layer found for legend. Please add a map layer from editor.
             </p>
           )}
           {expand && (
             <Grid.Row divided>
-              {visible_layers &&
-                visible_layers.length > 0 &&
-                visible_layers.map((l, i) => (
+              {map_layers &&
+                map_layers.length > 0 &&
+                map_layers.map((l, i) => (
                   <LayerLegend
                     key={i}
                     data={l.map_layer}