@eeacms/volto-hero-block 3.0.1 → 5.0.0

package/CHANGELOG.md

@@ -4,6 +4,38 @@ 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.0.0](https://github.com/eea/volto-hero-block/compare/4.0.0...5.0.0) - 7 March 2023
+
+#### :nail_care: Enhancements
+
+- change(hero): Performance improvement by lazy loading image #15 from eea/performance_lazy_image [ichim-david - [`2c61703`](https://github.com/eea/volto-hero-block/commit/2c617034158a0c6bd7fb7a12f71d13f2664021d2)]
+
+#### :house: Internal changes
+
+- chore(import): Use absolute import [Alin Voinea - [`317feb0`](https://github.com/eea/volto-hero-block/commit/317feb0341c1b2d16fdee61f3dcb3d661d973820)]
+
+#### :hammer_and_wrench: Others
+
+- Release 5.0.0 [Alin Voinea - [`fb56e6c`](https://github.com/eea/volto-hero-block/commit/fb56e6c3b68d1bec5e346bf156e1408df4a567fe)]
+- 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)]
+- 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)]
+## [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
+
+#### :nail_care: Enhancements
+
+- change(theme): color_picker widget for themes #12 from eea/color_pick_themes [ichim-david - [`d3e0e92`](https://github.com/eea/volto-hero-block/commit/d3e0e9266795b09d465cc00bff752040c8274bd8)]
+
+#### :hammer_and_wrench: Others
+
+- Release 4.0.0 [Alin Voinea - [`4f211df`](https://github.com/eea/volto-hero-block/commit/4f211df1c6488d1d70f009b592b828575ee783d6)]
+- lint fix [David Ichim - [`1a51209`](https://github.com/eea/volto-hero-block/commit/1a51209dbaec1b9aa1a7e16f3d997dcf5fa8f764)]
+- more theme_picker [Andrei Grigore - [`801ead1`](https://github.com/eea/volto-hero-block/commit/801ead1355eeb4a4fea371b84b91db3e651d7a40)]
+- add theme_picker widget [Andrei Grigore - [`aef11f7`](https://github.com/eea/volto-hero-block/commit/aef11f7c26c3e2ec5d997ede076062bf9d23237c)]
+- color_picker widget for themes [andreiggr - [`4037c24`](https://github.com/eea/volto-hero-block/commit/4037c24b850b5f514a2bafba156fd7888678cea5)]
 ### [3.0.1](https://github.com/eea/volto-hero-block/compare/3.0.0...3.0.1) - 27 January 2023
 
 #### :rocket: New Features
@@ -16,7 +48,6 @@ 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
@@ -25,11 +56,8 @@ 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
@@ -38,12 +66,6 @@ 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
@@ -53,7 +75,6 @@ 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
@@ -65,7 +86,6 @@ 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
@@ -104,7 +124,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "3.0.1",
+  "version": "5.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,7 +20,8 @@
     "@eeacms/volto-object-widget"
   ],
   "dependencies": {
-    "@eeacms/volto-object-widget": "*"
+    "@eeacms/volto-object-widget": "*",
+    "@eeacms/volto-widget-theme-picker": "^1.0.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

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

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import { isImageGif } from '@eeacms/volto-hero-block/helpers';
+import { useOnScreen } from '@eeacms/volto-hero-block/hooks';
 
 Hero.propTypes = {
   image: PropTypes.string,
@@ -30,6 +31,9 @@ function Hero({
   const isExternal = !isInternalURL(image);
   const { alignContent = 'center', backgroundVariant = 'primary' } =
     styles || {};
+
+  const bgImgRef = React.useRef();
+  const onScreen = useOnScreen(bgImgRef);
   return (
     <div
       className={cx(
@@ -59,8 +63,9 @@ function Hero({
       >
         <div
           className={cx('hero-block-image', styles?.bg)}
+          ref={bgImgRef}
           style={
-            image
+            image && onScreen
               ? {
                   backgroundImage: isExternal
                     ? `url(${image})`

package/src/components/Blocks/Hero/schema.js

@@ -1,4 +1,5 @@
 import { addStyling } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import alignTopSVG from '@plone/volto/icons/move-up.svg';
 import alignCenterSVG from '@plone/volto/icons/row.svg';
@@ -126,11 +127,15 @@ export const stylingSchema = (props) => {
       },
       backgroundVariant: {
         title: 'Background theme',
-        choices: [
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
-          ['grey', 'Grey'],
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+          //and add extra ones here
         ],
       },
       alignContent: {
@@ -149,18 +154,28 @@ export const stylingSchema = (props) => {
       },
       textVariant: {
         title: 'Text theme',
-        choices: [
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+          //and add extra ones here
         ],
       },
       buttonVariant: {
         title: 'Button theme',
-        choices: [
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+          //and add extra ones here
         ],
       },
       buttonAlign: {

package/src/hooks.js

@@ -0,0 +1,31 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+
+function useOnScreen(ref, rootMargin = '0px') {
+  const [isIntersecting, setIntersecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+        threshold: 0,
+        root: null,
+      },
+    );
+    if (ref?.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref?.current) {
+        observer.unobserve(ref.current);
+      }
+      observer.disconnect();
+    };
+  }, [ref, rootMargin]);
+  return isIntersecting;
+}
+
+export { useOnScreen };