feat(header): L3-376 Added Header component (#168)

* feat(header): initial commit of header component

* feat(navigationitem): add navigation item

* feat(header): moved child components to story. context added to manage state across child components

* chore(header): reverted package.lock to version on main

* chore(header): removed incorrect logo file

* feat(header): added user management component. style fixes

* feat(header): updated unit tests

* chore(header): fixed search component show hide logic

* chore(header): reverted package.lock to version on main

* feat(header): updates to header unit tests and minor css style updates

* chore(header): L3-376 updated unit tests to get full coverage on components

* chore(header): css updates for breakpoint mixins, address pr comments

* chore(header): L3-376 updates to tests, laguage selection, mobile styling

* chore(header): L3-376 style fixes for clicks in open areas triggering nav item clicks

* chore(header): L3-376 updated language selection logic

* chore(header): L3-376 added userManagement component to index.ts

* build(scss): fix aliases on export to handle nested components

* chore(header): L3-376 updated label props to strings

* chore(header): removed most transitions, updated styles in header to use spacing tokens

* fix(usermanagement): export callback properties

* chore(header): L3-376 update header styles to resolve issues in remix

* fix(header): L3-376 fixed tag syntax and style issue when consumed by remix

* chore(header): L3-376 resolved issue with tests for UserManagement component

---------

Co-authored-by: Scott Dickerson <[email protected]>

.storybook/main.ts

@@ -14,7 +14,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    defaultName: "Overview"
+    defaultName: "Overview", 
   },
   viteFinal: (config) => {
     if (config && config.resolve) {

.template/Component/ComponentName.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react';
 import ComponentName, { ComponentNameProps } from './ComponentName';
 
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
   title: 'Components/ComponentName',
   component: ComponentName,
@@ -9,6 +10,7 @@ const meta = {
 export default meta;
 export const Playground = (props: ComponentNameProps) => <ComponentName {...props} />;
 
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 Playground.args = {
   children: 'Hi There',
 };

src/components/Header/Header.stories.tsx

@@ -0,0 +1,200 @@
+import type { Meta } from '@storybook/react';
+import Header, { HeaderProps } from './Header';
+import Logo from '../../assets/PhillipsLogo.svg?react';
+import Navigation from '../Navigation/Navigation';
+import NavigationList from '../Navigation/NavigationList/NavigationList';
+import NavigationItemTrigger from '../Navigation/NavigationItemTrigger/NavigationItemTrigger';
+import NavigationItem from '../Navigation/NavigationItem/NavigationItem';
+import { LinkVariants } from '../Link/utils';
+import { px } from '../../utils';
+import UserManagement from '../UserManagement/UserManagement';
+
+const meta = {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    docs: {
+      story: {
+        height: '700px',
+      },
+    },
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+export const Playground = (props: HeaderProps) => (
+  <Header {...props}>
+    <Navigation id={`${px}-main-nav`} backBtnLabel="← Back">
+      <NavigationList id={`${px}-main-nav-list`}>
+        <NavigationItemTrigger id="auctions" label="Auctions">
+          <NavigationList id={`${px}-auctions-nav-list`}>
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Editions & Works on Paper"
+            />
+            <NavigationItem
+              badge="London"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Casa Fornaroli"
+            />
+            <NavigationItem
+              badge="Geneva"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="The Geneva Watch Auction: XVII"
+            />
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Modern & Contemporary Art Day Sale—Morning Session"
+            />
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Modern & Contemporary Art Day Sale—Afternoon Session"
+            />
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Modern & Contemporary Art Evening Sale"
+            />
+            <NavigationItem
+              badge="London"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Wired: Online Auction"
+            />
+            <NavigationItem
+              badge="Hong Kong "
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="The Imperial Patek Philippe Sale"
+            />
+            <NavigationItem
+              badge="Hong Kong"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Disruptors: Evening Sale of Modern & Contemporary Art, Design and Watches"
+            />
+            <NavigationItem
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkSm}
+              label="Browse Full Auction Calendar"
+            />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Auction Calendar" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Auction Results" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Artists & Makers" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="How To Buy" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Remote Bidding" />
+          </NavigationList>
+        </NavigationItemTrigger>
+        <NavigationItem href="#" label="Calendar" />
+        <NavigationItemTrigger id="departments" label="Departments">
+          <NavigationList id={`${px}-departments-nav-list`}>
+            <NavigationItem
+              href="#"
+              navGroup="nav-link-sm"
+              navType={LinkVariants.navLinkSm}
+              label="Modern & Contemporary Art"
+            />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Design" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Editions" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Jewels" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Photographs" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Watches" />
+            <NavigationItem href="#" navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} label="Private Sales" />
+          </NavigationList>
+        </NavigationItemTrigger>
+        <NavigationItemTrigger id="exhibitions" label="Exhibitions">
+          <NavigationList id={`${px}-exhibitions-nav-list`}>
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Written in the Sky: Works by Ed Ruscha"
+            />
+            <NavigationItem
+              badge="Paris"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="Modeler le papier // Shapes On Paper"
+            />
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="ALT POP: An Alternative History to American Pop Art"
+            />
+            <NavigationItem
+              badge="New York"
+              href="#"
+              navGroup="nav-link-lg"
+              navType={LinkVariants.navLinkLg}
+              label="New Terrains: Contemporary Native American Art"
+            />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Past Exhibitions" />
+          </NavigationList>
+        </NavigationItemTrigger>
+        <NavigationItem href="#" label="Perpetual" />
+        <NavigationItem href="#" label="Dropshop" />
+        <NavigationItemTrigger id="buy-sell" label="Buy & Sell">
+          <NavigationList id={`${px}-buy-sell-nav-list`}>
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="How To Buy" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="How To Sell" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Remote Bidding" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Private Services" />
+            <NavigationItem
+              navGroup="nav-link-sm"
+              navType={LinkVariants.navLinkSm}
+              href="#"
+              label="Trusts, Estates & Valuations"
+            />
+            <NavigationItem
+              navGroup="nav-link-sm"
+              navType={LinkVariants.navLinkSm}
+              href="#"
+              label="Fiduciary Services"
+            />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Buy Catalogues" />
+          </NavigationList>
+        </NavigationItemTrigger>
+        <NavigationItem href="#" label="Editorial" />
+        <NavigationItemTrigger id="about-us" label="About Us">
+          <NavigationList id={`${px}-about-us-nav-list`}>
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Our History" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Our Team" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Locations" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Press" />
+            <NavigationItem navGroup="nav-link-sm" navType={LinkVariants.navLinkSm} href="#" label="Careers" />
+          </NavigationList>
+        </NavigationItemTrigger>
+        <UserManagement></UserManagement>
+      </NavigationList>
+    </Navigation>
+  </Header>
+);
+
+Playground.args = {
+  logo: typeof Logo === 'string' ? Logo : <Logo />,
+};

src/components/Header/Header.test.tsx

@@ -1,12 +1,84 @@
 import { render, screen } from '@testing-library/react';
-
+import userEvent from '@testing-library/user-event';
 import Header from './Header';
+import LogoSVG from '../../assets/PhillipsLogo.svg?react';
+import LogoIMG from '../../assets/PhillipsLogo.svg';
+import { px } from '../../utils';
+import Navigation from '../Navigation/Navigation';
+import NavigationItem from '../Navigation/NavigationItem/NavigationItem';
+import NavigationItemTrigger from '../Navigation/NavigationItemTrigger/NavigationItemTrigger';
+import NavigationList from '../Navigation/NavigationList/NavigationList';
+import { LinkVariants } from '../Link/utils';
 
 describe('Header', () => {
-  it('is will render username if user object is passed in', () => {
-    const { rerender } = render(<Header />);
-    expect(screen.queryByText(/Dave/)).not.toBeInTheDocument();
-    rerender(<Header user={{ name: 'Dave' }} />);
-    expect(screen.queryByText(/Dave/)).toBeInTheDocument();
+  const headerComponent = () => (
+    <Header logo={LogoIMG}>
+      <Navigation id={`${px}-main-nav`} backBtnLabel="Back">
+        <NavigationList id={`${px}-main-nav-list`}>
+          <NavigationItemTrigger id="auctions" label={`Auctions`}>
+            <NavigationList id={`${px}-auction-nav-list`}>
+              <NavigationItem
+                badge={'New York'}
+                href="#"
+                navGroup={'nav-link-lg'}
+                navType={LinkVariants.navLinkLg}
+                label={`Editions & Works on Paper`}
+              />
+            </NavigationList>
+          </NavigationItemTrigger>
+        </NavigationList>
+      </Navigation>
+    </Header>
+  );
+  it('should render the header component with default props', () => {
+    render(headerComponent());
+    const toggleButton = screen.getByRole('button', { name: /Open Menu/i });
+    const logo = screen.getByTestId('header-logo');
+    const nav = screen.getByTestId(`${px}-main-nav`);
+    const search = screen.getByTestId('header-search');
+    expect(toggleButton).toBeInTheDocument();
+    expect(logo).toBeInTheDocument();
+    expect(nav).toBeInTheDocument();
+    expect(search).toBeInTheDocument();
+  });
+
+  it('should toggle the menu when the toggle button is clicked', async () => {
+    render(headerComponent());
+    const nav = screen.getByTestId(`${px}-main-nav`);
+    const toggleButton = screen.getByRole('button', { name: /Open Menu/i });
+    const navItem = screen.getByTestId('nav-item-trigger-auctions');
+    expect(nav).toHaveClass(`${px}-nav`);
+    await userEvent.click(toggleButton);
+    await userEvent.click(navItem);
+    expect(toggleButton).toHaveTextContent(/Close Menu/i);
+    expect(nav).toHaveClass(`${px}-nav--expanded`);
+    await userEvent.click(toggleButton);
+    expect(toggleButton).toHaveTextContent(/Open Menu/i);
+    expect(nav).toHaveClass(`${px}-nav`);
+  });
+
+  it('should expand a nav category in the mobile menu when a nav item trigger is selected', async () => {
+    render(headerComponent());
+    const navItemTrigger = screen.getByTestId(`nav-item-trigger-auctions`);
+    const backBtn = screen.getByText(`Back`);
+    const navLabel = screen.getByTestId('phillips-main-nav-label');
+    await userEvent.click(navItemTrigger);
+    expect(navItemTrigger).toHaveClass(`${px}-nav__item--expanded`);
+    expect(navLabel).toHaveTextContent('Auctions');
+    await userEvent.click(backBtn);
+    expect(navItemTrigger).not.toHaveClass(`${px}-nav__item--expanded`);
+    expect(navLabel).toHaveTextContent('Main Menu');
+  });
+
+  it('should render the logo as an object', () => {
+    render(<Header logo={<LogoSVG />} />);
+    const logoElement = screen.getByTestId('header-logo-svg');
+    expect(logoElement).toBeInTheDocument();
+  });
+
+  it('should render the logo as an image', () => {
+    render(<Header logo={LogoIMG} />);
+    const logoElement = screen.getByTestId('header-logo');
+    expect(logoElement).toContainHTML(`<img data-testid="header-logo-img" src=${LogoIMG} height="14" />`);
   });
 });