@eeacms/volto-hero-block 0.1.4 → 1.0.0

package/.coverage.babel.config.js

@@ -2,7 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/.i18n.babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');

package/CHANGELOG.md

@@ -4,42 +4,59 @@ 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).
 
-#### [0.1.4](https://github.com/eea/volto-hero-block/compare/0.1.3...0.1.4)
+### [1.0.0](https://github.com/eea/volto-hero-block/compare/0.2.0...1.0.0) - 28 October 2022
 
+#### :nail_care: Enhancements
 
-#### [0.1.3](https://github.com/eea/volto-hero-block/compare/0.1.2...0.1.3)
+- refactor(volto-slate): Upgrade to @plone/volto-slate - refs #153447 [Alin Voinea - [`8e9aef4`](https://github.com/eea/volto-hero-block/commit/8e9aef42b9e92cca4666526b083f6f64bb5adfa8)]
 
-> 30 June 2022
+#### :hammer_and_wrench: Others
 
-- Cleanup themeing options [`#4`](https://github.com/eea/volto-hero-block/pull/4)
+- 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)]
+### [0.2.0](https://github.com/eea/volto-hero-block/compare/0.1.4...0.2.0) - 6 July 2022
 
-#### [0.1.2](https://github.com/eea/volto-hero-block/compare/0.1.1...0.1.2)
+#### :bug: Bug Fixes
 
-> 16 June 2022
+- fix(hero): image dimensions when full width and height isn't enabled [David Ichim - [`69fb38e`](https://github.com/eea/volto-hero-block/commit/69fb38e9410f2a241a5d3babca9a712df946f859)]
 
-- Release [`#3`](https://github.com/eea/volto-hero-block/pull/3)
-- change(hero): wrap hero-block-image within a wrapper class [`2802c41`](https://github.com/eea/volto-hero-block/commit/2802c41ee8eba4c34bf6d4b4766ebafb24056602)
-- change(hero): added spaced and inverted options to the main schema [`b6865cd`](https://github.com/eea/volto-hero-block/commit/b6865cdc6dfae0d486f43fccfb31fa555af3a536)
-- change(hero): output h2 from slate instead of p tag [`0b2a4c5`](https://github.com/eea/volto-hero-block/commit/0b2a4c5070cc2bf97f31ff4cf74ade0e27434d91)
+#### :nail_care: Enhancements
 
-#### [0.1.1](https://github.com/eea/volto-hero-block/compare/0.1.0...0.1.1)
+- change(hero): implemented meta alignment and renamed several options for consistency [David Ichim - [`df08d80`](https://github.com/eea/volto-hero-block/commit/df08d80201b079a083e8c742e763c7b144fb5724)]
+- change(hero): re-added quoted option to the hero block [David Ichim - [`d8c9c59`](https://github.com/eea/volto-hero-block/commit/d8c9c59d7e7e5feaf592a52f9cc6ff23abca2fa2)]
 
-> 13 June 2022
+### [0.1.4](https://github.com/eea/volto-hero-block/compare/0.1.3...0.1.4) - 30 June 2022
 
-- Add hero block [`#2`](https://github.com/eea/volto-hero-block/pull/2)
-- change(hero): added image overlay option [`647ef2c`](https://github.com/eea/volto-hero-block/commit/647ef2ce68848ac38b71977485021b17e8c2f540)
-- Fix Hero image type [`fb2188a`](https://github.com/eea/volto-hero-block/commit/fb2188ac604cfc57ba26ea482e799ca867a412ad)
-- Fix external vs internal image [`5e447e9`](https://github.com/eea/volto-hero-block/commit/5e447e9a4e35229d9a29b74ad230a2e1e659bbea)
-- Fix block title [`db8de23`](https://github.com/eea/volto-hero-block/commit/db8de237f523e8cb9b96c2702818b529805fd36e)
-- Support external images [`196902a`](https://github.com/eea/volto-hero-block/commit/196902ac0214cefb8a4bdc643f0424bc7c318282)
-- Update slate footnote support [`c1522b4`](https://github.com/eea/volto-hero-block/commit/c1522b4164dbe6de01771d211d7e0bf3009f44d4)
-- Use justify content for text and button as well [`08599cc`](https://github.com/eea/volto-hero-block/commit/08599cc45546d9b349128c4f8ce9c01318385811)
-- Add dependencies [`30e2881`](https://github.com/eea/volto-hero-block/commit/30e2881a2a97a899e7f4cc614a0405c300ac6fee)
+### [0.1.3](https://github.com/eea/volto-hero-block/compare/0.1.2...0.1.3) - 30 June 2022
 
-#### 0.1.0
+### [0.1.2](https://github.com/eea/volto-hero-block/compare/0.1.1...0.1.2) - 16 June 2022
 
-> 10 June 2022
+#### :nail_care: Enhancements
 
-- Empty release [`#1`](https://github.com/eea/volto-hero-block/pull/1)
-- Initial commit [`799ed92`](https://github.com/eea/volto-hero-block/commit/799ed92e506b9b0faded334c019f4a8ffc4b8d43)
-- Initial commit [`b21bcfd`](https://github.com/eea/volto-hero-block/commit/b21bcfd42c775acc84179272fac0d6ecaad71430)
+- change(hero): wrap hero-block-image within a wrapper class [David Ichim - [`2802c41`](https://github.com/eea/volto-hero-block/commit/2802c41ee8eba4c34bf6d4b4766ebafb24056602)]
+- change(hero): added spaced and inverted options to the main schema [David Ichim - [`b6865cd`](https://github.com/eea/volto-hero-block/commit/b6865cdc6dfae0d486f43fccfb31fa555af3a536)]
+- change(hero): output h2 from slate instead of p tag [David Ichim - [`0b2a4c5`](https://github.com/eea/volto-hero-block/commit/0b2a4c5070cc2bf97f31ff4cf74ade0e27434d91)]
+
+### [0.1.1](https://github.com/eea/volto-hero-block/compare/0.1.0...0.1.1) - 13 June 2022
+
+#### :nail_care: Enhancements
+
+- change(hero): added image overlay option [David Ichim - [`647ef2c`](https://github.com/eea/volto-hero-block/commit/647ef2ce68848ac38b71977485021b17e8c2f540)]
+
+#### :hammer_and_wrench: Others
+
+- Fix Hero image type [Alin Voinea - [`fb2188a`](https://github.com/eea/volto-hero-block/commit/fb2188ac604cfc57ba26ea482e799ca867a412ad)]
+- Fix external vs internal image [Alin Voinea - [`5e447e9`](https://github.com/eea/volto-hero-block/commit/5e447e9a4e35229d9a29b74ad230a2e1e659bbea)]
+- Fix block title [Alin Voinea - [`db8de23`](https://github.com/eea/volto-hero-block/commit/db8de237f523e8cb9b96c2702818b529805fd36e)]
+- Support external images [Miu Razvan - [`196902a`](https://github.com/eea/volto-hero-block/commit/196902ac0214cefb8a4bdc643f0424bc7c318282)]
+- 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)]
+### 0.1.0 - 10 June 2022
+
+#### :hammer_and_wrench: Others
+
+- jenkins file fix [David Ichim - [`3a51e37`](https://github.com/eea/volto-hero-block/commit/3a51e379dd70cb9c6045922050020e33fc896a74)]
+- Initial commit [David Ichim - [`799ed92`](https://github.com/eea/volto-hero-block/commit/799ed92e506b9b0faded334c019f4a8ffc4b8d43)]
+- Initial commit [ichim-david - [`b21bcfd`](https://github.com/eea/volto-hero-block/commit/b21bcfd42c775acc84179272fac0d6ecaad71430)]

package/README.md

@@ -15,7 +15,7 @@
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-hero-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-hero-block-develop)
 
 
-[Volto](https://github.com/plone/volto) add-on
+Enhanced Hero Block [Volto](https://github.com/plone/volto) add-on
 
 ## Features
 
@@ -23,28 +23,6 @@ Demo GIF
 
 ## Getting started
 
-### Try volto-hero-block with Docker
-
-1. Get the latest Docker images
-
-   ```
-   docker pull plone
-   docker pull plone/volto
-   ```
-
-1. Start Plone backend
-   ```
-   docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
-   ```
-
-1. Start Volto frontend
-
-   ```
-   docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-hero-block" plone/volto
-   ```
-
-1. Go to http://localhost:3000
-
 ### Add volto-hero-block to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
@@ -97,10 +75,6 @@ All Rights Reserved.
 
 See [LICENSE.md](https://github.com/eea/volto-hero-block/blob/master/LICENSE.md) for details.
 
-## Funding
-
-[European Environment Agency (EU)](http://eea.europa.eu)
-volto-addon-template/blob/master/LICENSE.md) for details.
 
 ## Funding
 

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
-  const presets = ['razzle/babel'];
+  const presets = ['razzle'];
   const plugins = [
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work

package/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+});

package/jest-addon.config.js

@@ -9,18 +9,18 @@ module.exports = {
     '@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',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@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',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "0.1.4",
+  "version": "1.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,33 +17,34 @@
     "url": "git@github.com:eea/volto-hero-block.git"
   },
   "addons": [
-    "@eeacms/volto-object-widget",
-    "volto-slate"
+    "@eeacms/volto-object-widget"
   ],
   "dependencies": {
-    "volto-slate": "*",
     "@eeacms/volto-object-widget": "*"
   },
   "devDependencies": {
     "@plone/scripts": "*",
-    "@cypress/code-coverage": "^3.9.5",
-    "babel-plugin-transform-class-properties": "^6.24.1"
+    "@cypress/code-coverage": "^3.10.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "md5": "^2.3.0"
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "test": "make test",
     "test:fix": "make test-update",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "stylelint": "if [ -d ./project ]; then ./project/node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; else ../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'; fi",
-    "stylelint:overrides": "if [ -d ./project ]; then ./project/node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; else ../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'; fi",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'; fi",
-    "prettier:fix": "if [ -d ./project ]; then ./project/node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; else ../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'; fi",
-    "lint": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'; fi",
-    "lint:fix": "if [ -d ./project ]; then ./project/node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; else ../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi",
-    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
-    "cypress:run": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress run; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress run; fi",
-    "cypress:open": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi"
-  }
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
+ }
 }

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

@@ -7,9 +7,12 @@ import {
   SidebarPortal,
   UniversalLink,
 } from '@plone/volto/components';
-import SlateEditor from 'volto-slate/editor/SlateEditor';
-import { handleKey } from 'volto-slate/blocks/Text/keyboard';
-import { uploadContent, saveSlateBlockSelection } from 'volto-slate/actions';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+import { handleKey } from '@plone/volto-slate/blocks/Text/keyboard';
+import {
+  uploadContent,
+  saveSlateBlockSelection,
+} from '@plone/volto-slate/actions';
 
 import { createSlateHeader } from '@eeacms/volto-hero-block/helpers';
 

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

@@ -8,7 +8,7 @@ Hero.propTypes = {
   fullWidth: PropTypes.bool,
   fullHeight: PropTypes.bool,
   alignContent: PropTypes.string,
-  justifyContent: PropTypes.string,
+  textAlign: PropTypes.string,
   backgroundVariant: PropTypes.string,
   quoted: PropTypes.bool,
   spaced: PropTypes.bool,
@@ -64,7 +64,7 @@ function Hero({
       </div>
       <div
         className={cx(
-          'hero-block-inner-wrapper d-flex ui container',
+          'hero-block-inner-wrapper d-flex',
           `flex-items-${alignContent}`,
         )}
       >
@@ -74,26 +74,25 @@ function Hero({
   );
 }
 
-Hero.Text = ({ children, styles }) => {
-  const { textVariant = 'white', justifyContent = 'left', quoted } =
-    styles || {};
+Hero.Text = ({ children, quoted, styles }) => {
+  const { textVariant = 'white', textAlign = 'left' } = styles || {};
   return (
     <div
       className={cx(
         'hero-block-text',
         `color-fg-${textVariant}`,
-        `text-${justifyContent}`,
+        `text-${textAlign}`,
       )}
     >
-      <div className={cx({ quoted })}>{children}</div>
+      <div className={quoted ? 'quoted-wrapper' : ''}>{children}</div>
     </div>
   );
 };
 
 Hero.Meta = ({ children, styles }) => {
-  const { justifyContent = 'left' } = styles || {};
+  const { buttonAlign = 'left' } = styles || {};
   return (
-    <div className={cx('hero-block-meta', `text-${justifyContent}`)}>
+    <div className={cx('hero-block-meta', `text-${buttonAlign}`)}>
       {children}
     </div>
   );

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

@@ -8,6 +8,7 @@ export default ({ data }) => {
         fields: [
           'fullWidth',
           'fullHeight',
+          'quoted',
           'spaced',
           'inverted',
           'buttonLabel',
@@ -28,6 +29,11 @@ export default ({ data }) => {
         type: 'boolean',
         defaultValue: true,
       },
+      quoted: {
+        title: 'Quoted',
+        type: 'boolean',
+        defaultValue: false,
+      },
       spaced: {
         title: 'Spaced',
         type: 'boolean',
@@ -68,40 +74,38 @@ export const stylingSchema = ({ intl }) => ({
       id: 'default',
       title: 'Default',
       fields: [
-        // 'quoted',
-        'alignContent',
-        'justifyContent',
         'backgroundVariant',
+        'alignContent',
+        'textAlign',
         'textVariant',
         'buttonVariant',
+        'buttonAlign',
       ],
     },
   ],
   properties: {
-    quoted: {
-      title: 'Quoted',
-      type: 'boolean',
+    backgroundVariant: {
+      title: 'Background theme',
+      choices: [
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+        ['grey', 'Grey'],
+      ],
     },
     alignContent: {
-      title: 'Align content',
+      title: 'Content align',
       choices: [
         ['start', 'Top'],
         ['center', 'Center'],
         ['end', 'Bottom'],
       ],
     },
-    justifyContent: {
-      title: 'Align Text',
+    textAlign: {
+      title: 'Text align',
       widget: 'align',
-    },
-    backgroundVariant: {
-      title: 'Background theme',
-      choices: [
-        ['primary', 'Primary'],
-        ['secondary', 'Secondary'],
-        ['tertiary', 'Tertiary'],
-        ['grey', 'Grey'],
-      ],
+      actions: ['left', 'center', 'right'],
+      defaultValue: 'left',
     },
     textVariant: {
       title: 'Text theme',
@@ -119,6 +123,12 @@ export const stylingSchema = ({ intl }) => ({
         ['tertiary', 'Tertiary'],
       ],
     },
+    buttonAlign: {
+      title: 'Button align',
+      widget: 'align',
+      actions: ['left', 'center', 'right'],
+      defaultValue: 'left',
+    },
   },
   required: [],
 });

package/src/helpers.js

@@ -1,5 +1,5 @@
 import { isArray } from 'lodash';
-import { serializeNodes } from 'volto-slate/editor/render';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 const createEmptyHeader = () => {
   return {

package/cypress.json

@@ -1,17 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "viewportWidth": 1280,
-  "defaultCommandTimeout": 8888,
-  "chromeWebSecurity": false,
-  "reporter": "junit",
-  "video": true,
-  "retries": {
-    "runMode": 8,
-    "openMode": 0
-  },
-  "reporterOptions": {
-    "mochaFile": "cypress/reports/cypress-[hash].xml",
-    "jenkinsMode": true,
-    "toConsole": true
-  }
-}