@patternfly/chatbot 2.2.0-prerelease.10 → 2.2.0-prerelease.11

package/src/Compare/Compare.scss

@@ -0,0 +1,72 @@
+.pf-chatbot__compare-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+.pf-chatbot__compare-toggle {
+  width: 100%;
+
+  .pf-v6-c-toggle-group__button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+.pf-chatbot__compare {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  @media screen and (max-width: 900px) {
+    overflow-y: auto;
+  }
+
+  .pf-chatbot__compare-item:first-of-type {
+    border-right: 1px solid var(--pf-t--global--border--color--default);
+
+    @media screen and (max-width: 900px) {
+      border-right: 0px;
+    }
+  }
+}
+
+.pf-chatbot__compare-item {
+  flex: 1;
+
+  .pf-chatbot--embedded .pf-chatbot__messagebox {
+    width: 100%;
+  }
+
+  .pf-chatbot__content {
+    padding: 0;
+  }
+
+  .pf-chatbot.pf-chatbot--embedded {
+    @media screen and (max-width: 900px) {
+      height: 100%;
+    }
+  }
+}
+.pf-chatbot__compare-item-hidden {
+  display: block;
+
+  @media screen and (max-width: 900px) {
+    display: none;
+  }
+}
+
+.pf-chatbot__compare-mobile-controls {
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+  display: none;
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+
+  @media screen and (max-width: 900px) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

package/src/Compare/Compare.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+
+const firstChild = (
+  <div>
+    <h1>Child 1</h1>
+  </div>
+);
+
+const secondChild = (
+  <div>
+    <h1>Child 2</h1>
+  </div>
+);
+
+describe('Compare', () => {
+  it('should render compare correctly', () => {
+    render(
+      <Compare
+        firstChildDisplayName="Child 1"
+        secondChildDisplayName="Child 2"
+        firstChild={firstChild}
+        secondChild={secondChild}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+  });
+});

package/src/Compare/Compare.tsx

@@ -0,0 +1,98 @@
+import React, { PropsWithChildren } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+interface CompareProps {
+  /** First of two children to render */
+  firstChild: React.ReactNode;
+  /** Second of two children to render */
+  secondChild: React.ReactNode;
+  /** Display name for first child, used in mobile toggle */
+  firstChildDisplayName: string;
+  /** Display name for second child, used in mobile toggle */
+  secondChildDisplayName: string;
+  /** Aria label for mobile toggle group */
+  toggleGroupAriaLabel?: string;
+  /** Callback for when mobile toggle is used */
+  onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
+}
+
+export const Compare = ({
+  firstChild,
+  secondChild,
+  firstChildDisplayName,
+  secondChildDisplayName,
+  onToggleClick,
+  toggleGroupAriaLabel = 'Select which chatbot to display'
+}: PropsWithChildren<CompareProps>) => {
+  const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
+  const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
+  const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+
+  React.useEffect(() => {
+    // we want to show the first if we switch to the mobile toggle view
+    // and reset/switch back to normal otherwise
+    const updateChatbotVisibility = () => {
+      if (window.innerWidth >= 901) {
+        setShowFirstChatbot(true);
+        setShowSecondChatbot(true);
+      } else {
+        setShowFirstChatbot(true);
+        setShowSecondChatbot(false);
+        setIsSelected('toggle-group-chatbot-1');
+      }
+    };
+    window.addEventListener('resize', updateChatbotVisibility);
+
+    return () => {
+      window.removeEventListener('resize', updateChatbotVisibility);
+    };
+  }, []);
+
+  // this only happens on mobile
+  const handleChildToggleClick = (
+    event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>
+  ) => {
+    const id = event.currentTarget.id;
+    setIsSelected(id);
+    setShowSecondChatbot(!showSecondChatbot);
+    setShowFirstChatbot(!showFirstChatbot);
+    onToggleClick && onToggleClick(event);
+  };
+
+  return (
+    <>
+      <div className="pf-chatbot__compare-mobile-controls">
+        <ToggleGroup aria-label={toggleGroupAriaLabel}>
+          <ToggleGroupItem
+            className="pf-chatbot__compare-toggle"
+            text={firstChildDisplayName}
+            buttonId="toggle-group-chatbot-1"
+            isSelected={isSelected === 'toggle-group-chatbot-1'}
+            onChange={handleChildToggleClick}
+          />
+          <ToggleGroupItem
+            className="pf-chatbot__compare-toggle"
+            text={secondChildDisplayName}
+            buttonId="toggle-group-chatbot-2"
+            isSelected={isSelected === 'toggle-group-chatbot-2'}
+            onChange={handleChildToggleClick}
+          />
+        </ToggleGroup>
+      </div>
+      <div className="pf-chatbot__compare">
+        <div
+          className={`pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`}
+        >
+          {firstChild}
+        </div>
+        <div
+          className={`pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`}
+        >
+          {secondChild}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Compare;

package/src/Compare/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Compare';
+export * from './Compare';

package/src/index.ts

@@ -39,6 +39,9 @@ export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 
+export { default as Compare } from './Compare';
+export * from './Compare';
+
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 

package/src/main.scss

@@ -10,6 +10,7 @@
 @import './ChatbotToggle/ChatbotToggle';
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
 @import './CodeModal/CodeModal';
+@import './Compare/Compare';
 @import './FileDetails/FileDetails';
 @import './FileDetailsLabel/FileDetailsLabel';
 @import './FileDropZone/FileDropZone';