@eeacms/volto-n2k 0.1.1 → 0.1.4

package/CHANGELOG.md

@@ -4,8 +4,32 @@ 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.4](https://github.com/eea/volto-n2k/compare/0.1.3...0.1.4)
+
+- Prettier [`43c0a09`](https://github.com/eea/volto-n2k/commit/43c0a090f481f81e7cadcfcda59b5dcc02dd8f1a)
+- Prettier [`553c35b`](https://github.com/eea/volto-n2k/commit/553c35b2c9b34adb8fb630f2ec41f2ffd2cf22b0)
+- Prettier fix [`47619cb`](https://github.com/eea/volto-n2k/commit/47619cb286ff939df397c483c18cc532c58b7547)
+- Lazy load d3 [`874e88c`](https://github.com/eea/volto-n2k/commit/874e88c48f3af2f1c01f5818971248c2f19b6789)
+
+#### [0.1.3](https://github.com/eea/volto-n2k/compare/0.1.2...0.1.3)
+
+> 23 June 2022
+
+- Make this compatible with latest changes [`#4`](https://github.com/eea/volto-n2k/pull/4)
+
+#### [0.1.2](https://github.com/eea/volto-n2k/compare/0.1.1...0.1.2)
+
+> 14 December 2021
+
+- Update [`#3`](https://github.com/eea/volto-n2k/pull/3)
+- [Webscore fix] Added generic font-family [`48f7eb5`](https://github.com/eea/volto-n2k/commit/48f7eb59c956a1705579ec1796160d31fad77f96)
+- Refs #142010 - Optimize Volto-addons gitflow pipelines [`7eea1ed`](https://github.com/eea/volto-n2k/commit/7eea1ed2f0360830658266cc44ce9a5de6381776)
+
 #### [0.1.1](https://github.com/eea/volto-n2k/compare/0.1.0...0.1.1)
 
+> 5 October 2021
+
+- Cypress coverage [`#2`](https://github.com/eea/volto-n2k/pull/2)
 - Update [`0ef14ec`](https://github.com/eea/volto-n2k/commit/0ef14ec745d6642f3c45f7f5b4138e210329e60c)
 - Bumped versions; [`94e98ab`](https://github.com/eea/volto-n2k/commit/94e98ab1c21b7b25b5383d62398ed01a02c5cbc9)
 - Update [`854a980`](https://github.com/eea/volto-n2k/commit/854a98070c034c402c85bf35eaa4e881fd8d6e9b)
@@ -68,7 +92,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - update height for iframe (embeded maps) [`5563e6f`](https://github.com/eea/volto-n2k/commit/5563e6fd5df4c201909dd7af90cf6d06eab0a97b)
 - add common name in species list - sdf [`a2bbb1b`](https://github.com/eea/volto-n2k/commit/a2bbb1b6586c1efb5f7f73e0269f6f96e1250806)
 - Add jest configuration [`0ae3e0c`](https://github.com/eea/volto-n2k/commit/0ae3e0cd4926cf2e8cad672a24109dd5428473aa)
-- Cypress coverage [`467099d`](https://github.com/eea/volto-n2k/commit/467099d11c4bf9e6882049e0ac356314debc0cd1)
 
 #### 0.1.0
 

package/Jenkinsfile

@@ -6,11 +6,36 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu"
         DEPENDENCIES = "volto-slate @eeacms/volto-datablocks"
+        VOLTO = "alpha"
     }
 
   stages {
 
+    stage('Release') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'master'
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
+          }
+        }
+      }
+    }
+
     stage('Code') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+          not { branch 'master' }
+        }
+      }
       steps {
         parallel(
 
@@ -36,6 +61,15 @@ pipeline {
     }
 
     stage('Tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
 
@@ -75,6 +109,15 @@ pipeline {
     }
 
     stage('Integration tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
 
@@ -82,8 +125,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                  sh '''docker pull eeacms/plone-backend; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
@@ -100,7 +143,8 @@ pipeline {
                              reportName: 'CypressCoverage',
                              reportTitles: 'Integration Tests Code Coverage'])
                     }
-                    archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                    sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
+                    archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                     stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
                   }
                   finally {
@@ -122,10 +166,16 @@ pipeline {
     }
 
     stage('Report to SonarQube') {
-      // Exclude Pull-Requests
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
+          anyOf {
+            branch 'master'
+            allOf {
+              branch 'develop'
+              not { changelog '.*^Automated release [0-9\\.]+$' }
+            }
+          }
         }
       }
       steps {
@@ -135,10 +185,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }
@@ -156,8 +206,8 @@ pipeline {
       steps {
         node(label: 'docker') {
           script {
-            if ( env.CHANGE_BRANCH != "develop" &&  !( env.CHANGE_BRANCH.startsWith("hotfix")) ) {
-                error "Pipeline aborted due to PR not made from develop or hotfix branch"
+            if ( env.CHANGE_BRANCH != "develop" ) {
+                error "Pipeline aborted due to PR not made from develop branch"
             }
            withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
             sh '''docker pull eeacms/gitflow'''
@@ -168,23 +218,6 @@ pipeline {
       }
     }
 
-    stage('Release') {
-      when {
-        allOf {
-          environment name: 'CHANGE_ID', value: ''
-          branch 'master'
-        }
-      }
-      steps {
-        node(label: 'docker') {
-          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
-          }
-        }
-      }
-    }
-
   }
 
   post {

package/README.md

@@ -1,7 +1,18 @@
 # volto-n2k
+
 [![Releases](https://img.shields.io/github/v/release/eea/volto-n2k)](https://github.com/eea/volto-n2k/releases)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-n2k%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-n2k/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-master)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-n2k%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-n2k/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-n2k-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-n2k-develop)
 
 [Volto](https://github.com/plone/volto) add-on
 
@@ -46,6 +57,81 @@ Demo GIF
 
 1. Happy editing!
 
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   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`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+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)
+
+   ```
+   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).
+
+```
+? 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 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).
+
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-n2k/blob/master/DEVELOP.md).

package/cypress/support/index.js

@@ -27,7 +27,7 @@ coverage-end */
 export const setupBeforeEach = () => {
   cy.autologin();
   cy.createContent({
-    contentType: 'Folder',
+    contentType: 'Document',
     contentId: 'cypress',
     contentTitle: 'Cypress',
   });

package/cypress.json

@@ -1,12 +1,17 @@
 {
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
-  "defaultCommandTimeout": 15000,
+  "defaultCommandTimeout": 8888,
   "reporter": "junit",
   "video": true,
   "reporterOptions": {
     "mochaFile": "cypress/reports/cypress-[hash].xml",
     "jenkinsMode": true,
     "toConsole": true
+  },
+  "chromeWebSecurity": false,
+  "retries": {
+    "runMode": 8,
+    "openMode": 0
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,18 +24,18 @@
     "url": "git@github.com:eea/volto-n2k.git"
   },
   "dependencies": {
-    "@eeacms/volto-datablocks": "^2.0.13",
-    "@eeacms/volto-resize-helper": "^0.2.4",
-    "@eeacms/volto-openlayers-map": "0.1.2",
-    "@eeacms/volto-tabs-block": "1.2.7",
-    "d3": "^7.1.1",
-    "d3-shape": "^3.0.1",
+    "@eeacms/volto-datablocks": "*",
+    "@eeacms/volto-resize-helper": "*",
+    "@eeacms/volto-openlayers-map": "*",
+    "@eeacms/volto-tabs-block": "*",
+    "volto-slate": "*",
+    "d3": "^7.6.1",
+    "d3-shape": "^3.1.0",
     "react-lazy-load-image-component": "1.5.1",
     "react-stickynode": "^4.0.0",
     "react-use-localstorage": "^3.5.3",
     "resize-observer-polyfill": "1.5.1",
-    "slick-carousel": "1.8.1",
-    "volto-slate": "^4.0.3"
+    "slick-carousel": "1.8.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
@@ -43,6 +43,8 @@
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",

package/src/components/manage/Blocks/BubbleChart/BubbleChart.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import _uniqueId from 'lodash/uniqueId';
-import { pack, hierarchy } from 'd3';
-import * as d3 from 'd3';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness, getContrastColor } from '@eeacms/volto-n2k/helpers';
 import { FormattedValue } from '@eeacms/volto-datablocks/Utils';
 import ChartContext from './ChartContext';
 
 function BubbleChart(props) {
-  const { chartData, interpolation } = props;
+  const { d3, chartData, interpolation } = props;
   const { element, height, width, popup, setPopup } = React.useContext(
     ChartContext,
   );
-  const root = pack().size([width, height]).padding(10)(
-    hierarchy({ children: chartData })
+  const root = d3.pack().size([width, height]).padding(10)(
+    d3
+      .hierarchy({ children: chartData })
       .sum((d) => d.value)
       .sort((a, b) => b.value - a.value),
   );
@@ -98,4 +98,4 @@ function BubbleChart(props) {
     </React.Fragment>
   );
 }
-export default BubbleChart;
+export default injectLazyLibs(['d3'])(BubbleChart);

package/src/components/manage/Blocks/ExplodedPiesChart/Pie.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import * as d3 from 'd3';
 import { Popup } from 'semantic-ui-react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
 
 const Arc = ({ data, index, createArc, format, size }) => {
@@ -73,6 +73,8 @@ const Arc = ({ data, index, createArc, format, size }) => {
 };
 
 const Pie = (props) => {
+  const { d3 } = props;
+
   const createPie = d3
     .pie()
     .value((d) => d.value)
@@ -122,4 +124,4 @@ const Pie = (props) => {
   );
 };
 
-export default Pie;
+export default injectLazyLibs(['d3'])(Pie);

package/src/components/manage/Blocks/ExplodedPiesChart/View.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
-import * as d3 from 'd3';
-import './style.less';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import Pie from './Pie';
 
+import './style.less';
+
 const View = (props) => {
-  const { placeholder = 'No results' } = props;
+  const { d3, placeholder = 'No results' } = props;
   const { x = null, y = null, x_colors = [], precision = 2 } = props.data;
   const data = props.provider_data || {};
   const x_values = data?.[x] || [];
@@ -77,4 +78,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default injectLazyLibs(['d3'])(View);

package/src/components/manage/Blocks/ExplodedPiesChart/style.less

@@ -44,7 +44,7 @@
       overflow: hidden;
       width: 100%;
       color: #013c60;
-      font-family: 'OpenSans', arial;
+      font-family: 'OpenSans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
       font-size: 12px;
       font-weight: 600;
       text-overflow: ellipsis;

package/src/components/manage/Blocks/HabitatsBanner/style.less

@@ -6,7 +6,7 @@ div#view .habitat-banner-details .ui.container > * {
   padding: 1.5em 0;
   background-color: #04a77d;
   color: #fff;
-  font-family: 'RajdhaniB';
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
   .habitat-details {
     display: flex;
@@ -33,7 +33,7 @@ div#view .habitat-banner-details .ui.container > * {
       }
 
       .info {
-        font-family: 'RajdhaniR';
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 18px;
         font-weight: 600;
         line-height: 18px;

package/src/components/manage/Blocks/ImageText/Edit.jsx

@@ -3,7 +3,7 @@ import config from '@plone/volto/registry';
 import { SidebarPortal } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import SlateEditor from 'volto-slate/editor/SlateEditor';
-import { Editor } from 'volto-slate/utils';
+import { Editor } from 'slate';
 import getSchema from './schema';
 import cx from 'classnames';
 import './styles.less';

package/src/components/manage/Blocks/ImageText/View.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
 import { serializeNodes } from 'volto-slate/editor/render';
-import { Editor } from 'volto-slate/utils';
+import { Editor } from 'slate';
 import cx from 'classnames';
 import './styles.less';
 

package/src/components/manage/Blocks/SiteBanner/style.less

@@ -2,7 +2,7 @@
   padding: 1.5em 0;
   background-color: #04a77d;
   color: #fff;
-  font-family: 'RajdhaniB';
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
   .ui.container > * {
     margin-bottom: 0 !important;
@@ -26,7 +26,7 @@
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
-    font-family: 'RajdhaniR';
+    font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-size: 18px;
     font-weight: 600;
     line-height: 18px;
@@ -55,7 +55,7 @@
         max-width: 0;
         margin-left: -1rem;
         color: #eb9700;
-        font-family: 'RajdhaniR';
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 14px;
         line-height: 14px;
         transition: max-width 0.3s;
@@ -73,7 +73,7 @@
   }
 
   .site-designation {
-    font-family: 'RajdhaniR';
+    font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-size: 18px;
     font-weight: 400;
     line-height: 18px;

package/src/components/manage/Blocks/SiteProtectedHabitats/style.less

@@ -14,7 +14,7 @@ div#view .ui.container.habitats-wrapper > * {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  font-family: 'RajdhaniB';
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
   .habitats-container {
     position: absolute;

package/src/components/manage/Blocks/SpeciesBanner/style.less

@@ -7,7 +7,7 @@ div#view .species-banner-details .ui.container > * {
   padding: 1.5em 0;
   background-color: #04a77d;
   color: #fff;
-  font-family: 'RajdhaniB';
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
   .species-details {
     display: flex;
@@ -32,7 +32,7 @@ div#view .species-banner-details .ui.container > * {
 
       .info {
         margin-bottom: 1rem;
-        font-family: 'RajdhaniR';
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 18px;
         font-weight: 600;
         line-height: 18px;

package/src/components/manage/Blocks/StackedBarChart/Chart.jsx

@@ -1,13 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import {
-  axisBottom,
-  axisLeft,
-  format,
-  select,
-  scaleBand,
-  scaleLinear,
-} from 'd3';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import ChartContext from './ChartContext';
 
 /**
@@ -19,6 +12,8 @@ import ChartContext from './ChartContext';
  */
 
 function Chart(props) {
+  const { d3 } = props;
+  const { axisBottom, axisLeft, format, select, scaleBand, scaleLinear } = d3;
   const [scales, setScales] = useState();
   const [popup, setPopup] = useState();
   const chartWrapper = useRef();
@@ -124,4 +119,4 @@ function Chart(props) {
   );
 }
 
-export default Chart;
+export default injectLazyLibs(['d3'])(Chart);

package/src/components/manage/Blocks/StackedBarChart/StackedBars.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { scaleOrdinal, schemeSpectral, stack } from 'd3';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
 import ChartContext from './ChartContext';
 
@@ -11,6 +11,8 @@ const getSerieData = (serie) => {
 };
 
 function StackedBars(props) {
+  const { d3 } = props;
+  const { scaleOrdinal, schemeSpectral, stack } = d3;
   const {
     element,
     height,
@@ -113,4 +115,4 @@ function StackedBars(props) {
     </React.Fragment>
   );
 }
-export default StackedBars;
+export default injectLazyLibs(['d3'])(StackedBars);

package/src/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-extend-native */
 import React from 'react';
+import loadable from '@loadable/component';
 
 import localStorage from './store';
 
@@ -7,12 +8,12 @@ import installAppExtras from './components/theme/AppExtras';
 
 import { LinkElement } from './components/manage/Blocks/SlateLink/render';
 import installBodyClass from './components/manage/Blocks/BodyClass';
-// import installBubbleChart from './components/manage/Blocks/BubbleChart';
+import installBubbleChart from './components/manage/Blocks/BubbleChart';
 import installCarouselHorizontal from './components/manage/Blocks/CarouselHorizontal';
 import installCddaShape from './components/manage/Blocks/CddaShape';
 import installConnectedList from './components/manage/Blocks/List';
 import installContactBlock from './components/manage/Blocks/ContactBlock';
-// import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
+import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
 import installExploreHabitats from './components/manage/Blocks/ExploreHabitats';
 import installExploreSites from './components/manage/Blocks/ExploreSites';
 import installExploreSpecies from './components/manage/Blocks/ExploreSpecies';
@@ -35,7 +36,7 @@ import installSpeciesBanner from './components/manage/Blocks/SpeciesBanner';
 import installSpeciesClassification from './components/manage/Blocks/SpeciesClassification';
 import installSpeciesDistribution from './components/manage/Blocks/SpeciesDistribution';
 import installSpeciesProtectedSites from './components/manage/Blocks/SpeciesProtectedSites';
-// import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
+import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
 import installTilesImages from './components/manage/Blocks/TilesImages';
 
 import { LINK } from 'volto-slate/constants';
@@ -123,16 +124,21 @@ const applyConfig = (config) => {
 
   config.settings.slate.elements[LINK] = LinkElement;
 
+  config.settings.loadables = {
+    ...config.settings.loadables,
+    d3: loadable.lib(() => import('d3')),
+  };
+
   return [
     installAppExtras,
 
     installBodyClass,
-    // installBubbleChart,
+    installBubbleChart,
     installCarouselHorizontal,
     installCddaShape,
     installConnectedList,
     installContactBlock,
-    // installExplodedPiesChart,
+    installExplodedPiesChart,
     installExploreHabitats,
     installExploreSites,
     installExploreSpecies,
@@ -155,7 +161,7 @@ const applyConfig = (config) => {
     installSpeciesClassification,
     installSpeciesDistribution,
     installSpeciesProtectedSites,
-    // installStackedBarChart,
+    installStackedBarChart,
     installTilesImages,
   ].reduce((acc, apply) => apply(acc), config);
 };

package/src/less/styles.less

@@ -127,7 +127,7 @@
       text-align: left;
       transform: translate(-100%, 0);
 
-      @media only screen and (max-width: @largestMobileScreen + 53px) {
+      @media only screen and (max-width: calc(@largestMobileScreen + 53px)) {
         display: none;
       }
     }