adilallo
84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
import LogoWall from "../../app/components/sections/LogoWall";
|
||
|
||
export default {
|
||
title: "Components/Sections/LogoWall",
|
||
component: LogoWall,
|
||
parameters: {
|
||
layout: "fullscreen",
|
||
docs: {
|
||
description: {
|
||
component: `A responsive logo wall component that displays partner/sponsor logos in a grid layout. Features responsive breakpoints with different layouts and sizing for mobile, tablet, and desktop views.
|
||
|
||
## Responsive Behavior
|
||
|
||
- **Mobile**: 3 rows × 2 columns grid with 32px gaps
|
||
- **SM**: 2 rows × 3 columns grid with 48px row gap and 32px column gap
|
||
- **MD**: Single row with space-between layout and 24px gap between text and logos
|
||
- **LG**: Larger logo sizes and 64px horizontal padding
|
||
- **XL**: Largest logo sizes, 160px horizontal padding, and 14px label text
|
||
|
||
## Animations & Transitions
|
||
|
||
- **Fade-in Effect**: Logos fade in from opacity 0 to 60% after component mounts (500ms transition)
|
||
- **Hover Interactions**: Individual logos respond to hover with:
|
||
- Opacity change from 60% to 100%
|
||
- Scale transform (105% zoom)
|
||
- 500ms smooth transitions for all effects
|
||
- **Loading States**: Progressive loading with fallback timer for reliable display
|
||
|
||
## Props
|
||
|
||
- **logos** (optional): Array of logo objects with src, alt, size, and order properties. If not provided, uses default partner logos.
|
||
|
||
## Usage Examples
|
||
|
||
### Custom Logos
|
||
\`\`\`jsx
|
||
<LogoWall
|
||
logos={[
|
||
{
|
||
src: "assets/logos/partners/cu-boulder.svg",
|
||
alt: "CU Boulder",
|
||
size: "h-10 lg:h-12 xl:h-[60px]",
|
||
order: "order-1 sm:order-2"
|
||
},
|
||
{
|
||
src: "assets/logos/partners/food-not-bombs.svg",
|
||
alt: "Food Not Bombs",
|
||
size: "h-11 lg:h-14 xl:h-[70px]",
|
||
order: "order-2 sm:order-1"
|
||
}
|
||
]}
|
||
/>
|
||
\`\`\`
|
||
|
||
### Empty State
|
||
\`\`\`jsx
|
||
<LogoWall logos={[]} />
|
||
\`\`\`
|
||
This will fall back to the default partner logos.`,
|
||
},
|
||
},
|
||
},
|
||
tags: ["autodocs"],
|
||
argTypes: {
|
||
logos: {
|
||
control: "object",
|
||
description:
|
||
"Array of logo objects with src, alt, size, and order properties. If not provided, uses default partner logos.",
|
||
},
|
||
},
|
||
};
|
||
|
||
export const Default = {
|
||
args: {},
|
||
parameters: {
|
||
docs: {
|
||
description: {
|
||
story:
|
||
"Default LogoWall with all partner logos. Displays in a 3×2 grid on mobile, 2×3 grid on small screens, single row on medium screens, and larger sizes on large screens. Features smooth fade-in animations and hover interactions.",
|
||
},
|
||
},
|
||
},
|
||
};
|