@buildcanada/components 0.3.4 → 0.3.5

package/src/content/Hero/index.ts

@@ -0,0 +1,13 @@
+export {
+    Hero,
+    HeroTitle,
+    HeroSubtitle,
+    HeroActions,
+    type HeroProps,
+    type HeroVariant,
+    type HeroBackground,
+    type HeroTitleProps,
+    type HeroSubtitleProps,
+    type HeroActionsProps,
+} from "./Hero.js"
+export { default } from "./Hero.js"

package/src/content/StatBlock/StatBlock.scss

@@ -0,0 +1,83 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * StatBlock Component
+ *
+ * Large formatted number with label, used for data display (canadaspends.com)
+ ******************************************************************************/
+
+.bc-stat-block {
+  display: flex;
+  flex-direction: column;
+  gap: calc($space-1 / 2);
+
+  /***************************************************************************
+   * Size Variants
+   ***************************************************************************/
+
+  &--sm {
+    .bc-stat-block__value {
+      @include h2;
+    }
+
+    .bc-stat-block__label {
+      @include label-sm;
+    }
+  }
+
+  &--md {
+    .bc-stat-block__value {
+      @include display-2;
+    }
+
+    .bc-stat-block__label {
+      @include label;
+    }
+  }
+
+  &--lg {
+    .bc-stat-block__value {
+      @include display-1;
+    }
+
+    .bc-stat-block__label {
+      @include h4;
+    }
+  }
+
+  /***************************************************************************
+   * Elements
+   ***************************************************************************/
+
+  &__value {
+    color: $charcoal;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__label {
+    color: $text-secondary;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__description {
+    @include body-3;
+    color: $text-muted;
+    margin-top: calc($space-1 / 2);
+  }
+
+  &__change {
+    @include mono-sm;
+    color: $text-secondary;
+    margin-top: calc($space-1 / 2);
+
+    &--up {
+      color: $emerald-600;
+    }
+
+    &--down {
+      color: $auburn;
+    }
+  }
+}

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/StatBlock.tsx

@@ -0,0 +1,52 @@
+import cx from "classnames"
+
+export type StatBlockSize = "sm" | "md" | "lg"
+export type StatBlockTrend = "up" | "down" | "neutral"
+
+export interface StatBlockProps {
+    value: string | number
+    label: string
+    description?: string
+    change?: string
+    trend?: StatBlockTrend
+    size?: StatBlockSize
+    className?: string
+    style?: React.CSSProperties
+}
+
+export function StatBlock({
+    value,
+    label,
+    description,
+    change,
+    trend,
+    size = "md",
+    className,
+    style,
+}: StatBlockProps) {
+    const classes = cx("bc-stat-block", `bc-stat-block--${size}`, className)
+
+    return (
+        <div className={classes} style={style}>
+            <span className="bc-stat-block__value">{value}</span>
+            <span className="bc-stat-block__label">{label}</span>
+            {description && (
+                <span className="bc-stat-block__description">{description}</span>
+            )}
+            {change && (
+                <span
+                    className={cx("bc-stat-block__change", {
+                        "bc-stat-block__change--up": trend === "up",
+                        "bc-stat-block__change--down": trend === "down",
+                    })}
+                >
+                    {trend === "up" && "↑ "}
+                    {trend === "down" && "↓ "}
+                    {change}
+                </span>
+            )}
+        </div>
+    )
+}
+
+export default StatBlock

package/src/content/StatBlock/index.ts

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

package/src/feedback/Dialog/Dialog.scss

@@ -0,0 +1,158 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Dialog Component
+ *
+ * A non-modal floating panel that doesn't block interaction with the UI.
+ * Sizes to its contents and can be positioned in corners.
+ ******************************************************************************/
+
+.bc-dialog {
+    position: fixed;
+    z-index: $z-popover;
+    background: $white;
+    border: 1px solid $border-default;
+    box-shadow: $shadow-lg;
+    max-width: calc(100vw - var(--bc-dialog-offset, 16px) * 2);
+    max-height: calc(100dvh - var(--bc-dialog-offset, 16px) * 2);
+
+    // Animation
+    animation: bc-dialog-enter $transition-base;
+}
+
+@keyframes bc-dialog-enter {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*******************************************************************************
+ * Dialog Positions
+ ******************************************************************************/
+
+.bc-dialog--top-left {
+    top: var(--bc-dialog-offset, 16px);
+    left: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--top-right {
+    top: var(--bc-dialog-offset, 16px);
+    right: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--bottom-left {
+    bottom: var(--bc-dialog-offset, 16px);
+    left: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--bottom-right {
+    bottom: var(--bc-dialog-offset, 16px);
+    right: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: bc-dialog-enter-center $transition-base;
+}
+
+@keyframes bc-dialog-enter-center {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+/*******************************************************************************
+ * Dialog Container
+ ******************************************************************************/
+
+.bc-dialog__container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/*******************************************************************************
+ * Dialog Header
+ ******************************************************************************/
+
+.bc-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $space-2;
+    padding: $space-2 $space-2 0 $space-3;
+    flex-shrink: 0;
+}
+
+.bc-dialog__title {
+    font-family: "Soehne Kraftig", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: $charcoal;
+    margin: 0;
+}
+
+.bc-dialog__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: $gray-600;
+    cursor: pointer;
+    transition: background-color $transition-fast, color $transition-fast;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: $gray-100;
+        color: $charcoal;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/*******************************************************************************
+ * Dialog Description
+ ******************************************************************************/
+
+.bc-dialog__description {
+    font-family: "Financier Text Regular", Georgia, "Times New Roman", serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: $gray-600;
+    margin: 0;
+    padding: $space-1 $space-3 0;
+}
+
+/*******************************************************************************
+ * Dialog Content
+ ******************************************************************************/
+
+.bc-dialog__content {
+    overflow-y: auto;
+    padding: $space-3;
+}