Add Progress Items

.changeset/fair-dolls-cheat.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add progressTick and progressOutstanding

src/components/Progress/ProgressItems.stories.tsx

@@ -0,0 +1,90 @@
+import { Meta } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
+import { ProgressOutstanding, ProgressTick, progressTickVariants } from "./index";
+import React from "react";
+
+const meta = {
+	title: "Elements/Progress",
+	component: ProgressOutstanding,
+	parameters: {
+		layout: "centered"
+	},
+	argTypes: {
+		size: {
+			description: "defining the size of the Item",
+			control: "select",
+			defaultValue: "sm",
+			options: ["sm", "md"]
+		}
+	},
+	decorators: [
+		(Story) => (
+			<div className="flex items-center gap-7">
+				<Story />
+			</div>
+		)
+	],
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof ProgressOutstanding>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		size: "sm"
+	},
+	render: ({ size }) => (
+		<>
+			<ProgressOutstanding size={size} />
+			<ProgressTick size={size}>
+				<svg
+					className={progressTickVariants({ size })}
+					viewBox="0 0 24 24"
+					fill="black"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
+					/>
+				</svg>
+			</ProgressTick>
+		</>
+	)
+};
+
+export const TickStory: Story = {
+	name: "Progress Tick",
+	args: {
+		size: "md"
+	},
+	render: ({ size }) => (
+		<ProgressTick size={size}>
+			<svg
+				className={progressTickVariants({ size: size })}
+				viewBox="0 0 24 24"
+				fill="black"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
+				/>
+			</svg>
+		</ProgressTick>
+	)
+};
+
+export const OutstandingStory: Story = {
+	name: "Progress Outstanding",
+	args: {
+		size: "md"
+	},
+	render: ({ size }) => <ProgressOutstanding size={size} />
+};

src/components/Progress/ProgressItems.tsx

@@ -0,0 +1,66 @@
+import React, { HTMLAttributes } from "react";
+import { cn } from "../../utilities";
+import { cva, VariantProps } from "class-variance-authority";
+
+export const progressTickCircleVariants = cva(
+	"shrink-0 flex items-center justify-center rounded-rounded border-success-300 bg-success-50",
+	{
+		variants: {
+			size: {
+				sm: "h-[28px] w-[28px] border-2",
+				md: "h-7 w-7 border-4"
+			}
+		},
+		defaultVariants: {
+			size: "sm"
+		}
+	}
+);
+
+export const progressTickVariants = cva("fill-success-300", {
+	variants: {
+		size: {
+			sm: "h-3 w-3",
+			md: "h-[28px] w-[28px]"
+		}
+	},
+	defaultVariants: {
+		size: "sm"
+	}
+});
+
+export function ProgressTick({
+	className,
+	children,
+	size,
+	...rest
+}: HTMLAttributes<HTMLDivElement> & VariantProps<typeof progressTickCircleVariants>) {
+	return (
+		<div {...rest} className={cn(progressTickCircleVariants({ size }), className)}>
+			{children}
+		</div>
+	);
+}
+
+export const progressOutstandingVariants = cva(
+	"rounded-rounded border-dashed border-neutral-300 bg-theme-surface-tertiary",
+	{
+		variants: {
+			size: {
+				sm: "h-[28px] w-[28px] border-2",
+				md: "h-7 w-7 border-4"
+			}
+		},
+		defaultVariants: {
+			size: "sm"
+		}
+	}
+);
+
+export function ProgressOutstanding({
+	className,
+	size,
+	...rest
+}: HTMLAttributes<HTMLDivElement> & VariantProps<typeof progressOutstandingVariants>) {
+	return <div {...rest} className={cn(progressOutstandingVariants({ size }), className)}></div>;
+}

src/components/Progress/index.tsx

@@ -0,0 +1 @@
+export * from "./ProgressItems";

src/components/index.ts

@@ -16,3 +16,4 @@ export * from "./Tooltip";
 export * from "./Checkbox";
 export * from "./Toast";
 export * from "./Dialog";
+export * from "./Progress";