@buildcanada/components 0.3.2 → 0.3.4

package/src/layout/Section/Section.tsx

@@ -1,37 +0,0 @@
-import cx from "classnames"
-
-export type SectionBackground = "white" | "linen" | "charcoal"
-export type SectionSpacing = "none" | "sm" | "md" | "lg" | "xl"
-
-export interface SectionProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    background?: SectionBackground
-    spacing?: SectionSpacing
-    id?: string
-}
-
-export function Section({
-    children,
-    className,
-    style,
-    background = "white",
-    spacing = "lg",
-    id,
-}: SectionProps) {
-    const classes = cx(
-        "bc-section",
-        `bc-section--bg-${background}`,
-        `bc-section--spacing-${spacing}`,
-        className
-    )
-
-    return (
-        <section className={classes} style={style} id={id}>
-            {children}
-        </section>
-    )
-}
-
-export default Section

package/src/layout/Section/index.ts

@@ -1,2 +0,0 @@
-export { Section, type SectionProps, type SectionBackground, type SectionSpacing } from "./Section"
-export { default } from "./Section"

package/src/layout/Stack/Stack.tsx

@@ -1,48 +0,0 @@
-import cx from "classnames"
-
-export type StackDirection = "vertical" | "horizontal"
-export type StackSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl"
-export type StackAlign = "start" | "center" | "end" | "stretch"
-export type StackJustify = "start" | "center" | "end" | "between" | "around"
-
-export interface StackProps {
-    children: React.ReactNode
-    className?: string
-    style?: React.CSSProperties
-    direction?: StackDirection
-    spacing?: StackSpacing
-    align?: StackAlign
-    justify?: StackJustify
-    wrap?: boolean
-    as?: "div" | "ul" | "ol" | "nav"
-}
-
-export function Stack({
-    children,
-    className,
-    style,
-    direction = "vertical",
-    spacing = "md",
-    align = "stretch",
-    justify = "start",
-    wrap = false,
-    as: Component = "div",
-}: StackProps) {
-    const classes = cx(
-        "bc-stack",
-        `bc-stack--${direction}`,
-        `bc-stack--spacing-${spacing}`,
-        `bc-stack--align-${align}`,
-        `bc-stack--justify-${justify}`,
-        { "bc-stack--wrap": wrap },
-        className
-    )
-
-    return (
-        <Component className={classes} style={style}>
-            {children}
-        </Component>
-    )
-}
-
-export default Stack

package/src/layout/Stack/index.ts

@@ -1,9 +0,0 @@
-export {
-    Stack,
-    type StackProps,
-    type StackDirection,
-    type StackSpacing,
-    type StackAlign,
-    type StackJustify,
-} from "./Stack"
-export { default } from "./Stack"

package/src/navigation/Footer/Footer.tsx

@@ -1,174 +0,0 @@
-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

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

package/src/navigation/Header/Header.tsx

@@ -1,185 +0,0 @@
-import cx from "classnames"
-import { useState } from "react"
-
-export interface NavItem {
-    label: string
-    href: string
-    dropdown?: NavItem[]
-}
-
-export interface HeaderProps {
-    logo: React.ReactNode
-    navItems?: NavItem[]
-    cta?: {
-        label: string
-        href: string
-    }
-    announcement?: {
-        text: string
-        href?: string
-        variant?: "default" | "auburn"
-    }
-    className?: string
-    style?: React.CSSProperties
-}
-
-export function Header({
-    logo,
-    navItems = [],
-    cta,
-    announcement,
-    className,
-    style,
-}: HeaderProps) {
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-    const [openDropdown, setOpenDropdown] = useState<string | null>(null)
-
-    const classes = cx("bc-header", className)
-
-    return (
-        <header className={classes} style={style}>
-            {announcement && (
-                <div
-                    className={cx("bc-header__announcement", {
-                        "bc-header__announcement--auburn":
-                            announcement.variant === "auburn",
-                    })}
-                >
-                    {announcement.href ? (
-                        <a href={announcement.href}>{announcement.text}</a>
-                    ) : (
-                        <span>{announcement.text}</span>
-                    )}
-                </div>
-            )}
-            <div className="bc-header__main">
-                <div className="bc-header__logo">{logo}</div>
-
-                <nav className="bc-header__nav" aria-label="Main navigation">
-                    <ul className="bc-header__nav-list">
-                        {navItems.map((item) => (
-                            <li
-                                key={item.label}
-                                className={cx("bc-header__nav-item", {
-                                    "bc-header__nav-item--has-dropdown": item.dropdown,
-                                })}
-                                onMouseEnter={() =>
-                                    item.dropdown && setOpenDropdown(item.label)
-                                }
-                                onMouseLeave={() =>
-                                    item.dropdown && setOpenDropdown(null)
-                                }
-                            >
-                                {item.dropdown ? (
-                                    <>
-                                        <button
-                                            className="bc-header__nav-link bc-header__nav-link--dropdown"
-                                            aria-expanded={openDropdown === item.label}
-                                            aria-haspopup="true"
-                                        >
-                                            {item.label}
-                                            <svg
-                                                className="bc-header__dropdown-icon"
-                                                viewBox="0 0 20 20"
-                                                fill="currentColor"
-                                                aria-hidden="true"
-                                            >
-                                                <path
-                                                    fillRule="evenodd"
-                                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                                                    clipRule="evenodd"
-                                                />
-                                            </svg>
-                                        </button>
-                                        {openDropdown === item.label && (
-                                            <ul className="bc-header__dropdown">
-                                                {item.dropdown.map((subItem) => (
-                                                    <li key={subItem.label}>
-                                                        <a
-                                                            href={subItem.href}
-                                                            className="bc-header__dropdown-link"
-                                                        >
-                                                            {subItem.label}
-                                                        </a>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        )}
-                                    </>
-                                ) : (
-                                    <a href={item.href} className="bc-header__nav-link">
-                                        {item.label}
-                                    </a>
-                                )}
-                            </li>
-                        ))}
-                    </ul>
-                </nav>
-
-                {cta && (
-                    <a href={cta.href} className="bc-header__cta">
-                        {cta.label}
-                    </a>
-                )}
-
-                <button
-                    className="bc-header__mobile-toggle"
-                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-                    aria-expanded={mobileMenuOpen}
-                    aria-label="Toggle navigation menu"
-                >
-                    <span className="bc-header__hamburger" />
-                </button>
-            </div>
-
-            {/* Mobile Menu */}
-            <div
-                className={cx("bc-header__mobile-menu", {
-                    "bc-header__mobile-menu--open": mobileMenuOpen,
-                })}
-            >
-                <nav aria-label="Mobile navigation">
-                    <ul className="bc-header__mobile-nav">
-                        {navItems.map((item) => (
-                            <li key={item.label}>
-                                <a
-                                    href={item.href}
-                                    className="bc-header__mobile-link"
-                                    onClick={() => setMobileMenuOpen(false)}
-                                >
-                                    {item.label}
-                                </a>
-                                {item.dropdown && (
-                                    <ul className="bc-header__mobile-subnav">
-                                        {item.dropdown.map((subItem) => (
-                                            <li key={subItem.label}>
-                                                <a
-                                                    href={subItem.href}
-                                                    className="bc-header__mobile-link bc-header__mobile-link--sub"
-                                                    onClick={() => setMobileMenuOpen(false)}
-                                                >
-                                                    {subItem.label}
-                                                </a>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </li>
-                        ))}
-                    </ul>
-                    {cta && (
-                        <a
-                            href={cta.href}
-                            className="bc-header__mobile-cta"
-                            onClick={() => setMobileMenuOpen(false)}
-                        >
-                            {cta.label}
-                        </a>
-                    )}
-                </nav>
-            </div>
-        </header>
-    )
-}
-
-export default Header

package/src/navigation/Header/index.ts

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

package/src/primitives/Button/Button.tsx

@@ -1,120 +0,0 @@
-import cx from "classnames"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { IconDefinition, faArrowRight } from "@fortawesome/free-solid-svg-icons"
-
-export type ButtonVariant =
-    | "solid-auburn"
-    | "solid-charcoal"
-    | "solid-linen"
-    | "outline-auburn"
-    | "outline-charcoal"
-    | "outline-white"
-
-export type ButtonSize = "sm" | "md" | "lg"
-
-type ButtonCommonProps = {
-    children?: React.ReactNode
-    text?: string
-    className?: string
-    style?: React.CSSProperties
-    variant?: ButtonVariant
-    size?: ButtonSize
-    icon?: IconDefinition | null
-    iconPosition?: "left" | "right"
-    fullWidth?: boolean
-    disabled?: boolean
-    ariaLabel?: string
-    dataTrackNote?: string
-}
-
-type WithHrefProps = {
-    href: string
-    onClick?: never
-    type?: never
-}
-
-type WithOnClickProps = {
-    onClick?: () => void
-    href?: never
-    type?: "button" | "submit"
-}
-
-export type ButtonProps =
-    | (ButtonCommonProps & WithHrefProps)
-    | (ButtonCommonProps & WithOnClickProps)
-
-export function Button({
-    variant = "solid-auburn",
-    size = "md",
-    className,
-    style,
-    href,
-    onClick,
-    text,
-    children,
-    ariaLabel,
-    type = "button",
-    icon = faArrowRight,
-    iconPosition = "right",
-    fullWidth = false,
-    dataTrackNote,
-    disabled,
-}: ButtonProps) {
-    const classes = cx(
-        "bc-btn",
-        `bc-btn--${variant}`,
-        `bc-btn--${size}`,
-        className,
-        {
-            "bc-btn--icon-only": icon && !text && !children,
-            "bc-btn--full-width": fullWidth,
-        }
-    )
-
-    const content = (
-        <>
-            {iconPosition === "left" && icon && (
-                <FontAwesomeIcon
-                    className={cx("bc-btn__icon", { "bc-btn__icon--left": text || children })}
-                    icon={icon}
-                />
-            )}
-            {text && <span className="bc-btn__text">{text}</span>}
-            {children}
-            {iconPosition !== "left" && icon && (
-                <FontAwesomeIcon
-                    className={cx("bc-btn__icon", { "bc-btn__icon--right": text || children })}
-                    icon={icon}
-                />
-            )}
-        </>
-    )
-
-    if (href) {
-        const aProps = {
-            href: disabled ? undefined : href,
-            className: classes,
-            style,
-            "data-track-note": dataTrackNote,
-            onClick: disabled
-                ? (e: React.MouseEvent) => e.preventDefault()
-                : undefined,
-            "aria-label": ariaLabel,
-            "aria-disabled": disabled,
-        }
-        return <a {...aProps}>{content}</a>
-    }
-
-    const buttonProps = {
-        type,
-        className: classes,
-        style,
-        onClick,
-        "aria-label": ariaLabel,
-        "data-track-note": dataTrackNote,
-        disabled,
-    }
-    return <button {...buttonProps}>{content}</button>
-}
-
-export default Button

package/src/primitives/Button/index.ts

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

package/src/primitives/Checkbox/Checkbox.tsx

@@ -1,75 +0,0 @@
-import cx from "classnames"
-import { forwardRef, useId } from "react"
-
-export interface CheckboxProps {
-    label: string
-    checked?: boolean
-    defaultChecked?: boolean
-    name?: string
-    id?: string
-    className?: string
-    disabled?: boolean
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-    function Checkbox(
-        {
-            label,
-            checked,
-            defaultChecked,
-            name,
-            id: providedId,
-            className,
-            disabled = false,
-            onChange,
-        },
-        ref
-    ) {
-        const generatedId = useId()
-        const id = providedId || generatedId
-
-        const classes = cx(
-            "bc-checkbox",
-            { "bc-checkbox--disabled": disabled },
-            className
-        )
-
-        return (
-            <div className={classes}>
-                <input
-                    ref={ref}
-                    type="checkbox"
-                    id={id}
-                    name={name}
-                    checked={checked}
-                    defaultChecked={defaultChecked}
-                    disabled={disabled}
-                    className="bc-checkbox__input"
-                    onChange={onChange}
-                />
-                <label htmlFor={id} className="bc-checkbox__label">
-                    <span className="bc-checkbox__box">
-                        <svg
-                            className="bc-checkbox__check"
-                            viewBox="0 0 14 14"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M11.5 4L5.5 10L2.5 7"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                                strokeLinecap="square"
-                                strokeLinejoin="round"
-                            />
-                        </svg>
-                    </span>
-                    <span className="bc-checkbox__text">{label}</span>
-                </label>
-            </div>
-        )
-    }
-)
-
-export default Checkbox

package/src/primitives/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox, type CheckboxProps } from "./Checkbox"
-export { default } from "./Checkbox"