@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

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

@@ -0,0 +1,146 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconMagnifier16 } from '@frontify/fondue';
+import { mount } from 'cypress/react18';
+import { BlockItemWrapper } from './BlockItemWrapper';
+
+const BlockItemWrapperSelector = '[data-test-id="block-item-wrapper"]';
+const ToolbarSelector = '[data-test-id="block-item-wrapper-toolbar"]';
+const FlyoutSelector = '[data-test-id="block-item-wrapper-toolbar-flyout"]';
+const MenuItemSelector = '[data-test-id="menu-item"]';
+const ToolbarButtonSelector = '[data-test-id="block-item-wrapper-toolbar-btn"]';
+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={[]}>
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(BlockItemWrapperSelector).should('exist');
+        cy.get(ChildSelector).should('exist');
+    });
+
+    it('should render the outline class', () => {
+        mount(
+            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]}>
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(BlockItemWrapperSelector).should('have.class', 'hover:tw-outline');
+    });
+
+    it('should not render the outline class if the hide prop is set', () => {
+        mount(
+            <BlockItemWrapper toolbarFlyoutItems={[]} toolbarItems={[]} shouldHideWrapper>
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(BlockItemWrapperSelector).should('not.exist');
+    });
+
+    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' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).should('have.length', 2);
+    });
+
+    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' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-mt-8 tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).eq(0).focus();
+        cy.get(FlyoutSelector).should('exist');
+        cy.get(FlyoutSelector).click({ force: true });
+        cy.get(MenuItemSelector).should('have.length', 3);
+    });
+
+    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' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).eq(0).focus();
+        cy.get(BlockItemWrapperSelector).should('have.css', 'outline-style', 'solid');
+    });
+
+    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' },
+                ]}
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ToolbarButtonSelector).eq(0).focus();
+        cy.get(ToolbarSelector).should('be.visible');
+    });
+
+    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' },
+                ]}
+                shouldBeShown
+            >
+                <div data-test-id="block-item-wrapper-child" className="tw-w-8 tw-h-8 tw-bg-red-50" />
+            </BlockItemWrapper>
+        );
+        cy.get(ChildSelector).should('exist');
+        cy.get(BlockItemWrapperSelector).should('have.css', 'outline-style', 'solid');
+        cy.get(ToolbarSelector).should('be.visible');
+    });
+});

package/src/components/BlockItemWrapper/BlockItemWrapper.tsx

@@ -0,0 +1,76 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { joinClassNames } from '../../utilities';
+import { Toolbar } from './Toolbar';
+import { BlockItemWrapperProps, ToolbarItem } from './types';
+
+export const BlockItemWrapper = ({
+    children,
+    toolbarFlyoutItems,
+    toolbarItems,
+    shouldHideWrapper,
+    shouldHideComponent = false,
+    isDragging,
+    shouldFillContainer,
+    outlineOffset = 2,
+    shouldBeShown = false,
+}: PropsWithChildren<BlockItemWrapperProps>) => {
+    const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);
+    const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!isFlyoutOpen) {
+            // This prevents automatic refocusing of the trigger element
+            setIsFlyoutDisabled(true);
+        }
+    }, [isFlyoutOpen]);
+
+    if (shouldHideWrapper) {
+        return children;
+    }
+
+    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);
+
+    return (
+        <div
+            ref={wrapperRef}
+            onFocus={() => setIsFlyoutDisabled(false)}
+            onPointerEnter={() => setIsFlyoutDisabled(false)}
+            data-test-id="block-item-wrapper"
+            style={{
+                outlineOffset,
+            }}
+            className={joinClassNames([
+                'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',
+                shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',
+                'hover:tw-outline focus-within:tw-outline',
+                (isFlyoutOpen || shouldBeShown) && 'tw-outline',
+                shouldHideComponent && 'tw-opacity-0',
+            ])}
+        >
+            <div
+                style={{
+                    right: -1 - outlineOffset,
+                    bottom: `calc(100% - ${2 + outlineOffset}px)`,
+                }}
+                className={joinClassNames([
+                    'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-10',
+                    'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',
+                    (isFlyoutOpen || shouldBeShown) && 'tw-opacity-100',
+                ])}
+            >
+                <Toolbar
+                    isFlyoutOpen={isFlyoutOpen}
+                    isFlyoutDisabled={isFlyoutDisabled}
+                    setIsFlyoutOpen={setIsFlyoutOpen}
+                    flyoutItems={toolbarFlyoutItems}
+                    items={items}
+                    isDragging={isDragging}
+                />
+            </div>
+            {children}
+        </div>
+    );
+};

package/src/components/BlockItemWrapper/Toolbar.tsx

@@ -0,0 +1,128 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    ActionMenu,
+    Flyout,
+    IconDotsHorizontal16,
+    MenuItemContentSize,
+    Tooltip,
+    TooltipPosition,
+} from '@frontify/fondue';
+import { ToolbarProps } from './types';
+import { joinClassNames } from '../../utilities';
+import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from './constants';
+
+export const Toolbar = ({
+    items,
+    flyoutItems,
+    isFlyoutOpen,
+    setIsFlyoutOpen,
+    isDragging,
+    isFlyoutDisabled,
+}: ToolbarProps) => {
+    return (
+        <div data-test-id="block-item-wrapper-toolbar" className="tw-flex tw-justify-end">
+            <div className="tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded">
+                {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={joinClassNames([
+                                        'tw-bg-base tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm',
+                                        isDragging
+                                            ? 'tw-cursor-grabbing tw-bg-box-selected-pressed'
+                                            : 'tw-cursor-grab hover:tw-bg-box-selected-hover',
+                                    ])}
+                                >
+                                    {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="tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm"
+                                >
+                                    {item.icon}
+                                </button>
+                            }
+                        />
+                    )
+                )}
+                {flyoutItems.length > 0 && (
+                    <div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6">
+                        <Flyout
+                            isOpen={isFlyoutOpen && !isDragging}
+                            isTriggerDisabled={isFlyoutDisabled}
+                            legacyFooter={false}
+                            fitContent
+                            hug={false}
+                            onOpenChange={setIsFlyoutOpen}
+                            trigger={
+                                <Tooltip
+                                    withArrow
+                                    hoverDelay={0}
+                                    enterDelay={300}
+                                    disabled={isDragging}
+                                    position={TooltipPosition.Top}
+                                    content={<div>Options</div>}
+                                    triggerElement={
+                                        <div
+                                            data-test-id="block-item-wrapper-toolbar-flyout"
+                                            className="tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex  tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm"
+                                        >
+                                            <IconDotsHorizontal16 />
+                                        </div>
+                                    }
+                                />
+                            }
+                        >
+                            <ActionMenu
+                                menuBlocks={flyoutItems.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: () => {
+                                            setIsFlyoutOpen(false);
+                                            item.onClick();
+                                        },
+                                        initialValue: true,
+                                        decorator: <div className="tw-mr-2">{item.icon}</div>,
+                                    })),
+                                }))}
+                            />
+                        </Flyout>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/components/BlockItemWrapper/constants.ts

@@ -0,0 +1,4 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const DEFAULT_DRAG_TOOLTIP = 'Drag or press ↵ to move';
+export const DEFAULT_DRAGGING_TOOLTIP = 'Move with ↑↓←→ and confirm with ↵';

package/src/components/BlockItemWrapper/index.ts

@@ -0,0 +1,5 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './BlockItemWrapper';
+export * from './types';
+export * from './constants';

package/src/components/BlockItemWrapper/types.ts

@@ -0,0 +1,46 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { MenuItemStyle } from '@frontify/fondue';
+
+export type BlockItemWrapperProps = {
+    shouldHideWrapper?: boolean;
+    shouldHideComponent?: boolean;
+    toolbarItems: (ToolbarItem | undefined)[];
+    toolbarFlyoutItems: FlyoutToolbarItem[][];
+    isDragging?: boolean;
+    shouldFillContainer?: boolean;
+    outlineOffset?: number;
+    shouldBeShown?: boolean;
+};
+
+export type ToolbarProps = {
+    items: ToolbarItem[];
+    flyoutItems: FlyoutToolbarItem[][];
+    isFlyoutOpen: boolean;
+    setIsFlyoutOpen: (isOpen: boolean) => void;
+    isDragging?: boolean;
+    isFlyoutDisabled?: boolean;
+};
+
+type BaseToolbarItem = {
+    icon: JSX.Element;
+    tooltip?: string;
+};
+
+type DraghandleToolbarItem = BaseToolbarItem & {
+    draggableProps: Record<string, unknown>;
+    setActivatorNodeRef?: (node: HTMLElement | null) => void;
+};
+
+type ButtonToolbarItem = BaseToolbarItem & {
+    onClick: () => void;
+};
+
+export type ToolbarItem = DraghandleToolbarItem | ButtonToolbarItem;
+
+type FlyoutToolbarItem = {
+    title: string;
+    onClick: () => void;
+    icon: JSX.Element;
+    style?: MenuItemStyle;
+};

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

@@ -0,0 +1,20 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { mount } from 'cypress/react18';
+import { DownloadButton } from '.';
+
+const DownloadButtonSelector = '[data-test-id="download-button"]';
+
+describe('DownloadButton', () => {
+    it('renders component', () => {
+        mount(<DownloadButton onDownload={cy.stub()} />);
+        cy.get(DownloadButtonSelector).should('exist');
+    });
+
+    it('calls onDownload on click', () => {
+        const onDownloadStub = cy.stub().as('downloadStub');
+        mount(<DownloadButton onDownload={onDownloadStub} />);
+        cy.get(DownloadButtonSelector).click();
+        cy.get('@downloadStub').should('have.been.called');
+    });
+});

package/src/components/DownloadButton/DownloadButton.tsx

@@ -0,0 +1,36 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { DownloadButtonProps } from './types';
+import { useFocusRing } from '@react-aria/focus';
+import { FOCUS_STYLE, IconArrowCircleDown16, Tooltip, TooltipPosition } from '@frontify/fondue';
+import { joinClassNames } from '../../utilities';
+
+export const DownloadButton = ({ onDownload }: DownloadButtonProps) => {
+    const { isFocused, focusProps } = useFocusRing();
+
+    return (
+        <Tooltip
+            withArrow
+            position={TooltipPosition.Top}
+            content="Download"
+            enterDelay={500}
+            triggerElement={
+                <button
+                    tabIndex={0}
+                    aria-label="Download"
+                    {...focusProps}
+                    className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}
+                    onClick={onDownload}
+                    onPointerDown={(e) => e.preventDefault()}
+                >
+                    <span
+                        data-test-id="download-button"
+                        className="tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line"
+                    >
+                        <IconArrowCircleDown16 />
+                    </span>
+                </button>
+            }
+        />
+    );
+};

package/src/components/DownloadButton/index.ts

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

package/src/components/DownloadButton/types.ts

@@ -0,0 +1,5 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export type DownloadButtonProps = {
+    onDownload: () => void;
+};