feat: Update Dropdown component to use structured icon props

- Refactor Dropdown component to accept icon properties as an object with iconName, className, and dataTestId
- Update related components and stories to reflect the new icon structure
- Bump package version to 1.0.212

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.211",
+  "version": "1.0.212",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Dropdown/DefaultDropdown.tsx

@@ -1,5 +1,7 @@
 import { FC } from "react";
 
+import Icon from "Components/Icon";
+
 import { IDefaultDropdownProps, IDropdownListItem } from "./types";
 
 const DropdownListItem: FC<IDropdownListItem> = ({
@@ -17,7 +19,15 @@ const DropdownListItem: FC<IDropdownListItem> = ({
       }}
     >
       <div className='yl:flex yl:items-center'>
-        {icon && <span className='yl:mr-2'>{icon}</span>}
+        {icon && (
+          <span className='yl:mr-2'>
+            <Icon
+              iconName={icon.iconName}
+              className={icon.className}
+              dataTestId={icon.dataTestId}
+            />
+          </span>
+        )}
         {value}
       </div>
     </li>
@@ -29,7 +39,15 @@ const DefaultDropdown: FC<IDefaultDropdownProps> = ({ options, setIsOpen }) => {
     <ul className='yl:p-2 yl:text-text'>
       {options.map((option, index) => (
         <DropdownListItem
-          icon={option.icon}
+          icon={
+            option.icon
+              ? {
+                  iconName: option.icon?.iconName,
+                  className: option.icon?.className,
+                  dataTestId: option.icon?.dataTestId
+                }
+              : undefined
+          }
           value={option.value}
           key={`${option.value}-${index}`}
           onClick={option.onClick}

src/Components/Dropdown/Dropdown.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react";
 
-import Icon from "Components/Icon";
-
 import Dropdown from "./";
 import { IDropdownProps } from "./types";
 
@@ -23,7 +21,10 @@ DefaultDropdown.args = {
     {
       value: "foo",
       onClick: () => console.log("clicked"),
-      icon: <Icon iconName='IconShare' className='yl:w-4' />
+      icon: {
+        iconName: "IconShare",
+        className: "yl:w-4"
+      }
     }
   ]
 };

src/Components/Dropdown/Dropdown.test.tsx

@@ -4,8 +4,6 @@ import { useOnClickOutside } from "Hooks/useClickOutside";
 import { RefObject, useRef } from "react";
 import { vi } from "vitest";
 
-import Icon from "Components/Icon";
-
 import Dropdown from "./";
 
 describe("Dropdown Component", () => {
@@ -37,7 +35,10 @@ describe("Dropdown Component", () => {
         options={[
           {
             value: "foo",
-            icon: <Icon iconName='IconShare' className='yl:w-4' />
+            icon: {
+              iconName: "IconShare",
+              className: "yl:w-4"
+            }
           }
         ]}
       />

src/Components/Dropdown/types.ts

@@ -1,10 +1,16 @@
 import { OptionsGeneric } from "@popperjs/core";
 import { PopperOffsetsModifier } from "@popperjs/core/lib/modifiers/popperOffsets";
-import { MouseEvent, ReactNode } from "react";
+import { MouseEvent } from "react";
 import { Placement } from "tippy.js";
 
+import { IconName } from "Components/Icons/types";
+
 export interface IDropdownListItem {
-  icon?: ReactNode;
+  icon?: {
+    iconName: IconName;
+    className?: string;
+    dataTestId?: string;
+  };
   value?: string;
   onClick?: (e: MouseEvent, value: string) => void;
   setIsOpen: (isOpen: boolean) => void;
@@ -18,7 +24,11 @@ export interface IDropdownProps {
   popperOptions?: Partial<OptionsGeneric<PopperOffsetsModifier>>;
   placement?: Placement;
   options?: {
-    icon?: React.ReactNode;
+    icon?: {
+      iconName: IconName;
+      className?: string;
+      dataTestId?: string;
+    };
     value: string;
     onClick?: (e: MouseEvent, value: string) => void;
   }[];
@@ -27,7 +37,11 @@ export interface IDropdownProps {
 export interface IDefaultDropdownProps {
   setIsOpen: (isOpen: boolean) => void;
   options: {
-    icon?: ReactNode;
+    icon?: {
+      iconName: IconName;
+      className?: string;
+      dataTestId?: string;
+    };
     value: string;
     onClick?: (e: MouseEvent, value: string) => void;
   }[];

src/Components/ItemActions/ItemActions.stories.tsx

@@ -12,3 +12,24 @@ export const Default = () => (
     }}
   />
 );
+
+export const WithCustomOptions = () => (
+  <ItemActions
+    item={{ id: "1", name: "Item 1" }}
+    options={[
+      {
+        icon: {
+          iconName: "Edit1Solid",
+          className: "yl:w-4"
+        },
+        value: "Edit",
+        onClick: () => {
+          alert("Share");
+        }
+      }
+    ]}
+    onAction={action => {
+      alert(action);
+    }}
+  />
+);

src/Components/ItemActions/index.tsx

@@ -1,58 +1,65 @@
-import { type ReactElement } from "react";
+import { MouseEvent, type ReactElement } from "react";
 import { Placement } from "tippy.js";
 
 import Dropdown from "Components/Dropdown";
 import Icon from "Components/Icon";
+import { IconName } from "Components/Icons/types";
 
 import { ItemActionType } from "./types";
 
 const ItemActions = <T,>({
   item,
   onAction,
-  placement
+  placement,
+  options = [
+    {
+      icon: {
+        iconName: "IconEdit",
+        className: "yl:w-4",
+        dataTestId: "icon-iconedit"
+      },
+      value: "edit",
+      onClick: (e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        onAction?.(ItemActionType.Edit, item);
+      }
+    },
+
+    {
+      icon: {
+        iconName: "IconDeleteBin",
+        className: "yl:w-4",
+        dataTestId: "icon-icondeletebin"
+      },
+      value: "delete",
+      onClick: (e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        onAction?.(ItemActionType.Delete, item);
+      }
+    }
+  ]
 }: {
   item: T;
+  options?: {
+    icon: {
+      iconName: IconName;
+      className?: string;
+      dataTestId?: string;
+    };
+    value: string;
+    onClick: (e: MouseEvent) => void;
+  }[];
   onAction?: (action: ItemActionType, item: T) => void;
   placement?: Placement;
 }): ReactElement => {
   return (
     <Dropdown
       placement={placement}
-      options={[
-        {
-          icon: (
-            <Icon
-              iconName='IconEdit'
-              className='yl:w-4'
-              data-testid='icon-iconedit'
-            />
-          ),
-          value: "edit",
-          onClick: e => {
-            e.stopPropagation();
-            e.preventDefault();
-
-            onAction?.(ItemActionType.Edit, item);
-          }
-        },
-
-        {
-          icon: (
-            <Icon
-              iconName='IconDeleteBin'
-              className='yl:w-4'
-              data-testid='icon-icondeletebin'
-            />
-          ),
-          value: "delete",
-          onClick: e => {
-            e.stopPropagation();
-            e.preventDefault();
-
-            onAction?.(ItemActionType.Delete, item);
-          }
-        }
-      ]}
+      options={options}
       buttonContent={
         <Icon
           iconName='IconDots'