diff --git a/fakemui/src/utils/accessibility.ts b/fakemui/src/utils/accessibility.ts index a994ab194..58faeb3da 100644 --- a/fakemui/src/utils/accessibility.ts +++ b/fakemui/src/utils/accessibility.ts @@ -195,6 +195,16 @@ export const testId = { // Card card: (id: string) => generateTestId('card', 'card', undefined, id), cardButton: (id: string, action: string) => generateTestId('card', 'button', 'click', `${id}-${action}`), + + // Help/Documentation + help: (name: string) => generateTestId('help', 'section', undefined, name), + helpButton: () => generateTestId('help', 'button', 'click', 'open'), + helpModal: (name: string) => generateTestId('help', 'modal', undefined, name), + helpSearch: () => generateTestId('help', 'input', undefined, 'search'), + helpNav: (name: string) => generateTestId('help', 'nav', undefined, name), + alert: (type: string) => generateTestId('alert', 'alert', undefined, type), + section: (id: string) => generateTestId('section', 'region', undefined, id), + listItem: (label: string) => generateTestId('list', 'item', undefined, label), }; /** diff --git a/workflowui/src/components/Help/DocContentRenderer.tsx b/workflowui/src/components/Help/DocContentRenderer.tsx new file mode 100644 index 000000000..f602e7908 --- /dev/null +++ b/workflowui/src/components/Help/DocContentRenderer.tsx @@ -0,0 +1,303 @@ +/** + * DocContentRenderer Component + * Renders documentation pages and their content + */ + +import React from 'react'; +import { + Typography, + Box, + Card, + CardContent, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Alert, + Paper, + Link, + Divider, +} from '@mui/material'; +import { DocPage, DocContentBlock } from '../../types/documentation'; +import { testId } from '../../utils/accessibility'; +import styles from './Help.module.scss'; + +interface DocContentRendererProps { + pages: (DocPage | undefined)[]; + isSearchResults?: boolean; + onPageSelect?: (pageId: string) => void; +} + +const ContentBlock: React.FC<{ + block: DocContentBlock; + onPageSelect?: (pageId: string) => void; +}> = ({ block, onPageSelect }) => { + const { type, content, title, level, language, variant, items, columns, rows, icon, subtext } = + block; + + switch (type) { + case 'heading': + const HeadingTag = (`h${level}` as keyof JSX.IntrinsicElements) || 'h2'; + return ( + + {content} + + ); + + case 'text': + return ( + + {content} + + ); + + case 'code': + return ( + + {content} + + ); + + case 'list': + return ( + + {items?.map((item, idx) => ( + + {item} + + ))} + + ); + + case 'table': + return ( + + + + + {columns?.map((col) => ( + + {col} + + ))} + + + + {rows?.map((row, idx) => ( + + {row.map((cell, cellIdx) => ( + {cell} + ))} + + ))} + +
+
+ ); + + case 'callout': + return ( + + {content} + {subtext && ( + + {subtext} + + )} + + ); + + case 'step': + return ( + + + {icon} + + {content} + + ); + + case 'image': + return ( + + {title + {title && ( + + {title} + + )} + + ); + + case 'video': + return ( + +