@eeacms/volto-hero-block 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
-# 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.1](https://github.com/eea/volto-hero-block/compare/0.1.0...0.1.1)
+
+- 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)
+- Add hero block [`5ded9f5`](https://github.com/eea/volto-hero-block/commit/5ded9f5029de8b756cecef389e9546d7b3f49d11)
+
+#### 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.1",
   "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 { createSlateParagraph } 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 || {};
+
+  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={createSlateParagraph(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,91 @@
+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,
+  textVariant: PropTypes.string,
+};
+
+function Hero({
+  image,
+  overlay = true,
+  fullWidth = true,
+  fullHeight = true,
+  children,
+  styles,
+}) {
+  const isExternal = !isInternalURL(image);
+  const { alignContent = 'center', backgroundVariant = 'primary' } =
+    styles || {};
+  return (
+    <div
+      className={cx(
+        'eea hero-block',
+        !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>
+      )}
+      <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}`,
+      )}
+    >
+      <h2 className={cx({ quoted })}>{children}</h2>
+    </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, styles }) => {
+  const { inverted = true, 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,118 @@
+export default ({ data }) => {
+  return {
+    title: 'Hero',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'fullWidth',
+          'fullHeight',
+          'buttonLabel',
+          'buttonLink',
+          'overlay',
+          'image',
+        ],
+      },
+    ],
+    properties: {
+      fullWidth: {
+        title: 'Full width',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      fullHeight: {
+        title: 'Full height',
+        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',
+        'inverted',
+        'alignContent',
+        'justifyContent',
+        'backgroundVariant',
+        'textVariant',
+        'buttonVariant',
+      ],
+    },
+  ],
+  properties: {
+    quoted: {
+      title: 'Quoted',
+      type: 'boolean',
+    },
+    inverted: {
+      title: 'Inverted',
+      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'],
+        ['white', 'White'],
+      ],
+    },
+    buttonVariant: {
+      title: 'Button theme',
+      choices: [
+        ['default', 'Default'],
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+      ],
+    },
+  },
+  required: [],
+});

package/src/helpers.js

@@ -0,0 +1,11 @@
+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();
+};
+
+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;