@buildcanada/components 0.3.4 → 0.3.5

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

@@ -0,0 +1,174 @@
+import cx from "classnames"
+
+export interface FooterLink {
+    label: string
+    href: string
+}
+
+export interface SocialLink {
+    platform: "twitter" | "linkedin" | "instagram" | "github" | "email" | "bluesky"
+    href: string
+    label?: string
+}
+
+export interface FooterProps {
+    logo?: React.ReactNode
+    links?: FooterLink[]
+    socialLinks?: SocialLink[]
+    newsletter?: {
+        heading: string
+        description?: string
+        placeholder?: string
+        buttonText?: string
+        onSubmit?: (email: string) => void
+    }
+    quote?: {
+        text: string
+        attribution: string
+    }
+    copyright?: string
+    className?: string
+    style?: React.CSSProperties
+}
+
+const socialIcons: Record<SocialLink["platform"], React.ReactNode> = {
+    twitter: (
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+        </svg>
+    ),
+    linkedin: (
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+        </svg>
+    ),
+    instagram: (
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
+        </svg>
+    ),
+    github: (
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+    ),
+    email: (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+            <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+    ),
+    bluesky: (
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" />
+        </svg>
+    ),
+}
+
+export function Footer({
+    logo,
+    links = [],
+    socialLinks = [],
+    newsletter,
+    quote,
+    copyright,
+    className,
+    style,
+}: FooterProps) {
+    const classes = cx("bc-footer", className)
+
+    const handleNewsletterSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const formData = new FormData(e.currentTarget)
+        const email = formData.get("email") as string
+        newsletter?.onSubmit?.(email)
+    }
+
+    return (
+        <footer className={classes} style={style}>
+            <div className="bc-footer__inner">
+                <div className="bc-footer__main">
+                    {logo && <div className="bc-footer__logo">{logo}</div>}
+
+                    {links.length > 0 && (
+                        <nav className="bc-footer__nav" aria-label="Footer navigation">
+                            <ul className="bc-footer__nav-list">
+                                {links.map((link) => (
+                                    <li key={link.label}>
+                                        <a href={link.href} className="bc-footer__nav-link">
+                                            {link.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </nav>
+                    )}
+
+                    {newsletter && (
+                        <div className="bc-footer__newsletter">
+                            <h4 className="bc-footer__newsletter-heading">
+                                {newsletter.heading}
+                            </h4>
+                            {newsletter.description && (
+                                <p className="bc-footer__newsletter-description">
+                                    {newsletter.description}
+                                </p>
+                            )}
+                            <form
+                                className="bc-footer__newsletter-form"
+                                onSubmit={handleNewsletterSubmit}
+                            >
+                                <input
+                                    type="email"
+                                    name="email"
+                                    placeholder={newsletter.placeholder || "Enter your email"}
+                                    className="bc-footer__newsletter-input"
+                                    required
+                                />
+                                <button
+                                    type="submit"
+                                    className="bc-footer__newsletter-button"
+                                >
+                                    {newsletter.buttonText || "Subscribe"}
+                                </button>
+                            </form>
+                        </div>
+                    )}
+                </div>
+
+                <div className="bc-footer__bottom">
+                    {socialLinks.length > 0 && (
+                        <div className="bc-footer__social">
+                            {socialLinks.map((link) => (
+                                <a
+                                    key={link.platform}
+                                    href={link.href}
+                                    className="bc-footer__social-link"
+                                    aria-label={link.label || link.platform}
+                                >
+                                    {socialIcons[link.platform]}
+                                </a>
+                            ))}
+                        </div>
+                    )}
+
+                    {copyright && (
+                        <p className="bc-footer__copyright">{copyright}</p>
+                    )}
+                </div>
+
+                {quote && (
+                    <div className="bc-footer__quote">
+                        <blockquote className="bc-footer__quote-text">
+                            {quote.text}
+                        </blockquote>
+                        <cite className="bc-footer__quote-attribution">
+                            — {quote.attribution}
+                        </cite>
+                    </div>
+                )}
+            </div>
+        </footer>
+    )
+}
+
+export default Footer

package/src/navigation/Footer/index.ts

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