@buildcanada/components 0.3.4 → 0.3.5

package/src/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/src/navigation/Header/Header.stories.tsx

@@ -0,0 +1,346 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect } from "@storybook/test"
+
+import { Header } from "./Header"
+
+const meta: Meta<typeof Header> = {
+    title: "Components/Navigation/Header",
+    component: Header,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: `
+A responsive site header with navigation, logo, CTA button, and optional announcement banner.
+
+## Usage
+
+\`\`\`tsx
+import { Header } from "@buildcanada/components"
+
+<Header
+  logo={<Logo />}
+  navItems={[
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Projects", href: "/projects" },
+  ]}
+  cta={{ label: "Get Started", href: "/start" }}
+/>
+\`\`\`
+
+## With Dropdowns
+
+\`\`\`tsx
+<Header
+  logo={<Logo />}
+  navItems={[
+    { label: "Home", href: "/" },
+    {
+      label: "Projects",
+      href: "/projects",
+      dropdown: [
+        { label: "Project A", href: "/projects/a" },
+        { label: "Project B", href: "/projects/b" },
+      ],
+    },
+  ]}
+/>
+\`\`\`
+
+## Announcement Banner
+
+\`\`\`tsx
+<Header
+  logo={<Logo />}
+  navItems={navItems}
+  announcement={{
+    text: "New feature available!",
+    href: "/new-feature",
+    variant: "auburn", // or "default"
+  }}
+/>
+\`\`\`
+
+## Responsive
+
+On mobile, navigation collapses into a hamburger menu.
+                `,
+            },
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Header>
+
+const Logo = () => (
+    <span style={{
+        fontFamily: "'Soehne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+        fontSize: "18px",
+        fontWeight: 500,
+        color: "#272727",
+        letterSpacing: "-0.01em",
+    }}>
+        Build Canada
+    </span>
+)
+
+const basicNavItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Projects", href: "/projects" },
+    { label: "Contact", href: "/contact" },
+]
+
+const navWithDropdowns = [
+    { label: "Home", href: "/" },
+    {
+        label: "Projects",
+        href: "/projects",
+        dropdown: [
+            { label: "Canada Spends", href: "/projects/canada-spends" },
+            { label: "Budget Tracker", href: "/projects/budget-tracker" },
+            { label: "Data Explorer", href: "/projects/data-explorer" },
+        ],
+    },
+    {
+        label: "Research",
+        href: "/research",
+        dropdown: [
+            { label: "Reports", href: "/research/reports" },
+            { label: "Analysis", href: "/research/analysis" },
+            { label: "Publications", href: "/research/publications" },
+        ],
+    },
+    { label: "About", href: "/about" },
+]
+
+export const Default: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+    },
+}
+
+export const WithCTA: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+    },
+}
+
+export const WithAnnouncement: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+        announcement: {
+            text: "New: Canada Spends 2024 data now available!",
+            href: "/projects/canada-spends",
+            variant: "default",
+        },
+    },
+}
+
+export const WithAuburnAnnouncement: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+        announcement: {
+            text: "Breaking: Federal Budget 2024 Analysis",
+            href: "/research/budget-2024",
+            variant: "auburn",
+        },
+    },
+}
+
+export const WithDropdowns: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: navWithDropdowns,
+        cta: {
+            label: "Explore Data",
+            href: "/explore",
+        },
+    },
+}
+
+export const MinimalHeader: Story = {
+    args: {
+        logo: <Logo />,
+    },
+}
+
+export const FullFeatured: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: navWithDropdowns,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+        announcement: {
+            text: "New: 2024 Federal Budget Analysis now available",
+            href: "/research/budget-2024",
+            variant: "auburn",
+        },
+    },
+}
+
+export const ManyNavItems: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Projects", href: "/projects" },
+            { label: "Research", href: "/research" },
+            { label: "Data", href: "/data" },
+            { label: "Blog", href: "/blog" },
+            { label: "Contact", href: "/contact" },
+        ],
+    },
+}
+
+export const WithTextLogo: Story = {
+    args: {
+        logo: (
+            <span style={{
+                fontFamily: "'Soehne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+                fontSize: "20px",
+                fontWeight: 500,
+                color: "#932F2F",
+                letterSpacing: "-0.01em",
+            }}>
+                Company Name
+            </span>
+        ),
+        navItems: basicNavItems,
+        cta: {
+            label: "Sign Up",
+            href: "/signup",
+        },
+    },
+}
+
+export const CanadaSpendsHeader: Story = {
+    args: {
+        logo: (
+            <svg width="160" height="24" viewBox="0 0 160 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <text x="0" y="18" fontFamily="sans-serif" fontSize="16" fontWeight="600" fill="#272727">
+                    Canada Spends
+                </text>
+            </svg>
+        ),
+        navItems: [
+            { label: "Charts", href: "/charts" },
+            { label: "Data", href: "/data" },
+            {
+                label: "Topics",
+                href: "/topics",
+                dropdown: [
+                    { label: "Healthcare", href: "/topics/healthcare" },
+                    { label: "Education", href: "/topics/education" },
+                    { label: "Defense", href: "/topics/defense" },
+                    { label: "Infrastructure", href: "/topics/infrastructure" },
+                ],
+            },
+            { label: "About", href: "/about" },
+        ],
+        cta: {
+            label: "Explore",
+            href: "/explore",
+        },
+    },
+}
+
+export const ResponsiveDemo: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: navWithDropdowns,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Resize the viewport to see the responsive behavior. On smaller screens, the navigation collapses into a hamburger menu.",
+            },
+        },
+    },
+}
+
+// Interactive test: Navigation links
+export const NavigationTest: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        cta: {
+            label: "Get Started",
+            href: "/get-started",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        // Check that navigation links are present
+        const homeLink = canvas.getByRole("link", { name: /home/i })
+        const aboutLink = canvas.getByRole("link", { name: /about/i })
+        const ctaButton = canvas.getByRole("link", { name: /get started/i })
+
+        await expect(homeLink).toBeInTheDocument()
+        await expect(aboutLink).toBeInTheDocument()
+        await expect(ctaButton).toBeInTheDocument()
+
+        await expect(homeLink).toHaveAttribute("href", "/")
+        await expect(aboutLink).toHaveAttribute("href", "/about")
+    },
+}
+
+// Interactive test: Logo presence
+export const LogoTest: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        // Check that the logo/brand text is present
+        const logoText = canvas.getByText(/build canada/i)
+        await expect(logoText).toBeInTheDocument()
+    },
+}
+
+// Interactive test: Announcement banner
+export const AnnouncementTest: Story = {
+    args: {
+        logo: <Logo />,
+        navItems: basicNavItems,
+        announcement: {
+            text: "Test announcement message",
+            href: "/test-link",
+            variant: "auburn",
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+
+        const announcement = canvas.getByText(/test announcement message/i)
+        await expect(announcement).toBeInTheDocument()
+    },
+}