@eeacms/volto-hero-block 0.1.0 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,40 @@
-# Changelog
+### Changelog
 
-## 0.1.0
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-- Initial release
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [0.1.3](https://github.com/eea/volto-hero-block/compare/0.1.2...0.1.3)
+
+- Cleanup themeing options [`1832d55`](https://github.com/eea/volto-hero-block/commit/1832d551c96f02dd1905e8acc1b1c31c09caf38d)
+
+#### [0.1.2](https://github.com/eea/volto-hero-block/compare/0.1.1...0.1.2)
+
+> 16 June 2022
+
+- 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)
+
+#### [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)
+- 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.0
+
+> 10 June 2022
+
+- 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,10 +16,16 @@
     "type": "git",
     "url": "git@github.com:eea/volto-hero-block.git"
   },
+  "addons": [
+    "@eeacms/volto-object-widget",
+    "volto-slate"
+  ],
   "dependencies": {
-    "@plone/scripts": "*"
+    "volto-slate": "*",
+    "@eeacms/volto-object-widget": "*"
   },
   "devDependencies": {
+    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.9.5",
     "babel-plugin-transform-class-properties": "^6.24.1"
   },

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import cx from 'classnames';
+import { connect } from 'react-redux';
+import config from '@plone/volto/registry';
+import {
+  BlockDataForm,
+  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 { createSlateHeader } from '@eeacms/volto-hero-block/helpers';
+
+import Hero from './Hero';
+import getSchema from './schema';
+
+const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
+  const { buttonVariant } = styles || {};
+
+  return buttonLabel ? (
+    <UniversalLink
+      className={cx('ui button', buttonVariant, { inverted })}
+      href={buttonLink || ''}
+    >
+      {buttonLabel}
+    </UniversalLink>
+  ) : (
+    ''
+  );
+};
+
+const Edit = (props) => {
+  const { slate } = config.settings;
+  const {
+    data = {},
+    block = null,
+    selected = false,
+    index,
+    properties,
+    onChangeBlock,
+    onSelectBlock,
+  } = props;
+  const { text } = data;
+  const schema = React.useMemo(() => getSchema(props), [props]);
+
+  const withBlockProperties = React.useCallback(
+    (editor) => {
+      editor.getBlockProps = () => props;
+      return editor;
+    },
+    [props],
+  );
+
+  const handleFocus = React.useCallback(() => {
+    if (!selected) {
+      onSelectBlock(block);
+    }
+  }, [onSelectBlock, selected, block]);
+
+  return (
+    <>
+      <Hero {...data}>
+        <Hero.Text {...data}>
+          <SlateEditor
+            index={index}
+            properties={properties}
+            extensions={slate.textblockExtensions}
+            renderExtensions={[withBlockProperties]}
+            value={createSlateHeader(text)}
+            onChange={(text) => {
+              onChangeBlock(block, {
+                ...data,
+                text,
+              });
+            }}
+            block={block}
+            onFocus={handleFocus}
+            onKeyDown={handleKey}
+            selected={selected}
+            placeholder="Add text..."
+            slateSettings={slate}
+          />
+        </Hero.Text>
+        <Hero.Meta {...data}>
+          <Metadata {...data} />
+        </Hero.Meta>
+      </Hero>
+
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default connect(
+  (state, props) => {
+    const blockId = props.block;
+    return {
+      defaultSelection: blockId
+        ? state.slate_block_selections?.[blockId]
+        : null,
+      uploadRequest: state.upload_content?.[props.block]?.upload || {},
+      uploadedContent: state.upload_content?.[props.block]?.data || {},
+    };
+  },
+  {
+    uploadContent,
+    saveSlateBlockSelection, // needed as editor blockProps
+  },
+)(Edit);

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
+Hero.propTypes = {
+  image: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  fullHeight: PropTypes.bool,
+  alignContent: PropTypes.string,
+  justifyContent: PropTypes.string,
+  backgroundVariant: PropTypes.string,
+  quoted: PropTypes.bool,
+  spaced: PropTypes.bool,
+  inverted: PropTypes.bool,
+  textVariant: PropTypes.string,
+};
+
+function Hero({
+  image,
+  overlay = true,
+  fullWidth = true,
+  fullHeight = true,
+  children,
+  spaced = false,
+  inverted = true,
+  styles,
+}) {
+  const isExternal = !isInternalURL(image);
+  const { alignContent = 'center', backgroundVariant = 'primary' } =
+    styles || {};
+  return (
+    <div
+      className={cx(
+        'eea hero-block',
+        { spaced },
+        { inverted },
+        !image && backgroundVariant && `color-bg-${backgroundVariant}`,
+        {
+          'full-height': fullHeight,
+        },
+      )}
+    >
+      <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',
+          `flex-items-${alignContent}`,
+        )}
+      >
+        <div className="hero-block-body">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+Hero.Text = ({ children, styles }) => {
+  const { textVariant = 'white', justifyContent = 'left', quoted } =
+    styles || {};
+  return (
+    <div
+      className={cx(
+        'hero-block-text',
+        `color-fg-${textVariant}`,
+        `text-${justifyContent}`,
+      )}
+    >
+      <div className={cx({ quoted })}>{children}</div>
+    </div>
+  );
+};
+
+Hero.Meta = ({ children, styles }) => {
+  const { justifyContent = 'left' } = styles || {};
+  return (
+    <div className={cx('hero-block-meta', `text-${justifyContent}`)}>
+      {children}
+    </div>
+  );
+};
+
+export default Hero;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import cx from 'classnames';
+import { UniversalLink } from '@plone/volto/components';
+import Hero from './Hero';
+import { serializeText } from '@eeacms/volto-hero-block/helpers';
+
+const Metadata = ({ buttonLabel, buttonLink, inverted, styles }) => {
+  const { buttonVariant = 'white' } = styles || {};
+
+  return buttonLabel ? (
+    <UniversalLink
+      className={cx('ui button', buttonVariant, { inverted })}
+      href={buttonLink || ''}
+    >
+      {buttonLabel}
+    </UniversalLink>
+  ) : (
+    ''
+  );
+};
+
+const View = (props) => {
+  const { data = {} } = props;
+  const { text } = data;
+  return (
+    <Hero {...data}>
+      <Hero.Text {...data}>{serializeText(text)}</Hero.Text>
+      <Hero.Meta {...data}>
+        <Metadata {...data} />
+      </Hero.Meta>
+    </Hero>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,32 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import HeroEdit from './Edit';
+import HeroView from './View';
+import { stylingSchema } from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.hero = {
+    id: 'hero',
+    title: 'Hero',
+    icon: codeSVG,
+    group: 'common',
+    edit: HeroEdit,
+    view: HeroView,
+    blockHasOwnFocusManagement: true,
+    stylesSchema: stylingSchema,
+    enableStyling: true,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  config.settings.blocksWithFootnotesSupport = {
+    ...(config.settings.blocksWithFootnotesSupport || {}),
+    hero: ['text'],
+  };
+
+  return config;
+};

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

@@ -0,0 +1,124 @@
+export default ({ data }) => {
+  return {
+    title: 'Hero',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'fullWidth',
+          'fullHeight',
+          'spaced',
+          'inverted',
+          'buttonLabel',
+          'buttonLink',
+          'overlay',
+          'image',
+        ],
+      },
+    ],
+    properties: {
+      fullWidth: {
+        title: 'Full width',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      fullHeight: {
+        title: 'Full height',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      spaced: {
+        title: 'Spaced',
+        type: 'boolean',
+        defaultValue: false,
+      },
+      inverted: {
+        title: 'Inverted',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      buttonLabel: {
+        title: 'Button label',
+        widget: 'textarea',
+      },
+      buttonLink: {
+        title: 'Button link',
+        widget: 'url',
+      },
+      overlay: {
+        title: 'Image darken overlay',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      image: {
+        title: 'Image',
+        widget: 'attachedimage',
+      },
+    },
+    required: [],
+  };
+};
+
+export const stylingSchema = ({ intl }) => ({
+  title: 'Hero style',
+  block: 'hero',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        // 'quoted',
+        'alignContent',
+        'justifyContent',
+        'backgroundVariant',
+        'textVariant',
+        'buttonVariant',
+      ],
+    },
+  ],
+  properties: {
+    quoted: {
+      title: 'Quoted',
+      type: 'boolean',
+    },
+    alignContent: {
+      title: 'Align content',
+      choices: [
+        ['start', 'Top'],
+        ['center', 'Center'],
+        ['end', 'Bottom'],
+      ],
+    },
+    justifyContent: {
+      title: 'Align Text',
+      widget: 'align',
+    },
+    backgroundVariant: {
+      title: 'Background theme',
+      choices: [
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+        ['grey', 'Grey'],
+      ],
+    },
+    textVariant: {
+      title: 'Text theme',
+      choices: [
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+      ],
+    },
+    buttonVariant: {
+      title: 'Button theme',
+      choices: [
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+      ],
+    },
+  },
+  required: [],
+});

package/src/helpers.js

@@ -0,0 +1,17 @@
+import { isArray } from 'lodash';
+import { serializeNodes } from 'volto-slate/editor/render';
+
+const createEmptyHeader = () => {
+  return {
+    type: 'h2',
+    children: [{ text: '' }],
+  };
+};
+
+export const createSlateHeader = (text) => {
+  return isArray(text) ? text : [createEmptyHeader()];
+};
+
+export const serializeText = (text) => {
+  return isArray(text) ? serializeNodes(text) : text;
+};

package/src/index.js

@@ -1,5 +1,7 @@
+import installHeroBlock from '@eeacms/volto-hero-block/components/Blocks/Hero';
+
 const applyConfig = (config) => {
-  return config;
+  return [installHeroBlock].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;