@eeacms/volto-hero-block 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -4,7 +4,33 @@ 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).
 
-### [7.0.0](https://github.com/eea/volto-hero-block/compare/6.0.1...7.0.0) - 22 April 2024
+### [7.1.0](https://github.com/eea/volto-hero-block/compare/7.0.1...7.1.0) - 28 June 2024
+
+#### :bug: Bug Fixes
+
+- fix(hero): default values for non boolean are set by default not defaultValue [David Ichim - [`608ec21`](https://github.com/eea/volto-hero-block/commit/608ec21f6a3c14ee0b5ec3dc6864650adc0c83bc)]
+
+#### :nail_care: Enhancements
+
+- change(hero): cache containerCssStyles and use it only on top level [David Ichim - [`cd666c8`](https://github.com/eea/volto-hero-block/commit/cd666c86d80d17a1acaca68fd37778976cbb607e)]
+
+#### :house: Internal changes
+
+- chore: package.json [alin - [`516b46f`](https://github.com/eea/volto-hero-block/commit/516b46fc82000ac4ccb4d08c6a71acd4c548385b)]
+
+#### :hammer_and_wrench: Others
+
+- Added back style to the divs as required by the other developers [David Ichim - [`56c6156`](https://github.com/eea/volto-hero-block/commit/56c61566a6338a0147ab7c439b21e7120d2e88e9)]
+- bump package version to 7.1.0 [David Ichim - [`9f4cf35`](https://github.com/eea/volto-hero-block/commit/9f4cf3571205c578aaefcb6ffc6779e3d557f07f)]
+- add height property [dorutrip - [`86b0f13`](https://github.com/eea/volto-hero-block/commit/86b0f13034d7ee3a2c21b5865250af8c5a39b3cc)]
+### [7.0.1](https://github.com/eea/volto-hero-block/compare/7.0.0...7.0.1) - 13 May 2024
+
+#### :bug: Bug Fixes
+
+- fix: cypress 13.1.0 [alin - [`2569c63`](https://github.com/eea/volto-hero-block/commit/2569c63e0c1ef229c0758ba918378d56b4de7a10)]
+- fix: Pin dependency to volto-widget-theme-picker [alin - [`05bb2e4`](https://github.com/eea/volto-hero-block/commit/05bb2e43f166fabe9fa8426673b115c01f1e415b)]
+
+## [7.0.0](https://github.com/eea/volto-hero-block/compare/6.0.1...7.0.0) - 22 April 2024
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,12 +21,13 @@
   ],
   "dependencies": {
     "@eeacms/volto-object-widget": "*",
-    "@eeacms/volto-widget-theme-picker": "^1.0.1"
+    "@eeacms/volto-widget-theme-picker": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "13.1.0",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",

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

@@ -26,15 +26,32 @@ function Hero({
   spaced = false,
   inverted = true,
   styles,
+  height,
   ...props
 }) {
   const image = getFieldURL(props.image);
   const isExternal = !isInternalURL(image);
   const { alignContent = 'center', backgroundVariant = 'primary' } =
     styles || {};
-
   const bgImgRef = React.useRef();
   const onScreen = useFirstVisited(bgImgRef);
+  const containerCssStyles = React.useMemo(
+    () => ({
+      ...(height && !fullHeight ? { height } : {}),
+    }),
+    [height, fullHeight],
+  );
+
+  const backgroundImageStyle =
+    onScreen && image
+      ? {
+          backgroundImage: isExternal
+            ? `url(${image})`
+            : isImageGif(image)
+            ? `url(${image}/@@images/image)`
+            : `url(${image}/@@images/image/huge)`,
+        }
+      : {};
 
   return (
     <div
@@ -62,21 +79,12 @@ function Hero({
             'full-width': fullWidth,
           },
         )}
+        style={containerCssStyles}
       >
         <div
           className={cx('hero-block-image', styles?.bg)}
           ref={bgImgRef}
-          style={
-            image && onScreen
-              ? {
-                  backgroundImage: isExternal
-                    ? `url(${image})`
-                    : isImageGif(image)
-                    ? `url(${image}/@@images/image)`
-                    : `url(${image}/@@images/image/huge)`,
-                }
-              : {}
-          }
+          style={backgroundImageStyle}
         />
         {image && overlay && (
           <div className="hero-block-image-overlay dark-overlay-4"></div>
@@ -87,6 +95,7 @@ function Hero({
           'hero-block-inner-wrapper d-flex',
           `flex-items-${alignContent}`,
         )}
+        style={containerCssStyles}
       >
         <div className="hero-block-body">{children}</div>
       </div>

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

@@ -13,7 +13,7 @@ const ALIGN_INFO_MAP = {
   '': [clearSVG, 'None'],
 };
 
-export const HeroBlockSchema = () => {
+export const HeroBlockSchema = ({ data }) => {
   return {
     title: 'Hero',
     fieldsets: [
@@ -23,6 +23,7 @@ export const HeroBlockSchema = () => {
         fields: [
           'fullWidth',
           'fullHeight',
+          ...(!data?.fullHeight ? ['height'] : []),
           'quoted',
           'spaced',
           'inverted',
@@ -100,7 +101,13 @@ export const HeroBlockSchema = () => {
         title: 'Align',
         widget: 'align',
         actions: ['left', 'right'],
-        defaultValue: 'left',
+        default: 'left',
+      },
+      height: {
+        title: 'Height',
+        description:
+          'Use CSS numeric dimmension (ex: 100px or 20vh). ' +
+          'Images cannnot be made smaller than min-height.',
       },
     },
     required: [],
@@ -133,7 +140,7 @@ export const stylingSchema = (props) => {
         widget: 'align',
         actions: Object.keys(ALIGN_INFO_MAP),
         actionsInfoMap: ALIGN_INFO_MAP,
-        defaultValue: 'has--bg--center',
+        default: 'has--bg--center',
       },
       backgroundVariant: {
         title: 'Background theme',
@@ -155,12 +162,13 @@ export const stylingSchema = (props) => {
           ['center', 'Center'],
           ['end', 'Bottom'],
         ],
+        default: 'center',
       },
       textAlign: {
         title: 'Text align',
         widget: 'align',
         actions: ['left', 'center', 'right'],
-        defaultValue: 'left',
+        default: 'left',
       },
       textVariant: {
         title: 'Text theme',
@@ -192,7 +200,7 @@ export const stylingSchema = (props) => {
         title: 'Button align',
         widget: 'align',
         actions: ['left', 'center', 'right'],
-        defaultValue: 'left',
+        default: 'left',
       },
     },
     required: [],