@eeacms/volto-hero-block 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -4,8 +4,17 @@ 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.2](https://github.com/eea/volto-hero-block/compare/0.1.1...0.1.2)
+
+- 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)
+
 #### [0.1.1](https://github.com/eea/volto-hero-block/compare/0.1.0...0.1.1)
 
+> 13 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)
@@ -14,7 +23,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - 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)
-- Add hero block [`5ded9f5`](https://github.com/eea/volto-hero-block/commit/5ded9f5029de8b756cecef389e9546d7b3f49d11)
 
 #### 0.1.0
 

package/package.json

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

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

@@ -11,13 +11,13 @@ import SlateEditor from 'volto-slate/editor/SlateEditor';
 import { handleKey } from 'volto-slate/blocks/Text/keyboard';
 import { uploadContent, saveSlateBlockSelection } from 'volto-slate/actions';
 
-import { createSlateParagraph } from '@eeacms/volto-hero-block/helpers';
+import { createSlateHeader } from '@eeacms/volto-hero-block/helpers';
 
 import Hero from './Hero';
 import getSchema from './schema';
 
-const Metadata = ({ buttonLabel, buttonLink, styles }) => {
-  const { inverted = true, buttonVariant = 'white' } = styles || {};
+const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
+  const { buttonVariant } = styles || {};
 
   return buttonLabel ? (
     <UniversalLink
@@ -68,7 +68,7 @@ const Edit = (props) => {
             properties={properties}
             extensions={slate.textblockExtensions}
             renderExtensions={[withBlockProperties]}
-            value={createSlateParagraph(text)}
+            value={createSlateHeader(text)}
             onChange={(text) => {
               onChangeBlock(block, {
                 ...data,

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

@@ -11,6 +11,8 @@ Hero.propTypes = {
   justifyContent: PropTypes.string,
   backgroundVariant: PropTypes.string,
   quoted: PropTypes.bool,
+  spaced: PropTypes.bool,
+  inverted: PropTypes.bool,
   textVariant: PropTypes.string,
 };
 
@@ -20,6 +22,8 @@ function Hero({
   fullWidth = true,
   fullHeight = true,
   children,
+  spaced = false,
+  inverted = true,
   styles,
 }) {
   const isExternal = !isInternalURL(image);
@@ -29,28 +33,35 @@ function Hero({
     <div
       className={cx(
         'eea hero-block',
+        { spaced },
+        { inverted },
         !image && backgroundVariant && `color-bg-${backgroundVariant}`,
         {
-          'full-width': fullWidth,
           'full-height': fullHeight,
         },
       )}
     >
       <div
-        className="hero-block-image"
-        style={
-          image
-            ? {
-                backgroundImage: isExternal
-                  ? `url(${image})`
-                  : `url(${image}/@@images/image/huge)`,
-              }
-            : {}
-        }
-      />
-      {image && overlay && (
-        <div className="hero-block-image-overlay dark-overlay-4"></div>
-      )}
+        className={cx('hero-block-image-wrapper', {
+          'full-width': fullWidth,
+        })}
+      >
+        <div
+          className={cx('hero-block-image')}
+          style={
+            image
+              ? {
+                  backgroundImage: isExternal
+                    ? `url(${image})`
+                    : `url(${image}/@@images/image/huge)`,
+                }
+              : {}
+          }
+        />
+        {image && overlay && (
+          <div className="hero-block-image-overlay dark-overlay-4"></div>
+        )}
+      </div>
       <div
         className={cx(
           'hero-block-inner-wrapper d-flex ui container',
@@ -74,7 +85,7 @@ Hero.Text = ({ children, styles }) => {
         `text-${justifyContent}`,
       )}
     >
-      <h2 className={cx({ quoted })}>{children}</h2>
+      <div className={cx({ quoted })}>{children}</div>
     </div>
   );
 };

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

@@ -4,8 +4,8 @@ import { UniversalLink } from '@plone/volto/components';
 import Hero from './Hero';
 import { serializeText } from '@eeacms/volto-hero-block/helpers';
 
-const Metadata = ({ buttonLabel, buttonLink, styles }) => {
-  const { inverted = true, buttonVariant = 'white' } = styles || {};
+const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
+  const { buttonVariant = 'white' } = styles || {};
 
   return buttonLabel ? (
     <UniversalLink

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

@@ -8,6 +8,8 @@ export default ({ data }) => {
         fields: [
           'fullWidth',
           'fullHeight',
+          'spaced',
+          'inverted',
           'buttonLabel',
           'buttonLink',
           'overlay',
@@ -26,6 +28,16 @@ export default ({ data }) => {
         type: 'boolean',
         defaultValue: true,
       },
+      spaced: {
+        title: 'Spaced',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      inverted: {
+        title: 'Inverted',
+        type: 'boolean',
+        defaultValue: true,
+      },
       buttonLabel: {
         title: 'Button label',
         widget: 'textarea',
@@ -56,8 +68,7 @@ export const stylingSchema = ({ intl }) => ({
       id: 'default',
       title: 'Default',
       fields: [
-        'quoted',
-        'inverted',
+        // 'quoted',
         'alignContent',
         'justifyContent',
         'backgroundVariant',
@@ -71,10 +82,6 @@ export const stylingSchema = ({ intl }) => ({
       title: 'Quoted',
       type: 'boolean',
     },
-    inverted: {
-      title: 'Inverted',
-      type: 'boolean',
-    },
     alignContent: {
       title: 'Align content',
       choices: [
@@ -95,6 +102,7 @@ export const stylingSchema = ({ intl }) => ({
         ['tertiary', 'Tertiary'],
         ['grey', 'Grey'],
       ],
+      defaultValue: 'primary',
     },
     textVariant: {
       title: 'Text theme',
@@ -104,6 +112,7 @@ export const stylingSchema = ({ intl }) => ({
         ['tertiary', 'Tertiary'],
         ['white', 'White'],
       ],
+      defaultValue: 'white',
     },
     buttonVariant: {
       title: 'Button theme',
@@ -112,6 +121,7 @@ export const stylingSchema = ({ intl }) => ({
         ['primary', 'Primary'],
         ['secondary', 'Secondary'],
       ],
+      defaultValue: 'default',
     },
   },
   required: [],

package/src/helpers.js

@@ -1,9 +1,15 @@
 import { isArray } from 'lodash';
-import config from '@plone/volto/registry';
 import { serializeNodes } from 'volto-slate/editor/render';
 
-export const createSlateParagraph = (text) => {
-  return isArray(text) ? text : config.settings.slate.defaultValue();
+const createEmptyHeader = () => {
+  return {
+    type: 'h2',
+    children: [{ text: '' }],
+  };
+};
+
+export const createSlateHeader = (text) => {
+  return isArray(text) ? text : [createEmptyHeader()];
 };
 
 export const serializeText = (text) => {