diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md index fbba9ca1b..8fff11d4b 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md @@ -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'; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx index d3b351434..692aabad9 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx @@ -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, @@ -31,13 +32,15 @@ import { 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 @@ -71,51 +74,6 @@ const BeforeMainContent = () => ( ); -const downloadCard = ( - - - - - - - - - - Your discovery ISO is ready - - - - - - - - - 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. - - - - - - - - - - 1.2 GB • Expires in 24 hours - - - - - - - - Next step: After downloading, boot your bare metal hosts from this ISO image. - - - -); interface Stage { id: string; name: string; @@ -319,7 +277,7 @@ Setting up cluster console...`; - + { + const [activeTabKey, setActiveTabKey] = useState(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) => { + setIsCardSelected(event.currentTarget.id); + }; + + const onToggleExpandableSection = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + const handleTabClick = (_event: any, tabIndex: string | number) => { + setActiveTabKey(tabIndex); + }; + + const contentId = 'detached-expandable-section-content'; + const toggleId = 'detached-expandable-section-toggle'; + + const generateTabContent = (title: string, subtitle: string) => ( + + +
{title}
+
{subtitle}
+ + + + + + + 4.20.0-ec.3 + + + + + + + Developer preview • Not for production + + + + + + + + 4.19.2 + + + + + + + Newest features • 18-month support • Recommended + + + + + + 4.18.19 + + Previous stable • Full support + + + + + + + + + 4.17.34 + + + + + + + Maintenance support phase + + + + + + + + {isExpanded ? 'Hide older versions' : 'Show older versions'} + + + + ); + + return ( + + + + + + + + + Single arch + + + } + > + {generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')} + + + + + + + Multi arch + + + } + > + {generateTabContent('Multi arch', 'Standard deployments')} + + + + + + + + ); +}; + +const DownloadCard = () => ( + + + + + + + + + + Your discovery ISO is ready + + + + + + + + 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. + + + + + + + + + + 1.2 GB • Expires in 24 hours + + + + + + + Next step: After downloading, boot your bare metal hosts from this ISO image. + + + +); + export const UserMessageWithExtraContent: FunctionComponent = () => ( <> ( }} /> }} /> + + }} + /> }} />