@agility/plenum-ui 2.0.0 → 2.0.1

package/dist/tailwind.css

@@ -48800,6 +48800,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 +50109,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 +50213,10 @@ select {
   padding: 14rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-60 {
   padding: 15rem;
 }
@@ -58588,6 +58600,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 +59088,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"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/tailwind.config.js

@@ -39,6 +39,10 @@ module.exports = {
 			mulish: ["Mulish", "sans-serif"]
 		},
 		extend: {
+			backgroundImage: (theme) => ({
+				"label-gradient-focus": "linear-gradient(to top, #FFF 9px, transparent 9px)",
+				"label-gradient-idle": "linear-gradient(to top, #FFF 8px, transparent 8px)"
+			}),
 			gridTemplateColumns: {
 				// Simple 16 column grid
 				mainContainer: "max-content 1fr 1fr"
@@ -59,6 +63,7 @@ module.exports = {
 				"transparent-white-80": "rgba(255, 255, 255, 0.8)",
 				"transparent-white-90": "rgba(255, 255, 255, 0.9)",
 
+				"transparent-black-03": "rgba(0, 0, 0, 0.03)",
 				"transparent-black-05": "rgba(0, 0, 0, 0.05)",
 				"transparent-black-10": "rgba(0, 0, 0, 0.1)",
 				"transparent-black-20": "rgba(0, 0, 0, 0.2)",
@@ -229,6 +234,58 @@ module.exports = {
 				"7xl": ["4.5rem", "4.5rem"],
 				"8xl": ["6rem", "6rem"],
 				"9xl": ["8rem", "8rem"]
+			},
+			animation: {
+				enter: "fadeInLeft 300ms ease-out",
+				exit: "fadeOutLeft 300ms ease-in forwards",
+				quickBounce: "quickBounce 200ms ease-out forwards",
+				fadeIn: "fadeIn 400ms ease-in-out forwards"
+			},
+
+			keyframes: {
+				fadeIn: {
+					"0%": {
+						opacity: "0"
+					},
+					"100%": {
+						opacity: "1"
+					}
+				},
+				fadeInLeft: {
+					"0%": {
+						opacity: "0",
+						transform: "translate(-2rem)"
+					},
+					"100%": {
+						opacity: "1",
+						transform: "translate(0)"
+					}
+				},
+				quickBounce: {
+					"0%": {
+						transform: "translateY(0px)"
+					},
+					"50%": {
+						transform: "translateY(-8px)"
+					},
+					"100%": {
+						transform: "translateY(-4px)"
+					}
+				},
+				fadeOutLeft: {
+					"0%": {
+						opacity: "1",
+						transform: "translate(0)"
+					},
+					"100%": {
+						opacity: "0",
+						transform: "translate(-2rem)"
+					}
+				}
+			},
+			transitionProperty: {
+				left: "left",
+				height: "height"
 			}
 		}
 	},

package/dist/types/stories/molecules/inputs/select/Select.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Select from "./Select";
-declare const meta: Meta<typeof Select>;
-type Story = StoryObj<typeof Select>;
-export declare const DefaultSelect: Story;
-export default meta;

package/dist/types/stories/molecules/inputs/textArea/TextArea.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Textarea from "./TextArea";
-declare const meta: Meta<typeof Textarea>;
-type Story = StoryObj<typeof Textarea>;
-export declare const DefaultTextarea: Story;
-export default meta;

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

@@ -1,23 +0,0 @@
-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"]
-}
-type Story = StoryObj<typeof Select>
-export const DefaultSelect: Story = {
-	args: {
-		label: "Label",
-		id: "select",
-		name: "select",
-		options: [
-			{ label: "Canada", value: "value1" },
-			{ label: "USA", value: "value2" }
-		],
-		isDisabled: false,
-		isError: false,
-		isRequired: false
-	}
-}
-export default meta