@patternfly/chatbot 6.5.0-prerelease.18 → 6.5.0-prerelease.19

package/src/Onboarding/Onboarding.tsx

@@ -0,0 +1,126 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+export interface OnboardingProps extends ModalProps {
+  /** Class applied to modal */
+  className?: string;
+  /** Action assigned to primary modal button */
+  onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Action assigned to secondary modal button */
+  onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Name of primary modal button */
+  primaryActionBtn?: string;
+  /** Name of secondary modal button */
+  secondaryActionBtn?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Optional image displayed in header */
+  headerImage?: string;
+  /** Alt text for optional image displayed in header */
+  headerImageAltText?: string;
+  /** Ref applied to modal */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** OuiaID applied to modal */
+  ouiaId?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+}
+
+export const OnboardingBase: FunctionComponent<OnboardingProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Continue',
+  secondaryActionBtn = 'Skip',
+  title = 'Onboarding',
+  headerImage,
+  headerImageAltText = '',
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'Onboarding',
+  isCompact,
+  ...props
+}: OnboardingProps) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      ouiaId={ouiaId}
+      aria-labelledby="onboarding-title"
+      aria-describedby="onboarding-modal"
+      className={`pf-chatbot__onboarding-modal pf-chatbot__onboarding-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+      displayMode={displayMode}
+      onClose={handleModalToggle}
+      {...props}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__onboarding--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <>
+          <ModalBody className="pf-chatbot__onboarding--modal-body">
+            {!isCompact && headerImage && (
+              <div className="pf-chatbot__onboarding--header">
+                <img src={headerImage} className="pf-chatbot__onboarding--image" alt={headerImageAltText} />
+              </div>
+            )}
+            <div className="pf-chatbot__onboarding--modal-text">
+              <h1 className="pf-chatbot__onboarding--title">{title}</h1>
+              <Content>{children}</Content>
+            </div>
+          </ModalBody>
+          <ModalFooter className="pf-chatbot__onboarding--footer">
+            <Button
+              isBlock
+              key="onboarding-modal-primary"
+              variant="primary"
+              onClick={handlePrimaryAction}
+              form="onboarding-form"
+              size="lg"
+            >
+              {primaryActionBtn}
+            </Button>
+            <Button
+              isBlock
+              key="onboarding-modal-secondary"
+              variant="secondary"
+              onClick={handleSecondaryAction}
+              size="lg"
+            >
+              {secondaryActionBtn}
+            </Button>
+          </ModalFooter>
+        </>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const Onboarding = forwardRef((props: OnboardingProps, ref: Ref<HTMLDivElement>) => (
+  <OnboardingBase innerRef={ref} {...props} />
+));
+
+export default Onboarding;

package/src/Onboarding/index.ts

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

package/src/index.ts

@@ -75,6 +75,9 @@ export * from './MessageBox';
 export { default as MessageDivider } from './MessageDivider';
 export * from './MessageDivider';
 
+export { default as Onboarding } from './Onboarding';
+export * from './Onboarding';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 

package/src/main.scss

@@ -31,6 +31,7 @@
 @import './MessageBox/MessageBox';
 @import './MessageDivider/MessageDivider';
 @import './MessageBox/JumpButton';
+@import './Onboarding/Onboarding';
 @import './ResponseActions/ResponseActions';
 @import './Settings/Settings';
 @import './SourcesCard/SourcesCard.scss';

package/tsconfig.json

@@ -5,7 +5,7 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es2015" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
-    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "module": "es2020" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */