udpate variant, update to use tokens, update background

Author: kmcfaul

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithDividers.tsx

@@ -11,14 +11,14 @@ export const MessageWithDividersExample: FunctionComponent = () => (
       avatar={patternflyAvatar}
       content={`This is a text-based message from a bot named "Bot."`}
     />
-    <MessageDivider variant="date" content="1 hour ago" />
+    <MessageDivider variant="inset" content="1 hour ago" />
     <Message
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
       content={`This is a text-based message from "Bot," with an updated timestamp.`}
       timestamp="1 hour ago"
     />
-    <MessageDivider variant="announcement" content="Agent joined the chat" />
+    <MessageDivider variant="fullWidth" content="Agent joined the chat" />
   </>
 );

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -71,7 +71,7 @@ You can further customize the avatar by applying an additional class or passing
 
 To provide users with important contextual updates, you can add dividers between messages.
 
-For example, you can use the default divider to announce that an agent has joined the chat, or you can pass `variant="date"` to a divider and display a "timestamp" for more significant gaps in the conversation.
+For example, you can use the default divider to display a "timestamp" for more significant gaps in the conversation, or you can pass `variant="fullWidth"` to a divider to announce that an agent has joined the chat.
 
 ```js file="./MessageWithDividers.tsx"
 

packages/module/src/MessageDivider/MessageDivider.scss

@@ -12,9 +12,9 @@
   padding: 0px var(--pf-t--global--spacer--md);
   justify-content: center;
   align-items: center;
-  gap: 8px;
+  gap: var(--pf-t--global--spacer--sm);
   border-radius: var(--pf-t--global--border--radius--pill);
-  background: var(--pf-t--global--background--color--tertiary--default);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
 }
 
 .pf-chatbot__message-divider-text {
@@ -25,8 +25,8 @@
   font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
-// Date variant
-.pf-chatbot__message-divider--date {
+// Inset variant
+.pf-chatbot__message-divider--inset {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -41,12 +41,13 @@
   }
 
   .pf-chatbot__message-divider-content {
+    background-color: var(--pf-t--global--background--color--secondary--default);
     border: 1px solid  var(--pf-t--global--border--color--default);
     max-width: 75%
   }
 }
 
-// Announcement variant
-.pf-chatbot__message-divider--announcement .pf-chatbot__message-divider-content {
+// Full width variant
+.pf-chatbot__message-divider--full-width .pf-chatbot__message-divider-content {
   width: 100%;
 }

packages/module/src/MessageDivider/MessageDivider.test.tsx

@@ -11,13 +11,13 @@ describe('MessageDivider', () => {
     expect(screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
     expect(screen.getByTestId('message-divider').children[0]).toHaveClass('pf-chatbot__message-divider--date');
   });
-  it('should render date variant correctly', () => {
-    render(<MessageDivider variant="date" content="test" data-testid="message-divider" />);
+  it('should render inset variant correctly', () => {
+    render(<MessageDivider variant="inset" content="test" data-testid="message-divider" />);
     expect(screen.getByText('test')).toBeInTheDocument();
     expect(screen.getByTestId('message-divider').children[0]).toHaveClass('pf-chatbot__message-divider--date');
   });
-  it('should render announcement variant correctly', () => {
-    render(<MessageDivider variant="announcement" content="test" data-testid="message-divider" />);
+  it('should render fullWidth variant correctly', () => {
+    render(<MessageDivider variant="fullWidth" content="test" data-testid="message-divider" />);
     expect(screen.getByText('test')).toBeInTheDocument();
     expect(screen.getByTestId('message-divider')).toHaveClass('pf-chatbot__message-divider--announcement');
   });

packages/module/src/MessageDivider/MessageDivider.tsx

@@ -5,20 +5,20 @@ import type { FunctionComponent } from 'react';
 
 export interface MessageDividerProps {
   /** Variant of the divider */
-  variant?: 'date' | 'announcement';
+  variant?: 'inset' | 'fullWidth';
   /** Content of the message divider */
   content?: string;
 }
 
 const MessageDivider: FunctionComponent<MessageDividerProps> = ({
-  variant = 'date',
+  variant = 'inset',
   content = new Date().toLocaleDateString(),
   ...props
 }: MessageDividerProps) => {
-  if (variant === 'date') {
+  if (variant === 'inset') {
     return (
       <div className="pf-chatbot__message-divider" {...props}>
-        <div className="pf-chatbot__message-divider--date">
+        <div className="pf-chatbot__message-divider--inset">
           <div className="pf-chatbot__message-divider-content">
             <div className="pf-chatbot__message-divider-text">{content}</div>
           </div>
@@ -28,7 +28,7 @@ const MessageDivider: FunctionComponent<MessageDividerProps> = ({
   }
 
   return (
-    <div className="pf-chatbot__message-divider pf-chatbot__message-divider--announcement" {...props}>
+    <div className="pf-chatbot__message-divider pf-chatbot__message-divider--full-width" {...props}>
       <div className="pf-chatbot__message-divider-content">
         <div className="pf-chatbot__message-divider-text">{content}</div>
       </div>