From 5d1ca50dd07536970b06bef325cf8eeeb2f34c06 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 19 Sep 2024 15:14:39 -0400
Subject: [PATCH] chore(ChatbotHeader): Update logos

Kayla wants a smaller logo on smaller chatbot sizes - updating CSS and demos to reflect this.
---
 .../examples/Chatbot/Chatbot.md               |  2 ++
 .../examples/Chatbot/Chatbot.tsx              | 25 +++++++++++++------
 .../ChatbotHeader/PF-IconLogo-Color.svg       | 17 +++++++++++++
 .../ChatbotHeader/PF-IconLogo-Reverse.svg     | 16 ++++++++++++
 .../examples/demos/AttachmentDemos.md         |  2 ++
 .../examples/demos/ChatbotAttachment.tsx      | 25 +++++++++++++------
 .../src/ChatbotHeader/ChatbotHeader.scss      |  5 ++++
 7 files changed, 76 insertions(+), 16 deletions(-)
 create mode 100644 packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Color.svg
 create mode 100644 packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Reverse.svg

diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md
index 975893d..0f1a493 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md
@@ -47,6 +47,8 @@ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-dra
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import PFHorizontalLogoColor from '../ChatbotHeader/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../ChatbotHeader/PF-HorizontalLogo-Reverse.svg';
+import PFIconLogoColor from '../ChatbotHeader/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
 
 ### Basic example
 
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.tsx
index f14fbf4..d75ac6a 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.tsx
@@ -24,6 +24,8 @@ import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/ou
 
 import PFHorizontalLogoColor from '../ChatbotHeader/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../ChatbotHeader/PF-HorizontalLogo-Reverse.svg';
+import PFIconLogoColor from '../ChatbotHeader/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
 
 const footnoteProps = {
   label: 'Lightspeed uses AI. Check for mistakes.',
@@ -130,6 +132,20 @@ export const BasicDemo: React.FunctionComponent = () => {
 
   const handleSend = (message) => alert(message);
 
+  const horizontalLogo = (
+    <Bullseye>
+      <Brand className="show-light" src={PFHorizontalLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFHorizontalLogoReverse} alt="PatternFly" />
+    </Bullseye>
+  );
+
+  const iconLogo = (
+    <>
+      <Brand className="show-light" src={PFIconLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFIconLogoReverse} alt="PatternFly" />
+    </>
+  );
+
   return (
     <>
       <ChatbotToggle
@@ -141,14 +157,7 @@ export const BasicDemo: React.FunctionComponent = () => {
         <ChatbotHeader>
           <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />
           <ChatbotHeaderTitle>
-            <Bullseye>
-              <div className="show-light">
-                <Brand src={PFHorizontalLogoColor} alt="PatternFly" />
-              </div>
-              <div className="show-dark">
-                <Brand src={PFHorizontalLogoReverse} alt="PatternFly" />
-              </div>
-            </Bullseye>
+            {displayMode === ChatbotDisplayMode.fullscreen ? horizontalLogo : iconLogo}
           </ChatbotHeaderTitle>
           <ChatbotHeaderActions>
             <ChatbotHeaderSelectorDropdown value={selectedModel} onSelect={onSelectModel}>
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Color.svg b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Color.svg
new file mode 100644
index 0000000..bc9527a
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Color.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Reverse.svg b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Reverse.svg
new file mode 100644
index 0000000..f8e97c5
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotHeader/PF-IconLogo-Reverse.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.4"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/AttachmentDemos.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/AttachmentDemos.md
index 041e85c..c271b85 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/AttachmentDemos.md
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/AttachmentDemos.md
@@ -38,6 +38,8 @@ ChatbotHeaderOptionsDropdown
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
+import PFIconLogoColor from '../ChatbotHeader/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
 
 # Demos
 
diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/ChatbotAttachment.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/ChatbotAttachment.tsx
index f77ab3a..413ea8a 100644
--- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/ChatbotAttachment.tsx
+++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/ChatbotAttachment.tsx
@@ -33,6 +33,8 @@ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-dra
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import PFHorizontalLogoColor from '../ChatbotHeader/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../ChatbotHeader/PF-HorizontalLogo-Reverse.svg';
+import PFIconLogoColor from '../ChatbotHeader/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../ChatbotHeader/PF-IconLogo-Reverse.svg';
 
 const footnoteProps = {
   label: 'Lightspeed uses AI. Check for mistakes.',
@@ -193,6 +195,20 @@ export const BasicDemo: React.FunctionComponent = () => {
     setFile(undefined);
   };
 
+  const horizontalLogo = (
+    <Bullseye>
+      <Brand className="show-light" src={PFHorizontalLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFHorizontalLogoReverse} alt="PatternFly" />
+    </Bullseye>
+  );
+
+  const iconLogo = (
+    <>
+      <Brand className="show-light" src={PFIconLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFIconLogoReverse} alt="PatternFly" />
+    </>
+  );
+
   return (
     <>
       <ChatbotToggle
@@ -210,14 +226,7 @@ export const BasicDemo: React.FunctionComponent = () => {
             <ChatbotHeader>
               <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />
               <ChatbotHeaderTitle>
-                <Bullseye>
-                  <div className="show-light">
-                    <Brand src={PFHorizontalLogoColor} alt="PatternFly" />
-                  </div>
-                  <div className="show-dark">
-                    <Brand src={PFHorizontalLogoReverse} alt="PatternFly" />
-                  </div>
-                </Bullseye>
+                {displayMode === ChatbotDisplayMode.fullscreen ? horizontalLogo : iconLogo}
               </ChatbotHeaderTitle>
               <ChatbotHeaderActions>
                 <ChatbotHeaderSelectorDropdown value={selectedModel} onSelect={onSelectModel}>
diff --git a/packages/module/src/ChatbotHeader/ChatbotHeader.scss b/packages/module/src/ChatbotHeader/ChatbotHeader.scss
index 110d8d4..4e9d41f 100644
--- a/packages/module/src/ChatbotHeader/ChatbotHeader.scss
+++ b/packages/module/src/ChatbotHeader/ChatbotHeader.scss
@@ -9,6 +9,11 @@
 
   // Title -or- Brand
   .pf-chatbot__title {
+    display: flex;
+    align-items: center;
+    .pf-v6-l-bullseye {
+      flex: 1;
+    }
     img {
       max-height: 40px;
     }