@agility/plenum-ui 2.0.0-rc4 → 2.0.0-rc40

package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx

@@ -2,74 +2,76 @@ import type { Meta, StoryObj } from "@storybook/react"
 import ButtonDropdown from "."
 import { IItemProp } from "../DropdownComponent"
 
-
 const meta: Meta<typeof ButtonDropdown> = {
 	title: "Design System/Organisms/Button Dropdown",
 	component: ButtonDropdown,
 	tags: ["autodocs"],
 	argTypes: {}
 }
- const dropdownDataWithIcons: IItemProp[][] = [
-		[
-			{
-				icon: {
-					name: "IconClipboardCopy",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "Copy",
-				label: "Copy",
-				onClick: () => {
-					console.log("Copy action")
-				}
+const dropdownDataWithIcons: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconCopy"
+
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			iconPosition: "leading",
+			key: "Copy",
+			label: "Copy The Thing",
+			onClick: () => {
+				console.log("Copy action")
 			}
-		],
-		[
-			{
-				icon: {
-					name: "IconFolderPlus",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "Add to Batch",
-				label: "Add to Batch",
-				onClick: () => {
-					console.log("Add to Batch action")
-				}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconFolderPlus"
+				// name: "IconFolderPlus",
+				// className: "h-5 w-5",
+				// outline: false
 			},
-			{
-				icon: {
-					name: "IconEye",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "View Batch",
-				label: "View Batch",
-				onClick: () => {
-					console.log("View Batch action")
-				}
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
 			}
-		],
-		[
-			{
-				icon: {
-					name: "IconTrash",
-					pos: "leading",
-					className: "h-5 w-5",
-					outline: false
-				},
-				key: "Delete",
-				label: "Delete",
-				onClick: () => {
-					console.log("Delete action")
-				},
-				isEmphasized: true
+		},
+		{
+			icon: {
+				icon: "IconEye",
+				//pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
 			}
-		]
- ]
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconTrash"
+
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Delete",
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true
+		}
+	]
+]
 
 export default meta
 type Story = StoryObj<typeof ButtonDropdown>
@@ -85,6 +87,11 @@ export const Primary: Story = {
 			label: "Dropdown",
 			id: "dropdown-primary"
 		},
+		offsetOptions: {
+			crossAxis: 0,
+			mainAxis: 4, //up/down
+			alignmentAxis: 0 //left/right
+		},
 		placement: "bottom-end"
 	}
 }

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -15,22 +15,7 @@ export interface IButtonDropdownProps {
 /**
  * Primary UI component for user interaction
  */
-const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
-	const dropDownClasses: IDropdownProps["classNames"] = {
-		...defaultClassNames,
-		groupClassname: cn(
-			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
-			button.actionType === "primary"
-				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
-				: "",
-			button.actionType === "secondary"
-				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
-				: "",
-			button.actionType === "alternative"
-				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
-				: ""
-		)
-	}
+const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement = "bottom-end", offsetOptions }) => {
 	return (
 		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
 			<Button
@@ -45,7 +30,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 			<div
 				className={cn(
 					"w-[1px] rt",
-					button.actionType === "primary" ? "bg-purple-700" : "",
+					button.actionType === "primary" ? "bg-purple-700 " : "",
 					button.actionType === "secondary" ? "bg-purple-200" : "",
 					button.actionType === "alternative" ? "bg-gray-300" : ""
 				)}
@@ -56,7 +41,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 					CustomDropdownTrigger: (
 						<DynamicIcon
 							{...{
-								icon: "ChevronDownIcon",
+								icon: "IconChevronDown",
 								className: cn("h-5 w-5", {
 									"text-white": button.actionType === "primary",
 									"text-purple-700": button.actionType === "secondary",
@@ -65,11 +50,31 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 							}}
 						/>
 					),
-					classNames: dropDownClasses,
+					buttonClassname: cn(
+						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						button.actionType === "primary"
+							? cn(
+									"border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:bg-purple-800 fill-white",
+									"disabled:bg-purple-400 disabled:text-white disabled:hover:none disabled:active:bg-purple-400 disabled:border-purple-400"
+							  )
+							: "",
+						button.actionType === "secondary"
+							? cn(
+									"border-purple-50 bg-purple-50 text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:border-purple-300 active:bg-purple-300 fill-purple-700",
+									"disabled:bg-purple-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-purple-50 disabled:border-purple-50"
+							  )
+							: "",
+						button.actionType === "alternative"
+							? cn(
+									"border-gray-300 bg-white text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+									"disabled:bg-gray-100 disabled:text-gray-500 disabled:hover:none disabled:active:bg-gray-100 disabled:border-gray-300"
+							  )
+							: ""
+					),
 					offsetOptions: offsetOptions ?? {
 						crossAxis: 0,
-						mainAxis: 5, //up/down
-						alignmentAxis: -10 //left/right
+						mainAxis: 4, //up/down
+						alignmentAxis: 0 //left/right
 					},
 					placement
 				}}

package/stories/organisms/DropdownComponent/Dropdown.stories.tsx

@@ -13,12 +13,12 @@ const meta: Meta<typeof Dropdown> = {
 type Story = StoryObj<typeof Dropdown>
 
 const IconElement = () => (
-	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"DotsVerticalIcon"} />
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"IconDotsVertical"} />
 )
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],
 	label: "Dropdown",
-	classNames: defaultClassNames,
+
 	placement: "bottom-end"
 }
 export const WithLabel: Story = {