@buildcanada/components 0.3.3 → 0.3.5

package/src/layout/Stack/Stack.stories.tsx

@@ -0,0 +1,342 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Stack } from "./Stack"
+
+const meta: Meta<typeof Stack> = {
+    title: "Components/Layout/Stack",
+    component: Stack,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A flexbox layout component for arranging items in a row or column with consistent spacing.
+
+## Usage
+
+\`\`\`tsx
+import { Stack } from "@buildcanada/components"
+
+<Stack direction="vertical" spacing="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Stack>
+\`\`\`
+
+## Horizontal Layout
+
+\`\`\`tsx
+<Stack direction="horizontal" spacing="lg" align="center">
+  <Button>Action 1</Button>
+  <Button>Action 2</Button>
+</Stack>
+\`\`\`
+
+## Spacing Options
+
+- **none**: 0px
+- **xs**: 4px
+- **sm**: 8px
+- **md**: 16px
+- **lg**: 24px
+- **xl**: 32px
+                `,
+            },
+        },
+    },
+    argTypes: {
+        direction: {
+            control: "radio",
+            options: ["vertical", "horizontal"],
+            description: "Stack direction (column or row)",
+        },
+        spacing: {
+            control: "select",
+            options: ["none", "xs", "sm", "md", "lg", "xl"],
+            description: "Gap between items",
+        },
+        align: {
+            control: "select",
+            options: ["start", "center", "end", "stretch"],
+            description: "Cross-axis alignment (align-items)",
+        },
+        justify: {
+            control: "select",
+            options: ["start", "center", "end", "between", "around"],
+            description: "Main-axis alignment (justify-content)",
+        },
+        wrap: {
+            description: "Whether items should wrap to next line",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+const StackItem = ({ children, height }: { children: React.ReactNode; height?: string }) => (
+    <div style={{
+        padding: "16px 24px",
+        backgroundColor: "#F6ECE3",
+        border: "1px solid #272727",
+        fontFamily: "sans-serif",
+        height: height || "auto",
+    }}>
+        {children}
+    </div>
+)
+
+export const Default: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "md",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const Vertical: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "md",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const Horizontal: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const NoSpacing: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "none",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const ExtraSmallSpacing: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "xs",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const LargeSpacing: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "lg",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const AlignCenter: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        align: "center",
+        children: (
+            <>
+                <StackItem height="60px">Tall</StackItem>
+                <StackItem height="40px">Medium</StackItem>
+                <StackItem height="80px">Taller</StackItem>
+            </>
+        ),
+    },
+}
+
+export const AlignStart: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        align: "start",
+        children: (
+            <>
+                <StackItem height="60px">Tall</StackItem>
+                <StackItem height="40px">Medium</StackItem>
+                <StackItem height="80px">Taller</StackItem>
+            </>
+        ),
+    },
+}
+
+export const AlignEnd: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        align: "end",
+        children: (
+            <>
+                <StackItem height="60px">Tall</StackItem>
+                <StackItem height="40px">Medium</StackItem>
+                <StackItem height="80px">Taller</StackItem>
+            </>
+        ),
+    },
+}
+
+export const JustifyBetween: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        justify: "between",
+        children: (
+            <>
+                <StackItem>Left</StackItem>
+                <StackItem>Center</StackItem>
+                <StackItem>Right</StackItem>
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: "100%" }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const JustifyCenter: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        justify: "center",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: "100%" }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const WithWrap: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        wrap: true,
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+                <StackItem>Item 4</StackItem>
+                <StackItem>Item 5</StackItem>
+                <StackItem>Item 6</StackItem>
+                <StackItem>Item 7</StackItem>
+                <StackItem>Item 8</StackItem>
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: "400px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const AllSpacings: Story = {
+    render: () => (
+        <Stack direction="vertical" spacing="lg">
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>None</p>
+                <Stack direction="horizontal" spacing="none">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Extra Small</p>
+                <Stack direction="horizontal" spacing="xs">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Small</p>
+                <Stack direction="horizontal" spacing="sm">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Medium</p>
+                <Stack direction="horizontal" spacing="md">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Large</p>
+                <Stack direction="horizontal" spacing="lg">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Extra Large</p>
+                <Stack direction="horizontal" spacing="xl">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+        </Stack>
+    ),
+}

package/src/layout/Stack/index.ts

@@ -5,5 +5,5 @@ export {
     type StackSpacing,
     type StackAlign,
     type StackJustify,
-} from "./Stack"
-export { default } from "./Stack"
+} from "./Stack.js"
+export { default } from "./Stack.js"

package/src/navigation/Footer/Footer.stories.tsx

@@ -0,0 +1,351 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+
+import { Footer } from "./Footer"
+
+const meta: Meta<typeof Footer> = {
+    title: "Components/Navigation/Footer",
+    component: Footer,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: `
+A site footer component with logo, navigation links, social links, newsletter signup, and optional quote.
+
+## Usage
+
+\`\`\`tsx
+import { Footer } from "@buildcanada/components"
+
+<Footer
+  logo={<Logo />}
+  links={[
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Privacy", href: "/privacy" },
+  ]}
+  socialLinks={[
+    { platform: "twitter", href: "https://twitter.com/..." },
+    { platform: "github", href: "https://github.com/..." },
+  ]}
+  copyright="© 2024 Company Name"
+/>
+\`\`\`
+
+## With Newsletter
+
+\`\`\`tsx
+<Footer
+  logo={<Logo />}
+  links={links}
+  newsletter={{
+    heading: "Stay Updated",
+    description: "Get the latest news delivered to your inbox.",
+    placeholder: "Enter your email",
+    buttonText: "Subscribe",
+    onSubmit: (email) => console.log(email),
+  }}
+  copyright="© 2024 Company Name"
+/>
+\`\`\`
+
+## Social Platforms
+
+Supported platforms: twitter, linkedin, github, email, bluesky
+                `,
+            },
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Footer>
+
+const Logo = () => (
+    <span style={{
+        fontFamily: "'Soehne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+        fontSize: "18px",
+        fontWeight: 500,
+        color: "#ffffff",
+        letterSpacing: "-0.01em",
+    }}>
+        Build Canada
+    </span>
+)
+
+const basicLinks = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Projects", href: "/projects" },
+    { label: "Contact", href: "/contact" },
+]
+
+const extendedLinks = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Projects", href: "/projects" },
+    { label: "Research", href: "/research" },
+    { label: "Data", href: "/data" },
+    { label: "Blog", href: "/blog" },
+    { label: "Privacy", href: "/privacy" },
+    { label: "Terms", href: "/terms" },
+]
+
+const socialLinks = [
+    { platform: "twitter" as const, href: "https://twitter.com/buildcanada" },
+    { platform: "linkedin" as const, href: "https://linkedin.com/company/buildcanada" },
+    { platform: "github" as const, href: "https://github.com/buildcanada" },
+    { platform: "email" as const, href: "mailto:hello@buildcanada.com", label: "Email us" },
+]
+
+const socialLinksWithBluesky = [
+    { platform: "twitter" as const, href: "https://twitter.com/buildcanada" },
+    { platform: "bluesky" as const, href: "https://bsky.app/profile/buildcanada" },
+    { platform: "linkedin" as const, href: "https://linkedin.com/company/buildcanada" },
+    { platform: "github" as const, href: "https://github.com/buildcanada" },
+]
+
+export const Default: Story = {
+    args: {
+        logo: <Logo />,
+        links: basicLinks,
+        socialLinks: socialLinks,
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const WithNewsletter: Story = {
+    args: {
+        logo: <Logo />,
+        links: basicLinks,
+        socialLinks: socialLinks,
+        newsletter: {
+            heading: "Stay Updated",
+            description: "Get the latest insights delivered to your inbox.",
+            placeholder: "Enter your email",
+            buttonText: "Subscribe",
+            onSubmit: (email) => console.log("Newsletter signup:", email),
+        },
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const WithQuote: Story = {
+    args: {
+        logo: <Logo />,
+        links: basicLinks,
+        socialLinks: socialLinks,
+        quote: {
+            text: "The measure of a great democracy is how well it serves its citizens through transparent and accountable governance.",
+            attribution: "Build Canada Mission Statement",
+        },
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const FullFeatured: Story = {
+    args: {
+        logo: <Logo />,
+        links: extendedLinks,
+        socialLinks: socialLinks,
+        newsletter: {
+            heading: "Join Our Newsletter",
+            description: "Weekly insights on Canadian government spending and policy.",
+            placeholder: "you@example.com",
+            buttonText: "Subscribe",
+        },
+        quote: {
+            text: "Democracy requires an informed citizenry. We make government data accessible to all.",
+            attribution: "Build Canada",
+        },
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const MinimalFooter: Story = {
+    args: {
+        copyright: "© 2024 Build Canada",
+    },
+}
+
+export const WithLogoOnly: Story = {
+    args: {
+        logo: <Logo />,
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const WithSocialOnly: Story = {
+    args: {
+        socialLinks: socialLinks,
+        copyright: "© 2024 Build Canada",
+    },
+}
+
+export const WithBluesky: Story = {
+    args: {
+        logo: <Logo />,
+        links: basicLinks,
+        socialLinks: socialLinksWithBluesky,
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const CanadaSpendsFooter: Story = {
+    args: {
+        logo: (
+            <span style={{ color: "#fff", fontWeight: 600, fontSize: "18px", fontFamily: "sans-serif" }}>
+                Canada Spends
+            </span>
+        ),
+        links: [
+            { label: "Charts", href: "/charts" },
+            { label: "Data", href: "/data" },
+            { label: "Topics", href: "/topics" },
+            { label: "About", href: "/about" },
+            { label: "Methodology", href: "/methodology" },
+            { label: "API", href: "/api" },
+        ],
+        socialLinks: [
+            { platform: "twitter" as const, href: "https://twitter.com/canadaspends" },
+            { platform: "github" as const, href: "https://github.com/buildcanada/canada-spends" },
+        ],
+        newsletter: {
+            heading: "Data Updates",
+            description: "Get notified when new datasets are published.",
+            placeholder: "your@email.com",
+            buttonText: "Notify Me",
+        },
+        copyright: "© 2024 Canada Spends. A Build Canada Project.",
+    },
+}
+
+export const BuildCanadaFooter: Story = {
+    args: {
+        logo: (
+            <span style={{ color: "#fff", fontWeight: 600, fontSize: "18px", fontFamily: "sans-serif" }}>
+                Build Canada
+            </span>
+        ),
+        links: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Projects", href: "/projects" },
+            { label: "Memos", href: "/memos" },
+            { label: "Team", href: "/team" },
+            { label: "Contact", href: "/contact" },
+        ],
+        socialLinks: socialLinks,
+        newsletter: {
+            heading: "Stay Informed",
+            description: "Join our mailing list for weekly updates on Canadian policy and data.",
+            placeholder: "Enter your email",
+            buttonText: "Subscribe",
+        },
+        quote: {
+            text: "We believe an informed citizenry is essential to a functioning democracy.",
+            attribution: "Build Canada",
+        },
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+export const LongLinkList: Story = {
+    args: {
+        logo: <Logo />,
+        links: [
+            { label: "Home", href: "/" },
+            { label: "About Us", href: "/about" },
+            { label: "Our Mission", href: "/mission" },
+            { label: "Projects", href: "/projects" },
+            { label: "Canada Spends", href: "/canada-spends" },
+            { label: "Research", href: "/research" },
+            { label: "Reports", href: "/reports" },
+            { label: "Data", href: "/data" },
+            { label: "Blog", href: "/blog" },
+            { label: "Careers", href: "/careers" },
+            { label: "Press", href: "/press" },
+            { label: "Contact", href: "/contact" },
+            { label: "Privacy Policy", href: "/privacy" },
+            { label: "Terms of Use", href: "/terms" },
+        ],
+        socialLinks: socialLinks,
+        copyright: "© 2024 Build Canada. All rights reserved.",
+    },
+}
+
+// Interactive test: Footer links
+export const LinksTest: Story = {
+    args: {
+        links: basicLinks,
+        copyright: "© 2024 Build Canada",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        const homeLink = canvas.getByRole("link", { name: /home/i })
+        const aboutLink = canvas.getByRole("link", { name: /about/i })
+
+        await expect(homeLink).toBeInTheDocument()
+        await expect(aboutLink).toBeInTheDocument()
+        await expect(homeLink).toHaveAttribute("href", "/")
+    },
+}
+
+// Interactive test: Social links
+export const SocialLinksTest: Story = {
+    args: {
+        socialLinks: socialLinks,
+        copyright: "© 2024 Build Canada",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        // Check that social links are present (they should be links with icons)
+        const twitterLink = canvas.getByRole("link", { name: /twitter/i })
+        const githubLink = canvas.getByRole("link", { name: /github/i })
+
+        await expect(twitterLink).toBeInTheDocument()
+        await expect(githubLink).toBeInTheDocument()
+    },
+}
+
+// Interactive test: Newsletter form
+export const NewsletterTest: Story = {
+    args: {
+        newsletter: {
+            heading: "Subscribe",
+            description: "Get updates",
+            placeholder: "your@email.com",
+            buttonText: "Subscribe",
+            onSubmit: fn(),
+        },
+        copyright: "© 2024 Build Canada",
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+
+        const emailInput = canvas.getByPlaceholderText("your@email.com")
+        const submitButton = canvas.getByRole("button", { name: /subscribe/i })
+
+        await expect(emailInput).toBeInTheDocument()
+        await expect(submitButton).toBeInTheDocument()
+
+        await userEvent.type(emailInput, "test@example.com")
+        await expect(emailInput).toHaveValue("test@example.com")
+    },
+}
+
+// Interactive test: Copyright text
+export const CopyrightTest: Story = {
+    args: {
+        copyright: "© 2024 Test Company. All rights reserved.",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        const copyright = canvas.getByText(/2024 Test Company/i)
+        await expect(copyright).toBeInTheDocument()
+    },
+}

package/src/navigation/Footer/index.ts

@@ -1,2 +1,2 @@
-export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./Footer"
-export { default } from "./Footer"
+export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./Footer.js"
+export { default } from "./Footer.js"