adilallo
82 lines
2.7 KiB
JavaScript
82 lines
2.7 KiB
JavaScript
import FeatureGrid from "../app/components/FeatureGrid";
|
|
|
|
export default {
|
|
title: "Components/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.
|
|
`,
|
|
},
|
|
},
|
|
},
|
|
};
|