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

package/src/transforms/to6.ts

@@ -1,9 +1,6 @@
 import type { BlocksFormData } from '@plone/types';
-import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
 
-import config from '@plone/volto/registry';
-
-function* visitBlocks(blocks) {
+function* visitBlocks(blocks: any): Generator<any> {
   for (const key in blocks) {
     if (blocks.hasOwnProperty(key)) {
       const block = blocks[key];
@@ -16,17 +13,6 @@ function* visitBlocks(blocks) {
 }
 
 export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
-  const NORMALIZED_WIDTHS = [
-    ...config.blocks.widths,
-    {
-      style: {
-        '--block-width': 'var(--default-container-width)',
-      },
-      name: 'wide',
-      label: 'Default',
-    },
-  ];
-
   for (const block of visitBlocks(data.blocks)) {
     if (block?.styles?.backgroundColor) {
       if (block.styles.backgroundColor === 'transparent') {
@@ -41,10 +27,7 @@ export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
         ...block.styles,
         'blockWidth:noprefix':
           block.styles?.['blockWidth:noprefix'] ??
-          findStyleByName(
-            NORMALIZED_WIDTHS,
-            `${block.styles?.buttonAlign === 'wide' ? 'default' : 'narrow'}`,
-          ),
+          (block.styles?.buttonAlign === 'wide' ? 'default' : 'narrow'),
       };
 
       delete block.styles.buttonAlign;
@@ -54,41 +37,14 @@ export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
       block.styles = {
         ...block.styles,
         shortLine:
-          block.styles?.['shortLine'] ?? block?.styles?.align === 'left'
-            ? true
-            : false,
-        'align:noprefix': block.styles?.['align:noprefix'] ?? {
-          '--block-alignment': 'var(--align-left)',
-        },
+          block.styles?.['shortLine'] ?? block?.styles?.align === 'left',
+        'align:noprefix': block.styles?.['align:noprefix'] ?? 'left',
         'blockWidth:noprefix':
           block.styles?.['blockWidth:noprefix'] ??
-          findStyleByName(
-            NORMALIZED_WIDTHS,
-            `${block.styles?.align === 'full' ? 'default' : 'narrow'}`,
-          ),
+          (block.styles?.align === 'full' ? 'default' : 'narrow'),
       };
 
       delete block.styles.align;
     }
-
-    if (
-      block['@type'] === 'image' &&
-      !['left', 'right'].includes(block?.align)
-    ) {
-      block.styles = {
-        ...block.styles,
-        'blockWidth:noprefix':
-          block.styles?.['blockWidth:noprefix'] ??
-          findStyleByName(
-            NORMALIZED_WIDTHS,
-            block?.align === 'wide'
-              ? 'default'
-              : block?.align === 'center'
-                ? 'narrow'
-                : block.align,
-          ),
-      };
-      block.align = 'center';
-    }
   }
 }

package/src/transforms/to8.test.js

@@ -0,0 +1,201 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import config from '@plone/volto/registry';
+import { migrateToVLT8FloatingBlocks } from './to8';
+
+const alignLeft = { 'align:noprefix': 'left' };
+const alignRight = { 'align:noprefix': 'right' };
+const alignCenter = { 'align:noprefix': 'center' };
+const narrowWidth = { 'blockWidth:noprefix': 'narrow' };
+const defaultWidth = { 'blockWidth:noprefix': 'default' };
+const fullWidth = { 'blockWidth:noprefix': 'full' };
+
+// Wraps a single block in the `data` shape the transform expects and runs it.
+const migrate = (block) => {
+  const data = { blocks: { 'block-1': block } };
+  migrateToVLT8FloatingBlocks(data);
+  return data.blocks['block-1'];
+};
+
+beforeAll(() => {
+  config.blocks.widths = [
+    {
+      name: 'narrow',
+      style: { '--block-width': 'var(--narrow-container-width)' },
+    },
+    {
+      name: 'default',
+      style: { '--block-width': 'var(--default-container-width)' },
+    },
+    {
+      name: 'layout',
+      style: { '--block-width': 'var(--layout-container-width)' },
+    },
+    { name: 'full', style: { '--block-width': '100%' } },
+  ];
+  config.blocks.alignments = [
+    { name: 'left', style: { '--block-alignment': 'var(--align-left)' } },
+    { name: 'center', style: { '--block-alignment': 'var(--align-center)' } },
+    { name: 'right', style: { '--block-alignment': 'var(--align-right)' } },
+  ];
+});
+
+describe('migrateToVLT8FloatingBlocks', () => {
+  it('centers a non-floating image and applies the narrow width', () => {
+    expect(migrate({ '@type': 'image', align: 'center' })).toEqual({
+      '@type': 'image',
+      styles: { ...alignCenter, ...narrowWidth },
+    });
+  });
+
+  it('applies the default width to a wide image', () => {
+    expect(migrate({ '@type': 'image', align: 'wide' })).toEqual({
+      '@type': 'image',
+      styles: { ...alignCenter, ...defaultWidth },
+    });
+  });
+
+  it('applies the full width to a full image', () => {
+    expect(migrate({ '@type': 'image', align: 'full' })).toEqual({
+      '@type': 'image',
+      styles: { ...alignCenter, ...fullWidth },
+    });
+  });
+
+  it('applies the narrow width to a small floating image', () => {
+    expect(migrate({ '@type': 'image', align: 'left', size: 'm' })).toEqual({
+      '@type': 'image',
+      size: 'm',
+      styles: { ...alignLeft, ...narrowWidth },
+    });
+  });
+
+  it('applies the default width to a floating image that is large by size', () => {
+    expect(migrate({ '@type': 'image', align: 'right', size: 'l' })).toEqual({
+      '@type': 'image',
+      size: 'l',
+      styles: { ...alignRight, ...defaultWidth },
+    });
+  });
+
+  it('applies the default width to a floating image that is large by style', () => {
+    expect(
+      migrate({
+        '@type': 'image',
+        align: 'left',
+        styles: { 'size:noprefix': 'var(--size-large)' },
+      }),
+    ).toEqual({
+      '@type': 'image',
+      styles: {
+        'size:noprefix': 'var(--size-large)',
+        ...alignLeft,
+        ...defaultWidth,
+      },
+    });
+  });
+
+  it('applies the default width to a floating video', () => {
+    expect(migrate({ '@type': 'video', align: 'left' })).toEqual({
+      '@type': 'video',
+      styles: { ...alignLeft, ...defaultWidth },
+    });
+  });
+
+  it('applies the narrow width to a non-floating video', () => {
+    expect(migrate({ '@type': 'video', align: 'center' })).toEqual({
+      '@type': 'video',
+      styles: { ...alignCenter, ...narrowWidth },
+    });
+  });
+
+  it('applies the default width to a floating map', () => {
+    expect(migrate({ '@type': 'maps', align: 'right' })).toEqual({
+      '@type': 'maps',
+      styles: { ...alignRight, ...defaultWidth },
+    });
+  });
+
+  it('applies the full width to a full map', () => {
+    expect(migrate({ '@type': 'maps', align: 'full' })).toEqual({
+      '@type': 'maps',
+      styles: { ...alignCenter, ...fullWidth },
+    });
+  });
+
+  it('migrates the button inneralign to the align literal', () => {
+    expect(migrate({ '@type': '__button', inneralign: 'right' })).toEqual({
+      '@type': '__button',
+      styles: { ...alignRight },
+    });
+  });
+
+  it('keeps an existing button alignment over the legacy inneralign', () => {
+    expect(
+      migrate({
+        '@type': '__button',
+        inneralign: 'right',
+        styles: { ...alignLeft },
+      }),
+    ).toEqual({
+      '@type': '__button',
+      styles: { ...alignLeft },
+    });
+  });
+
+  it('drops the button inneralign property when it has no value', () => {
+    expect(migrate({ '@type': '__button', inneralign: '' })).toEqual({
+      '@type': '__button',
+    });
+  });
+
+  it('leaves an already migrated block untouched', () => {
+    // No legacy `align`, alignment and width already stored as literals.
+    expect(
+      migrate({ '@type': 'image', styles: { ...alignLeft, ...defaultWidth } }),
+    ).toEqual({
+      '@type': 'image',
+      styles: { ...alignLeft, ...defaultWidth },
+    });
+  });
+
+  it('keeps a pre-existing width for a non-floating block', () => {
+    expect(
+      migrate({ '@type': 'image', align: 'center', styles: { ...fullWidth } }),
+    ).toEqual({
+      '@type': 'image',
+      styles: { ...fullWidth, ...alignCenter },
+    });
+  });
+
+  it('ignores blocks of other types', () => {
+    expect(migrate({ '@type': 'slate', align: 'left' })).toEqual({
+      '@type': 'slate',
+      align: 'left',
+    });
+  });
+
+  it('migrates nested blocks recursively', () => {
+    const data = {
+      blocks: {
+        'block-1': {
+          '@type': 'image',
+          align: 'left',
+          blocks: {
+            'block-2': { '@type': 'video', align: 'right' },
+          },
+        },
+      },
+    };
+
+    migrateToVLT8FloatingBlocks(data);
+
+    expect(data.blocks['block-1']).toMatchObject({
+      '@type': 'image',
+      styles: { ...alignLeft, ...narrowWidth },
+    });
+    expect(data.blocks['block-1'].blocks['block-2']).toEqual({
+      '@type': 'video',
+      styles: { ...alignRight, ...defaultWidth },
+    });
+  });
+});

package/src/transforms/to8.ts

@@ -0,0 +1,109 @@
+import type { BlocksFormData, StyleDefinition } from '@plone/types';
+import config from '@plone/volto/registry';
+
+function* visitBlocks(blocks: any): Generator<any> {
+  for (const key in blocks) {
+    if (blocks.hasOwnProperty(key)) {
+      const block = blocks[key];
+      yield block;
+      if (block.blocks) {
+        yield* visitBlocks(block.blocks);
+      }
+    }
+  }
+}
+
+function alignmentLiteral(align: string | undefined): string {
+  if (align === 'left') return 'left';
+  if (align === 'right') return 'right';
+  return 'center';
+}
+
+// The block alignments can be overridden per block, falling back to the global
+// definitions, the same way themes work.
+function alignmentsFor(block: any): StyleDefinition[] {
+  return (
+    config.blocks.blocksConfig?.[block['@type']]?.alignments ||
+    config.blocks.alignments ||
+    []
+  );
+}
+
+// Pre-VLT8 the resolved CSS object was stored in the style field
+// (e.g. `{ '--block-width': 'var(--narrow-container-width)' }`). VLT8 stores
+// only the token literal (`narrow`) and resolves it at runtime through the
+// `styleFieldDefinition` utility.
+function normalizeStyleField(
+  block: any,
+  fieldName: string,
+  definitions: StyleDefinition[],
+) {
+  const value = block?.styles?.[fieldName];
+  if (!value || typeof value !== 'object') return;
+
+  const match = definitions.find((definition) =>
+    Object.entries(definition.style ?? {}).every(
+      ([key, css]) => value[key] === css,
+    ),
+  );
+  if (match) {
+    block.styles[fieldName] = match.name;
+  }
+}
+
+// Migrates the legacy `align` field of a media block to the `align:noprefix` /
+// `blockWidth:noprefix` style literals. `sizeAware` images keep a narrow width
+// while floating unless they are large; videos and maps always go to default.
+function migrateMediaBlock(block: any, sizeAware: boolean) {
+  const align = block?.align;
+  const isFloating = align === 'left' || align === 'right';
+  const isLarge =
+    block?.styles?.['size:noprefix'] === 'var(--size-large)' ||
+    block?.size === 'l';
+
+  const isWide = align === 'wide' || (isFloating && (!sizeAware || isLarge));
+  const width = isWide ? 'default' : align === 'full' ? 'full' : 'narrow';
+
+  block.styles = {
+    ...block?.styles,
+    'align:noprefix':
+      block?.styles?.['align:noprefix'] ?? alignmentLiteral(align),
+    // While floating, the width is driven by the adapter, so it always wins;
+    // otherwise an explicit width already on the block is kept.
+    'blockWidth:noprefix': isFloating
+      ? width
+      : block?.styles?.['blockWidth:noprefix'] ?? width,
+  };
+
+  delete block.align;
+}
+
+export function migrateToVLT8FloatingBlocks(data: BlocksFormData) {
+  const widths = config.blocks.widths || [];
+
+  for (const block of visitBlocks(data.blocks)) {
+    // Rewrite any CSS object left over from before VLT8 to its token literal.
+    normalizeStyleField(block, 'align:noprefix', alignmentsFor(block));
+    normalizeStyleField(block, 'blockWidth:noprefix', widths);
+
+    if (block['@type'] === 'image') {
+      migrateMediaBlock(block, true);
+    }
+
+    if (block['@type'] === 'video' || block['@type'] === 'maps') {
+      migrateMediaBlock(block, false);
+    }
+
+    // The button's legacy `inneralign` becomes the `align:noprefix` literal.
+    if (block['@type'] === '__button') {
+      if (block.inneralign) {
+        block.styles = {
+          ...block.styles,
+          'align:noprefix':
+            block.styles?.['align:noprefix'] ?? block.inneralign,
+        };
+      }
+      delete block.inneralign;
+    }
+  }
+}

package/src/types.d.ts

@@ -81,6 +81,7 @@ export type StickyMenuSettings = {
   sticky_menu: Array<iconLink>;
   sticky_menu_color: string;
   sticky_menu_foreground_color: string;
+  enable_mobile_sticky_menu: boolean;
 };
 
 export type PloneGobrSocialMediaSettings = {

package/vitest.config.mjs

@@ -1,17 +1,42 @@
 import { defineConfig } from 'vitest/config';
 import voltoVitestConfig from '@plone/volto/vitest.config.mjs';
 import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const localAliases = {
+  // Alias for absolute imports within this addon
+  '@kitconcept/volto-light-theme': path.resolve(__dirname, './src'),
+  '@kitconcept/volto-light-theme/': path.resolve(__dirname, './src/'),
+  'semantic-ui-react': path.resolve(
+    __dirname,
+    './src/__mocks__/semantic-ui-react.ts',
+  ),
+};
 
 export default defineConfig({
   ...voltoVitestConfig,
   resolve: {
     alias: {
       ...voltoVitestConfig.resolve.alias,
-      // Alias for absolute imports
-      '@kitconcept/volto-light-theme': path.resolve(__dirname, './src'),
-      '@kitconcept/volto-light-theme/': path.resolve(__dirname, './src/'),
+      ...localAliases,
     },
   },
+  test: {
+    ...voltoVitestConfig.test,
+    projects: voltoVitestConfig.test.projects.map((project) => ({
+      ...project,
+      resolve: {
+        ...project.resolve,
+        alias: {
+          ...project.resolve?.alias,
+          ...localAliases,
+        },
+      },
+    })),
+  },
   server: {
     fs: {
       allow: [

package/razzle.extend.js

@@ -1,38 +0,0 @@
-const plugins = (defaultPlugins) => {
-  const newPlugins = defaultPlugins.filter((plugin) => plugin !== 'scss');
-  newPlugins.push({
-    name: 'scss',
-    options: {
-      sass: {
-        dev: {
-          sassOptions: {
-            includePaths: ['node_modules'],
-            outputStyle: 'expanded',
-            sourceMap: true,
-            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
-            quietDeps: true,
-          },
-        },
-        prod: {
-          sassOptions: {
-            includePaths: ['node_modules'],
-            outputStyle: 'expanded',
-            sourceMap: true,
-            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
-            quietDeps: true,
-          },
-        },
-      },
-    },
-  });
-  return newPlugins;
-};
-
-const modify = (config, { target, dev }, webpack) => {
-  return config;
-};
-
-module.exports = {
-  plugins,
-  modify,
-};

package/src/components/Blocks/schema.js

@@ -1,44 +0,0 @@
-import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
-import { defineMessages } from 'react-intl';
-import config from '@plone/volto/registry';
-
-const messages = defineMessages({
-  backgroundColor: {
-    id: 'Background color',
-    defaultMessage: 'Background color',
-  },
-});
-
-export const defaultStylingSchema = ({ schema, formData, intl }) => {
-  const themes =
-    config.blocks?.blocksConfig?.[formData['@type']]?.themes ||
-    config.blocks.themes;
-
-  const defaultTheme =
-    config.blocks?.blocksConfig?.[formData['@type']]?.defaultTheme ||
-    // The default color is the first color in the themes list
-    config.blocks.themes?.[0].name;
-
-  addStyling({ schema, intl });
-
-  const stylingIndex = schema.fieldsets.findIndex(
-    (item) => item.id === 'styling',
-  );
-  schema.fieldsets[stylingIndex].fields = [
-    ...schema.fieldsets[stylingIndex].fields,
-    'theme',
-  ];
-  schema.properties.theme = {
-    widget: 'color_picker',
-    title: intl.formatMessage(messages.backgroundColor),
-    themes,
-    default: defaultTheme,
-  };
-
-  return schema;
-};
-
-export const removeStylingSchema = ({ schema, formData, intl }) => {
-  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
-  return schema;
-};

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,118 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl } from 'react-intl';
-import { Container } from '@plone/components';
-
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
-import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
-
-import homeSVG from '@plone/volto/icons/home.svg';
-
-const messages = defineMessages({
-  home: {
-    id: 'Home',
-    defaultMessage: 'Home',
-  },
-  breadcrumbs: {
-    id: 'Breadcrumbs',
-    defaultMessage: 'Breadcrumbs',
-  },
-});
-
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
-    }
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-      >
-        <Container layout>
-          <div className="breadcrumb">
-            <Link
-              to={this.props.root || '/'}
-              className="home"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="25px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <div className="divider" key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <div className="section active" key={item.url}>
-                  {item.title}
-                </div>
-              ),
-            ])}
-          </div>
-        </Container>
-      </div>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);