@agility/plenum-ui 2.0.0-rc27 → 2.0.0-rc29

package/dist/types/stories/atoms/icons/DynamicIcon.d.ts

@@ -6,10 +6,10 @@ import { TablerIconName } from "./tablerIconNames";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
 export type FAIconName = keyof typeof FA;
-export type UnifiedIconName = TablerIconName;
+export type UnifiedIconName = TablerIconName | IconName | FAIconName;
+export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
-export declare function isHeroIcon(name: UnifiedIconName): boolean;
-export declare function isFAIcon(name: UnifiedIconName): boolean;
+export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
 export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;

package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts

@@ -9,6 +9,7 @@ export interface IItemProp {
     onClick?(): void;
     isEmphasized?: boolean;
     key: React.Key;
+    iconObj?: JSX.Element;
 }
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     items: IItemProp[][];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc27",
+	"version": "2.0.0-rc29",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/atoms/icons/DynamicIcon.stories.ts

@@ -11,13 +11,13 @@ type Story = StoryObj<typeof DynamicIcon>
 
 export const HeroIconSolid: Story = {
 	args: {
-		icon: "IconTrash",
+		icon: "TrashIcon",
 		outline: false
 	}
 }
 export const HeroIconOutline: Story = {
 	args: {
-		icon: "IconTrash",
+		icon: "TrashIcon",
 		outline: true
 	}
 }
@@ -35,7 +35,7 @@ export const TablerIconOutline: Story = {
 }
 export const FAIcon: Story = {
 	args: {
-		icon: "IconBrandGithub",
+		icon: "FaGithub",
 		outline: true
 	}
 }

package/stories/atoms/icons/DynamicIcon.tsx

@@ -2,40 +2,30 @@ import React from "react"
 // TODO: Fix heroicons support
 import * as SolidIcons from "@heroicons/react/solid"
 import * as OutlineIcons from "@heroicons/react/outline"
-import * as TablerIconComponents from "@tabler/icons-react"
 import * as FA from "react-icons/fa"
 import { tablerIconNames, TablerIconName } from "./tablerIconNames"
 import { default as cn } from "classnames"
 
-import TablerIcon from "./TablerIcon"
 import { ClassNameWithAutocomplete } from "@/utils/types"
+import TablerIcon from "./TablerIcon"
 
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
-
 export type FAIconName = keyof typeof FA
 
-export type UnifiedIconName = TablerIconName //HACK to eliminate some icons...|  IconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName | FAIconName
 
-// export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
-// 	return name in SolidIcons || name in OutlineIcons
-// }
+export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
+	return name in SolidIcons || name in OutlineIcons
+}
 
 export function isTablerIcon(name: UnifiedIconName): name is TablerIconName {
 	return tablerIconNames.includes(name as TablerIconName)
 }
 
-export function isHeroIcon(name: UnifiedIconName) {
-	return false
+export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
+	return name in FA
 }
 
-export function isFAIcon(name: UnifiedIconName) {
-	return false
-}
-
-// export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
-// 	return name in FA
-// }
-
 export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName {
 	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
 }
@@ -73,30 +63,30 @@ export const DynamicIcon = ({
 			/>
 		)
 	}
-	//HACK
-	// if (isFAIcon(icon)) {
-	// 	const Icon = FA[icon]
-	// 	return (
-	// 		<i {...{ ...props, className: "flex items-center justify-center" }}>
-	// 			<Icon
-	// 				className={cn(className, {
-	// 					"h-5 w-5 text-gray-600": !className
-	// 				})}
-	// 			/>
-	// 		</i>
-	// 	)
-	// }
-	// if (isHeroIcon(icon)) {
-	// 	const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon]
-	// 	return (
-	// 		<i {...{ ...props, className: "flex items-center justify-center" }}>
-	// 			<Icon
-	// 				className={cn(className, {
-	// 					"h-5 w-5 text-gray-600": !className
-	// 				})}
-	// 			/>
-	// 		</i>
-	// 	)
-	// }
+
+	if (isFAIcon(icon)) {
+		const Icon = FA[icon]
+		return (
+			<i {...{ ...props, className: "flex items-center justify-center" }}>
+				<Icon
+					className={cn(className, {
+						"h-5 w-5 text-gray-600": !className
+					})}
+				/>
+			</i>
+		)
+	}
+	if (isHeroIcon(icon)) {
+		const Icon = outline ? OutlineIcons[icon] : SolidIcons[icon]
+		return (
+			<i {...{ ...props, className: "flex items-center justify-center" }}>
+				<Icon
+					className={cn(className, {
+						"h-5 w-5 text-gray-600": !className
+					})}
+				/>
+			</i>
+		)
+	}
 	return <></>
 }

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -27,6 +27,7 @@ export interface IItemProp {
 	onClick?(): void
 	isEmphasized?: boolean
 	key: React.Key
+	iconObj?: JSX.Element
 }
 
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
@@ -170,7 +171,16 @@ const Dropdown: React.FC<IDropdownProps> = ({
 										<React.Fragment key={`${idx}-list-${id}`}>
 											{itemStack.map(
 												(
-													{ onClick, label, key, isEmphasized, icon, iconPosition, ...rest },
+													{
+														onClick,
+														label,
+														key,
+														isEmphasized,
+														icon,
+														iconPosition,
+														iconObj,
+														...rest
+													},
 													idx
 												) => {
 													const active = activeItem && activeItem === key
@@ -217,6 +227,12 @@ const Dropdown: React.FC<IDropdownProps> = ({
 																		iconSpacingClassname
 																	)}
 																>
+																	{iconObj &&
+																		(iconPosition === "leading" ||
+																			iconPosition === undefined) && (
+																			<>{iconObj}</>
+																		)}
+
 																	{icon &&
 																		(iconPosition === "leading" ||
 																			iconPosition === undefined) &&
@@ -247,6 +263,10 @@ const Dropdown: React.FC<IDropdownProps> = ({
 																			/>
 																		))}
 																	<div className="whitespace-nowrap">{label}</div>
+																	{iconObj && iconPosition === "trailing" && (
+																		<>{iconObj}</>
+																	)}
+
 																	{icon &&
 																		iconPosition === "trailing" &&
 																		(typeof icon === "string" ? (