Add deck component

packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/Deck.md

@@ -0,0 +1,45 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Content containers
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Deck
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['Deck', 'DeckPage', 'DeckButton', 'ModalDeck']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/Deck.md
+---
+
+import Deck from '@patternfly/react-component-groups/dist/dynamic/Deck';
+import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';
+import { FunctionComponent, useState } from 'react';
+
+The **deck** component is a compact, sequential container for presenting a suite of static announcements or an informational walkthrough. It is not intended for task completion or form-filling workflows.
+
+## Examples
+
+### Basic deck
+
+This example demonstrates the basic deck with automatic navigation. Buttons can use the `navigation` prop to automatically handle page changes:
+- `navigation: 'next'` - Advances to the next page
+- `navigation: 'previous'` - Goes back to the previous page  
+- `navigation: 'close'` - Triggers the onClose callback
+
+You can also add custom `onClick` handlers for analytics, validation, or other logic. The custom `onClick` will be called **before** the automatic navigation occurs.
+
+```ts file="./DeckExample.tsx"
+
+```
+
+### Modal deck
+
+Display the deck in a modal dialog. The `ModalDeck` component wraps the Deck in a PatternFly Modal without a close button or extra padding, ideal for guided walkthroughs that require user interaction.
+
+```ts file="./ModalDeckExample.tsx"
+
+```
+

packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/DeckDemos.md

@@ -0,0 +1,26 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Content containers
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Deck
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react-demos
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/DeckDemos.md
+---
+import { FunctionComponent, useState } from 'react';
+
+import Deck from '@patternfly/react-component-groups/dist/dynamic/Deck';
+import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';
+
+## Demos
+
+### Onboarding modal deck
+
+A complete onboarding experience using ModalDeck to guide users through key product features. This demo demonstrates a multi-step walkthrough with custom styling, labels, and content.
+
+```ts file="./OnboardingModalDeckDemo.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/DeckExample.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable no-console */
+import { FunctionComponent, useState } from 'react';
+import Deck, { DeckButton } from '@patternfly/react-component-groups/dist/dynamic/Deck';
+import { ButtonVariant } from '@patternfly/react-core';
+
+export const BasicExample: FunctionComponent = () => {
+  const [ deckKey, setDeckKey ] = useState(0);
+
+  // Simulated analytics function
+  const trackEvent = (eventName, data) => {
+    console.log('Analytics:', eventName, data);
+  };
+
+  const restartDeck = () => {
+    setDeckKey(prev => prev + 1);
+    trackEvent('deck_restarted', {});
+  };
+
+  const pages = [
+    {
+      content: (
+        <div>
+          <p>This is the first page of your informational walkthrough.</p>
+        </div>
+      ),
+      buttons: [
+        {
+          children: 'Next',
+          variant: ButtonVariant.primary,
+          navigation: 'next',
+          // Custom onClick for analytics - called before navigation
+          onClick: () => trackEvent('deck_next_clicked', { fromPage: 1 })
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <div>
+          <p>Continue through your walkthrough.</p>
+        </div>
+      ),
+      buttons: [
+        {
+          children: 'Next',
+          variant: ButtonVariant.primary,
+          navigation: 'next',
+          onClick: () => trackEvent('deck_next_clicked', { fromPage: 2 })
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <div>
+          <p>You've reached the end of the deck.</p>
+        </div>
+      ),
+      buttons: [
+        {
+          children: 'Restart',
+          variant: ButtonVariant.primary,
+          // Restart the deck for demo purposes
+          onClick: () => {
+            trackEvent('deck_completed', { totalPages: 3 });
+            console.log('Deck completed! Restarting...');
+            restartDeck();
+          }
+        }
+      ]
+    }
+  ];
+
+  return (
+    <Deck 
+      key={deckKey}
+      pages={pages} 
+      onPageChange={(index) => {
+        console.log('Current page:', index);
+        trackEvent('deck_page_changed', { page: index + 1 });
+      }}
+      onClose={() => {
+        trackEvent('deck_closed', {});
+        console.log('Deck closed');
+      }}
+    />
+  );
+};
+

packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/ModalDeckExample.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable no-console */
+import { FunctionComponent, useState } from 'react';
+import Deck, { DeckButton } from '@patternfly/react-component-groups/dist/dynamic/Deck';
+import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+
+export const ModalDeckExample: FunctionComponent = () => {
+  const [ isModalOpen, setIsModalOpen ] = useState(false);
+
+  const handleClose = () => {
+    setIsModalOpen(false);
+    console.log('Modal deck closed');
+  };
+
+  const pages = [
+    {
+      content: (
+        <div>
+          <h2>Welcome to the Modal Deck</h2>
+          <p>This deck is displayed in a modal dialog.</p>
+        </div>
+      ),
+      buttons: [
+        {
+          children: 'Next',
+          variant: ButtonVariant.primary,
+          navigation: 'next'
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <div>
+          <h2>Page 2</h2>
+          <p>Navigate through the walkthrough.</p>
+        </div>
+      ),
+      buttons: [
+        {
+          children: 'Next',
+          variant: ButtonVariant.primary,
+          navigation: 'next'
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <div>
+          <h2>Final Page</h2>
+          <p>Click Close to finish.</p>
+        </div>
+      ),
+      buttons: [
+        {
+          children: 'Close',
+          variant: ButtonVariant.primary,
+          navigation: 'close'
+        }
+      ] as DeckButton[]
+    }
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>
+        Launch modal deck
+      </Button>
+      <ModalDeck isOpen={isModalOpen} onClose={handleClose}>
+        <Deck 
+          pages={pages} 
+          onClose={handleClose}
+          onPageChange={(index) => console.log('Page changed to:', index + 1)}
+        />
+      </ModalDeck>
+    </>
+  );
+};
+

packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/OnboardingModalDeckDemo.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable no-console */
+import { FunctionComponent, useState } from 'react';
+import Deck, { DeckButton } from '@patternfly/react-component-groups/dist/dynamic/Deck';
+import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';
+import { Button, ButtonVariant, Label, Title, Stack, StackItem, Content } from '@patternfly/react-core';
+
+export const OnboardingModalDeckDemo: FunctionComponent = () => {
+  const [ isModalOpen, setIsModalOpen ] = useState(false);
+
+  const handleClose = () => {
+    setIsModalOpen(false);
+    console.log('Onboarding completed or skipped');
+  };
+
+  // Placeholder for illustration - in a real app, replace with actual images
+  const placeholderImage = (
+    <div 
+      style={{
+        width: '256px',
+        height: '256px',
+        borderRadius: '8px',
+        background: 'repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px)',
+        opacity: 0.25,
+        margin: 'auto'
+      }}
+    />
+  );
+
+  const pages = [
+    {
+      content: (
+        <Stack hasGutter>
+          <StackItem>{placeholderImage}</StackItem>
+          <StackItem>
+            <Title headingLevel="h2" size="2xl">Welcome to [Product Name]</Title>
+          </StackItem>
+          <StackItem>
+            <Content component="p">
+              Harness the full potential of the hybrid cloud, simply by asking.  
+            </Content>
+          </StackItem>
+        </Stack>
+      ),
+      buttons: [
+        {
+          children: 'Continue',
+          variant: ButtonVariant.primary,
+          navigation: 'next'
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <Stack hasGutter>
+          <StackItem>{placeholderImage}</StackItem>
+          <StackItem><Label color="grey">AI Command Center</Label></StackItem>
+          <StackItem><Title headingLevel="h2" size="2xl">Intelligence at your command</Title></StackItem>
+          <StackItem><Content component="p">Ask anything. Get answers. Troubleshoot, analyze, and understand your entire fleet just by asking. It's the power of your data, in plain language.</Content></StackItem>
+        </Stack>
+      ),
+      buttons: [
+        {
+          children: 'Continue',
+          variant: ButtonVariant.primary,
+          navigation: 'next'
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <Stack hasGutter>
+          <StackItem>{placeholderImage}</StackItem> 
+          <StackItem><Label color="grey">Canvas Mode</Label></StackItem>
+          <StackItem><Title headingLevel="h2" size="2xl">Go from conversation to clarity.</Title></StackItem>
+          <StackItem><Content component="p">Transform answers into custom dashboards. In Canvas Mode, you can effortlessly arrange, customize, and build the precise view you need to monitor what matters most.</Content></StackItem>
+        </Stack>
+      ),
+      buttons: [
+        {
+          children: 'Continue',
+          variant: ButtonVariant.primary,
+          navigation: 'next'
+        }
+      ] as DeckButton[]
+    },
+    {
+      content: (
+        <Stack hasGutter>
+          <StackItem>{placeholderImage}</StackItem>
+          <StackItem><Label color="grey">Sharing</Label></StackItem>
+          <StackItem><Title headingLevel="h2" size="2xl">Share your vision. Instantly.</Title></StackItem>
+          <StackItem><Content component="p">An insight is only powerful when it’s shared. Save any view to your library and share it with your team in a single click. Drive decisions, together.</Content></StackItem>
+        </Stack>
+      ),
+      buttons: [
+        {
+          children: 'Get started',
+          variant: ButtonVariant.primary,
+          navigation: 'close'
+        }
+      ] as DeckButton[]
+    }
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>
+        Launch onboarding
+      </Button>
+      <ModalDeck 
+        isOpen={isModalOpen}
+        modalProps={{
+          'aria-label': 'Product onboarding walkthrough'
+        }}
+      >
+        <Deck 
+          pages={pages} 
+          onClose={handleClose}
+          onPageChange={(index) => console.log('Onboarding page:', index + 1)}
+          ariaLabel="Product onboarding"
+          ariaRoleDescription="onboarding walkthrough"
+          contentFlexProps={{
+            spaceItems: { default: 'spaceItemsXl' }
+          }}
+        />
+      </ModalDeck>
+    </>
+  );
+};
+