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

package/src/__mocks__/semantic-ui-react.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+type GenericProps = {
+  children?: React.ReactNode;
+} & Record<string, unknown>;
+
+const createComponent =
+  (element: keyof JSX.IntrinsicElements = 'div') =>
+  ({ children, ...rest }: GenericProps) =>
+    React.createElement(element, rest, children);
+
+export const Container = createComponent('div');
+export const Segment = createComponent('section');
+export const Button = createComponent('button');
+export const Form = createComponent('form');
+export const Input = createComponent('input');
+export const Pagination = createComponent('div');
+export const Dimmer = createComponent('div');
+export const Loader = createComponent('div');
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  Container,
+  Segment,
+  Button,
+  Form,
+  Input,
+  Pagination,
+  Dimmer,
+  Loader,
+};

package/src/components/Blocks/Block/EditBlockWrapper.jsx

@@ -84,7 +84,15 @@ const EditBlockWrapper = (props) => {
     style: { ...style, ...draginfo.draggableProps.style },
   };
 
-  return blocksConfig?.[type]?.blockModel !== 3 ? (
+  if (blocksConfig?.[type]?.blockModel === 3) {
+    // We still need to attach the draggable props/ref so RBD stays happy,
+    // but we skip rendering the drag handle and friends
+    // consider removing the whole EditBlockWrapper for BlockModelv3 blocks in the future
+    // or moving the handlers here.
+    return <>{children}</>;
+  }
+
+  return (
     <div
       ref={draginfo.innerRef}
       {...styleMergedWithDragProps}
@@ -160,8 +168,6 @@ const EditBlockWrapper = (props) => {
         </div>
       </div>
     </div>
-  ) : (
-    <>{children}</>
   );
 };
 

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

@@ -1,7 +1,19 @@
 import { defaultStylingSchema } from '../schema';
+import config from '@plone/volto/registry';
 
 export const ButtonStylingSchema = ({ 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/EventCalendar/Search/components/EventTemplate.tsx

@@ -49,7 +49,7 @@ const EventItem = ({ item, lang, isEditMode }) => {
               <span className="event-title">{item.head_title}</span>
             )}
           </div>
-          <DefaultSummary item={item} HeadingTag="h2" />
+          <DefaultSummary item={item} />
         </Card.Summary>
       </Card>
     </div>

package/src/components/Blocks/Image/Edit.jsx

@@ -13,6 +13,7 @@ import Caption from '../../Caption/Caption';
 function Edit(props) {
   const { data } = props;
   const Image = config.getComponent({ name: 'Image' }).component;
+
   const onSelectItem = React.useCallback(
     (url, item) => {
       const dataAdapter = props.blocksConfig[props.data['@type']].dataAdapter;
@@ -49,42 +50,17 @@ function Edit(props) {
 
   return (
     <>
-      <div
-        className={cx(
-          'block image align',
-          {
-            center: !Boolean(data.align),
-          },
-          data.align,
-        )}
-      >
+      <div className={cx('block image')}>
         {data.url ? (
           <figure
-            className={cx(
-              'figure',
-              {
-                center: !Boolean(data.align),
-              },
-              data.align,
-              {
-                // START CUSTOMIZATION
-                // 'full-width': data.align === 'full',
-                // END CUSTOMIZATION
-                large: data.size === 'l',
-                medium: data.size === 'm' || !data.size,
-                small: data.size === 's',
-              },
-            )}
+            // START CUSTOMIZATION
+            className={cx({
+              large: data.size === 'l' || !data.size,
+              medium: data.size === 'm',
+              small: data.size === 's',
+            })}
           >
             <Image
-              // START CUSTOMIZATION - Moved to the figure
-              // className={cx({
-              //   'full-width': data.align === 'full',
-              //   large: data.size === 'l',
-              //   medium: data.size === 'm',
-              //   small: data.size === 's',
-              // })}
-              // END CUSTOMIZATION
               item={
                 data.image_scales
                   ? {
@@ -94,6 +70,7 @@ function Edit(props) {
                     }
                   : undefined
               }
+              // END CUSTOMIZATION
               src={
                 data.image_scales
                   ? undefined

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

@@ -37,12 +37,10 @@ export const ImageView = ({ className, data, detached, properties, style }) => {
   return (
     <div
       className={cx(
-        'block image align',
+        'block image',
         {
-          center: !Boolean(data.align),
           detached,
         },
-        data.align,
         className,
       )}
       style={style}
@@ -52,31 +50,16 @@ export const ImageView = ({ className, data, detached, properties, style }) => {
           {(() => {
             const image = (
               <figure
-                className={cx(
-                  'figure',
-                  {
-                    center: !Boolean(data.align),
-                    detached,
-                  },
-                  data.align,
-                  {
-                    // START CUSTOMIZATION
-                    // 'full-width': data.align === 'full',
-                    // END CUSTOMIZATION
-                    large: data.size === 'l',
-                    medium: data.size === 'm' || !data.size,
-                    small: data.size === 's',
-                  },
-                )}
+                // START CUSTOMIZATION
+                className={cx({
+                  detached,
+                  large: data.size === 'l' || !data.size,
+                  medium: data.size === 'm',
+                  small: data.size === 's',
+                })}
+                // END CUSTOMIZATION
               >
                 <Image
-                  // Removed for now
-                  // className={cx({
-                  //   'full-width': data.align === 'full',
-                  //   large: data.size === 'l',
-                  //   medium: data.size === 'm',
-                  //   small: data.size === 's',
-                  // })}
                   item={
                     data.image_scales
                       ? {

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

@@ -17,25 +17,39 @@ export const ImageBlockDataAdapter = ({
     [id]: value,
   };
 
-  if (id === 'align' && !(value === 'left' || value === 'right')) {
-    if (data.size !== 'l') {
-      dataSaved = {
-        ...dataSaved,
-        size: 'l',
-        styles: {
-          ...dataSaved.styles,
-          'size:noprefix': SIZEMAP['l'],
-        },
-      };
-    }
-  }
+  const align = dataSaved.styles?.['align:noprefix'];
+  const isFloating = align === 'left' || align === 'right';
+  const isLarge =
+    dataSaved.size === 'l' ||
+    dataSaved.styles?.['size:noprefix'] === 'var(--size-large)';
 
-  if (id === 'size') {
+  if (!isFloating) {
+    dataSaved = {
+      ...dataSaved,
+      size: 'l',
+      styles: {
+        ...dataSaved.styles,
+        'size:noprefix': SIZEMAP['l'],
+      },
+    };
+  }
+  if (!isLarge && isFloating) {
+    dataSaved = {
+      ...dataSaved,
+      styles: {
+        ...dataSaved.styles,
+        'size:noprefix': SIZEMAP[dataSaved.size] || 'large',
+        'blockWidth:noprefix': 'narrow',
+      },
+    };
+  }
+  if (isLarge && isFloating) {
     dataSaved = {
       ...dataSaved,
       styles: {
         ...dataSaved.styles,
-        'size:noprefix': SIZEMAP[value],
+        'size:noprefix': SIZEMAP['l'],
+        'blockWidth:noprefix': 'default',
       },
     };
   }

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

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from 'vitest';
+import { ImageBlockDataAdapter } from './adapter';
+
+const alignLeft = { 'align:noprefix': 'left' };
+const alignRight = { 'align:noprefix': 'right' };
+
+describe('ImageBlockDataAdapter', () => {
+  it('forces a large size for non-floating images', () => {
+    const onChangeBlock = vi.fn();
+
+    ImageBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'image' },
+      id: 'align',
+      onChangeBlock,
+      value: 'center',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'image',
+      align: 'center',
+      size: 'l',
+      styles: { 'size:noprefix': 'large' },
+    });
+  });
+
+  it('maps the current size and applies a narrow width for a floating, non-large image', () => {
+    const onChangeBlock = vi.fn();
+
+    ImageBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'image', size: 'm', styles: { ...alignLeft } },
+      id: 'align',
+      onChangeBlock,
+      value: 'left',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'image',
+      align: 'left',
+      size: 'm',
+      styles: {
+        ...alignLeft,
+        'size:noprefix': 'medium',
+        'blockWidth:noprefix': 'narrow',
+      },
+    });
+  });
+
+  it('applies the default width for a floating image that is large by size', () => {
+    const onChangeBlock = vi.fn();
+
+    ImageBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'image', size: 'l', styles: { ...alignRight } },
+      id: 'align',
+      onChangeBlock,
+      value: 'right',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'image',
+      align: 'right',
+      size: 'l',
+      styles: {
+        ...alignRight,
+        'size:noprefix': 'large',
+        'blockWidth:noprefix': 'default',
+      },
+    });
+  });
+
+  it('applies the default width for a floating image that is large by style', () => {
+    const onChangeBlock = vi.fn();
+
+    ImageBlockDataAdapter({
+      block: 'block-1',
+      data: {
+        '@type': 'image',
+        styles: { ...alignLeft, 'size:noprefix': 'var(--size-large)' },
+      },
+      id: 'align',
+      onChangeBlock,
+      value: 'left',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'image',
+      align: 'left',
+      styles: {
+        ...alignLeft,
+        'size:noprefix': 'large',
+        'blockWidth:noprefix': 'default',
+      },
+    });
+  });
+
+  it('copies the item metadata when a url value is set', () => {
+    const onChangeBlock = vi.fn();
+    const item = {
+      credit: 'A photographer',
+      Description: 'A description',
+      Title: 'A title',
+      image_field: 'image',
+      image_scales: { image: [{ download: 'image.png' }] },
+    };
+
+    ImageBlockDataAdapter({
+      block: 'block-1',
+      data: { '@type': 'image' },
+      id: 'url',
+      item,
+      onChangeBlock,
+      value: '/an-image',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'image',
+      url: '/an-image',
+      size: 'l',
+      styles: { 'size:noprefix': 'large' },
+      credit: { data: 'A photographer' },
+      description: 'A description',
+      title: 'A title',
+      image_field: 'image',
+      image_scales: { image: [{ download: 'image.png' }] },
+    });
+  });
+
+  it('clears the item metadata when the url value is removed', () => {
+    const onChangeBlock = vi.fn();
+
+    ImageBlockDataAdapter({
+      block: 'block-1',
+      data: {
+        '@type': 'image',
+        alt: 'alt text',
+        credit: { data: 'credit' },
+        description: 'description',
+        image_scales: {},
+        image_field: 'image',
+        title: 'title',
+      },
+      id: 'url',
+      onChangeBlock,
+      value: '',
+    });
+
+    expect(onChangeBlock).toHaveBeenCalledWith('block-1', {
+      '@type': 'image',
+      url: '',
+      size: 'l',
+      styles: { 'size:noprefix': 'large' },
+    });
+  });
+});

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

@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'Block Width',
     defaultMessage: 'Block Width',
   },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
 });
 
 export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
@@ -49,28 +53,38 @@ export const standAloneImageBlockSchemaEnhancer = ({
   intl,
 }) => {
   if (formData.url) {
-    schema.properties.align.default = 'center';
-    schema.properties.align.actions = ['left', 'right', 'center'];
+    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.size.default = 'l';
-    schema.properties.size.disabled = formData.align === 'center';
     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',
-      filterActions: ['narrow', 'default', 'layout', 'full'],
-      actions: config.blocks.widths,
+      actions: config.blocks.widths.map((width) => width.name),
     };
 
     schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
-      formData.align === 'left' || formData.align === 'right';
+      isFloating;
+    schema.properties.size.disabled = !isFloating;
   }
-
   return schema;
 };
 

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

@@ -1,4 +1,5 @@
 // See Customization for more info
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import Card from '../../../primitives/Card/Card';
@@ -11,6 +12,8 @@ import cx from 'classnames';
 const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
+  const site = useSelector((state) => state.site?.data);
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
 
   if (isInternalURL(href)) {
     link = (
@@ -24,16 +27,19 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const Summary =
             config.getComponent({
               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;
+          }
           return (
-            <div
+            <li
               className={cx('listing-item', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -41,13 +47,13 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
             >
               <Card item={showLink ? item : null}>
                 <Card.Summary>
-                  <Summary item={item} HeadingTag="h2" />
+                  <Summary item={item} />
                 </Card.Summary>
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Listing/GridTemplate.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';
@@ -11,6 +12,8 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
   const PreviewImageComponent = config.getComponent('PreviewImage').component;
+  const site = useSelector((state) => state.site?.data);
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
 
   if (isInternalURL(href)) {
     link = (
@@ -24,7 +27,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const CustomItemBodyTemplate = config.getComponent({
             name: 'GridListingItemTemplate',
@@ -35,7 +38,10 @@ const GridTemplate = ({ 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 ? (
@@ -47,16 +53,20 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                     className="item-image"
                     item={item}
                     imageComponent={PreviewImageComponent}
+                    sizes={`(max-width: ${config.settings.layout.tabletBreakpoint}px) 100vw, ${Math.trunc(config.settings.layout.defaultContainerWidth / 2)}px`}
                   />
                 )}
-                <Card.Summary a11yLabelId={props.a11yLabelId}>
-                  <Summary item={item} HeadingTag="h2" />
+                <Card.Summary
+                  a11yLabelId={props.a11yLabelId}
+                  LinkToItem={props.LinkToItem}
+                >
+                  <Summary item={item} />
                 </Card.Summary>
               </>
             );
 
           return (
-            <div
+            <li
               className={cx('listing-item', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -65,10 +75,10 @@ const GridTemplate = ({ 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/Listing/ListingBody.jsx

@@ -6,6 +6,7 @@ import Slugger from 'github-slugger';
 import { renderLinkElement } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
 import withQuerystringResults from '@plone/volto/components/manage/Blocks/Listing/withQuerystringResults';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 const messages = defineMessages({
   PaginationNavigationFor: {
@@ -38,7 +39,7 @@ const Headline = ({
       mode={!isEditMode && 'view'}
       children={data.headline}
       attributes={attr}
-      className={cx('headline', {
+      className={cx('headline block-title', {
         emptyListing: !listingItems?.length > 0,
       })}
       style={style}
@@ -63,6 +64,7 @@ export const ListingBody = (props) => {
     id,
     total,
     properties,
+    content,
   } = props;
 
   let ListingBodyTemplate;
@@ -99,6 +101,7 @@ export const ListingBody = (props) => {
           isEditMode={isEditMode}
         />
       )}
+      <SlotRenderer name="aboveListingItems" content={content} data={data} />
       {listingItems?.length > 0 ? (
         <div ref={listingRef}>
           <ListingBodyTemplate