@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

package/src/components/theme/VideoEmbed/VideoEmbed.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useCallback } from 'react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
+import cx from 'classnames';
+
+import PlayIcon from '@plone/volto/icons/play.svg';
+
+const VideoEmbed = (props) => {
+  const {
+    aspectRatio = '16:9',
+    autoplay,
+    brandedUI = false,
+    className,
+    color = '#444444',
+    hd = true,
+    id,
+    placeholder,
+    source,
+    title,
+    url,
+  } = props;
+
+  const [isActive, setIsActive] = useState(false);
+  const PlayVideo = useCallback(() => {
+    setIsActive(true);
+  }, []);
+
+  const getSrc = useCallback(() => {
+    if (source === 'youtube') {
+      return [
+        `https://www.youtube.com/embed/${id}`,
+        '?autohide=true',
+        `&autoplay=${isActive || autoplay ? 1 : 0}`,
+        `&mute=${autoplay ? 1 : 0}`,
+        `&color=${encodeURIComponent(color)}`,
+        `&hq=${hd}`,
+        '&jsapi=false',
+        `&modestbranding=${brandedUI}`,
+        `&rel=${brandedUI ? 0 : 1}`,
+      ].join('');
+    }
+
+    if (source === 'vimeo') {
+      return [
+        `https://player.vimeo.com/video/${id}`,
+        '?api=false',
+        `&autoplay=${isActive || autoplay ? 1 : 0}`,
+        `&muted=${autoplay ? 1 : 0}`,
+        `&byline=false`,
+        `&color=${encodeURIComponent(color)}`,
+        `&portrait=false`,
+        `&title=false`,
+      ].join('');
+    }
+
+    if (source === 'peertube') {
+      return [
+        `${url}`,
+        `?autoplay=${isActive || autoplay ? 1 : 0}`,
+        `&muted=${autoplay ? 1 : 0}`,
+      ].join('');
+    }
+
+    return '';
+  }, [source, id, isActive, autoplay, color, hd, brandedUI, url]);
+
+  return (
+    <div className={cx('ui embed video-embed', aspectRatio, className)}>
+      {isActive || autoplay ? (
+        <iframe
+          allowFullScreen={false}
+          frameBorder="0"
+          height="100%"
+          scrolling="no"
+          src={getSrc()}
+          title={`Embedded content from ${source}.`}
+          width="100%"
+          allow="autoplay; encrypted-media"
+        />
+      ) : (
+        <>
+          {placeholder ? (
+            <Image className="placeholder" src={placeholder} alt="" />
+          ) : (
+            <div className="fallback-placeholder"></div>
+          )}
+          <button
+            className="video-play-button"
+            onClick={PlayVideo}
+            aria-label={title ? `Play video ${title}` : 'Play video'}
+          >
+            <Icon name={PlayIcon} color="white" size="100%" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default VideoEmbed;

package/src/components/theme/View/EventDatesInfo.test.jsx

@@ -5,12 +5,7 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/EventView.stories.jsx

@@ -0,0 +1,89 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import EventViewComponent from './EventView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import config from '@plone/volto/registry';
+const IntlEventViewComponent = injectIntl(EventViewComponent);
+const { settings } = config;
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlEventViewComponent
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  attendees: [],
+  subjects: [],
+};
+
+export const EventViewAllProps = StoryComponent.bind({});
+EventViewAllProps.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+  attendees: ['John Doe', 'Mario Rossi'],
+  contact_email: 'test@example.com',
+  contact_name: 'John Doe',
+  contact_phone: '0123456789',
+  end: '2019-06-24T15:20:00+00:00',
+  event_url: 'https://www.example.com',
+  location: 'Volto, Plone',
+  open_end: false,
+  recurrence: 'RRULE:FREQ=DAILY;INTERVAL=7;COUNT=7',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: ['Guillotina', 'Volto'],
+  whole_day: false,
+};
+
+export const EventViewWithoutLinkToApiInTheText = StoryComponent.bind({});
+EventViewWithoutLinkToApiInTheText.args = {
+  title: 'Hello World!',
+  attendees: [],
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: [],
+  text: {
+    data: `<p>Hello World!</p><p>This is an <a href="${settings.apiPath}/foo/bar">internal link</a> and a <a href="${settings.apiPath}/foo/baz">second link</a></p>`,
+  },
+};
+export default {
+  title: 'Public components/View/EventView',
+  component: EventViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    end: {
+      control: 'date',
+    },
+    start: {
+      control: 'date',
+    },
+  },
+};

package/src/components/theme/View/EventView.test.jsx

@@ -14,12 +14,7 @@ const store = mockStore({
   },
 });
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/FileView.stories.jsx

@@ -0,0 +1,50 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import FileViewComponent from './FileView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlFileViewComponent = injectIntl(FileViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper customStore={{}}>
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlFileViewComponent
+        content={{
+          ...args,
+          file: {
+            download: 'file:///preview.pdf',
+            ...args,
+          },
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  filename: 'preview.pdf',
+};
+
+export default {
+  title: 'Public components/View/FileView',
+  component: FileViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    filename: {
+      description: 'Name of the file',
+    },
+  },
+};

package/src/components/theme/View/ImageView.jsx

@@ -3,7 +3,6 @@
  * @module components/theme/View/ImageView
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
@@ -21,6 +20,7 @@ const ImageView = ({ content }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const width = config.settings.layout.defaultContainerWidth;
 
   return (
     <Container className="view-wrapper">
@@ -38,6 +38,7 @@ const ImageView = ({ content }) => {
             imageField="image"
             alt={content.title}
             responsive={true}
+            sizes={`auto, (max-width: ${width}px) 100vw, ${width}px`}
           />
           <figcaption>
             <FormattedMessage

package/src/components/theme/View/ImageView.test.jsx

@@ -2,11 +2,14 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
 
 import ImageView from './ImageView';
 
 const mockStore = configureStore();
 
+config.settings.layout = { tabletBreakpoint: 768, defaultContainerWidth: 940 };
+
 test('renders an image view component', () => {
   const store = mockStore({
     intl: {

package/src/components/theme/View/LinkView.stories.jsx

@@ -0,0 +1,57 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import LinkViewComponent from './LinkView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlLinkViewComponent = injectIntl(LinkViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        userSession: {
+          token: null,
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlLinkViewComponent
+        token="1234"
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  remoteUrl: '/news',
+};
+
+export default {
+  title: 'Public components/View/LinkView',
+  component: LinkViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    remoteUrl: {
+      description: 'remoteUrl mentioned in the page',
+    },
+  },
+};

package/src/components/theme/View/ListingView.stories.jsx

@@ -0,0 +1,70 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ListingViewComponent from './ListingView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlListingViewComponent = injectIntl(ListingViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlListingViewComponent
+        content={{
+          title: 'Hello World!',
+          description: 'Hi',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      '@type': 'Document',
+    },
+    {
+      title: 'Second item',
+      description: 'My second item description',
+      url: '/item2',
+      '@type': 'Document',
+    },
+  ],
+};
+
+export default {
+  title: 'Public components/View/ListingView',
+  component: ListingViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Listed pages',
+    },
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+  },
+};

package/src/components/theme/View/NewsItemView.stories.jsx

@@ -0,0 +1,58 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import NewsItemViewComponent from './NewsItemView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlNewsItemViewComponent = injectIntl(NewsItemViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlNewsItemViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+};
+
+export default {
+  title: 'Public components/View/NewsItemView',
+  component: NewsItemViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    text: {
+      description: 'Content',
+    },
+  },
+};

package/src/components/theme/View/RenderBlocks.jsx

@@ -5,8 +5,7 @@ import map from 'lodash/map';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import {
   applyBlockDefaults,
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
+  getBlocks,
   hasBlocksData,
 } from '@plone/volto/helpers/Blocks/Blocks';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
@@ -28,26 +27,25 @@ const messages = defineMessages({
 const RenderBlocks = (props) => {
   const { blockWrapperTag, content, location, isContainer, metadata } = props;
   const intl = useIntl();
-  const blocksFieldname = getBlocksFieldname(content);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
   const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
   const CustomTag = props.as || React.Fragment;
 
+  const blockList = getBlocks(content);
+
   return hasBlocksData(content) ? (
     <CustomTag>
-      {map(content[blocksLayoutFieldname].items, (block) => {
+      {map(blockList, ([block, rawBlockData]) => {
         const Block =
-          blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view ||
-          ViewDefaultBlock;
+          blocksConfig[rawBlockData?.['@type']]?.view || ViewDefaultBlock;
 
         const blockData = applyBlockDefaults({
-          data: content[blocksFieldname][block],
+          data: rawBlockData,
           intl,
           metadata,
           properties: content,
         });
 
-        if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+        if (rawBlockData?.['@type'] === 'empty') {
           return (
             <MaybeWrap
               key={block}
@@ -91,7 +89,7 @@ const RenderBlocks = (props) => {
           return (
             <div key={block}>
               {intl.formatMessage(messages.unknownBlock, {
-                block: content[blocksFieldname]?.[block]?.['@type'],
+                block: rawBlockData?.['@type'],
               })}
             </div>
           );

package/src/components/theme/View/RenderBlocks.stories.jsx

@@ -0,0 +1,112 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import RenderBlocksComponent from './RenderBlocks';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+import config from '@plone/volto/registry';
+
+const IntlRenderBlocksComponent = injectIntl(RenderBlocksComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlRenderBlocksComponent
+        blocksConfig={{
+          ...config.blocks.blocksConfig,
+          custom: {
+            id: 'custom',
+            ...args,
+          },
+        }}
+        content={{
+          blocks_layout: {
+            items: ['a', 'b'],
+          },
+          ...args,
+        }}
+        path="/foo"
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  view: ({ id, data }) => (
+    <div>
+      {id} - {data.text}
+    </div>
+  ),
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'a',
+    },
+    b: {
+      '@type': 'custom',
+      text: 'b',
+    },
+  },
+};
+export const PathToBlocks = StoryComponent.bind({});
+PathToBlocks.args = {
+  view: ({ id, data, path }) => (
+    <div>
+      id: {id} - text: {data.text} - path: {path}
+    </div>
+  ),
+
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'bar',
+    },
+    b: {
+      '@type': 'custom',
+      text: 'foo',
+    },
+  },
+};
+
+export const InvalidBlocks = StoryComponent.bind({});
+InvalidBlocks.args = {
+  blocks_layout: {
+    items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+  },
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'bar',
+    },
+  },
+};
+export default {
+  title: 'Internal components/View/RenderBlocks',
+  component: RenderBlocksComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    view: {
+      description: 'Pattern in which to place block content',
+    },
+    blocks: {
+      description: 'blocks in the page',
+    },
+    blocks_layout: {
+      description: 'block layout in the page',
+    },
+  },
+};