Skip to content

Options card #621

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

Closed
rebeccaalpert wants to merge 1 commit into from
Closed

Options card #621

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
2 changes: 2 additions & 0 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 @@ -37,6 +37,8 @@ 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 CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
import patternflyAvatar from './patternfly_avatar.jpg';
import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
Expand Down
244 changes: 210 additions & 34 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,53 +1,229 @@
import { Fragment, FunctionComponent } from 'react';
import { useState, FunctionComponent } from 'react';

import Message from '@patternfly/chatbot/dist/dynamic/Message';
import userAvatar from './user_avatar.svg';
import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
import {
Button,
Card,
CardBody,
CardFooter,
CardHeader,
CardTitle,
ExpandableSection,
ExpandableSectionToggle,
Flex,
FlexItem,
Label,
Tab,
Tabs,
TabTitleText
} from '@patternfly/react-core';
import { CubeIcon, CubesIcon } from '@patternfly/react-icons';

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 40 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' }}
style={{ marginBlockStart: 'var(--pf-t--global--spacer--md)', textAlign: 'center' }}
>
<div style={{ fontWeight: 'var(--pf-t--global--font--weight--heading--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: 'spaceItemsXs' }}>
<FlexItem>4.20.0-ec.3</FlexItem>
<FlexItem>
<Label 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: 'spaceItemsXs' }}>
<FlexItem>4.19.2</FlexItem>
<FlexItem>
<Label 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
id="4.17-card"
isSelectable
isSelected={isCardSelected === id4}
style={{ marginBlockStart: 'var(--pf-t--global--spacer--md)' }}
>
<CardHeader
selectableActions={{
selectableActionId: id4,
selectableActionAriaLabelledby: '4.17-card',
name: 'version',
variant: 'single',
onChange,
isHidden: true
}}
>
<CardTitle>
<Flex spaceItems={{ default: 'spaceItemsXs' }}>
<FlexItem>4.17.34</FlexItem>
<FlexItem>
<Label 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>
);

const UserActionEndContent = () => {
// eslint-disable-next-line no-console
const onClick = () => console.log('custom button click');
return (
<Fragment>
<Button variant="secondary" ouiaId="Secondary" onClick={onClick}>
End content button
</Button>
<Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
</Fragment>
<Card ouiaId="VersionSelectorCard">
<CardBody>
<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 CardInformationAfterMainContent = () => (
<Card ouiaId="BasicCard">
<CardTitle>This is content card after main content</CardTitle>
<CardBody>Body</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);

const BeforeMainContent = () => (
<div>
<Badge key={1} isRead>
7
</Badge>
<Badge key={2} isRead>
24
</Badge>
</div>
);

export const UserMessageWithExtraContent: FunctionComponent = () => (
<>
<Message
avatar={userAvatar}
name="User"
role="user"
content="This is a main message."
content="This is a message with a version selector card."
timestamp="1 hour ago"
extraContent={{
beforeMainContent: <BeforeMainContent />,
afterMainContent: <CardInformationAfterMainContent />,
endContent: <UserActionEndContent />
afterMainContent: <VersionSelectorCard />
}}
/>
</>
Expand Down
Loading