@eeacms/volto-hero-block 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.0](https://github.com/eea/volto-hero-block/compare/5.3.1...5.4.0) - 12 June 2023
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- Release 5.4.0 [Alin Voinea - [`1b54e52`](https://github.com/eea/volto-hero-block/commit/1b54e52ad0f3185917d19015220037efb407422c)]
+- test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`531ac2a`](https://github.com/eea/volto-hero-block/commit/531ac2a53eec82921d21d2606553580597fc8c82)]
+- test: Add cypress test for basic functionality and demo gif to README - refs #253277 [ana-oprea - [`9f8cd97`](https://github.com/eea/volto-hero-block/commit/9f8cd978e1cd776f44be1adc23aae19cf1efda49)]
+- test: Add unit tests for Hero, Copyright and helpers - refs #253277 [ana-oprea - [`3949378`](https://github.com/eea/volto-hero-block/commit/3949378060a7eb373e8ded529f7047d5c5a60aa9)]
+- test: Fix test config, coverage Refs #253277 [valentinab25 - [`33c1d94`](https://github.com/eea/volto-hero-block/commit/33c1d949c32b69556c05a74cc28ed9aef4112f83)]
+- merge develop into this branch [Miu Razvan - [`cc1cda3`](https://github.com/eea/volto-hero-block/commit/cc1cda3edcbd2c2cbbdda8a3ec03d7084b6eca5c)]
+- clean up [Miu Razvan - [`2a51fcf`](https://github.com/eea/volto-hero-block/commit/2a51fcf5a79a6497a3f7609216efe944c45a0af0)]
+- other: update getFieldURL function [Miu Razvan - [`8c9ee98`](https://github.com/eea/volto-hero-block/commit/8c9ee980e898cb09a553f5956871c0b285c80280)]
+- update with getFieldURL on buttonLink [tedw87 - [`4d1fd61`](https://github.com/eea/volto-hero-block/commit/4d1fd61faba366a96a54c23e67d7d306364924fe)]
+- refactor code [tedw87 - [`0bf669d`](https://github.com/eea/volto-hero-block/commit/0bf669d7d150d1b9e33ff6e727d6cf47f6d4871e)]
+### [5.3.1](https://github.com/eea/volto-hero-block/compare/5.3.0...5.3.1) - 22 May 2023
+
+#### :hammer_and_wrench: Others
+
+- 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)]
 ### [5.3.0](https://github.com/eea/volto-hero-block/compare/5.2.0...5.3.0) - 27 March 2023
 
 #### :rocket: New Features

package/README.md

@@ -19,7 +19,7 @@ Enhanced Hero Block [Volto](https://github.com/plone/volto) add-on
 
 ## Features
 
-Demo GIF
+![Hero Block](https://github.com/eea/volto-hero-block/raw/docs/docs/volto-hero.gif)
 
 ## Upgrade
 

package/jest-addon.config.js

@@ -5,19 +5,19 @@ 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',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Copyright from './Copyright';
+import { Icon } from 'semantic-ui-react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import config from '@plone/volto/registry';
+
+const mockStore = configureStore();
+
+test('renders copyright', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const copyrightPrefix =
+    config.blocks.blocksConfig.hero?.copyrightPrefix || '';
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Copyright copyrightPosition={'left'}>
+        <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
+        <Copyright.Icon>
+          <Icon className={'copyright outline'} />
+        </Copyright.Icon>
+        <Copyright.Text>Copyright Text Test</Copyright.Text>
+      </Copyright>
+    </Provider>,
+  );
+
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -18,11 +18,13 @@ import {
 } from '@plone/volto-slate/actions';
 
 import { createSlateHeader } from '@eeacms/volto-hero-block/helpers';
+import { getFieldURL } from '@eeacms/volto-hero-block/helpers';
 
 import Copyright from './Copyright';
 import Hero from './Hero';
 
-const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
+const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {
+  const buttonLink = getFieldURL(props.buttonLink);
   const { buttonVariant } = styles || {};
 
   return buttonLabel ? (

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

@@ -2,8 +2,8 @@ import React from 'react';
 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';
+import { isImageGif, getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { useFirstVisited } from '@eeacms/volto-hero-block/hooks';
 
 Hero.propTypes = {
   image: PropTypes.string,
@@ -19,7 +19,6 @@ Hero.propTypes = {
 };
 
 function Hero({
-  image,
   overlay = true,
   fullWidth = true,
   fullHeight = true,
@@ -27,13 +26,15 @@ function Hero({
   spaced = false,
   inverted = true,
   styles,
+  ...props
 }) {
+  const image = getFieldURL(props.image);
   const isExternal = !isInternalURL(image);
   const { alignContent = 'center', backgroundVariant = 'primary' } =
     styles || {};
 
   const bgImgRef = React.useRef();
-  const onScreen = useOnScreen(bgImgRef);
+  const onScreen = useFirstVisited(bgImgRef);
   return (
     <div
       className={cx(

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Hero from './Hero';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+
+const mockStore = configureStore();
+
+test('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();
+});

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

@@ -6,9 +6,11 @@ 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 config from '@plone/volto/registry';
 
-const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
+const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {
+  const buttonLink = getFieldURL(props.buttonLink);
   const { buttonVariant = 'white' } = styles || {};
 
   return buttonLabel ? (

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

@@ -84,6 +84,18 @@ export default () => {
       },
       copyrightIcon: {
         title: 'Icon',
+        description: (
+          <>
+            Ex. ri-copyright-line. See{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://remixicon.com/"
+            >
+              Remix Icon set
+            </a>
+          </>
+        ),
         default: 'ri-copyright-line',
       },
       copyrightPosition: {

package/src/helpers.js

@@ -1,5 +1,23 @@
-import { isArray } from 'lodash';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};
 
 const createEmptyHeader = () => {
   return {

package/src/helpers.test.js

@@ -0,0 +1,66 @@
+import { createSlateHeader, serializeText, isImageGif } from './helpers';
+import { isArray } from 'lodash';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+
+jest.mock('@plone/volto-slate/editor/render', () => ({
+  serializeNodes: jest.fn(),
+}));
+
+describe('createSlateHeader', () => {
+  it('should return the text if it is an array', () => {
+    const text = ['some', 'text'];
+    expect(createSlateHeader(text)).toEqual(text);
+  });
+
+  it('should return an array with an empty header if the text is not an array', () => {
+    const text = 'some text';
+    expect(createSlateHeader(text)).toEqual([
+      {
+        type: 'h2',
+        children: [{ text: '' }],
+      },
+    ]);
+  });
+});
+
+describe('serializeText', () => {
+  it('should return the text when it is not an array', () => {
+    const text = 'Hello, World!';
+
+    expect(serializeText(text)).toEqual(text);
+    expect(isArray(text)).toBe(false);
+    expect(serializeNodes).not.toHaveBeenCalled();
+  });
+
+  it('should call serializeNodes when text is an array', () => {
+    const text = ['Hello', 'World!'];
+
+    serializeText(text);
+    expect(isArray(text)).toBe(true);
+    expect(serializeNodes).toHaveBeenCalledWith(text);
+  });
+});
+
+describe('isImageGif', () => {
+  it('should return true when input is a gif image', () => {
+    const input = 'image.gif';
+    const result = isImageGif(input);
+    expect(result).toBeTruthy();
+  });
+
+  it('should return false when input is not a gif image', () => {
+    const input = 'image.jpg';
+    const result = isImageGif(input);
+    expect(result).toBeFalsy();
+  });
+
+  it('should return false when input is null or undefined', () => {
+    let input;
+    let result = isImageGif(input);
+    expect(result).toBeFalsy();
+
+    input = null;
+    result = isImageGif(input);
+    expect(result).toBeFalsy();
+  });
+});

package/src/hooks.js

@@ -1,13 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react';
 
-function useOnScreen(ref, rootMargin = '0px') {
-  const [isIntersecting, setIntersecting] = React.useState(false);
-
+function useFirstVisited(ref, rootMargin = '0px') {
+  const [intersected, setIntersected] = React.useState(false);
   React.useEffect(() => {
+    if (intersected) return;
     const observer = new IntersectionObserver(
       ([entry]) => {
-        setIntersecting(entry.isIntersecting);
+        setIntersected(intersected === false ? entry.isIntersecting : true);
       },
       {
         rootMargin,
@@ -24,8 +24,8 @@ function useOnScreen(ref, rootMargin = '0px') {
       }
       observer.disconnect();
     };
-  }, [ref, rootMargin]);
-  return isIntersecting;
+  }, [ref, rootMargin, intersected]);
+  return intersected;
 }
 
-export { useOnScreen };
+export { useFirstVisited };