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,