@buildcanada/components 0.1.0

package/src/layout/Section/Section.scss

@@ -0,0 +1,74 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Section Component
+ *
+ * Full-width section with background color variants
+ ******************************************************************************/
+
+.bc-section {
+  width: 100%;
+
+  /***************************************************************************
+   * 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;
+  }
+
+  /***************************************************************************
+   * Spacing Variants
+   ***************************************************************************/
+
+  &--spacing-none {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &--spacing-sm {
+    padding-top: $space-4;
+    padding-bottom: $space-4;
+  }
+
+  &--spacing-md {
+    padding-top: $space-6;
+    padding-bottom: $space-6;
+
+    @include md-up {
+      padding-top: $space-8;
+      padding-bottom: $space-8;
+    }
+  }
+
+  &--spacing-lg {
+    padding-top: $space-8;
+    padding-bottom: $space-8;
+
+    @include md-up {
+      padding-top: $space-10;
+      padding-bottom: $space-10;
+    }
+  }
+
+  &--spacing-xl {
+    padding-top: $space-10;
+    padding-bottom: $space-10;
+
+    @include md-up {
+      padding-top: $space-12;
+      padding-bottom: $space-12;
+    }
+  }
+}

package/src/layout/Section/Section.tsx

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

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

package/src/layout/Stack/Stack.scss

@@ -0,0 +1,61 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Stack Component
+ *
+ * Flexbox-based layout for consistent spacing
+ ******************************************************************************/
+
+.bc-stack {
+  display: flex;
+
+  /***************************************************************************
+   * Direction Variants
+   ***************************************************************************/
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  /***************************************************************************
+   * Spacing Variants
+   ***************************************************************************/
+
+  &--spacing-none { gap: 0; }
+  &--spacing-xs { gap: calc($space-1 / 2); }
+  &--spacing-sm { gap: $space-1; }
+  &--spacing-md { gap: $space-2; }
+  &--spacing-lg { gap: $space-3; }
+  &--spacing-xl { gap: $space-4; }
+
+  /***************************************************************************
+   * Alignment Variants
+   ***************************************************************************/
+
+  &--align-start { align-items: flex-start; }
+  &--align-center { align-items: center; }
+  &--align-end { align-items: flex-end; }
+  &--align-stretch { align-items: stretch; }
+
+  /***************************************************************************
+   * Justify Variants
+   ***************************************************************************/
+
+  &--justify-start { justify-content: flex-start; }
+  &--justify-center { justify-content: center; }
+  &--justify-end { justify-content: flex-end; }
+  &--justify-between { justify-content: space-between; }
+  &--justify-around { justify-content: space-around; }
+
+  /***************************************************************************
+   * Wrap
+   ***************************************************************************/
+
+  &--wrap {
+    flex-wrap: wrap;
+  }
+}

package/src/layout/Stack/Stack.tsx

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

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

package/src/navigation/Footer/Footer.scss

@@ -0,0 +1,233 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Footer Component
+ ******************************************************************************/
+
+.bc-footer {
+  background-color: $charcoal;
+  color: $white;
+  padding: $space-8 0;
+
+  /***************************************************************************
+   * Inner Container
+   ***************************************************************************/
+
+  &__inner {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 $space-3;
+
+    @include md-up {
+      padding: 0 $space-5;
+    }
+  }
+
+  /***************************************************************************
+   * Main Section
+   ***************************************************************************/
+
+  &__main {
+    display: grid;
+    gap: $space-6;
+
+    @include md-up {
+      grid-template-columns: auto 1fr auto;
+      align-items: start;
+    }
+  }
+
+  /***************************************************************************
+   * Logo
+   ***************************************************************************/
+
+  &__logo {
+    img {
+      height: 32px;
+      width: auto;
+      filter: brightness(0) invert(1);
+    }
+  }
+
+  /***************************************************************************
+   * Navigation
+   ***************************************************************************/
+
+  &__nav {
+    @include md-up {
+      justify-self: center;
+    }
+  }
+
+  &__nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-1 $space-3;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__nav-link {
+    @include label;
+    color: rgba($white, 0.8);
+    text-decoration: none;
+    transition: color $transition-fast;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  /***************************************************************************
+   * Newsletter
+   ***************************************************************************/
+
+  &__newsletter {
+    @include md-up {
+      text-align: right;
+      max-width: 320px;
+    }
+  }
+
+  &__newsletter-heading {
+    @include h4;
+    color: $white;
+    margin: 0 0 calc($space-1 / 2);
+  }
+
+  &__newsletter-description {
+    @include body-3;
+    color: rgba($white, 0.7);
+    margin: 0 0 $space-2;
+  }
+
+  &__newsletter-form {
+    display: flex;
+    gap: calc($space-1 / 2);
+  }
+
+  &__newsletter-input {
+    @include body-3;
+    flex: 1;
+    min-width: 0;
+    padding: $space-1 $space-2;
+    border: none;
+    border-radius: $radius-none;
+    background-color: rgba($white, 0.1);
+    color: $white;
+
+    &::placeholder {
+      color: rgba($white, 0.5);
+    }
+
+    &:focus {
+      outline: 2px solid $auburn;
+      outline-offset: -2px;
+    }
+  }
+
+  &__newsletter-button {
+    @include button-text-sm;
+    padding: $space-1 $space-2;
+    background-color: $auburn;
+    color: $white;
+    border: none;
+    border-radius: $radius-none;
+    cursor: pointer;
+    transition: background-color $transition-fast;
+
+    &:hover {
+      background-color: $auburn-600;
+    }
+  }
+
+  /***************************************************************************
+   * Bottom Section
+   ***************************************************************************/
+
+  &__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: $space-2;
+    margin-top: $space-6;
+    padding-top: $space-4;
+    border-top: 1px solid rgba($white, 0.1);
+  }
+
+  /***************************************************************************
+   * Social Links
+   ***************************************************************************/
+
+  &__social {
+    display: flex;
+    gap: $space-2;
+  }
+
+  &__social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    color: rgba($white, 0.7);
+    transition: color $transition-fast;
+
+    &:hover {
+      color: $white;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  /***************************************************************************
+   * Copyright
+   ***************************************************************************/
+
+  &__copyright {
+    @include body-3;
+    color: rgba($white, 0.5);
+    margin: 0;
+  }
+
+  /***************************************************************************
+   * Quote
+   ***************************************************************************/
+
+  &__quote {
+    margin-top: $space-6;
+    padding-top: $space-4;
+    border-top: 1px solid rgba($white, 0.1);
+    text-align: center;
+  }
+
+  &__quote-text {
+    @include body-1;
+    font-style: italic;
+    color: rgba($white, 0.8);
+    margin: 0 0 $space-1;
+    max-width: 640px;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before {
+      content: '"';
+    }
+
+    &::after {
+      content: '"';
+    }
+  }
+
+  &__quote-attribution {
+    @include micro;
+    color: rgba($white, 0.5);
+    font-style: normal;
+  }
+}

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"
+export { default } from "./Footer"