@agility/plenum-ui 2.1.5 → 2.1.7-rc1

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -26,6 +26,7 @@ export interface IButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonH
     isLoading?: boolean;
     className?: string;
     iconObj?: React.ReactNode;
+    iconClassName?: string;
 }
 declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

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

@@ -32,6 +32,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     onFocus?: () => void;
     onBlur?: () => void;
+    showOnHover?: boolean;
     showFloatingArrow?: boolean;
 }
 export declare const defaultClassNames: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.1.5",
+	"version": "2.1.7rc1",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/atoms/buttons/Button/Button.tsx

@@ -33,6 +33,7 @@ export interface IButtonProps
 	isLoading?: boolean
 	className?: string
 	iconObj?: React.ReactNode
+	iconClassName?: string
 }
 /**
  * Primary UI component for user interaction
@@ -50,16 +51,22 @@ const _Button = (
 		asLink,
 		isLoading = false,
 		className,
+		iconClassName,
 		...props
 	}: IButtonProps,
 	ref: React.LegacyRef<HTMLButtonElement>
 ) => {
-	const iconStyles = cn(
+	let iconStyles = cn(
 		{ "text-white h-5 w-5 stroke-[1.5]": actionType === "primary" || actionType === "danger" },
 		{ "text-purple-700 h-5 w-5 stroke-[1.5]": actionType === "secondary" },
-		{ "text-gray-400  h-5 w-5 stroke-[1.5]": actionType === "alternative" },
+		{ "text-gray-400 h-5 w-5 stroke-[1.5]": actionType === "alternative" },
 		{ "text-transparent-black-40 h-5 w-5 stroke-[1.5]": actionType === "warning" }
 	)
+
+	if (iconClassName) {
+		iconStyles = cn(iconStyles, iconClassName)
+	}
+
 	const loaderColors = cn(
 		{ "border-r-white": actionType === "primary" },
 		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },

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

@@ -76,6 +76,13 @@ export const WithIcons: Story = {
 	}
 }
 
+export const ShowOnHover: Story = {
+	args: {
+		...defaultArgs,
+		showOnHover: true
+	}
+}
+
 export const WithFloatingArrow: Story = {
 	args: {
 		...defaultArgs,
@@ -83,4 +90,5 @@ export const WithFloatingArrow: Story = {
 	}
 }
 
+
 export default meta

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -21,8 +21,7 @@ import {
 } from "@floating-ui/react"
 
 import { ClassNameWithAutocomplete } from "utils/types"
-import { DynamicIcon, IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons"
-import { list } from "postcss"
+import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
 
 export interface IItemProp {
 	//Don't think this needs to extend HtmlButton... extends HTMLAttributes<HTMLButtonElement> {
@@ -56,6 +55,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	disabled?: boolean
 	onFocus?: () => void
 	onBlur?: () => void
+	showOnHover?: boolean
 	showFloatingArrow?: boolean
 }
 export const defaultClassNames = {
@@ -89,6 +89,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	onFocus,
 	onBlur,
 	showFloatingArrow = false,
+	showOnHover = false,
 	...props
 }: IDropdownProps): JSX.Element | null => {
 	const [isOpen, setIsOpen] = useState(false)
@@ -318,6 +319,9 @@ const Dropdown: React.FC<IDropdownProps> = ({
 					onClick: () => {
 						setIsOpen(!isOpen)
 					},
+					onMouseOver: () => {
+						showOnHover && setIsOpen(true)
+					},
 					type: "button",
 					disabled: disabled,
 					...getReferenceProps()
@@ -349,6 +353,9 @@ const Dropdown: React.FC<IDropdownProps> = ({
 								className={cn(defaultClassNames.itemsClassname, itemsClassname)}
 								ref={refs.setFloating}
 								aria-labelledby={label}
+								onMouseLeave={() => { 
+									showOnHover && setIsOpen(false) 
+								}}
 								style={{
 									position: context.strategy,
 									top: Math.round(context.y ?? 0),