Fixed icons

mia-platform · Jul 20, 2024 · 0b6bcf3 · 0b6bcf3
1 parent c94627a
commit 0b6bcf3
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 13 deletions.
diff --git a/src/components/Breadcrumb/Breadcrumb.Collapsed.tsx b/src/components/Breadcrumb/Breadcrumb.Collapsed.tsx
@@ -19,6 +19,7 @@
 import { Dropdown, Menu, Skeleton } from 'antd'
 import { ReactElement, useMemo } from 'react'
 import { ItemType } from 'antd/es/menu/hooks/useItems'
+import { PiDotsThree } from 'react-icons/pi'
 import classNames from 'classnames'
 
 import { BodyS } from '../Typography/BodyX/BodyS'
@@ -81,7 +82,7 @@ export const BreadcrumbCollapsed = ({ isLoading, getDropdownContainer, items }:
             className={classNames([styles.breadcrumbItemButton, styles.breadcrumbItemButtonConnected])}
             style={{ width: BREADCRUMB_COLLAPSED_WIDTH }}
           >
-            <Icon name="PiDotsThree" size={16} />
+            <Icon component={PiDotsThree} size={16} />
           </div>
         </Dropdown>
         <BreadcrumbSeparator />

diff --git a/src/components/Breadcrumb/Breadcrumb.Dropdown.tsx b/src/components/Breadcrumb/Breadcrumb.Dropdown.tsx
@@ -19,6 +19,7 @@
 import { Input, Menu } from 'antd'
 import { ReactElement, useMemo, useState } from 'react'
 import { ItemType } from 'antd/es/menu/hooks/useItems'
+import { PiMagnifyingGlass } from 'react-icons/pi'
 import { debounce } from 'lodash-es'
 
 import { BreadcrumbItemMenu, BreadcrumbItemMenuItem, BreadcrumbItemType, SearchOptions } from './Breadcrumb.types'
@@ -69,7 +70,7 @@ export const BreadcrumbItemMenuDropdown = ({ item, setOpen }: Props): ReactEleme
               autoFocus
               placeholder={getSearchOption(item.menu?.search, 'placeholder') ?? 'Search...'}
               // @ts-expect-error size 12 is not accepted by Icon component but supported by underling SVG
-              suffix={<Icon name="PiMagnifyingGlass" size={12} />}
+              suffix={<Icon component={PiMagnifyingGlass} size={12} />}
               onChange={(event) => {
                 const onChange = getSearchOption(item.menu?.search, 'onChange')
 

diff --git a/src/components/Breadcrumb/Breadcrumb.Separator.tsx b/src/components/Breadcrumb/Breadcrumb.Separator.tsx
@@ -16,6 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { PiCaretRight } from 'react-icons/pi'
 import { ReactElement } from 'react'
 
 import { Icon } from '../Icon'
@@ -34,7 +35,7 @@ export const BreadcrumbSeparator = (): ReactElement => {
 
   return (
     <div style={separatorStyle}>
-      <Icon color={palette?.common?.grey?.[600]} name="PiCaretRight" size={BREADCRUMB_SEPARATOR_SIZE} />
+      <Icon color={palette?.common?.grey?.[600]} component={PiCaretRight} size={BREADCRUMB_SEPARATOR_SIZE} />
     </div>
   )
 }
diff --git a/src/components/Breadcrumb/Breadcrumb.mocks.tsx b/src/components/Breadcrumb/Breadcrumb.mocks.tsx
@@ -16,29 +16,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { PiBasket, PiCircleHalfTiltLight, PiShoppingCart } from 'react-icons/pi'
 import { action } from '@storybook/addon-actions'
 
 import { BreadcrumbProps } from './Breadcrumb.props'
 import { Icon } from '../Icon'
 
-export const breadcrumbIcon = <Icon color="black" name="PiCircleHalfTiltLight" size={16} />
+export const breadcrumbIcon = <Icon color="black" component={PiCircleHalfTiltLight} size={16} />
 export const breadcrumbLabel = 'Text'
 
 export const defaultProps: BreadcrumbProps = {
   items: [
     {
       onClick: action('click'),
       label: 'Orders',
-      icon: <Icon color="black" name="PiShoppingCart" size={16} />,
+      icon: <Icon color="black" component={PiShoppingCart} size={16} />,
     },
     {
       menu: {
         onClick: action('click'),
         activeKey: '1',
         items: [
-          { key: '1', label: 'Order #1', icon: <Icon color="black" name="PiBasket" size={16} /> },
-          { key: '2', label: 'Order #2', icon: <Icon color="black" name="PiBasket" size={16} /> },
-          { key: '3', label: 'Order #3', icon: <Icon color="black" name="PiBasket" size={16} /> },
+          { key: '1', label: 'Order #1', icon: <Icon color="black" component={PiBasket} size={16} /> },
+          { key: '2', label: 'Order #2', icon: <Icon color="black" component={PiBasket} size={16} /> },
+          { key: '3', label: 'Order #3', icon: <Icon color="black" component={PiBasket} size={16} /> },
         ],
       },
     },

diff --git a/src/hooks/useDrawer/useDrawer.test.tsx b/src/hooks/useDrawer/useDrawer.test.tsx
@@ -16,9 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { act } from 'react'
-
-import { renderHook } from '../../test-utils'
+import { act, renderHook } from '../../test-utils'
 import { useDrawer } from './useDrawer'
 
 describe('useDrawer', () => {

diff --git a/src/hooks/useModal/useModal.test.tsx b/src/hooks/useModal/useModal.test.tsx
@@ -16,10 +16,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ReactNode, act, useCallback, useState } from 'react'
-import { render, renderHook, screen, waitFor } from '@testing-library/react'
+import { ReactNode, useCallback, useState } from 'react'
 import userEvent from '@testing-library/user-event'
 
+import { act, render, renderHook, screen, waitFor } from '../../test-utils'
 import { Button } from '../..'
 import { useModal } from '.'