@buildcanada/components 0.3.4 → 0.3.5

package/src/content/Card/Card.tsx

@@ -0,0 +1,170 @@
+import cx from "classnames"
+
+export type CardVariant = "default" | "project" | "memo" | "feature" | "stat" | "profile"
+
+export interface CardProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    variant?: CardVariant
+    href?: string
+    onClick?: () => void
+}
+
+export function Card({
+    children,
+    className,
+    style,
+    variant = "default",
+    href,
+    onClick,
+}: CardProps) {
+    const isInteractive = Boolean(href || onClick)
+    const isButton = Boolean(onClick)
+
+    const classes = cx(
+        "bc-card",
+        `bc-card--${variant}`,
+        {
+            "bc-card--interactive": isInteractive,
+            "bc-card--button": isButton,
+        },
+        className
+    )
+
+    if (href) {
+        return (
+            <a href={href} className={classes} style={style}>
+                {children}
+            </a>
+        )
+    }
+
+    if (onClick) {
+        return (
+            <button type="button" className={classes} style={style} onClick={onClick}>
+                {children}
+            </button>
+        )
+    }
+
+    return (
+        <div className={classes} style={style}>
+            {children}
+        </div>
+    )
+}
+
+/*******************************************************************************
+ * Card Subcomponents
+ ******************************************************************************/
+
+export interface CardImageProps {
+    src: string
+    alt: string
+    className?: string
+}
+
+export function CardImage({ src, alt, className }: CardImageProps) {
+    return (
+        <div className={cx("bc-card__image", className)}>
+            <img src={src} alt={alt} />
+        </div>
+    )
+}
+
+export interface CardIconProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardIcon({ children, className }: CardIconProps) {
+    return <div className={cx("bc-card__icon", className)}>{children}</div>
+}
+
+export interface CardContentProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardContent({ children, className }: CardContentProps) {
+    return <div className={cx("bc-card__content", className)}>{children}</div>
+}
+
+export interface CardTitleProps {
+    children: React.ReactNode
+    className?: string
+    as?: "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
+export function CardTitle({ children, className, as: Component = "h3" }: CardTitleProps) {
+    return <Component className={cx("bc-card__title", className)}>{children}</Component>
+}
+
+export interface CardDescriptionProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardDescription({ children, className }: CardDescriptionProps) {
+    return <p className={cx("bc-card__description", className)}>{children}</p>
+}
+
+export interface CardMetaProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardMeta({ children, className }: CardMetaProps) {
+    return <div className={cx("bc-card__meta", className)}>{children}</div>
+}
+
+export interface CardStatProps {
+    value: string | number
+    label: string
+    change?: string
+    changeDirection?: "up" | "down" | "neutral"
+    className?: string
+}
+
+export function CardStat({ value, label, change, changeDirection, className }: CardStatProps) {
+    return (
+        <div className={cx("bc-card__stat", className)}>
+            <span className="bc-card__stat-value">{value}</span>
+            <span className="bc-card__stat-label">{label}</span>
+            {change && (
+                <span
+                    className={cx("bc-card__stat-change", {
+                        "bc-card__stat-change--up": changeDirection === "up",
+                        "bc-card__stat-change--down": changeDirection === "down",
+                    })}
+                >
+                    {change}
+                </span>
+            )}
+        </div>
+    )
+}
+
+export interface CardAuthorProps {
+    name: string
+    role?: string
+    avatar?: string
+    className?: string
+}
+
+export function CardAuthor({ name, role, avatar, className }: CardAuthorProps) {
+    return (
+        <div className={cx("bc-card__author", className)}>
+            {avatar && (
+                <img src={avatar} alt={name} className="bc-card__author-avatar" />
+            )}
+            <div className="bc-card__author-info">
+                <span className="bc-card__author-name">{name}</span>
+                {role && <span className="bc-card__author-role">{role}</span>}
+            </div>
+        </div>
+    )
+}
+
+export default Card

package/src/content/Card/index.ts

@@ -0,0 +1,22 @@
+export {
+    Card,
+    CardImage,
+    CardIcon,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardMeta,
+    CardStat,
+    CardAuthor,
+    type CardProps,
+    type CardVariant,
+    type CardImageProps,
+    type CardIconProps,
+    type CardContentProps,
+    type CardTitleProps,
+    type CardDescriptionProps,
+    type CardMetaProps,
+    type CardStatProps,
+    type CardAuthorProps,
+} from "./Card.js"
+export { default } from "./Card.js"

package/src/content/Hero/Hero.scss

@@ -0,0 +1,150 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Hero Component
+ ******************************************************************************/
+
+.bc-hero {
+  width: 100%;
+  padding: $space-8 0;
+
+  @include md-up {
+    padding: $space-10 0;
+  }
+
+  /***************************************************************************
+   * Background Variants
+   ***************************************************************************/
+
+  &--bg-white {
+    background-color: $white;
+    color: $text-primary;
+  }
+
+  &--bg-linen {
+    background-color: $linen;
+    color: $text-primary;
+  }
+
+  &--bg-charcoal {
+    background-color: $charcoal;
+    color: $text-inverse;
+
+    .bc-hero__subtitle {
+      color: rgba($white, 0.8);
+    }
+  }
+
+  /***************************************************************************
+   * Inner Container
+   ***************************************************************************/
+
+  &__inner {
+    max-width: 1024px;
+    margin: 0 auto;
+    padding: 0 $space-3;
+
+    @include md-up {
+      padding: 0 $space-5;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Home (large, centered)
+   ***************************************************************************/
+
+  &--home {
+    padding: $space-10 0;
+
+    @include md-up {
+      padding: $space-16 0;
+    }
+
+    .bc-hero__inner {
+      text-align: center;
+      max-width: 900px;
+    }
+
+    .bc-hero__title {
+      @include display-1;
+      margin: 0 0 $space-3;
+    }
+
+    .bc-hero__subtitle {
+      @include body-lg;
+      max-width: 640px;
+      margin: 0 auto $space-4;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Page (standard page header)
+   ***************************************************************************/
+
+  &--page {
+    padding: $space-6 0;
+
+    @include md-up {
+      padding: $space-8 0;
+    }
+
+    .bc-hero__title {
+      @include display-2;
+      margin: 0 0 $space-2;
+    }
+
+    .bc-hero__subtitle {
+      @include body-1;
+      color: $text-secondary;
+      margin: 0;
+      max-width: 640px;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Centered
+   ***************************************************************************/
+
+  &--centered {
+    .bc-hero__inner {
+      text-align: center;
+    }
+
+    .bc-hero__title {
+      @include display-2;
+      margin: 0 0 $space-2;
+    }
+
+    .bc-hero__subtitle {
+      @include body-1;
+      color: $text-secondary;
+      margin: 0 auto;
+      max-width: 640px;
+    }
+  }
+
+  /***************************************************************************
+   * Subcomponents
+   ***************************************************************************/
+
+  &__title {
+    color: inherit;
+  }
+
+  &__subtitle {
+    color: $text-secondary;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-2;
+    margin-top: $space-4;
+
+    .bc-hero--home &,
+    .bc-hero--centered & {
+      justify-content: center;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import cx from "classnames"
+
+export type HeroVariant = "home" | "page" | "centered"
+export type HeroBackground = "white" | "linen" | "charcoal"
+
+export interface HeroProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    variant?: HeroVariant
+    background?: HeroBackground
+}
+
+export function Hero({
+    children,
+    className,
+    style,
+    variant = "page",
+    background = "linen",
+}: HeroProps) {
+    const classes = cx(
+        "bc-hero",
+        `bc-hero--${variant}`,
+        `bc-hero--bg-${background}`,
+        className
+    )
+
+    return (
+        <div className={classes} style={style}>
+            <div className="bc-hero__inner">{children}</div>
+        </div>
+    )
+}
+
+export interface HeroTitleProps {
+    children: React.ReactNode
+    className?: string
+    as?: "h1" | "h2"
+}
+
+export function HeroTitle({ children, className, as: Component = "h1" }: HeroTitleProps) {
+    return <Component className={cx("bc-hero__title", className)}>{children}</Component>
+}
+
+export interface HeroSubtitleProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function HeroSubtitle({ children, className }: HeroSubtitleProps) {
+    return <p className={cx("bc-hero__subtitle", className)}>{children}</p>
+}
+
+export interface HeroActionsProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function HeroActions({ children, className }: HeroActionsProps) {
+    return <div className={cx("bc-hero__actions", className)}>{children}</div>
+}
+
+export default Hero