@agility/plenum-ui 2.0.0 → 2.0.2

package/dist/tailwind.css

@@ -3093,17 +3093,6 @@ select {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.divide-y > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-}
-
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -3182,6 +3171,22 @@ select {
   border-bottom-right-radius: 0.25rem;
 }
 
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -3202,6 +3207,10 @@ select {
   border-right-width: 0px !important;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -48800,6 +48809,10 @@ select {
   background-color: rgb(19 78 74 / 0.95);
 }
 
+.bg-transparent-black-03 {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
 .bg-violet-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(237 233 254 / var(--tw-bg-opacity));
@@ -50105,6 +50118,10 @@ select {
   background-color: rgb(128 102 20 / 0.95);
 }
 
+.bg-label-gradient-idle {
+  background-image: linear-gradient(to top, #FFF 8px, transparent 8px);
+}
+
 .from-0\% {
   --tw-gradient-from-position: 0%;
 }
@@ -50205,6 +50222,10 @@ select {
   padding: 14rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-60 {
   padding: 15rem;
 }
@@ -58588,6 +58609,11 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.\!ring-gray-300 {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)) !important;
+}
+
 .\!ring-purple-500 {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity)) !important;
@@ -59071,6 +59097,14 @@ select {
   margin-left: .172rem !important;
 }
 
+.group:focus-within .group-focus-within\:\!bg-label-gradient-focus {
+  background-image: linear-gradient(to top, #FFF 9px, transparent 9px) !important;
+}
+
+.group:focus-within .group-focus-within\:bg-label-gradient-focus {
+  background-image: linear-gradient(to top, #FFF 9px, transparent 9px);
+}
+
 .group:focus-within .group-focus-within\:\!text-xs {
   font-size: 0.75rem !important;
   line-height: 1rem !important;

package/dist/types/stories/molecules/inputs/checkbox/Checkbox.d.ts

@@ -22,6 +22,8 @@ export interface ICheckboxProps {
     hasBorder?: boolean;
     /** any arbitrary classNames to add to the wrapper */
     className?: string;
+    /** Label ClassName */
+    labelClassName?: string;
 }
 /** Comment */
 declare const Checkbox: FC<ICheckboxProps>;

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

@@ -1,3 +1,4 @@
 import { IItemProp } from "./DropdownComponent";
 export declare const dropdownDataBase: IItemProp[][];
+export declare const multipleGroups: IItemProp[][];
 export declare const dropdownDataWithIcons: IItemProp[][];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -80,4 +80,4 @@
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1"
 	}
-}
+}

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -24,13 +24,13 @@ const InputLabel: FC<IInputLabelProps> = ({
 	label
 }: IInputLabelProps) => {
 	const labelStyles = cn(
-		"z-[2]",
-		{ "inline-block font-medium transition-all text-sm text-gray-700 mb-1": !isPlaceholder },
+		"z-[2] bg-label-gradient-idle group-focus-within:bg-label-gradient-focus",
+		{ "inline-block font-medium transition-all text-sm text-gray-700 ": !isPlaceholder },
 		{ "inline-block font-medium ml-2 relative transition-all": isPlaceholder },
 		{ "text-sm text-gray-400 px-2 top-8": isPlaceholder && !isActive },
-		{ "text-xs text-gray-700 px-1 top-[10px] bg-white": isPlaceholder && isActive },
-		{ "text-xs text-red-500 px-1 top-[10px] bg-white": isPlaceholder && isError },
-		{ "text-red-500 bg-white": !isPlaceholder && isError },
+		{ "text-xs text-gray-700 px-1 top-[10px] ": isPlaceholder && isActive },
+		{ "text-xs text-red-500 px-1 top-[10px] ": isPlaceholder && isError },
+		{ "text-red-500 ": !isPlaceholder && isError },
 		{ "text-gray-500/[.5]": isDisabled }
 	)
 	if (!label) return null

package/stories/molecules/inputs/TextInput/TextInput.stories.tsx

@@ -6,7 +6,19 @@ const meta: Meta<typeof TextInput> = {
 	title: "Design System/molecules/inputs/TextInput",
 	component: TextInput,
 	tags: ["autodocs"],
-	argTypes: {}
+	argTypes: {},
+	decorators: [
+		(Story, context) => {
+			if (context.name === "Default Text Input Story Dark BG") {
+				return (
+					<div className="bg-transparent-black-03 rounded p-6">
+						<Story />
+					</div>
+				)
+			}
+			return <Story />
+		}
+	]
 }
 
 export default meta
@@ -30,3 +42,21 @@ export const DefaultTextInputStory: Story = {
 		placeholder: "placeholder"
 	}
 }
+export const DefaultTextInputStoryDarkBG: Story = {
+	args: {
+		type: "text",
+		label: "Label",
+		isFocused: true,
+		isError: false,
+		id: "id",
+		name: "name",
+		isRequired: true,
+
+		isDisabled: false,
+		isReadonly: false,
+		message: "message",
+		isShowCounter: true,
+		maxLength: 100,
+		placeholder: "placeholder"
+	}
+}

package/stories/molecules/inputs/TextInput/TextInput.tsx

@@ -86,6 +86,7 @@ const TextInput = (
 		} else {
 			input.blur()
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isFocus])
 
 	// set label as active if default value is set
@@ -103,7 +104,7 @@ const TextInput = (
 	if (!name) name = id
 
 	return (
-		<div className="relative">
+		<div className="relative group">
 			<InputLabel
 				isPlaceholder={true}
 				label={label}
@@ -128,13 +129,14 @@ const TextInput = (
 					"w-full rounded border py-2 px-3 text-sm font-normal leading-5",
 					{ "border-gray-300": !isFocus && !isError && !isDisabled },
 					{
-						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError && !isDisabled
+						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500":
+							isFocus && !isError && !isDisabled
 					},
 					{
 						"!border-red-500 shadow-none focus:ring-red-500": isError
 					},
 					{
-						"placeholder:text-gray-300 !border-gray-300 !outline-gray-300 focus:!ring-gray-300" : isDisabled
+						"placeholder:text-gray-300 !border-gray-300 !outline-gray-300 focus:!ring-gray-300": isDisabled
 					},
 					className
 				)}

package/stories/molecules/inputs/checkbox/Checkbox.tsx

@@ -26,6 +26,8 @@ export interface ICheckboxProps {
 	hasBorder?: boolean
 	/** any arbitrary classNames to add to the wrapper */
 	className?: string
+	/** Label ClassName */
+	labelClassName?: string
 }
 
 /** Comment */
@@ -41,6 +43,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 	onChange,
 	hasBorder,
 	className,
+	labelClassName,
 	...props
 }: ICheckboxProps) => {
 	const uniqueID = useId()
@@ -83,9 +86,10 @@ const Checkbox: FC<ICheckboxProps> = ({
 				/>
 			</div>
 			<div className="ml-3 text-sm ">
-				<label htmlFor={id} className="font-medium text-gray-700">
+				<>
 					<InputLabel label={label} isRequired={isRequired} id={id} />
-				</label>
+				</>
+
 				{message && (
 					<p id={`${id}-description`} className="text-gray-500">
 						{message}

package/stories/molecules/inputs/select/Select.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Select from "./Select"
+
+const meta: Meta<typeof Select> = {
+	title: "Design System/Molecules/Inputs/Select",
+	component: Select,
+	tags: ["autodocs"],
+	argTypes: {},
+	decorators: [
+		(Story, context) => {
+			if (context.name === "Default Select Dark BG") {
+				return (
+					<div className="bg-transparent-black-03 rounded p-6">
+						<Story />
+					</div>
+				)
+			}
+			return <Story />
+		}
+	]
+}
+
+export default meta
+type TStory = StoryObj<typeof Select>
+
+export const DefaultSelect: TStory = {
+	args: {
+		label: "Label",
+		id: "select",
+		name: "select",
+		options: [
+			{ label: "Canada", value: "value1" },
+			{ label: "USA", value: "value2" }
+		],
+		isDisabled: false,
+		isError: false,
+		isRequired: false
+	}
+}
+export const DefaultSelectDarkBG: TStory = {
+	args: {
+		label: "Label",
+		id: "select",
+		name: "select",
+		options: [
+			{ label: "Canada", value: "value1" },
+			{ label: "USA", value: "value2" }
+		],
+		isDisabled: false,
+		isError: false,
+		isRequired: false
+	}
+}

package/stories/molecules/inputs/select/Select.tsx

@@ -63,7 +63,7 @@ const Select: React.FC<ISelectProps> = ({
 		typeof onChange == "function" && onChange(targetValue)
 		setSelectedOption(targetValue)
 	}
-	const wrapperStyle = cn({ "opacity-50": isDisabled })
+	const wrapperStyle = cn("group", { "opacity-50": isDisabled })
 	return (
 		<div className={wrapperStyle}>
 			{label && (

package/stories/molecules/inputs/textArea/{TextArea.stories.ts → TextArea.stories.tsx}

@@ -3,7 +3,20 @@ import Textarea from "./TextArea"
 const meta: Meta<typeof Textarea> = {
 	title: "Design System/Molecules/Inputs/TextArea",
 	component: Textarea,
-	tags: ["autodocs"]
+	tags: ["autodocs"],
+	argTypes: {},
+	decorators: [
+		(Story, context) => {
+			if (context.name === "Default Textarea Dark BG") {
+				return (
+					<div className="bg-transparent-black-03 rounded p-6">
+						<Story />
+					</div>
+				)
+			}
+			return <Story />
+		}
+	]
 }
 const dummyText: string = `Checkmate... Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
 
@@ -19,4 +32,14 @@ export const DefaultTextarea: Story = {
 		placeholder: dummyText
 	}
 }
+export const DefaultTextareaDarkBG: Story = {
+	args: {
+		id: "appDescription",
+		name: "description",
+		rows: 12,
+		cols: 18,
+		label: { display: "Description" },
+		placeholder: dummyText
+	}
+}
 export default meta

package/stories/molecules/inputs/textArea/TextArea.tsx

@@ -103,7 +103,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 
 	//with label
 	return (
-		<div>
+		<div className="group">
 			<InputLabel
 				isPlaceholder
 				isActive

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.stories.tsx

@@ -5,7 +5,19 @@ const meta: Meta<typeof AnimatedLabelInput> = {
 	title: "Design System/organisms/Animated Label Input",
 	component: AnimatedLabelInput,
 	tags: ["autodocs"],
-	argTypes: {}
+	argTypes: {},
+	decorators: [
+		(Story, context) => {
+			if (context.name === "Default Animated Label Inputs Dark BG Story") {
+				return (
+					<div className="bg-transparent-black-03 p-6">
+						<Story />
+					</div>
+				)
+			}
+			return <Story />
+		}
+	]
 }
 
 export default meta
@@ -18,6 +30,15 @@ export const DefaultAnimatedLabelInputsStory: Story = {
 		}
 	} as IAnimatedLabelInputProps
 }
+export const DefaultAnimatedLabelInputsDarkBGStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label with Dark BG"
+		},
+		value: "Value"
+	} as IAnimatedLabelInputProps
+}
 
 export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
 	args: {

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -20,7 +20,19 @@ export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handle
 }
 
 const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
-	const { id, containerStyles, message, required, isError, label, value, isShowCounter, maxLength, handleChange, ...input } = props
+	const {
+		id,
+		containerStyles,
+		message,
+		required,
+		isError,
+		label,
+		value,
+		isShowCounter,
+		maxLength,
+		handleChange,
+		...input
+	} = props
 
 	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
 	const [valueLength, setValueLength] = React.useState<number>(0)
@@ -39,20 +51,21 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 					}}
 					{...input}
 				/>
-				<label
+				<div
 					className={cn(
-						"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+						"absolute z-10 ml-[3px] inline-block bg-label-gradient-idle text-sm transition-all text-gray-500 left-1 px-1",
 						hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
 						"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
-						"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+						"group-focus-within:!-top-[8px] group-focus-within:!bg-label-gradient-focus group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
 
 						isError && "!text-red-600"
 					)}
-					htmlFor={id}
 				>
-					{label.display}
-					{required && <span className="text-red-600 ml-1">*</span>}
-				</label>
+					<label htmlFor={id}>
+						{label.display}
+						{required && <span className="text-red-600 ml-1">*</span>}
+					</label>
+				</div>
 
 				<div className="flex flex-row space-x-3">
 					<div className="grow">

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { DynamicIcon } from "@/stories/atoms/icons"
-import { dropdownDataBase, dropdownDataWithIcons } from "./dropdownItems"
+import { dropdownDataBase, dropdownDataWithIcons, multipleGroups } from "./dropdownItems"
 import Dropdown, { defaultClassNames } from "./DropdownComponent"
 
 const meta: Meta<typeof Dropdown> = {
@@ -18,7 +18,6 @@ const IconElement = () => (
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],
 	label: "Dropdown",
-
 	placement: "bottom-end"
 }
 export const WithLabel: Story = {
@@ -26,6 +25,12 @@ export const WithLabel: Story = {
 		...defaultArgs
 	}
 }
+export const MultipleGroups: Story = {
+	args: {
+		...defaultArgs,
+		items: multipleGroups
+	}
+}
 
 export const CustomTrigger: Story = {
 	args: {

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -57,8 +57,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 }
 export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
-	itemsClassname:
-		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-[99999] divide-y divide-gray-100  border border-gray-300  ",
+	itemsClassname: "mt-2 origin-bottom-right rounded bg-white shadow-lg z-[99999] border border-gray-300  ",
 	itemClassname:
 		"group flex font-muli  cursor-pointer items-center px-4 py-2 text-sm transition-all hover:bg-gray-100 hover:text-gray-900 justify-between gap-4 ",
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
@@ -176,7 +175,19 @@ const Dropdown: React.FC<IDropdownProps> = ({
 							{...{
 								key: key,
 								id: key.toString(),
-								className: cn(itemClass, "w-full"),
+								className: cn(
+									itemClass,
+									//Round the corners of the first item in the first stack and the last item in the last stack
+									itemIndex === 0 && stackIndex === 0 && "rounded-tl rounded-tr",
+									itemIndex === itemStack.length - 1 &&
+										stackIndex === items.length - 1 &&
+										"rounded-bl rounded-br",
+									//Add dividing line between stacks
+									stackIndex !== items.length - 1 &&
+										itemIndex === itemStack.length - 1 &&
+										"border-b border-b-gray-100",
+									"w-full"
+								),
 								...rest,
 								...getItemProps(),
 								onClick: () => {

package/stories/organisms/DropdownComponent/dropdownItems.ts

@@ -3,26 +3,26 @@ import { IItemProp } from "./DropdownComponent"
 export const dropdownDataBase: IItemProp[][] = [
 	[
 		{
-			icon: {
-				icon: "IconCopy"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
+			icon: { icon: "IconCopy" },
 			key: "Copy",
 			label: "Copy to Clipboard",
 			onClick: () => {
 				console.log("Copy action")
 			}
 		},
-
 		{
-			icon: {
-				icon: "IconPlus"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
+			icon: { icon: "IconTrash" },
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
 			},
+			isEmphasized: true,
+			key: "Delete"
+		}
+	],
+	[
+		{
+			icon: { icon: "IconPlus" },
 			key: "Add to Batch",
 			label: "Add to Batch",
 			onClick: () => {
@@ -30,35 +30,41 @@ export const dropdownDataBase: IItemProp[][] = [
 			}
 		},
 		{
-			icon: {
-				icon: "IconEye"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
+			icon: { icon: "IconEye" },
 			key: "View Batch",
 			label: "View Batch",
 			onClick: () => {
 				console.log("View Batch action")
 			}
-		},
-		{
-			icon: {
-				icon: "IconTrash"
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			label: "Delete",
-			onClick: () => {
-				console.log("Delete action")
-			},
-			isEmphasized: true,
-			key: "Delete"
 		}
 	]
 ]
 
+export const multipleGroups: IItemProp[][] = [
+	[
+		{
+			icon: { icon: "IconArrowUp" },
+			key: "moveUp",
+			label: "Move up",
+			onClick: () => {
+				window.alert("moved up")
+			}
+		},
+		{ icon: { icon: "IconArrowDown" }, key: "moveDown", label: "Moved down", onClick: () => {} }
+	],
+	[
+		{ icon: { icon: "IconCheck" }, key: "publish", label: "Publish", onClick: () => {} },
+		{ icon: { icon: "IconEyeOff" }, key: "unpublish", label: "Unpublish", onClick: () => {} }
+	],
+	[
+		{ icon: { icon: "IconEyeCheck" }, key: "reqApproval", label: "Request Approval", onClick: () => {} },
+		{ icon: { icon: "IconThumbUp" }, key: "approve", label: "Approve", onClick: () => {} },
+		{ icon: { icon: "IconBan" }, key: "decline", label: "Decline", onClick: () => {} }
+	],
+	[{ icon: { icon: "IconCopy" }, key: "Copy", label: "Copy", onClick: () => {} }],
+	[{ icon: { icon: "IconTrash" }, key: "delete", label: "Delete", onClick: () => {} }]
+]
+
 export const dropdownDataWithIcons: IItemProp[][] = [
 	[
 		{