@frontify/guideline-blocks-settings 0.32.1 → 0.33.0

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.spec.tsx

@@ -0,0 +1,63 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { ToolbarFlyoutMenu } from './ToolbarFlyoutMenu';
+import { MultiFlyoutContextProvider } from '../context/MultiFlyoutContext';
+
+const MENU_ITEM_ID = 'menu-item';
+
+const TEST_FLYOUT_ID = 'test';
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('ToolbarFlyoutMenu', () => {
+    it('should display menu items', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+
+        const { getAllByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <ToolbarFlyoutMenu
+                    items={[
+                        [{ title: 'item-1', onClick: vi.fn(), icon: <IconAdobeCreativeCloud /> }],
+                        [{ title: 'item-2', onClick: vi.fn(), icon: <IconAdobeCreativeCloud /> }],
+                    ]}
+                    flyoutId={TEST_FLYOUT_ID}
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getAllByTestId(MENU_ITEM_ID)).toHaveLength(2);
+    });
+
+    it('should close flyout onClick', async () => {
+        const setOpenFlyoutIdsStub = vi.fn();
+        const onClickStub = vi.fn();
+
+        const { getByTestId } = render(
+            <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
+                <ToolbarFlyoutMenu
+                    items={[
+                        [
+                            {
+                                title: 'item-1',
+                                onClick: onClickStub,
+                                icon: <IconAdobeCreativeCloud />,
+                            },
+                        ],
+                    ]}
+                    flyoutId={TEST_FLYOUT_ID}
+                />
+            </MultiFlyoutContextProvider>,
+        );
+
+        expect(getByTestId(MENU_ITEM_ID)).toBeVisible();
+
+        await fireEvent.pointerUp(getByTestId(MENU_ITEM_ID));
+
+        expect(onClickStub).toHaveBeenCalledOnce();
+        expect(setOpenFlyoutIdsStub).toHaveBeenCalledOnce();
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.tsx

@@ -0,0 +1,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ActionMenu, MenuItemContentSize, MenuItemStyle } from '@frontify/fondue';
+import { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';
+
+export type ToolbarFlyoutMenuItem = {
+    title: string;
+    onClick: () => void;
+    icon: JSX.Element;
+    style?: MenuItemStyle;
+};
+
+export type ToolbarFlyoutMenuProps = {
+    items: ToolbarFlyoutMenuItem[][];
+    flyoutId: string;
+};
+
+export const ToolbarFlyoutMenu = ({ items, flyoutId }: ToolbarFlyoutMenuProps) => {
+    const { onOpenChange } = useMultiFlyoutState(flyoutId);
+
+    return (
+        <ActionMenu
+            menuBlocks={items.map((block, blockIndex) => ({
+                id: blockIndex.toString(),
+                menuItems: block.map((item, itemIndex) => ({
+                    id: blockIndex.toString() + itemIndex.toString(),
+                    size: MenuItemContentSize.XSmall,
+                    title: item.title,
+                    style: item.style,
+                    onClick: () => {
+                        onOpenChange(false);
+                        item.onClick();
+                    },
+                    initialValue: true,
+                    decorator: <div className="tw-mr-2">{item.icon}</div>,
+                })),
+            }))}
+        />
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './MenuToolbarButton';

package/src/components/BlockItemWrapper/Toolbar/Toolbar.spec.tsx

@@ -1,12 +1,19 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { render } from '@testing-library/react';
+import { IconArrowMove16, IconMoveTo, IconTrashBin } from '@frontify/fondue';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { AttachmentsProvider } from '../../../hooks/useAttachments';
 
 import { Toolbar } from './Toolbar';
+import { MultiFlyoutContextProvider } from './context/MultiFlyoutContext';
+import { DragPreviewContextProvider } from './context/DragPreviewContext';
+import { DEFAULT_ATTACHMENTS_BUTTON_ID } from './AttachmentsToolbarButton';
+import { DEFAULT_MENU_BUTTON_ID } from './MenuToolbarButton';
+import { ToolbarItem } from './types';
 
 /**
  * @vitest-environment happy-dom
@@ -18,6 +25,54 @@ const MENU_FLYOUT_ID = 'menu-item';
 const MOCK_ASSET_FIELD_ID = 'attachment';
 
 describe('Toolbar', () => {
+    const stubs = vi.hoisted(() => ({
+        setOpenFlyoutIds: vi.fn(),
+        onClick: vi.fn(),
+        onDrag: vi.fn(),
+        onKeyDown: vi.fn(),
+    }));
+
+    const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
+        blockId: 1,
+        blockAssets: { [MOCK_ASSET_FIELD_ID]: [] },
+        editorState: true,
+    });
+
+    const FULL_ITEMS: ToolbarItem[] = [
+        {
+            type: 'dragHandle',
+            setActivatorNodeRef: vi.fn(),
+            icon: <IconMoveTo />,
+            draggableProps: { onDrag: stubs.onDrag, onKeyDown: stubs.onKeyDown },
+        },
+        {
+            type: 'button',
+            onClick: stubs.onClick,
+            icon: <IconTrashBin />,
+        },
+        {
+            type: 'flyout',
+            icon: <IconArrowMove16 />,
+            tooltip: 'Move To',
+            content: <div>Content</div>,
+            flyoutHeader: <div>Fixed Header</div>,
+            flyoutFooter: <div>Fixed Footer</div>,
+            flyoutId: 'move',
+        },
+        {
+            type: 'menu',
+            items: [
+                [
+                    {
+                        title: 'Replace with upload',
+                        icon: <div></div>,
+                        onClick: stubs.onClick,
+                    },
+                ],
+            ],
+        },
+    ];
+
     beforeAll(() => {
         vi.stubGlobal(
             'Worker',
@@ -30,27 +85,94 @@ describe('Toolbar', () => {
     });
 
     it('should not throw error if toolbar does not have attachments enabled', () => {
-        expect(() =>
-            render(
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{ items: [], isOpen: false, onOpenChange: vi.fn() }}
-                    attachments={{ isEnabled: false, isOpen: false, onOpenChange: vi.fn() }}
-                />,
-            ),
-        ).not.toThrowError();
+        expect(() => render(<Toolbar items={[]} attachments={{ isEnabled: false }} />)).not.toThrowError();
     });
 
     it('should throw error if toolbar does have attachments enabled without provider', () => {
-        expect(() =>
-            render(
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{ items: [], isOpen: false, onOpenChange: vi.fn() }}
-                    attachments={{ isEnabled: true, isOpen: false, onOpenChange: vi.fn() }}
-                />,
-            ),
-        ).toThrowError();
+        expect(() => render(<Toolbar items={[]} attachments={{ isEnabled: true }} />)).toThrowError();
+    });
+
+    it('should have every item type accessible by mouse', async () => {
+        const ToolbarWithAttachments = () => (
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={stubs.setOpenFlyoutIds}>
+                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
+                    <Toolbar items={FULL_ITEMS} attachments={{ isEnabled: true }} />
+                </AttachmentsProvider>
+            </MultiFlyoutContextProvider>
+        );
+
+        const { getAllByRole } = render(<ToolbarWithAttachments />);
+
+        const buttons = getAllByRole('button');
+        expect(buttons).toHaveLength(5);
+
+        const [attachmentBtn, dragBtn, btn, flyoutBtn, menuBtn] = buttons;
+
+        // Click Interactions
+
+        await fireEvent.click(attachmentBtn);
+        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(1);
+
+        await fireEvent.drag(dragBtn);
+        expect(stubs.onDrag).toHaveBeenCalledTimes(1);
+
+        await fireEvent.click(btn);
+        expect(stubs.onClick).toHaveBeenCalledTimes(1);
+
+        await fireEvent.click(flyoutBtn);
+        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(2);
+
+        await fireEvent.click(menuBtn);
+        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(3);
+    });
+
+    it('should have every item type accessible by keyboard', async () => {
+        const ToolbarWithAttachments = () => (
+            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={stubs.setOpenFlyoutIds}>
+                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
+                    <Toolbar items={FULL_ITEMS} attachments={{ isEnabled: true }} />
+                </AttachmentsProvider>
+            </MultiFlyoutContextProvider>
+        );
+
+        const user = userEvent.setup();
+
+        const { getAllByRole } = render(<ToolbarWithAttachments />);
+
+        const buttons = getAllByRole('button');
+        expect(buttons).toHaveLength(5);
+
+        const [attachmentBtn, dragBtn, btn, flyoutBtn, menuBtn] = buttons;
+
+        await user.keyboard('{Tab}');
+
+        expect(attachmentBtn).toHaveFocus();
+        await user.keyboard('{Enter}');
+        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(1);
+
+        await user.keyboard('{Tab}');
+
+        expect(dragBtn).toHaveFocus();
+        await user.keyboard('{Enter}');
+        expect(stubs.onKeyDown).toHaveBeenCalledTimes(1);
+
+        await user.keyboard('{Tab}');
+
+        expect(btn).toHaveFocus();
+        await user.keyboard('{Enter}');
+        expect(stubs.onClick).toHaveBeenCalledTimes(1);
+
+        await user.keyboard('{Tab}');
+
+        expect(flyoutBtn).toHaveFocus();
+        await user.keyboard('{Enter}');
+        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(2);
+
+        await user.keyboard('{Tab}');
+
+        expect(menuBtn).toHaveFocus();
+        await user.keyboard('{Enter}');
+        expect(stubs.setOpenFlyoutIds).toHaveBeenCalledTimes(3);
     });
 
     it('should open flyouts if not dragging', async () => {
@@ -61,26 +183,30 @@ describe('Toolbar', () => {
         });
 
         const ToolbarWithAttachments = () => (
-            <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{
-                        items: [
-                            [
-                                {
-                                    title: 'Replace with upload',
-                                    icon: <div></div>,
-                                    onClick: vi.fn(),
-                                },
-                            ],
-                        ],
-                        isOpen: true,
-                        onOpenChange: vi.fn(),
-                    }}
-                    attachments={{ isEnabled: true, isOpen: true, onOpenChange: vi.fn() }}
-                    isDragging={false}
-                />
-            </AttachmentsProvider>
+            <MultiFlyoutContextProvider
+                openFlyoutIds={[DEFAULT_ATTACHMENTS_BUTTON_ID, DEFAULT_MENU_BUTTON_ID]}
+                setOpenFlyoutIds={vi.fn()}
+            >
+                <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
+                    <Toolbar
+                        items={[
+                            {
+                                type: 'menu',
+                                items: [
+                                    [
+                                        {
+                                            title: 'Replace with upload',
+                                            icon: <div></div>,
+                                            onClick: vi.fn(),
+                                        },
+                                    ],
+                                ],
+                            },
+                        ]}
+                        attachments={{ isEnabled: true }}
+                    />
+                </AttachmentsProvider>
+            </MultiFlyoutContextProvider>
         );
 
         const { baseElement } = render(<ToolbarWithAttachments />, { container: document.body });
@@ -98,26 +224,32 @@ describe('Toolbar', () => {
         });
 
         const ToolbarWithAttachments = () => (
-            <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
-                <Toolbar
-                    items={[]}
-                    flyoutMenu={{
-                        items: [
-                            [
+            <MultiFlyoutContextProvider
+                openFlyoutIds={[DEFAULT_ATTACHMENTS_BUTTON_ID, DEFAULT_MENU_BUTTON_ID]}
+                setOpenFlyoutIds={vi.fn()}
+            >
+                <DragPreviewContextProvider isDragPreview>
+                    <AttachmentsProvider appBridge={STUB_WITH_NO_ASSETS} assetId={MOCK_ASSET_FIELD_ID}>
+                        <Toolbar
+                            items={[
                                 {
-                                    title: 'Replace with upload',
-                                    icon: <div></div>,
-                                    onClick: vi.fn(),
+                                    type: 'menu',
+                                    items: [
+                                        [
+                                            {
+                                                title: 'Replace with upload',
+                                                icon: <div></div>,
+                                                onClick: vi.fn(),
+                                            },
+                                        ],
+                                    ],
                                 },
-                            ],
-                        ],
-                        isOpen: true,
-                        onOpenChange: vi.fn(),
-                    }}
-                    attachments={{ isEnabled: true, isOpen: true, onOpenChange: vi.fn() }}
-                    isDragging
-                />
-            </AttachmentsProvider>
+                            ]}
+                            attachments={{ isEnabled: true }}
+                        />
+                    </AttachmentsProvider>
+                </DragPreviewContextProvider>
+            </MultiFlyoutContextProvider>
         );
 
         const { baseElement } = render(<ToolbarWithAttachments />, { container: document.body });

package/src/components/BlockItemWrapper/Toolbar/Toolbar.tsx

@@ -1,133 +1,36 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import {
-    ActionMenu,
-    Flyout,
-    IconDotsHorizontal16,
-    MenuItemContentSize,
-    LegacyTooltip as Tooltip,
-    TooltipPosition,
-} from '@frontify/fondue';
-
-import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../constants';
-
 import { ToolbarSegment } from './ToolbarSegment';
-import { ToolbarAttachments } from './ToolbarAttachments';
-import { getToolbarButtonClassNames } from './helpers';
+import { AttachmentsToolbarButton } from './AttachmentsToolbarButton';
 import { type ToolbarProps } from './types';
+import { ToolbarButton } from './ToolbarButton';
+import { DragHandleToolbarButton } from './DragHandleToolbarButton';
+import { FlyoutToolbarButton } from './FlyoutToolbarButton';
+import { MenuToolbarButton } from './MenuToolbarButton';
 
-export const Toolbar = ({ items, flyoutMenu, attachments, isDragging }: ToolbarProps) => {
-    return (
-        <div
-            data-test-id="block-item-wrapper-toolbar"
-            className="tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate"
-        >
-            {attachments.isEnabled && (
-                <ToolbarSegment>
-                    <ToolbarAttachments
-                        isOpen={attachments.isOpen && !isDragging}
-                        onOpenChange={attachments.onOpenChange}
-                    />
-                </ToolbarSegment>
-            )}
+export const Toolbar = ({ items, attachments }: ToolbarProps) => (
+    <div
+        data-test-id="block-item-wrapper-toolbar"
+        className="tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate"
+    >
+        {attachments.isEnabled && (
             <ToolbarSegment>
-                {items.map((item, i) =>
-                    'draggableProps' in item ? (
-                        <Tooltip
-                            key={i}
-                            withArrow
-                            hoverDelay={0}
-                            enterDelay={300}
-                            open={isDragging}
-                            position={TooltipPosition.Top}
-                            content={
-                                <div>
-                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}
-                                </div>
-                            }
-                            triggerElement={
-                                <button
-                                    ref={item.setActivatorNodeRef}
-                                    data-test-id="block-item-wrapper-toolbar-btn"
-                                    {...item.draggableProps}
-                                    className={getToolbarButtonClassNames('grab', isDragging)}
-                                >
-                                    {item.icon}
-                                </button>
-                            }
-                        />
-                    ) : (
-                        <Tooltip
-                            key={i}
-                            withArrow
-                            enterDelay={300}
-                            hoverDelay={0}
-                            disabled={isDragging}
-                            position={TooltipPosition.Top}
-                            content={<div>{item.tooltip ?? ''}</div>}
-                            triggerElement={
-                                <button
-                                    data-test-id="block-item-wrapper-toolbar-btn"
-                                    onClick={item.onClick}
-                                    className={getToolbarButtonClassNames('pointer')}
-                                >
-                                    {item.icon}
-                                </button>
-                            }
-                        />
-                    ),
-                )}
-                {flyoutMenu.items.length > 0 && (
-                    <Tooltip
-                        withArrow
-                        hoverDelay={0}
-                        enterDelay={300}
-                        disabled={isDragging || flyoutMenu.isOpen}
-                        position={TooltipPosition.Top}
-                        content={<div>Options</div>}
-                        triggerElement={
-                            <div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative">
-                                <Flyout
-                                    isOpen={flyoutMenu.isOpen && !isDragging}
-                                    legacyFooter={false}
-                                    fitContent
-                                    hug={false}
-                                    onOpenChange={flyoutMenu.onOpenChange}
-                                    trigger={
-                                        <div
-                                            data-test-id="block-item-wrapper-toolbar-flyout"
-                                            className={getToolbarButtonClassNames(
-                                                'pointer',
-                                                flyoutMenu.isOpen && !isDragging,
-                                            )}
-                                        >
-                                            <IconDotsHorizontal16 />
-                                        </div>
-                                    }
-                                >
-                                    <ActionMenu
-                                        menuBlocks={flyoutMenu.items.map((block, blockIndex) => ({
-                                            id: blockIndex.toString(),
-                                            menuItems: block.map((item, itemIndex) => ({
-                                                id: blockIndex.toString() + itemIndex.toString(),
-                                                size: MenuItemContentSize.XSmall,
-                                                title: item.title,
-                                                style: item.style,
-                                                onClick: () => {
-                                                    flyoutMenu.onOpenChange(false);
-                                                    item.onClick();
-                                                },
-                                                initialValue: true,
-                                                decorator: <div className="tw-mr-2">{item.icon}</div>,
-                                            })),
-                                        }))}
-                                    />
-                                </Flyout>
-                            </div>
-                        }
-                    />
-                )}
+                <AttachmentsToolbarButton />
             </ToolbarSegment>
-        </div>
-    );
-};
+        )}
+        <ToolbarSegment>
+            {items.map((item) => {
+                if (item.type === 'dragHandle') {
+                    return <DragHandleToolbarButton key={item.tooltip + item.type} {...item} />;
+                }
+                if (item.type === 'menu') {
+                    return <MenuToolbarButton key={item.tooltip + item.type} {...item} />;
+                }
+                if (item.type === 'flyout') {
+                    return <FlyoutToolbarButton key={item.tooltip + item.type} {...item} />;
+                }
+                return <ToolbarButton key={item.tooltip + item.type} {...item} />;
+            })}
+        </ToolbarSegment>
+    </div>
+);

package/src/components/BlockItemWrapper/Toolbar/ToolbarButton/ToolbarButton.spec.tsx

@@ -0,0 +1,70 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ToolbarButton } from './ToolbarButton';
+import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { DragPreviewContextProvider } from '../context/DragPreviewContext';
+
+const TOOLBAR_BUTTON_ID = 'block-item-wrapper-toolbar-btn';
+const TOOLTIP_ID = 'toolbar-button-tooltip';
+
+const TOOLTIP_CONTENT = 'content';
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('ToolbarButton', () => {
+    it('should disable tooltip when item is in drag preview context', async () => {
+        const { getByTestId } = render(
+            <DragPreviewContextProvider isDragPreview>
+                <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />
+            </DragPreviewContextProvider>,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+
+        getByTestId(TOOLTIP_ID).focus();
+
+        await waitFor(() => {
+            expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+        });
+    });
+
+    it('should show tooltip when item is focused', async () => {
+        const { getByTestId } = render(
+            <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
+        );
+
+        expect(getByTestId(TOOLTIP_ID)).toHaveClass('tw-opacity-0');
+        expect(getByTestId(TOOLTIP_ID)).toHaveTextContent(TOOLTIP_CONTENT);
+
+        getByTestId(TOOLTIP_ID).focus();
+
+        await waitFor(() => {
+            expect(getByTestId(TOOLTIP_ID)).not.toHaveClass('tw-opacity-0');
+        });
+    });
+
+    it('should trigger onClick', async () => {
+        const onClickStub = vi.fn();
+        const { getByTestId } = render(
+            <ToolbarButton onClick={onClickStub} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
+        );
+
+        await fireEvent.click(getByTestId(TOOLBAR_BUTTON_ID));
+
+        expect(onClickStub).toHaveBeenCalledOnce();
+    });
+
+    it('should display icon', async () => {
+        const { getByTestId } = render(
+            <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
+        );
+
+        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).querySelectorAll('svg')];
+        expect(icons).toHaveLength(1);
+        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
+    });
+});

package/src/components/BlockItemWrapper/Toolbar/ToolbarButton/ToolbarButton.tsx

@@ -0,0 +1,19 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useDragPreviewContext } from '../context/DragPreviewContext';
+import { BaseToolbarButton } from '../BaseToolbarButton';
+import { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';
+
+export type ToolbarButtonProps = { icon: JSX.Element; tooltip?: string; onClick: () => void };
+
+export const ToolbarButton = ({ tooltip, icon, onClick }: ToolbarButtonProps) => {
+    const isDragPreview = useDragPreviewContext();
+
+    return (
+        <ToolbarButtonTooltip disabled={isDragPreview} content={tooltip ?? ''}>
+            <BaseToolbarButton data-test-id="block-item-wrapper-toolbar-btn" onClick={onClick}>
+                {icon}
+            </BaseToolbarButton>
+        </ToolbarButtonTooltip>
+    );
+};

package/src/components/BlockItemWrapper/Toolbar/ToolbarButton/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './ToolbarButton';