@agility/plenum-ui 2.1.21 → 2.1.23-rc1

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/package.json

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

package/stories/molecules/inputs/radio/Radio.tsx

@@ -1,30 +1,30 @@
-import InputLabel from "@/stories/molecules/inputs/InputLabel"
-import { useId } from "@/utils/useId"
-import React from "react"
-import { default as cn } from "classnames"
+import InputLabel from "@/stories/molecules/inputs/InputLabel";
+import { useId } from "@/utils/useId";
+import React from "react";
+import { default as cn } from "classnames";
 export interface IRadioProps {
 	/** group name */
-	name?: string
+	name?: string;
 	/** Radio label */
-	label: string
+	label: string;
 	/** Radio ID */
-	id?: string
+	id?: string;
 	/** Disabled state */
-	isDisabled?: boolean
+	isDisabled?: boolean;
 	/** Check state */
-	isChecked?: boolean
+	isChecked?: boolean;
 	/** If field is required */
-	isRequired?: boolean
+	isRequired?: boolean;
 	/** Error state */
-	isError?: boolean
+	isError?: boolean;
 	/** Message or description */
-	message?: string
+	message?: string;
 	/** value */
-	value?: string
+	value?: string;
 	/** Callback on input change */
-	onChange?(value: string, isChecked: boolean): void
+	onChange?(value: string, isChecked: boolean): void;
 	/** Callback on click */
-	onClick?(value: string, isChecked: boolean): void
+	onClick?(value: string, isChecked: boolean): void;
 }
 const Radio: React.FC<IRadioProps> = ({
 	label,
@@ -39,24 +39,24 @@ const Radio: React.FC<IRadioProps> = ({
 	onClick,
 	value
 }) => {
-	const uniqueID = useId()
-	if (!id) id = `input-${uniqueID}`
-	if (!name) name = id
+	const uniqueID = useId();
+	if (!id) id = `input-${uniqueID}`;
+	if (!name) name = id;
 
-	const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300", {
+	const checboxStyles = cn("focus:ring-purple-500 h-4 w-4 text-blue-600 border-gray-300", {
 		"border-red-500 shadow-none": isError
-	})
-	const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled })
+	});
+	const wrapperStyles = cn("relative flex items-start", { "opacity-50": isDisabled });
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const targetValue = e.currentTarget.value
-		const targetChecked = e.currentTarget.checked
-		typeof onChange === "function" && onChange(targetValue, targetChecked)
-	}
+		const targetValue = e.currentTarget.value;
+		const targetChecked = e.currentTarget.checked;
+		typeof onChange === "function" && onChange(targetValue, targetChecked);
+	};
 	const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
-		const targetValue = e.currentTarget.value
-		const targetChecked = e.currentTarget.checked
-		typeof onClick === "function" && onClick(targetValue, targetChecked)
-	}
+		const targetValue = e.currentTarget.value;
+		const targetChecked = e.currentTarget.checked;
+		typeof onClick === "function" && onClick(targetValue, targetChecked);
+	};
 	return (
 		<div className={wrapperStyles}>
 			<div className="flex items-center h-5">
@@ -68,12 +68,12 @@ const Radio: React.FC<IRadioProps> = ({
 					value={value}
 					className={checboxStyles}
 					disabled={isDisabled}
-					defaultChecked={isChecked}
+					checked={isChecked}
 					onChange={(e) => {
-						handleChange(e)
+						handleChange(e);
 					}}
 					onClick={(e) => {
-						handleClick(e)
+						handleClick(e);
 					}}
 				/>
 			</div>
@@ -86,7 +86,7 @@ const Radio: React.FC<IRadioProps> = ({
 				)}
 			</div>
 		</div>
-	)
-}
+	);
+};
 
-export default Radio
+export default Radio;

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;