[LG-5646] feat(chat-layout): implement ChatSideNav component with Header and Content subcomponents

chat/chat-layout/README.md

@@ -31,23 +31,29 @@ npm install @lg-chat/chat-layout
 This package exports:
 
 - `ChatLayout`: The grid container and context provider
-- `ChatMain`: Content area component that positions itself in the grid
+- `ChatMain`: The primary content area of the chat interface, automatically positioned within the grid layout.
+- `ChatSideNav`: A compound component representing the side navigation, exposing subcomponents such as `ChatSideNav.Header` and `ChatSideNav.Content` for flexible composition.
 - `useChatLayoutContext`: Hook for accessing layout state
 
 ## Examples
 
 ### Basic
 
 ```tsx
-import { ChatLayout, ChatMain } from '@lg-chat/chat-layout';
+import { ChatLayout, ChatMain, ChatSideNav } from '@lg-chat/chat-layout';
 
 function MyChatApp() {
+  const handleNewChat = () => {
+    console.log('Start new chat');
+  };
+
   return (
     <ChatLayout>
-      {/* ChatSideNav will go here */}
-      <ChatMain>
-        <div>Your chat content</div>
-      </ChatMain>
+      <ChatSideNav>
+        <ChatSideNav.Header onClickNewChat={handleNewChat} />
+        <ChatSideNav.Content>{/* Your side nav content */}</ChatSideNav.Content>
+      </ChatSideNav>
+      <ChatMain>{/* Main chat content here */}</ChatMain>
     </ChatLayout>
   );
 }
@@ -56,19 +62,24 @@ function MyChatApp() {
 ### With Initial State and Toggle Pinned Callback
 
 ```tsx
-import { ChatLayout, ChatMain } from '@lg-chat/chat-layout';
+import { ChatLayout, ChatMain, ChatSideNav } from '@lg-chat/chat-layout';
 
 function MyChatApp() {
+  const handleNewChat = () => {
+    console.log('Start new chat');
+  };
+
   const handleTogglePinned = (isPinned: boolean) => {
     console.log('Side nav is now:', isPinned ? 'pinned' : 'collapsed');
   };
 
   return (
     <ChatLayout initialIsPinned={false} onTogglePinned={handleTogglePinned}>
-      {/* ChatSideNav will go here */}
-      <ChatMain>
-        <div>Your chat content</div>
-      </ChatMain>
+      <ChatSideNav>
+        <ChatSideNav.Header onClickNewChat={handleNewChat} />
+        <ChatSideNav.Content>{/* Your side nav content */}</ChatSideNav.Content>
+      </ChatSideNav>
+      <ChatMain>{/* Main chat content here */}</ChatMain>
     </ChatLayout>
   );
 }
@@ -97,6 +108,29 @@ All other props are passed through to the underlying `<div>` element.
 
 **Note:** `ChatMain` must be used as a direct child of `ChatLayout` to work correctly within the grid system.
 
+### ChatSideNav
+
+| Prop                     | Type                      | Description                                                    | Default |
+| ------------------------ | ------------------------- | -------------------------------------------------------------- | ------- |
+| `children`               | `ReactNode`               | Should include `ChatSideNav.Header` and `ChatSideNav.Content`. | -       |
+| `className` _(optional)_ | `string`                  | Root class name                                                | -       |
+| `...`                    | `HTMLElementProps<'nav'>` | Props spread on the root `<nav>` element                       | -       |
+
+### ChatSideNav.Header
+
+| Prop                          | Type                                   | Description                                 | Default |
+| ----------------------------- | -------------------------------------- | ------------------------------------------- | ------- |
+| `onClickNewChat` _(optional)_ | `MouseEventHandler<HTMLButtonElement>` | Fired when the "New Chat" button is clicked | -       |
+| `className` _(optional)_      | `string`                               | Header class name                           | -       |
+| `...`                         | `HTMLElementProps<'div'>`              | Props spread on the header container        | -       |
+
+### ChatSideNav.Content
+
+| Prop                     | Type                      | Description                           | Default |
+| ------------------------ | ------------------------- | ------------------------------------- | ------- |
+| `className` _(optional)_ | `string`                  | Content class name                    | -       |
+| `...`                    | `HTMLElementProps<'div'>` | Props spread on the content container | -       |
+
 ## Context API
 
 ### useChatLayoutContext

chat/chat-layout/package.json

@@ -28,12 +28,19 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/avatar": "workspace:^",
+    "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/compound-component": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/icon": "workspace:^",
+    "@leafygreen-ui/icon-button": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^"
   },
   "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": ">=3.2.0",
     "@lg-chat/leafygreen-chat-provider": "workspace:^"
   },
   "devDependencies": {

chat/chat-layout/src/ChatLayout.stories.tsx

@@ -11,9 +11,27 @@ import { TitleBar } from '@lg-chat/title-bar';
 import { StoryMetaType } from '@lg-tools/storybook-utils';
 import { StoryFn, StoryObj } from '@storybook/react';
 
-import { css } from '@leafygreen-ui/emotion';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 
-import { ChatLayout, type ChatLayoutProps, ChatMain } from '.';
+import { ChatLayout, type ChatLayoutProps, ChatMain, ChatSideNav } from '.';
+
+const testMessages = [
+  {
+    id: '1',
+    messageBody: 'Hello! How can I help you today?',
+    isSender: false,
+  },
+  {
+    id: '2',
+    messageBody: 'I need help with my database query.',
+  },
+  {
+    id: '3',
+    messageBody:
+      'Sure! I can help with that. What specific issue are you encountering?',
+    isSender: false,
+  },
+];
 
 const meta: StoryMetaType<typeof ChatLayout> = {
   title: 'Composition/Chat/ChatLayout',
@@ -22,49 +40,33 @@ const meta: StoryMetaType<typeof ChatLayout> = {
     default: 'LiveExample',
   },
   decorators: [
-    Story => (
+    (Story, context) => (
       <div
         style={{
           margin: '-100px',
           height: '100vh',
           width: '100vw',
         }}
       >
-        <Story />
+        <LeafyGreenProvider darkMode={context?.args.darkMode}>
+          <Story />
+        </LeafyGreenProvider>
       </div>
     ),
   ],
 };
 export default meta;
 
-const sideNavPlaceholderStyles = css`
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 16px;
-  min-width: 200px;
-`;
-
-const testMessages = [
-  {
-    id: '1',
-    messageBody: 'Hello! How can I help you today?',
-    isSender: false,
-  },
-  {
-    id: '2',
-    messageBody: 'I need help with my database query.',
-  },
-  {
-    id: '3',
-    messageBody:
-      'Sure! I can help with that. What specific issue are you encountering?',
-    isSender: false,
-  },
-];
-
 const Template: StoryFn<ChatLayoutProps> = props => (
   <LeafyGreenChatProvider variant={Variant.Compact}>
     <ChatLayout {...props}>
-      <div className={sideNavPlaceholderStyles}>ChatSideNav Placeholder</div>
+      <ChatSideNav>
+        <ChatSideNav.Header
+          // eslint-disable-next-line no-console
+          onClickNewChat={() => console.log('Clicked new chat')}
+        />
+        <ChatSideNav.Content>Content</ChatSideNav.Content>
+      </ChatSideNav>
       <ChatMain>
         <TitleBar title="Chat Assistant" />
         <ChatWindow>

chat/chat-layout/src/ChatSideNav/ChatSideNav.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  LeafyGreenChatProvider,
+  Variant,
+} from '@lg-chat/leafygreen-chat-provider';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ChatSideNav } from '.';
+
+const Providers = ({ children }: { children: React.ReactNode }) => (
+  <LeafyGreenChatProvider variant={Variant.Compact}>
+    {children}
+  </LeafyGreenChatProvider>
+);
+
+describe('ChatSideNav', () => {
+  beforeAll(() => {
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Header shows "New Chat" button when onClickNewChat provided', async () => {
+    const onClickNewChat = jest.fn();
+
+    render(
+      <Providers>
+        <ChatSideNav>
+          <ChatSideNav.Header onClickNewChat={onClickNewChat} />
+          <ChatSideNav.Content />
+        </ChatSideNav>
+      </Providers>,
+    );
+
+    const button = screen.getByRole('button', { name: /new chat/i });
+    expect(button).toBeInTheDocument();
+
+    await userEvent.click(button);
+    expect(onClickNewChat).toHaveBeenCalledTimes(1);
+  });
+
+  test('Header does not render "New Chat" button when onClickNewChat is absent', () => {
+    render(
+      <Providers>
+        <ChatSideNav>
+          <ChatSideNav.Header />
+          <ChatSideNav.Content />
+        </ChatSideNav>
+      </Providers>,
+    );
+
+    expect(
+      screen.queryByRole('button', { name: /new chat/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  test('does not render children that are not ChatSideNavHeader or ChatSideNavContent', () => {
+    render(
+      <Providers>
+        <ChatSideNav>
+          <ChatSideNav.Header />
+          <ChatSideNav.Content />
+          <div data-testid="arbitrary-child">Should not render</div>
+          <span data-testid="another-arbitrary-child">
+            Also should not render
+          </span>
+        </ChatSideNav>
+      </Providers>,
+    );
+
+    expect(screen.queryByTestId('arbitrary-child')).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('another-arbitrary-child'),
+    ).not.toBeInTheDocument();
+  });
+});

chat/chat-layout/src/ChatSideNav/ChatSideNav.styles.ts

@@ -0,0 +1,26 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { color, InteractionState, Variant } from '@leafygreen-ui/tokens';
+
+import { gridAreas } from '../constants';
+
+const getBaseContainerStyles = (theme: Theme) => css`
+  grid-area: ${gridAreas.sideNav};
+  background: ${color[theme].background[Variant.Secondary][
+    InteractionState.Default
+  ]};
+  border-right: 1px solid
+    ${color[theme].border[Variant.Secondary][InteractionState.Default]};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+`;
+
+export const getContainerStyles = ({
+  className,
+  theme,
+}: {
+  className?: string;
+  theme: Theme;
+}) => cx(getBaseContainerStyles(theme), className);

chat/chat-layout/src/ChatSideNav/ChatSideNav.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+
+import {
+  CompoundComponent,
+  findChild,
+} from '@leafygreen-ui/compound-component';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { getContainerStyles } from './ChatSideNav.styles';
+import {
+  type ChatSideNavProps,
+  ChatSideNavSubcomponentProperty,
+} from './ChatSideNav.types';
+import { ChatSideNavContent } from './ChatSideNavContent';
+import { ChatSideNavFooter } from './ChatSideNavFooter';
+import { ChatSideNavHeader } from './ChatSideNavHeader';
+
+export const ChatSideNav = CompoundComponent(
+  // eslint-disable-next-line react/display-name
+  forwardRef<HTMLElement, ChatSideNavProps>(
+    ({ children, className, darkMode: darkModeProp, ...rest }, ref) => {
+      const { darkMode, theme } = useDarkMode(darkModeProp);
+      // Find subcomponents
+      const header = findChild(
+        children,
+        ChatSideNavSubcomponentProperty.Header,
+      );
+      const content = findChild(
+        children,
+        ChatSideNavSubcomponentProperty.Content,
+      );
+
+      return (
+        <LeafyGreenProvider darkMode={darkMode}>
+          <nav
+            ref={ref}
+            className={getContainerStyles({ className, theme })}
+            aria-label="Side navigation"
+            {...rest}
+          >
+            {header}
+            {content}
+            <ChatSideNavFooter />
+          </nav>
+        </LeafyGreenProvider>
+      );
+    },
+  ),
+  {
+    displayName: 'ChatSideNav',
+    Header: ChatSideNavHeader,
+    Content: ChatSideNavContent,
+  },
+);