feat(ChatbotContent): Add variant with white background (#689)

This was a request from OpenShift AI - they are looking for more flexibility in complex embedded layouts.

Author: rebeccaalpert

packages/module/src/ChatbotContent/ChatbotContent.scss

@@ -12,6 +12,10 @@
   @media screen and (max-height: 518px) {
     overflow: unset;
   }
+
+  &.pf-m-primary {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 
 // ============================================================================

packages/module/src/ChatbotContent/ChatbotContent.test.tsx

@@ -11,4 +11,9 @@ describe('ChatbotContent', () => {
     const { container } = render(<ChatbotContent className="custom-class">Chatbot Content</ChatbotContent>);
     expect(container.querySelector('.custom-class')).toBeTruthy();
   });
+
+  it('should render ChatbotContent with primary class', () => {
+    const { container } = render(<ChatbotContent isPrimary>Chatbot Content</ChatbotContent>);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
 });

packages/module/src/ChatbotContent/ChatbotContent.tsx

@@ -8,14 +8,17 @@ export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
   /** Custom classname for the ChatbotContent component */
   className?: string;
+  /** Sets background color to primary */
+  isPrimary?: boolean;
 }
 
 export const ChatbotContent: FunctionComponent<ChatbotContentProps> = ({
   children,
   className,
+  isPrimary,
   ...props
 }: ChatbotContentProps) => (
-  <div className={`pf-chatbot__content ${className ?? ''}`} {...props}>
+  <div className={`pf-chatbot__content ${isPrimary ? 'pf-m-primary' : ''} ${className ?? ''}`} {...props}>
     {children}
   </div>
 );