@plone/volto 18.0.0-alpha.9 → 18.0.0

package/src/components/manage/Blocks/Teaser/schema.js

@@ -34,16 +34,31 @@ const messages = defineMessages({
     id: 'Alignment',
     defaultMessage: 'Alignment',
   },
+  overwrite: {
+    id: 'Customize teaser content',
+    defaultMessage: 'Customize teaser content',
+  },
+  overwriteDescription: {
+    id: 'Check this box to customize the title, description, or image of the target content item for this teaser. Leave it unchecked to show updates to the target content item if it is edited later.',
+    defaultMessage:
+      'Check this box to customize the title, description, or image of the target content item for this teaser. Leave it unchecked to show updates to the target content item if it is edited later.',
+  },
 });
 
-export const TeaserSchema = ({ intl }) => {
+export const TeaserSchema = ({ data, intl }) => {
   const schema = {
     title: intl.formatMessage(messages.teaser),
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['href', 'title', 'head_title', 'description', 'preview_image'],
+        fields: [
+          'href',
+          'overwrite',
+          ...(data?.overwrite
+            ? ['title', 'head_title', 'description', 'preview_image']
+            : []),
+        ],
       },
     ],
 
@@ -63,6 +78,12 @@ export const TeaserSchema = ({ intl }) => {
         ],
         allowExternals: true,
       },
+      overwrite: {
+        title: intl.formatMessage(messages.overwrite),
+        description: intl.formatMessage(messages.overwriteDescription),
+        type: 'boolean',
+        default: false,
+      },
       title: {
         title: intl.formatMessage(messages.title),
       },
@@ -85,7 +106,7 @@ export const TeaserSchema = ({ intl }) => {
         type: 'boolean',
       },
     },
-    required: [],
+    required: ['href'],
   };
 
   addStyling({ schema, intl });

package/src/components/manage/Blocks/ToC/Edit.jsx

@@ -1,39 +1,47 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import { SidebarPortal } from '@plone/volto/components';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import TableOfContentsSchema from './Schema';
 import View from './View';
 
-class Edit extends Component {
-  render() {
-    const schema = TableOfContentsSchema(this.props);
+const Edit = (props) => {
+  const {
+    onChangeBlock,
+    data,
+    block,
+    selected,
+    navRoot,
+    contentType,
+    blocksErrors,
+  } = props;
+  const schema = TableOfContentsSchema(props);
 
-    return (
-      <>
-        <View {...this.props} mode="edit" />
+  return (
+    <>
+      <View {...props} mode="edit" />
 
-        <SidebarPortal selected={this.props.selected}>
-          <BlockDataForm
-            schema={schema}
-            title={schema.title}
-            onChangeField={(id, value) => {
-              this.props.onChangeBlock(this.props.block, {
-                ...this.props.data,
-                [id]: value,
-              });
-            }}
-            onChangeBlock={this.props.onChangeBlock}
-            formData={this.props.data}
-            block={this.props.block}
-            navRoot={this.props.navRoot}
-            contentType={this.props.contentType}
-          />
-        </SidebarPortal>
-      </>
-    );
-  }
-}
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
 
 export default Edit;

package/src/components/manage/Blocks/ToC/View.jsx

@@ -2,10 +2,9 @@
  * View toc block.
  * @module components/manage/Blocks/ToC/View
  */
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import cx from 'classnames';
 import { Message } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
@@ -86,6 +85,8 @@ export const getBlocksTocEntries = (properties, tocData) => {
  */
 const View = (props) => {
   const { data } = props;
+
+  const title = data.title ? data.title : '';
   const { variation } = props;
   const metadata = props.metadata || props.properties;
   const blocksFieldname = getBlocksFieldname(metadata);
@@ -165,9 +166,19 @@ const View = (props) => {
 
   const Renderer = variation?.view;
   return (
-    <div className={cx('table-of-contents', variation?.id)}>
-      {props.mode === 'edit' && !data.title && !tocEntries.length && (
-        <Message>Table of content</Message>
+    <nav
+      aria-label={title && !data.hide_title ? title : ''}
+      className={cx('table-of-contents', variation?.id)}
+    >
+      {props.mode === 'edit' && !title && !tocEntries.length && (
+        <Message>
+          {
+            <FormattedMessage
+              id="Table of Contents"
+              defaultMessage="Table of Contents"
+            />
+          }
+        </Message>
       )}
 
       {Renderer ? (
@@ -175,7 +186,7 @@ const View = (props) => {
       ) : (
         <div>View extension not found</div>
       )}
-    </div>
+    </nav>
   );
 };
 
@@ -188,4 +199,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(withBlockExtensions(View));
+export default withBlockExtensions(View);

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -3,11 +3,9 @@
  * @module components/manage/Blocks/ToC/View
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { List } from 'semantic-ui-react';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import Slugger from 'github-slugger';
 import { UniversalLink } from '@plone/volto/components';
 import { normalizeString } from '@plone/volto/helpers';
@@ -37,26 +35,10 @@ const RenderListItems = ({ items, data }) => {
   });
 };
 
-/**
- * View toc block class.
- * @class View
- * @extends Component
- */
 const View = ({ data, tocEntries }) => {
   return (
     <>
-      {data.title && !data.hide_title ? (
-        <h2>
-          {data.title || (
-            <FormattedMessage
-              id="Table of Contents"
-              defaultMessage="Table of Contents"
-            />
-          )}
-        </h2>
-      ) : (
-        ''
-      )}
+      {data.title && !data.hide_title ? <h2>{data.title}</h2> : ''}
       <List
         ordered={data.ordered}
         bulleted={!data.ordered}
@@ -77,4 +59,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default View;

package/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { Menu, Dropdown } from 'semantic-ui-react';
-import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
 import { normalizeString } from '@plone/volto/helpers';
@@ -26,11 +25,6 @@ const RenderMenuItems = ({ items }) => {
   });
 };
 
-/**
- * View toc block class.
- * @class View
- * @extends Component
- */
 const View = ({ data, tocEntries }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   // When the page is resized to prevent items from the TOC from going out of the viewport,
@@ -159,18 +153,7 @@ const View = ({ data, tocEntries }) => {
 
   return (
     <>
-      {data.title && !data.hide_title ? (
-        <h2>
-          {data.title || (
-            <FormattedMessage
-              id="Table of Contents"
-              defaultMessage="Table of Contents"
-            />
-          )}
-        </h2>
-      ) : (
-        ''
-      )}
+      {data.title && !data.hide_title ? <h2>{data.title}</h2> : ''}
       <Menu className="responsive-menu">
         <RenderMenuItems items={tocEntries} />
         <Dropdown
@@ -201,4 +184,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default View;

package/src/components/manage/Blocks/Video/Edit.jsx

@@ -1,14 +1,8 @@
-/**
- * Edit video block.
- * @module components/manage/Blocks/Title/Edit
- */
-
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { Button, Input, Message } from 'semantic-ui-react';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
 
 import { Icon, SidebarPortal, VideoSidebar } from '@plone/volto/components';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -16,7 +10,6 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import videoBlockSVG from '@plone/volto/components/manage/Blocks/Video/block-video.svg';
 import Body from '@plone/volto/components/manage/Blocks/Video/Body';
 import { withBlockExtensions } from '@plone/volto/helpers';
-import { compose } from 'redux';
 
 const messages = defineMessages({
   VideoFormDescription: {
@@ -29,183 +22,123 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Edit video block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-
-    this.onChangeUrl = this.onChangeUrl.bind(this);
-    this.onSubmitUrl = this.onSubmitUrl.bind(this);
-    this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
-    this.state = {
-      url: '',
-    };
-  }
-
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl({ target }) {
-    this.setState({
-      url: target.value,
-    });
-  }
+const Edit = (props) => {
+  const { data, block, onChangeBlock, selected } = props;
+  const intl = useIntl();
+  const [url, setUrl] = useState('');
 
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
+  const onChangeUrl = ({ target }) => {
+    setUrl(target.value);
+  };
 
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @returns {undefined}
-   */
-  onSubmitUrl() {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: this.state.url,
+  const onSubmitUrl = useCallback(() => {
+    onChangeBlock(block, {
+      ...data,
+      url: url,
     });
-  }
+  }, [onChangeBlock, block, data, url]);
 
-  resetSubmitUrl = () => {
-    this.setState({
-      url: '',
-    });
+  const resetSubmitUrl = () => {
+    setUrl('');
   };
 
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
-   * @method onKeyDownVariantMenuForm
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDownVariantMenuForm(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmitUrl();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      // TODO: Do something on ESC key
-    }
-  }
+  const onKeyDownVariantMenuForm = useCallback(
+    (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        onSubmitUrl();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // TODO: Do something on ESC key
+      }
+    },
+    [onSubmitUrl],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { data } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.VideoBlockInputPlaceholder);
-    return (
-      <div
-        className={cx(
-          'block video align',
-          {
-            selected: this.props.selected,
-            center: !Boolean(this.props.data.align),
-          },
-          this.props.data.align,
-        )}
-      >
-        {data.url ? (
-          <Body data={this.props.data} isEditMode={true} />
-        ) : (
-          <Message>
-            <center>
-              <img src={videoBlockSVG} alt="" />
-              <div className="toolbar-inner">
-                <Input
-                  onKeyDown={this.onKeyDownVariantMenuForm}
-                  onChange={this.onChangeUrl}
-                  placeholder={placeholder}
-                  value={this.state.url}
-                  // Prevents propagation to the Dropzone and the opening
-                  // of the upload browser dialog
-                  onClick={(e) => e.stopPropagation()}
-                />
-                {this.state.url && (
-                  <Button.Group>
-                    <Button
-                      basic
-                      className="cancel"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        this.setState({ url: '' });
-                      }}
-                    >
-                      <Icon name={clearSVG} size="30px" />
-                    </Button>
-                  </Button.Group>
-                )}
+  const placeholder = useMemo(
+    () =>
+      data.placeholder ||
+      intl.formatMessage(messages.VideoBlockInputPlaceholder),
+    [intl, data],
+  );
+
+  return (
+    <div
+      className={cx(
+        'block video align',
+        {
+          selected: selected,
+          center: !Boolean(data.align),
+        },
+        data.align,
+      )}
+    >
+      {data.url ? (
+        <Body data={data} isEditMode={true} />
+      ) : (
+        <Message>
+          <center>
+            <img src={videoBlockSVG} alt="" />
+            <div className="toolbar-inner">
+              <Input
+                onKeyDown={onKeyDownVariantMenuForm}
+                onChange={onChangeUrl}
+                placeholder={placeholder}
+                value={url}
+                // Prevents propagation to the Dropzone and the opening
+                // of the upload browser dialog
+                onClick={(e) => e.stopPropagation()}
+              />
+              {url && (
                 <Button.Group>
                   <Button
                     basic
-                    primary
+                    className="cancel"
                     onClick={(e) => {
                       e.stopPropagation();
-                      this.onSubmitUrl();
+                      setUrl('');
                     }}
                   >
-                    <Icon name={aheadSVG} size="30px" />
+                    <Icon name={clearSVG} size="30px" />
                   </Button>
                 </Button.Group>
-              </div>
-            </center>
-          </Message>
-        )}
-        <SidebarPortal selected={this.props.selected}>
-          <VideoSidebar {...this.props} resetSubmitUrl={this.resetSubmitUrl} />
-        </SidebarPortal>
-      </div>
-    );
-  }
-}
+              )}
+              <Button.Group>
+                <Button
+                  basic
+                  primary
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSubmitUrl();
+                  }}
+                >
+                  <Icon name={aheadSVG} size="30px" />
+                </Button>
+              </Button.Group>
+            </div>
+          </center>
+        </Message>
+      )}
+      <SidebarPortal selected={selected}>
+        <VideoSidebar {...props} resetSubmitUrl={resetSubmitUrl} />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+Edit.propTypes = {
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  handleKeyDown: PropTypes.func.isRequired,
+};
 
-export default compose(injectIntl, withBlockExtensions)(Edit);
+export default withBlockExtensions(Edit);

package/src/components/manage/Blocks/Video/Edit.stories.jsx

@@ -0,0 +1,57 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import VideoComponent from './Edit';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlVideoComponent = injectIntl(VideoComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlVideoComponent
+        data={{
+          ...args,
+          '@type': 'video',
+        }}
+        selected={false}
+        block="1234"
+        onChangeBlock={() => {}}
+        onSelectBlock={() => {}}
+        onDeleteBlock={() => {}}
+        onFocusPreviousBlock={() => {}}
+        onFocusNextBlock={() => {}}
+        handleKeyDown={() => {}}
+        index={1}
+      />
+    </Wrapper>
+  );
+}
+
+export const Video = StoryComponent.bind({});
+
+Video.args = {
+  url: 'https://www.youtube.com/watch?v=ayjNbKju-8s',
+};
+
+export default {
+  title: 'Public components/Video/Video',
+  component: Video,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '600px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+  },
+};

package/src/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { VideoBlockSchema } from './schema';
-import { BlockDataForm } from '@plone/volto/components';
 import { Segment } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import videoSVG from '@plone/volto/icons/videocamera.svg';
 
 const messages = defineMessages({
@@ -18,7 +18,8 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock, navRoot, contentType } = props;
+  const { data, block, blocksErrors, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -44,6 +45,7 @@ const VideoSidebar = (props) => {
           block={block}
           navRoot={navRoot}
           contentType={contentType}
+          errors={blocksErrors}
         />
       )}
     </>