@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

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',
+  },
+};

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

@@ -0,0 +1,62 @@
+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 BlockWidth from './BlockWidth';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const onChange = props.onChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'blockWidth',
+    title: 'Block width',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...props,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <BlockWidth {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('BlockWidth', () => {
+  it('renders the default action buttons provided by the widget', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Narrow' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Default' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Layout' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Full' })).toBeInTheDocument();
+  });
+
+  it('emits the correct value for the default actions', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Layout' }));
+
+    expect(onChange).toHaveBeenCalledWith('blockWidth', {
+      '--block-width': 'var(--layout-container-width)',
+    });
+  });
+});

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
+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 { StyleDefinition } from '@plone/types';
+
+const messages = defineMessages({
+  narrow: {
+    id: 'Narrow',
+    defaultMessage: 'Narrow',
+  },
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  layout: {
+    id: 'Layout',
+    defaultMessage: 'Layout',
+  },
+  full: {
+    id: 'Full',
+    defaultMessage: 'Full',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
+  default: [imageFitSVG, intl.formatMessage(messages.default)],
+  layout: [imageWideSVG, intl.formatMessage(messages.layout)],
+  full: [imageFullSVG, intl.formatMessage(messages.full)],
+});
+
+const DEFAULT_ACTIONS: StyleDefinition[] = [
+  {
+    style: {
+      '--block-width': 'var(--narrow-container-width)',
+    },
+    name: 'narrow',
+    label: 'Narrow',
+  },
+  {
+    style: {
+      '--block-width': 'var(--default-container-width)',
+    },
+    name: 'default',
+    label: 'Default',
+  },
+  {
+    style: {
+      '--block-width': 'var(--layout-container-width)',
+    },
+    name: 'layout',
+    label: 'Layout',
+  },
+  {
+    style: {
+      '--block-width': 'unset',
+    },
+    name: 'full',
+    label: 'Full',
+  },
+];
+
+const BlockWidthWidget = (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 BlockWidthWidget;

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

@@ -21,6 +21,67 @@ export const Buttons = WidgetStory.bind({
   widget: ButtonsWidget,
 });
 
+export const ButtonsWithDefaultValue = WidgetStory.bind({
+  props: {
+    id: 'buttons-default',
+    title: 'Buttons with Default Value',
+    default: 'centered',
+    actions: ['left', 'right', 'centered'],
+    actionsInfoMap: {
+      left: [textLeftSVG, 'Text Left'],
+      right: [textRightSVG, 'Text Right'],
+      centered: [textCenteredSVG, 'Text Centered'],
+    },
+  },
+  widget: ButtonsWidget,
+});
+
+export const ButtonsWithStyleDefinitions = WidgetStory.bind({
+  props: {
+    id: 'buttons-style-definitions',
+    title: 'Buttons with Style Definitions',
+    actions: [
+      {
+        name: 'small',
+        label: 'Small',
+        style: { '--button-size': 'small' },
+      },
+      {
+        name: 'medium',
+        label: 'Medium',
+        style: { '--button-size': 'medium' },
+      },
+      {
+        name: 'large',
+        label: 'Large',
+        style: { '--button-size': 'large' },
+      },
+    ],
+    actionsInfoMap: {
+      small: ['S', 'Small Buttons'],
+      medium: ['M', 'Medium Buttons'],
+      large: ['L', 'Large Buttons'],
+    },
+  },
+  widget: ButtonsWidget,
+});
+
+export const ButtonsFiltered = WidgetStory.bind({
+  props: {
+    id: 'buttons-filtered',
+    title: 'Filtered Buttons',
+    actions: ['left', 'right', 'centered', 'justified'],
+    filterActions: ['centered', 'justified'],
+    actionsInfoMap: {
+      left: [textLeftSVG, 'Text Left'],
+      right: [textRightSVG, 'Text Right'],
+      justified: [textJustifiedSVG, 'Text Justified'],
+      centered: [textCenteredSVG, 'Text Centered'],
+    },
+  },
+  widget: ButtonsWidget,
+});
+
 export default {
   title: 'Edit Widgets/Buttons',
   component: ButtonsWidget,