fix(ChatbotConversationHistoryNav): Make title icon and heading customizable (#616)

Also change spacing between icon and title to 0.5rem.

Author: rebeccaalpert

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -9,18 +9,24 @@
 
   // Drawer title
   // ----------------------------------------------------------------------------
-  .pf-chatbot__title-container {
+  .pf-chatbot__heading-container {
     padding-inline-start: var(--pf-t--global--spacer--lg);
     padding-inline-end: var(--pf-t--global--spacer--lg);
     display: flex;
     flex-direction: column;
     row-gap: var(--pf-t--global--spacer--sm);
   }
-  // Drawer title icon
-  // ----------------------------------------------------------------------------
-  .pf-chatbot__title-icon {
-    padding-inline-end: var(--pf-t--global--spacer--md);
-    padding-inline-start: var(--pf-t--global--spacer--sm);
+  .pf-chatbot__title {
+    font-size: var(--pf-v6-c-title--m-h3--FontSize);
+    font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
+    line-height: var(--pf-v6-c-title--m-h3--LineHeight);
+  }
+  .pf-chatbot__title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: flex-start;
+    gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   }
   // Drawer menu
   // ----------------------------------------------------------------------------

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
-import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 import { ComponentType } from 'react';
 
 const ERROR = {
@@ -492,29 +492,29 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(iconElement).toBeInTheDocument();
   });
 
-  it('Passes titleProps to Title', () => {
+  it('Passes listTitleProps to Title', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={{ Today: initialConversations }}
-        titleProps={{ className: 'test' }}
+        listTitleProps={{ className: 'test' }}
       />
     );
     expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
   });
 
-  it('Overrides Title heading level when titleProps.headingLevel is passed', () => {
+  it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={{ Today: initialConversations }}
-        titleProps={{ headingLevel: 'h2' }}
+        listTitleProps={{ headingLevel: 'h2' }}
       />
     );
     expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
@@ -577,4 +577,33 @@ describe('ChatbotConversationHistoryNav', () => {
 
     expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
   });
+
+  it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        navTitleProps={{ headingLevel: 'h1' }}
+      />
+    );
+    expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
+  });
+
+  it('overrides nav title icon when navTitleIcon is passed in', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        navTitleIcon={<BellIcon data-testid="bell" />}
+      />
+    );
+    expect(screen.getByTestId('bell')).toBeInTheDocument();
+  });
 });

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -84,7 +84,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Additional button props for new chat button. */
   newChatButtonProps?: ButtonProps;
   /** Additional props applied to all conversation list headers */
-  titleProps?: Partial<TitleProps>;
+  listTitleProps?: Partial<TitleProps>;
   /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
   listProps?: ListProps | { [key: string]: ListProps };
   /** Text shown in blue button */
@@ -137,6 +137,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   isCompact?: boolean;
   /** Display title  */
   title?: string;
+  /** Icon displayed in title */
+  navTitleIcon?: React.ReactNode;
+  /** Title header level */
+  navTitleProps?: Partial<TitleProps>;
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -146,7 +150,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
-  titleProps,
+  listTitleProps,
   listProps,
   newChatButtonText = 'New chat',
   drawerContent,
@@ -173,6 +177,8 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   noResultsState,
   isCompact,
   title = 'Chat history',
+  navTitleProps,
+  navTitleIcon = <OutlinedClockIcon />,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -225,7 +231,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
         <div>
           {Object.keys(conversations).map((navGroup) => (
             <section key={navGroup}>
-              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...titleProps}>
+              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}>
                 {navGroup}
               </Title>
               <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
@@ -286,13 +292,15 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
             )}
           </DrawerActions>
         </DrawerHead>
-        <div className="pf-chatbot__title-container">
-          <Title headingLevel="h3">
+        <div className="pf-chatbot__heading-container">
+          <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
-              <OutlinedClockIcon />
+              {navTitleIcon}
             </Icon>
-            {title}
-          </Title>
+            <Title className="pf-chatbot__title" headingLevel="h2" {...navTitleProps}>
+              {title}
+            </Title>
+          </div>
           {!isLoading && handleTextInputChange && (
             <div className="pf-chatbot__input">
               <SearchInput