feat(docs): add ISO download card demo

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

@@ -30,7 +30,6 @@ propComponents:
 sortValue: 3
 ---
 
-import { ArrowRightIcon, CheckCircleIcon } from '@patternfly/react-icons';
 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';
@@ -39,6 +38,9 @@ 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 patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';

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

@@ -9,27 +9,35 @@
   Alert,
   Badge,
   Button,
+  ButtonVariant,
   Card,
   CardBody,
+  CardExpandableContent,
   CardFooter,
+  CardHeader,
+  CardTitle,
   CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
+  Flex,
+  FlexItem,
   HelperText,
   HelperTextItem,
+  Icon,
   Progress,
   ProgressMeasureLocation,
-  Flex,
-  FlexItem,
-  CardTitle,
-  CardHeader,
-  CardExpandableContent,
-  Spinner,
-  CodeBlockCode
+  Spinner
 } from '@patternfly/react-core';
-import { ArrowRightIcon, CheckCircleIcon } from '@patternfly/react-icons';
+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';
 
 const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
@@ -63,6 +71,51 @@
   </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;
@@ -174,7 +227,7 @@
     if (isSimulationRunning && !userManuallyExpandedAccordion) {
       setIsAccordionExpanded(getCurrentStage().id);
     }
   }, [progress, isSimulationRunning, userManuallyExpandedAccordion]);
 
   const onExpandCard = (_event: React.MouseEvent) => {
     setIsCardExpanded(!isCardExpanded);
@@ -386,5 +439,14 @@
         afterMainContent: <LiveProgressSummaryCard />
       }}
     />
+    <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
+      }}
+    />
   </>
 );