@agility/plenum-ui 2.1.26 → 2.1.28

package/dist/tailwind.css

@@ -79050,6 +79050,11 @@ select {
   background-color: rgb(88 0 212 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-red-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
@@ -79216,6 +79221,16 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:\!ring-red-500:focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) !important;
+}
+
+.focus-visible\:\!ring-yellow-500:focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity, 1)) !important;
+}
+
 .focus-visible\:ring-purple-600:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity, 1));
@@ -79250,6 +79265,11 @@ select {
   background-color: rgb(188 153 238 / var(--tw-bg-opacity, 1));
 }
 
+.active\:bg-red-100:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
 .active\:bg-violet-800:active {
   --tw-bg-opacity: 1;
   background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));
@@ -79276,6 +79296,11 @@ select {
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity, 1));
 }
 
+.active\:ring-red-500:active {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
+}
+
 .active\:ring-offset-2:active {
   --tw-ring-offset-width: 2px;
 }
@@ -79315,6 +79340,11 @@ select {
   background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
 }
 
+.disabled\:bg-white:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
 .disabled\:bg-yellow-300:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(255 224 126 / var(--tw-bg-opacity, 1));
@@ -79340,6 +79370,11 @@ select {
   color: rgb(188 153 238 / var(--tw-text-opacity, 1));
 }
 
+.disabled\:text-red-300:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
+
 .disabled\:text-transparent-black-30:disabled {
   color: rgba(0, 0, 0, 0.3);
 }
@@ -79353,6 +79388,12 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.disabled\:\!ring-0:disabled {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
 .disabled\:focus-visible\:ring-0:focus-visible:disabled {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributeAnchorTarget } from "react";
 import { UnifiedIconName, IDynamicIconProps } from "../../icons";
-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;

package/dist/types/stories/atoms/buttons/Button/DangerSecondary/DangerSecondary.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "../Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const DangerSecondary: Story;
+export declare const DangerSecondaryDisabled: Story;
+export declare const DangerSecondaryTrailingIcon: Story;
+export declare const DangerSecondaryLeadingIcon: Story;
+export declare const DangerSecondarySimpleIconName: Story;
+export declare const DangerSecondaryExtraSmall: Story;
+export declare const DangerSecondarySmall: Story;
+export declare const DangerSecondaryMedium: Story;
+export declare const DangerSecondaryLarge: Story;
+export declare const DangerSecondaryExtraLarge: Story;

package/dist/types/stories/molecules/inputs/InputLabel/InputLabel.d.ts

@@ -11,6 +11,7 @@ export interface IInputLabelProps {
     label?: string;
     truncateLabel?: boolean;
     fullWidthLabel?: boolean;
+    noMarginBottom?: boolean;
 }
 /** Comment */
 declare const InputLabel: FC<IInputLabelProps>;

package/package.json

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

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/molecules/inputs/InputLabel/InputLabel.tsx

@@ -16,6 +16,7 @@ export interface IInputLabelProps {
 	label?: string;
 	truncateLabel?: boolean;
 	fullWidthLabel?: boolean;
+	noMarginBottom?: boolean;
 }
 
 /** Comment */
@@ -28,7 +29,8 @@ const InputLabel: FC<IInputLabelProps> = ({
 	isError,
 	label,
 	truncateLabel = false,
-	fullWidthLabel = false
+	fullWidthLabel = false,
+	noMarginBottom = false
 }: IInputLabelProps) => {
 	const labelStyles = cn(
 		"z-[2] inline-flex gap-1",
@@ -38,8 +40,9 @@ const InputLabel: FC<IInputLabelProps> = ({
 		{ "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  transition-all text-sm text-gray-700 mb-1": !isPlaceholder },
-		{ "block w-full": fullWidthLabel }
+		{ "inline-block  transition-all text-sm text-gray-700": !isPlaceholder },
+		{ "block w-full": fullWidthLabel },
+		{ "mb-1": !noMarginBottom }
 	);
 
 	if (!label) return null;

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

@@ -88,7 +88,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 					{...props}
 				/>
 			</div>
-			<div className="ml-3 text-sm flex items-center w-full">
+			<div className="ml-2 text-sm flex items-center w-full">
 				<>
 					<InputLabel
 						label={label}
@@ -96,6 +96,7 @@ const Checkbox: FC<ICheckboxProps> = ({
 						id={id}
 						truncateLabel={truncateLabel}
 						fullWidthLabel={fullWidthLabel}
+						noMarginBottom={true}
 					/>
 				</>