Skip to content

Commit 0f9062d

Browse files
thatblindgeyethatblindgeye
committed
Updated wrappable source card rendering
1 parent a5e9fa3 commit 0f9062d

File tree

3 files changed

+71
-74
lines changed

3 files changed

+71
-74
lines changed

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, useState } from 'react';
1+
import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
22
import Message from '@patternfly/chatbot/dist/dynamic/Message';
33
import patternflyAvatar from './patternfly_avatar.jpg';
4-
import { Button, Checkbox, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
4+
import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
55
import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
66

77
export const MessageWithSourcesExample: FunctionComponent = () => {
@@ -252,25 +252,25 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
252252
{
253253
title: 'Getting started with Red Hat OpenShift',
254254
link: '#',
255-
body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
255+
body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud.',
256256
isExternal: true
257257
},
258258
{
259259
title: 'Azure Red Hat OpenShift documentation',
260260
link: '#',
261-
body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...',
261+
body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure.',
262262
isExternal: true
263263
},
264264
{
265265
title: 'OKD Documentation: Home',
266266
link: '#',
267-
body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...',
267+
body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment.',
268268
isExternal: true
269269
},
270270
{
271271
title: 'Red Hat OpenShift Container Platform',
272272
link: '#',
273-
body: 'Red Hat OpenShift Container Platform is a Kubernetes platform that provides a cloud-like experience anywhere it is deployed ...',
273+
body: 'Red Hat OpenShift Container Platform is a Kubernetes platform that provides a cloud-like experience anywhere it is deployed.',
274274
isExternal: true
275275
}
276276
],

‎packages/module/src/SourcesCard/SourcesCard.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,14 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
9494
}: SourcesCardProps) => (
9595
<div className={css('pf-chatbot__source', layout === 'wrap' && 'pf-m-wrap')}>
9696
<span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
97-
<SourcesCardBase sources={sources} layout={layout} listProps={listProps} listItemProps={listItemProps} {...props} />
97+
<SourcesCardBase
98+
sources={sources}
99+
layout={layout}
100+
listProps={listProps}
101+
listItemProps={listItemProps}
102+
cardMaxWidth={cardMaxWidth}
103+
{...props}
104+
/>
98105
</div>
99106
);
100107

‎packages/module/src/SourcesCardBase/SourcesCardBase.tsx‎

Lines changed: 57 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -132,79 +132,69 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
132132
return `Source ${index !== undefined ? index + 1 : page}`;
133133
};
134134

135-
const renderSourceCard = (source: SourcesCardBaseProps['sources'][0], index: number) => {
136-
const [localIsExpanded, setLocalIsExpanded] = useState(false);
137-
138-
const onLocalToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
139-
setLocalIsExpanded(isExpanded);
140-
};
141-
142-
return (
143-
<ListItem key={index} className="pf-chatbot__sources-list-item" {...listItemProps}>
144-
<Card
145-
isCompact={isCompact}
146-
className="pf-chatbot__sources-card"
147-
style={{ maxWidth: cardMaxWidth }}
148-
component="span"
149-
{...props}
150-
>
151-
<CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
152-
<div className="pf-chatbot__sources-card-title-container">
153-
<Button
154-
component="a"
155-
variant={ButtonVariant.link}
156-
href={source.link}
157-
icon={source.isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
158-
iconPosition="end"
159-
isInline
160-
rel={source.isExternal ? 'noreferrer' : undefined}
161-
target={source.isExternal ? '_blank' : undefined}
162-
onClick={source.onClick ?? undefined}
163-
{...source.titleProps}
164-
>
165-
{renderTitle(source.title, index, source.truncateProps)}
166-
</Button>
167-
{source.subtitle && <span className="pf-chatbot__sources-card-subtitle">{source.subtitle}</span>}
168-
</div>
169-
</CardTitle>
170-
{source.body && (
171-
<CardBody
172-
className={`pf-chatbot__sources-card-body ${source.footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
173-
{...cardBodyProps}
135+
const renderUncontrolledSourceCard = (source: SourcesCardBaseProps['sources'][0], index: number) => (
136+
<ListItem key={index} className="pf-chatbot__sources-list-item" {...listItemProps}>
137+
<Card
138+
isCompact={isCompact}
139+
className="pf-chatbot__sources-card"
140+
style={{ maxWidth: cardMaxWidth }}
141+
component="span"
142+
{...props}
143+
>
144+
<CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
145+
<div className="pf-chatbot__sources-card-title-container">
146+
<Button
147+
component="a"
148+
variant={ButtonVariant.link}
149+
href={source.link}
150+
icon={source.isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
151+
iconPosition="end"
152+
isInline
153+
rel={source.isExternal ? 'noreferrer' : undefined}
154+
target={source.isExternal ? '_blank' : undefined}
155+
onClick={source.onClick ?? undefined}
156+
{...source.titleProps}
174157
>
175-
{source.hasShowMore ? (
176-
// prevents extra VO announcements of button text - parent Message has aria-live
177-
<div aria-live="off">
178-
<ExpandableSection
179-
variant={ExpandableSectionVariant.truncate}
180-
toggleText={localIsExpanded ? showLessWords : showMoreWords}
181-
onToggle={onLocalToggle}
182-
isExpanded={localIsExpanded}
183-
truncateMaxLines={2}
184-
>
185-
{source.body}
186-
</ExpandableSection>
187-
</div>
188-
) : (
189-
<div className="pf-chatbot__sources-card-body-text">{source.body}</div>
190-
)}
191-
</CardBody>
192-
)}
193-
{source.footer && (
194-
<CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
195-
{source.footer}
196-
</CardFooter>
197-
)}
198-
</Card>
199-
</ListItem>
200-
);
201-
};
158+
{renderTitle(source.title, index, source.truncateProps)}
159+
</Button>
160+
{source.subtitle && <span className="pf-chatbot__sources-card-subtitle">{source.subtitle}</span>}
161+
</div>
162+
</CardTitle>
163+
{source.body && (
164+
<CardBody
165+
className={`pf-chatbot__sources-card-body ${source.footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
166+
{...cardBodyProps}
167+
>
168+
{source.hasShowMore ? (
169+
// prevents extra VO announcements of button text - parent Message has aria-live
170+
<div aria-live="off">
171+
<ExpandableSection
172+
variant={ExpandableSectionVariant.truncate}
173+
toggleText={localIsExpanded ? showLessWords : showMoreWords}
174+
truncateMaxLines={2}
175+
>
176+
{source.body}
177+
</ExpandableSection>
178+
</div>
179+
) : (
180+
<div className="pf-chatbot__sources-card-body-text">{source.body}</div>
181+
)}
182+
</CardBody>
183+
)}
184+
{source.footer && (
185+
<CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
186+
{source.footer}
187+
</CardFooter>
188+
)}
189+
</Card>
190+
</ListItem>
191+
);
202192

203193
if (layout === 'wrap') {
204194
return (
205195
<div className="pf-chatbot__sources-card-base pf-m-wrap">
206196
<List isPlain variant={ListVariant.inline} className="pf-chatbot__sources-list" {...listProps}>
207-
{sources.map((source, index) => renderSourceCard(source, index))}
197+
{sources.map((source, index) => renderUncontrolledSourceCard(source, index))}
208198
</List>
209199
</div>
210200
);

0 commit comments

Comments
 (0)