@agility/plenum-ui 2.2.4 → 2.2.6

package/dist/tailwind.css

@@ -1940,8 +1940,8 @@ select {
   min-height: 0px !important;
 }
 
-.min-h-\[38px\] {
-  min-height: 38px;
+.min-h-\[20px\] {
+  min-height: 20px;
 }
 
 .w-1 {

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

@@ -24,6 +24,7 @@ export interface ISelectProps {
     className?: string;
     onFocus?: () => void;
     onBlur?: () => void;
+    message?: string;
 }
 declare const Select: React.FC<ISelectProps>;
 export default Select;

package/package.json

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

package/stories/molecules/inputs/InputCounter/InputCounter.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import Paragraph from "../../../atoms/Typography/Paragraph/Paragraph";
+import Paragraph from "@/stories/atoms/Typography/Paragraph/Paragraph";
 
 export interface IInputCounterProps {
 	/** Counter limit */

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

@@ -3,7 +3,7 @@
 //@ts-ignore
 import React, { FC } from "react";
 import { default as cn } from "classnames";
-import Label from "../../../atoms/Typography/Label/Label";
+import Label from "@/stories/atoms/Typography/Label/Label";
 
 export interface IInputLabelProps {
 	/** Prop comment */

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

@@ -3,7 +3,7 @@ import { default as cn } from "classnames";
 import InputLabel from "../InputLabel";
 import InputField, { AcceptedInputTypes } from "../InputField";
 import InputCounter from "../InputCounter";
-import Paragraph from "../../../atoms/Typography/Paragraph/Paragraph";
+import Paragraph from "@/stories/atoms/Typography/Paragraph/Paragraph";
 
 export interface ITextInputProps {
 	/** Input type*/

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

@@ -57,7 +57,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 		{ "border-red-500 shadow-none": isError }
 	);
 	const wrapperStyles = cn(
-		"relative flex items-center min-h-[38px]",
+		"relative flex items-center min-h-[20px]",
 		{ "opacity-50": isDisabled },
 		{ "rounded-sm border border-1 px-3 border-gray-200": hasBorder },
 		{ "py-3": hasBorder && message },

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Select from "./Select"
+import type { Meta, StoryObj } from "@storybook/react";
+import Select from "./Select";
 
 const meta: Meta<typeof Select> = {
 	title: "Design System/Molecules/Inputs/Select",
@@ -13,15 +13,15 @@ const meta: Meta<typeof Select> = {
 					<div className="bg-transparent-black-03 rounded p-6">
 						<Story />
 					</div>
-				)
+				);
 			}
-			return <Story />
+			return <Story />;
 		}
 	]
-}
+};
 
-export default meta
-type TStory = StoryObj<typeof Select>
+export default meta;
+type TStory = StoryObj<typeof Select>;
 
 export const DefaultSelect: TStory = {
 	args: {
@@ -34,9 +34,10 @@ export const DefaultSelect: TStory = {
 		],
 		isDisabled: false,
 		isError: false,
-		isRequired: false
+		isRequired: false,
+		message: "Message"
 	}
-}
+};
 export const DefaultSelectDarkBG: TStory = {
 	args: {
 		label: "Label",
@@ -48,6 +49,7 @@ export const DefaultSelectDarkBG: TStory = {
 		],
 		isDisabled: false,
 		isError: false,
-		isRequired: false
+		isRequired: false,
+		message: "Message"
 	}
-}
+};

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import InputLabel from "@/stories/molecules/inputs/InputLabel";
 import { useId } from "@/utils/useId";
 import { default as cn } from "classnames";
+import Paragraph from "@/stories/atoms/Typography/Paragraph/Paragraph";
 
 export interface ISimpleSelectOptions {
 	label: string;
@@ -28,6 +29,7 @@ export interface ISelectProps {
 	className?: string;
 	onFocus?: () => void;
 	onBlur?: () => void;
+	message?: string;
 }
 const Select: React.FC<ISelectProps> = ({
 	label,
@@ -41,7 +43,8 @@ const Select: React.FC<ISelectProps> = ({
 	value,
 	className,
 	onFocus,
-	onBlur
+	onBlur,
+	message
 }) => {
 	const [selectedOption, setSelectedOption] = useState<string>(value || options[0].value);
 	const uniqueID = useId();
@@ -87,6 +90,11 @@ const Select: React.FC<ISelectProps> = ({
 					);
 				})}
 			</select>
+			{message && (
+				<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500"}>
+					{message}
+				</Paragraph>
+			)}
 		</div>
 	);
 };