Add frameworks detail page

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Atoms/ControlItem/ControlItem.stories.tsx

@@ -0,0 +1,27 @@
+import { ControlItem } from "./ControlItem";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/ControlItem",
+    component: ControlItem,
+    argTypes: {},
+} satisfies Meta<typeof ControlItem>;
+
+type Story = StoryObj<typeof ControlItem>;
+
+export const Default: Story = {
+    args: {
+        id: "CC1.1",
+        description:
+            "The entity obtains privacy commitments from vendors and other third parties who have access to personal information to meet the entity’s objectives related to privacy. The entity assesses those parties’ compliance on a periodic and as-needed basis and takes corrective action, if necessary.",
+    },
+    render: (args) => (
+        <div className="p-4 space-y-2" style={{ width: "240px" }}>
+            <ControlItem {...args} />
+            <ControlItem {...args} active />
+            <ControlItem {...args} />
+            <ControlItem {...args} />
+            <ControlItem {...args} />
+        </div>
+    ),
+};

packages/ui/src/Atoms/ControlItem/ControlItem.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes } from "react";
+import { Link } from "react-router";
+import { tv } from "tailwind-variants";
+
+type Props = {
+    active?: boolean;
+    id: string;
+    description?: string;
+    to: string;
+} & HTMLAttributes<HTMLAnchorElement>;
+
+const classNames = tv({
+    slots: {
+        wrapper: "block p-4 space-y-[6px] rounded-xl cursor-pointer text-start",
+        id: "px-[6px] py-[2px] text-base font-medium border border-border-low rounded-lg w-max",
+        description: "text-sm text-txt-tertiary line-clamp-3",
+    },
+    variants: {
+        active: {
+            true: {
+                wrapper: "bg-tertiary-pressed",
+                id: "bg-active",
+            },
+            false: {
+                wrapper: "hover:bg-tertiary-hover",
+                id: "bg-highlight",
+            },
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+
+export function ControlItem({ active, id, description, to, ...props }: Props) {
+    const {
+        wrapper,
+        id: idCls,
+        description: descriptionCls,
+    } = classNames({
+        active,
+    });
+    return (
+        <Link className={wrapper()} to={to} {...props}>
+            <div className={idCls()}>{id}</div>
+            <div className={descriptionCls()}>{description}</div>
+        </Link>
+    );
+}

packages/ui/src/Atoms/Markdown/Markdown.stories.tsx

@@ -11,7 +11,7 @@ type Story = StoryObj<typeof Markdown>;
 
 export const Default: Story = {
     args: {
-        children: `# Siquis facies post
+        content: `# Siquis facies post
 
 ## Venit Ianigenam egressus a tamen terra frater
 

packages/ui/src/Atoms/PropertyRow/PropertyRow.stories.tsx

@@ -18,13 +18,6 @@ export const Default: Story = {
     },
 };
 
-export const Disabled: Story = {
-    args: {
-        ...Default.args,
-        disabled: true,
-    },
-};
-
 export const WithError: Story = {
     args: {
         ...Default.args,

packages/ui/src/Molecules/Combobox/Combobox.stories.tsx

@@ -12,9 +12,6 @@ export default {
 type Story = StoryObj<typeof Combobox>;
 
 export const Default: Story = {
-    args: {
-        open: true,
-    },
     render: () => {
         const [items, setItems] = useState(["a", "b", "c"] as string[]);
         const onSearch = (query: string) => {
@@ -22,10 +19,6 @@ export const Default: Story = {
         };
         return (
             <>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-                Nostrum labore repellat facere voluptatum, in voluptatem eaque
-                quidem nam quod nesciunt repudiandae a illo non placeat nulla.
-                Ratione ipsa at sint?
                 <Combobox onSearch={onSearch}>
                     {items.map((item) => (
                         <ComboboxItem key={item}>{item}</ComboboxItem>

packages/ui/src/Molecules/Dialog/ConfirmDialog.stories.tsx

@@ -1,34 +0,0 @@
-import { Button } from "../../Atoms/Button/Button";
-import { ConfirmDialog } from "./ConfirmDialog";
-import type { Meta, StoryObj } from "@storybook/react";
-
-export default {
-    title: "Atoms/ConfirmDialog",
-    component: ConfirmDialog,
-    argTypes: {},
-} satisfies Meta<typeof ConfirmDialog>;
-
-type Story = StoryObj<typeof ConfirmDialog>;
-
-export const Default: Story = {
-    args: {
-        message:
-            'This will permanently delete the risk "Demo". This action cannot be undone.',
-    },
-    render() {
-        return (
-            <ConfirmDialog
-                message="Are you sure you want to delete this risk?"
-                onConfirm={() => {
-                    return new Promise((resolve) => {
-                        setTimeout(() => {
-                            resolve();
-                        }, 1000);
-                    });
-                }}
-            >
-                <Button variant="danger">Delete this</Button>
-            </ConfirmDialog>
-        );
-    },
-};

packages/ui/src/Molecules/Dialog/Dialog.stories.tsx

@@ -15,7 +15,6 @@ export const Default: Story = {
         return (
             <Dialog
                 {...args}
-                onClose={() => {}}
                 trigger={<Button>Open dialog</Button>}
                 title="Edit profile"
             >

packages/ui/src/Molecules/PageHeader/PageHeader.tsx

@@ -9,7 +9,9 @@ export function PageHeader({ title, description, children }: Props) {
     return (
         <div className="flex justify-between items-start w-full">
             <div className=" space-y-1">
-                <h1 className="text-2xl ">{title}</h1>
+                <h1 className="text-2xl flex gap-4 font-semibold items-center">
+                    {title}
+                </h1>
                 {description && (
                     <p className="text-sm text-txt-secondary">{description}</p>
                 )}

packages/ui/src/index.ts

@@ -33,6 +33,7 @@ export { Table, Thead, Tr, Tbody, Td, Th } from "./Atoms/Table/Table";
 export { Tabs, TabLink } from "./Atoms/Tabs/Tabs";
 export { Markdown } from "./Atoms/Markdown/Markdown";
 export { Dropzone } from "./Atoms/Dropzone/Dropzone";
+export { ControlItem } from "./Atoms/ControlItem/ControlItem";
 
 // Molecules
 export {