SOLACEPATCH DATAGO-103355 Added Documentation for Data-Visualization, Input, Layout stories

storybook/src/stories/accessiblity/form/SolaceForm.mdx

@@ -0,0 +1,114 @@
+import { Meta, Description, Title, Subtitle, ArgTypes } from "@storybook/blocks";
+import * as SolaceFormStories from "./SolaceForm.stories.tsx";
+import { CustomStories } from "../../../../.storybook/CustomStories.tsx";
+
+<Meta of={SolaceFormStories} />
+
+<Title>Solace Form</Title>
+
+<Description of={SolaceFormStories} />
+
+<Subtitle>Code Component Name</Subtitle>
+`SolaceTestForm`
+
+<Subtitle>Component Description</Subtitle>
+
+The Solace Form component provides a comprehensive demonstration of how to create accessible, well-structured forms using the Solace design system. It showcases proper form layout patterns, accessibility best practices, and the integration of multiple form components into a cohesive user experience.
+
+The component implements a two-column grid layout with consistent spacing and visual hierarchy, demonstrating how to organize complex form interfaces with multiple sections, tabs, and interactive elements. This pattern helps users navigate through complex data entry workflows while maintaining accessibility standards and visual consistency.
+
+<Subtitle>When To Use It</Subtitle>
+
+Use this form pattern when you need to create complex data entry interfaces that combine multiple types of input controls. This layout pattern is particularly effective for configuration pages, settings panels, user profiles, and multi-step data collection workflows.
+
+Common use cases include:
+
+- Admin configuration panels with multiple sections of related settings
+- User profile forms that combine personal information, preferences, and advanced options
+- Application setup wizards that require various types of input validation
+- Data entry forms that need to organize content into logical groupings with progressive disclosure
+- Dashboard creation interfaces that combine form controls with preview capabilities
+- Complex search and filter interfaces that provide multiple input methods
+
+<Subtitle>When Not To Use It</Subtitle>
+
+- Simple forms with only a few fields that don't require complex layout organization
+- Single-purpose forms like login, registration, or contact forms that work better with simpler layouts
+- Mobile-first interfaces where the two-column grid layout would be too cramped
+- Forms that need to be embedded within other components where the full-width layout is inappropriate
+- Quick action forms or modal dialogs where users expect minimal, focused interactions
+- Forms where users need to complete fields in a specific sequential order without skipping sections
+- High-frequency data entry scenarios where the complex layout might slow down experienced users
+- Forms primarily used on touch devices where the layout might create usability issues
+
+<Subtitle>Import Statement</Subtitle>
+
+```tsx
+import SolaceTestForm from "@SolaceDev/maas-react-components";
+// Or import individual components:
+import {
+	SolaceTextField,
+	SolaceSelect,
+	SolaceTextArea,
+	SolaceAccordion,
+	SolaceTabs,
+	SolaceRadioGroup,
+	SolaceCheckBox,
+	SolaceToggle
+} from "@SolaceDev/maas-react-components";
+```
+
+<Subtitle>Properties</Subtitle>
+
+<ArgTypes of={SolaceFormStories} />
+
+<Subtitle>Links</Subtitle>
+
+- **GitHub Source Code**: [SolaceForm.tsx](https://github.com/SolaceDev/maas-react-components/blob/main/src/components/SolaceForm.tsx)
+- **GitHub Theme Styles**: <a href="https://github.com/SolaceDev/maas-react-components/blob/main/src/resources/theme.ts#:~:text=MuiFormControl%3A%20%7B" target="_blank">theme.ts (MuiFormControl, MuiFormGroup, MuiFormHelperText, MuiFormLabel styles)</a>
+
+<Subtitle>CSS Classes / Styles</Subtitle>
+
+**Main Layout Classes:**
+
+- `.CreateContentLayout` - Root form container with full height and overflow handling
+- `.FormContainer` - Two-column grid layout (108px label column, flexible content column)
+- `.SectionTitle` - Section headers with consistent typography and spacing
+- `.LabelColumn` - Left column for form labels with consistent padding
+- `.ValueColumn` - Right column for form controls with responsive width options
+
+**Grid Layout Classes:**
+
+- `.fixed-width-520` - Fixed width container for standard form controls
+- `.fixed-width-260` - Narrower width container for compact controls
+- `.TwoColumnSpan` - Spans both grid columns for full-width content
+
+**Interactive Element Classes:**
+
+- `.TabsContainer` - Horizontal flex container for tabs with border styling
+- `.TabLayoutContainer` - Content area below tabs with proper spacing
+- `.FilterWrapper` - Horizontal layout for filter controls with consistent gaps
+- `.IconContainer` - Flex container for icons with proper alignment
+- `.SelectorIconContainer` - Container for selector icons with end alignment
+
+**Theme Customization:**
+
+The component uses Material-UI's theme system with custom Solace styling:
+
+- `theme.palette.ux.background.w10` - Main background color
+- `theme.palette.ux.secondary.w20` - Border colors for tabs and sections
+- `theme.palette.ux.secondary.text.wMain` - Secondary text color
+- `theme.spacing()` - Consistent spacing system throughout the layout
+
+**Layout Specifications:**
+
+- Grid column gap: `theme.spacing(36/8)` (18px)
+- Grid row gap: `theme.spacing(2)` (16px)
+- Form container padding: `theme.spacing(2) 0 theme.spacing(1) 0`
+- Section title margin: `theme.spacing(4)` top margin
+- Label column padding: `4px` top padding for alignment
+- Filter wrapper gap: `theme.spacing(3)` (24px)
+
+<Subtitle>Stories</Subtitle>
+
+<CustomStories />