refactor(Icons): replace all legacy icons

.changeset/upset-llamas-matter.md

@@ -0,0 +1,5 @@
+---
+"@frontify/guideline-blocks-settings": patch
+---
+
+refactor(Icons): replace all legacy icons

packages/guideline-blocks-settings/src/components/Attachments/AttachmentItem.tsx

@@ -2,16 +2,19 @@
 
 import { useSortable } from '@dnd-kit/sortable';
 import { type Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';
-import {
-    FOCUS_STYLE,
-    IconDocument24,
-    IconGrabHandle20,
-    IconImage24,
-    IconMusicNote24,
-    IconPlayFrame24,
-} from '@frontify/fondue';
+import { FOCUS_STYLE } from '@frontify/fondue';
 import { LoadingCircle, Dropdown, Button } from '@frontify/fondue/components';
-import { IconArrowCircleUp, IconImageStack, IconPen, IconTrashBin } from '@frontify/fondue/icons';
+import {
+    IconArrowCircleUp,
+    IconImageStack,
+    IconPen,
+    IconTrashBin,
+    IconDocument,
+    IconImage,
+    IconPlayFrame,
+    IconMusicNote,
+    IconGrabHandle,
+} from '@frontify/fondue/icons';
 import { useFocusRing } from '@react-aria/focus';
 import { type MutableRefObject, forwardRef, useEffect, useState } from 'react';
 
@@ -21,13 +24,13 @@ import { type AttachmentItemProps, type SortableAttachmentItemProps } from './ty
 
 const getDecorator = (type: string) => {
     if (type === 'IMAGE') {
-        return <IconImage24 />;
+        return <IconImage size="24" />;
     } else if (type === 'VIDEO') {
-        return <IconPlayFrame24 />;
+        return <IconPlayFrame size="24" />;
     } else if (type === 'AUDIO') {
-        return <IconMusicNote24 />;
+        return <IconMusicNote size="24" />;
     } else {
-        return <IconDocument24 />;
+        return <IconDocument size="24" />;
     }
 };
 
@@ -116,7 +119,7 @@ export const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>
                                 isFocusVisible && 'tw-z-[2]',
                             ])}
                         >
-                            <IconGrabHandle20 />
+                            <IconGrabHandle />
                         </button>
                         <div data-test-id="attachments-actionbar-flyout">
                             <Dropdown.Root

packages/guideline-blocks-settings/src/components/Attachments/AttachmentsButtonTrigger.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
+import { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';
 import { forwardRef } from 'react';
 
 import { joinClassNames } from '../../utilities';
@@ -20,9 +20,9 @@ export const AttachmentsButtonTrigger = forwardRef<HTMLButtonElement, Attachment
             data-test-id="attachments-button-trigger"
             {...props}
         >
-            <IconPaperclip16 />
+            <IconPaperclip size="16" />
             {children}
-            <IconCaretDown12 />
+            <IconCaretDown size="12" />
         </button>
     ),
 );

packages/guideline-blocks-settings/src/components/BlockInjectButton/BlockInjectButton.spec.ct.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { withAppBridgeBlockStubs } from '@frontify/app-bridge';
-import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { IconAdobeCreativeCloud } from '@frontify/fondue/icons';
 
 import { BlockInjectButton } from './BlockInjectButton';
 

packages/guideline-blocks-settings/src/components/BlockInjectButton/BlockInjectButton.tsx

@@ -1,9 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';
-import { IconExclamationMarkTriangle } from '@frontify/fondue';
 import { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';
-import { IconArrowCircleUp, IconImageStack } from '@frontify/fondue/icons';
+import { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';
 import { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 
 import { joinClassNames } from '../../utilities/react/joinClassNames';
@@ -148,7 +147,7 @@ export const BlockInjectButton = ({
                 <LoadingCircle />
             ) : errorMsg ? (
                 <div className=" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium">
-                    <IconExclamationMarkTriangle />
+                    <IconExclamationMarkTriangle size="16" />
                     {errorMsg}
                 </div>
             ) : (

packages/guideline-blocks-settings/src/components/BlockItemWrapper/BlockItemWrapper.spec.ct.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconMagnifier16 } from '@frontify/fondue';
+import { IconMagnifier } from '@frontify/fondue/icons';
 
 import { BlockItemWrapper } from './BlockItemWrapper';
 
@@ -44,8 +44,8 @@ describe('Block Item Wrapper', () => {
         cy.mount(
             <BlockItemWrapper
                 toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, 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,26 +58,26 @@ describe('Block Item Wrapper', () => {
         cy.mount(
             <BlockItemWrapper
                 toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
                     {
                         type: 'menu',
                         items: [
                             [
                                 {
-                                    icon: <IconMagnifier16 />,
+                                    icon: <IconMagnifier />,
                                     onClick: cy.stub(),
                                     title: 'Test title',
                                 },
                             ],
                             [
                                 {
-                                    icon: <IconMagnifier16 />,
+                                    icon: <IconMagnifier />,
                                     onClick: cy.stub(),
                                     title: 'Test title',
                                 },
                                 {
-                                    icon: <IconMagnifier16 />,
+                                    icon: <IconMagnifier />,
                                     onClick: cy.stub(),
                                     title: 'Test title',
                                 },
@@ -99,8 +99,8 @@ describe('Block Item Wrapper', () => {
         cy.mount(
             <BlockItemWrapper
                 toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, 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" />
@@ -115,8 +115,8 @@ describe('Block Item Wrapper', () => {
             <BlockItemWrapper
                 shouldHideComponent={false}
                 toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, 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" />
@@ -130,8 +130,8 @@ describe('Block Item Wrapper', () => {
         cy.mount(
             <BlockItemWrapper
                 toolbarItems={[
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
-                    { type: 'button', icon: <IconMagnifier16 />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
+                    { type: 'button', icon: <IconMagnifier />, onClick: cy.stub(), tooltip: 'Test tooltip' },
                 ]}
                 shouldBeShown
             >

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
+import { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';
 import { forwardRef } from 'react';
 
 import { type AttachmentsTriggerProps } from '../../../Attachments/types';
@@ -14,9 +14,9 @@ export const AttachmentsToolbarButtonTrigger = forwardRef<HTMLButtonElement, Att
             ref={ref}
             {...props}
         >
-            <IconPaperclip16 />
+            <IconPaperclip size="16" />
             {children}
-            <IconCaretDown12 />
+            <IconCaretDown size="12" />
         </BaseToolbarButton>
     ),
 );

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.spec.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { IconAdobeCreativeCloud } from '@frontify/fondue/icons';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -76,14 +76,4 @@ describe('DragHandleToolbarButton', () => {
 
         expect(setActivatorNodeRefStub).toHaveBeenCalled();
     });
-
-    it('should display icon', () => {
-        const { getByTestId } = render(
-            <DragHandleToolbarButton tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} draggableProps={{}} />,
-        );
-
-        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).getElementsByTagName('svg')];
-        expect(icons).toHaveLength(1);
-        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
-    });
 });

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.spec.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { IconAdobeCreativeCloud } from '@frontify/fondue/icons';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -96,25 +96,6 @@ describe('FlyoutToolbarButton', () => {
         await waitFor(() => expect(getByTestId(TOOLTIP_ID)).toBeInTheDocument());
     });
 
-    it('should use supplied icon', () => {
-        const setOpenFlyoutIdsStub = vi.fn();
-
-        const { getByTestId } = render(
-            <MultiFlyoutContextProvider openFlyoutIds={[]} setOpenFlyoutIds={setOpenFlyoutIdsStub}>
-                <FlyoutToolbarButton
-                    flyoutId={TEST_FLYOUT_ID}
-                    icon={<IconAdobeCreativeCloud />}
-                    tooltip={TEST_TOOLTIP}
-                    content="content"
-                />
-            </MultiFlyoutContextProvider>,
-        );
-
-        const icons = [...getByTestId(BUTTON_ID).getElementsByTagName('svg')];
-        expect(icons).toHaveLength(1);
-        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
-    });
-
     it('should disable tooltip and flyout when content is inside drag preview', async () => {
         const { getByTestId, queryByTestId } = render(
             <MultiFlyoutContextProvider openFlyoutIds={[TEST_FLYOUT_ID]} setOpenFlyoutIds={vi.fn()}>

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/MenuToolbarButton.spec.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { IconAdobeCreativeCloud } from '@frontify/fondue/icons';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/Toolbar.spec.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { getAppBridgeBlockStub } from '@frontify/app-bridge';
-import { IconArrowMove16, IconMoveTo, IconTrashBin } from '@frontify/fondue';
+import { IconArrowMove, IconMoveTo, IconTrashBin } from '@frontify/fondue/icons';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
@@ -52,7 +52,7 @@ describe('Toolbar', () => {
         },
         {
             type: 'flyout',
-            icon: <IconArrowMove16 />,
+            icon: <IconArrowMove size="16" />,
             tooltip: 'Move To',
             content: <div>Content</div>,
             flyoutHeader: <div>Fixed Header</div>,

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/ToolbarButton/ToolbarButton.spec.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { IconAdobeCreativeCloud } from '@frontify/fondue/icons';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -19,15 +19,15 @@ describe('ToolbarButton', () => {
     it('should disable tooltip when item is in drag preview context', () => {
         const { queryByTestId } = render(
             <DragPreviewContextProvider isDragPreview>
-                <ToolbarButton onClick={vi.fn()} icon={<IconAdobeCreativeCloud />} />
+                <ToolbarButton onClick={vi.fn()} icon={<IconAdobeCreativeCloud size="16" />} />
             </DragPreviewContextProvider>,
         );
 
         expect(queryByTestId(TOOLTIP_CONTENT)).toBeNull();
     });
 
     it('should show tooltip when item is focused', async () => {
-        const { getByTestId } = render(<ToolbarButton onClick={vi.fn()} icon={<IconAdobeCreativeCloud />} />);
+        const { getByTestId } = render(<ToolbarButton onClick={vi.fn()} icon={<IconAdobeCreativeCloud size="16" />} />);
 
         fireEvent.focus(getByTestId(TOOLBAR_BUTTON_ID));
 
@@ -38,18 +38,12 @@ describe('ToolbarButton', () => {
 
     it('should trigger onClick', () => {
         const onClickStub = vi.fn();
-        const { getByTestId } = render(<ToolbarButton onClick={onClickStub} icon={<IconAdobeCreativeCloud />} />);
+        const { getByTestId } = render(
+            <ToolbarButton onClick={onClickStub} icon={<IconAdobeCreativeCloud size="16" />} />,
+        );
 
         fireEvent.click(getByTestId(TOOLBAR_BUTTON_ID));
 
         expect(onClickStub).toHaveBeenCalledOnce();
     });
-
-    it('should display icon', () => {
-        const { getByTestId } = render(<ToolbarButton onClick={vi.fn()} icon={<IconAdobeCreativeCloud />} />);
-
-        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).getElementsByTagName('svg')];
-        expect(icons).toHaveLength(1);
-        expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
-    });
 });

packages/guideline-blocks-settings/src/components/DownloadButton/DownloadButton.tsx

@@ -1,7 +1,8 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { FOCUS_STYLE, IconArrowCircleDown16 } from '@frontify/fondue';
+import { FOCUS_STYLE } from '@frontify/fondue';
 import { Tooltip } from '@frontify/fondue/components';
+import { IconArrowCircleDown } from '@frontify/fondue/icons';
 import { useFocusRing } from '@react-aria/focus';
 
 import { joinClassNames } from '../../utilities';
@@ -24,7 +25,7 @@ export const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) =
                     data-test-id="download-button"
                 >
                     <span 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 />
+                        <IconArrowCircleDown size="16" />
                     </span>
                 </button>
             </Tooltip.Trigger>