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

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

@@ -0,0 +1,78 @@
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
+
+const messages = defineMessages({
+  s: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  m: {
+    id: 'Medium',
+    defaultMessage: 'Medium',
+  },
+  l: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  s: ['S', intl.formatMessage(messages.s)],
+  m: ['M', intl.formatMessage(messages.m)],
+  l: ['L', intl.formatMessage(messages.l)],
+});
+
+const DEFAULT_ACTIONS: StyleDefinition[] = [
+  {
+    name: 's',
+    label: 'Small',
+    style: undefined,
+  },
+  {
+    name: 'm',
+    label: 'Medium',
+    style: undefined,
+  },
+  {
+    name: 'l',
+    label: 'Large',
+    style: undefined,
+  },
+];
+
+const SizeWidget = (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 SizeWidget;

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

@@ -265,3 +265,24 @@ export const FormFieldWrapper = loadable(
       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
     ),
 );
+
+export const Size = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/Size'
+    ),
+);
+
+export const BlockAlignment = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockAlignment'
+    ),
+);
+
+export const BlockWidth = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockWidth'
+    ),
+);

package/src/components/theme/App/App.jsx

@@ -45,6 +45,7 @@ import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRe
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
 import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 /**
  * @export
@@ -159,6 +160,7 @@ export class App extends Component {
             'public-ui': !isCmsUI,
           })}
         />
+        <SlotRenderer name="aboveApp" content={this.props.content} />
         <SkipLinks />
         <Header pathname={path} />
         <Breadcrumbs pathname={path} />

package/src/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS.tsx

@@ -0,0 +1,7 @@
+import '@plone/components/dist/basic.css';
+
+const InjectPloneComponentsCSS = () => {
+  return null;
+};
+
+export default InjectPloneComponentsCSS;

package/src/config/Widgets.jsx

@@ -35,6 +35,9 @@ import {
   RecurrenceWidget,
   RadioGroupWidget,
   CheckboxGroupWidget,
+  Size,
+  BlockAlignment,
+  BlockWidth,
 } from '@plone/volto/components/manage/Widgets';
 
 import ArrayViewWidget from '@plone/volto/components/theme/Widgets/ArrayWidget';
@@ -102,6 +105,10 @@ export const widgetMapping = {
     hidden: HiddenWidget,
     radio_group: RadioGroupWidget,
     checkbox_group: CheckboxGroupWidget,
+    // SemanticUI Free widgets
+    blockAlignment: BlockAlignment,
+    blockWidth: BlockWidth,
+    size: Size,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/slots.js

@@ -1,7 +1,26 @@
+import loadable from '@loadable/component';
 import RelatedItems from '@plone/volto/components/theme/RelatedItems/RelatedItems';
 import Tags from '@plone/volto/components/theme/Tags/Tags';
+import { isCmsUi } from '@plone/volto/helpers/Url/Url';
+
+const InjectPloneComponentsCSS = loadable(
+  () =>
+    import(
+      '@plone/volto/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS'
+    ),
+  { fallback: null },
+);
+
+const onlyCMSUI = ({ location }) => isCmsUi(location?.pathname);
 
 const slots = {
+  aboveApp: [
+    {
+      name: 'plone-components-css',
+      component: InjectPloneComponentsCSS,
+      predicates: [onlyCMSUI],
+    },
+  ],
   belowContent: [
     {
       name: 'tags',

package/theme/themes/pastanaga/extras/widgets.less

@@ -292,3 +292,48 @@ body.babel-view .field.language-independent-field {
     margin-left: 8px;
   }
 }
+
+// ButtonsWidget and friends 2025
+:root {
+  --border-color-hover: var(--quanta-sapphire);
+  --border-color-pressed: var(--quanta-sapphire);
+  --border-color-disabled: #d4d4d5;
+  --text-color-disabled: #a8a8a8;
+}
+
+.field.widget {
+  .buttons-widget {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .buttons-widget-option {
+      padding: 5px;
+      border-radius: 3px;
+      aspect-ratio: 1/1;
+      font-size: 1em;
+      line-height: initial;
+
+      &[data-hovered='true'] {
+        box-shadow: inset 0 0 0 1px var(--border-color-hover, #2996da);
+      }
+
+      &[data-selected='true'] {
+        box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
+      }
+
+      svg.icon {
+        margin: 0 !important;
+        opacity: 0.9;
+        vertical-align: top;
+      }
+    }
+  }
+}
+
+.buttons-widget-option {
+  &[data-disabled='true'] {
+    border-color: var(--border-color-disabled);
+    color: var(--text-color-disabled);
+  }
+}

package/types/components/manage/Widgets/AlignWidget.d.ts

@@ -1,12 +1,10 @@
-export function defaultActionsInfo({ intl }: {
-    intl: any;
-}): {
-    left: any[];
-    right: any[];
-    center: any[];
-    narrow: any[];
-    wide: any[];
-    full: any[];
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+type AlignWidgetProps = ButtonsWidgetProps & {
+    defaultAction?: string;
 };
+declare const AlignWidget: (props: AlignWidgetProps) => import("react/jsx-runtime").JSX.Element;
 export default AlignWidget;
-declare function AlignWidget(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Widgets/AlignWidget.stories.d.ts

@@ -1,4 +1,5 @@
 export const Align: any;
+export const AlignDefaultLeft: any;
 declare namespace _default {
     export let title: string;
     export { AlignWidget as component };

package/types/components/manage/Widgets/BlockAlignment.d.ts

@@ -0,0 +1,7 @@
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+declare const BlockAlignmentWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockAlignmentWidget;

package/types/components/manage/Widgets/BlockAlignment.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlockAlignment from './BlockAlignment';
+declare const meta: Meta<typeof BlockAlignment>;
+export default meta;
+type Story = StoryObj<typeof BlockAlignment>;
+export declare const DefaultAlignment: Story;
+export declare const CustomActions: Story;
+export declare const FilteredActions: Story;

package/types/components/manage/Widgets/BlockWidth.d.ts

@@ -0,0 +1,7 @@
+import type { IntlShape } from 'react-intl';
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+declare const BlockWidthWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockWidthWidget;

package/types/components/manage/Widgets/BlockWidth.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BlockWidth from './BlockWidth';
+declare const meta: Meta<typeof BlockWidth>;
+export default meta;
+type Story = StoryObj<typeof BlockWidth>;
+export declare const DefaultWidth: Story;

package/types/components/manage/Widgets/ButtonsWidget.d.ts

@@ -1,2 +1,49 @@
+import React from 'react';
+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;
+};
+declare const ButtonsWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonsWidget;
-declare function ButtonsWidget(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Widgets/ButtonsWidget.stories.d.ts

@@ -1,4 +1,7 @@
 export const Buttons: any;
+export const ButtonsWithDefaultValue: any;
+export const ButtonsWithStyleDefinitions: any;
+export const ButtonsFiltered: any;
 declare namespace _default {
     export let title: string;
     export { ButtonsWidget as component };

package/types/components/manage/Widgets/Size.d.ts

@@ -0,0 +1,7 @@
+import { type ActionInfo, type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+export declare const defaultActionsInfo: ({ intl, }: {
+    intl: IntlShape;
+}) => Record<string, ActionInfo>;
+declare const SizeWidget: (props: ButtonsWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export default SizeWidget;

package/types/components/manage/Widgets/Size.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Size from './Size';
+declare const meta: Meta<typeof Size>;
+export default meta;
+type Story = StoryObj<typeof Size>;
+export declare const DefaultSize: Story;

package/types/components/manage/Widgets/index.d.ts

@@ -1,5 +1,7 @@
-export declare const AlignWidget: import("@loadable/component").LoadableComponent<any>;
-export declare const ButtonsWidget: import("@loadable/component").LoadableComponent<any>;
+export declare const AlignWidget: import("@loadable/component").LoadableComponent<import("@plone/volto/components/manage/Widgets/ButtonsWidget").ButtonsWidgetProps & {
+    defaultAction?: string;
+}>;
+export declare const ButtonsWidget: import("@loadable/component").LoadableComponent<import("@plone/volto/components/manage/Widgets/ButtonsWidget").ButtonsWidgetProps>;
 export declare const ArrayWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const CheckboxWidget: import("@loadable/component").LoadableComponent<import("react-intl").WithIntlProps<any>>;
 export declare const CheckboxGroupWidget: import("@loadable/component").LoadableClassComponent<any>;
@@ -122,3 +124,6 @@ export declare const DatetimeWidget: import("@loadable/component").LoadableClass
 export declare const TimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RecurrenceWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<import("react-intl").WithIntlProps<any>>;
+export declare const Size: import("@loadable/component").LoadableComponent<import("@plone/volto/components/manage/Widgets/ButtonsWidget").ButtonsWidgetProps>;
+export declare const BlockAlignment: import("@loadable/component").LoadableComponent<import("@plone/volto/components/manage/Widgets/ButtonsWidget").ButtonsWidgetProps>;
+export declare const BlockWidth: import("@loadable/component").LoadableComponent<import("@plone/volto/components/manage/Widgets/ButtonsWidget").ButtonsWidgetProps>;

package/types/components/theme/InjectPloneComponentsCSS/InjectPloneComponentsCSS.d.ts

@@ -0,0 +1,3 @@
+import '@plone/components/dist/basic.css';
+declare const InjectPloneComponentsCSS: () => any;
+export default InjectPloneComponentsCSS;

package/types/config/Widgets.d.ts

@@ -41,6 +41,9 @@ export namespace widgetMapping {
         export { HiddenWidget as hidden };
         export { RadioGroupWidget as radio_group };
         export { CheckboxGroupWidget as checkbox_group };
+        export { BlockAlignment as blockAlignment };
+        export { BlockWidth as blockWidth };
+        export { Size as size };
     }
     export let vocabulary: {
         'plone.app.vocabularies.Catalog': import("@loadable/component").LoadableComponent<Omit<import("react-intl").WithIntlProps<import("react-intl").WrappedComponentProps<string>>, "ref"> & import("react").RefAttributes<import("react").ComponentType<import("react-intl").WrappedComponentProps<string>>>>;
@@ -141,6 +144,9 @@ import { StaticTextWidget } from '@plone/volto/components/manage/Widgets';
 import { HiddenWidget } from '@plone/volto/components/manage/Widgets';
 import { RadioGroupWidget } from '@plone/volto/components/manage/Widgets';
 import { CheckboxGroupWidget } from '@plone/volto/components/manage/Widgets';
+import { BlockAlignment } from '@plone/volto/components/manage/Widgets';
+import { BlockWidth } from '@plone/volto/components/manage/Widgets';
+import { Size } from '@plone/volto/components/manage/Widgets';
 import { CheckboxWidget } from '@plone/volto/components/manage/Widgets';
 import { NumberWidget } from '@plone/volto/components/manage/Widgets';
 import { getWidgetView } from '@plone/volto/helpers/Widget/widget';

package/types/config/slots.d.ts

@@ -1,5 +1,12 @@
 export default slots;
 declare namespace slots {
+    let aboveApp: {
+        name: string;
+        component: import("@loadable/component").LoadableComponent<any>;
+        predicates: (({ location }: {
+            location: any;
+        }) => boolean)[];
+    }[];
     let belowContent: ({
         name: string;
         component: {

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

@@ -1,59 +0,0 @@
-import React from 'react';
-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';
-
-const mockStore = configureStore();
-
-describe('renders an align widget component', () => {
-  it('basic', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <AlignWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('extended with actions and actionsInfoMap props', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <AlignWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-          actions={['additional']}
-          actionsInfoMap={{
-            additional: [imageFullSVG, 'Additional action title'],
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { Button } from 'semantic-ui-react';
-
-// The ButtonsWidget
-const ButtonsWidget = (props) => {
-  const { id, onChange, actions, actionsInfoMap, defaultAction, value } = props;
-
-  React.useEffect(() => {
-    if (!props.value && props.default) {
-      props.onChange(props.id, props.default);
-    }
-  });
-
-  return (
-    <FormFieldWrapper {...props} className="align-widget">
-      <div className="align-buttons">
-        {actions.map((action) => (
-          <Button.Group key={action}>
-            <Button
-              icon
-              basic
-              aria-label={actionsInfoMap[action][1]}
-              onClick={() => onChange(id, action)}
-              active={(action === defaultAction && !value) || value === action}
-            >
-              <Icon
-                name={actionsInfoMap[action][0]}
-                title={actionsInfoMap[action][1] || action}
-                size="24px"
-              />
-            </Button>
-          </Button.Group>
-        ))}
-      </div>
-    </FormFieldWrapper>
-  );
-};
-
-export default ButtonsWidget;

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

@@ -1,70 +0,0 @@
-import React from 'react';
-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 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();
-
-describe('renders an align widget component', () => {
-  it('basic', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <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'],
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('extended with actions and actionsInfoMap props', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <ButtonsWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-          actions={['additional']}
-          actionsInfoMap={{
-            additional: [imageFullSVG, 'Additional action title'],
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});