@buildcanada/components 0.3.4 → 0.3.5

package/src/navigation/Header/Header.tsx

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

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

package/src/primitives/Button/Button.scss

@@ -0,0 +1,218 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Button Component
+ *
+ * Design notes:
+ * - Square corners (border-radius: 0) per brand motif "Huge Square Buttons"
+ * - Uppercase text with letter-spacing
+ * - Three sizes: sm (36px), md (44px), lg (56px)
+ ******************************************************************************/
+
+.bc-btn {
+  @include button-text-md;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-1;
+  border: 2px solid transparent;
+  border-radius: $radius-none;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all $transition-fast;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid $auburn;
+    outline-offset: 2px;
+  }
+
+  /***************************************************************************
+   * Size Variants
+   ***************************************************************************/
+
+  &--sm {
+    @include button-text-sm;
+    padding: $space-1 $space-2;
+    min-height: 36px;
+  }
+
+  &--md {
+    @include button-text-md;
+    padding: calc($space-1 + 4px) $space-3;
+    min-height: 44px;
+  }
+
+  &--lg {
+    @include button-text-lg;
+    padding: $space-2 $space-4;
+    min-height: 56px;
+  }
+
+  /***************************************************************************
+   * Solid Variants
+   ***************************************************************************/
+
+  &--solid-auburn {
+    background-color: $auburn;
+    border-color: $auburn;
+    color: $white;
+
+    &:hover:not(:disabled) {
+      background-color: $auburn-600;
+      border-color: $auburn-600;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $auburn-700;
+      border-color: $auburn-700;
+    }
+  }
+
+  &--solid-charcoal {
+    background-color: $charcoal;
+    border-color: $charcoal;
+    color: $white;
+
+    &:hover:not(:disabled) {
+      background-color: $gray-700;
+      border-color: $gray-700;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $gray-600;
+      border-color: $gray-600;
+    }
+  }
+
+  &--solid-linen {
+    background-color: $linen;
+    border-color: $linen;
+    color: $charcoal;
+
+    &:hover:not(:disabled) {
+      background-color: darken($linen, 5%);
+      border-color: darken($linen, 5%);
+    }
+
+    &:active:not(:disabled) {
+      background-color: darken($linen, 8%);
+      border-color: darken($linen, 8%);
+    }
+  }
+
+  /***************************************************************************
+   * Outline Variants
+   ***************************************************************************/
+
+  &--outline-auburn {
+    background-color: transparent;
+    border-color: $auburn;
+    color: $auburn;
+
+    &:hover:not(:disabled) {
+      background-color: $auburn;
+      color: $white;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $auburn-600;
+      border-color: $auburn-600;
+      color: $white;
+    }
+  }
+
+  &--outline-charcoal {
+    background-color: transparent;
+    border-color: $charcoal;
+    color: $charcoal;
+
+    &:hover:not(:disabled) {
+      background-color: $charcoal;
+      color: $white;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $gray-700;
+      border-color: $gray-700;
+      color: $white;
+    }
+  }
+
+  &--outline-white {
+    background-color: transparent;
+    border-color: $white;
+    color: $white;
+
+    &:hover:not(:disabled) {
+      background-color: $white;
+      color: $charcoal;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $gray-100;
+      border-color: $gray-100;
+      color: $charcoal;
+    }
+  }
+
+  /***************************************************************************
+   * State Modifiers
+   ***************************************************************************/
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--icon-only {
+    padding: $space-1;
+
+    &.bc-btn--sm {
+      padding: calc($space-1 - 2px);
+      min-width: 36px;
+    }
+
+    &.bc-btn--md {
+      padding: calc($space-1 + 2px);
+      min-width: 44px;
+    }
+
+    &.bc-btn--lg {
+      padding: $space-2;
+      min-width: 56px;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  /***************************************************************************
+   * Icon Styles
+   ***************************************************************************/
+
+  &__icon {
+    font-size: 0.875em;
+    transition: transform $transition-fast;
+
+    &--left {
+      margin-right: $space-1;
+    }
+
+    &--right {
+      margin-left: $space-1;
+    }
+  }
+
+  // Animated arrow on hover (buildcanada.com style)
+  &:hover:not(:disabled) &__icon--right {
+    transform: translateX(4px);
+  }
+
+  &__text {
+    // Ensure text is vertically centered
+    line-height: 1;
+  }
+}

package/src/primitives/Button/Button.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+import { faDownload, faPlus, faCheck, faEnvelope } from "@fortawesome/free-solid-svg-icons"
+
+import { Button } from "./Button"
+
+const meta: Meta<typeof Button> = {
+    title: "Components/Primitives/Button",
+    component: Button,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A versatile button component that supports multiple variants, sizes, and icon configurations.
+
+## Usage
+
+\`\`\`tsx
+import { Button } from "@buildcanada/components"
+
+<Button text="Click me" variant="solid-auburn" />
+\`\`\`
+
+## Features
+
+- **6 variants**: solid-auburn, solid-charcoal, solid-linen, outline-auburn, outline-charcoal, outline-white
+- **3 sizes**: sm, md, lg
+- **Icon support**: Left or right positioned icons using FontAwesome
+- **Link mode**: Can render as an anchor tag with \`href\` prop
+- **Full width**: Expand to container width with \`fullWidth\` prop
+                `,
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "solid-auburn",
+                "solid-charcoal",
+                "solid-linen",
+                "outline-auburn",
+                "outline-charcoal",
+                "outline-white",
+            ],
+            description: "The visual style variant of the button",
+        },
+        size: {
+            control: "radio",
+            options: ["sm", "md", "lg"],
+            description: "The size of the button",
+        },
+        iconPosition: {
+            control: "radio",
+            options: ["left", "right"],
+            description: "Position of the icon relative to the text",
+        },
+        text: {
+            description: "The button label text",
+        },
+        icon: {
+            description: "FontAwesome icon definition. Defaults to arrow-right.",
+        },
+        disabled: {
+            description: "Whether the button is disabled",
+        },
+        fullWidth: {
+            description: "Whether the button should expand to full container width",
+        },
+        href: {
+            description: "If provided, renders as an anchor tag instead of button",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+
+export const Default: Story = {
+    args: {
+        text: "Get Started",
+        variant: "solid-auburn",
+    },
+}
+
+export const SolidAuburn: Story = {
+    args: {
+        text: "Learn More",
+        variant: "solid-auburn",
+    },
+}
+
+export const SolidCharcoal: Story = {
+    args: {
+        text: "View Projects",
+        variant: "solid-charcoal",
+    },
+}
+
+export const SolidLinen: Story = {
+    args: {
+        text: "Explore",
+        variant: "solid-linen",
+    },
+}
+
+export const OutlineAuburn: Story = {
+    args: {
+        text: "Subscribe",
+        variant: "outline-auburn",
+    },
+}
+
+export const OutlineCharcoal: Story = {
+    args: {
+        text: "Read Article",
+        variant: "outline-charcoal",
+    },
+}
+
+export const OutlineWhite: Story = {
+    args: {
+        text: "Contact Us",
+        variant: "outline-white",
+    },
+    parameters: {
+        backgrounds: { default: "charcoal" },
+    },
+}
+
+export const Small: Story = {
+    args: {
+        text: "Small Button",
+        variant: "solid-auburn",
+        size: "sm",
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        text: "Medium Button",
+        variant: "solid-auburn",
+        size: "md",
+    },
+}
+
+export const Large: Story = {
+    args: {
+        text: "Large Button",
+        variant: "solid-auburn",
+        size: "lg",
+    },
+}
+
+export const WithIconRight: Story = {
+    args: {
+        text: "Download Report",
+        variant: "solid-auburn",
+        icon: faDownload,
+        iconPosition: "right",
+    },
+}
+
+export const WithIconLeft: Story = {
+    args: {
+        text: "Add Item",
+        variant: "solid-charcoal",
+        icon: faPlus,
+        iconPosition: "left",
+    },
+}
+
+export const IconOnly: Story = {
+    args: {
+        icon: faEnvelope,
+        variant: "outline-auburn",
+        ariaLabel: "Send email",
+    },
+}
+
+export const NoIcon: Story = {
+    args: {
+        text: "No Arrow",
+        variant: "solid-auburn",
+        icon: null,
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        text: "Disabled",
+        variant: "solid-auburn",
+        disabled: true,
+    },
+}
+
+export const FullWidth: Story = {
+    args: {
+        text: "Full Width Button",
+        variant: "solid-auburn",
+        fullWidth: true,
+    },
+}
+
+export const AsLink: Story = {
+    args: {
+        text: "Visit Website",
+        variant: "solid-auburn",
+        href: "https://buildcanada.com",
+    },
+}
+
+export const SubmitButton: Story = {
+    args: {
+        text: "Submit Form",
+        variant: "solid-auburn",
+        type: "submit",
+        icon: faCheck,
+    },
+}
+
+// Interactive test: Button click
+export const ClickTest: Story = {
+    args: {
+        text: "Click Me",
+        variant: "solid-auburn",
+        onClick: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const button = canvas.getByRole("button", { name: /click me/i })
+
+        await expect(button).toBeInTheDocument()
+        await userEvent.click(button)
+        await expect(args.onClick).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Disabled button should not be clickable
+export const DisabledClickTest: Story = {
+    args: {
+        text: "Disabled Button",
+        variant: "solid-auburn",
+        disabled: true,
+        onClick: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const button = canvas.getByRole("button", { name: /disabled button/i })
+
+        await expect(button).toBeDisabled()
+        await userEvent.click(button)
+        await expect(args.onClick).not.toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Hover state
+export const HoverTest: Story = {
+    args: {
+        text: "Hover Me",
+        variant: "solid-auburn",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const button = canvas.getByRole("button", { name: /hover me/i })
+
+        await expect(button).toBeInTheDocument()
+        await userEvent.hover(button)
+        // Visual check - hover state should be visible
+    },
+}
+
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center" }}>
+                <Button text="Solid Auburn" variant="solid-auburn" />
+                <Button text="Solid Charcoal" variant="solid-charcoal" />
+                <Button text="Solid Linen" variant="solid-linen" />
+            </div>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center" }}>
+                <Button text="Outline Auburn" variant="outline-auburn" />
+                <Button text="Outline Charcoal" variant="outline-charcoal" />
+            </div>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", alignItems: "center", backgroundColor: "#272727", padding: "16px" }}>
+                <Button text="Outline White" variant="outline-white" />
+            </div>
+        </div>
+    ),
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "16px", alignItems: "center" }}>
+            <Button text="Small" variant="solid-auburn" size="sm" />
+            <Button text="Medium" variant="solid-auburn" size="md" />
+            <Button text="Large" variant="solid-auburn" size="lg" />
+        </div>
+    ),
+}