feat: make use of Icon component for Link with iconRight

aragon · Jan 24, 2024 · 6827b52 · 6827b52
1 parent f769a67
commit 6827b52
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/src/components/icon/iconList.ts b/src/components/icon/iconList.ts
@@ -61,7 +61,7 @@ import WysiwygListOrdered from '../../assets/icons/wysiwyg-list-ordered.svg';
 import WysiwygListUnordered from '../../assets/icons/wysiwyg-list-unordered.svg';
 import { IconType } from './iconType';
 
-type IconComponent = React.FC<SVGProps<SVGSVGElement>>;
+export type IconComponent = React.FC<SVGProps<SVGSVGElement>>;
 
 export const iconList: Record<IconType, IconComponent> = {
     [IconType.ADD]: Add,

diff --git a/src/components/link/link.stories.tsx b/src/components/link/link.stories.tsx
@@ -41,7 +41,7 @@ export const Primary: Story = {
         variant: 'primary',
     },
     render: ({ showIconRight, ...props }) => (
-        <Link {...props} iconRight={showIconRight ? IconType.APP_GOVERNANCE : undefined} />
+        <Link {...props} iconRight={showIconRight ? IconType.UPPER_RIGHT_ARROW : undefined} />
     ),
 };
 

diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import { iconList } from '../icon/iconList';
+import { Icon } from '../icon';
 import type { ILinkProps, LinkVariant } from './link.api';
 
 export const variantToLabelClassNames: Record<LinkVariant, string[]> = {
@@ -41,8 +41,6 @@ export const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>(
             disabled ? disabledStyle : variantToLabelClassNames[variant],
             'test-focus',
         );
-        const IconComponent = iconRight ? iconList[iconRight] : null;
-        const iconSize: React.CSSProperties = { height: iconHeight ? `${iconHeight}px` : 'auto', width: 'auto' };
         const descriptionClassName = classNames('truncate', disabled ? disabledStyle : 'text-neutral-500');
 
         return (
@@ -58,7 +56,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>(
             >
                 <div className="flex items-center gap-x-2 truncate">
                     {label}
-                    {IconComponent && <IconComponent style={iconSize} />}
+                    {iconRight && <Icon icon={iconRight} size="sm" />}
                 </div>
                 {description && <p className={descriptionClassName}>{description}</p>}
             </a>