@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import Card from '../../../primitives/Card/Card';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -8,6 +9,8 @@ import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/Def
 import cx from 'classnames';
 
 const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+  const site = useSelector((state) => state.site?.data);
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
   const PreviewImageComponent = config.getComponent('PreviewImage').component;
@@ -23,7 +26,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const CustomItemBodyTemplate = config.getComponent({
             name: 'SummaryListingItemTemplate',
@@ -34,7 +37,10 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               name: 'Summary',
               dependencies: [item['@type']],
             }).component || DefaultSummary;
-          const showLink = !Summary.hideLink && !isEditMode;
+          let showLink = !Summary.hideLink && !isEditMode;
+          if (item['@type'] === 'Person' && hideProfileLinks !== undefined) {
+            showLink = !hideProfileLinks && !isEditMode;
+          }
           const ItemBodyTemplate = (props) =>
             CustomItemBodyTemplate ? (
               <CustomItemBodyTemplate item={item} />
@@ -44,14 +50,18 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                   item={item}
                   showPlaceholderImage={true}
                   imageComponent={PreviewImageComponent}
+                  sizes={`(max-width: ${config.settings.layout.tabletBreakpoint}px) 100vw, 220px`}
                 />
-                <Card.Summary a11yLabelId={props.a11yLabelId}>
-                  <Summary item={item} HeadingTag="h3" />
+                <Card.Summary
+                  a11yLabelId={props.a11yLabelId}
+                  LinkToItem={props.LinkToItem}
+                >
+                  <Summary item={item} />
                 </Card.Summary>
               </>
             );
           return (
-            <div
+            <li
               className={cx('listing-item has--align--left', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -60,10 +70,10 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Maps/MapsSidebar.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { MapsSchema } from '@plone/volto/components/manage/Blocks/Maps/schema';
+import { useIntl, defineMessages } from 'react-intl';
+import globeSVG from '@plone/volto/icons/globe.svg';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { Segment } from 'semantic-ui-react';
+
+const messages = defineMessages({
+  Maps: {
+    id: 'Maps',
+    defaultMessage: 'Maps',
+  },
+  NoMaps: {
+    id: 'No map selected',
+    defaultMessage: 'No map selected',
+  },
+});
+
+const MapsSidebar = (props) => {
+  const {
+    data,
+    block,
+    blocksErrors,
+    onChangeBlock,
+    navRoot,
+    contentType,
+    blocksConfig,
+  } = props;
+  const intl = useIntl();
+  const schema = MapsSchema({ ...props, intl });
+  const dataAdapter = blocksConfig[data['@type']].dataAdapter;
+
+  return (
+    <>
+      {!data.url ? (
+        <Segment className="sidebar-metadata-container" secondary>
+          {intl.formatMessage(messages.NoMaps)}
+          <Icon name={globeSVG} size="100px" color="#b8c6c8" />
+        </Segment>
+      ) : (
+        <BlockDataForm
+          schema={schema}
+          title={intl.formatMessage(messages.Maps)}
+          // START CUSTOMIZATION
+          onChangeField={(id, value) => {
+            dataAdapter({
+              block,
+              data,
+              id,
+              onChangeBlock,
+              value,
+            });
+          }}
+          // END CUSTOMIZATION
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      )}
+    </>
+  );
+};
+
+export default MapsSidebar;

package/src/components/Blocks/Maps/View.jsx

@@ -0,0 +1,37 @@
+/**
+ * View map block.
+ * @module components/manage/Blocks/Maps/View
+ */
+
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { compose } from 'redux';
+import Body from '@plone/volto/components/manage/Blocks/Maps/Body';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+
+/**
+ * View image block class.
+ * @class View
+ * @extends Component
+ */
+
+const View = ({ data, intl, style, className }) => (
+  // START CUSTOMIZATION
+  <div className={cx('block maps', className)} style={style}>
+    {/* // END CUSTOMIZATION */}
+    <Body data={data} />
+  </div>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default compose(injectIntl, withBlockExtensions)(View);

package/src/components/Blocks/Maps/adapter.js

@@ -0,0 +1,27 @@
+export const MapsBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+
+  const align = dataSaved.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+
+  if (isFloating) {
+    dataSaved = {
+      ...dataSaved,
+      styles: {
+        ...dataSaved.styles,
+        'blockWidth:noprefix': 'default',
+      },
+    };
+  }
+
+  onChangeBlock(block, dataSaved);
+};

package/src/components/Blocks/Maps/adapter.test.js

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from 'vitest';
+import { MapsBlockDataAdapter } from './adapter';
+
+const alignRight = { 'align:noprefix': 'right' };
+const alignCenter = { 'align:noprefix': 'center' };
+
+describe('MapsBlockDataAdapter', () => {
+  it('applies the default width for a floating map', () => {
+    const onChangeBlock = vi.fn();
+
+    MapsBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'maps', styles: { ...alignRight } },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://maps.example.com',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'maps',
+      url: 'https://maps.example.com',
+      styles: {
+        ...alignRight,
+        'blockWidth:noprefix': 'default',
+      },
+    });
+  });
+
+  it('leaves the styles untouched for a non-floating map', () => {
+    const onChangeBlock = vi.fn();
+
+    MapsBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'maps', styles: { ...alignCenter } },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://maps.example.com',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'maps',
+      url: 'https://maps.example.com',
+      styles: { ...alignCenter },
+    });
+  });
+
+  it('leaves the styles untouched when no alignment is set', () => {
+    const onChangeBlock = vi.fn();
+
+    MapsBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'maps' },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://maps.example.com',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'maps',
+      url: 'https://maps.example.com',
+    });
+  });
+});

package/src/components/Blocks/Maps/schema.js

@@ -1,5 +1,45 @@
+import config from '@plone/volto/registry';
+import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+
+const messages = defineMessages({
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+});
 export const mapsBlockSchemaEnhancer = ({ formData, schema, intl }) => {
-  schema.properties.align.default = 'wide';
-  schema.properties.align.actions = ['left', 'right', 'center', 'wide', 'full'];
+  addStyling({ schema, intl });
+
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (f) => f !== 'align',
+  );
+
+  const align = formData.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'align:noprefix',
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+  schema.properties.styles.schema.properties['align:noprefix'] = {
+    widget: 'blockAlignment',
+    title: intl.formatMessage(messages.Alignment),
+    default: 'center',
+    actions: config.blocks.alignments.map((alignment) => alignment.name),
+  };
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    actions: config.blocks.widths.map((width) => width.name),
+  };
+  schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
+    isFloating;
   return schema;
 };

package/src/components/Blocks/Separator/schema.js

@@ -1,7 +1,19 @@
 import { defaultStylingSchema } from '../schema';
+import config from '@plone/volto/registry';
 
 export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
+  const styleProps = schema.properties.styles?.schema?.properties;
+  if (styleProps?.['align:noprefix']) {
+    delete styleProps['align:noprefix'].filterActions;
+    styleProps['align:noprefix'].actions = config.blocks.alignments.map(
+      (alignment) => alignment.name,
+    );
+  }
+  if (styleProps?.['blockWidth:noprefix']) {
+    delete styleProps['blockWidth:noprefix'].filterActions;
+    styleProps['blockWidth:noprefix'].actions = ['narrow', 'default'];
+  }
 
   return schema;
 };

package/src/components/Blocks/Teaser/DefaultBody.tsx

@@ -1,11 +1,29 @@
+import { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import type { GetSiteResponse } from '@plone/types';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
 import type { SummaryComponentType } from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
 import Card from '../../../primitives/Card/Card';
 import config from '@plone/volto/registry';
+import { GridContext } from '@plone/volto/components/manage/Blocks/Grid/context';
+
+type FormState = {
+  site: { data: GetSiteResponse };
+};
 
 const TeaserDefaultTemplate = (props) => {
-  const { data, isEditMode } = props;
+  const site = useSelector<FormState, GetSiteResponse>(
+    (state) => state.site?.data,
+  );
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
+  const { data, isEditMode, isContainer } = props;
+  const columns = useContext(GridContext);
+  const sizes = config.blocks.blocksConfig.teaser?.getSizes?.({
+    data,
+    inGrid: isContainer,
+    columns,
+  });
   const href = data.href?.[0] || {};
   const image = data.preview_image?.[0];
   const url = data.preview_image?.[0]?.['@id'];
@@ -15,25 +33,36 @@ const TeaserDefaultTemplate = (props) => {
     name: 'Summary',
     dependencies: [href['@type']],
   }).component || DefaultSummary) as SummaryComponentType;
-  const showLink = !Summary.hideLink && !isEditMode;
+  let showLink = !Summary.hideLink && !isEditMode;
+  if (href['@type'] === 'Person' && hideProfileLinks !== undefined) {
+    showLink = !hideProfileLinks && !isEditMode;
+  }
   const { openExternalLinkInNewTab } = config.settings;
   const openLinkInNewTab =
     data.openLinkInNewTab ||
     (openExternalLinkInNewTab && !isInternalURL(href['@id']));
-  const { '@id': id, ...filteredData } = data;
+
+  // Ensures that overridden fields are used when "overwrite" is true
+  // and fallbacks to empty strings if they are not provided to ensure no undefined
+  // values are passed
+  const localOverrides = {
+    title: data.title || '',
+    description: data.description || '',
+    head_title: data.head_title || '',
+  };
 
   return (
     <Card item={showLink ? href : null} openLinkInNewTab={openLinkInNewTab}>
       <Card.Image
         src={url && !image?.image_field ? url : undefined}
-        item={!data.overwrite ? href : { ...href, ...filteredData }}
+        item={!data.overwrite ? href : { ...href, ...localOverrides }}
         image={data.overwrite ? image : undefined}
         imageComponent={Image}
+        sizes={sizes}
       />
       <Card.Summary>
         <Summary
-          item={!data.overwrite ? href : { ...href, ...filteredData }}
-          HeadingTag="h2"
+          item={!data.overwrite ? href : { ...href, ...localOverrides }}
           hide_description={props.data?.hide_description}
         />
       </Card.Summary>

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { VideoBlockSchema } from '@plone/volto/components/manage/Blocks/Video/schema';
+import { Segment } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import videoSVG from '@plone/volto/icons/videocamera.svg';
+
+const messages = defineMessages({
+  Video: {
+    id: 'Video',
+    defaultMessage: 'Video',
+  },
+  NoVideo: {
+    id: 'No Video selected',
+    defaultMessage: 'No Video selected',
+  },
+});
+
+const VideoSidebar = (props) => {
+  const {
+    blocksConfig,
+    blocksErrors,
+    data,
+    block,
+    onChangeBlock,
+    navRoot,
+    contentType,
+  } = props;
+  const intl = useIntl();
+  const schema = VideoBlockSchema({ ...props, intl });
+  const dataAdapter = blocksConfig[data['@type']].dataAdapter;
+
+  return (
+    <>
+      {!data.url ? (
+        <Segment className="sidebar-metadata-container" secondary>
+          {intl.formatMessage(messages.NoVideo)}
+          <Icon name={videoSVG} size="100px" color="#b8c6c8" />
+        </Segment>
+      ) : (
+        <BlockDataForm
+          schema={schema}
+          title={intl.formatMessage(messages.Video)}
+          // START CUSTOMIZATION
+          onChangeField={(id, value) => {
+            dataAdapter({
+              block,
+              data,
+              id,
+              onChangeBlock,
+              value,
+            });
+          }}
+          // END CUSTOMIZATION
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+          navRoot={navRoot}
+          contentType={contentType}
+          errors={blocksErrors}
+        />
+      )}
+    </>
+  );
+};
+
+export default VideoSidebar;

package/src/components/Blocks/Video/View.jsx

@@ -0,0 +1,38 @@
+/**
+ * View video block.
+ * @module components/manage/Blocks/Video/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Body from '@plone/volto/components/manage/Blocks/Video/Body';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import cx from 'classnames';
+
+/**
+ * View video block class.
+ * @class View
+ * @extends Component
+ */
+const View = (props) => {
+  const { data, className, style } = props;
+
+  return (
+    // START CUSTOMIZATION
+    <div className={cx('block video', className)} style={style}>
+      {/* // END CUSTOMIZATION */}
+      <Body data={data} />
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default withBlockExtensions(View);

package/src/components/Blocks/Video/adapter.js

@@ -0,0 +1,28 @@
+export const VideoBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  item,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+
+  const align = dataSaved.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+
+  if (isFloating) {
+    dataSaved = {
+      ...dataSaved,
+      styles: {
+        ...dataSaved.styles,
+        'blockWidth:noprefix': 'default',
+      },
+    };
+  }
+
+  onChangeBlock(block, dataSaved);
+};

package/src/components/Blocks/Video/adapter.test.js

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from 'vitest';
+import { VideoBlockDataAdapter } from './adapter';
+
+const alignLeft = { 'align:noprefix': 'left' };
+const alignCenter = { 'align:noprefix': 'center' };
+
+describe('VideoBlockDataAdapter', () => {
+  it('applies the default width for a floating video', () => {
+    const onChangeBlock = vi.fn();
+
+    VideoBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'video', styles: { ...alignLeft } },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://example.com/video',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'video',
+      url: 'https://example.com/video',
+      styles: {
+        ...alignLeft,
+        'blockWidth:noprefix': 'default',
+      },
+    });
+  });
+
+  it('leaves the styles untouched for a non-floating video', () => {
+    const onChangeBlock = vi.fn();
+
+    VideoBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'video', styles: { ...alignCenter } },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://example.com/video',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'video',
+      url: 'https://example.com/video',
+      styles: { ...alignCenter },
+    });
+  });
+
+  it('leaves the styles untouched when no alignment is set', () => {
+    const onChangeBlock = vi.fn();
+
+    VideoBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'video' },
+      id: 'url',
+      onChangeBlock,
+      value: 'https://example.com/video',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'video',
+      url: 'https://example.com/video',
+    });
+  });
+});

package/src/components/Blocks/Video/schema.js

@@ -1,5 +1,45 @@
+import config from '@plone/volto/registry';
+import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+
+const messages = defineMessages({
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+});
 export const videoBlockSchemaEnhancer = ({ formData, schema, intl }) => {
-  schema.properties.align.default = 'wide';
-  schema.properties.align.actions = ['left', 'right', 'center', 'wide', 'full'];
+  addStyling({ schema, intl });
+
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (f) => f !== 'align',
+  );
+
+  const align = formData.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'align:noprefix',
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+  schema.properties.styles.schema.properties['align:noprefix'] = {
+    widget: 'blockAlignment',
+    title: intl.formatMessage(messages.Alignment),
+    default: 'center',
+    actions: config.blocks.alignments.map((alignment) => alignment.name),
+  };
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    actions: config.blocks.widths.map((width) => width.name),
+  };
+  schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
+    isFloating;
   return schema;
 };