@agility/plenum-ui 2.1.27 → 2.2.1

package/stories/atoms/buttons/Button/Button.tsx

@@ -1,39 +1,36 @@
-import Loader from "stories/atoms/loaders/Loader"
-import { default as cn } from "classnames"
-import React, { HTMLAttributeAnchorTarget, forwardRef } from "react"
-import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
+import { default as cn } from "classnames";
+import React, { HTMLAttributeAnchorTarget, forwardRef } from "react";
+import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons";
 
-// import Loader from "../loaders/loader/Loader"
-
-export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "warning"
+export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "danger-secondary" | "warning";
 
 export interface IButtonProps
 	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
-	actionType?: BTNActionType
+	actionType?: BTNActionType;
 	/** How lg should the button be? - Defaults to 'base'. */
-	size?: "xs" | "sm" | "md" | "lg" | "xl"
+	size?: "xs" | "sm" | "md" | "lg" | "xl";
 	/** The Button's text content. */
-	label: string
+	label: string;
 	/** The Icon to be displayed inside the button. */
-	icon?: IDynamicIconProps | UnifiedIconName
+	icon?: IDynamicIconProps | UnifiedIconName;
 	/** Does the button width grow to fill it's container? */
-	fullWidth?: boolean
+	fullWidth?: boolean;
 	/** Optionally render as anchor tag */
 	asLink?: {
-		href: string
-		target: HTMLAttributeAnchorTarget
-		title?: string
-	}
+		href: string;
+		target: HTMLAttributeAnchorTarget;
+		title?: string;
+	};
 	/** The placement of the icon relative to the text content. */
-	iconPosition?: "trailing" | "leading"
+	iconPosition?: "trailing" | "leading";
 	/** Use an custom svg element */
-	CustomSVGIcon?: JSX.Element
+	CustomSVGIcon?: JSX.Element;
 	/** Is the associated content loading? */
-	isLoading?: boolean
-	className?: string
-	iconObj?: React.ReactNode
-	iconClassName?: string
+	isLoading?: boolean;
+	className?: string;
+	iconObj?: React.ReactNode;
+	iconClassName?: string;
 }
 /**
  * Primary UI component for user interaction
@@ -61,10 +58,10 @@ const _Button = (
 		{ "text-purple-700 h-5 w-5 stroke-[1.5]": actionType === "secondary" },
 		{ "text-gray-400 h-5 w-5 stroke-[1.5]": actionType === "alternative" },
 		{ "text-transparent-black-40 h-5 w-5 stroke-[1.5]": actionType === "warning" }
-	)
+	);
 
 	if (iconClassName) {
-		iconStyles = cn(iconStyles, iconClassName)
+		iconStyles = cn(iconStyles, iconClassName);
 	}
 
 	const loaderColors = cn(
@@ -73,8 +70,8 @@ const _Button = (
 		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
 		{ "border-red-800 border-r-white": actionType === "danger" },
 		{ "border-yellow-800 border-r-transparent-black-70": actionType === "warning" }
-	)
-	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
+	);
+	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" });
 
 	return asLink ? (
 		//@ts-ignore
@@ -164,13 +161,13 @@ const _Button = (
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2 rounded-[3px] !ring-offset-white outline-none 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 transition-all",
+				" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none 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 transition-all",
 				{ "w-full": fullWidth },
-				{ "px-[11px] py-[7px] text-xs": size === "xs" },
-				{ "px-[13px] py-[9px] text-sm": size === "sm" },
-				{ "px-[17px] py-[9px] text-sm": size === "md" },
-				{ "px-[17px] py-[9px] text-base": size === "lg" },
-				{ "px-[25px] py-[13px] text-base": size === "xl" },
+				{ "text-xs": size === "xs" },
+				{ "text-sm": size === "sm" },
+				{ "text-sm": size === "md" },
+				{ "text-base": size === "lg" },
+				{ "text-base": size === "xl" },
 				{
 					"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
 						actionType === "primary"
@@ -184,11 +181,15 @@ const _Button = (
 						actionType === "alternative"
 				},
 				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+					"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 						actionType === "danger"
 				},
 				{
-					" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 <focus-visible:!></focus-visible:!>ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
+					"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 focus:!ring-red-500 active:bg-red-100 active:ring-red-500 focus-within:!ring-red-500 disabled:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
+						actionType === "danger-secondary"
+				},
+				{
+					"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
 						actionType === "warning"
 				},
 				className ? className : ""
@@ -241,9 +242,9 @@ const _Button = (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
 				))}
 		</button>
-	)
-}
+	);
+};
 
-const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button);
 
-export default Button
+export default Button;

package/stories/atoms/buttons/Button/DangerSecondary/DangerSecondary.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "../Button";
+import { defaultIcon } from "../defaultArgs";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+	title: "Design System/atoms/Buttons/Button/DangerSecondary",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+// #region Danger Button Stories
+export const DangerSecondary: Story = {
+	args: {
+		actionType: "danger-secondary",
+		label: "Danger Secondary",
+		onClick: () => {
+			window.alert("Button clicked!");
+		}
+	}
+};
+
+export const DangerSecondaryDisabled: Story = {
+	args: {
+		actionType: "danger-secondary",
+		label: "Danger Secondary",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!");
+		}
+	}
+};
+
+export const DangerSecondaryTrailingIcon: Story = {
+	args: {
+		...DangerSecondary.args,
+		icon: {
+			...defaultIcon,
+			icon: "IconTrash"
+		},
+		iconPosition: "trailing"
+	}
+};
+export const DangerSecondaryLeadingIcon: Story = {
+	args: {
+		...DangerSecondaryTrailingIcon.args,
+		iconPosition: "leading"
+	}
+};
+export const DangerSecondarySimpleIconName: Story = {
+	args: {
+		...DangerSecondary.args,
+		icon: "IconTrash",
+		iconPosition: "leading"
+	}
+};
+export const DangerSecondaryExtraSmall: Story = {
+	args: {
+		...DangerSecondary.args,
+		size: "sm"
+	}
+};
+export const DangerSecondarySmall: Story = {
+	args: {
+		...DangerSecondary.args,
+		size: "sm"
+	}
+};
+export const DangerSecondaryMedium: Story = {
+	args: {
+		...DangerSecondary.args,
+		size: "md"
+	}
+};
+export const DangerSecondaryLarge: Story = {
+	args: {
+		...DangerSecondary.args,
+		size: "lg"
+	}
+};
+export const DangerSecondaryExtraLarge: Story = {
+	args: {
+		...DangerSecondary.args,
+		size: "xl"
+	}
+};
+// #endregion

package/stories/atoms/buttons/Button/tests/Button.test.tsx

@@ -51,43 +51,6 @@ describe("<Button>", () => {
 		});
 	});
 
-	describe("size", () => {
-		it("defaults to size sm", () => {
-			render(<Button {...defaultProps} />);
-
-			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("px-[13px]");
-		});
-
-		it("renders with size xs", () => {
-			render(<Button {...defaultProps} size="xs" />);
-
-			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("px-[11px]");
-		});
-
-		it("renders with size md", () => {
-			render(<Button {...defaultProps} size="md" />);
-
-			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("px-[17px] text-sm");
-		});
-
-		it("renders with size lg", () => {
-			render(<Button {...defaultProps} size="lg" />);
-
-			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("px-[17px] text-base");
-		});
-
-		it("renders with size xl", () => {
-			render(<Button {...defaultProps} size="xl" />);
-
-			const buttonElement = screen.getByRole("button");
-			expect(buttonElement).toHaveClass("px-[25px]");
-		});
-	});
-
 	describe("asLink", () => {
 		it("renders as <a /> when asLink is true", () => {
 			render(<Button {...defaultProps} asLink={{ href: "#", target: "_blank" }} />);

package/stories/atoms/index.ts

@@ -1,6 +1,6 @@
-import Avatar, { IAvatarProps } from "./Avatar"
-import Badge, { IBadgeProps } from "./badges"
-import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons"
+import Avatar, { IAvatarProps } from "./Avatar";
+import Badge, { IBadgeProps } from "./badges";
+import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
 import {
 	DynamicIcon,
 	FAIconName,
@@ -13,9 +13,11 @@ import {
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
-} from "./icons"
-import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders"
-
+} from "./icons";
+import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
+import { Heading, HeadingProps } from "./Typography/Heading";
+import { Label, LabelProps } from "./Typography/Label";
+import { Paragraph, ParagraphProps } from "./Typography/Paragraph";
 export type {
 	IAvatarProps,
 	IBadgeProps,
@@ -25,11 +27,14 @@ export type {
 	IIconWithShadowProps,
 	ILoaderProps,
 	IRadialProgressProps,
+	HeadingProps,
+	LabelProps,
+	ParagraphProps,
 	UnifiedIconName,
 	IconName,
 	FAIconName,
 	BTNActionType
-}
+};
 export {
 	Avatar,
 	Badge,
@@ -39,8 +44,11 @@ export {
 	IconWithShadow,
 	Loader,
 	RadialProgress,
+	Heading,
+	Label,
+	Paragraph,
 	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
-}
+};

package/stories/index.ts

@@ -23,7 +23,13 @@ import {
 	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
-	isUnifiedIconName
+	isUnifiedIconName,
+	Heading,
+	HeadingProps,
+	Label,
+	LabelProps,
+	Paragraph,
+	ParagraphProps
 } from "./atoms";
 // Molecular Components, props, and type guards.
 import {
@@ -107,7 +113,10 @@ export type {
 	ITextInputProps,
 	ISimpleSelectOptions,
 	IAnimatedFormInputWithAddons,
-	MultiSelectItemProps
+	MultiSelectItemProps,
+	HeadingProps,
+	LabelProps,
+	ParagraphProps
 };
 export {
 	Avatar,
@@ -140,5 +149,8 @@ export {
 	TextInput,
 	TextInputSelect,
 	AnimatedFormInputWithAddons,
-	DropdownWithMultiSelect
+	DropdownWithMultiSelect,
+	Heading,
+	Label,
+	Paragraph
 };

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

@@ -1,44 +1,49 @@
-import React, { forwardRef, useEffect, useId, useRef, useState } from "react"
-import { default as cn } from "classnames"
-import InputLabel from "../InputLabel"
-import InputField, { AcceptedInputTypes } from "../InputField"
-import InputCounter from "../InputCounter"
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { default as cn } from "classnames";
+import InputLabel from "../InputLabel";
+import InputField, { AcceptedInputTypes } from "../InputField";
+import InputCounter from "../InputCounter";
 
 export interface ITextInputProps {
 	/** Input type*/
-	type: AcceptedInputTypes
+	type: AcceptedInputTypes;
 	/** Input ID */
-	id?: string
+	id?: string;
 	/** Input Name */
-	name?: string
+	name?: string;
 	/** Label for the input */
-	label?: string
+	label?: string;
 	/** Force the focus state on the input */
-	isFocused?: boolean
+	isFocused?: boolean;
 	/** Error state */
-	isError?: boolean
+	isError?: boolean;
 	/** If field is required */
-	isRequired?: boolean
+	isRequired?: boolean;
 	/** Disabled state */
-	isDisabled?: boolean
+	isDisabled?: boolean;
 	/** Readonly state */
-	isReadonly?: boolean
+	isReadonly?: boolean;
 	/** Set default value */
-	defaultValue?: string
+	defaultValue?: string;
 	/** Message shown under the text field */
-	message?: string
+	message?: string;
 	/** Input character counter */
-	isShowCounter?: boolean
+	isShowCounter?: boolean;
 	/** Max length of input character  */
-	maxLength?: number
+	maxLength?: number;
 	/** Callback on change */
-	handleChange(value: string): void
+	handleChange(value: string): void;
 	/** input value */
-	value: string
+	value: string;
 	/**Placeholder input text*/
-	placeholder?: string
+	placeholder?: string;
 
-	className?: string
+	className?: string;
+
+	/** Callback on focus */
+	onFocus?: React.FocusEventHandler<HTMLInputElement>;
+	/** Callback on blur */
+	onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 
 const TextInput = (
@@ -60,48 +65,56 @@ const TextInput = (
 		placeholder,
 		value: externalValue,
 		className,
+		onFocus,
+		onBlur,
 		...props
 	}: ITextInputProps,
 	ref: React.Ref<HTMLInputElement>
 ) => {
-	const uniqueID = useId()
-	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused))
+	const uniqueID = useId();
+	const [isFocus, setIsFocus] = useState<boolean>(Boolean(isFocused));
 
-	const [value, setValue] = useState<string>(externalValue || defaultValue || "")
-	const inputRef = useRef<HTMLInputElement>(null)
+	const [value, setValue] = useState<string>(externalValue || defaultValue || "");
+	const inputRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
 		//if the external value is updated by the parent component, reset the value in here...
 		if (externalValue !== undefined && externalValue !== null) {
-			setValue(externalValue)
+			setValue(externalValue);
 		}
-	}, [externalValue])
+	}, [externalValue]);
 
 	// set force focus
 	useEffect(() => {
-		const input = inputRef.current
-		if (!input || isFocus === undefined || isDisabled) return
+		const input = inputRef.current;
+		if (!input || isFocus === undefined || isDisabled) return;
 		if (isFocus) {
-			input.focus()
+			input.focus();
 		} else {
-			input.blur()
+			input.blur();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isFocus])
+	}, [isFocus]);
 
 	// set label as active if default value is set
 	useEffect(() => {
-		const input = inputRef.current
-		if (!input || defaultValue === undefined || defaultValue === "") return
-	}, [defaultValue])
+		const input = inputRef.current;
+		if (!input || defaultValue === undefined || defaultValue === "") return;
+	}, [defaultValue]);
 
-	const handleInputFocus = () => setIsFocus(true)
+	const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+		setIsFocus(true);
+		if (onFocus) onFocus(e);
+	};
 	// add other focus effects here
 
-	const handleInputBlur = () => setIsFocus(false)
+	const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+		setIsFocus(false);
+		if (onBlur) onBlur(e);
+	};
 
-	if (!id) id = `input-${uniqueID}`
-	if (!name) name = id
+	if (!id) id = `input-${uniqueID}`;
+	if (!name) name = id;
 
 	return (
 		<div className="relative group">
@@ -118,8 +131,8 @@ const TextInput = (
 				onFocus={handleInputFocus}
 				onBlur={handleInputBlur}
 				handleChange={(v: string) => {
-					setValue(v)
-					handleChange(v)
+					setValue(v);
+					handleChange(v);
 				}}
 				ref={ref}
 				type={type}
@@ -163,8 +176,8 @@ const TextInput = (
 				)}
 			</div>
 		</div>
-	)
-}
+	);
+};
 
-const _TextInput = forwardRef<HTMLInputElement, ITextInputProps>(TextInput)
-export default _TextInput
+const _TextInput = forwardRef<HTMLInputElement, ITextInputProps>(TextInput);
+export default _TextInput;

package/tailwind.config.js

@@ -218,7 +218,7 @@ module.exports = {
 				"rose-900": "#881337"
 			},
 			fontWeight: {
-				medium: 600
+				medium: 500
 			},
 			fontSize: {
 				xs: ["0.75rem", "1rem"],