@eeacms/volto-hero-block 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -4,7 +4,32 @@ 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).
 
-### [3.0.0](https://github.com/eea/volto-hero-block/compare/2.1.0...3.0.0) - 22 December 2022
+### [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
+
+#### :nail_care: Enhancements
+
+- change(theme): color_picker widget for themes #12 from eea/color_pick_themes [ichim-david - [`d3e0e92`](https://github.com/eea/volto-hero-block/commit/d3e0e9266795b09d465cc00bff752040c8274bd8)]
+
+#### :hammer_and_wrench: Others
+
+- Release 4.0.0 [Alin Voinea - [`4f211df`](https://github.com/eea/volto-hero-block/commit/4f211df1c6488d1d70f009b592b828575ee783d6)]
+- lint fix [David Ichim - [`1a51209`](https://github.com/eea/volto-hero-block/commit/1a51209dbaec1b9aa1a7e16f3d997dcf5fa8f764)]
+- more theme_picker [Andrei Grigore - [`801ead1`](https://github.com/eea/volto-hero-block/commit/801ead1355eeb4a4fea371b84b91db3e651d7a40)]
+- add theme_picker widget [Andrei Grigore - [`aef11f7`](https://github.com/eea/volto-hero-block/commit/aef11f7c26c3e2ec5d997ede076062bf9d23237c)]
+- color_picker widget for themes [andreiggr - [`4037c24`](https://github.com/eea/volto-hero-block/commit/4037c24b850b5f514a2bafba156fd7888678cea5)]
+### [3.0.1](https://github.com/eea/volto-hero-block/compare/3.0.0...3.0.1) - 27 January 2023
+
+#### :rocket: New Features
+
+- feat(hero): added background position styling option [David Ichim - [`8d933f6`](https://github.com/eea/volto-hero-block/commit/8d933f6e03a495b055d81923a37b0affd769c770)]
+
+#### :nail_care: Enhancements
+
+- change(hero): bg class setting to ensure it's set on the hero-image section [David Ichim - [`ce0305f`](https://github.com/eea/volto-hero-block/commit/ce0305feed18e6ca5f22ee7786db93283944484a)]
+
+#### :hammer_and_wrench: Others
+
+## [3.0.0](https://github.com/eea/volto-hero-block/compare/2.1.0...3.0.0) - 22 December 2022
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,7 +20,8 @@
     "@eeacms/volto-object-widget"
   ],
   "dependencies": {
-    "@eeacms/volto-object-widget": "*"
+    "@eeacms/volto-object-widget": "*",
+    "@eeacms/volto-widget-theme-picker": "^1.0.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

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

@@ -58,7 +58,7 @@ function Hero({
         )}
       >
         <div
-          className={cx('hero-block-image')}
+          className={cx('hero-block-image', styles?.bg)}
           style={
             image
               ? {

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

@@ -1,4 +1,15 @@
 import { addStyling } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+import alignTopSVG from '@plone/volto/icons/move-up.svg';
+import alignCenterSVG from '@plone/volto/icons/row.svg';
+import alignBottomSVG from '@plone/volto/icons/move-down.svg';
+
+const ALIGN_INFO_MAP = {
+  'has--bg--top': [alignTopSVG, 'Top'],
+  'has--bg--center': [alignCenterSVG, 'Center'],
+  'has--bg--bottom': [alignBottomSVG, 'Bottom'],
+};
 
 export default () => {
   return {
@@ -97,6 +108,7 @@ export const stylingSchema = (props) => {
         title: 'Default',
         fields: [
           'backgroundVariant',
+          'bg',
           'alignContent',
           'textAlign',
           'textVariant',
@@ -106,13 +118,24 @@ export const stylingSchema = (props) => {
       },
     ],
     properties: {
+      bg: {
+        title: 'Background image position',
+        widget: 'align',
+        actions: Object.keys(ALIGN_INFO_MAP),
+        actionsInfoMap: ALIGN_INFO_MAP,
+        defaultValue: 'has--bg--center',
+      },
       backgroundVariant: {
         title: 'Background theme',
-        choices: [
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
-          ['grey', 'Grey'],
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+          //and add extra ones here
         ],
       },
       alignContent: {
@@ -131,18 +154,28 @@ export const stylingSchema = (props) => {
       },
       textVariant: {
         title: 'Text theme',
-        choices: [
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+          //and add extra ones here
         ],
       },
       buttonVariant: {
         title: 'Button theme',
-        choices: [
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+          //and add extra ones here
         ],
       },
       buttonAlign: {