@frontify/guideline-blocks-settings 0.32.2 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.32.2",
+  "version": "0.33.0",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -27,6 +27,7 @@
     "@frontify/eslint-config-typescript": "^0.16.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "14.5.2",
     "@types/node": "^18.18.11",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.16",
@@ -64,7 +65,7 @@
     "@udecode/plate": "^21.5.0",
     "slate": "^0.94.1",
     "slate-react": "^0.98.3",
-    "@frontify/sidebar-settings": "^0.9.1"
+    "@frontify/sidebar-settings": "^0.9.2"
   },
   "peerDependencies": {
     "@frontify/app-bridge": "^3.0.0 || ^4.0.0-alpha.0",

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

@@ -14,7 +14,7 @@ const ChildSelector = '[data-test-id="block-item-wrapper-child"]';
 describe('Block Item Wrapper', () => {
     it('should render the wrapper and the children', () => {
         mount(
-            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]}>
+            <BlockItemWrapper toolbarItems={[]}>
                 <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
             </BlockItemWrapper>,
         );
@@ -24,7 +24,7 @@ describe('Block Item Wrapper', () => {
 
     it('should render the outline class', () => {
         mount(
-            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]}>
+            <BlockItemWrapper toolbarItems={[]}>
                 <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
             </BlockItemWrapper>,
         );
@@ -33,7 +33,7 @@ describe('Block Item Wrapper', () => {
 
     it('should not render the outline class if the hide prop is set', () => {
         mount(
-            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]} shouldHideWrapper>
+            <BlockItemWrapper toolbarItems={[]} shouldHideWrapper>
                 <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
             </BlockItemWrapper>,
         );
@@ -43,10 +43,9 @@ describe('Block Item Wrapper', () => {
     it('should render the right amount of toolbar items', () => {
         mount(
             <BlockItemWrapper
-                toolbarFlyoutItems={[]}
                 toolbarItems={[
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
                 ]}
             >
                 <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
@@ -58,30 +57,33 @@ describe('Block Item Wrapper', () => {
     it('should render the flyout button with the right amount of menu items', () => {
         mount(
             <BlockItemWrapper
-                toolbarFlyoutItems={[
-                    [
-                        {
-                            icon: <IconMagnifier16 />,
-                            onClick: cy.stub(),
-                            title: 'Test title',
-                        },
-                    ],
-                    [
-                        {
-                            icon: <IconMagnifier16 />,
-                            onClick: cy.stub(),
-                            title: 'Test title',
-                        },
-                        {
-                            icon: <IconMagnifier16 />,
-                            onClick: cy.stub(),
-                            title: 'Test title',
-                        },
-                    ],
-                ]}
                 toolbarItems={[
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    {
+                        type: 'menu',
+                        items: [
+                            [
+                                {
+                                    icon: <IconMagnifier16 />,
+                                    onClick: cy.stub(),
+                                    title: 'Test title',
+                                },
+                            ],
+                            [
+                                {
+                                    icon: <IconMagnifier16 />,
+                                    onClick: cy.stub(),
+                                    title: 'Test title',
+                                },
+                                {
+                                    icon: <IconMagnifier16 />,
+                                    onClick: cy.stub(),
+                                    title: 'Test title',
+                                },
+                            ],
+                        ],
+                    },
                 ]}
             >
                 <div data-test-id="block-item-wrapper-child" className="tw-mt-8 tw-w-8 tw-h-8 tw-bg-red-50" />
@@ -96,10 +98,9 @@ describe('Block Item Wrapper', () => {
     it('should render the outline if a toolbar button is focused', () => {
         mount(
             <BlockItemWrapper
-                toolbarFlyoutItems={[]}
                 toolbarItems={[
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
                 ]}
             >
                 <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
@@ -112,11 +113,10 @@ describe('Block Item Wrapper', () => {
     it('should render the toolbar if a button is focused', () => {
         mount(
             <BlockItemWrapper
-                toolbarFlyoutItems={[]}
                 shouldHideComponent={false}
                 toolbarItems={[
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
                 ]}
             >
                 <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
@@ -129,10 +129,9 @@ describe('Block Item Wrapper', () => {
     it('should render the outline and the toolbar if enabled', () => {
         mount(
             <BlockItemWrapper
-                toolbarFlyoutItems={[]}
                 toolbarItems={[
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
                 ]}
                 shouldBeShown
             >

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -11,7 +11,6 @@ import { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext
 
 export const BlockItemWrapper = ({
     children,
-    toolbarFlyoutItems,
     toolbarItems,
     shouldHideWrapper,
     shouldHideComponent = false,
@@ -63,9 +62,6 @@ export const BlockItemWrapper = ({
                         ])}
                     >
                         <Toolbar
-                            flyoutMenu={{
-                                items: toolbarFlyoutItems,
-                            }}
                             attachments={{
                                 isEnabled: showAttachments,
                             }}

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

@@ -1,12 +1,13 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import { ReactNode } from 'react';
 import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../../constants';
 import { useDragPreviewContext } from '../context/DragPreviewContext';
 import { BaseToolbarButton } from '../BaseToolbarButton';
 import { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';
 
 export type DragHandleToolbarButtonProps = {
-    icon: JSX.Element;
+    icon?: ReactNode;
     tooltip?: string;
     draggableProps: Record<string, unknown>;
     setActivatorNodeRef?: (node: HTMLElement | null) => void;

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

@@ -1,15 +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 { DEFAULT_ATTACHMENTS_BUTTON_ID, DEFAULT_MENU_BUTTON_ID } from '.';
 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
@@ -21,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',
@@ -33,15 +85,94 @@ describe('Toolbar', () => {
     });
 
     it('should not throw error if toolbar does not have attachments enabled', () => {
-        expect(() =>
-            render(<Toolbar items={[]} flyoutMenu={{ items: [] }} attachments={{ isEnabled: false }} />),
-        ).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: [] }} attachments={{ isEnabled: true }} />),
-        ).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 () => {
@@ -58,18 +189,20 @@ describe('Toolbar', () => {
             >
                 <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(),
-                                    },
+                        items={[
+                            {
+                                type: 'menu',
+                                items: [
+                                    [
+                                        {
+                                            title: 'Replace with upload',
+                                            icon: <div></div>,
+                                            onClick: vi.fn(),
+                                        },
+                                    ],
                                 ],
-                            ],
-                        }}
+                            },
+                        ]}
                         attachments={{ isEnabled: true }}
                     />
                 </AttachmentsProvider>
@@ -98,18 +231,20 @@ describe('Toolbar', () => {
                 <DragPreviewContextProvider isDragPreview>
                     <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(),
-                                        },
+                            items={[
+                                {
+                                    type: 'menu',
+                                    items: [
+                                        [
+                                            {
+                                                title: 'Replace with upload',
+                                                icon: <div></div>,
+                                                onClick: vi.fn(),
+                                            },
+                                        ],
                                     ],
-                                ],
-                            }}
+                                },
+                            ]}
                             attachments={{ isEnabled: true }}
                         />
                     </AttachmentsProvider>

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

@@ -5,9 +5,10 @@ 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 }: ToolbarProps) => (
+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"
@@ -18,14 +19,18 @@ export const Toolbar = ({ items, flyoutMenu, attachments }: ToolbarProps) => (
             </ToolbarSegment>
         )}
         <ToolbarSegment>
-            {items.map((item, i) =>
-                'draggableProps' in item ? (
-                    <DragHandleToolbarButton key={i} {...item} />
-                ) : (
-                    <ToolbarButton key={i} {...item} />
-                ),
-            )}
-            {flyoutMenu.items.length > 0 && <MenuToolbarButton {...flyoutMenu} />}
+            {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/context/index.ts

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

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

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

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

@@ -1,5 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+export * from './context';
+export * from './hooks';
 export * from './Toolbar';
 export * from './AttachmentsToolbarButton';
 export * from './DragHandleToolbarButton';

package/src/components/BlockItemWrapper/Toolbar/types.ts

@@ -1,19 +1,18 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { type ToolbarButtonProps } from './ToolbarButton';
-import { type ToolbarFlyoutMenuItem } from './MenuToolbarButton/ToolbarFlyoutMenu';
-import { DragHandleToolbarButtonProps } from '.';
+import { type DragHandleToolbarButtonProps } from './DragHandleToolbarButton';
+import { type FlyoutToolbarButtonProps } from './FlyoutToolbarButton';
+import { type MenuToolbarButtonProps } from './MenuToolbarButton';
 
 export type ToolbarProps = {
     items: ToolbarItem[];
-    flyoutMenu: { items: ToolbarFlyoutMenuItem[][] };
     attachments: { isEnabled: boolean };
 };
 
-export type DraghandleToolbarItem = DragHandleToolbarButtonProps;
+export type DragHandleToolbarItem = { type: 'dragHandle' } & DragHandleToolbarButtonProps;
+export type ButtonToolbarItem = { type: 'button' } & ToolbarButtonProps;
+export type FlyoutToolbarItem = { type: 'flyout' } & FlyoutToolbarButtonProps;
+export type MenuToolbarItem = { type: 'menu' } & MenuToolbarButtonProps;
 
-export type ButtonToolbarItem = ToolbarButtonProps;
-
-export type FlyoutToolbarItem = ToolbarFlyoutMenuItem;
-
-export type ToolbarItem = DraghandleToolbarItem | ButtonToolbarItem;
+export type ToolbarItem = DragHandleToolbarItem | ButtonToolbarItem | FlyoutToolbarItem | MenuToolbarItem;

package/src/components/BlockItemWrapper/types.ts

@@ -4,14 +4,13 @@ import { type ReactNode } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type AttachmentsProvider, type withAttachmentsProvider } from '../../hooks/useAttachments';
-import { type FlyoutToolbarItem, type ToolbarItem } from './Toolbar';
+import { type ToolbarItem } from './Toolbar';
 
 export type BlockItemWrapperProps = {
     children: ReactNode;
     shouldHideWrapper?: boolean;
     shouldHideComponent?: boolean;
     toolbarItems: (ToolbarItem | undefined)[];
-    toolbarFlyoutItems: FlyoutToolbarItem[][];
     isDragging?: boolean;
     shouldFillContainer?: boolean;
     outlineOffset?: number;