@agility/plenum-ui 2.1.20 → 2.1.22

package/dist/tailwind.css

@@ -79280,9 +79280,9 @@ select {
   border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
 }
 
-.disabled\:bg-gray-100:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+.disabled\:\!bg-gray-50:disabled {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
 }
 
 .disabled\:bg-gray-50:disabled {
@@ -79325,11 +79325,6 @@ select {
   color: rgb(249 250 251 / var(--tw-text-opacity, 1));
 }
 
-.disabled\:text-gray-500:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
-}
-
 .disabled\:text-purple-300:disabled {
   --tw-text-opacity: 1;
   color: rgb(188 153 238 / var(--tw-text-opacity, 1));

package/dist/types/stories/atoms/Avatar/Avatar.d.ts

@@ -20,6 +20,7 @@ export interface IAvatarProps {
      * avatar img alt
      */
     alt?: string;
+    draggable?: boolean;
 }
 /**
  * Avatar component that shows profile image or name initials of the user

package/package.json

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

package/stories/atoms/Avatar/Avatar.tsx

@@ -1,33 +1,41 @@
-import React, { FC, useMemo } from "react"
-import { default as cn } from "classnames"
+import React, { FC, useMemo } from "react";
+import { default as cn } from "classnames";
 // import Image from "next/image"
 export interface IAvatarProps {
 	/**
 	 * source url for the avatar
 	 */
-	src?: string
+	src?: string;
 	/**
 	 * Initials we use as fallback if no src is passed
 	 */
-	initials?: string
+	initials?: string;
 	/**
 	 * optional status
 	 */
-	status?: "offline" | "online" | "busy"
+	status?: "offline" | "online" | "busy";
 	/**
 	 * avatar picture size (also affects status indicator)
 	 */
-	size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl"
+	size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
 	/**
 	 * avatar img alt
 	 */
-	alt?: string
+	alt?: string;
+	draggable?: boolean;
 }
 
 /**
  * Avatar component that shows profile image or name initials of the user
  */
-const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar image", initials }: IAvatarProps) => {
+const Avatar: FC<IAvatarProps> = ({
+	src,
+	status,
+	size = "md",
+	alt = "Avatar image",
+	initials,
+	draggable = false
+}: IAvatarProps) => {
 	const imageStyles = cn("rounded-full", {
 		"h-6 w-6": size === "xxs",
 		"h-8 w-8": size === "xs",
@@ -35,7 +43,7 @@ const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar imag
 		"h-12 w-12": size === "md",
 		"h-14 w-14": size === "lg",
 		"h-16 w-16": size === "xl"
-	})
+	});
 	const initialsStyles = cn("inline-flex items-center justify-center rounded-full bg-gray-500", {
 		"h-6 w-6": size === "xxs",
 		"h-8 w-8": size === "xs",
@@ -43,14 +51,14 @@ const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar imag
 		"h-12 w-12": size === "md",
 		"h-14 w-14": size === "lg",
 		"h-16 w-16": size === "xl"
-	})
+	});
 	const fontStyles = cn(" leading-none text-white uppercase", {
 		"text-xs": size === "xxs" || size === "xs",
 		"text-sm": size === "sm",
 		"text-base": size === "md",
 		"text-lg": size === "lg",
 		"text-xl": size === "xl"
-	})
+	});
 	const defaultAvatarStyles = cn("inline-block rounded-full overflow-hidden bg-gray-100", {
 		"h-6 w-6": size === "xxs",
 		"h-8 w-8": size === "xs",
@@ -58,7 +66,7 @@ const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar imag
 		"h-12 w-12": size === "md",
 		"h-14 w-14": size === "lg",
 		"h-16 w-16": size === "xl"
-	})
+	});
 
 	const statusStyles = cn("absolute top-0 right-0 block rounded-full ring-2 ring-white", {
 		"h-1.5 w-1.5": size === "xxs",
@@ -70,40 +78,48 @@ const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar imag
 		"bg-gray-300": status === "offline",
 		"bg-red-400": status === "busy",
 		"bg-green-400": status === "online"
-	})
+	});
 	const imageSize: number = useMemo(() => {
-		let imageSize: number = 0
+		let imageSize: number = 0;
 		switch (size) {
 			case "xxs":
-				imageSize = 24
-				break
+				imageSize = 24;
+				break;
 			case "xs":
-				imageSize = 32
-				break
+				imageSize = 32;
+				break;
 			case "sm":
-				imageSize = 40
-				break
+				imageSize = 40;
+				break;
 			case "md":
-				imageSize = 48
-				break
+				imageSize = 48;
+				break;
 			case "lg":
-				imageSize = 56
-				break
+				imageSize = 56;
+				break;
 			case "xl":
-				imageSize = 64
-				break
+				imageSize = 64;
+				break;
 			default:
-				imageSize = 48
-				break
+				imageSize = 48;
+				break;
 		}
-		return imageSize
-	}, [size])
+		return imageSize;
+	}, [size]);
 
 	return (
 		<span className="inline-block relative">
 			{src ? (
 				// eslint-disable-next-line @next/next/no-img-element
-				<img className={imageStyles} width={imageSize} height={imageSize} src={src} alt={alt} loading="eager" />
+				<img
+					className={imageStyles}
+					width={imageSize}
+					height={imageSize}
+					src={src}
+					alt={alt}
+					loading="eager"
+					draggable={draggable}
+				/>
 			) : initials ? (
 				<span className={initialsStyles}>
 					<span className={fontStyles}>{initials}</span>
@@ -117,7 +133,7 @@ const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar imag
 			)}
 			{status && <span className={statusStyles}></span>}
 		</span>
-	)
-}
+	);
+};
 
-export default Avatar
+export default Avatar;

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

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import ButtonDropdown from "."
-import { IItemProp } from "../DropdownComponent"
+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[][] = [
 	[
 		{
@@ -34,7 +34,7 @@ const dropdownDataWithIcons: IItemProp[][] = [
 			key: "Add to Batch",
 			label: "Add to Batch",
 			onClick: () => {
-				console.log("Add to Batch action")
+				console.log("Add to Batch action");
 			}
 		},
 		{
@@ -48,7 +48,7 @@ const dropdownDataWithIcons: IItemProp[][] = [
 			key: "View Batch",
 			label: "View Batch",
 			onClick: () => {
-				console.log("View Batch action")
+				console.log("View Batch action");
 			}
 		}
 	],
@@ -64,15 +64,15 @@ const dropdownDataWithIcons: IItemProp[][] = [
 			key: "Delete",
 			label: "Delete",
 			onClick: () => {
-				console.log("Delete action")
+				console.log("Delete action");
 			},
 			isEmphasized: true
 		}
 	]
-]
+];
 
-export default meta
-type Story = StoryObj<typeof ButtonDropdown>
+export default meta;
+type Story = StoryObj<typeof ButtonDropdown>;
 
 export const Primary: Story = {
 	args: {
@@ -87,7 +87,7 @@ export const Primary: Story = {
 		},
 		placement: "bottom-end"
 	}
-}
+};
 export const Secondary: Story = {
 	args: {
 		button: {
@@ -101,7 +101,7 @@ export const Secondary: Story = {
 		},
 		placement: "bottom-end"
 	}
-}
+};
 export const Alternative: Story = {
 	args: {
 		button: {
@@ -115,4 +115,55 @@ export const Alternative: Story = {
 		},
 		placement: "bottom-end"
 	}
-}
+};
+
+export const DisabledPrimary: Story = {
+	args: {
+		button: {
+			label: "Primary",
+			actionType: "primary",
+			disabled: true
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-disabled-primary",
+			items: dropdownDataWithIcons,
+			disabled: true
+		},
+		placement: "bottom-end"
+	}
+};
+
+export const DisabledSecondary: Story = {
+	args: {
+		button: {
+			label: "Secondary",
+			actionType: "secondary",
+			disabled: true
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-disabled-secondary",
+			items: dropdownDataWithIcons,
+			disabled: true
+		},
+		placement: "bottom-end"
+	}
+};
+
+export const DisabledAlternative: Story = {
+	args: {
+		button: {
+			label: "Alternative",
+			actionType: "alternative",
+			disabled: true
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-disabled-alternative",
+			items: dropdownDataWithIcons,
+			disabled: true
+		},
+		placement: "bottom-end"
+	}
+};

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -1,22 +1,33 @@
-import React, { FC } from "react"
-import { default as cn } from "classnames"
-import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
-
-import { DynamicIcon } from "@/stories/atoms/icons"
-import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent"
+import { FC } from "react";
+import { default as cn } from "classnames";
+import Button, { IButtonProps } from "@/stories/atoms/buttons/Button";
+import { DynamicIcon } from "@/stories/atoms/icons";
+import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent";
 
 export interface IButtonDropdownProps {
-	button: IButtonProps
-	dropDown: IDropdownProps
-	hideDivider?: boolean
-	placement?: IDropdownProps["placement"]
-	offsetOptions?: IDropdownProps["offsetOptions"]
+	button: IButtonProps;
+	dropDown: IDropdownProps;
+	hideDivider?: boolean;
+	placement?: IDropdownProps["placement"];
+	offsetOptions?: IDropdownProps["offsetOptions"];
 }
 
 /**
  * Primary UI component for user interaction
  */
-const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, hideDivider = false, placement = "bottom-end", offsetOptions }) => {
+const ButtonDropdown: FC<IButtonDropdownProps> = ({
+	button,
+	dropDown,
+	hideDivider = false,
+	placement = "bottom-end",
+	offsetOptions
+}) => {
+	const iconTextColours = {
+		primary: dropDown.disabled ? "text-gray-300" : "text-violet-100",
+		secondary: dropDown.disabled ? "text-gray-400" : "text-purple-700",
+		alternative: dropDown.disabled ? "text-gray-500" : "text-gray-700"
+	};
+
 	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
@@ -29,29 +40,37 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, hideDivide
 					)
 				}}
 			/>
-			{!hideDivider && <div
-				className={cn(
-					"w-[1px] rt",
-					button.actionType === "primary"
-						? "bg-violet-700 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0"
-						: "",
-					button.actionType === "secondary" ? "bg-purple-200 " : "",
-					button.actionType === "alternative" ? "bg-gray-300" : ""
-				)}
-			></div>}
+			{!hideDivider && (
+				<div
+					className={cn(
+						"w-[1px] rt",
+						button.actionType === "primary"
+							? "bg-violet-700 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0"
+							: "",
+						button.actionType === "secondary" ? "bg-purple-200 " : "",
+						button.actionType === "alternative" ? "bg-gray-300" : ""
+					)}
+				></div>
+			)}
 			<Dropdown
 				{...{
 					CustomDropdownTrigger: (
 						<DynamicIcon
 							{...{
 								icon: "IconChevronDown",
-								className: cn("h-5 w-5", {
-									"text-violet-100": button.actionType === "primary",
-									"text-purple-700 ": button.actionType === "secondary",
-									"text-gray-700": button.actionType === "alternative"
-								},
-								dropDown.iconClassname
-								),
+								className: cn(
+									"h-5 w-5 disabled:!bg-gray-50 disabled:focus-visible:ring-0",
+									{
+										"text-white": dropDown.disabled && button.actionType === "primary",
+										"text-purple-300": dropDown.disabled && button.actionType === "secondary",
+										"text-gray-300": dropDown.disabled && button.actionType === "alternative",
+
+										"text-violet-100": !dropDown.disabled && button.actionType === "primary",
+										"text-purple-700": !dropDown.disabled && button.actionType === "secondary",
+										"text-gray-700": !dropDown.disabled && button.actionType === "alternative"
+									},
+									dropDown.iconClassname
+								)
 							}}
 						/>
 					),
@@ -72,7 +91,7 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, hideDivide
 						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"
+									"disabled:bg-gray-50 disabled:text-gray-300 disabled:hover:none disabled:active:bg-gray-100 disabled:border-gray-300"
 							  )
 							: "",
 						dropDown.buttonClassname
@@ -83,11 +102,11 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, hideDivide
 						alignmentAxis: 0 //left/right
 					},
 					placement,
-					...(dropDown as IDropdownProps),
+					...(dropDown as IDropdownProps)
 				}}
 			/>
 			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />
 		</div>
-	)
-}
-export default ButtonDropdown
+	);
+};
+export default ButtonDropdown;