feat: DataBlock component

src/components/requirements/DataBlock.tsx

@@ -0,0 +1,42 @@
+import { Skeleton } from "@/components/ui/Skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { Warning } from "@phosphor-icons/react/dist/ssr";
+import type { PropsWithChildren } from "react";
+
+type Props = {
+  isLoading?: boolean;
+  error?: string;
+};
+
+const DataBlock = ({
+  isLoading,
+  error,
+  children,
+}: PropsWithChildren<Props>): JSX.Element => {
+  if (isLoading) return <Skeleton className="inline w-24" />;
+
+  return (
+    <Tooltip open={error ? undefined : false}>
+      <TooltipTrigger asChild>
+        <span className="break-words rounded-md bg-blackAlpha px-1.5 py-0.5 text-sm dark:bg-blackAlpha-hard">
+          {error && (
+            <Warning
+              weight="bold"
+              className="-top-px relative mr-1.5 inline-flex text-icon-warning"
+            />
+          )}
+          <span className="font-mono">{children}</span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <p>{error}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export { DataBlock };

src/stories/requirements/DataBlock.stories.tsx

@@ -0,0 +1,37 @@
+import { DataBlock } from "@/components/requirements/DataBlock";
+import { Card } from "@/components/ui/Card";
+import { TooltipProvider } from "@/components/ui/Tooltip";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof DataBlock> = {
+  title: "Requirement building blocks/DataBlock",
+  component: DataBlock,
+  decorators: (Story) => (
+    <TooltipProvider>
+      <Card className="p-4">
+        <span>{"This is a "}</span>
+        <Story />
+        <span>{" example"}</span>
+      </Card>
+    </TooltipProvider>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataBlock>;
+
+export const Default: Story = {
+  args: {
+    children: "DataBlock",
+    error: "",
+  },
+};
+
+export const ErrorState: Story = {
+  name: "Error state",
+  args: {
+    ...Default.args,
+    error: "An error occurred",
+  },
+};

src/styles/globals.css

@@ -63,6 +63,17 @@ html {
   --blue-800: #1e40af;
   --blue-900: #1e3a8a;
 
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-200: #fed7aa;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #c2410c;
+  --orange-800: #9a3412;
+  --orange-900: #7c2d12;
+
   --red-50: #fef2f2;
   --red-100: #fee2e2;
   --red-200: #fecaca;
@@ -156,6 +167,7 @@ html {
 
   --icon-success: var(--green-500);
   --icon-error: var(--red-500);
+  --icon-warning: var(--orange-500);
 }
 
 .dark {
@@ -213,6 +225,7 @@ html {
 
   --icon-success: var(--green-400);
   --icon-error: var(--red-400);
+  --icon-warning: var(--orange-300);
 }
 
 body {

tailwind.config.ts

@@ -12,11 +12,11 @@ const config = {
   ],
   prefix: "",
   theme: {
-    fontFamily: {
-      sans: ["var(--font-inter,sans-serif)"],
-      display: ["var(--font-dystopian,sans-serif)"],
-    },
     extend: {
+      fontFamily: {
+        sans: ["var(--font-inter,sans-serif)"],
+        display: ["var(--font-dystopian,sans-serif)"],
+      },
       colors: {
         background: "var(--background)",
         foreground: {
@@ -71,8 +71,19 @@ const config = {
         "scroll-thumb": "var(--scroll-thumb)",
         icon: {
           success: "var(--icon-success)",
-          error: "var(--icon-error)"
-        }
+          error: "var(--icon-error)",
+          warning: "var(--icon-warning)",
+        },
+        blackAlpha: {
+          DEFAULT: "var(--blackAlpha)",
+          medium: "var(--blackAlpha-medium)",
+          hard: "var(--blackAlpha-hard)",
+        },
+        whiteAlpha: {
+          DEFAULT: "var(--whiteAlpha)",
+          medium: "var(--whiteAlpha-medium)",
+          hard: "var(--whiteAlpha-hard)",
+        },
       },
       keyframes: {
         "collapse-open": {