@plone/volto 19.0.0-alpha.9 → 19.1.0

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',
+    },
+  },
+};

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

@@ -90,14 +90,14 @@ test('Provides path to blocks', () => {
   expect(container).toMatchSnapshot();
 });
 
-test('Renders invalid blocks', () => {
+test('Filters out invalid blocks', () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const { queryAllByText } = render(
+  const { queryAllByText, queryByText } = render(
     <Provider store={store}>
       <RenderBlocks
         blocksConfig={{
@@ -113,7 +113,14 @@ test('Renders invalid blocks', () => {
         }}
         content={{
           blocks_layout: {
-            items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+            items: [
+              'MISSING-YOU-1',
+              'a',
+              'MISSING-YOU-2',
+              null,
+              undefined,
+              'undefined',
+            ],
           },
           blocks: {
             a: {
@@ -126,7 +133,10 @@ test('Renders invalid blocks', () => {
       />
     </Provider>,
   );
+  // Invalid blocks (missing from blocks object or invalid IDs) are filtered out and not rendered
   expect(
     queryAllByText('Invalid block - Will be removed on saving'),
-  ).toHaveLength(2);
+  ).toHaveLength(0);
+  // Only valid blocks are rendered
+  expect(queryByText('id: a - text: bar - path: /foo')).not.toBeNull();
 });

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

@@ -0,0 +1,71 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import SummaryViewComponent from './SummaryView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSummaryViewComponent = injectIntl(SummaryViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSummaryViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      image: {
+        scales: {
+          thumb: {
+            download: 'file:///preview.jpg',
+          },
+        },
+      },
+      image_caption: 'My image caption',
+      '@type': 'News Item',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/SummaryView',
+  component: SummaryViewComponent,
+  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',
+    },
+    items: {
+      description: 'Content in the page',
+    },
+  },
+};

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

@@ -0,0 +1,66 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import TabularViewComponent from './TabularView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlTabularViewComponent = injectIntl(TabularViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlTabularViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item 1',
+      description: 'My item description 1',
+      url: '/item1',
+    },
+    {
+      title: 'My item 2',
+      description: 'My item description 2',
+      url: '/item2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/TabularView',
+  component: TabularViewComponent,
+  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',
+    },
+    items: {
+      description: 'Row items of the page',
+    },
+  },
+};

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

@@ -222,6 +222,13 @@ class View extends Component {
       }
       return (
         <div id="view">
+          <BodyClass
+            className={
+              FoundView.displayName
+                ? `view-${this.cleanViewName(FoundView.displayName)}`
+                : null
+            }
+          />
           <FoundView {...this.props} />
         </div>
       );
@@ -246,7 +253,7 @@ class View extends Component {
         />
         <SlotRenderer name="aboveContent" content={this.props.content} />
         <RenderedView
-          key={this.props.content['@id']}
+          key={flattenToAppURL(this.props.content['@id'])}
           content={this.props.content}
           location={this.props.location}
           token={this.props.token}