@eeacms/volto-hero-block 1.0.0 → 2.1.0

package/.project.eslintrc.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project');    // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 

package/CHANGELOG.md

@@ -4,7 +4,24 @@ 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).
 
-### [1.0.0](https://github.com/eea/volto-hero-block/compare/0.2.0...1.0.0) - 28 October 2022
+### [2.1.0](https://github.com/eea/volto-hero-block/compare/2.0.0...2.1.0) - 12 December 2022
+
+#### :bug: Bug Fixes
+
+- fix(gif): Use ES6 with isImageGif utility - refs #158188 [Alin Voinea - [`ad32432`](https://github.com/eea/volto-hero-block/commit/ad32432ee320bb4e43f20e260f2900269adf0401)]
+
+#### :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
+
+- test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`b8f0971`](https://github.com/eea/volto-hero-block/commit/b8f0971b21a5334d40c1b8f5103cea61d9ffe6f1)]
+## [1.0.0](https://github.com/eea/volto-hero-block/compare/0.2.0...1.0.0) - 28 October 2022
 
 #### :nail_care: Enhancements
 

package/README.md

@@ -21,6 +21,12 @@ Enhanced Hero Block [Volto](https://github.com/plone/volto) add-on
 
 Demo GIF
 
+## Upgrade
+
+### Upgrading to 2.x
+
+This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addStyling).
+
 ## Getting started
 
 ### Add volto-hero-block to your Volto project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "1.0.0",
+  "version": "2.1.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"
   },
@@ -46,5 +46,5 @@
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
     "cypress:open": "make cypress-open"
- }
+  }
 }

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,
@@ -33,18 +34,28 @@ function Hero({
     <div
       className={cx(
         'eea hero-block',
-        { spaced },
-        { inverted },
-        !image && backgroundVariant && `color-bg-${backgroundVariant}`,
+        !image &&
+          backgroundVariant &&
+          !fullWidth &&
+          `color-bg-${backgroundVariant}`,
         {
+          spaced,
+          inverted,
           'full-height': fullHeight,
         },
       )}
     >
       <div
-        className={cx('hero-block-image-wrapper', {
-          'full-width': fullWidth,
-        })}
+        className={cx(
+          'hero-block-image-wrapper',
+          !image &&
+            backgroundVariant &&
+            fullWidth &&
+            `color-bg-${backgroundVariant}`,
+          {
+            'full-width': fullWidth,
+          },
+        )}
       >
         <div
           className={cx('hero-block-image')}
@@ -53,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/index.js

@@ -12,8 +12,7 @@ export default (config) => {
     edit: HeroEdit,
     view: HeroView,
     blockHasOwnFocusManagement: true,
-    stylesSchema: stylingSchema,
-    enableStyling: true,
+    schemaEnhancer: stylingSchema,
     restricted: false,
     mostUsed: false,
     sidebarTab: 1,

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

@@ -1,4 +1,6 @@
-export default ({ data }) => {
+import { addStyling } from '@plone/volto/helpers';
+
+export default () => {
   return {
     title: 'Hero',
     fieldsets: [
@@ -66,69 +68,73 @@ export default ({ data }) => {
   };
 };
 
-export const stylingSchema = ({ intl }) => ({
-  title: 'Hero style',
-  block: 'hero',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: [
-        'backgroundVariant',
-        'alignContent',
-        'textAlign',
-        'textVariant',
-        'buttonVariant',
-        'buttonAlign',
-      ],
-    },
-  ],
-  properties: {
-    backgroundVariant: {
-      title: 'Background theme',
-      choices: [
-        ['primary', 'Primary'],
-        ['secondary', 'Secondary'],
-        ['tertiary', 'Tertiary'],
-        ['grey', 'Grey'],
-      ],
-    },
-    alignContent: {
-      title: 'Content align',
-      choices: [
-        ['start', 'Top'],
-        ['center', 'Center'],
-        ['end', 'Bottom'],
-      ],
-    },
-    textAlign: {
-      title: 'Text align',
-      widget: 'align',
-      actions: ['left', 'center', 'right'],
-      defaultValue: 'left',
-    },
-    textVariant: {
-      title: 'Text theme',
-      choices: [
-        ['primary', 'Primary'],
-        ['secondary', 'Secondary'],
-        ['tertiary', 'Tertiary'],
-      ],
-    },
-    buttonVariant: {
-      title: 'Button theme',
-      choices: [
-        ['primary', 'Primary'],
-        ['secondary', 'Secondary'],
-        ['tertiary', 'Tertiary'],
-      ],
-    },
-    buttonAlign: {
-      title: 'Button align',
-      widget: 'align',
-      actions: ['left', 'center', 'right'],
-      defaultValue: 'left',
+export const stylingSchema = (props) => {
+  const schema = addStyling(props);
+  schema.properties.styles.schema = {
+    title: 'Hero style',
+    block: 'hero',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'backgroundVariant',
+          'alignContent',
+          'textAlign',
+          'textVariant',
+          'buttonVariant',
+          'buttonAlign',
+        ],
+      },
+    ],
+    properties: {
+      backgroundVariant: {
+        title: 'Background theme',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+          ['grey', 'Grey'],
+        ],
+      },
+      alignContent: {
+        title: 'Content align',
+        choices: [
+          ['start', 'Top'],
+          ['center', 'Center'],
+          ['end', 'Bottom'],
+        ],
+      },
+      textAlign: {
+        title: 'Text align',
+        widget: 'align',
+        actions: ['left', 'center', 'right'],
+        defaultValue: 'left',
+      },
+      textVariant: {
+        title: 'Text theme',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+      },
+      buttonVariant: {
+        title: 'Button theme',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ],
+      },
+      buttonAlign: {
+        title: 'Button align',
+        widget: 'align',
+        actions: ['left', 'center', 'right'],
+        defaultValue: 'left',
+      },
     },
-  },
-  required: [],
-});
+    required: [],
+  };
+  return schema;
+};

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');
+};