@plone/volto 17.0.0-alpha.15 → 17.0.0-alpha.16

package/src/components/manage/Blocks/Container/EditBlockWrapper.jsx

@@ -0,0 +1,120 @@
+import { Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import NewBlockAddButton from './NewBlockAddButton';
+import cx from 'classnames';
+import { isInteractiveElement } from '@plone/volto/helpers';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  delete: {
+    id: 'Remove element {index}',
+    defaultMessage: 'Remove element {index}',
+  },
+  reset: {
+    id: 'Reset element {index}',
+    defaultMessage: 'Reset element {index}',
+  },
+});
+
+const EditBlockWrapper = (props) => {
+  const intl = useIntl();
+
+  const { blockProps, draginfo, children } = props;
+  const {
+    block,
+    selected,
+    type,
+    blocksConfig,
+    onChangeBlock,
+    onDeleteBlock,
+    onSelectBlock,
+    data,
+    index,
+  } = blockProps;
+
+  function onResetBlock() {
+    onChangeBlock(block, { '@type': 'empty' });
+  }
+
+  return (
+    <div
+      ref={draginfo.innerRef}
+      {...draginfo.draggableProps}
+      {...draginfo.dragHandleProps}
+      className={cx(`block-editor-${data['@type']} contained`, { selected })}
+    >
+      <div
+        role="presentation"
+        className="cell-wrapper"
+        onClick={(e) => {
+          onSelectBlock(block);
+        }}
+      >
+        {type !== 'empty' ? (
+          <Button
+            aria-label={intl.formatMessage(messages.reset, {
+              index,
+            })}
+            basic
+            icon
+            onClick={(e) => onResetBlock(block, {})}
+            className="remove-block-button"
+          >
+            <Icon name={clearSVG} className="circled" size="24px" />
+          </Button>
+        ) : (
+          <Button
+            basic
+            icon
+            className="remove-block-button"
+            onClick={(e) => onDeleteBlock(block, true)}
+            aria-label={intl.formatMessage(messages.delete, {
+              index,
+            })}
+          >
+            <Icon
+              name={clearSVG}
+              className="circled"
+              size="24px"
+              color="#e40166"
+            />
+          </Button>
+        )}
+        {type && type !== 'empty' ? (
+          <div className={cx('ui drag block inner', type)}>{children}</div>
+        ) : (
+          <div
+            className={cx('gridBlock-empty-placeholder', {
+              selected: selected,
+            })}
+            role="presentation"
+            onClick={(e) => {
+              onSelectBlock(block);
+              // If the click is in the button, then
+              if (isInteractiveElement(e.target)) {
+                e.stopPropagation();
+              }
+            }}
+          >
+            <p>Add a new block</p>
+            <NewBlockAddButton
+              block={block}
+              index={index}
+              blocksConfig={blocksConfig}
+              onMutateBlock={(block, value) =>
+                onChangeBlock(block, {
+                  ...data,
+                  ...value,
+                })
+              }
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EditBlockWrapper;

package/src/components/manage/Blocks/Container/NewBlockAddButton.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Button, Ref } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { BlockChooser, Icon } from '@plone/volto/components';
+import { useDetectClickOutside } from '@plone/volto/helpers';
+import addSVG from '@plone/volto/icons/add.svg';
+import { usePopper } from 'react-popper';
+import { Portal } from 'react-portal';
+
+const messages = defineMessages({
+  addBlock: {
+    id: 'Add block in position {index}',
+    defaultMessage: 'Add block in position {index}',
+  },
+});
+
+const NewBlockAddButton = (props) => {
+  const intl = useIntl();
+  const { blocksConfig, block, index, onMutateBlock } = props;
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  const blockChooserRef = useDetectClickOutside({
+    onTriggered: () => setOpenMenu(false),
+    triggerKeys: ['Escape'],
+  });
+
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'bottom',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, -30],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['right', 'top-start'],
+        },
+      },
+    ],
+  });
+
+  return (
+    <>
+      <Ref innerRef={setReferenceElement}>
+        <Button
+          basic
+          icon
+          onClick={() => setOpenMenu(true)}
+          className="add-block-button"
+          aria-label={intl.formatMessage(messages.addBlock, {
+            index,
+          })}
+        >
+          <Icon name={addSVG} className="circled" size="24px" />
+        </Button>
+      </Ref>
+      {isOpenMenu ? (
+        <Portal node={document.getElementById('body')}>
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className="container-chooser-wrapper"
+          >
+            <BlockChooser
+              onMutateBlock={onMutateBlock}
+              currentBlock={block}
+              showRestricted
+              blocksConfig={blocksConfig}
+              ref={blockChooserRef}
+            />
+          </div>
+        </Portal>
+      ) : null}
+    </>
+  );
+};
+
+export default NewBlockAddButton;

package/src/components/manage/Blocks/Container/SimpleContainerToolbar.jsx

@@ -0,0 +1,54 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+import addSVG from '@plone/volto/icons/add.svg';
+import configSVG from '@plone/volto/icons/configuration.svg';
+
+const messages = defineMessages({
+  addBlock: {
+    id: 'Add element to container',
+    defaultMessage: 'Add element to container',
+  },
+  blockSettings: {
+    id: 'Container settings',
+    defaultMessage: 'Container settings',
+  },
+});
+
+const SimpleContainerToolbar = (props) => {
+  const { data, onAddNewBlock, maxLength, setSelectedBlock } = props;
+  const intl = useIntl();
+
+  return (
+    <div className="toolbar">
+      <Button.Group>
+        <Button
+          aria-label={intl.formatMessage(messages.addBlock)}
+          icon
+          basic
+          disabled={data?.blocks_layout?.items?.length >= maxLength}
+          onClick={(e) => onAddNewBlock()}
+        >
+          <Icon name={addSVG} size="24px" />
+        </Button>
+      </Button.Group>
+      <Button.Group>
+        <Button
+          aria-label={intl.formatMessage(messages.blockSettings)}
+          icon
+          basic
+          onClick={(e) => {
+            e.stopPropagation();
+            setSelectedBlock();
+            props.setSidebarTab(1);
+          }}
+        >
+          <Icon name={configSVG} size="24px" />
+        </Button>
+      </Button.Group>
+    </div>
+  );
+};
+
+export default SimpleContainerToolbar;

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

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import ContainerEdit from '../Container/Edit';
+
+const GridBlockEdit = (props) => {
+  const { data } = props;
+
+  const columnsLength = data?.blocks_layout?.items?.length || 0;
+
+  return (
+    <div
+      className={cx({
+        one: columnsLength === 1,
+        two: columnsLength === 2,
+        three: columnsLength === 3,
+        four: columnsLength >= 4,
+        'grid-items': true,
+      })}
+    >
+      <ContainerEdit {...props} direction="horizontal" />
+    </div>
+  );
+};
+
+GridBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default GridBlockEdit;

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

@@ -0,0 +1,42 @@
+import { Grid } from 'semantic-ui-react';
+import cx from 'classnames';
+import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const GridBlockView = (props) => {
+  const { data, path, className } = props;
+  const metadata = props.metadata || props.properties;
+  const columns = data.blocks_layout.items;
+  const blocksConfig =
+    config.blocks.blocksConfig[data['@type']].blocksConfig ||
+    props.blocksConfig;
+  const location = {
+    pathname: path,
+  };
+  return (
+    <div
+      className={cx('block', data['@type'], className, {
+        one: columns?.length === 1,
+        two: columns?.length === 2,
+        three: columns?.length === 3,
+        four: columns?.length === 4,
+      })}
+    >
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      <Grid stackable stretched columns={columns.length}>
+        <RenderBlocks
+          {...props}
+          blockWrapperTag={Grid.Column}
+          metadata={metadata}
+          content={data}
+          location={location}
+          blocksConfig={blocksConfig}
+        />
+      </Grid>
+    </div>
+  );
+};
+
+export default withBlockExtensions(GridBlockView);

package/src/components/manage/Blocks/Grid/adapter.js

@@ -0,0 +1,14 @@
+export const GridBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+
+  onChangeBlock(block, dataSaved);
+};

package/src/components/manage/Blocks/Grid/grid-1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <rect width="67" height="53" fill="#FFF" opacity=".9" transform="translate(15 22)"/>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/grid-2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 22)">
+      <rect width="37" height="53"/>
+      <rect width="37" height="53" x="42"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/grid-3.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(6 22)">
+      <rect width="25" height="53" x="58"/>
+      <rect width="25" height="53"/>
+      <rect width="25" height="53" x="29"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Blocks/Grid/grid-4.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(8 22)">
+      <rect width="18" height="53" x="42"/>
+      <rect width="18" height="53" x="63"/>
+      <rect width="18" height="53"/>
+      <rect width="18" height="53" x="21"/>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,35 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  headline: {
+    id: 'Headline',
+    defaultMessage: 'Headline',
+  },
+  grid: {
+    id: 'Grid',
+    defaultMessage: 'Grid',
+  },
+});
+
+export const GridBlockSchema = (props) => {
+  const { intl } = props;
+
+  return {
+    title: intl.formatMessage(messages.grid),
+    block: 'grid',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['headline'],
+      },
+    ],
+
+    properties: {
+      headline: {
+        title: intl.formatMessage(messages.headline),
+      },
+    },
+    required: [],
+  };
+};

package/src/components/manage/Blocks/Grid/templates.js

@@ -0,0 +1,47 @@
+import { defineMessages } from 'react-intl';
+import { blocksFormGenerator } from '@plone/volto/helpers';
+
+import gridTemplate1 from './grid-1.svg';
+import gridTemplate2 from './grid-2.svg';
+import gridTemplate3 from './grid-3.svg';
+import gridTemplate4 from './grid-4.svg';
+
+const messages = defineMessages({
+  column: {
+    id: 'column',
+    defaultMessage: 'column',
+  },
+  columns: {
+    id: 'columns',
+    defaultMessage: 'columns',
+  },
+});
+
+const templates = (type) => (intl) => [
+  {
+    image: gridTemplate1,
+    id: 'gridtemplateone',
+    title: `1 ${intl.formatMessage(messages.column)}`,
+    blocksData: blocksFormGenerator(1, type),
+  },
+  {
+    image: gridTemplate2,
+    id: 'gridtemplatetwo',
+    title: `2 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(2, type),
+  },
+  {
+    image: gridTemplate3,
+    id: 'gridtemplatethree',
+    title: `3 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(3, type),
+  },
+  {
+    image: gridTemplate4,
+    id: 'gridtemplatefour',
+    title: `4 ${intl.formatMessage(messages.columns)}`,
+    blocksData: blocksFormGenerator(4, type),
+  },
+];
+
+export default templates;

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -8,7 +8,7 @@ import { ImageSchema } from './schema';
 import imageSVG from '@plone/volto/icons/image.svg';
 
 const ImageSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { blocksConfig, data, block, onChangeBlock } = props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   return (
@@ -55,6 +55,7 @@ const ImageSidebar = (props) => {
         onChangeBlock={onChangeBlock}
         formData={data}
         block={block}
+        blocksConfig={blocksConfig}
       />
     </>
   );

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

@@ -101,3 +101,14 @@ export function ImageSchema({ formData, intl }) {
     required: [],
   };
 }
+
+export const gridImageDisableSizeAndPositionHandlersSchema = ({
+  schema,
+  formData,
+  intl,
+}) => {
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (item) => !['align', 'size'].includes(item),
+  );
+  return schema;
+};

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

@@ -101,3 +101,8 @@ export const TeaserSchema = ({ intl }) => {
 
   return schema;
 };
+
+export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -53,6 +53,7 @@ const DragDropList = (props) => {
   const {
     childList,
     children,
+    direction = 'vertical',
     onMoveItem,
     as = 'div',
     style,
@@ -128,6 +129,7 @@ const DragDropList = (props) => {
     >
       <Droppable
         droppableId={uid}
+        direction={direction}
         renderClone={(provided, snapshot, rubric) => {
           const index = rubric.source.index;
           return children({
@@ -160,19 +162,22 @@ const DragDropList = (props) => {
                 </Draggable>
               ))}
             {provided.placeholder}
-            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: placeholderProps.clientY,
-                  left: placeholderProps.clientX,
-                  height: placeholderProps.clientHeight,
-                  background: '#eee',
-                  width: placeholderProps.clientWidth,
-                  borderRadius: '3px',
-                }}
-              />
-            )}
+            {/* TODO: Fix the ghost problem if horizontal dnd is present */}
+            {direction !== 'horizontal' &&
+              !isEmpty(placeholderProps) &&
+              snapshot.isDraggingOver && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: placeholderProps.clientY,
+                    left: placeholderProps.clientX,
+                    height: placeholderProps.clientHeight,
+                    background: '#eee',
+                    width: placeholderProps.clientWidth,
+                    borderRadius: '3px',
+                  }}
+                />
+              )}
           </AsDomComponent>
         )}
       </Droppable>

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button, Grid, Message } from 'semantic-ui-react';
+
+const TemplateChooser = ({ templates, onSelectTemplate }) => {
+  const intl = useIntl();
+  return (
+    <div className="template-chooser">
+      <Message>
+        <Grid columns={templates(intl).length}>
+          {templates(intl).map((template, index) => (
+            <Grid.Column key={template.id}>
+              <Button
+                className="template-chooser-item"
+                onClick={() => onSelectTemplate(index)}
+              >
+                <img src={template.image} alt="" />
+                <div className="template-chooser-title">
+                  {intl.formatMessage({
+                    id: template.id,
+                    defaultMessage: template.title,
+                  })}
+                </div>
+              </Button>
+            </Grid.Column>
+          ))}
+        </Grid>
+      </Message>
+    </div>
+  );
+};
+
+TemplateChooser.propTypes = {
+  templates: PropTypes.func.isRequired,
+  onSelectTemplate: PropTypes.func.isRequired,
+};
+
+export default TemplateChooser;

package/src/components/manage/TemplateChooser/TemplateChooser.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import TemplateChooser from './TemplateChooser';
+import templateSVG from './template.svg';
+
+const mockStore = configureStore();
+
+test('renders a TemplateChooser component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: { templateid: 'Template default translation' },
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <TemplateChooser
+        templates={() => [
+          {
+            image: templateSVG,
+            id: 'templateid',
+            defaultMessage: 'Template default translation',
+          },
+        ]}
+        onSelectTemplate={() => {}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/manage/TemplateChooser/template.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 21)">
+      <rect width="78" height="29"/>
+      <rect width="36" height="8" y="33"/>
+      <rect width="77" height="10" y="45"/>
+    </g>
+  </g>
+</svg>

package/src/components/theme/Component/Component.jsx

@@ -1,7 +1,7 @@
 import registry from '@plone/volto/registry';
 
 /**
- * A component that can autommatically look up its implementation from the
+ * A component that can automatically look up its implementation from the
  * registry based on the provided component `componentName`
  */
 const Component = ({ componentName, dependencies, ...rest }) => {