@buildcanada/components 0.3.3 → 0.3.5

package/dist/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/dist/navigation/Footer/index.d.ts

@@ -0,0 +1,3 @@
+export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./Footer.js";
+export { default } from "./Footer.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/Footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/Footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/navigation/Footer/index.js

@@ -0,0 +1,2 @@
+export { Footer } from "./Footer.js";
+export { default } from "./Footer.js";

package/dist/navigation/Header/Header.d.ts

@@ -0,0 +1,23 @@
+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 declare function Header({ logo, navItems, cta, announcement, className, style, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map

package/dist/navigation/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/navigation/Header/Header.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,OAAO;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;CACvB;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,GAAG,CAAC,EAAE;QACF,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;KACf,CAAA;IACD,YAAY,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;KACjC,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC9B;AAED,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,QAAa,EACb,GAAG,EACH,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,WAAW,2CAsJb;AAED,eAAe,MAAM,CAAA"}

package/dist/navigation/Header/Header.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cx from "classnames";
+import { useState } from "react";
+export function Header({ logo, navItems = [], cta, announcement, className, style, }) {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const [openDropdown, setOpenDropdown] = useState(null);
+    const classes = cx("bc-header", className);
+    return (_jsxs("header", { className: classes, style: style, children: [announcement && (_jsx("div", { className: cx("bc-header__announcement", {
+                    "bc-header__announcement--auburn": announcement.variant === "auburn",
+                }), children: announcement.href ? (_jsx("a", { href: announcement.href, children: announcement.text })) : (_jsx("span", { children: announcement.text })) })), _jsxs("div", { className: "bc-header__main", children: [_jsx("div", { className: "bc-header__logo", children: logo }), _jsx("nav", { className: "bc-header__nav", "aria-label": "Main navigation", children: _jsx("ul", { className: "bc-header__nav-list", children: navItems.map((item) => (_jsx("li", { 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), children: item.dropdown ? (_jsxs(_Fragment, { children: [_jsxs("button", { className: "bc-header__nav-link bc-header__nav-link--dropdown", "aria-expanded": openDropdown === item.label, "aria-haspopup": "true", children: [item.label, _jsx("svg", { className: "bc-header__dropdown-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("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" }) })] }), openDropdown === item.label && (_jsx("ul", { className: "bc-header__dropdown", children: item.dropdown.map((subItem) => (_jsx("li", { children: _jsx("a", { href: subItem.href, className: "bc-header__dropdown-link", children: subItem.label }) }, subItem.label))) }))] })) : (_jsx("a", { href: item.href, className: "bc-header__nav-link", children: item.label })) }, item.label))) }) }), cta && (_jsx("a", { href: cta.href, className: "bc-header__cta", children: cta.label })), _jsx("button", { className: "bc-header__mobile-toggle", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-expanded": mobileMenuOpen, "aria-label": "Toggle navigation menu", children: _jsx("span", { className: "bc-header__hamburger" }) })] }), _jsx("div", { className: cx("bc-header__mobile-menu", {
+                    "bc-header__mobile-menu--open": mobileMenuOpen,
+                }), children: _jsxs("nav", { "aria-label": "Mobile navigation", children: [_jsx("ul", { className: "bc-header__mobile-nav", children: navItems.map((item) => (_jsxs("li", { children: [_jsx("a", { href: item.href, className: "bc-header__mobile-link", onClick: () => setMobileMenuOpen(false), children: item.label }), item.dropdown && (_jsx("ul", { className: "bc-header__mobile-subnav", children: item.dropdown.map((subItem) => (_jsx("li", { children: _jsx("a", { href: subItem.href, className: "bc-header__mobile-link bc-header__mobile-link--sub", onClick: () => setMobileMenuOpen(false), children: subItem.label }) }, subItem.label))) }))] }, item.label))) }), cta && (_jsx("a", { href: cta.href, className: "bc-header__mobile-cta", onClick: () => setMobileMenuOpen(false), children: cta.label }))] }) })] }));
+}
+export default Header;

package/dist/navigation/Header/Header.scss

@@ -0,0 +1,325 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Header Component
+ ******************************************************************************/
+
+.bc-header {
+  position: sticky;
+  top: 0;
+  z-index: $z-sticky;
+  background-color: $white;
+  border-bottom: 1px solid $border-muted;
+
+  /***************************************************************************
+   * Announcement Banner
+   ***************************************************************************/
+
+  &__announcement {
+    background-color: $charcoal;
+    color: $white;
+    text-align: center;
+    padding: calc($space-1 / 2) $space-2;
+    @include body-3;
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &--auburn {
+      background-color: $auburn;
+    }
+  }
+
+  /***************************************************************************
+   * Main Header Row
+   ***************************************************************************/
+
+  &__main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $space-2 $space-3;
+    max-width: 1280px;
+    margin: 0 auto;
+
+    @include md-up {
+      padding: $space-2 $space-5;
+    }
+  }
+
+  /***************************************************************************
+   * Logo
+   ***************************************************************************/
+
+  &__logo {
+    flex-shrink: 0;
+
+    a {
+      display: block;
+      text-decoration: none;
+    }
+
+    img {
+      height: 32px;
+      width: auto;
+
+      @include md-up {
+        height: 40px;
+      }
+    }
+  }
+
+  /***************************************************************************
+   * Desktop Navigation
+   ***************************************************************************/
+
+  &__nav {
+    display: none;
+
+    @include md-up {
+      display: block;
+    }
+  }
+
+  &__nav-list {
+    display: flex;
+    align-items: center;
+    gap: $space-1;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__nav-item {
+    position: relative;
+
+    &--has-dropdown {
+      // Keep dropdown open when hovering over it
+      &:hover .bc-header__dropdown {
+        display: block;
+      }
+    }
+  }
+
+  &__nav-link {
+    @include label;
+    display: inline-flex;
+    align-items: center;
+    gap: calc($space-1 / 2);
+    padding: $space-1 $space-2;
+    color: $text-primary;
+    text-decoration: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: color $transition-fast;
+
+    &:hover {
+      color: $auburn;
+    }
+
+    &--dropdown {
+      // Visual indicator for dropdown
+    }
+  }
+
+  &__dropdown-icon {
+    width: 16px;
+    height: 16px;
+    transition: transform $transition-fast;
+
+    .bc-header__nav-item:hover & {
+      transform: rotate(180deg);
+    }
+  }
+
+  /***************************************************************************
+   * Dropdown Menu
+   ***************************************************************************/
+
+  &__dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 200px;
+    background-color: $white;
+    border: 1px solid $border-muted;
+    box-shadow: $shadow-md;
+    list-style: none;
+    margin: 0;
+    padding: $space-1 0;
+    z-index: $z-dropdown;
+  }
+
+  &__dropdown-link {
+    @include body-2;
+    display: block;
+    padding: $space-1 $space-2;
+    color: $text-primary;
+    text-decoration: none;
+    transition: background-color $transition-fast;
+
+    &:hover {
+      background-color: $linen;
+      color: $auburn;
+    }
+  }
+
+  /***************************************************************************
+   * CTA Button
+   ***************************************************************************/
+
+  &__cta {
+    @include button-text-sm;
+    display: none;
+    padding: $space-1 $space-2;
+    background-color: $auburn;
+    color: $white;
+    text-decoration: none;
+    border-radius: $radius-none;
+    transition: background-color $transition-fast;
+
+    &:hover {
+      background-color: $auburn-600;
+    }
+
+    @include md-up {
+      display: inline-block;
+    }
+  }
+
+  /***************************************************************************
+   * Mobile Toggle
+   ***************************************************************************/
+
+  &__mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    @include md-up {
+      display: none;
+    }
+  }
+
+  &__hamburger {
+    position: relative;
+    width: 24px;
+    height: 2px;
+    background-color: $charcoal;
+    transition: background-color $transition-fast;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: $charcoal;
+      transition: transform $transition-fast;
+    }
+
+    &::before {
+      top: -8px;
+    }
+
+    &::after {
+      bottom: -8px;
+    }
+  }
+
+  &__mobile-toggle[aria-expanded="true"] &__hamburger {
+    background-color: transparent;
+
+    &::before {
+      transform: translateY(8px) rotate(45deg);
+    }
+
+    &::after {
+      transform: translateY(-8px) rotate(-45deg);
+    }
+  }
+
+  /***************************************************************************
+   * Mobile Menu
+   ***************************************************************************/
+
+  &__mobile-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: $white;
+    border-bottom: 1px solid $border-muted;
+    padding: $space-3;
+    box-shadow: $shadow-lg;
+
+    &--open {
+      display: block;
+    }
+
+    @include md-up {
+      display: none !important;
+    }
+  }
+
+  &__mobile-nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__mobile-link {
+    @include label;
+    display: block;
+    padding: $space-2 0;
+    color: $text-primary;
+    text-decoration: none;
+    border-bottom: 1px solid $border-muted;
+
+    &:hover {
+      color: $auburn;
+    }
+
+    &--sub {
+      @include body-2;
+      padding-left: $space-3;
+      font-weight: 400;
+    }
+  }
+
+  &__mobile-subnav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__mobile-cta {
+    @include button-text-md;
+    display: block;
+    width: 100%;
+    margin-top: $space-3;
+    padding: $space-2;
+    background-color: $auburn;
+    color: $white;
+    text-align: center;
+    text-decoration: none;
+    border-radius: $radius-none;
+  }
+}

package/dist/navigation/Header/index.d.ts

@@ -0,0 +1,3 @@
+export { Header, type HeaderProps, type NavItem } from "./Header.js";
+export { default } from "./Header.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAA;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/navigation/Header/index.js

@@ -0,0 +1,2 @@
+export { Header } from "./Header.js";
+export { default } from "./Header.js";

package/dist/primitives/Button/Button.d.ts

@@ -0,0 +1,31 @@
+import { IconDefinition } 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 declare function Button({ variant, size, className, style, href, onClick, text, children, ariaLabel, type, icon, iconPosition, fullWidth, dataTrackNote, disabled, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/primitives/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAgB,MAAM,mCAAmC,CAAA;AAEhF,MAAM,MAAM,aAAa,GACnB,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,CAAA;AAErB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,KAAK,iBAAiB,GAAG;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,aAAa,GAAG;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,IAAI,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GACjB,CAAC,iBAAiB,GAAG,aAAa,CAAC,GACnC,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAA;AAE5C,wBAAgB,MAAM,CAAC,EACnB,OAAwB,EACxB,IAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,IAAe,EACf,IAAmB,EACnB,YAAsB,EACtB,SAAiB,EACjB,aAAa,EACb,QAAQ,GACX,EAAE,WAAW,2CAwDb;AAED,eAAe,MAAM,CAAA"}