@eeacms/volto-hero-block 5.4.0 → 5.4.2

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+[ -n "$CI" ] && exit 0
+yarn lint-staged

package/CHANGELOG.md

@@ -4,10 +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).
 
+### [5.4.2](https://github.com/eea/volto-hero-block/compare/5.4.1...5.4.2) - 29 September 2023
+
+#### :house: Internal changes
+
+- style: lint-staged reorder in package.json [Alin Voinea - [`406bd25`](https://github.com/eea/volto-hero-block/commit/406bd25f148e196d8f875ccd8c648511bda711db)]
+
+#### :house: Documentation changes
+
+- docs: Update README and DEVELOP [Alin Voinea - [`4701adf`](https://github.com/eea/volto-hero-block/commit/4701adfd8f364ba43ea8deef4c6efd48fbdfff31)]
+- docs: Update DEVELOP [Alin Voinea - [`ed3c9db`](https://github.com/eea/volto-hero-block/commit/ed3c9db96c7778c8d5c904db98cf12a59c31c0f3)]
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`486dfc8`](https://github.com/eea/volto-hero-block/commit/486dfc8699c5bcec65673807ffc9802705092f47)]
+
+#### :hammer_and_wrench: Others
+
+- test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`9cd9698`](https://github.com/eea/volto-hero-block/commit/9cd9698fc7c6e4b4de6c521573a0dddb21a13ea8)]
+- test: add unit tests for Hero, Edit, helpers, hooks - refs #254313 [ana-oprea - [`89b39af`](https://github.com/eea/volto-hero-block/commit/89b39afe7ad5ce94d341482be91ab55e2c1a31ed)]
+- i18n: Add en [Alin Voinea - [`9cdb7f1`](https://github.com/eea/volto-hero-block/commit/9cdb7f1ff9d81dade3d91551b53cf7200f08937e)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`0fe0d91`](https://github.com/eea/volto-hero-block/commit/0fe0d91fe9c43d10574990e9b163ffc49fe5bee7)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`b1d1446`](https://github.com/eea/volto-hero-block/commit/b1d14467bcde28023b2831235928db1f328d6b0a)]
+### [5.4.1](https://github.com/eea/volto-hero-block/compare/5.4.0...5.4.1) - 24 July 2023
+
 ### [5.4.0](https://github.com/eea/volto-hero-block/compare/5.3.1...5.4.0) - 12 June 2023
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`395db48`](https://github.com/eea/volto-hero-block/commit/395db484f73c2dd2c56233c120a9620340f17d0b)]
 
 #### :hammer_and_wrench: Others
 
@@ -28,6 +50,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - put return statement [Dobricean Ioan Dorian - [`8eff5fd`](https://github.com/eea/volto-hero-block/commit/8eff5fdf977fcbb8cc952d3f45b577b02ca59cb9)]
 - change name and refactor to be more efficent [Dobricean Ioan Dorian - [`ff24145`](https://github.com/eea/volto-hero-block/commit/ff2414542833998ef282376de3fbda8698287849)]
 - stop-image-disappear over and over [Dobricean Ioan Dorian - [`c5b6f54`](https://github.com/eea/volto-hero-block/commit/c5b6f545ac422d95b8d802349aa4cf27af820829)]
+- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`3d38dd0`](https://github.com/eea/volto-hero-block/commit/3d38dd09a36525bda448f67a6d218bc7690a4cc3)]
 ### [5.3.0](https://github.com/eea/volto-hero-block/compare/5.2.0...5.3.0) - 27 March 2023
 
 #### :rocket: New Features
@@ -66,9 +89,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix onScreen hook error #16 from eea/fix-onscreen-hook [ichim-david - [`9123541`](https://github.com/eea/volto-hero-block/commit/91235413f423d7e6c4788d70b687b3ed5d4884b4)]
 - no need for comments [andreiggr - [`a14f9c3`](https://github.com/eea/volto-hero-block/commit/a14f9c3bdddfa22e6b4bbc8318f0ca5bdc9c2d38)]
 - fix hook [andreiggr - [`f7fae73`](https://github.com/eea/volto-hero-block/commit/f7fae73007f79af2f06da1d9b72a53ad86fef4ac)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6b78fc0`](https://github.com/eea/volto-hero-block/commit/6b78fc044a933ab9b4b4694901aa26628ef0a836)]
 - eslint [andreiggr - [`68451b7`](https://github.com/eea/volto-hero-block/commit/68451b725420015fbd5b695e97b8742988d49913)]
 - lazy load huge img on first 10px [andreiggr - [`67dc7d3`](https://github.com/eea/volto-hero-block/commit/67dc7d3475188d692e053032c2639dd1a585c029)]
 - lazy load huge bgimage wip [andreiggr - [`86e45ec`](https://github.com/eea/volto-hero-block/commit/86e45ece842f1cd7452920dffa3a9b4aea945f56)]
+- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`87cbb38`](https://github.com/eea/volto-hero-block/commit/87cbb383290a168f85703573670e17f4e1ed7747)]
 ## [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
 
 #### :nail_care: Enhancements
@@ -94,6 +119,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`ab85c7b`](https://github.com/eea/volto-hero-block/commit/ab85c7bd5bd1e3aec95e02f9b4d026b1203d5739)]
 ## [3.0.0](https://github.com/eea/volto-hero-block/compare/2.1.0...3.0.0) - 22 December 2022
 
 #### :rocket: New Features
@@ -102,8 +128,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f06f58c`](https://github.com/eea/volto-hero-block/commit/f06f58c7cd4cfc15a03208e9c7a4e31fe2eba2f6)]
+- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`20e5bcb`](https://github.com/eea/volto-hero-block/commit/20e5bcb3c4dd538595741928319c3204c5d18f8c)]
 - Cosmetics [Alin Voinea - [`9dac70c`](https://github.com/eea/volto-hero-block/commit/9dac70c0a3bea8e188ede9123f4f99de8e0f6987)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`2d4005f`](https://github.com/eea/volto-hero-block/commit/2d4005f0f31b121e1b7d2e94414f3dff92ec1a16)]
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`2931fcc`](https://github.com/eea/volto-hero-block/commit/2931fccbee5f8e117e5ae9095ba57e63e465ddb3)]
 ### [2.1.0](https://github.com/eea/volto-hero-block/compare/2.0.0...2.1.0) - 12 December 2022
 
 #### :bug: Bug Fixes
@@ -112,6 +141,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`93be4f9`](https://github.com/eea/volto-hero-block/commit/93be4f96fb72cacfc25f9b058cb379d80060ee13)]
+- yarn 3 [Alin Voinea - [`8e2dccd`](https://github.com/eea/volto-hero-block/commit/8e2dccd47cbef3c0871407baa376ce61c540c754)]
+- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`6bc3af3`](https://github.com/eea/volto-hero-block/commit/6bc3af35b4edf07971d1b0ce1648965e8d6e3bc0)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`d7dbbd2`](https://github.com/eea/volto-hero-block/commit/d7dbbd21277dd76bf59d91a4dc8e022b2a6ff99c)]
+- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`3c1f0d6`](https://github.com/eea/volto-hero-block/commit/3c1f0d6e7f8e5318aee3413ec3687d8492376f9d)]
+- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`843017a`](https://github.com/eea/volto-hero-block/commit/843017aa7dbea71cc7888663496e352d287440b4)]
 ## [2.0.0](https://github.com/eea/volto-hero-block/compare/1.0.0...2.0.0) - 16 November 2022
 
 #### :nail_care: Enhancements
@@ -121,6 +156,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`b8f0971`](https://github.com/eea/volto-hero-block/commit/b8f0971b21a5334d40c1b8f5103cea61d9ffe6f1)]
+- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`581dedf`](https://github.com/eea/volto-hero-block/commit/581dedf07410ef2ca09e6ddaa05fbf176400adbb)]
 ## [1.0.0](https://github.com/eea/volto-hero-block/compare/0.2.0...1.0.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -132,6 +168,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Remove cypress.json [Alin Voinea - [`593bdf2`](https://github.com/eea/volto-hero-block/commit/593bdf207ca4fd3f2393117b6f64a44727881ad0)]
 - test(cypress): Upgrade to Cypress 10 / Razzle 4 [Alin Voinea - [`edd48a5`](https://github.com/eea/volto-hero-block/commit/edd48a5c13824bce5e03e46790f1890656b340d8)]
 - Cleanup [Alin Voinea - [`9d72ee7`](https://github.com/eea/volto-hero-block/commit/9d72ee7a06d1c6fed46586d30bb85eae39e670bf)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`95986d0`](https://github.com/eea/volto-hero-block/commit/95986d0b8fd5c3cbb9e6da9059f71e066a8e171b)]
 ### [0.2.0](https://github.com/eea/volto-hero-block/compare/0.1.4...0.2.0) - 6 July 2022
 
 #### :bug: Bug Fixes
@@ -170,6 +207,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update slate footnote support [Miu Razvan - [`c1522b4`](https://github.com/eea/volto-hero-block/commit/c1522b4164dbe6de01771d211d7e0bf3009f44d4)]
 - Use justify content for text and button as well [Miu Razvan - [`08599cc`](https://github.com/eea/volto-hero-block/commit/08599cc45546d9b349128c4f8ce9c01318385811)]
 - Add dependencies [Miu Razvan - [`30e2881`](https://github.com/eea/volto-hero-block/commit/30e2881a2a97a899e7f4cc614a0405c300ac6fee)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b415422`](https://github.com/eea/volto-hero-block/commit/b41542285edd29440a324b101a4dbae9334830bf)]
 ### 0.1.0 - 10 June 2022
 
 #### :hammer_and_wrench: Others

package/DEVELOP.md

@@ -1,7 +1,31 @@
-# volto-addon-template
+# volto-hero-block
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-hero-block.git
+    cd volto-hero-block
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1. Initialize git hooks
+
+    ```Bash
+    yarn prepare
+    ```
+
+1. Happy hacking!
+
+### Or add @eeacms/volto-hero-block to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -10,15 +34,15 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Create new volto app
 
-        yo @plone/volto my-volto-project --addon @eeacms/volto-addon-template --skip-install
+        yo @plone/volto my-volto-project --addon @eeacms/volto-hero-block --skip-install
         cd my-volto-project
 
 1.  Add the following to `mrs.developer.json`:
 
         {
-            "volto-addon-template": {
-                "url": "https://github.com/eea/volto-addon-template.git",
-                "package": "@eeacms/volto-addon-template",
+            "volto-hero-block": {
+                "url": "https://github.com/eea/volto-hero-block.git",
+                "package": "@eeacms/volto-hero-block",
                 "branch": "develop",
                 "path": "src"
             }
@@ -26,18 +50,15 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Install
 
-        yarn develop
+        make develop
         yarn
 
 1.  Start backend
 
-        docker pull plone
-        docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
+        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
 
     ...wait for backend to setup and start - `Ready to handle requests`:
 
-        docker logs -f plone
-
     ...you can also check http://localhost:8080/Plone
 
 1.  Start frontend
@@ -48,4 +69,38 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Happy hacking!
 
-        cd src/addons/volto-addon-template/
+        cd src/addons/volto-hero-block/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-hero-block` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-hero-block/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-hero-block` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/README.md

@@ -29,10 +29,23 @@ This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addSt
 
 ## Getting started
 
+### Try volto-hero-block with Docker
+
+      git clone https://github.com/eea/volto-hero-block.git
+      cd volto-hero-block
+      make
+      make start
+
+Go to http://localhost:3000
+
 ### Add volto-hero-block to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
 
+   ```Bash
+   docker compose up backend
+   ```
+
 1. Start Volto frontend
 
 * If you already have a volto project, just update `package.json`:
@@ -43,7 +56,7 @@ This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addSt
    ],
 
    "dependencies": {
-       "@eeacms/volto-hero-block": "^1.0.0"
+       "@eeacms/volto-hero-block": "*"
    }
    ```
 
@@ -51,7 +64,7 @@ This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addSt
 
    ```
    npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --addon @eeacms/volto-hero-block
+   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-hero-block
    cd my-volto-project
    ```
 
@@ -81,8 +94,6 @@ All Rights Reserved.
 
 See [LICENSE.md](https://github.com/eea/volto-hero-block/blob/master/LICENSE.md) for details.
 
-
 ## Funding
 
 [European Environment Agency (EU)](http://eea.europa.eu)
-

package/cypress.config.js

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

package/docker-compose.yml

@@ -0,0 +1,32 @@
+version: "3"
+services:
+  backend:
+    image: eeacms/plone-backend
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,8 +27,31 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "*",
+    "lint-staged": "*",
     "md5": "^2.3.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
@@ -46,6 +69,7 @@
     "lint:fix": "make lint-fix",
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
-    "cypress:open": "make cypress-open"
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
 }

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

@@ -16,10 +16,10 @@ import {
   uploadContent,
   saveSlateBlockSelection,
 } from '@plone/volto-slate/actions';
-
-import { createSlateHeader } from '@eeacms/volto-hero-block/helpers';
-import { getFieldURL } from '@eeacms/volto-hero-block/helpers';
-
+import {
+  createSlateHeader,
+  getFieldURL,
+} from '@eeacms/volto-hero-block/helpers';
 import Copyright from './Copyright';
 import Hero from './Hero';
 

package/src/components/Blocks/Hero/Edit.test.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import Edit from './Edit';
+import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore([]);
+
+jest.mock('@plone/volto-slate/editor/SlateEditor', () => {
+  return {
+    __esModule: true,
+    default: ({ placeholder, children, onChange, onFocus }) => (
+      <div
+        onChange={(target) => onChange(target)}
+        onFocus={() => onFocus()}
+        id="test"
+      >
+        <div>{placeholder}</div>
+        {children}
+      </div>
+    ),
+  };
+});
+
+const observe = jest.fn();
+const unobserve = jest.fn();
+window.IntersectionObserver = jest.fn((callback) => ({
+  observe,
+  unobserve,
+}));
+
+config.blocks = {
+  blocksConfig: {
+    hero: {
+      copyrightPrefix: 'Test Prefix',
+      schema: {
+        title: 'Hero',
+      },
+    },
+  },
+};
+config.settings = {
+  slate: {
+    textblockExtensions: [],
+  },
+};
+
+describe('Edit component', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      slate_block_selections: {},
+      upload_content: {},
+    });
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Edit />
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it('renders hero text', () => {
+    const data = {
+      text: [
+        {
+          type: 'paragraph',
+          children: [{ text: 'Sample text' }],
+        },
+      ],
+      copyright: 'true',
+      copyrightIcon: 'test',
+      copyrightPosition: 'right',
+      buttonLabel: 'Test',
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <Edit data={data} />
+      </Provider>,
+    );
+
+    expect(container.querySelector('#test')).toBeInTheDocument();
+  });
+
+  it('calls onFocus when SlateEditor is focused', () => {
+    config.blocks = {
+      blocksConfig: {
+        hero: {
+          copyrightPrefix: 'Test Prefix',
+          schema: () => ({
+            title: 'Hero',
+          }),
+        },
+      },
+    };
+    const onSelectBlock = jest.fn();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Edit onSelectBlock={onSelectBlock} />
+      </Provider>,
+    );
+
+    fireEvent.focus(getByText('Add text...'));
+    expect(onSelectBlock).toHaveBeenCalled();
+  });
+});

package/src/components/Blocks/Hero/Hero.test.jsx

@@ -3,38 +3,236 @@ import renderer from 'react-test-renderer';
 import Hero from './Hero';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
+import config from '@plone/volto/registry';
+
+const { settings } = config;
 
 const mockStore = configureStore();
 
-test('renders a hero component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
+const observe = jest.fn();
+const unobserve = jest.fn();
+window.IntersectionObserver = jest.fn((callback) => ({
+  observe,
+  unobserve,
+}));
+
+jest.mock('@eeacms/volto-hero-block/hooks', () => ({
+  useFirstVisited: jest.fn(() => true),
+}));
+
+describe('Hero block', () => {
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image=""
+          overlay={true}
+          fullWidth={true}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={false}
+            styles={{ textVariant: 'white', textAlign: 'left' }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image=""
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={false}
+            styles={{ textVariant: 'white', textAlign: 'left' }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
   });
-  const component = renderer.create(
-    <Provider store={store}>
-      <Hero
-        image=""
-        overlay={true}
-        fullWidth={true}
-        fullHeight={true}
-        spaced={false}
-        inverted={true}
-        styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
-      >
-        <Hero.Text
-          quoted={false}
-          styles={{ textVariant: 'white', textAlign: 'left' }}
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={{ '@type': 'URL', url: 'url_url', href: 'href_url' }}
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={false}
+            styles={{ textVariant: 'white', textAlign: 'left' }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={`${settings.apiPath}/foo/bar`}
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
         >
-          Text test
-        </Hero.Text>
-        <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
-      </Hero>
-    </Provider>,
-  );
-
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+          <Hero.Text
+            quoted={false}
+            styles={{ textVariant: 'white', textAlign: 'left' }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={`${settings.apiPath}/foo/bar.gif`}
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={true}
+            styles={{ textVariant: 'white', textAlign: 'left' }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={`${settings.apiPath}/foo/bar.gif`}
+          styles={{ alignContent: undefined, backgroundVariant: undefined }}
+        >
+          <Hero.Text
+            quoted={true}
+            styles={{ textVariant: undefined, textAlign: undefined }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: undefined }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero image={`${settings.apiPath}/foo/bar.gif`} styles={undefined}>
+          <Hero.Text quoted={true} styles={undefined}>
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={undefined}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

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

@@ -5,8 +5,7 @@ import { UniversalLink } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
 import Hero from './Hero';
 import Copyright from './Copyright';
-import { serializeText } from '@eeacms/volto-hero-block/helpers';
-import { getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { serializeText, getFieldURL } from '@eeacms/volto-hero-block/helpers';
 import config from '@plone/volto/registry';
 
 const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {

package/src/helpers.test.js

@@ -1,4 +1,9 @@
-import { createSlateHeader, serializeText, isImageGif } from './helpers';
+import {
+  getFieldURL,
+  createSlateHeader,
+  serializeText,
+  isImageGif,
+} from './helpers';
 import { isArray } from 'lodash';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
@@ -6,6 +11,94 @@ jest.mock('@plone/volto-slate/editor/render', () => ({
   serializeNodes: jest.fn(),
 }));
 
+describe('getFieldURL', () => {
+  it('handles a URL type object with type and value', () => {
+    const data = {
+      '@type': 'URL',
+      value: 'value_url',
+      url: 'url_url',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('value_url');
+  });
+
+  it('handles an object with type and url', () => {
+    const data = {
+      '@type': 'URL',
+      url: 'url_url',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('url_url');
+  });
+
+  it('handles an object with type and href', () => {
+    const data = {
+      '@type': 'URL',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('href_url');
+  });
+
+  it('handles an object with type and no value, url and href', () => {
+    const data = {
+      '@type': 'URL',
+    };
+    expect(getFieldURL(data)).toEqual({ '@type': 'URL' });
+  });
+
+  it('handles an object without a specific type and url', () => {
+    const data = {
+      url: 'url_url',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('url_url');
+  });
+
+  it('handles an object without a specific type and href', () => {
+    const data = {
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('href_url');
+  });
+
+  it('handles an object without a specific type and no id, url, href', () => {
+    const data = {
+      test: 'test_url',
+    };
+    expect(getFieldURL(data)).toEqual({
+      test: 'test_url',
+    });
+  });
+
+  it('handles an array', () => {
+    const data = [
+      {
+        '@type': 'URL',
+        value: 'value_url',
+        url: 'url_url',
+        href: 'href_url',
+      },
+      {
+        '@id': 'id_url',
+        url: 'url_url',
+        href: 'href_url',
+      },
+    ];
+    expect(getFieldURL(data)).toEqual(['value_url', 'id_url']);
+  });
+
+  it('handles a string', () => {
+    const data = '/some/url';
+    expect(getFieldURL(data)).toEqual('/some/url');
+  });
+
+  it('returns the data unchanged for non-object/non-array/non-string inputs', () => {
+    expect(getFieldURL(42)).toEqual(42);
+    expect(getFieldURL(undefined)).toEqual(undefined);
+    expect(getFieldURL(null)).toEqual(null);
+  });
+});
+
 describe('createSlateHeader', () => {
   it('should return the text if it is an array', () => {
     const text = ['some', 'text'];

package/src/hooks.test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useFirstVisited } from './hooks';
+
+let observerCallback;
+let observeMock = jest.fn();
+let unobserveMock = jest.fn();
+let disconnectMock = jest.fn();
+window.IntersectionObserver = jest.fn((callback) => {
+  observerCallback = callback;
+  return {
+    observe: observeMock,
+    unobserve: unobserveMock,
+    disconnect: disconnectMock,
+  };
+});
+
+describe('useFirstVisited', () => {
+  it('should observe and unobserve the ref element', () => {
+    const ref = { current: {} };
+    const rootMargin = '10px';
+
+    const TestComponent = () => {
+      const intersected = useFirstVisited(ref, rootMargin);
+      return <div>{intersected ? 'Intersected' : 'Not Intersected'}</div>;
+    };
+
+    const { container, unmount } = render(<TestComponent />);
+
+    // Initial render: Not Intersected
+    expect(container.textContent).toBe('Not Intersected');
+
+    // Simulate the element becoming visible in the viewport
+    observerCallback([{ isIntersecting: true }]);
+
+    // Re-render: Intersected
+    expect(container.textContent).toBe('Intersected');
+
+    // Unmount the component
+    unmount();
+
+    // Observer should be unobserved and disconnected
+    expect(unobserveMock).toHaveBeenCalled();
+    expect(disconnectMock).toHaveBeenCalled();
+  });
+
+  it('should not observe when intersected is true', () => {
+    const ref = { current: {} };
+
+    const TestComponent = () => {
+      const intersected = useFirstVisited(ref);
+      return <div>{intersected ? 'Intersected' : 'Not Intersected'}</div>;
+    };
+
+    const { container } = render(<TestComponent />);
+
+    // Initial render: Not Intersected
+    expect(container.textContent).toBe('Not Intersected');
+
+    // Simulate the element becoming visible in the viewport
+    observerCallback([{ isIntersecting: true }]);
+
+    // Re-render: Intersected
+    expect(container.textContent).toBe('Intersected');
+
+    // Simulate another render
+    // Intersected should stay true and not observe again
+    observerCallback([{ isIntersecting: false }]);
+
+    // Re-render: Intersected
+    expect(container.textContent).toBe('Not Intersected');
+    // expect(observeMock).not.toHaveBeenCalled();
+  });
+});

package/.i18n.babel.config.js

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