@eeacms/volto-eea-map 0.1.31 → 0.1.33

package/.i18n.babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');

package/.project.eslintrc.js

@@ -5,14 +5,13 @@ 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]}`;
   }
@@ -21,11 +20,12 @@ 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: {
@@ -45,3 +45,4 @@ module.exports = {
     },
   },
 };
+

package/CHANGELOG.md

@@ -4,13 +4,43 @@ 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.33](https://github.com/eea/volto-eea-map/compare/0.1.32...0.1.33) - 12 June 2023
+
+#### :bug: Bug Fixes
+
+- fix: tests #254131 [andreiggr - [`a72841c`](https://github.com/eea/volto-eea-map/commit/a72841ca6bf4ccbd57331dd8353fb25f1597174f)]
+- fix: tests #254131 [andreiggr - [`9e54ab1`](https://github.com/eea/volto-eea-map/commit/9e54ab13be0cc58481808c99b5bb90536acd6643)]
+- fix: resolution countup.js [Andrei Grigore - [`a7a55a1`](https://github.com/eea/volto-eea-map/commit/a7a55a1ec8a325f536d01965a84367a49095f00a)]
+
+#### :house: Internal changes
+
+- 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
+
+- test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`58f37dd`](https://github.com/eea/volto-eea-map/commit/58f37dd0154290fd801604ec972ff45563fe9970)]
+- test: Fix test config, coverage Refs #253277 [valentinab25 - [`80d1348`](https://github.com/eea/volto-eea-map/commit/80d134809ca2f7d1cbad7bc5c780f1c4b43ca544)]
+- tests: set configuration from template [valentinab25 - [`9588e21`](https://github.com/eea/volto-eea-map/commit/9588e2193091b766c74b2dc4da7f51c0b998ac17)]
+- * 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
+
+- 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
 
 - 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

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
-  const presets = ['razzle/babel'];
+  const presets = ['razzle'];
   const plugins = [
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work

package/cypress.config.js

@@ -6,31 +6,22 @@ module.exports = defineConfig({
   chromeWebSecurity: false,
   reporter: 'junit',
   video: true,
-
   retries: {
     runMode: 8,
     openMode: 0,
   },
-
   reporterOptions: {
     mochaFile: 'cypress/reports/cypress-[hash].xml',
     jenkinsMode: true,
     toConsole: true,
   },
-
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    // setupNodeEvents(on, config) {
-    //   return require('./cypress/plugins/index.js')(on, config);
-    // },
-    baseUrl: 'http://localhost:3000',
-  },
-
-  component: {
-    devServer: {
-      framework: 'react',
-      bundler: 'webpack',
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      require('cypress-fail-fast/plugin')(on, config);
+      return config;
     },
+    baseUrl: 'http://localhost:3000',
   },
 });

package/jest-addon.config.js

@@ -5,12 +5,14 @@ module.exports = {
     '!src/**/*.d.ts',
   ],
   moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
-    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,22 +18,29 @@
   },
   "addons": [
     "@eeacms/volto-embed",
-    "@eeacms/volto-block-style"
+    "@eeacms/volto-object-widget"
   ],
   "dependencies": {
-    "@eeacms/volto-block-style": "4.1.0",
-    "@eeacms/volto-embed": "5.0.0",
+    "@eeacms/volto-embed": "*",
+    "@eeacms/volto-object-widget": "*",
     "@plone/scripts": "*",
     "esri-loader": "3.6.0",
     "lodash": "4.17.21",
+    "razzle-plugin-scss": "4.2.18",
+    "react-color": "~2.19.3",
     "react-querybuilder": "4.2.3"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.5",
+    "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "cypress": "10.3.1",
+    "cypress-fail-fast": "^5.0.1",
     "md5": "^2.3.0"
   },
+  "resolutions": {
+    "react-countup/countup.js": "2.5.0"
+  },
   "scripts": {
     "release": "release-it",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",

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

@@ -4,8 +4,6 @@ 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';
@@ -60,20 +58,7 @@ const Edit = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.block, props.data_query, data.data_query_params]);
   return (
-    <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
@@ -89,7 +74,7 @@ const Edit = (props) => {
           formData={data}
         />
       </SidebarPortal>
-    </BlockStyleWrapperEdit>
+    </>
   );
 };
 

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

@@ -9,9 +9,6 @@ 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 || {};
@@ -77,35 +74,23 @@ const View = (props) => {
   }, [map_visualization, props.data, props.data_query, isEdit, enable_queries]);
 
   return (
-    <StyleWrapperView
-      {...props}
-      data={data}
-      styleData={{
-        ...data.styles,
-        customClass: cx(
-          data.styles?.customClass || '',
-          'columns-tabs-container',
-        ),
-      }}
-    >
-      <PrivacyProtection data={data} height={height} {...props}>
-        {mapData && (
-          <div>
-            <Webmap data={mapData} height={height} />
-            <ExtraViews
-              data={{
-                ...data,
-                data_provenance,
-                map_data: map_visualization,
-              }}
-            />
-          </div>
-        )}
-        {!mapData && (
-          <p>No map view to show. Set visualization in block configuration.</p>
-        )}
-      </PrivacyProtection>
-    </StyleWrapperView>
+    <PrivacyProtection data={data} height={height} {...props}>
+      {mapData && (
+        <div>
+          <Webmap data={mapData} height={height} />
+          <ExtraViews
+            data={{
+              ...data,
+              data_provenance,
+              map_data: map_visualization,
+            }}
+          />
+        </div>
+      )}
+      {!mapData && (
+        <p>No map view to show. Set visualization in block configuration.</p>
+      )}
+    </PrivacyProtection>
   );
 };
 

package/src/components/Webmap.jsx

@@ -19,57 +19,19 @@ const MODULES = [
   'esri/widgets/ScaleBar',
 ];
 
-//TODO: set group layers sublayers, for direct group import.
-// const setGroupLayers = async (ids, data, modules) => {
-//   const { map_service_url, sublayerDatalayer, fullLayer, query = '' } =
-//     data || {};
-//   const { FeatureLayer, MapImageLayer, GroupLayer } = modules;
-
-//   const glLayers = await Promise.all(
-//     ids.map(async (id) => {
-//       const sublayerUrl = `${map_service_url}/${id}`;
-//       let sublayerData = await fetchArcGISData(sublayerUrl);
-//       let sublayer;
-//       switch (sublayerData.type) {
-//         case 'Raster Layer':
-//           sublayer = new MapImageLayer({
-//             url: map_service_url,
-//             minScale: sublayerData?.minScale,
-//             maxScale: sublayerData?.maxScale,
-//             sublayers: [
-//               {
-//                 id: sublayerData.id,
-//                 visible: true,
-//                 definitionExpression: query ? formatQuery(query, 'sql') : '',
-//               },
-//             ],
-//           });
-//           break;
-//         case 'Feature Layer':
-//           sublayer = new FeatureLayer({
-//             layerId: sublayerData.id,
-//             url: `${map_service_url}/${sublayerData.id}`,
-//             definitionExpression: query ? formatQuery(query, 'sql') : '',
-//             minScale: sublayerData?.minScale,
-//             maxScale: sublayerData?.maxScale,
-//           });
-//           break;
-//         default:
-//           break;
-//       }
-//       return sublayer;
-//     }),
-//   );
-//   return glLayers;
-// };
-
 const Webmap = (props) => {
   const { editMode, height, id } = props;
 
   const data = React.useMemo(() => props.data || {}, [props.data]);
 
   const device = React.useMemo(() => props.device || {}, [props.device]);
-  const { base = {}, layers = {}, legend = {}, general = {} } = data;
+  const {
+    base = {},
+    layers = {},
+    legend = {},
+    general = {},
+    styles = {},
+  } = data;
 
   const { base_layer = '' } = base;
 
@@ -125,6 +87,19 @@ const Webmap = (props) => {
     }
   }, [setModules, options]);
 
+  var customFeatureLayerRenderer = {
+    type: 'simple', // autocasts as new SimpleRenderer()
+    symbol: {
+      type: 'simple-fill', // autocasts as new SimpleFillSymbol()
+      color: styles?.symbol_color ? styles?.symbol_color : 'black',
+      style: 'solid',
+      outline: {
+        // autocasts as new SimpleLineSymbol()
+        color: styles?.outline_color ? styles?.outline_color : 'white',
+        width: styles?.outline_width ? styles?.outline_width : 1,
+      },
+    },
+  };
   //eslint-disable-next-line no-unused-vars
   const esri = React.useMemo(() => {
     if (Object.keys(modules).length === 0) return {};
@@ -148,7 +123,15 @@ const Webmap = (props) => {
             .filter(({ map_service_url, layer }) => map_service_url && layer)
             .map(
               (
-                { map_service_url, layer, fullLayer, query = '', opacity = 1 },
+                {
+                  map_service_url,
+                  layer,
+                  fullLayer,
+                  query = '',
+                  opacity = 1,
+                  maxScaleOverride = '',
+                  minScaleOverride = '',
+                },
                 index,
               ) => {
                 const url = `${map_service_url}/${layer?.id}`;
@@ -160,8 +143,12 @@ const Webmap = (props) => {
                       sublayers: [
                         {
                           id: layer.id,
-                          minScale: layer?.minScale,
-                          maxScale: layer?.maxScale,
+                          minScale: minScaleOverride
+                            ? minScaleOverride
+                            : layer?.minScale,
+                          maxScale: maxScaleOverride
+                            ? maxScaleOverride
+                            : layer?.maxScale,
                           opacity: opacity ? parseFloat(opacity) : 1,
                           definitionExpression: query
                             ? formatQuery(query, 'sql')
@@ -177,9 +164,16 @@ const Webmap = (props) => {
                       definitionExpression: query
                         ? formatQuery(query, 'sql')
                         : '',
-                      minScale: layer?.minScale,
-                      maxScale: layer?.maxScale,
+                      minScale: minScaleOverride
+                        ? minScaleOverride
+                        : layer?.minScale,
+                      maxScale: maxScaleOverride
+                        ? maxScaleOverride
+                        : layer?.maxScale,
                       opacity: opacity ? parseFloat(opacity) : 1,
+                      ...(styles?.override_styles && {
+                        renderer: customFeatureLayerRenderer,
+                      }),
                     });
                     break;
                   default:
@@ -190,24 +184,37 @@ const Webmap = (props) => {
             )
         : [];
 
-    const mapBaseLayer = new WebTileLayer({
-      urlTemplate:
-        'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/{level}/{col}/{row}.png',
-    });
+    const generateMapBaselayer = (compositeType) => {
+      return new WebTileLayer({
+        urlTemplate: `https://gisco-services.ec.europa.eu/maps/tiles/OSM${compositeType}Composite/EPSG3857/{level}/{col}/{row}.png`,
+      });
+    };
 
     // Create a Basemap with the WebTileLayer.
+
     const positronCompositeBasemap = new Basemap({
-      baseLayers: [mapBaseLayer],
+      baseLayers: [generateMapBaselayer('Positron')],
       title: 'Positron Composite',
       id: 'positron-composite',
       thumbnailUrl:
         'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/0/0/0.png',
     });
 
+    const blossomCompositeBasemap = new Basemap({
+      baseLayers: [generateMapBaselayer('Blossom')],
+      title: 'Blossom Composite',
+      id: 'blossom-composite',
+      thumbnailUrl:
+        'https://gisco-services.ec.europa.eu/maps/tiles/OSMBlossomComposite/EPSG3857/0/0/0.png',
+    });
+
     const setBasemap = (basemap) => {
       if (basemap === 'positron-composite') {
         return positronCompositeBasemap;
       }
+      if (basemap === 'blossom-composite') {
+        return blossomCompositeBasemap;
+      }
       if (!basemap) {
         return 'hybrid';
       }

package/src/components/visualization/panelsSchema.js

@@ -1,6 +1,9 @@
 import { base_layers } from '../../constants';
 
-const customBaselayers = [['positron-composite', 'positron-composite']];
+const customBaselayers = [
+  ['positron-composite', 'positron-composite'],
+  ['blossom-composite', 'blossom-composite'],
+];
 
 const BaseLayerSchema = ({ data = {} }) => {
   const useCustomBase = data?.map_data?.base?.use_custom_base;
@@ -75,6 +78,44 @@ const MapLayersSchema = {
   required: [],
 };
 
+const StylesLayersSchema = ({ data = {} }) => {
+  return {
+    title: 'Styles Layers',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Map Data',
+        fields: [
+          'override_styles',
+          ...(data?.map_data?.styles?.override_styles
+            ? ['symbol_color', 'outline_color', 'outline_width']
+            : []),
+        ],
+      },
+    ],
+    properties: {
+      override_styles: {
+        title: 'Override layers style',
+        description: 'Will override imported layers styling',
+        type: 'boolean',
+      },
+      symbol_color: {
+        title: 'Fill color',
+        widget: 'simple_color_picker_widget',
+      },
+      outline_color: {
+        title: 'Outline color',
+        widget: 'simple_color_picker_widget',
+      },
+      outline_width: {
+        title: 'Outline width',
+        type: 'number',
+      },
+    },
+    required: [],
+  };
+};
+
 const GeneralSchema = ({ data = {} }) => {
   const centerOnExtent = data?.map_data?.general?.centerOnExtent;
 
@@ -145,7 +186,7 @@ const GeneralSchema = ({ data = {} }) => {
 export default ({ data = {} }) => {
   const generalSchema = GeneralSchema({ data });
   const baseLayerSchema = BaseLayerSchema({ data });
-
+  const stylesLayerSchema = StylesLayersSchema({ data });
   return {
     title: 'Map Editor',
     fieldsets: [
@@ -172,6 +213,10 @@ export default ({ data = {} }) => {
             id: 'layers',
             schema: MapLayersSchema,
           },
+          {
+            id: 'styles',
+            schema: stylesLayerSchema,
+          },
         ],
       },
     },

package/src/components/widgets/LayerSelectWidget.jsx

@@ -190,6 +190,20 @@ const LayerSelectWidget = (props) => {
     setServiceUrl(value);
   };
 
+  const handleMinScaleChange = (minScaleOverride) => {
+    onChange(id, {
+      ...value,
+      minScaleOverride,
+    });
+  };
+
+  const handleMaxScaleChange = (maxScaleOverride) => {
+    onChange(id, {
+      ...value,
+      maxScaleOverride,
+    });
+  };
+
   const handleReset = () => {
     setServiceUrlError('');
     setServiceUrl(map_service_url);
@@ -313,6 +327,40 @@ const LayerSelectWidget = (props) => {
                 onChange={(e) => handleOpacityChange(e.target.value)}
               />
             </Grid.Row>
+            <Grid.Row stretched>
+              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+                Min scale:
+              </h5>
+              <input
+                className="map-number-input"
+                type="number"
+                min={0}
+                step={1}
+                value={
+                  value?.minScaleOverride
+                    ? value?.minScaleOverride
+                    : value?.layer?.minScale
+                }
+                onChange={(e) => handleMinScaleChange(e.target.value)}
+              />
+            </Grid.Row>
+            <Grid.Row stretched>
+              <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
+                Max scale:
+              </h5>
+              <input
+                className="map-number-input"
+                type="number"
+                min={0}
+                step={1}
+                value={
+                  value?.maxScaleOverride
+                    ? value?.maxScaleOverride
+                    : value?.layer?.maxScale
+                }
+                onChange={(e) => handleMaxScaleChange(e.target.value)}
+              />
+            </Grid.Row>
             <Grid.Row stretched>
               <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
                 Description

package/src/components/widgets/SimpleColorPickerWidget.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import loadable from '@loadable/component';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const ReactColor = loadable.lib(() => import('react-color'));
+
+export default (props) => {
+  const { id, value, onChange, available_colors } = props;
+  const [showPicker, setShowPicker] = React.useState(false);
+
+  return (
+    <FormFieldWrapper
+      {...props}
+      draggable={false}
+      className="simple-color-picker-widget"
+    >
+      <div>
+        <Button.Group fluid>
+          <Button
+            color={value}
+            style={{ backgroundColor: value }}
+            onClick={() => setShowPicker(true)}
+            size="small"
+            fluid
+            title="Pick color"
+          >
+            {''}
+          </Button>
+          <Button
+            compact
+            style={{ paddingLeft: '8px', paddingRight: '0px' }}
+            onClick={() => onChange(id, null)}
+          >
+            <Icon name={clearSVG} size="18px" color="red" />
+          </Button>
+        </Button.Group>
+
+        {showPicker ? (
+          <ReactColor>
+            {({ SketchPicker }) => {
+              return (
+                <SketchPicker
+                  width="180px"
+                  disableAlpha
+                  colors={available_colors}
+                  color={value || '#000'}
+                  onChangeComplete={(value) => {
+                    setShowPicker(false);
+                    onChange(id, value.hex);
+                  }}
+                ></SketchPicker>
+              );
+            }}
+          </ReactColor>
+        ) : (
+          ''
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};

package/src/index.js

@@ -5,9 +5,9 @@ import world from '@plone/volto/icons/world.svg';
 import DataQueryWidget from './components/widgets/DataQueryWidget';
 import LayerSelectWidget from './components/widgets/LayerSelectWidget';
 import MapEditorWidget from './components/widgets/MapEditorWidget';
-import ObjectTypesWidget from './components/widgets/ObjectTypesWidget';
 import VisualizationEditorWidget from './components/visualization/VisualizationEditorWidget';
 import VisualizationView from './components/visualization/VisualizationView';
+import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
 
 import { data_visualizations } from './middlewares';
 import * as addonReducers from './reducers';
@@ -29,36 +29,6 @@ export default (config) => {
     'copernicus.discomap.eea.europa.eu',
   ];
 
-  // EEA MAP BLOCK
-
-  // config.blocks.blocksConfig.eea_map_block = {
-  //   id: 'eea_map_block', //  The name (id) of the block
-  //   title: 'EEA Map', //  The display name of the block
-  //   icon: world, //  The icon used in the block chooser
-  //   group: 'common', //The group (blocks can be grouped, displayed in the chooser)
-  //   view: EEAMapView, //The view mode component
-  //   edit: EEAMapEdit, // The edit mode component
-  //   sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
-  //   security: {
-  //     addPermission: [], //  Future proof (not implemented yet) add user permission role(s)
-  //     view: [], //Future proof (not implemented yet) view user role(s)
-  //   },
-  //   variations: [
-  //     {
-  //       id: 'default',
-  //       title: 'EEA Map (default)',
-  //       isDefault: true,
-  //       view: EEAMapView,
-  //     },
-  //     {
-  //       id: 'extra',
-  //       title: 'Extra variation (expand if needed)',
-  //       isDefault: true,
-  //       view: EEAMapView,
-  //     },
-  //   ],
-  // };
-
   config.blocks.blocksConfig.embed_eea_map_block = {
     id: 'embed_eea_map_block', // The name (id) of the block
     title: 'Embed EEA Map', // The display name of the block
@@ -78,19 +48,13 @@ export default (config) => {
         isDefault: true,
         view: EmbedMapView,
       },
-      {
-        id: 'extra',
-        title: 'Extra variation (expand if needed)',
-        isDefault: true,
-        view: EmbedMapView,
-      },
     ],
   };
 
   config.widgets.widget.map_edit_widget = MapEditorWidget;
   config.widgets.widget.map_layers_widget = LayerSelectWidget;
-  config.widgets.widget.object_types_widget = ObjectTypesWidget;
   config.widgets.widget.data_query_widget = DataQueryWidget;
+  config.widgets.widget.simple_color_picker_widget = SimpleColorPickerWidget;
 
   //map editor for the visualization(content-type)
   config.widgets.id.map_visualization_data = VisualizationEditorWidget;

package/src/components/widgets/ObjectTypesWidget.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Menu, Tab } from 'semantic-ui-react';
-import { ObjectWidget } from '@plone/volto/components';
-import { withDeviceSize } from '../../hocs';
-
-export const ObjectTypesWidget = (props) => {
-  const {
-    schemas,
-    value = {},
-    onChange,
-    errors = {},
-    id,
-    device,
-    block,
-  } = props;
-  const objectId = id;
-
-  const defaultActiveTab = 0;
-
-  const [activeTab, setActiveTab] = React.useState(
-    defaultActiveTab > -1 ? defaultActiveTab : 0,
-  );
-  const createTab = ({ schema, id, icon }, index) => {
-    return {
-      menuItem: () => (
-        <Menu.Item
-          onClick={() => setActiveTab(index)}
-          active={activeTab === index}
-          key={id}
-        >
-          <p style={{ fontSize: '14px', fontWeight: 'bold' }}>{schema.title}</p>
-        </Menu.Item>
-      ),
-      render: () => {
-        return (
-          <Tab.Pane style={{ padding: '0' }}>
-            <ObjectWidget
-              schema={schema}
-              id={id}
-              block={block}
-              errors={errors}
-              value={value[id] || {}}
-              onChange={(schemaId, v) => {
-                onChange(objectId, { ...value, [schemaId]: v });
-              }}
-            />
-          </Tab.Pane>
-        );
-      },
-    };
-  };
-
-  return (
-    <Tab
-      menu={{
-        vertical:
-          device === 'computer' || device === 'tablet' || device === 'mobile'
-            ? false
-            : true,
-        tabular: true,
-      }}
-      panes={schemas.map(createTab)}
-      activeIndex={activeTab}
-      grid={{ paneWidth: 9, tabWidth: 3 }}
-    />
-  );
-};
-
-export default withDeviceSize(ObjectTypesWidget);