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

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,

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent, screen } 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 textJustifiedSVG from '@plone/volto/icons/align-justify.svg';
+import textCenteredSVG from '@plone/volto/icons/align-center.svg';
+import textLeftSVG from '@plone/volto/icons/align-left.svg';
+import textRightSVG from '@plone/volto/icons/align-right.svg';
+
+import ButtonsWidget from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (ui: React.ReactElement) =>
+  render(
+    <Provider
+      store={mockStore({
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      })}
+    >
+      {ui}
+    </Provider>,
+  );
+
+describe('ButtonsWidget', () => {
+  it('renders string-based actions', () => {
+    const { asFragment } = renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={['left', 'right', 'centered', 'justified']}
+        actionsInfoMap={{
+          left: [textLeftSVG, 'Text Left'],
+          right: [textRightSVG, 'Text Right'],
+          justified: [textJustifiedSVG, 'Text Justified'],
+          centered: [textCenteredSVG, 'Text Centered'],
+        }}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders actions info provided via props', () => {
+    const { asFragment } = renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={['additional']}
+        actionsInfoMap={{
+          additional: [imageFullSVG, 'Additional action title'],
+        }}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('falls back to the action name when no info map entry is present', () => {
+    renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={['missing']}
+      />,
+    );
+
+    expect(screen.getByRole('radio', { name: 'missing' })).toBeInTheDocument();
+  });
+
+  it('normalizes style definitions when an action is pressed', () => {
+    const handleChange = vi.fn();
+
+    renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={handleChange}
+        actions={[
+          {
+            name: 'wide',
+            label: 'Wide',
+            style: {
+              '--layout-width': 'wide',
+            },
+          },
+        ]}
+        actionsInfoMap={{
+          wide: ['Wide', 'Wide width'],
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Wide width' }));
+
+    expect(handleChange).toHaveBeenCalledWith('align', {
+      '--layout-width': 'wide',
+    });
+  });
+
+  it('selects default value from string names', () => {
+    renderWidget(
+      <ButtonsWidget
+        id="align"
+        title="Alignment"
+        fieldSet="default"
+        onChange={() => {}}
+        actions={[
+          {
+            name: 'justified',
+            label: 'Justified',
+            style: {
+              '--layout-width': 'wide',
+            },
+          },
+        ]}
+        default="justified"
+        actionsInfoMap={{
+          justified: [textJustifiedSVG, 'Text Justified'],
+        }}
+      />,
+    );
+
+    expect(screen.getByRole('radio', { name: 'Text Justified' })).toBeChecked();
+  });
+});

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Radio, RadioGroup } from '@plone/components';
+import isEqual from 'lodash/isEqual';
+import type { StyleDefinition } from '@plone/types';
+
+/**
+ * A tuple that has an icon in the first element and a i18n string in the second.
+ */
+export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
+
+type ActionValue = string | Record<`--${string}`, string>;
+
+export type ButtonsWidgetProps = {
+  /**
+   * Unique identifier for the widget.
+   */
+  id: string;
+
+  /**
+   * Callback function to handle changes.
+   */
+  onChange: (id: string, value: ActionValue) => void;
+
+  /**
+   * List of actions available for the widget.
+   */
+  actions?: Array<StyleDefinition | string>;
+
+  /**
+   * Map containing additional the information (icon and i18n string) for each action.
+   */
+  actionsInfoMap?: Record<string, ActionInfo>;
+
+  /**
+   * List of actions to be filtered out. In case that we don't want the default ones
+   * we can filter them out.
+   */
+  filterActions?: string[];
+
+  /**
+   * Current value of the widget.
+   */
+  value?: ActionValue;
+
+  /**
+   * Default value of the widget.
+   */
+  default?: ActionValue;
+
+  /**
+   * Indicates if the widget is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Indicates if the widget is disabled (alternative flag for compatibility reasons).
+   */
+  isDisabled?: boolean;
+  [key: string]: any;
+};
+
+type NormalizedAction = {
+  name: string;
+  value: ActionValue;
+};
+
+const ButtonsWidget = (props: ButtonsWidgetProps) => {
+  const {
+    disabled,
+    id,
+    onChange,
+    actions = [],
+    actionsInfoMap,
+    value,
+    isDisabled,
+    default: defaultValue,
+  } = props;
+
+  const normalizedActions: NormalizedAction[] = actions.map((action) =>
+    typeof action === 'string'
+      ? { name: action, value: action }
+      : {
+          name: action.name,
+          value: action.style ?? action.name,
+        },
+  );
+
+  const selectedActionName = normalizedActions.find((action) =>
+    isEqual(value, action.value),
+  )?.name;
+
+  const defaultSelectedActionName = (() => {
+    if (!defaultValue) {
+      return undefined;
+    }
+
+    if (typeof defaultValue === 'string') {
+      const matchedByName = normalizedActions.find(
+        ({ name }) => name === defaultValue,
+      );
+
+      if (matchedByName) {
+        return matchedByName.name;
+      }
+    }
+
+    return normalizedActions.find(({ value: actionValue }) =>
+      isEqual(defaultValue, actionValue),
+    )?.name;
+  })();
+
+  const radioGroupValueProps: {
+    value?: string;
+    defaultValue?: string;
+  } = selectedActionName
+    ? { value: selectedActionName }
+    : defaultSelectedActionName
+      ? { defaultValue: defaultSelectedActionName }
+      : {};
+
+  const handleChange = (selectedName: string) => {
+    const selectedAction = normalizedActions.find(
+      ({ name }) => name === selectedName,
+    );
+
+    if (selectedAction) {
+      onChange(id, selectedAction.value);
+    }
+  };
+
+  return (
+    <FormFieldWrapper {...props} className="widget">
+      <RadioGroup
+        aria-label={props.title || props.label || id}
+        orientation="horizontal"
+        {...radioGroupValueProps}
+        onChange={handleChange}
+        isDisabled={disabled || isDisabled}
+        className="buttons buttons-widget"
+      >
+        {normalizedActions.map((action) => {
+          const actionInfo = actionsInfoMap?.[action.name];
+          const [iconOrText, ariaLabel] = actionInfo ?? [
+            action.name,
+            action.name,
+          ];
+
+          return (
+            <Radio
+              key={action.name}
+              aria-label={ariaLabel}
+              value={action.name}
+              className="buttons-widget-option"
+            >
+              {typeof iconOrText === 'string' ? (
+                <div className="image-sizes-text">{iconOrText}</div>
+              ) : (
+                <Icon
+                  // TODO: Refactor Icon component and type it correctly
+                  name={iconOrText as any}
+                  title={ariaLabel || action.name}
+                  size="24px"
+                  ariaHidden={true}
+                />
+              )}
+            </Radio>
+          );
+        })}
+      </RadioGroup>
+    </FormFieldWrapper>
+  );
+};
+
+export default ButtonsWidget;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import Size from './Size';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof Size> = {
+  title: 'Edit Widgets/Size',
+  component: Size,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Size widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Size>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof Size> = (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' }}>
+            <Size
+              {...(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 DefaultSize: Story = {
+  render: Template,
+  args: {
+    id: 'size',
+    title: 'Size',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};

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

@@ -0,0 +1,59 @@
+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 Size from './Size';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const onChange = props.onChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'size',
+    title: 'Size',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...props,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <Size {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('Size widget', () => {
+  it('renders the default size options', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Small' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Medium' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Large' })).toBeInTheDocument();
+  });
+
+  it('returns the selected size name', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Medium' }));
+
+    expect(onChange).toHaveBeenCalledWith('size', 'm');
+  });
+});