Skip to content

Commit bd11579

Browse files
rebeccaalpertedonehoo
rebeccaalpert
and
edonehoo
authored
feat(TermsOfUse): Add compact version (#522)
Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
1 parent 70385fb commit bd11579

File tree

5 files changed

+172
-4
lines changed

5 files changed

+172
-4
lines changed

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from 'react';
2+
import { Button, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
3+
import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
4+
import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
5+
6+
export const TermsOfUseCompactExample: React.FunctionComponent = () => {
7+
const [isModalOpen, setIsModalOpen] = React.useState(true);
8+
const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
9+
const chatbotRef = React.useRef<HTMLDivElement>(null);
10+
const termsRef = React.useRef<HTMLDivElement>(null);
11+
12+
const handleSkipToContent = (e) => {
13+
e.preventDefault();
14+
if (!isModalOpen && chatbotRef.current) {
15+
chatbotRef.current.focus();
16+
}
17+
if (isModalOpen && termsRef.current) {
18+
termsRef.current.focus();
19+
}
20+
};
21+
22+
const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
23+
setIsModalOpen(!isModalOpen);
24+
};
25+
26+
const onPrimaryAction = () => {
27+
// eslint-disable-next-line no-console
28+
console.log('Clicked primary action');
29+
};
30+
31+
const onSecondaryAction = () => {
32+
// eslint-disable-next-line no-console
33+
console.log('Clicked secondary action');
34+
};
35+
36+
const introduction = (
37+
<>
38+
<p>
39+
Welcome to PatternFly! These terms and conditions outline the rules and regulations for the use of PatternFly's
40+
website, located at <a href="https://patternfly.org">www.patternfly.org.</a>
41+
</p>
42+
<p>
43+
By accessing this website, you are agreeing with our terms and conditions. If you do not agree to all of these
44+
terms and conditions, do not continue to use PatternFly.
45+
</p>
46+
</>
47+
);
48+
49+
const terminology = (
50+
<>
51+
<p>
52+
The following terminology applies to these Terms and Conditions, Privacy Statement, Disclaimer Notice, and all
53+
Agreements:
54+
</p>
55+
<ul>
56+
<li>
57+
"Client", "You", and "Your" refer to you, the person using this website who is compliant with the Company's
58+
terms and conditions.
59+
</li>
60+
<li>
61+
"The Company", "Ourselves", "We", "Our", and "Us", refer to our Company. "Party", "Parties", or "Us", refers
62+
to both the Client and ourselves.
63+
</li>
64+
</ul>
65+
</>
66+
);
67+
68+
const body = (
69+
<>
70+
<h2>Introduction</h2>
71+
{introduction}
72+
<h2>Terminology</h2>
73+
{terminology}
74+
</>
75+
);
76+
77+
return (
78+
<>
79+
<SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
80+
Skip to chatbot
81+
</SkipToContent>
82+
<div
83+
style={{
84+
position: 'fixed',
85+
padding: 'var(--pf-t--global--spacer--lg)',
86+
zIndex: '601',
87+
boxShadow: 'var(--pf-t--global--box-shadow--lg)'
88+
}}
89+
>
90+
<FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
91+
<Radio
92+
isChecked={displayMode === ChatbotDisplayMode.default}
93+
onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
94+
name="basic-inline-radio"
95+
label="Default"
96+
id="default"
97+
/>
98+
<Radio
99+
isChecked={displayMode === ChatbotDisplayMode.docked}
100+
onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
101+
name="basic-inline-radio"
102+
label="Docked"
103+
id="docked"
104+
/>
105+
<Radio
106+
isChecked={displayMode === ChatbotDisplayMode.fullscreen}
107+
onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
108+
name="basic-inline-radio"
109+
label="Fullscreen"
110+
id="fullscreen"
111+
/>
112+
<Radio
113+
isChecked={displayMode === ChatbotDisplayMode.embedded}
114+
onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
115+
name="basic-inline-radio"
116+
label="Embedded"
117+
id="embedded"
118+
/>
119+
</FormGroup>
120+
<Button onClick={handleModalToggle}>Launch modal</Button>
121+
</div>
122+
<Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
123+
<TermsOfUse
124+
ref={termsRef}
125+
displayMode={displayMode}
126+
isModalOpen={isModalOpen}
127+
handleModalToggle={handleModalToggle}
128+
onPrimaryAction={onPrimaryAction}
129+
onSecondaryAction={onSecondaryAction}
130+
isCompact
131+
>
132+
{body}
133+
</TermsOfUse>
134+
</>
135+
);
136+
};

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,13 @@ This example also includes an example of how to use [skip to content](/patternfl
396396

397397
```
398398

399+
### Compact terms of use
400+
401+
To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
402+
```js file="./TermsOfUseCompact.tsx" isFullscreen
403+
404+
```
405+
399406
### Settings
400407

401408
To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.

‎packages/module/patternfly-docs/generated/patternfly-ai/chatbot/ui/react/compact-terms-of-use.png‎

52.3 KB
Loading

‎packages/module/src/TermsOfUse/TermsOfUse.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,23 @@
6464
font-size: var(--pf-t--global--font--size--heading--2xl);
6565
}
6666
}
67+
68+
.pf-chatbot__terms-of-use-modal.pf-m-compact {
69+
.pf-chatbot__terms-of-use--header {
70+
gap: var(--pf-t--global--spacer--md);
71+
align-items: flex-start;
72+
margin-block-start: var(--pf-t--global--spacer--lg);
73+
}
74+
75+
.pf-chatbot__terms-of-use--modal-header {
76+
--pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
77+
--pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
78+
--pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
79+
--pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
80+
}
81+
82+
.pf-chatbot__terms-of-use--modal-body {
83+
--pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
84+
--pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
85+
}
86+
}

‎packages/module/src/TermsOfUse/TermsOfUse.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export interface TermsOfUseProps extends ModalProps {
3333
innerRef?: React.Ref<HTMLDivElement>;
3434
/** OuiaID applied to modal */
3535
ouiaId?: string;
36+
/** Sets modal to compact styling. */
37+
isCompact?: boolean;
3638
}
3739

3840
export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
@@ -50,6 +52,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
5052
children,
5153
innerRef,
5254
ouiaId = 'TermsOfUse',
55+
isCompact,
5356
...props
5457
}: TermsOfUseProps) => {
5558
const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
@@ -67,19 +70,21 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
6770
ouiaId={ouiaId}
6871
aria-labelledby="terms-of-use-title"
6972
aria-describedby="terms-of-use-modal"
70-
className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
73+
className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
7174
displayMode={displayMode}
7275
{...props}
7376
>
7477
{/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
7578
<section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
76-
<ModalHeader>
79+
<ModalHeader className="pf-chatbot__terms-of-use--modal-header">
7780
<div className="pf-chatbot__terms-of-use--header">
78-
{image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
81+
{!isCompact && image && altText && (
82+
<img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />
83+
)}
7984
<h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
8085
</div>
8186
</ModalHeader>
82-
<ModalBody>
87+
<ModalBody className="pf-chatbot__terms-of-use--modal-body">
8388
<Content>{children}</Content>
8489
</ModalBody>
8590
<ModalFooter className="pf-chatbot__terms-of-use--footer">

0 commit comments

Comments
 (0)