@buildcanada/components 0.3.3 → 0.3.5

package/src/content/Card/Card.stories.tsx

@@ -0,0 +1,389 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+import { faLightbulb, faChartLine, faUsers, faCode } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+import {
+    Card,
+    CardImage,
+    CardIcon,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardMeta,
+    CardStat,
+    CardAuthor,
+} from "./Card"
+
+const meta: Meta<typeof Card> = {
+    title: "Components/Content/Card",
+    component: Card,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A composable card component with multiple variants for different content types.
+
+## Usage
+
+\`\`\`tsx
+import { Card, CardContent, CardTitle, CardDescription } from "@buildcanada/components"
+
+<Card variant="default">
+  <CardContent>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description text.</CardDescription>
+  </CardContent>
+</Card>
+\`\`\`
+
+## Variants
+
+- **default**: Basic card for general content
+- **project**: Card with image for project showcases
+- **memo**: Card for articles/memos with author info
+- **feature**: Card with icon for feature highlights
+- **stat**: Card for displaying statistics
+- **profile**: Card for team member profiles
+
+## Sub-components
+
+- \`CardImage\`: Image header for the card
+- \`CardIcon\`: Icon container for feature cards
+- \`CardContent\`: Main content wrapper
+- \`CardTitle\`: Card heading
+- \`CardDescription\`: Card body text
+- \`CardMeta\`: Metadata like dates
+- \`CardStat\`: Statistics display with change indicators
+- \`CardAuthor\`: Author info with avatar
+                `,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["default", "project", "memo", "feature", "stat", "profile"],
+            description: "The visual style variant of the card",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+    args: {
+        variant: "default",
+        children: (
+            <CardContent>
+                <CardTitle>Card Title</CardTitle>
+                <CardDescription>
+                    This is a description of the card content. It provides more
+                    details about the subject.
+                </CardDescription>
+            </CardContent>
+        ),
+    },
+}
+
+export const ProjectCard: Story = {
+    args: {
+        variant: "project",
+        href: "#",
+        children: (
+            <>
+                <CardImage
+                    src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=400&fit=crop"
+                    alt="Modern building"
+                />
+                <CardContent>
+                    <CardTitle>Infrastructure Development</CardTitle>
+                    <CardDescription>
+                        A comprehensive analysis of Canada's infrastructure spending
+                        and development priorities over the past decade.
+                    </CardDescription>
+                    <CardMeta>Published March 2024</CardMeta>
+                </CardContent>
+            </>
+        ),
+    },
+}
+
+export const MemoCard: Story = {
+    args: {
+        variant: "memo",
+        href: "#",
+        children: (
+            <CardContent>
+                <CardTitle>The Future of Canadian Manufacturing</CardTitle>
+                <CardDescription>
+                    How policy changes and technological innovation are reshaping
+                    Canada's manufacturing sector for the next generation.
+                </CardDescription>
+                <CardAuthor
+                    name="Sarah Johnson"
+                    role="Senior Analyst"
+                    avatar="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+                />
+            </CardContent>
+        ),
+    },
+}
+
+export const FeatureCard: Story = {
+    args: {
+        variant: "feature",
+        children: (
+            <>
+                <CardIcon>
+                    <FontAwesomeIcon icon={faChartLine} size="2x" />
+                </CardIcon>
+                <CardContent>
+                    <CardTitle>Data-Driven Insights</CardTitle>
+                    <CardDescription>
+                        Access comprehensive data analysis and visualizations
+                        to understand government spending patterns.
+                    </CardDescription>
+                </CardContent>
+            </>
+        ),
+    },
+}
+
+export const StatCard: Story = {
+    args: {
+        variant: "stat",
+        children: (
+            <CardContent>
+                <CardStat
+                    value="$456.2B"
+                    label="Total Federal Spending"
+                    change="+8.3%"
+                    changeDirection="up"
+                />
+            </CardContent>
+        ),
+    },
+}
+
+export const ProfileCard: Story = {
+    args: {
+        variant: "profile",
+        children: (
+            <>
+                <CardImage
+                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop"
+                    alt="John Smith"
+                />
+                <CardContent>
+                    <CardTitle as="h4">John Smith</CardTitle>
+                    <CardDescription>Director of Research</CardDescription>
+                    <CardMeta>Ottawa, ON</CardMeta>
+                </CardContent>
+            </>
+        ),
+    },
+}
+
+// Interactive test: Clickable card
+export const ClickableCardTest: Story = {
+    args: {
+        variant: "default",
+        onClick: fn(),
+        children: (
+            <CardContent>
+                <CardTitle>Clickable Card</CardTitle>
+                <CardDescription>Click anywhere on this card.</CardDescription>
+            </CardContent>
+        ),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const card = canvas.getByRole("button")
+
+        await expect(card).toBeInTheDocument()
+        await userEvent.click(card)
+        await expect(args.onClick).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Link card
+export const LinkCardTest: Story = {
+    args: {
+        variant: "project",
+        href: "#test-link",
+        children: (
+            <CardContent>
+                <CardTitle>Link Card</CardTitle>
+                <CardDescription>This card links somewhere.</CardDescription>
+            </CardContent>
+        ),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const link = canvas.getByRole("link")
+
+        await expect(link).toHaveAttribute("href", "#test-link")
+    },
+}
+
+// Interactive test: Card with hover
+export const HoverCardTest: Story = {
+    args: {
+        variant: "project",
+        href: "#",
+        children: (
+            <>
+                <CardImage
+                    src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=400&fit=crop"
+                    alt="Building"
+                />
+                <CardContent>
+                    <CardTitle>Hover Card</CardTitle>
+                    <CardDescription>Hover to see the effect.</CardDescription>
+                </CardContent>
+            </>
+        ),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const card = canvas.getByRole("link")
+
+        await userEvent.hover(card)
+        // Visual check for hover state
+    },
+}
+
+export const FeatureCardsGrid: Story = {
+    render: () => (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "24px" }}>
+            <Card variant="feature">
+                <CardIcon>
+                    <FontAwesomeIcon icon={faChartLine} size="2x" />
+                </CardIcon>
+                <CardContent>
+                    <CardTitle>Analytics</CardTitle>
+                    <CardDescription>
+                        Comprehensive data analysis tools for government spending.
+                    </CardDescription>
+                </CardContent>
+            </Card>
+            <Card variant="feature">
+                <CardIcon>
+                    <FontAwesomeIcon icon={faUsers} size="2x" />
+                </CardIcon>
+                <CardContent>
+                    <CardTitle>Collaboration</CardTitle>
+                    <CardDescription>
+                        Work together with researchers across Canada.
+                    </CardDescription>
+                </CardContent>
+            </Card>
+            <Card variant="feature">
+                <CardIcon>
+                    <FontAwesomeIcon icon={faLightbulb} size="2x" />
+                </CardIcon>
+                <CardContent>
+                    <CardTitle>Insights</CardTitle>
+                    <CardDescription>
+                        Discover patterns and trends in public data.
+                    </CardDescription>
+                </CardContent>
+            </Card>
+            <Card variant="feature">
+                <CardIcon>
+                    <FontAwesomeIcon icon={faCode} size="2x" />
+                </CardIcon>
+                <CardContent>
+                    <CardTitle>Open Source</CardTitle>
+                    <CardDescription>
+                        All our tools and data are freely available.
+                    </CardDescription>
+                </CardContent>
+            </Card>
+        </div>
+    ),
+}
+
+export const StatCardsRow: Story = {
+    render: () => (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px" }}>
+            <Card variant="stat">
+                <CardContent>
+                    <CardStat
+                        value="$456.2B"
+                        label="Federal Spending"
+                        change="+8.3%"
+                        changeDirection="up"
+                    />
+                </CardContent>
+            </Card>
+            <Card variant="stat">
+                <CardContent>
+                    <CardStat
+                        value="2.4M"
+                        label="Public Servants"
+                        change="-1.2%"
+                        changeDirection="down"
+                    />
+                </CardContent>
+            </Card>
+            <Card variant="stat">
+                <CardContent>
+                    <CardStat
+                        value="14"
+                        label="Provinces & Territories"
+                        changeDirection="neutral"
+                    />
+                </CardContent>
+            </Card>
+        </div>
+    ),
+}
+
+export const ProjectCardsGrid: Story = {
+    render: () => (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "24px" }}>
+            <Card variant="project" href="#">
+                <CardImage
+                    src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=400&fit=crop"
+                    alt="Infrastructure"
+                />
+                <CardContent>
+                    <CardTitle>Infrastructure Report 2024</CardTitle>
+                    <CardDescription>
+                        Analysis of federal infrastructure investments.
+                    </CardDescription>
+                    <CardMeta>March 2024</CardMeta>
+                </CardContent>
+            </Card>
+            <Card variant="project" href="#">
+                <CardImage
+                    src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&h=400&fit=crop"
+                    alt="Budget"
+                />
+                <CardContent>
+                    <CardTitle>Budget Breakdown</CardTitle>
+                    <CardDescription>
+                        Comprehensive federal budget analysis.
+                    </CardDescription>
+                    <CardMeta>February 2024</CardMeta>
+                </CardContent>
+            </Card>
+            <Card variant="project" href="#">
+                <CardImage
+                    src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop"
+                    alt="Healthcare"
+                />
+                <CardContent>
+                    <CardTitle>Healthcare Spending</CardTitle>
+                    <CardDescription>
+                        Provincial healthcare expenditure trends.
+                    </CardDescription>
+                    <CardMeta>January 2024</CardMeta>
+                </CardContent>
+            </Card>
+        </div>
+    ),
+}

package/src/content/Card/index.ts

@@ -18,5 +18,5 @@ export {
     type CardMetaProps,
     type CardStatProps,
     type CardAuthorProps,
-} from "./Card"
-export { default } from "./Card"
+} from "./Card.js"
+export { default } from "./Card.js"

package/src/content/Hero/Hero.stories.tsx

@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, expect } from "@storybook/test"
+
+import { Hero, HeroTitle, HeroSubtitle, HeroActions } from "./Hero"
+import { Button } from "../../primitives/Button"
+
+const meta: Meta<typeof Hero> = {
+    title: "Components/Content/Hero",
+    component: Hero,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A hero section component for page headers with title, subtitle, and call-to-action buttons.
+
+## Usage
+
+\`\`\`tsx
+import { Hero, HeroTitle, HeroSubtitle, HeroActions } from "@buildcanada/components"
+import { Button } from "@buildcanada/components"
+
+<Hero variant="home" background="linen">
+  <HeroTitle>Welcome to Build Canada</HeroTitle>
+  <HeroSubtitle>
+    Making government data accessible for all Canadians.
+  </HeroSubtitle>
+  <HeroActions>
+    <Button text="Get Started" variant="solid-auburn" />
+    <Button text="Learn More" variant="outline-charcoal" icon={null} />
+  </HeroActions>
+</Hero>
+\`\`\`
+
+## Variants
+
+- **home**: Large, impactful hero for homepages
+- **page**: Standard page header with title and description
+- **centered**: Center-aligned for special sections or CTAs
+
+## Sub-components
+
+- \`HeroTitle\`: Main heading (h1)
+- \`HeroSubtitle\`: Supporting text
+- \`HeroActions\`: Container for CTA buttons
+                `,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["home", "page", "centered"],
+            description: "Layout variant of the hero",
+        },
+        background: {
+            control: "select",
+            options: ["white", "linen", "charcoal"],
+            description: "Background color",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Hero>
+
+export const Default: Story = {
+    args: {
+        variant: "page",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Page Title</HeroTitle>
+                <HeroSubtitle>
+                    A brief description of what this page is about and what
+                    users can expect to find here.
+                </HeroSubtitle>
+            </>
+        ),
+    },
+}
+
+export const HomeHero: Story = {
+    args: {
+        variant: "home",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Build Canada</HeroTitle>
+                <HeroSubtitle>
+                    Making government data accessible and understandable for all Canadians.
+                    Explore spending, analyze trends, and discover insights.
+                </HeroSubtitle>
+                <HeroActions>
+                    <Button text="Explore Data" variant="solid-auburn" />
+                    <Button text="Learn More" variant="outline-charcoal" icon={null} />
+                </HeroActions>
+            </>
+        ),
+    },
+}
+
+export const PageHero: Story = {
+    args: {
+        variant: "page",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>About Us</HeroTitle>
+                <HeroSubtitle>
+                    Learn about our mission, team, and the work we do to make
+                    government spending transparent.
+                </HeroSubtitle>
+            </>
+        ),
+    },
+}
+
+export const CenteredHero: Story = {
+    args: {
+        variant: "centered",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Canada Spends</HeroTitle>
+                <HeroSubtitle>
+                    Interactive visualizations of government spending across
+                    all levels of government in Canada.
+                </HeroSubtitle>
+                <HeroActions>
+                    <Button text="View Charts" variant="solid-auburn" />
+                </HeroActions>
+            </>
+        ),
+    },
+}
+
+export const WhiteBackground: Story = {
+    args: {
+        variant: "page",
+        background: "white",
+        children: (
+            <>
+                <HeroTitle>Research & Reports</HeroTitle>
+                <HeroSubtitle>
+                    In-depth analysis and reports on Canadian government policy
+                    and spending patterns.
+                </HeroSubtitle>
+            </>
+        ),
+    },
+}
+
+export const CharcoalBackground: Story = {
+    args: {
+        variant: "centered",
+        background: "charcoal",
+        children: (
+            <>
+                <HeroTitle>Join Our Newsletter</HeroTitle>
+                <HeroSubtitle>
+                    Get the latest insights and analysis delivered directly to your inbox.
+                </HeroSubtitle>
+                <HeroActions>
+                    <Button text="Subscribe" variant="solid-auburn" />
+                </HeroActions>
+            </>
+        ),
+    },
+}
+
+export const WithMultipleActions: Story = {
+    args: {
+        variant: "home",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Open Government Data</HeroTitle>
+                <HeroSubtitle>
+                    Access, analyze, and visualize government spending data
+                    with our free and open-source tools.
+                </HeroSubtitle>
+                <HeroActions>
+                    <Button text="Get Started" variant="solid-auburn" />
+                    <Button text="View Demo" variant="outline-charcoal" icon={null} />
+                    <Button text="Documentation" variant="outline-charcoal" icon={null} />
+                </HeroActions>
+            </>
+        ),
+    },
+}
+
+export const MinimalHero: Story = {
+    args: {
+        variant: "page",
+        background: "linen",
+        children: (
+            <HeroTitle>Contact</HeroTitle>
+        ),
+    },
+}
+
+export const LongContent: Story = {
+    args: {
+        variant: "home",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Understanding Government Spending in Canada</HeroTitle>
+                <HeroSubtitle>
+                    Our platform provides comprehensive data visualization and analysis tools
+                    that help citizens, researchers, and policymakers understand how public
+                    money is spent across federal, provincial, and municipal governments.
+                    From healthcare to infrastructure, education to defense, explore the
+                    full picture of Canadian government finances.
+                </HeroSubtitle>
+                <HeroActions>
+                    <Button text="Explore the Data" variant="solid-auburn" />
+                    <Button text="Read Our Methodology" variant="outline-charcoal" icon={null} />
+                </HeroActions>
+            </>
+        ),
+    },
+}
+
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "0" }}>
+            <Hero variant="home" background="linen">
+                <HeroTitle>Home Variant</HeroTitle>
+                <HeroSubtitle>Large, impactful hero for homepages with prominent CTAs.</HeroSubtitle>
+                <HeroActions>
+                    <Button text="Primary Action" variant="solid-auburn" />
+                    <Button text="Secondary" variant="outline-charcoal" icon={null} />
+                </HeroActions>
+            </Hero>
+            <Hero variant="page" background="white">
+                <HeroTitle>Page Variant</HeroTitle>
+                <HeroSubtitle>Standard page header with title and optional description.</HeroSubtitle>
+            </Hero>
+            <Hero variant="centered" background="charcoal">
+                <HeroTitle>Centered Variant</HeroTitle>
+                <HeroSubtitle>Center-aligned content for special sections or CTAs.</HeroSubtitle>
+                <HeroActions>
+                    <Button text="Take Action" variant="solid-auburn" />
+                </HeroActions>
+            </Hero>
+        </div>
+    ),
+}
+
+// Interactive test: Title and subtitle render correctly
+export const ContentTest: Story = {
+    args: {
+        variant: "page",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Test Title</HeroTitle>
+                <HeroSubtitle>Test subtitle text content.</HeroSubtitle>
+            </>
+        ),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        const title = canvas.getByText("Test Title")
+        const subtitle = canvas.getByText("Test subtitle text content.")
+
+        await expect(title).toBeInTheDocument()
+        await expect(subtitle).toBeInTheDocument()
+    },
+}
+
+// Interactive test: Action buttons are rendered
+export const ActionsTest: Story = {
+    args: {
+        variant: "home",
+        background: "linen",
+        children: (
+            <>
+                <HeroTitle>Hero with Actions</HeroTitle>
+                <HeroSubtitle>Testing action buttons.</HeroSubtitle>
+                <HeroActions>
+                    <Button text="Primary Button" variant="solid-auburn" />
+                    <Button text="Secondary Button" variant="outline-charcoal" icon={null} />
+                </HeroActions>
+            </>
+        ),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        const primaryBtn = canvas.getByRole("button", { name: /primary button/i })
+        const secondaryBtn = canvas.getByRole("button", { name: /secondary button/i })
+
+        await expect(primaryBtn).toBeInTheDocument()
+        await expect(secondaryBtn).toBeInTheDocument()
+    },
+}

package/src/content/Hero/index.ts

@@ -9,5 +9,5 @@ export {
     type HeroTitleProps,
     type HeroSubtitleProps,
     type HeroActionsProps,
-} from "./Hero"
-export { default } from "./Hero"
+} from "./Hero.js"
+export { default } from "./Hero.js"