@agility/plenum-ui 2.0.6 → 2.0.8

package/dist/tailwind.css

@@ -33199,6 +33199,10 @@ select {
   border-right-color: transparent;
 }
 
+.border-r-transparent-black-70 {
+  border-right-color: rgba(0, 0, 0, 0.7);
+}
+
 .border-r-violet-100 {
   --tw-border-opacity: 1;
   border-right-color: rgb(237 233 254 / var(--tw-border-opacity));
@@ -50150,6 +50154,10 @@ select {
   stroke-width: 1;
 }
 
+.stroke-\[1\.5\] {
+  stroke-width: 1.5;
+}
+
 .p-10 {
   padding: 2.5rem;
 }
@@ -57227,6 +57235,14 @@ select {
   color: rgb(19 78 74 / 0.95);
 }
 
+.text-transparent-black-40 {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.text-transparent-black-70 {
+  color: rgba(0, 0, 0, 0.7);
+}
+
 .text-violet-100 {
   --tw-text-opacity: 1;
   color: rgb(237 233 254 / var(--tw-text-opacity));
@@ -58630,6 +58646,11 @@ select {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.ring-yellow-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity));
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -58718,6 +58739,11 @@ select {
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)) !important;
 }
 
+.focus-within\:\!ring-yellow-500:focus-within {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity)) !important;
+}
+
 .focus-within\:ring-purple-600:focus-within {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity));
@@ -58799,6 +58825,11 @@ select {
   background-color: rgb(109 40 217 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-yellow-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(179 142 28 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -58895,6 +58926,11 @@ select {
   --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity)) !important;
 }
 
+.focus\:\!ring-yellow-500:focus {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity)) !important;
+}
+
 .focus\:ring-purple-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity));
@@ -58995,6 +59031,11 @@ select {
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)) !important;
 }
 
+.active\:\!ring-yellow-500:active {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity)) !important;
+}
+
 .active\:ring-purple-600:active {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity));
@@ -59039,6 +59080,16 @@ select {
   background-color: rgb(167 139 250 / var(--tw-bg-opacity));
 }
 
+.disabled\:bg-yellow-300:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 224 126 / var(--tw-bg-opacity));
+}
+
+.disabled\:bg-yellow-400:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 213 83 / var(--tw-bg-opacity));
+}
+
 .disabled\:text-gray-300:disabled {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -59059,6 +59110,14 @@ select {
   color: rgb(188 153 238 / var(--tw-text-opacity));
 }
 
+.disabled\:text-transparent-black-30:disabled {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.disabled\:text-transparent-black-70:disabled {
+  color: rgba(0, 0, 0, 0.7);
+}
+
 .disabled\:text-white:disabled {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

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";
+export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "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/Warning/Warning.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 Warning: Story;
+export declare const WarningDisabled: Story;
+export declare const WarningTrailingIcon: Story;
+export declare const WarningLeadingIcon: Story;
+export declare const WarningSimpleIconName: Story;
+export declare const WarningExtraSmall: Story;
+export declare const WarningSmall: Story;
+export declare const WarningMedium: Story;
+export declare const WarningLarge: Story;
+export declare const WarningExtraLarge: Story;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { IDynamicIconProps } from "@/stories/atoms/icons";
-export interface INestedInputButtonProps {
+export interface INestedInputButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
     /** Icon to be included*/
     icon?: IDynamicIconProps;
     /** CTA label */
@@ -9,9 +9,6 @@ export interface INestedInputButtonProps {
     align: "left" | "right";
     /** Show the CTA without Background color and a border seperator */
     isClear?: boolean;
-    /** Onclick callback */
-    onClickHandler?(): void;
-    buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 }
 declare const NestedInputButton: React.FC<INestedInputButtonProps>;
 export default NestedInputButton;

package/package.json

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

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

@@ -5,7 +5,7 @@ import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 
 // import Loader from "../loaders/loader/Loader"
 
-export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
+export type BTNActionType = "primary" | "secondary" | "alternative" | "danger" | "warning"
 
 export interface IButtonProps
 	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
@@ -55,15 +55,17 @@ const _Button = (
 	ref: React.LegacyRef<HTMLButtonElement>
 ) => {
 	const iconStyles = cn(
-		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
-		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
-		{ "text-gray-400  h-5 w-5": actionType === "alternative" }
+		{ "text-white h-5 w-5 stroke-[1.5]": actionType === "primary" || actionType === "danger" },
+		{ "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" }
 	)
 	const loaderColors = cn(
 		{ "border-r-white": actionType === "primary" },
 		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },
 		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
-		{ "border-red-800 border-r-white": actionType === "danger" }
+		{ "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" })
 
@@ -98,6 +100,10 @@ const _Button = (
 						" 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":
 							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-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
+							actionType === "warning"
+					},
 					className ? className : ""
 				),
 				onClick: props.onClick
@@ -174,6 +180,10 @@ const _Button = (
 					" 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":
 						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":
+						actionType === "warning"
+				},
 				className ? className : ""
 			)}
 			ref={ref}

package/stories/atoms/buttons/Button/Warning/Warning.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/Warning",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+// #region Warning Button Stories
+export const Warning: Story = {
+	args: {
+		actionType: "warning",
+		label: "Warning Zone!",
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
+export const WarningDisabled: Story = {
+	args: {
+		actionType: "warning",
+		label: "Warning Zone!",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
+export const WarningTrailingIcon: Story = {
+	args: {
+		...Warning.args,
+		icon: {
+			...defaultIcon,
+			icon: "IconTrash"
+		},
+		iconPosition: "trailing"
+	}
+}
+export const WarningLeadingIcon: Story = {
+	args: {
+		...WarningTrailingIcon.args,
+		iconPosition: "leading"
+	}
+}
+export const WarningSimpleIconName: Story = {
+	args: {
+		...Warning.args,
+		icon: "IconTrash",
+		iconPosition: "leading"
+	}
+}
+export const WarningExtraSmall: Story = {
+	args: {
+		...Warning.args,
+		size: "sm"
+	}
+}
+export const WarningSmall: Story = {
+	args: {
+		...Warning.args,
+		size: "sm"
+	}
+}
+export const WarningMedium: Story = {
+	args: {
+		...Warning.args,
+		size: "md"
+	}
+}
+export const WarningLarge: Story = {
+	args: {
+		...Warning.args,
+		size: "lg"
+	}
+}
+export const WarningExtraLarge: Story = {
+	args: {
+		...Warning.args,
+		size: "xl"
+	}
+}
+// #endregion

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms/icons"
 import { default as cn } from "classnames"
-export interface INestedInputButtonProps {
+export interface INestedInputButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Icon to be included*/
 	icon?: IDynamicIconProps
 	/** CTA label */
@@ -10,9 +11,6 @@ export interface INestedInputButtonProps {
 	align: "left" | "right"
 	/** Show the CTA without Background color and a border seperator */
 	isClear?: boolean
-	/** Onclick callback */
-	onClickHandler?(): void
-	buttonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 }
 
 const NestedInputButton: React.FC<INestedInputButtonProps> = ({
@@ -20,12 +18,10 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	ctaLabel,
 	align = "right",
 	isClear = false,
-	onClickHandler,
-	buttonProps
+	...props
 }) => {
-	const handleClick = () => {
-		onClickHandler && onClickHandler()
-	}
+	const { ...buttonProps } = props
+	const { onClick } = buttonProps
 	const buttonStyle = cn(
 		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
 		{
@@ -35,10 +31,10 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 			"rounded-l text-gray-500 -mr-px": align === "left"
 		},
 		{
-			"cursor-default": !onClickHandler
+			"cursor-default": !onClick
 		},
 		{
-			"hover:bg-gray-100": onClickHandler && !isClear
+			"hover:bg-gray-100": onClick && !isClear
 		},
 		{
 			"!border-l-white": isClear && align === "right"
@@ -54,7 +50,16 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 		}
 	)
 	return (
-		<button {...{ ...buttonProps, className: buttonStyle, onClick: handleClick }}>
+		<button
+			{...{
+				...buttonProps,
+				className: buttonStyle,
+				onClick: (e) => {
+					e.preventDefault()
+					onClick && onClick(e)
+				}
+			}}
+		>
 			{icon && <DynamicIcon {...{ ...icon, className: "text-gray-400 h-5 w-5" }} />}
 			{ctaLabel && <span>{ctaLabel}</span>}
 		</button>

package/stories/organisms/AnimatedFormInputWithAddons/AnimatedFormInputWithAddons.stories.tsx

@@ -23,7 +23,7 @@ const DefaultArgs: IAnimatedFormInputWithAddons = {
 		icon: { icon: "IconPencil" },
 		align: "right",
 		ctaLabel: "Edit",
-		onClickHandler: () => {
+		onClick: () => {
 			alert("clicked")
 		}
 	}