@plone/volto 19.0.0-alpha.11 → 19.0.0-alpha.13

package/locales/zh_CN/LC_MESSAGES/volto.po

@@ -605,6 +605,7 @@ msgstr "单元格"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockAlignment
 msgid "Center"
 msgstr "中间"
 
@@ -1014,6 +1015,7 @@ msgstr "日期（最新在前）"
 #: components/manage/Controlpanels/UndoControlpanel
 #: components/manage/Preferences/ChangePassword
 #: components/manage/Preferences/PersonalPreferences
+#: components/manage/Widgets/BlockWidth
 #: components/manage/Widgets/SchemaWidget
 #: components/manage/Widgets/SelectWidget
 #: components/theme/Comments/CommentEditModal
@@ -1667,6 +1669,7 @@ msgstr ""
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockWidth
 msgid "Full"
 msgstr ""
 
@@ -2052,6 +2055,7 @@ msgstr ""
 
 #. Default: "Large"
 #: components/manage/Widgets/ImageSizeWidget
+#: components/manage/Widgets/Size
 msgid "Large"
 msgstr "大"
 
@@ -2082,6 +2086,7 @@ msgstr "最新版本"
 
 #. Default: "Layout"
 #: components/manage/Controlpanels/ContentTypesActions
+#: components/manage/Widgets/BlockWidth
 msgid "Layout"
 msgstr "布局"
 
@@ -2094,6 +2099,7 @@ msgstr "首图"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockAlignment
 msgid "Left"
 msgstr ""
 
@@ -2292,6 +2298,7 @@ msgstr "最大值为{len}。"
 
 #. Default: "Medium"
 #: components/manage/Widgets/ImageSizeWidget
+#: components/manage/Widgets/Size
 msgid "Medium"
 msgstr "中等"
 
@@ -2404,6 +2411,7 @@ msgstr "名字"
 
 #. Default: "Narrow"
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockWidth
 msgid "Narrow"
 msgstr ""
 
@@ -3120,6 +3128,7 @@ msgstr "富文本"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockAlignment
 msgid "Right"
 msgstr ""
 
@@ -3516,6 +3525,7 @@ msgstr "大小：{size}"
 
 #. Default: "Small"
 #: components/manage/Widgets/ImageSizeWidget
+#: components/manage/Widgets/Size
 msgid "Small"
 msgstr "小"
 

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.0.0-alpha.11",
+  "version": "19.0.0-alpha.13",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -240,9 +240,10 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
+    "@plone/components": "4.0.0-alpha.3",
     "@plone/registry": "3.0.0-alpha.8",
-    "@plone/scripts": "4.0.0-alpha.3",
-    "@plone/volto-slate": "19.0.0-alpha.6"
+    "@plone/volto-slate": "19.0.0-alpha.7",
+    "@plone/scripts": "4.0.0-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -366,7 +367,7 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
-    "@plone/types": "2.0.0-alpha.9",
+    "@plone/types": "2.0.0-alpha.10",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "volta": {

package/src/components/manage/Controlpanels/Relations/Relations.jsx

@@ -47,7 +47,7 @@ const RelationsControlPanel = () => {
 
   return (
     <>
-      <div className="ui container">
+      <div className="">
         <div className="relations-control-panel">
           <Helmet title={intl.formatMessage(messages.relations)} />
           {can_edit ? (

package/src/components/manage/Widgets/AlignWidget.stories.jsx

@@ -7,6 +7,15 @@ export const Align = WidgetStory.bind({
   widget: AlignWidget,
 });
 
+export const AlignDefaultLeft = WidgetStory.bind({
+  props: {
+    id: 'align-default-left',
+    title: 'Align (default left)',
+    default: 'left',
+  },
+  widget: AlignWidget,
+});
+
 export default {
   title: 'Edit Widgets/Align',
   component: AlignWidget,

package/src/components/manage/Widgets/AlignWidget.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+import AlignWidget from './AlignWidget';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderAlignWidget = (
+  props: Partial<ButtonsWidgetProps> = {},
+): {
+  onChange: ButtonsWidgetProps['onChange'];
+  asFragment: () => DocumentFragment;
+  getByRole: ReturnType<typeof render>['getByRole'];
+} => {
+  const { onChange: providedOnChange, ...restProps } = props;
+  const onChange = providedOnChange ?? vi.fn();
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'align',
+    title: 'Alignment',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...restProps,
+  };
+
+  const rendered = render(
+    <Provider store={store}>
+      <AlignWidget {...widgetProps} />
+    </Provider>,
+  );
+
+  return {
+    onChange,
+    asFragment: rendered.asFragment,
+    getByRole: rendered.getByRole,
+  };
+};
+
+describe('AlignWidget', () => {
+  it('renders with default actions', () => {
+    const { asFragment } = renderAlignWidget();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders with custom actions', () => {
+    const { asFragment } = renderAlignWidget({
+      actions: ['additional'],
+      actionsInfoMap: {
+        additional: [imageFullSVG, 'Additional action title'],
+      },
+    });
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('selects the defaultAction when value is missing', () => {
+    const { getByRole } = renderAlignWidget({
+      defaultAction: 'left',
+    });
+
+    expect(getByRole('radio', { name: 'Left' })).toBeChecked();
+  });
+
+  it('selects the default when value is missing', () => {
+    const { getByRole } = renderAlignWidget({
+      default: 'left',
+    });
+
+    expect(getByRole('radio', { name: 'Left' })).toBeChecked();
+  });
+
+  it('does not override provided value with default', () => {
+    const { onChange } = renderAlignWidget({
+      default: 'left',
+      value: 'center',
+    });
+
+    expect(onChange).not.toHaveBeenCalledWith('align', 'left');
+  });
+});

package/src/components/manage/Widgets/{AlignWidget.jsx → AlignWidget.tsx}

@@ -1,12 +1,16 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget from './ButtonsWidget';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import type { IntlShape } from 'react-intl';
 
 const messages = defineMessages({
   left: {
@@ -35,20 +39,32 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }) => ({
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
   left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
   center: [imageFitSVG, intl.formatMessage(messages.center)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
   narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
   wide: [imageWideSVG, intl.formatMessage(messages.wide)],
   full: [imageFullSVG, intl.formatMessage(messages.full)],
 });
 
-const AlignWidget = (props) => {
+type AlignWidgetProps = ButtonsWidgetProps & {
+  defaultAction?: string;
+};
+
+const AlignWidget = (props: AlignWidgetProps) => {
   const intl = useIntl();
 
-  const { actions = ['left', 'right', 'center', 'full'], actionsInfoMap } =
-    props;
+  const {
+    actions = ['left', 'center', 'right', 'full'],
+    actionsInfoMap,
+    default: defaultValue,
+    defaultAction,
+  } = props;
 
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),
@@ -60,7 +76,7 @@ const AlignWidget = (props) => {
       {...props}
       actions={actions}
       actionsInfoMap={actionsInfo}
-      defaultAction={props.defaultAction || 'center'}
+      default={defaultValue ?? defaultAction ?? 'center'}
     />
   );
 };

package/src/components/manage/Widgets/BlockAlignment.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import BlockAlignment from './BlockAlignment';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof BlockAlignment> = {
+  title: 'Edit Widgets/BlockAlignment',
+  component: BlockAlignment,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Block alignment widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlockAlignment>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof BlockAlignment> = (args, context) => {
+  const { initialValue } =
+    (context.parameters as TemplateParameters | undefined) ?? {};
+  const { value: _ignoredValue, onChange: argsOnChange, ...restArgs } = args;
+
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <FormUndoWrapper
+        initialState={{ value: initialValue ?? _ignoredValue }}
+        showControls
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <BlockAlignment
+              {...(restArgs as ButtonsWidgetProps)}
+              value={state.value}
+              onChange={(id, nextValue) => {
+                argsOnChange?.(id, nextValue);
+                onChange({ value: nextValue });
+              }}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 2)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+};
+
+export const DefaultAlignment: Story = {
+  render: Template,
+  args: {
+    id: 'alignment',
+    title: 'Block alignment',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};
+
+export const CustomActions: Story = {
+  render: Template,
+  args: {
+    ...(DefaultAlignment.args ?? {}),
+    actions: [
+      {
+        name: 'wide',
+        label: 'Wide',
+        style: {
+          '--block-alignment': 'var(--align-wide)',
+        },
+      },
+      {
+        name: 'full',
+        label: 'Full',
+        style: {
+          '--block-alignment': 'var(--align-full)',
+        },
+      },
+    ],
+    actionsInfoMap: {
+      wide: ['W', 'Wide alignment'],
+      full: ['F', 'Full width alignment'],
+    },
+  },
+};
+
+export const FilteredActions: Story = {
+  render: Template,
+  args: {
+    ...(DefaultAlignment.args ?? {}),
+    filterActions: ['center'],
+  },
+};

package/src/components/manage/Widgets/BlockAlignment.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import BlockAlignment from './BlockAlignment';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const { onChange: providedOnChange, ...restProps } = props;
+  const onChange = providedOnChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'alignment',
+    title: 'Block alignment',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...restProps,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <BlockAlignment {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('BlockAlignment', () => {
+  it('renders default alignment buttons', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Left' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Center' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Right' })).toBeInTheDocument();
+  });
+
+  it('filters actions when filterActions is provided', () => {
+    renderWidget({ filterActions: ['center'] });
+
+    expect(screen.getByRole('radio', { name: 'Center' })).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Left' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Right' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('merges custom actions info map entries', () => {
+    renderWidget({
+      actions: ['left', 'custom'],
+      actionsInfoMap: {
+        custom: ['Custom', 'Custom alignment'],
+      },
+    });
+
+    expect(screen.getByRole('radio', { name: 'Left' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('radio', { name: 'Custom alignment' }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders when style definitions are provided as actions', () => {
+    renderWidget({
+      actions: [
+        {
+          name: 'wide',
+          label: 'Wide',
+          style: {
+            '--block-alignment': 'var(--align-wide)',
+          },
+        },
+      ],
+    });
+
+    expect(screen.getByRole('radio', { name: 'wide' })).toBeInTheDocument();
+  });
+
+  it('invokes onChange with styles when default actions are used', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Center' }));
+
+    expect(onChange).toHaveBeenCalledWith('alignment', {
+      '--block-alignment': 'var(--align-center)',
+    });
+  });
+});

package/src/components/manage/Widgets/BlockAlignment.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
+
+const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  left: [imageLeftSVG, intl.formatMessage(messages.left)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
+  center: [imageFitSVG, intl.formatMessage(messages.center)],
+});
+
+const DEFAULT_ACTIONS: StyleDefinition[] = [
+  {
+    style: {
+      '--block-alignment': 'var(--align-left)',
+    },
+    name: 'left',
+    label: 'Left',
+  },
+  {
+    style: {
+      '--block-alignment': 'var(--align-center)',
+    },
+    name: 'center',
+    label: 'Center',
+  },
+  {
+    style: {
+      '--block-alignment': 'var(--align-right)',
+    },
+    name: 'right',
+    label: 'Right',
+  },
+];
+
+const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default BlockAlignmentWidget;

package/src/components/manage/Widgets/BlockWidth.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import BlockWidth from './BlockWidth';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof BlockWidth> = {
+  title: 'Edit Widgets/BlockWidth',
+  component: BlockWidth,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Block width widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlockWidth>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof BlockWidth> = (args, context) => {
+  const { initialValue } =
+    (context.parameters as TemplateParameters | undefined) ?? {};
+  const { value: _ignoredValue, onChange: argsOnChange, ...restArgs } = args;
+
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <FormUndoWrapper
+        initialState={{ value: initialValue ?? _ignoredValue }}
+        showControls
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <BlockWidth
+              {...(restArgs as ButtonsWidgetProps)}
+              value={state.value}
+              onChange={(id, nextValue) => {
+                argsOnChange?.(id, nextValue);
+                onChange({ value: nextValue });
+              }}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 2)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+};
+
+export const DefaultWidth: Story = {
+  render: Template,
+  args: {
+    id: 'blockWidth',
+    title: 'Block width',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};