Merge pull request #519 from rebeccaalpert/density-components

feat(Message): Add compact sources, quick starts, and quick responses

Author: nicolethoen

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

@@ -50,5 +50,29 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
         { id: '2', content: 'No', onClick: () => alert('Clicked no') }
       ]}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Welcome back, User! How can I help you today?"
+      quickResponses={[
+        { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },
+        { id: '3', content: 'Create new integrations', onClick: () => alert('Clicked id 3') },
+        { id: '4', content: 'Get recommendations from an advisor', onClick: () => alert('Clicked id 4') },
+        { id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Example with compact responses"
+      quickResponses={[
+        { id: '1', content: 'Yes', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'No', onClick: () => alert('Clicked id 2') }
+      ]}
+      isCompact
+    />
   </>
 );

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

@@ -27,5 +27,16 @@ export const MessageWithQuickStartExample: React.FunctionComponent = () => (
         onSelectQuickStart: (id) => alert(id)
       }}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This quick start tile is compact"
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+      isCompact
+    />
   </>
 );

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

@@ -150,6 +150,27 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
           onSetPage
         }}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example displays a compact sources card"
+        sources={{
+          sources: [
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+        isCompact
+      />
     </>
   );
 };

packages/module/src/Message/Message.tsx

@@ -339,7 +339,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
           <div className="pf-chatbot__message-and-actions">
             {renderMessage()}
             {afterMainContent && <>{afterMainContent}</>}
-            {!isLoading && sources && <SourcesCard {...sources} />}
+            {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile
                 quickStart={quickStarts.quickStart}
@@ -349,6 +349,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                 prerequisiteWord={quickStarts.prerequisiteWord}
                 prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
                 quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                isCompact={isCompact}
               />
             )}
             {!isLoading && actions && <ResponseActions actions={actions} />}

packages/module/src/Message/QuickStarts/QuickStartTile.tsx

@@ -49,6 +49,8 @@ export interface QuickStartTileProps {
   prerequisiteWordPlural?: string;
   /** Aria-label for the quick start description button */
   quickStartButtonAriaLabel?: string;
+  /** Sets the tile to compact styling */
+  isCompact?: boolean;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -61,7 +63,8 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   prerequisiteWord,
   prerequisiteWordPlural,
   quickStartButtonAriaLabel,
-  action
+  action,
+  isCompact
 }) => {
   const {
     metadata: { name: id },
@@ -105,6 +108,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
       id={`${id}-chatbot-qs-tile`}
       style={{ height: '100%' }}
       data-testid={`chatbot-qs-card-${camelize(displayName)}`}
+      isCompact={isCompact}
     >
       <CardHeader
         {...(action && {

packages/module/src/SourcesCard/SourcesCard.scss

@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card {
+  .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
+    border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs)
+      var(--pf-t--global--spacer--xs) !important;
+  }
+}

packages/module/src/SourcesCard/SourcesCard.tsx

@@ -71,6 +71,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onSetPage,
   showMoreWords = 'show more',
   showLessWords = 'show less',
+  isCompact,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
@@ -95,7 +96,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   return (
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card className="pf-chatbot__sources-card" {...props}>
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
           <Button
             component="a"