Update stories to match new component organization

2026-02-05 22:46:16 -07:00
parent 6f178e934f
commit aef04c525a
51 changed files with 111 additions and 111 deletions
@@ -0,0 +1,81 @@
+import FeatureGrid from "../../app/components/sections/FeatureGrid";
+
+export default {
+  title: "Components/Sections/FeatureGrid",
+  component: FeatureGrid,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+A responsive feature grid component that displays organizational tools and services in a clean card-based layout with supportive messaging and categorized feature highlights.
+
+## Features
+
+- **Responsive Layout**: Adapts from 2x2 grid on mobile to 1x4 grid on tablet to horizontal layout on desktop
+- **ContentLockup Integration**: Uses the feature variant with "Learn more" link
+- **MiniCard Grid**: Four feature cards with color-coded backgrounds and icons
+- **Accessibility**: Full keyboard navigation, focus indicators, and ARIA labels
+- **Design System**: Uses design tokens for consistent spacing, colors, and typography
+
+## Responsive Behavior
+
+- **Mobile (< 768px)**: 2x2 grid layout with ContentLockup on top
+- **Tablet (768px - 1024px)**: 1x4 grid layout with ContentLockup on top  
+- **Desktop (> 1024px)**: Horizontal layout with ContentLockup on left, 1x4 grid on right
+
+## Interactive Elements
+
+- **MiniCards**: Hover effects, focus indicators, and keyboard navigation
+- **Learn More Link**: Underlined link with focus states
+- **Color-coded Features**: Royal, green, pink, and blue backgrounds for categorization
+
+## Accessibility
+
+- WCAG 2.1 AA compliant
+- Keyboard navigation support
+- Screen reader friendly with proper ARIA labels
+- Focus management with visible indicators
+        `,
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Main headline text for the ContentLockup",
+    },
+    subtitle: {
+      control: { type: "text" },
+      description: "Supporting subtitle text for the ContentLockup",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for custom styling",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: "We've got your back, every step of the way",
+    subtitle:
+      "Use our toolkit to improve, document, and evolve your organization.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+Default FeatureGrid with standard content. This component demonstrates:
+
+- **ContentLockup**: Feature variant with title, subtitle, and "Learn more" link
+- **MiniCard Grid**: Four feature cards with different colors and icons
+- **Responsive Design**: Layout adapts across mobile, tablet, and desktop breakpoints
+- **Interactive States**: Hover effects and focus indicators on all interactive elements
+
+The component uses a dark background (#171717) with rounded corners and proper spacing using design tokens.
+        `,
+      },
+    },
+  },
+};