feat(ToolResponse): Make card optional (#680)

Author: rebeccaalpert

packages/module/src/ToolResponse/ToolResponse.test.tsx

@@ -75,4 +75,34 @@ describe('ToolResponse', () => {
     const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
     expect(subheadingContainer).toBeFalsy();
   });
+
+  it('should not render card when cardTitle and cardBody are not provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} cardBody={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeFalsy();
+  });
+
+  it('should render card when only cardTitle is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy();
+  });
+
+  it('should render card when only cardBody is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy();
+  });
+
+  it('should render divider when cardBody and cardTitle are provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeTruthy();
+  });
+
+  it('should not render divider when only cardBody is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
+  });
+
+  it('should not render divider when only cardTitle is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
+  });
 });

packages/module/src/ToolResponse/ToolResponse.tsx

@@ -25,9 +25,9 @@ export interface ToolResponseProps {
   /** Body text rendered inside expandable section */
   body?: React.ReactNode | string;
   /** Content passed into tool response card body */
-  cardBody: React.ReactNode;
+  cardBody?: React.ReactNode;
   /** Content passed into tool response card title */
-  cardTitle: React.ReactNode;
+  cardTitle?: React.ReactNode;
   /** Additional props passed to main card */
   cardProps?: CardProps;
   /** Additional props passed to main card body */
@@ -80,11 +80,13 @@ export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
               </div>
             )}
             {body && <div className="pf-chatbot__tool-response-body">{body}</div>}
-            <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
-              <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>
-              <Divider {...toolResponseCardDividerProps} />
-              <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>
-            </Card>
+            {(cardTitle || cardBody) && (
+              <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
+                {cardTitle && <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>}
+                {cardTitle && cardBody && <Divider {...toolResponseCardDividerProps} />}
+                {cardBody && <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>}
+              </Card>
+            )}
           </div>
         </ExpandableSection>
       </CardBody>