@agility/plenum-ui 2.0.0-rc9 → 2.0.1

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

@@ -13,7 +13,7 @@ export const DefaultToggleSwitch: Story = {
   args: {
     isChecked: false,
     onChange: (v: boolean) => {
-      console.log(v, "v")
+
     },
     label: {
       text: "label me",
@@ -53,21 +53,20 @@ export const Checked: Story = {
   },
 }
 export const WithIcon: Story = {
-  args: {
-    ...DefaultToggleSwitch.args,
-    label: {
-      text: "label me three",
-      className: "text-lg text-gray-400",
-      xPosition: "left",
-    },
-    withIcon: {
-      name: "IconCheck",
-      type: "solid",
-    },
-    variant: "base",
-    id: "toggle-switch-4",
-    name: "toggle four",
-  },
+	args: {
+		...DefaultToggleSwitch.args,
+		label: {
+			text: "label me three",
+			className: "text-lg text-gray-400",
+			xPosition: "left"
+		},
+		withIcon: {
+			icon: "IconCheck"
+		},
+		variant: "base",
+		id: "toggle-switch-4",
+		name: "toggle four"
+	}
 }
 export const NoLabel: Story = {
   args: {

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

@@ -2,74 +2,80 @@ 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,
+	groupClassName?: string
 }
 
 const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
-  isChecked,
-  onChange,
-  label,
-  screenReaderLabel,
-  name,
-  id,
-  variant = "base",
-  withIcon,
+	isChecked,
+	onChange,
+	label,
+	screenReaderLabel,
+	name,
+	id,
+	variant = "base",
+	withIcon,
+	disabled,
+	groupClassName,
 }) => {
-  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={cn("flex items-center gap-2", groupClassName)}>
+			{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

@@ -5,17 +5,47 @@ 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
 type Story = StoryObj<typeof AnimatedLabelInput>
 export const DefaultAnimatedLabelInputsStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label"
+		}
+	} as IAnimatedLabelInputProps
+}
+export const DefaultAnimatedLabelInputsDarkBGStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label with Dark BG"
+		},
+		value: "Value"
+	} 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,88 @@
 import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
-import Textarea, { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea"
+import InputCounter from "@/stories/molecules/inputs/InputCounter"
 
-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?: ITextareaProps
 	required?: boolean
 	isError?: boolean
+	isShowCounter?: boolean
+	maxLength?: number
 	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,
+		isShowCounter,
+		maxLength,
+		handleChange,
+		...input
+	} = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+	const [valueLength, setValueLength] = React.useState<number>(0)
+
 	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			{input && <InputField isError={isError} {...input} />}
-			{textarea && <Textarea 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)
+						setValueLength(v.length)
+						if (handleChange) handleChange(v)
+					}}
+					{...input}
+				/>
+				<div
+					className={cn(
+						"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:!bg-label-gradient-focus group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
+						isError && "!text-red-600"
+					)}
+				>
+					<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">
+						{message && (
+							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+								{message}
+							</span>
+						)}
+					</div>
+					{isShowCounter && (
+						<div className="shrink-0">
+							<InputCounter current={Number(valueLength)} limit={maxLength ?? 150} />
+						</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,74 @@ 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")
-				}
-			}
-		],
-		[
-			{
-				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")
-				}
+const dropdownDataWithIcons: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconCopy"
+
+				// 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")
-				}
+			iconPosition: "leading",
+			key: "Copy",
+			label: "Copy The Thing",
+			onClick: () => {}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconFolderPlus"
+				// name: "IconFolderPlus",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			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: "leading",
+			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>