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

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -1,88 +1,88 @@
-import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
-import { BTNActionType, IButtonProps } from "../Button/Button"
-import { UnifiedIconName } from "../../icons/DynamicIcon"
-
-/**
- * Capsule Style Button
- */
-export interface ICapsuleProps
-	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-	/** Is the button a Primary CTA, alternative or danger button? */
-	actionType: BTNActionType
-	/** How lg should the button be? - Defaults to 'base'. */
-	size?: "xs" | "sm" | "md" | "lg" | "xl"
-	/** The Button's text content. */
-	label: string
-	/** Does the button width grow to fill it's container? */
-	fullWidth?: boolean
-	/** Optionally render as anchor tag */
-	asLink?: {
-		href: string
-		target: HTMLAttributeAnchorTarget
-		title?: string
-	}
-	/** Is the associated content loading? */
-	isLoading?: boolean
-	/**Optional Classname String*/
-	className?: string
-}
-const Capsule = ({
-	actionType = "primary",
-	size = "sm",
-	label,
-	fullWidth = false,
-	asLink,
-	isLoading = false,
-	className,
-	...props
-}: ICapsuleProps) => {
-	const iconStyles = cn(
-		{ "text-white": actionType === "primary" || actionType === "danger" },
-		{ "text-purple-700": actionType === "secondary" },
-		{ "text-gray-700": actionType === "alternative" }
-	)
-	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" }
-	)
-	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
-
-	return (
-		<button
-			type="button"
-			className={cn(
-				"inline-flex items-center justify-center gap-x-2 text-sm font-medium p-2  !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 rounded-[15px]": size === "xs" },
-				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },
-				{ "px-[17px] py-[9px] text-sm rounded-[19px]": size === "md" },
-				{ "px-[17px] py-[9px] text-base rounded-[21px]": size === "lg" },
-				{ "px-[25px] py-[13px] text-base rounded-[25px]": size === "xl" },
-				{
-					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
-				},
-				{
-					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
-						actionType === "secondary"
-				},
-				{
-					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300":
-						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 ":
-						actionType === "danger"
-				},
-				className ? className : ""
-			)}
-			{...props}
-		>
-			{label}
-		</button>
-	)
-}
-
-export default Capsule
+import { default as cn } from "classnames"
+import { HTMLAttributeAnchorTarget } from "react"
+import { BTNActionType, IButtonProps } from "../Button/Button"
+import { UnifiedIconName } from "../../icons/DynamicIcon"
+
+/**
+ * Capsule Style Button
+ */
+export interface ICapsuleProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+	/** Is the button a Primary CTA, alternative or danger button? */
+	actionType: BTNActionType
+	/** How lg should the button be? - Defaults to 'base'. */
+	size?: "xs" | "sm" | "md" | "lg" | "xl"
+	/** The Button's text content. */
+	label: string
+	/** Does the button width grow to fill it's container? */
+	fullWidth?: boolean
+	/** Optionally render as anchor tag */
+	asLink?: {
+		href: string
+		target: HTMLAttributeAnchorTarget
+		title?: string
+	}
+	/** Is the associated content loading? */
+	isLoading?: boolean
+	/**Optional Classname String*/
+	className?: string
+}
+const Capsule = ({
+	actionType = "primary",
+	size = "sm",
+	label,
+	fullWidth = false,
+	asLink,
+	isLoading = false,
+	className,
+	...props
+}: ICapsuleProps) => {
+	const iconStyles = cn(
+		{ "text-white": actionType === "primary" || actionType === "danger" },
+		{ "text-purple-700": actionType === "secondary" },
+		{ "text-gray-700": actionType === "alternative" }
+	)
+	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" }
+	)
+	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
+
+	return (
+		<button
+			type="button"
+			className={cn(
+				"inline-flex items-center justify-center gap-x-2 text-sm font-medium p-2  !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 rounded-[15px]": size === "xs" },
+				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },
+				{ "px-[17px] py-[9px] text-sm rounded-[19px]": size === "md" },
+				{ "px-[17px] py-[9px] text-base rounded-[21px]": size === "lg" },
+				{ "px-[25px] py-[13px] text-base rounded-[25px]": size === "xl" },
+				{
+					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
+				},
+				{
+					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
+						actionType === "secondary"
+				},
+				{
+					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300":
+						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 ":
+						actionType === "danger"
+				},
+				className ? className : ""
+			)}
+			{...props}
+		>
+			{label}
+		</button>
+	)
+}
+
+export default Capsule

package/stories/atoms/buttons/Capsule/Danger/Danger.stories.ts

@@ -1,27 +1,27 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { defaultIcon } from "../../Button/defaultArgs"
-import Capsule from "../Capsule"
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-const meta: Meta<typeof Capsule> = {
-	title: "Design System/atoms/Buttons/Capsule/Danger",
-	component: Capsule,
-	tags: ["autodocs"],
-	parameters: {
-		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
-		}
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof Capsule>
-export const Danger: Story = {
-	args: {
-		label: "Danger",
-		onClick: () => {
-			window.alert("Button clicked!")
-		},
-		actionType: "danger"
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Danger",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Danger: Story = {
+	args: {
+		label: "Danger",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "danger"
+	}
+}

package/stories/atoms/buttons/Capsule/Primary/Primary.stories.ts

@@ -1,27 +1,27 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { defaultIcon } from "../../Button/defaultArgs"
-import Capsule from "../Capsule"
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-const meta: Meta<typeof Capsule> = {
-	title: "Design System/atoms/Buttons/Capsule/Primary",
-	component: Capsule,
-	tags: ["autodocs"],
-	parameters: {
-		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
-		}
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof Capsule>
-export const Primary: Story = {
-	args: {
-		label: "Primary",
-		onClick: () => {
-			window.alert("Button clicked!")
-		},
-		actionType: "primary"
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Primary",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Primary: Story = {
+	args: {
+		label: "Primary",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "primary"
+	}
+}

package/stories/atoms/buttons/Capsule/Secondary/Secondary.stories.ts

@@ -1,27 +1,27 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { defaultIcon } from "../../Button/defaultArgs"
-import Capsule from "../Capsule"
-
-const meta: Meta<typeof Capsule> = {
-	title: "Design System/atoms/Buttons/Capsule/Secondary",
-	component: Capsule,
-	tags: ["autodocs"],
-	parameters: {
-		design: {
-			type: "figma",
-			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
-		}
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof Capsule>
-export const Secondary: Story = {
-	args: {
-		label: "Secondary",
-		onClick: () => {
-			window.alert("Button clicked!")
-		},
-		actionType: "secondary"
-	}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import { defaultIcon } from "../../Button/defaultArgs"
+import Capsule from "../Capsule"
+
+const meta: Meta<typeof Capsule> = {
+	title: "Design System/atoms/Buttons/Capsule/Secondary",
+	component: Capsule,
+	tags: ["autodocs"],
+	parameters: {
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/file/Rb5fJ8hD3pwvLnidgCaGgB/Agility-UI?type=design&node-id=243-12178&mode=design&t=9hpwa8YStpwXksff-4"
+		}
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof Capsule>
+export const Secondary: Story = {
+	args: {
+		label: "Secondary",
+		onClick: () => {
+			window.alert("Button clicked!")
+		},
+		actionType: "secondary"
+	}
+}

package/stories/atoms/buttons/Capsule/index.ts

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

package/stories/atoms/buttons/FloatingActionButton/FloatingActionButton.stories.tsx

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import FloatingActionButton, { IFloatingActionButtonProps } from "./FloatingActionButton"
-
-const meta: Meta<typeof FloatingActionButton> = {
-	title: "Design System/atoms/buttons/FloatingActionButton/FloatingActionButton",
-	component: FloatingActionButton,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof FloatingActionButton>
-export const DefaultFloatingActionButtonStory: Story = {
-	args: {}
-}
+import type { Meta, StoryObj } from "@storybook/react"
+import FloatingActionButton, { IFloatingActionButtonProps } from "./FloatingActionButton"
+
+const meta: Meta<typeof FloatingActionButton> = {
+	title: "Design System/atoms/buttons/FloatingActionButton/FloatingActionButton",
+	component: FloatingActionButton,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof FloatingActionButton>
+export const DefaultFloatingActionButtonStory: Story = {
+	args: {}
+}

package/stories/atoms/buttons/FloatingActionButton/FloatingActionButton.tsx

@@ -1,22 +1,22 @@
-
-import React from  "react"
-import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
-
-export interface IFloatingActionButtonProps {}
-
-const FloatingActionButton: React.FC<IFloatingActionButtonProps> = ({}) => {
-  return (
-   <EmptySectionPlaceholder
-			{...{
-				icon: {
-					icon: "IconCode"
-				},
-				mutedText: "Coming Soon! 🚧",
-				primaryMessage: "We're working on this component. Be sure to check back soon!",
-				actions: []
-			}}
-		/>
-  )
-};
-
-export default FloatingActionButton;
+
+import React from  "react"
+import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
+
+export interface IFloatingActionButtonProps {}
+
+const FloatingActionButton: React.FC<IFloatingActionButtonProps> = ({}) => {
+  return (
+   <EmptySectionPlaceholder
+			{...{
+				icon: {
+					icon: "IconCode"
+				},
+				mutedText: "Coming Soon! 🚧",
+				primaryMessage: "We're working on this component. Be sure to check back soon!",
+				actions: []
+			}}
+		/>
+  )
+};
+
+export default FloatingActionButton;

package/stories/atoms/buttons/FloatingActionButton/index.tsx

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

package/stories/atoms/buttons/index.ts

@@ -1,4 +1,4 @@
-import Button, { BTNActionType, IButtonProps } from "./Button"
-import Capsule, { ICapsuleProps } from "./Capsule"
-export type { IButtonProps, BTNActionType, ICapsuleProps }
-export { Button, Capsule }
+import Button, { BTNActionType, IButtonProps } from "./Button"
+import Capsule, { ICapsuleProps } from "./Capsule"
+export type { IButtonProps, BTNActionType, ICapsuleProps }
+export { Button, Capsule }

package/stories/atoms/crumb/Crumb.stories.tsx

@@ -1,18 +1,18 @@
-
-import type { Meta, StoryObj } from "@storybook/react"
-import Crumb, { ICrumbProps } from "./Crumb"
-
-const meta: Meta<typeof Crumb> = {
-  title: "Design System/atoms/Crumb",
-  component: Crumb,
-  tags: ["autodocs"],
-  argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof Crumb>
-export const DefaultCrumbStory: Story = {
-	args: {
-		
-	}
-}
+
+import type { Meta, StoryObj } from "@storybook/react"
+import Crumb, { ICrumbProps } from "./Crumb"
+
+const meta: Meta<typeof Crumb> = {
+  title: "Design System/atoms/Crumb",
+  component: Crumb,
+  tags: ["autodocs"],
+  argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof Crumb>
+export const DefaultCrumbStory: Story = {
+	args: {
+		
+	}
+}

package/stories/atoms/crumb/Crumb.tsx

@@ -1,22 +1,22 @@
-
-import React from  "react"
-import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
-
-export interface ICrumbProps {}
-
-const Crumb: React.FC<ICrumbProps> = ({}) => {
-  return (
-   <EmptySectionPlaceholder
-			{...{
-				icon: {
-					icon: "IconCode"
-				},
-				mutedText: "Coming Soon! 🚧",
-				primaryMessage: "We're working on this component. Be sure to check back soon!",
-				actions: []
-			}}
-		/>
-  )
-};
-
-export default Crumb;
+
+import React from  "react"
+import EmptySectionPlaceholder from "@/stories/organisms/EmptySectionPlaceholder"
+
+export interface ICrumbProps {}
+
+const Crumb: React.FC<ICrumbProps> = ({}) => {
+  return (
+   <EmptySectionPlaceholder
+			{...{
+				icon: {
+					icon: "IconCode"
+				},
+				mutedText: "Coming Soon! 🚧",
+				primaryMessage: "We're working on this component. Be sure to check back soon!",
+				actions: []
+			}}
+		/>
+  )
+};
+
+export default Crumb;

package/stories/atoms/crumb/index.tsx

@@ -1,3 +1,3 @@
-
-export { default } from './Crumb';
-export * from './Crumb';
+
+export { default } from './Crumb';
+export * from './Crumb';

package/stories/atoms/icons/DynamicIcon.stories.ts

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { DynamicIcon } from "./DynamicIcon"
-
-const meta: Meta<typeof DynamicIcon> = {
-	title: "Design System/atoms/Icons/DynamicIcon",
-	component: DynamicIcon,
-	tags: ["autodocs"]
-}
-
-type Story = StoryObj<typeof DynamicIcon>
-
-export const HeroIconSolid: Story = {
-	args: {
-		icon: "TrashIcon",
-		outline: false
-	}
-}
-export const HeroIconOutline: Story = {
-	args: {
-		icon: "TrashIcon",
-		outline: true
-	}
-}
-export const TablerIconSolid: Story = {
-	args: {
-		icon: "IconTrashFilled",
-		outline: false
-	}
-}
-export const TablerIconOutline: Story = {
-	args: {
-		icon: "IconTrash",
-		outline: true
-	}
-}
-export const FAIcon: Story = {
-	args: {
-		icon: "FaGithub",
-		outline: true
-	}
-}
-
-export default meta
+import type { Meta, StoryObj } from "@storybook/react"
+import { DynamicIcon } from "./DynamicIcon"
+
+const meta: Meta<typeof DynamicIcon> = {
+	title: "Design System/atoms/Icons/DynamicIcon",
+	component: DynamicIcon,
+	tags: ["autodocs"]
+}
+
+type Story = StoryObj<typeof DynamicIcon>
+
+export const HeroIconSolid: Story = {
+	args: {
+		icon: "TrashIcon",
+		outline: false
+	}
+}
+export const HeroIconOutline: Story = {
+	args: {
+		icon: "TrashIcon",
+		outline: true
+	}
+}
+export const TablerIconSolid: Story = {
+	args: {
+		icon: "IconTrashFilled",
+		outline: false
+	}
+}
+export const TablerIconOutline: Story = {
+	args: {
+		icon: "IconTrash",
+		outline: true
+	}
+}
+export const FAIcon: Story = {
+	args: {
+		icon: "FaGithub",
+		outline: true
+	}
+}
+
+export default meta