Skip to content

chore(docs): Add demo for version selector card #644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 1 commit into from
Aug 12, 2025
Merged

chore(docs): Add demo for version selector card #644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions ...module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,7 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
import patternflyAvatar from './patternfly_avatar.jpg';
import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
Expand Down
318 changes: 262 additions & 56 deletions ...ternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Fragment, FunctionComponent, useState, useEffect } from 'react';
import Message from '@patternfly/chatbot/dist/dynamic/Message';
import userAvatar from './user_avatar.svg';
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
import {
Accordion,
AccordionContent,
Expand Down Expand Up @@ -31,13 +32,15 @@
Icon,
Progress,
ProgressMeasureLocation,
ExpandableSection,
ExpandableSectionToggle,
Label,
Tab,
Tabs,
TabTitleText,
Spinner
} from '@patternfly/react-core';
import ArrowCircleDownIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-down-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
import React from 'react';
import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon } from '@patternfly/react-icons';

const UserActionEndContent = () => {
// eslint-disable-next-line no-console
Expand Down Expand Up @@ -71,51 +74,6 @@
</div>
);

const downloadCard = (
<Card>
<CardHeader isToggleRightAligned>
<CardTitle>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<Icon size="lg" status="success">
<CheckCircleIcon />
</Icon>
</FlexItem>
<FlexItem>Your discovery ISO is ready</FlexItem>
</Flex>
</CardTitle>
</CardHeader>

<CardBody>
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
<FlexItem>
<Content component={ContentVariants.p}>
To begin adding hosts to your bare metal cluster, you first need to boot them with the generated Discovery
ISO. This allows the installation program to see and manage your hardware.
</Content>
</FlexItem>

<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<Button variant={ButtonVariant.primary} icon={<ArrowCircleDownIcon />} isBlock>
Download Discovery ISO
</Button>
</FlexItem>

<FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
<Content component={ContentVariants.small}>1.2 GB • Expires in 24 hours</Content>
</FlexItem>
</Flex>
</Flex>
</CardBody>

<CardFooter>
<Content component={ContentVariants.small}>
<strong>Next step:</strong> After downloading, boot your bare metal hosts from this ISO image.
</Content>
</CardFooter>
</Card>
);
interface Stage {
id: string;
name: string;
Expand Down Expand Up @@ -227,7 +185,7 @@
if (isSimulationRunning && !userManuallyExpandedAccordion) {
setIsAccordionExpanded(getCurrentStage().id);
}
}, [progress, isSimulationRunning, userManuallyExpandedAccordion]);

Check warning on line 188 in packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

React Hook useEffect has a missing dependency: 'getCurrentStage'. Either include it or remove the dependency array

const onExpandCard = (_event: React.MouseEvent) => {
setIsCardExpanded(!isCardExpanded);
Expand Down Expand Up @@ -319,7 +277,7 @@
</Button>
</FlexItem>
</Flex>
<Card ouiaId="BasicCard" isExpanded={isCardExpanded}>
<Card ouiaId="LiveProgressSummaryCard" isExpanded={isCardExpanded}>
<CardHeader
onExpand={onExpandCard}
isToggleRightAligned
Expand Down Expand Up @@ -415,6 +373,244 @@
);
};

const VersionSelectorCard = () => {
const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
const [isCardSelected, setIsCardSelected] = useState('');
const [isExpanded, setIsExpanded] = useState(false);
const id1 = '4.20';
const id2 = '4.19';
const id3 = '4.18';
const id4 = '4.17';

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
setIsCardSelected(event.currentTarget.id);
};

const onToggleExpandableSection = (isExpanded: boolean) => {
setIsExpanded(isExpanded);
};

const handleTabClick = (_event: any, tabIndex: string | number) => {

Check warning on line 393 in packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint 

Unexpected any. Specify a different type
setActiveTabKey(tabIndex);
};

const contentId = 'detached-expandable-section-content';
const toggleId = 'detached-expandable-section-toggle';

const generateTabContent = (title: string, subtitle: string) => (
<Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapMd' }}>
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} className="pf-v6-u-mt-md pf-v6-u-text-align-center">
<div className="pf-v6-u-font-weight-bold">{title}</div>
<div>{subtitle}</div>
</FlexItem>
<FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
<Card id="4.20-card" isSelectable isSelected={isCardSelected === id1}>
<CardHeader
selectableActions={{
selectableActionId: id1,
selectableActionAriaLabelledby: '4.20-card',
name: 'version',
variant: 'single',
onChange,
isHidden: true
}}
>
<CardTitle>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>4.20.0-ec.3</FlexItem>
<FlexItem>
<Label isCompact color={isCardSelected === id1 ? 'blue' : undefined}>
Preview
</Label>
</FlexItem>
</Flex>
</CardTitle>
</CardHeader>
<CardBody>Developer preview • Not for production</CardBody>
</Card>
</FlexItem>
<FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
<Card id="4.19-card" isSelectable isSelected={isCardSelected === id2}>
<CardHeader
selectableActions={{
selectableActionId: id2,
selectableActionAriaLabelledby: '4.19-card',
name: 'version',
variant: 'single',
onChange,
isHidden: true
}}
>
<CardTitle>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>4.19.2</FlexItem>
<FlexItem>
<Label isCompact color={isCardSelected === id2 ? 'blue' : undefined}>
Latest
</Label>
</FlexItem>
</Flex>
</CardTitle>
</CardHeader>
<CardBody>Newest features • 18-month support • Recommended</CardBody>
</Card>
</FlexItem>
<FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
<Card id="4.18-card" isSelectable isSelected={isCardSelected === id3}>
<CardHeader
selectableActions={{
selectableActionId: id3,
selectableActionAriaLabelledby: '4.18-card',
name: 'version',
variant: 'single',
onChange,
isHidden: true
}}
>
<CardTitle>4.18.19</CardTitle>
</CardHeader>
<CardBody>Previous stable • Full support</CardBody>
</Card>
<ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
<Flex
direction={{ default: 'column' }}
alignItems={{ default: 'alignItemsCenter' }}
gap={{ default: 'gapMd' }}
>
<FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
<Card className="pf-v6-u-mt-md" id="4.17-card" isSelectable isSelected={isCardSelected === id4}>
<CardHeader
selectableActions={{
selectableActionId: id4,
selectableActionAriaLabelledby: '4.17-card',
name: 'version',
variant: 'single',
onChange,
isHidden: true
}}
>
<CardTitle>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>4.17.34</FlexItem>
<FlexItem>
<Label isCompact color={isCardSelected === id4 ? 'blue' : undefined}>
Maintenance
</Label>
</FlexItem>
</Flex>
</CardTitle>
</CardHeader>
<CardBody>Maintenance support phase</CardBody>
</Card>
</FlexItem>
</Flex>
</ExpandableSection>
</FlexItem>
<FlexItem>
<ExpandableSectionToggle
isExpanded={isExpanded}
onToggle={onToggleExpandableSection}
toggleId={toggleId}
contentId={contentId}
direction="up"
>
{isExpanded ? 'Hide older versions' : 'Show older versions'}
</ExpandableSectionToggle>
</FlexItem>
</Flex>
);

return (
<Card ouiaId="VersionSelectorCard">
<CardBody
style={{ '--pf-v6-c-card--child--PaddingBlockEnd': 'var(--pf-t--global--spacer--md)' } as React.CSSProperties}
>
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Architecture" role="region" isFilled>
<Tab
eventKey={0}
title={
<TabTitleText>
<Flex spaceItems={{ default: 'spaceItemsXs' }}>
<FlexItem>
<CubeIcon />
</FlexItem>
<FlexItem>Single arch</FlexItem>
</Flex>
</TabTitleText>
}
>
{generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')}
</Tab>
<Tab
eventKey={1}
title={
<TabTitleText>
<Flex spaceItems={{ default: 'spaceItemsXs' }}>
<FlexItem>
<CubesIcon />
</FlexItem>
<FlexItem>Multi arch</FlexItem>
</Flex>
</TabTitleText>
}
>
{generateTabContent('Multi arch', 'Standard deployments')}
</Tab>
</Tabs>
</CardBody>
<CardFooter>
<Button isBlock isDisabled={isCardSelected === ''}>
Continue with selections
</Button>
</CardFooter>
</Card>
);
};

const DownloadCard = () => (
<Card>
<CardHeader isToggleRightAligned>
<CardTitle>
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<Icon size="lg" status="success">
<CheckCircleIcon />
</Icon>
</FlexItem>
<FlexItem>Your discovery ISO is ready</FlexItem>
</Flex>
</CardTitle>
</CardHeader>
<CardBody>
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
<FlexItem>
<Content component={ContentVariants.p}>
To begin adding hosts to your bare metal cluster, you first need to boot them with the generated Discovery
ISO. This allows the installation program to see and manage your hardware.
</Content>
</FlexItem>

<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<Button variant={ButtonVariant.primary} icon={<ArrowCircleDownIcon />} isBlock>
Download Discovery ISO
</Button>
</FlexItem>

<FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
<Content component={ContentVariants.small}>1.2 GB • Expires in 24 hours</Content>
</FlexItem>
</Flex>
</Flex>
</CardBody>
<CardFooter>
<Content component={ContentVariants.small}>
<strong>Next step:</strong> After downloading, boot your bare metal hosts from this ISO image.
</Content>
</CardFooter>
</Card>
);

export const UserMessageWithExtraContent: FunctionComponent = () => (
<>
<Message
Expand All @@ -430,22 +626,32 @@
}}
/>
<Message
avatar={userAvatar}
name="User"
role="user"
content="This is a main message."
avatar={patternflyAvatar}
name="Bot"
role="bot"
content="This is a message with a live progress summmary card."
timestamp="1 hour ago"
extraContent={{
afterMainContent: <LiveProgressSummaryCard />
}}
/>
<Message
avatar={patternflyAvatar}
name="Bot"
role="bot"
content="This is a message with a version selector card."
timestamp="1 hour ago"
extraContent={{
afterMainContent: <VersionSelectorCard />
}}
/>
<Message
avatar={patternflyAvatar}
name="Bot"
role="bot"
content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you:"
extraContent={{
endContent: downloadCard
endContent: <DownloadCard />
}}
/>
</>
Expand Down
Loading