@agility/plenum-ui 2.0.2 → 2.0.3

package/dist/tailwind.css

@@ -50118,10 +50118,6 @@ 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%;
 }
@@ -59098,11 +59094,7 @@ select {
 }
 
 .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);
+  background-image: linear-gradient(to top, #FFF 10px, transparent 10px) !important;
 }
 
 .group:focus-within .group-focus-within\:\!text-xs {

package/dist/types/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts

@@ -13,6 +13,7 @@ export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handle
     maxLength?: number;
     label: ILabelProps;
     handleChange: (value: string) => void;
+    labelClassName?: string;
 }
 declare const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
 export default AnimatedLabelInput;

package/package.json

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

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

@@ -24,14 +24,14 @@ const InputLabel: FC<IInputLabelProps> = ({
 	label
 }: IInputLabelProps) => {
 	const labelStyles = cn(
-		"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 },
+		"z-[2] ",
 		{ "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] ": isPlaceholder && isActive },
-		{ "text-xs text-red-500 px-1 top-[10px] ": isPlaceholder && isError },
-		{ "text-red-500 ": !isPlaceholder && isError },
-		{ "text-gray-500/[.5]": isDisabled }
+		{ "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-gray-500/[.5]": isDisabled },
+		{ "inline-block font-medium transition-all text-sm text-gray-700 mb-1": !isPlaceholder }
 	)
 	if (!label) return null
 	return (

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

@@ -5,47 +5,34 @@ const meta: Meta<typeof AnimatedLabelInput> = {
 	title: "Design System/organisms/Animated Label Input",
 	component: AnimatedLabelInput,
 	tags: ["autodocs"],
-	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 />
-		}
-	]
+	argTypes: {}
+}
+const DefaultArgs: IAnimatedLabelInputProps = {
+	id: "test",
+	containerStyles: "w-full",
+	label: {
+		display: "Label with White BG"
+	},
+	handleChange: (value: string) => {
+		console.log(value)
+	},
+	type: "text",
+	value: ""
 }
 
 export default meta
 type Story = StoryObj<typeof AnimatedLabelInput>
-export const DefaultAnimatedLabelInputsStory: Story = {
-	args: {
-		id: "test",
-		label: {
-			display: "Label"
-		}
-	} as IAnimatedLabelInputProps
-}
-export const DefaultAnimatedLabelInputsDarkBGStory: Story = {
+
+export const DefaultStory: Story = {
 	args: {
-		id: "test",
-		label: {
-			display: "Label with Dark BG"
-		},
-		value: "Value"
+		...DefaultArgs
 	} as IAnimatedLabelInputProps
 }
 
-export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
+export const WithPlaceHolderStory: Story = {
 	args: {
-		id: "test",
-		label: {
-			display: "Label"
-		},
+		...DefaultArgs,
+		label: { display: "label with placeholder" },
 		placeholder: "Placeholder"
 	} as IAnimatedLabelInputProps
 }

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -17,6 +17,7 @@ export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handle
 	maxLength?: number
 	label: ILabelProps
 	handleChange: (value: string) => void
+	labelClassName?: string
 }
 
 const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
@@ -31,6 +32,7 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 		isShowCounter,
 		maxLength,
 		handleChange,
+		labelClassName,
 		...input
 	} = props
 
@@ -53,7 +55,7 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 				/>
 				<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",
+						"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:!bg-label-gradient-focus group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
@@ -61,7 +63,7 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 						isError && "!text-red-600"
 					)}
 				>
-					<label htmlFor={id}>
+					<label htmlFor={id} className={labelClassName}>
 						{label.display}
 						{required && <span className="text-red-600 ml-1">*</span>}
 					</label>

package/tailwind.config.js

@@ -40,8 +40,8 @@ module.exports = {
 		},
 		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)"
+				"label-gradient-focus": "linear-gradient(to top, #FFF 10px, transparent 10px)",
+				"label-gradient-idle": "linear-gradient(to top, #FFF 10px, transparent 10px)"
 			}),
 			gridTemplateColumns: {
 				// Simple 16 column grid