@buildcanada/components 0.3.3 → 0.3.5

package/src/content/StatBlock/StatBlock.stories.tsx

@@ -0,0 +1,331 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { StatBlock } from "./StatBlock"
+
+const meta: Meta<typeof StatBlock> = {
+    title: "Components/Content/StatBlock",
+    component: StatBlock,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A component for displaying key statistics with optional trend indicators.
+
+## Usage
+
+\`\`\`tsx
+import { StatBlock } from "@buildcanada/components"
+
+<StatBlock
+  value="$456.2B"
+  label="Federal Spending"
+  change="+8.3%"
+  trend="up"
+/>
+\`\`\`
+
+## With Description
+
+\`\`\`tsx
+<StatBlock
+  value="$1.2T"
+  label="Total Revenue"
+  description="Combined federal and provincial revenues"
+  change="+7.8%"
+  trend="up"
+  size="lg"
+/>
+\`\`\`
+
+## Trend Indicators
+
+- **up**: Green indicator for positive trends
+- **down**: Red indicator for negative trends
+- **neutral**: Gray indicator for no change
+                `,
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["sm", "md", "lg"],
+            description: "Size of the stat display",
+        },
+        trend: {
+            control: "select",
+            options: [undefined, "up", "down", "neutral"],
+            description: "Trend direction for the change indicator",
+        },
+        value: { description: "The main statistic value to display" },
+        label: { description: "Label describing the statistic" },
+        description: { description: "Additional context or description" },
+        change: { description: "Change value (e.g., '+8.3%', '-2.1%')" },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof StatBlock>
+
+export const Default: Story = {
+    args: {
+        value: "$456.2B",
+        label: "Federal Spending",
+        size: "md",
+    },
+}
+
+export const WithDescription: Story = {
+    args: {
+        value: "$456.2B",
+        label: "Federal Spending",
+        description: "Total federal government expenditure for fiscal year 2023-24",
+        size: "md",
+    },
+}
+
+export const TrendUp: Story = {
+    args: {
+        value: "$89.5B",
+        label: "Healthcare Budget",
+        change: "+12.3%",
+        trend: "up",
+        size: "md",
+    },
+}
+
+export const TrendDown: Story = {
+    args: {
+        value: "2.1M",
+        label: "Employment",
+        change: "-3.4%",
+        trend: "down",
+        size: "md",
+    },
+}
+
+export const TrendNeutral: Story = {
+    args: {
+        value: "14",
+        label: "Provinces & Territories",
+        change: "No change",
+        trend: "neutral",
+        size: "md",
+    },
+}
+
+export const Small: Story = {
+    args: {
+        value: "$12.8B",
+        label: "Education",
+        change: "+5.2%",
+        trend: "up",
+        size: "sm",
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        value: "$12.8B",
+        label: "Education",
+        change: "+5.2%",
+        trend: "up",
+        size: "md",
+    },
+}
+
+export const Large: Story = {
+    args: {
+        value: "$12.8B",
+        label: "Education",
+        change: "+5.2%",
+        trend: "up",
+        size: "lg",
+    },
+}
+
+export const PercentageValue: Story = {
+    args: {
+        value: "42.5%",
+        label: "Debt-to-GDP Ratio",
+        description: "Compared to 38.2% in the previous year",
+        size: "md",
+    },
+}
+
+export const LargeNumber: Story = {
+    args: {
+        value: "38,941,457",
+        label: "Population of Canada",
+        description: "2023 Census estimate",
+        size: "lg",
+    },
+}
+
+export const WithFullContext: Story = {
+    args: {
+        value: "$1.2T",
+        label: "Total Government Revenue",
+        description: "Combined federal, provincial, and territorial revenues",
+        change: "+7.8% YoY",
+        trend: "up",
+        size: "lg",
+    },
+}
+
+export const StatBlocksRow: Story = {
+    render: () => (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "24px" }}>
+            <StatBlock
+                value="$456.2B"
+                label="Federal Spending"
+                change="+8.3%"
+                trend="up"
+                size="md"
+            />
+            <StatBlock
+                value="$89.5B"
+                label="Healthcare"
+                change="+12.3%"
+                trend="up"
+                size="md"
+            />
+            <StatBlock
+                value="$45.1B"
+                label="Defense"
+                change="-2.1%"
+                trend="down"
+                size="md"
+            />
+            <StatBlock
+                value="$67.3B"
+                label="Education"
+                change="+5.7%"
+                trend="up"
+                size="md"
+            />
+        </div>
+    ),
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Small</p>
+                <StatBlock
+                    value="$456.2B"
+                    label="Federal Spending"
+                    change="+8.3%"
+                    trend="up"
+                    size="sm"
+                />
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Medium</p>
+                <StatBlock
+                    value="$456.2B"
+                    label="Federal Spending"
+                    change="+8.3%"
+                    trend="up"
+                    size="md"
+                />
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Large</p>
+                <StatBlock
+                    value="$456.2B"
+                    label="Federal Spending"
+                    change="+8.3%"
+                    trend="up"
+                    size="lg"
+                />
+            </div>
+        </div>
+    ),
+}
+
+export const AllTrends: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "24px" }}>
+            <StatBlock
+                value="$89.5B"
+                label="Healthcare"
+                change="+12.3%"
+                trend="up"
+                size="md"
+            />
+            <StatBlock
+                value="$45.1B"
+                label="Defense"
+                change="-2.1%"
+                trend="down"
+                size="md"
+            />
+            <StatBlock
+                value="14"
+                label="Provinces"
+                change="No change"
+                trend="neutral"
+                size="md"
+            />
+        </div>
+    ),
+}
+
+export const DashboardExample: Story = {
+    render: () => (
+        <div style={{
+            backgroundColor: "#F6ECE3",
+            padding: "32px",
+            borderRadius: "0"
+        }}>
+            <h2 style={{
+                fontFamily: "sans-serif",
+                margin: "0 0 24px",
+                fontSize: "24px",
+                fontWeight: 500
+            }}>
+                2024 Budget Overview
+            </h2>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "16px" }}>
+                <div style={{ backgroundColor: "#ffffff", padding: "16px" }}>
+                    <StatBlock
+                        value="$496.8B"
+                        label="Total Revenue"
+                        change="+6.2%"
+                        trend="up"
+                        size="sm"
+                    />
+                </div>
+                <div style={{ backgroundColor: "#ffffff", padding: "16px" }}>
+                    <StatBlock
+                        value="$537.4B"
+                        label="Total Expenses"
+                        change="+4.8%"
+                        trend="up"
+                        size="sm"
+                    />
+                </div>
+                <div style={{ backgroundColor: "#ffffff", padding: "16px" }}>
+                    <StatBlock
+                        value="$40.6B"
+                        label="Deficit"
+                        change="-15.3%"
+                        trend="down"
+                        size="sm"
+                    />
+                </div>
+                <div style={{ backgroundColor: "#ffffff", padding: "16px" }}>
+                    <StatBlock
+                        value="1.12T"
+                        label="Federal Debt"
+                        change="+3.7%"
+                        trend="up"
+                        size="sm"
+                    />
+                </div>
+            </div>
+        </div>
+    ),
+}

package/src/content/StatBlock/index.ts

@@ -1,2 +1,2 @@
-export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./StatBlock"
-export { default } from "./StatBlock"
+export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./StatBlock.js"
+export { default } from "./StatBlock.js"

package/src/feedback/Dialog/Dialog.stories.tsx

@@ -0,0 +1,286 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Dialog, type DialogPosition } from "./Dialog"
+import { Button } from "../../primitives/Button"
+
+const meta: Meta<typeof Dialog> = {
+    title: "Components/Feedback/Dialog",
+    component: Dialog,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: `
+A non-modal floating panel that doesn't block interaction with the rest of the UI.
+
+## Usage
+
+\`\`\`tsx
+import { Dialog } from "@buildcanada/components"
+
+function MyComponent() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button text="Open Dialog" onClick={() => setOpen(true)} />
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Dialog Title"
+        position="bottom-right"
+      >
+        <p>Dialog content goes here.</p>
+      </Dialog>
+    </>
+  )
+}
+\`\`\`
+
+## Key Features
+
+- **Non-modal**: Does not block interaction with the rest of the UI
+- **Content-sized**: Automatically sizes to fit its contents
+- **Corner positioning**: Place in any corner or center of the screen
+- **No rounded corners**: Sharp edges for a clean, modern look
+
+## Positions
+
+- \`top-left\`
+- \`top-right\`
+- \`bottom-left\`
+- \`bottom-right\` (default)
+- \`center\`
+
+## Offset
+
+Use the \`offset\` prop to control distance from screen edges (default: 16px).
+                `,
+            },
+        },
+    },
+    args: {
+        open: true,
+        title: "Dialog Title",
+        description: "",
+        position: "bottom-right",
+        offset: 16,
+        closeOnEscape: true,
+        showCloseButton: true,
+    },
+    argTypes: {
+        open: {
+            control: "boolean",
+            description: "Whether the dialog is open",
+        },
+        title: {
+            control: "text",
+            description: "Title displayed in the dialog header",
+        },
+        description: {
+            control: "text",
+            description: "Optional description below the title",
+        },
+        position: {
+            control: "select",
+            options: ["top-left", "top-right", "bottom-left", "bottom-right", "center"],
+            description: "Position of the dialog on screen",
+        },
+        offset: {
+            control: { type: "number", min: 0, max: 100 },
+            description: "Distance from screen edges in pixels",
+        },
+        closeOnEscape: {
+            control: "boolean",
+            description: "Whether pressing Escape closes the dialog",
+        },
+        showCloseButton: {
+            control: "boolean",
+            description: "Whether to show the close button",
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ minHeight: "400px" }}>
+                <PageContent />
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export default meta
+type Story = StoryObj<typeof Dialog>
+
+// Page content to demonstrate non-blocking behavior
+function PageContent() {
+    return (
+        <div style={{ padding: "24px", fontFamily: "sans-serif" }}>
+            <h1>Page Content</h1>
+            <p>This content remains interactive when the dialog is open.</p>
+            <p>
+                <button onClick={() => console.log("Button clicked!")} style={{ padding: "8px 16px" }}>
+                    Clickable Button
+                </button>
+            </p>
+            <p>
+                <input
+                    type="text"
+                    placeholder="Type here while dialog is open..."
+                    style={{ padding: "8px", width: "300px" }}
+                />
+            </p>
+        </div>
+    )
+}
+
+// Simple template that renders the dialog with args
+function DialogTemplate(args: React.ComponentProps<typeof Dialog>) {
+    return (
+        <Dialog
+            {...args}
+            onClose={() => console.log("Dialog closed")}
+        >
+            <p style={{ fontFamily: "sans-serif", margin: 0, maxWidth: "280px" }}>
+                This dialog doesn't block interaction with the page behind it.
+            </p>
+        </Dialog>
+    )
+}
+
+export const Default: Story = {
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const TopLeft: Story = {
+    args: {
+        position: "top-left",
+        title: "Top Left",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const TopRight: Story = {
+    args: {
+        position: "top-right",
+        title: "Top Right",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const BottomLeft: Story = {
+    args: {
+        position: "bottom-left",
+        title: "Bottom Left",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const BottomRight: Story = {
+    args: {
+        position: "bottom-right",
+        title: "Bottom Right",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const Centered: Story = {
+    args: {
+        position: "center",
+        title: "Centered",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const WithDescription: Story = {
+    args: {
+        title: "Notifications",
+        description: "You have 3 unread messages.",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const CustomOffset: Story = {
+    args: {
+        title: "Custom Offset",
+        offset: 48,
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const NoCloseButton: Story = {
+    args: {
+        title: "No Close Button",
+        showCloseButton: false,
+        description: "Press Escape to close.",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const WideContent: Story = {
+    args: {
+        title: "Wide Content",
+    },
+    render: (args) => (
+        <Dialog {...args} onClose={() => console.log("Dialog closed")}>
+            <div style={{ fontFamily: "sans-serif", width: "400px" }}>
+                <p>This dialog has wider content and will size accordingly.</p>
+                <p>The dialog always sizes to fit its contents.</p>
+            </div>
+        </Dialog>
+    ),
+}
+
+export const AllPositions: Story = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: function AllPositionsDemo() {
+        const [openDialog, setOpenDialog] = useState<string | null>(null)
+
+        const positions = [
+            { key: "top-left", label: "Top Left" },
+            { key: "top-right", label: "Top Right" },
+            { key: "bottom-left", label: "Bottom Left" },
+            { key: "bottom-right", label: "Bottom Right" },
+            { key: "center", label: "Center" },
+        ] as const
+
+        return (
+            <>
+                <div style={{
+                    position: "fixed",
+                    top: "24px",
+                    right: "24px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "8px",
+                    zIndex: 1
+                }}>
+                    {positions.map(({ key, label }) => (
+                        <Button
+                            key={key}
+                            text={label}
+                            onClick={() => setOpenDialog(openDialog === key ? null : key)}
+                            variant={openDialog === key ? "solid-auburn" : "outline-charcoal"}
+                        />
+                    ))}
+                </div>
+                {positions.map(({ key, label }) => (
+                    <Dialog
+                        key={key}
+                        open={openDialog === key}
+                        onClose={() => setOpenDialog(null)}
+                        title={label}
+                        position={key}
+                    >
+                        <p style={{ fontFamily: "sans-serif", margin: 0 }}>
+                            Positioned: {label}
+                        </p>
+                    </Dialog>
+                ))}
+            </>
+        )
+    },
+}

package/src/feedback/Dialog/index.ts

@@ -1 +1 @@
-export { Dialog, type DialogProps, type DialogPosition } from "./Dialog"
+export { Dialog, type DialogProps, type DialogPosition } from "./Dialog.js"