@agility/plenum-ui 2.0.7 → 2.0.9

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.7",
+	"version": "2.0.9",
 	"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
@@ -159,7 +165,7 @@ const _Button = (
 				{ "px-[17px] py-[9px] text-base": size === "lg" },
 				{ "px-[25px] py-[13px] text-base": size === "xl" },
 				{
-					"bg-violet-800 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
+					"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
 						actionType === "primary"
 				},
 				{
@@ -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