@eeacms/volto-hero-block 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -4,15 +4,29 @@ 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).
 
-### [2.0.0](https://github.com/eea/volto-hero-block/compare/1.0.0...2.0.0) - 15 November 2022
+### [3.0.0](https://github.com/eea/volto-hero-block/compare/2.1.0...3.0.0) - 22 December 2022
 
-#### :nail_care: Enhancements
+#### :rocket: New Features
 
-- refactor(Styling): Use schemaEnhancer in favor of StyleWrapper [Alin Voinea - [`dacf4db`](https://github.com/eea/volto-hero-block/commit/dacf4db6c59a584639f13c7ce8a3d7bd808ea64c)]
+- feat(copyright): Add image copyright info - refs #158210 [Alin Voinea - [`f0f2b09`](https://github.com/eea/volto-hero-block/commit/f0f2b09633baddcd6f11ccf52bf9e40652dcbfad)]
+
+#### :hammer_and_wrench: Others
+
+- 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)]
+### [2.1.0](https://github.com/eea/volto-hero-block/compare/2.0.0...2.1.0) - 12 December 2022
+
+#### :bug: Bug Fixes
 
-#### :house: Internal changes
+- fix(gif): Use ES6 with isImageGif utility - refs #158188 [Alin Voinea - [`ad32432`](https://github.com/eea/volto-hero-block/commit/ad32432ee320bb4e43f20e260f2900269adf0401)]
 
-- style(volto-hero-block): set correctly the background color [Miu Razvan - [`9358a17`](https://github.com/eea/volto-hero-block/commit/9358a1777c25664cbfe9c66a6c9054521a11ff24)]
+#### :hammer_and_wrench: Others
+
+## [2.0.0](https://github.com/eea/volto-hero-block/compare/1.0.0...2.0.0) - 16 November 2022
+
+#### :nail_care: Enhancements
+
+- refactor(Styling): Use schemaEnhancer in favor of StyleWrapper [Alin Voinea - [`dacf4db`](https://github.com/eea/volto-hero-block/commit/dacf4db6c59a584639f13c7ce8a3d7bd808ea64c)]
 
 #### :hammer_and_wrench: Others
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,8 +23,8 @@
     "@eeacms/volto-object-widget": "*"
   },
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Copyright.propTypes = {
+  copyrightPosition: PropTypes.oneOf(['left', 'right']),
+};
+
+function Copyright({ children, ...rest }) {
+  return (
+    <div className={`eea copyright ${rest.copyrightPosition}`}>
+      <div className={'wrapper'}>{children}</div>
+    </div>
+  );
+}
+
+Copyright.Icon = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-wrapper'}>
+    {children}
+  </span>
+);
+
+Copyright.Text = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-content'}>
+    {children}
+  </span>
+);
+export default Copyright;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import { connect } from 'react-redux';
+import { Icon } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import {
   BlockDataForm,
@@ -16,6 +17,7 @@ import {
 
 import { createSlateHeader } from '@eeacms/volto-hero-block/helpers';
 
+import Copyright from './Copyright';
 import Hero from './Hero';
 import getSchema from './schema';
 
@@ -45,7 +47,7 @@ const Edit = (props) => {
     onChangeBlock,
     onSelectBlock,
   } = props;
-  const { text } = data;
+  const { text, copyright, copyrightIcon, copyrightPosition } = data;
   const schema = React.useMemo(() => getSchema(props), [props]);
 
   const withBlockProperties = React.useCallback(
@@ -89,6 +91,16 @@ const Edit = (props) => {
         <Hero.Meta {...data}>
           <Metadata {...data} />
         </Hero.Meta>
+        {copyright ? (
+          <Copyright copyrightPosition={copyrightPosition}>
+            <Copyright.Icon>
+              <Icon className={copyrightIcon} />
+            </Copyright.Icon>
+            <Copyright.Text>{copyright}</Copyright.Text>
+          </Copyright>
+        ) : (
+          ''
+        )}
       </Hero>
 
       <SidebarPortal selected={selected}>

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

@@ -2,6 +2,7 @@ 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';
 
 Hero.propTypes = {
   image: PropTypes.string,
@@ -63,6 +64,8 @@ function Hero({
               ? {
                   backgroundImage: isExternal
                     ? `url(${image})`
+                    : isImageGif(image)
+                    ? `url(${image}/@@images/image)`
                     : `url(${image}/@@images/image/huge)`,
                 }
               : {}

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
+import { Icon } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import Hero from './Hero';
+import Copyright from './Copyright';
 import { serializeText } from '@eeacms/volto-hero-block/helpers';
 
 const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
@@ -21,13 +23,23 @@ const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
 
 const View = (props) => {
   const { data = {} } = props;
-  const { text } = data;
+  const { text, copyright, copyrightIcon, copyrightPosition } = data;
   return (
     <Hero {...data}>
       <Hero.Text {...data}>{serializeText(text)}</Hero.Text>
       <Hero.Meta {...data}>
         <Metadata {...data} />
       </Hero.Meta>
+      {copyright ? (
+        <Copyright copyrightPosition={copyrightPosition}>
+          <Copyright.Icon>
+            <Icon className={copyrightIcon} />
+          </Copyright.Icon>
+          <Copyright.Text>{copyright}</Copyright.Text>
+        </Copyright>
+      ) : (
+        ''
+      )}
     </Hero>
   );
 };

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

@@ -19,6 +19,11 @@ export default () => {
           'image',
         ],
       },
+      {
+        id: 'copyright',
+        title: 'Copyright',
+        fields: ['copyright', 'copyrightIcon', 'copyrightPosition'],
+      },
     ],
     properties: {
       fullWidth: {
@@ -63,6 +68,19 @@ export default () => {
         title: 'Image',
         widget: 'attachedimage',
       },
+      copyright: {
+        title: 'Text',
+      },
+      copyrightIcon: {
+        title: 'Icon',
+        default: 'ri-copyright-line',
+      },
+      copyrightPosition: {
+        title: 'Align',
+        widget: 'align',
+        actions: ['left', 'right'],
+        defaultValue: 'left',
+      },
     },
     required: [],
   };

package/src/helpers.js

@@ -15,3 +15,7 @@ export const createSlateHeader = (text) => {
 export const serializeText = (text) => {
   return isArray(text) ? serializeNodes(text) : text;
 };
+
+export const isImageGif = (image) => {
+  return image?.endsWith?.('.gif');
+};