@buildcanada/components 0.3.3 → 0.3.5

package/src/navigation/Header/Header.stories.tsx

@@ -0,0 +1,346 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect } from "@storybook/test"
+
+import { Header } from "./Header"
+
+const meta: Meta<typeof Header> = {
+    title: "Components/Navigation/Header",
+    component: Header,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: `
+A responsive site header with navigation, logo, CTA button, and optional announcement banner.
+
+## Usage
+
+\`\`\`tsx
+import { Header } from "@buildcanada/components"
+
+<Header
+  logo={<Logo />}
+  navItems={[
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Projects", href: "/projects" },
+  ]}
+  cta={{ label: "Get Started", href: "/start" }}
+/>
+\`\`\`
+
+## With Dropdowns
+
+\`\`\`tsx
+<Header
+  logo={<Logo />}
+  navItems={[
+    { label: "Home", href: "/" },
+    {
+      label: "Projects",
+      href: "/projects",
+      dropdown: [
+        { label: "Project A", href: "/projects/a" },
+        { label: "Project B", href: "/projects/b" },
+      ],
+    },
+  ]}
+/>
+\`\`\`
+
+## Announcement Banner
+
+\`\`\`tsx
+<Header
+  logo={<Logo />}
+  navItems={navItems}
+  announcement={{
+    text: "New feature available!",
+    href: "/new-feature",
+    variant: "auburn", // or "default"
+  }}
+/>
+\`\`\`
+
+## Responsive
+
+On mobile, navigation collapses into a hamburger menu.
+                `,
+            },
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Header>
+
+const Logo = () => (
+    <span style={{
+        fontFamily: "'Soehne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+        fontSize: "18px",
+        fontWeight: 500,
+        color: "#272727",
+        letterSpacing: "-0.01em",
+    }}>
+        Build Canada
+    </span>
+)
+
+const basicNavItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Projects", href: "/projects" },
+    { label: "Contact", href: "/contact" },
+]
+
+const navWithDropdowns = [
+    { label: "Home", href: "/" },
+    {
+        label: "Projects",
+        href: "/projects",
+        dropdown: [
+            { label: "Canada Spends", href: "/projects/canada-spends" },
+            { label: "Budget Tracker", href: "/projects/budget-tracker" },
+            { label: "Data Explorer", href: "/projects/data-explorer" },
+        ],
+    },
+    {
+        label: "Research",
+        href: "/research",
+        dropdown: [
+            { label: "Reports", href: "/research/reports" },
+            { label: "Analysis", href: "/research/analysis" },
+            { label: "Publications", href: "/research/publications" },
+        ],
+    },
+    { label: "About", href: "/about" },
+]
+
+export const Default: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+    },
+}
+
+export const WithCTA: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+    },
+}
+
+export const WithAnnouncement: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+        announcement: {
+            text: "New: Canada Spends 2024 data now available!",
+            href: "/projects/canada-spends",
+            variant: "default",
+        },
+    },
+}
+
+export const WithAuburnAnnouncement: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+        announcement: {
+            text: "Breaking: Federal Budget 2024 Analysis",
+            href: "/research/budget-2024",
+            variant: "auburn",
+        },
+    },
+}
+
+export const WithDropdowns: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: navWithDropdowns,
+        cta: {
+            label: "Explore Data",
+            href: "/explore",
+        },
+    },
+}
+
+export const MinimalHeader: Story = {
+    args: {
+        logo: <Logo />,
+    },
+}
+
+export const FullFeatured: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: navWithDropdowns,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+        announcement: {
+            text: "New: 2024 Federal Budget Analysis now available",
+            href: "/research/budget-2024",
+            variant: "auburn",
+        },
+    },
+}
+
+export const ManyNavItems: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Projects", href: "/projects" },
+            { label: "Research", href: "/research" },
+            { label: "Data", href: "/data" },
+            { label: "Blog", href: "/blog" },
+            { label: "Contact", href: "/contact" },
+        ],
+    },
+}
+
+export const WithTextLogo: Story = {
+    args: {
+        logo: (
+            <span style={{
+                fontFamily: "'Soehne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+                fontSize: "20px",
+                fontWeight: 500,
+                color: "#932F2F",
+                letterSpacing: "-0.01em",
+            }}>
+                Company Name
+            </span>
+        ),
+        navItems: basicNavItems,
+        cta: {
+            label: "Sign Up",
+            href: "/signup",
+        },
+    },
+}
+
+export const CanadaSpendsHeader: Story = {
+    args: {
+        logo: (
+            <svg width="160" height="24" viewBox="0 0 160 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <text x="0" y="18" fontFamily="sans-serif" fontSize="16" fontWeight="600" fill="#272727">
+                    Canada Spends
+                </text>
+            </svg>
+        ),
+        navItems: [
+            { label: "Charts", href: "/charts" },
+            { label: "Data", href: "/data" },
+            {
+                label: "Topics",
+                href: "/topics",
+                dropdown: [
+                    { label: "Healthcare", href: "/topics/healthcare" },
+                    { label: "Education", href: "/topics/education" },
+                    { label: "Defense", href: "/topics/defense" },
+                    { label: "Infrastructure", href: "/topics/infrastructure" },
+                ],
+            },
+            { label: "About", href: "/about" },
+        ],
+        cta: {
+            label: "Explore",
+            href: "/explore",
+        },
+    },
+}
+
+export const ResponsiveDemo: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: navWithDropdowns,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Resize the viewport to see the responsive behavior. On smaller screens, the navigation collapses into a hamburger menu.",
+            },
+        },
+    },
+}
+
+// Interactive test: Navigation links
+export const NavigationTest: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        // Check that navigation links are present
+        const homeLink = canvas.getByRole("link", { name: /home/i })
+        const aboutLink = canvas.getByRole("link", { name: /about/i })
+        const ctaButton = canvas.getByRole("link", { name: /get started/i })
+
+        await expect(homeLink).toBeInTheDocument()
+        await expect(aboutLink).toBeInTheDocument()
+        await expect(ctaButton).toBeInTheDocument()
+
+        await expect(homeLink).toHaveAttribute("href", "/")
+        await expect(aboutLink).toHaveAttribute("href", "/about")
+    },
+}
+
+// Interactive test: Logo presence
+export const LogoTest: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        // Check that the logo/brand text is present
+        const logoText = canvas.getByText(/build canada/i)
+        await expect(logoText).toBeInTheDocument()
+    },
+}
+
+// Interactive test: Announcement banner
+export const AnnouncementTest: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        announcement: {
+            text: "Test announcement message",
+            href: "/test-link",
+            variant: "auburn",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        const announcement = canvas.getByText(/test announcement message/i)
+        await expect(announcement).toBeInTheDocument()
+    },
+}

package/src/navigation/Header/index.ts

@@ -1,2 +1,2 @@
-export { Header, type HeaderProps, type NavItem } from "./Header"
-export { default } from "./Header"
+export { Header, type HeaderProps, type NavItem } from "./Header.js"
+export { default } from "./Header.js"

package/src/primitives/Button/Button.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+import { faDownload, faPlus, faCheck, faEnvelope } from "@fortawesome/free-solid-svg-icons"
+
+import { Button } from "./Button"
+
+const meta: Meta<typeof Button> = {
+    title: "Components/Primitives/Button",
+    component: Button,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A versatile button component that supports multiple variants, sizes, and icon configurations.
+
+## Usage
+
+\`\`\`tsx
+import { Button } from "@buildcanada/components"
+
+<Button text="Click me" variant="solid-auburn" />
+\`\`\`
+
+## Features
+
+- **6 variants**: solid-auburn, solid-charcoal, solid-linen, outline-auburn, outline-charcoal, outline-white
+- **3 sizes**: sm, md, lg
+- **Icon support**: Left or right positioned icons using FontAwesome
+- **Link mode**: Can render as an anchor tag with \`href\` prop
+- **Full width**: Expand to container width with \`fullWidth\` prop
+                `,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "solid-auburn",
+                "solid-charcoal",
+                "solid-linen",
+                "outline-auburn",
+                "outline-charcoal",
+                "outline-white",
+            ],
+            description: "The visual style variant of the button",
+        },
+        size: {
+            control: "radio",
+            options: ["sm", "md", "lg"],
+            description: "The size of the button",
+        },
+        iconPosition: {
+            control: "radio",
+            options: ["left", "right"],
+            description: "Position of the icon relative to the text",
+        },
+        text: {
+            description: "The button label text",
+        },
+        icon: {
+            description: "FontAwesome icon definition. Defaults to arrow-right.",
+        },
+        disabled: {
+            description: "Whether the button is disabled",
+        },
+        fullWidth: {
+            description: "Whether the button should expand to full container width",
+        },
+        href: {
+            description: "If provided, renders as an anchor tag instead of button",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {
+    args: {
+        text: "Get Started",
+        variant: "solid-auburn",
+    },
+}
+
+export const SolidAuburn: Story = {
+    args: {
+        text: "Learn More",
+        variant: "solid-auburn",
+    },
+}
+
+export const SolidCharcoal: Story = {
+    args: {
+        text: "View Projects",
+        variant: "solid-charcoal",
+    },
+}
+
+export const SolidLinen: Story = {
+    args: {
+        text: "Explore",
+        variant: "solid-linen",
+    },
+}
+
+export const OutlineAuburn: Story = {
+    args: {
+        text: "Subscribe",
+        variant: "outline-auburn",
+    },
+}
+
+export const OutlineCharcoal: Story = {
+    args: {
+        text: "Read Article",
+        variant: "outline-charcoal",
+    },
+}
+
+export const OutlineWhite: Story = {
+    args: {
+        text: "Contact Us",
+        variant: "outline-white",
+    },
+    parameters: {
+        backgrounds: { default: "charcoal" },
+    },
+}
+
+export const Small: Story = {
+    args: {
+        text: "Small Button",
+        variant: "solid-auburn",
+        size: "sm",
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        text: "Medium Button",
+        variant: "solid-auburn",
+        size: "md",
+    },
+}
+
+export const Large: Story = {
+    args: {
+        text: "Large Button",
+        variant: "solid-auburn",
+        size: "lg",
+    },
+}
+
+export const WithIconRight: Story = {
+    args: {
+        text: "Download Report",
+        variant: "solid-auburn",
+        icon: faDownload,
+        iconPosition: "right",
+    },
+}
+
+export const WithIconLeft: Story = {
+    args: {
+        text: "Add Item",
+        variant: "solid-charcoal",
+        icon: faPlus,
+        iconPosition: "left",
+    },
+}
+
+export const IconOnly: Story = {
+    args: {
+        icon: faEnvelope,
+        variant: "outline-auburn",
+        ariaLabel: "Send email",
+    },
+}
+
+export const NoIcon: Story = {
+    args: {
+        text: "No Arrow",
+        variant: "solid-auburn",
+        icon: null,
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        text: "Disabled",
+        variant: "solid-auburn",
+        disabled: true,
+    },
+}
+
+export const FullWidth: Story = {
+    args: {
+        text: "Full Width Button",
+        variant: "solid-auburn",
+        fullWidth: true,
+    },
+}
+
+export const AsLink: Story = {
+    args: {
+        text: "Visit Website",
+        variant: "solid-auburn",
+        href: "https://buildcanada.com",
+    },
+}
+
+export const SubmitButton: Story = {
+    args: {
+        text: "Submit Form",
+        variant: "solid-auburn",
+        type: "submit",
+        icon: faCheck,
+    },
+}
+
+// Interactive test: Button click
+export const ClickTest: Story = {
+    args: {
+        text: "Click Me",
+        variant: "solid-auburn",
+        onClick: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const button = canvas.getByRole("button", { name: /click me/i })
+
+        await expect(button).toBeInTheDocument()
+        await userEvent.click(button)
+        await expect(args.onClick).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Disabled button should not be clickable
+export const DisabledClickTest: Story = {
+    args: {
+        text: "Disabled Button",
+        variant: "solid-auburn",
+        disabled: true,
+        onClick: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const button = canvas.getByRole("button", { name: /disabled button/i })
+
+        await expect(button).toBeDisabled()
+        await userEvent.click(button)
+        await expect(args.onClick).not.toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Hover state
+export const HoverTest: Story = {
+    args: {
+        text: "Hover Me",
+        variant: "solid-auburn",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const button = canvas.getByRole("button", { name: /hover me/i })
+
+        await expect(button).toBeInTheDocument()
+        await userEvent.hover(button)
+        // Visual check - hover state should be visible
+    },
+}
+
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center" }}>
+                <Button text="Solid Auburn" variant="solid-auburn" />
+                <Button text="Solid Charcoal" variant="solid-charcoal" />
+                <Button text="Solid Linen" variant="solid-linen" />
+            </div>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center" }}>
+                <Button text="Outline Auburn" variant="outline-auburn" />
+                <Button text="Outline Charcoal" variant="outline-charcoal" />
+            </div>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center", backgroundColor: "#272727", padding: "16px" }}>
+                <Button text="Outline White" variant="outline-white" />
+            </div>
+        </div>
+    ),
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "16px", alignItems: "center" }}>
+            <Button text="Small" variant="solid-auburn" size="sm" />
+            <Button text="Medium" variant="solid-auburn" size="md" />
+            <Button text="Large" variant="solid-auburn" size="lg" />
+        </div>
+    ),
+}

package/src/primitives/Button/index.ts

@@ -1,2 +1,2 @@
-export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button"
-export { default } from "./Button"
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button.js"
+export { default } from "./Button.js"