@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,117 @@
1
+ // ============================================================================
2
+ // Terms of Use Modal - Chatbot Modal Extension
3
+ // ============================================================================
4
+ import React from 'react';
5
+ import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
6
+ import { ChatbotDisplayMode } from '../Chatbot';
7
+ import ChatbotModal from '../ChatbotModal/ChatbotModal';
8
+
9
+ export interface TermsOfUseProps extends ModalProps {
10
+ /** Class applied to modal */
11
+ className?: string;
12
+ /** Action assigned to primary modal button */
13
+ onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
14
+ /** Action assigned to secondary modal button */
15
+ onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
16
+ /** Name of primary modal button */
17
+ primaryActionBtn?: string;
18
+ /** Name of secondary modal button */
19
+ secondaryActionBtn?: string;
20
+ /** Function that handles modal toggle */
21
+ handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
22
+ /** Whether modal is open */
23
+ isModalOpen: boolean;
24
+ /** Title of modal */
25
+ title?: string;
26
+ /** Display mode for the Chatbot parent; this influences the styles applied */
27
+ displayMode?: ChatbotDisplayMode;
28
+ /** Optional image displayed in header */
29
+ image?: string;
30
+ /** Alt text for optional image displayed in header */
31
+ altText?: string;
32
+ /** Ref applied to modal */
33
+ innerRef?: React.Ref<HTMLDivElement>;
34
+ /** OuiaID applied to modal */
35
+ ouiaId?: string;
36
+ }
37
+
38
+ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
39
+ handleModalToggle,
40
+ isModalOpen,
41
+ onPrimaryAction,
42
+ onSecondaryAction,
43
+ primaryActionBtn = 'Accept',
44
+ secondaryActionBtn = 'Decline',
45
+ title = 'Terms of use',
46
+ image,
47
+ altText,
48
+ displayMode = ChatbotDisplayMode.default,
49
+ className,
50
+ children,
51
+ innerRef,
52
+ ouiaId = 'TermsOfUse',
53
+ ...props
54
+ }: TermsOfUseProps) => {
55
+ const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
56
+ handleModalToggle(_event);
57
+ onPrimaryAction && onPrimaryAction(_event);
58
+ };
59
+
60
+ const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
61
+ onSecondaryAction(_event);
62
+ };
63
+
64
+ const modal = (
65
+ <ChatbotModal
66
+ isOpen={isModalOpen}
67
+ ouiaId={ouiaId}
68
+ aria-labelledby="terms-of-use-title"
69
+ aria-describedby="terms-of-use-modal"
70
+ className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
71
+ displayMode={displayMode}
72
+ {...props}
73
+ >
74
+ {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
75
+ <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
76
+ <ModalHeader>
77
+ <div className="pf-chatbot__terms-of-use--header">
78
+ {image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
79
+ <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
80
+ </div>
81
+ </ModalHeader>
82
+ <ModalBody>
83
+ <Content>{children}</Content>
84
+ </ModalBody>
85
+ <ModalFooter className="pf-chatbot__terms-of-use--footer">
86
+ <Button
87
+ isBlock
88
+ key="terms-of-use-modal-primary"
89
+ variant="primary"
90
+ onClick={handlePrimaryAction}
91
+ form="terms-of-use-form"
92
+ size="lg"
93
+ >
94
+ {primaryActionBtn}
95
+ </Button>
96
+ <Button
97
+ isBlock
98
+ key="terms-of-use-modal-secondary"
99
+ variant="secondary"
100
+ onClick={handleSecondaryAction}
101
+ size="lg"
102
+ >
103
+ {secondaryActionBtn}
104
+ </Button>
105
+ </ModalFooter>
106
+ </section>
107
+ </ChatbotModal>
108
+ );
109
+
110
+ return modal;
111
+ };
112
+
113
+ const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
114
+ <TermsOfUseBase innerRef={ref} {...props} />
115
+ ));
116
+
117
+ export default TermsOfUse;
@@ -0,0 +1,3 @@
1
+ export { default } from './TermsOfUse';
2
+
3
+ export * from './TermsOfUse';
package/src/index.ts CHANGED
@@ -71,3 +71,6 @@ export * from './SourceDetailsMenuItem';
71
71
 
72
72
  export { default as SourcesCard } from './SourcesCard';
73
73
  export * from './SourcesCard';
74
+
75
+ export { default as TermsOfUse } from './TermsOfUse';
76
+ export * from './TermsOfUse';
package/src/main.scss CHANGED
@@ -24,6 +24,7 @@
24
24
  @import './ResponseActions/ResponseActions';
25
25
  @import './SourcesCard/SourcesCard.scss';
26
26
  @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
27
+ @import './TermsOfUse/TermsOfUse';
27
28
 
28
29
  :where(:root) {
29
30
  // ============================================================================