@agility/plenum-ui 2.0.0-rc47 → 2.0.0-rc49

package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx

@@ -1,125 +1,125 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import ButtonDropdown from "."
-import { IItemProp } from "../DropdownComponent"
-
-const meta: Meta<typeof ButtonDropdown> = {
-	title: "Design System/Organisms/Button Dropdown",
-	component: ButtonDropdown,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-const dropdownDataWithIcons: IItemProp[][] = [
-	[
-		{
-			icon: {
-				icon: "IconCopy"
-
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			iconPosition: "leading",
-			key: "Copy",
-			label: "Copy The Thing",
-			onClick: () => {
-
-			}
-		}
-	],
-	[
-		{
-			icon: {
-				icon: "IconFolderPlus"
-				// name: "IconFolderPlus",
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			key: "Add to Batch",
-			label: "Add to Batch",
-			onClick: () => {
-				console.log("Add to Batch action")
-			}
-		},
-		{
-			icon: {
-				icon: "IconEye",
-				//pos: "leading",
-				className: "h-5 w-5",
-				outline: false
-			},
-			iconPosition: "leading",
-			key: "View Batch",
-			label: "View Batch",
-			onClick: () => {
-				console.log("View Batch action")
-			}
-		}
-	],
-	[
-		{
-			icon: {
-				icon: "IconTrash"
-
-				// pos: "leading",
-				// className: "h-5 w-5",
-				// outline: false
-			},
-			key: "Delete",
-			label: "Delete",
-			onClick: () => {
-				console.log("Delete action")
-			},
-			isEmphasized: true
-		}
-	]
-]
-
-export default meta
-type Story = StoryObj<typeof ButtonDropdown>
-
-export const Primary: Story = {
-	args: {
-		button: {
-			label: "Primary",
-			actionType: "primary"
-		},
-		dropDown: {
-			items: dropdownDataWithIcons,
-			label: "Dropdown",
-			id: "dropdown-primary"
-		},
-		offsetOptions: {
-			crossAxis: 0,
-			mainAxis: 0, //up/down
-			alignmentAxis: 0 //left/right
-		},
-		placement: "bottom-end"
-	}
-}
-export const Secondary: Story = {
-	args: {
-		button: {
-			label: "Secondary",
-			actionType: "secondary"
-		},
-		dropDown: {
-			label: "Dropdown",
-			id: "dropdown-secondary",
-			items: dropdownDataWithIcons
-		},
-		placement: "bottom-end"
-	}
-}
-export const Alternative: Story = {
-	args: {
-		button: {
-			label: "Alternative",
-			actionType: "alternative"
-		},
-		dropDown: {
-			label: "Dropdown",
-			id: "dropdown-secondary",
-			items: dropdownDataWithIcons
-		},
-		placement: "bottom-end"
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import ButtonDropdown from "."
+import { IItemProp } from "../DropdownComponent"
+
+const meta: Meta<typeof ButtonDropdown> = {
+	title: "Design System/Organisms/Button Dropdown",
+	component: ButtonDropdown,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+const dropdownDataWithIcons: IItemProp[][] = [
+	[
+		{
+			icon: {
+				icon: "IconCopy"
+
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			iconPosition: "leading",
+			key: "Copy",
+			label: "Copy The Thing",
+			onClick: () => {
+
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconFolderPlus"
+				// name: "IconFolderPlus",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Add to Batch",
+			label: "Add to Batch",
+			onClick: () => {
+				console.log("Add to Batch action")
+			}
+		},
+		{
+			icon: {
+				icon: "IconEye",
+				//pos: "leading",
+				className: "h-5 w-5",
+				outline: false
+			},
+			iconPosition: "leading",
+			key: "View Batch",
+			label: "View Batch",
+			onClick: () => {
+				console.log("View Batch action")
+			}
+		}
+	],
+	[
+		{
+			icon: {
+				icon: "IconTrash"
+
+				// pos: "leading",
+				// className: "h-5 w-5",
+				// outline: false
+			},
+			key: "Delete",
+			label: "Delete",
+			onClick: () => {
+				console.log("Delete action")
+			},
+			isEmphasized: true
+		}
+	]
+]
+
+export default meta
+type Story = StoryObj<typeof ButtonDropdown>
+
+export const Primary: Story = {
+	args: {
+		button: {
+			label: "Primary",
+			actionType: "primary"
+		},
+		dropDown: {
+			items: dropdownDataWithIcons,
+			label: "Dropdown",
+			id: "dropdown-primary"
+		},
+		offsetOptions: {
+			crossAxis: 0,
+			mainAxis: 0, //up/down
+			alignmentAxis: 0 //left/right
+		},
+		placement: "bottom-end"
+	}
+}
+export const Secondary: Story = {
+	args: {
+		button: {
+			label: "Secondary",
+			actionType: "secondary"
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-secondary",
+			items: dropdownDataWithIcons
+		},
+		placement: "bottom-end"
+	}
+}
+export const Alternative: Story = {
+	args: {
+		button: {
+			label: "Alternative",
+			actionType: "alternative"
+		},
+		dropDown: {
+			label: "Dropdown",
+			id: "dropdown-secondary",
+			items: dropdownDataWithIcons
+		},
+		placement: "bottom-end"
+	}
+}

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -1,86 +1,86 @@
-import React, { FC } from "react"
-import { default as cn } from "classnames"
-import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
-
-import { DynamicIcon } from "@/stories/atoms/icons"
-import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent"
-
-export interface IButtonDropdownProps {
-	button: IButtonProps
-	dropDown: IDropdownProps
-	placement?: IDropdownProps["placement"]
-	offsetOptions?: IDropdownProps["offsetOptions"]
-}
-
-/**
- * Primary UI component for user interaction
- */
-const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement = "bottom-end", offsetOptions }) => {
-	return (
-		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
-			<Button
-				{...{
-					...button,
-					className: cn(
-						button.className,
-						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
-					)
-				}}
-			/>
-			<div
-				className={cn(
-					"w-[1px] rt",
-					button.actionType === "primary" ? "bg-purple-700 " : "",
-					button.actionType === "secondary" ? "bg-purple-200" : "",
-					button.actionType === "alternative" ? "bg-gray-300" : ""
-				)}
-			></div>
-			<Dropdown
-				{...{
-					...(dropDown as IDropdownProps),
-					CustomDropdownTrigger: (
-						<DynamicIcon
-							{...{
-								icon: "IconChevronDown",
-								className: cn("h-5 w-5", {
-									"text-white": button.actionType === "primary",
-									"text-purple-700": button.actionType === "secondary",
-									"text-gray-700": button.actionType === "alternative"
-								})
-							}}
-						/>
-					),
-					buttonClassname: cn(
-						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
-						button.actionType === "primary"
-							? cn(
-									"border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:bg-purple-800 fill-white",
-									"disabled:bg-purple-400 disabled:text-white disabled:hover:none disabled:active:bg-purple-400 disabled:border-purple-400"
-							  )
-							: "",
-						button.actionType === "secondary"
-							? cn(
-									"border-purple-50 bg-purple-50 text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:border-purple-300 active:bg-purple-300 fill-purple-700",
-									"disabled:bg-purple-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-purple-50 disabled:border-purple-50"
-							  )
-							: "",
-						button.actionType === "alternative"
-							? cn(
-									"border-gray-300 bg-white text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100",
-									"disabled:bg-gray-100 disabled:text-gray-500 disabled:hover:none disabled:active:bg-gray-100 disabled:border-gray-300"
-							  )
-							: ""
-					),
-					offsetOptions: offsetOptions ?? {
-						crossAxis: 0,
-						mainAxis: -4, //up/down
-						alignmentAxis: 0 //left/right
-					},
-					placement
-				}}
-			/>
-			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />
-		</div>
-	)
-}
-export default ButtonDropdown
+import React, { FC } from "react"
+import { default as cn } from "classnames"
+import Button, { IButtonProps } from "@/stories/atoms/buttons/Button"
+
+import { DynamicIcon } from "@/stories/atoms/icons"
+import Dropdown, { IDropdownProps, defaultClassNames } from "../DropdownComponent"
+
+export interface IButtonDropdownProps {
+	button: IButtonProps
+	dropDown: IDropdownProps
+	placement?: IDropdownProps["placement"]
+	offsetOptions?: IDropdownProps["offsetOptions"]
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement = "bottom-end", offsetOptions }) => {
+	return (
+		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
+			<Button
+				{...{
+					...button,
+					className: cn(
+						button.className,
+						"!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
+					)
+				}}
+			/>
+			<div
+				className={cn(
+					"w-[1px] rt",
+					button.actionType === "primary" ? "bg-purple-700 " : "",
+					button.actionType === "secondary" ? "bg-purple-200" : "",
+					button.actionType === "alternative" ? "bg-gray-300" : ""
+				)}
+			></div>
+			<Dropdown
+				{...{
+					...(dropDown as IDropdownProps),
+					CustomDropdownTrigger: (
+						<DynamicIcon
+							{...{
+								icon: "IconChevronDown",
+								className: cn("h-5 w-5", {
+									"text-white": button.actionType === "primary",
+									"text-purple-700": button.actionType === "secondary",
+									"text-gray-700": button.actionType === "alternative"
+								})
+							}}
+						/>
+					),
+					buttonClassname: cn(
+						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						button.actionType === "primary"
+							? cn(
+									"border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:bg-purple-800 fill-white",
+									"disabled:bg-purple-400 disabled:text-white disabled:hover:none disabled:active:bg-purple-400 disabled:border-purple-400"
+							  )
+							: "",
+						button.actionType === "secondary"
+							? cn(
+									"border-purple-50 bg-purple-50 text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:border-purple-300 active:bg-purple-300 fill-purple-700",
+									"disabled:bg-purple-50 disabled:text-grey-50 disabled:hover:none disabled:active:bg-purple-50 disabled:border-purple-50"
+							  )
+							: "",
+						button.actionType === "alternative"
+							? cn(
+									"border-gray-300 bg-white text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100",
+									"disabled:bg-gray-100 disabled:text-gray-500 disabled:hover:none disabled:active:bg-gray-100 disabled:border-gray-300"
+							  )
+							: ""
+					),
+					offsetOptions: offsetOptions ?? {
+						crossAxis: 0,
+						mainAxis: -4, //up/down
+						alignmentAxis: 0 //left/right
+					},
+					placement
+				}}
+			/>
+			<div className="hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" />
+		</div>
+	)
+}
+export default ButtonDropdown

package/stories/organisms/ButtonDropdown/index.tsx

@@ -1,3 +1,3 @@
-import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
-export type { IButtonDropdownProps }
-export default ButtonDropdown
+import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown"
+export type { IButtonDropdownProps }
+export default ButtonDropdown

package/stories/organisms/DropdownComponent/Dropdown.stories.tsx

@@ -1,73 +1,73 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { DynamicIcon } from "@/stories/atoms/icons"
-import { dropdownDataBase, dropdownDataWithIcons } from "./dropdownItems"
-import Dropdown, { defaultClassNames } from "./DropdownComponent"
-
-const meta: Meta<typeof Dropdown> = {
-	title: "Design System/Organisms/Dropdown",
-	component: Dropdown,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-type Story = StoryObj<typeof Dropdown>
-
-const IconElement = () => (
-	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"IconDotsVertical"} />
-)
-const defaultArgs: Story["args"] = {
-	items: [...dropdownDataBase],
-	label: "Dropdown",
-
-	placement: "bottom-end"
-}
-export const WithLabel: Story = {
-	args: {
-		...defaultArgs
-	}
-}
-
-export const CustomTrigger: Story = {
-	args: {
-		...defaultArgs,
-		CustomDropdownTrigger: <IconElement />
-	}
-}
-export const WithLabelAndIcons: Story = {
-	args: {
-		...defaultArgs,
-		items: [...dropdownDataWithIcons]
-	}
-}
-export const WithCustomItemLabelsAndIcons: Story = {
-	args: {
-		...defaultArgs,
-		items: [
-			...dropdownDataWithIcons,
-			[
-				{
-					icon: { icon: "Icon123" },
-					label: (
-						<div className="flex items-baseline gap-x-2">
-							sdfsdf{" "}
-							<div className="flex space-x-1">
-								<div className="h-1 w-1 animate-[bounce_1s_infinite] rounded-full bg-gray-500"></div>
-								<div className="h-1 w-1 animate-[bounce_1s_infinite_0.2s] rounded-full bg-gray-500"></div>
-								<div className="h-1 w-1 animate-[bounce_1s_infinite_0.4s] rounded-full bg-gray-500"></div>
-							</div>
-						</div>
-					),
-					key: "sdfsdf"
-				}
-			]
-		]
-	}
-}
-export const WithIcons: Story = {
-	args: {
-		...defaultArgs,
-		items: [...dropdownDataWithIcons],
-		CustomDropdownTrigger: <IconElement />
-	}
-}
-export default meta
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { DynamicIcon } from "@/stories/atoms/icons"
+import { dropdownDataBase, dropdownDataWithIcons } from "./dropdownItems"
+import Dropdown, { defaultClassNames } from "./DropdownComponent"
+
+const meta: Meta<typeof Dropdown> = {
+	title: "Design System/Organisms/Dropdown",
+	component: Dropdown,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+type Story = StoryObj<typeof Dropdown>
+
+const IconElement = () => (
+	<DynamicIcon className="h-5 w-5 text-gray-400 hover:text-gray-600" icon={"IconDotsVertical"} />
+)
+const defaultArgs: Story["args"] = {
+	items: [...dropdownDataBase],
+	label: "Dropdown",
+
+	placement: "bottom-end"
+}
+export const WithLabel: Story = {
+	args: {
+		...defaultArgs
+	}
+}
+
+export const CustomTrigger: Story = {
+	args: {
+		...defaultArgs,
+		CustomDropdownTrigger: <IconElement />
+	}
+}
+export const WithLabelAndIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [...dropdownDataWithIcons]
+	}
+}
+export const WithCustomItemLabelsAndIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [
+			...dropdownDataWithIcons,
+			[
+				{
+					icon: { icon: "Icon123" },
+					label: (
+						<div className="flex items-baseline gap-x-2">
+							sdfsdf{" "}
+							<div className="flex space-x-1">
+								<div className="h-1 w-1 animate-[bounce_1s_infinite] rounded-full bg-gray-500"></div>
+								<div className="h-1 w-1 animate-[bounce_1s_infinite_0.2s] rounded-full bg-gray-500"></div>
+								<div className="h-1 w-1 animate-[bounce_1s_infinite_0.4s] rounded-full bg-gray-500"></div>
+							</div>
+						</div>
+					),
+					key: "sdfsdf"
+				}
+			]
+		]
+	}
+}
+export const WithIcons: Story = {
+	args: {
+		...defaultArgs,
+		items: [...dropdownDataWithIcons],
+		CustomDropdownTrigger: <IconElement />
+	}
+}
+export default meta