@kitconcept/volto-light-theme 8.0.0-alpha.27 → 8.0.0-alpha.29

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

@@ -50,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
                   ? {
@@ -95,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/GridTemplate.jsx

@@ -53,6 +53,7 @@ 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

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

@@ -50,6 +50,7 @@ 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}

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;
 };