@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.
- package/dist/cjs/TermsOfUse/TermsOfUse.d.ts +34 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.js +49 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.test.d.ts +1 -0
- package/dist/cjs/TermsOfUse/TermsOfUse.test.js +79 -0
- package/dist/cjs/TermsOfUse/index.d.ts +2 -0
- package/dist/cjs/TermsOfUse/index.js +23 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +4 -1
- package/dist/css/main.css +57 -1
- package/dist/css/main.css.map +1 -1
- package/dist/dynamic/TermsOfUse/package.json +1 -0
- package/dist/esm/TermsOfUse/TermsOfUse.d.ts +34 -0
- package/dist/esm/TermsOfUse/TermsOfUse.js +42 -0
- package/dist/esm/TermsOfUse/TermsOfUse.test.d.ts +1 -0
- package/dist/esm/TermsOfUse/TermsOfUse.test.js +74 -0
- package/dist/esm/TermsOfUse/index.d.ts +2 -0
- package/dist/esm/TermsOfUse/index.js +2 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-TermsAndConditionsHeader.svg +148 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUse.tsx +147 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +14 -0
- package/src/ChatbotFooter/ChatbotFooter.scss +2 -1
- package/src/TermsOfUse/TermsOfUse.scss +66 -0
- package/src/TermsOfUse/TermsOfUse.test.tsx +138 -0
- package/src/TermsOfUse/TermsOfUse.tsx +117 -0
- package/src/TermsOfUse/index.ts +3 -0
- package/src/index.ts +3 -0
- package/src/main.scss +1 -0
@@ -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;
|
package/src/index.ts
CHANGED
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
|
// ============================================================================
|