refactor(icons): replace fa icons [EE-4459] (#7907)

refactor(icons): remove fontawesome EE-4459

refactor(icon) replace feather with lucide EE-4472

app/react/components/buttons/AddButton.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { PlusCircle } from 'lucide-react';
 
 import { Icon } from '@/react/components/Icon';
 
@@ -27,7 +28,7 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
       onClick={onClick}
       disabled={disabled}
     >
-      <Icon icon="plus-circle" feather />
+      <Icon icon={PlusCircle} />
       {label}
     </button>
   );

app/react/components/buttons/Button.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { PropsWithChildren } from 'react';
-import { Download } from 'react-feather';
+import { Download } from 'lucide-react';
 
 import { Button, Props } from './Button';
 

app/react/components/buttons/Button.tsx

@@ -27,7 +27,6 @@ type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface Props extends AriaAttributes, AutomationTestingProps {
   icon?: ReactNode | ComponentType<unknown>;
-  featherIcon?: boolean;
 
   color?: Color;
   size?: Size;
@@ -47,7 +46,6 @@ export function Button({
   onClick,
   title,
   icon,
-  featherIcon,
   children,
 
   ...ariaProps
@@ -64,12 +62,7 @@ export function Button({
       {...ariaProps}
     >
       {icon && (
-        <Icon
-          icon={icon}
-          size={getIconSize(size)}
-          className="inline-flex"
-          feather={featherIcon}
-        />
+        <Icon icon={icon} size={getIconSize(size)} className="inline-flex" />
       )}
       {children}
     </button>

app/react/components/buttons/ButtonGroup.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { PropsWithChildren } from 'react';
+import { Play, RefreshCw, Square, Trash2 } from 'lucide-react';
 
 import { Button } from './Button';
 import { ButtonGroup, Props } from './ButtonGroup';
@@ -14,28 +15,19 @@ function Template({
 }: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
   return (
     <ButtonGroup size={size}>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" onClick={() => {}}>
         Start
       </Button>
-      <Button color="danger" onClick={() => {}}>
-        <i className="fa fa-stop space-right" aria-hidden="true" />
+      <Button icon={Square} color="danger" onClick={() => {}}>
         Stop
       </Button>
-      <Button color="danger" onClick={() => {}}>
-        <i className="fa fa-bomb space-right" aria-hidden="true" />
-        Kill
-      </Button>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-sync space-right" aria-hidden="true" />
+      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
         Restart
       </Button>
-      <Button color="primary" disabled onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" disabled onClick={() => {}}>
         Resume
       </Button>
-      <Button color="danger" onClick={() => {}}>
-        <i className="fa fa-trash-alt space-right" aria-hidden="true" />
+      <Button icon={Trash2} color="danger" onClick={() => {}}>
         Remove
       </Button>
     </ButtonGroup>
@@ -50,20 +42,16 @@ Primary.args = {
 export function Xsmall() {
   return (
     <ButtonGroup size="xsmall">
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" onClick={() => {}}>
         Start
       </Button>
-      <Button color="danger" onClick={() => {}}>
-        <i className="fa fa-stop space-right" aria-hidden="true" />
+      <Button icon={Square} color="danger" onClick={() => {}}>
         Stop
       </Button>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" onClick={() => {}}>
         Start
       </Button>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-sync space-right" aria-hidden="true" />
+      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
         Restart
       </Button>
     </ButtonGroup>
@@ -73,20 +61,16 @@ export function Xsmall() {
 export function Small() {
   return (
     <ButtonGroup size="small">
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" onClick={() => {}}>
         Start
       </Button>
-      <Button color="danger" onClick={() => {}}>
-        <i className="fa fa-stop space-right" aria-hidden="true" />
+      <Button icon={Square} color="danger" onClick={() => {}}>
         Stop
       </Button>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" onClick={() => {}}>
         Start
       </Button>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-sync space-right" aria-hidden="true" />
+      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
         Restart
       </Button>
     </ButtonGroup>
@@ -96,20 +80,16 @@ export function Small() {
 export function Large() {
   return (
     <ButtonGroup size="large">
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="primary" onClick={() => {}}>
         Start
       </Button>
-      <Button color="danger" onClick={() => {}}>
-        <i className="fa fa-stop space-right" aria-hidden="true" />
+      <Button icon={Square} color="danger" onClick={() => {}}>
         Stop
       </Button>
-      <Button color="light" onClick={() => {}}>
-        <i className="fa fa-play space-right" aria-hidden="true" />
+      <Button icon={Play} color="light" onClick={() => {}}>
         Start
       </Button>
-      <Button color="primary" onClick={() => {}}>
-        <i className="fa fa-sync space-right" aria-hidden="true" />
+      <Button icon={RefreshCw} color="primary" onClick={() => {}}>
         Restart
       </Button>
     </ButtonGroup>

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
+import { Check, Copy } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
 
@@ -33,7 +34,7 @@ export function CopyButton({
         title="Copy Value"
         type="button"
       >
-        <Icon icon="copy" feather />
+        <Icon icon={Copy} />
         {children}
       </Button>
 
@@ -45,7 +46,7 @@ export function CopyButton({
           'vertical-center'
         )}
       >
-        <Icon icon="check" feather />
+        <Icon icon={Check} />
         {displayText && <span className="space-left">{displayText}</span>}
       </span>
     </div>

app/react/components/buttons/LoadingButton.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
+import { Download } from 'lucide-react';
 
 import { LoadingButton } from './LoadingButton';
 
@@ -14,8 +15,12 @@ interface Args {
 
 function Template({ loadingText, isLoading }: Args) {
   return (
-    <LoadingButton loadingText={loadingText} isLoading={isLoading}>
-      <i className="fa fa-download" aria-hidden="true" /> Download
+    <LoadingButton
+      loadingText={loadingText}
+      isLoading={isLoading}
+      icon={Download}
+    >
+      Download
     </LoadingButton>
   );
 }
@@ -29,8 +34,8 @@ export const Example = Template.bind({});
 
 export function IsLoading() {
   return (
-    <LoadingButton loadingText="loading" isLoading>
-      <i className="fa fa-download" aria-hidden="true" /> Download
+    <LoadingButton loadingText="loading" isLoading icon={Download}>
+      Download
     </LoadingButton>
   );
 }

app/react/components/buttons/LoadingButton.test.tsx

@@ -6,18 +6,18 @@ test('when isLoading is true should show spinner and loading text', async () =>
   const loadingText = 'loading';
   const children = 'not visible';
 
-  const { findByLabelText, queryByText, findByText } = render(
+  const { queryByText, findByText, container } = render(
     <LoadingButton loadingText={loadingText} isLoading>
       {children}
     </LoadingButton>
   );
 
+  const spinner = container.querySelector('svg');
+  expect(spinner).toBeVisible();
+
   const buttonLabel = queryByText(children);
   expect(buttonLabel).toBeNull();
 
-  const spinner = await findByLabelText('loading');
-  expect(spinner).toBeVisible();
-
   const loadingTextElem = await findByText(loadingText);
   expect(loadingTextElem).toBeVisible();
 });
@@ -26,7 +26,7 @@ test('should show children when false', async () => {
   const loadingText = 'loading';
   const children = 'visible';
 
-  const { queryByLabelText, queryByText } = render(
+  const { queryByText, container } = render(
     <LoadingButton loadingText={loadingText} isLoading={false}>
       {children}
     </LoadingButton>
@@ -35,7 +35,7 @@ test('should show children when false', async () => {
   const buttonLabel = queryByText(children);
   expect(buttonLabel).toBeVisible();
 
-  const spinner = queryByLabelText('loading');
+  const spinner = container.querySelector('svg');
   expect(spinner).toBeNull();
 
   const loadingTextElem = queryByText(loadingText);

app/react/components/buttons/LoadingButton.tsx

@@ -1,4 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Loader2 } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
 
 import { type Props as ButtonProps, Button } from './Button';
 
@@ -13,6 +16,7 @@ export function LoadingButton({
   disabled,
   type = 'submit',
   children,
+  icon,
   ...buttonProps
 }: PropsWithChildren<Props>) {
   return (
@@ -21,19 +25,22 @@ export function LoadingButton({
       {...buttonProps}
       type={type}
       disabled={disabled || isLoading}
+      icon={loadingButtonIcon(isLoading, icon)}
     >
-      {isLoading ? (
-        <>
-          <i
-            className="fa fa-circle-notch fa-spin space-right"
-            aria-label="loading"
-            aria-hidden="true"
-          />
-          {loadingText}
-        </>
-      ) : (
-        children
-      )}
+      {isLoading ? loadingText : children}
     </Button>
   );
 }
+
+function loadingButtonIcon(isLoading: boolean, defaultIcon: ReactNode) {
+  if (!isLoading) {
+    return defaultIcon;
+  }
+  return (
+    <Icon
+      icon={Loader2}
+      className="animate-spin-slow ml-1"
+      aria-label="loading"
+    />
+  );
+}