@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc21

package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx

@@ -2,74 +2,78 @@ import React, { useEffect, useState } from "react"
 import { default as cn } from "classnames"
 import { Switch } from "@headlessui/react"
 import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms"
+
+interface ToggleSwitchLabel {
+	text: string | JSX.Element
+	className?: string
+	xPosition?: "left" | "right"
+}
+
 export interface IToggleSwitchProps {
 	isChecked: boolean
 	onChange: (isChecked: boolean) => void
-	label?: {
-		text: string | JSX.Element
-		className?: string
-		xPosition?: "left" | "right"
-	}
-	screenReaderLabel: string
+	label?: ToggleSwitchLabel
+	screenReaderLabel?: string
 	name: string
 	id: string
-	variant: "base" | "short"
+	variant?: "base" | "short"
 	withIcon?: IDynamicIconProps
+	disabled?: boolean
 }
 
 const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
-  isChecked,
-  onChange,
-  label,
-  screenReaderLabel,
-  name,
-  id,
-  variant = "base",
-  withIcon,
+	isChecked,
+	onChange,
+	label,
+	screenReaderLabel,
+	name,
+	id,
+	variant = "base",
+	withIcon,
+	disabled
 }) => {
-  const [checked, setChecked] = useState<boolean>(isChecked)
-  useEffect(() => setChecked(isChecked), [isChecked])
+	const [checked, setChecked] = useState<boolean>(isChecked)
+	useEffect(() => setChecked(isChecked), [isChecked])
 
-  return (
-    <Switch.Group as={"div"} className={"flex items-center gap-2"}>
-      {label && label.xPosition === "left" && (
-        <Switch.Label className={label.className}>{label.text}</Switch.Label>
-      )}
-      <Switch
-        name={name}
-        id={id}
-        checked={checked}
-        onChange={(v: boolean) => {
-          onChange(v)
-          setChecked(v)
-        }}
-        className={cn(
-          { "w-9 h-4": variant === "short", " h-6 w-11": variant === "base" },
-          checked ? "bg-purple-600" : "bg-gray-200",
-          "relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
-        )}
-      >
-        <span className="sr-only">{screenReaderLabel}</span>
-        <span
-          className={cn(
-            checked ? "translate-x-[22px]" : "translate-x-[2px]",
-            {
-              "border border-gray-200 translate-x-0": variant === "short",
-              "!translate-x-[22px]": checked && variant === "short",
-            },
-            " h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
-          )}
-        >
-          {withIcon && (
-            <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />
-          )}
-        </span>
-      </Switch>
-      {label && label.xPosition === "right" && (
-        <Switch.Label className={label.className}>{label.text}</Switch.Label>
-      )}
-    </Switch.Group>
-  )
+	return (
+		<Switch.Group as={"div"} className={"flex items-center gap-2"}>
+			{label && (label.xPosition === "left" || !label?.xPosition) && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+			<Switch
+				name={name}
+				id={id}
+				checked={checked}
+				onChange={(v: boolean) => {
+					onChange(v)
+					setChecked(v)
+				}}
+				className={cn(
+					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
+					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
+					"relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
+				)}
+				disabled={disabled}
+			>
+				{screenReaderLabel && <span className="sr-only">{screenReaderLabel}</span>}
+				<span
+					className={cn(
+						checked ? "translate-x-[22px]" : "translate-x-[2px]",
+						{
+							"border border-gray-200 translate-x-0": variant === "short",
+							"!translate-x-[22px]": checked && variant === "short"
+						},
+						" h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
+					)}
+				>
+					{withIcon && <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />}
+				</span>
+			</Switch>
+			{label && label.xPosition === "right" && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+		</Switch.Group>
+	)
 }
 
 export default ToggleSwitch

package/stories/molecules/tabs/index.tsx

@@ -1,3 +1,2 @@
-
-export { default } from './Tabs';
-export * from './Tabs';
+export * from "./Tabs"
+export { default } from "./Tabs"

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

@@ -11,11 +11,20 @@ const meta: Meta<typeof AnimatedLabelInput> = {
 export default meta
 type Story = StoryObj<typeof AnimatedLabelInput>
 export const DefaultAnimatedLabelInputsStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label"
+		}
+	} as IAnimatedLabelInputProps
+}
+
+export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
 	args: {
 		id: "test",
 		label: {
 			display: "Label"
 		},
-		input: {}
+		placeholder: "Placeholder"
 	} as IAnimatedLabelInputProps
 }

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -1,59 +1,65 @@
 import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
-import TextAreaField, { ITextAreaFieldProps } from "@/stories/molecules/inputs/textArea/TextArea"
 
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
 	display: string
 }
 
-export interface IAnimatedLabelInputProps {
+export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
 	id: string
 	containerStyles?: string
 	message?: string
-	input?: IInputFieldProps
-	textarea?: ITextAreaFieldProps
 	required?: boolean
 	isError?: boolean
 	label: ILabelProps
+	handleChange: (value: string) => void
 }
 
-const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = ({
-	id,
-	label,
-	input,
-	message,
-	textarea,
-	required,
-	isError,
-	containerStyles
-}) => {
+const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
 	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			{input && <InputField isError={isError} {...input} />}
-			{textarea && <TextAreaField isError={isError} {...textarea} />}
-			<label
-				className={cn(
-					"absolute left-1 z-10 ml-[.172rem] inline-block bg-white px-1 text-xs  transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-600",
-					"-top-[9px] group-focus-within:!-top-[12px] group-focus-within:!left-1  group-focus-within:!ml-[.172rem]  group-focus-within:!text-xs",
-					isError && "!text-red-600"
-				)}
-				htmlFor={id}
-			>
-				{label.display}
-				{required && <span className="text-red-600">*</span>}
-			</label>
-
-			<div className="flex flex-row space-x-3">
-				<div className="grow transition-all">
-					{message && (
-						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
-							{message}
-						</span>
+		<>
+			<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+				<InputField
+					id={id}
+					isError={isError}
+					value={value}
+					handleChange={(v) => {
+						setHasValue(!!v)
+						if (handleChange) handleChange(v)
+					}}
+					{...input}
+				/>
+				<label
+					className={cn(
+						"absolute z-10 ml-[3px] inline-block bg-white 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",
+
+						isError && "!text-red-600"
 					)}
+					htmlFor={id}
+				>
+					{label.display}
+					{required && <span className="text-red-600 ml-1">*</span>}
+				</label>
+
+				<div className="flex flex-row space-x-3">
+					<div className="grow transition-all">
+						{message && (
+							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+								{message}
+							</span>
+						)}
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	)
 }
 

package/stories/organisms/AnimatedLabelInput/index.tsx

@@ -1,3 +1,3 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput"
-export default AnimatedLabelInput
 export type { IAnimatedLabelInputProps }
+export default AnimatedLabelInput

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+
+const meta: Meta<typeof AnimatedLabelTextArea> = {
+	title: "Design System/organisms/Animated Label Text Area",
+	component: AnimatedLabelTextArea,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedLabelTextArea>
+export const DefaultAnimatedLabelTextAreasStory: Story = {
+	args: {
+		id: "test",
+		label: "Label"
+	} as IAnimatedLabelTextAreaProps
+}
+
+export const DefaultAnimatedLabelTextAreasStoryWithPlaceholder: Story = {
+	args: {
+		id: "test",
+		label: "Label",
+		placeholder: "Placeholder"
+	} as IAnimatedLabelTextAreaProps
+}

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import { default as cn } from "classnames"
+
+import TextArea, { ITextareaProps } from "@/stories/molecules/inputs/textArea"
+
+export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
+	id: string
+	containerStyles?: string
+	message?: string
+	required?: boolean
+	isError?: boolean
+	handleChange: (value: string) => void
+}
+
+const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAnimatedLabelTextAreaProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, onChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
+	return (
+		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+			<TextArea
+				id={id}
+				isError={isError}
+				value={value}
+				{...input}
+				onChange={(v) => {
+					setHasValue(!!v)
+					if (handleChange) handleChange(v)
+				}}
+				label={undefined}
+			/>
+			<label
+				className={cn(
+					"absolute z-10 ml-[3px] inline-block bg-white 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",
+
+					isError && "!text-red-600"
+				)}
+				htmlFor={label?.htmlFor || id}
+			>
+				{label?.display}
+				{required && <span className="text-red-600 ml-1">*</span>}
+			</label>
+
+			<div className="flex flex-row space-x-3">
+				<div className="grow transition-all">
+					{message && (
+						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+							{message}
+						</span>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default AnimatedLabelTextArea

package/stories/organisms/AnimatedLabelTextArea/index.tsx

@@ -0,0 +1,3 @@
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+export type { IAnimatedLabelTextAreaProps }
+export default AnimatedLabelTextArea

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

@@ -2,74 +2,75 @@ 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: "IconClipboardCopy"
+
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Copy",
+			label: "Copy",
+			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: "trailing",
+			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>

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -16,21 +16,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"
-				: ""
-		)
-	}
+
 	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
@@ -65,7 +51,18 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 							}}
 						/>
 					),
-					classNames: dropDownClasses,
+					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"
+							: ""
+					),
 					offsetOptions: offsetOptions ?? {
 						crossAxis: 0,
 						mainAxis: 5, //up/down

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

@@ -18,7 +18,7 @@ const IconElement = () => (
 const defaultArgs: Story["args"] = {
 	items: [...dropdownDataBase],
 	label: "Dropdown",
-	classNames: defaultClassNames,
+
 	placement: "bottom-end"
 }
 export const WithLabel: Story = {