Update stories to match new component organization
This commit is contained in:
adilallo
@@ -0,0 +1,38 @@
|
||||
import ConditionalHeader from "../../app/components/navigation/ConditionalHeader";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/ConditionalHeader",
|
||||
component: ConditionalHeader,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The ConditionalHeader component conditionally renders either HomeHeader (for home page) or Header (for other pages) based on the current pathname. HomeHeader is not sticky, while Header has sticky positioning.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
pathname: {
|
||||
control: "text",
|
||||
description: "Current pathname to determine which header to render",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const HomePage = {
|
||||
args: {
|
||||
pathname: "/",
|
||||
},
|
||||
};
|
||||
|
||||
export const BlogPage = {
|
||||
args: {
|
||||
pathname: "/blog/sample-article",
|
||||
},
|
||||
};
|
||||
|
||||
export const OtherPage = {
|
||||
args: {
|
||||
pathname: "/about",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,335 @@
|
||||
import Footer from "../../app/components/navigation/Footer";
|
||||
import { within, userEvent } from "@storybook/test";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/Footer/Responsive",
|
||||
component: Footer,
|
||||
parameters: {
|
||||
// Chromatic configuration for responsive testing
|
||||
chromatic: {
|
||||
viewports: [320, 360, 480, 640, 768, 1024, 1280, 1440, 1920],
|
||||
// Capture screenshots at each breakpoint
|
||||
delay: 200, // Increased delay to ensure layout is stable
|
||||
// Capture both light and dark themes if available
|
||||
modes: {
|
||||
light: {},
|
||||
dark: {
|
||||
// This will be used if dark mode is implemented
|
||||
colorScheme: "dark",
|
||||
},
|
||||
},
|
||||
},
|
||||
// Storybook viewport configuration
|
||||
viewport: {
|
||||
viewports: {
|
||||
xs: {
|
||||
name: "Extra Small (xs)",
|
||||
styles: {
|
||||
width: "360px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
sm: {
|
||||
name: "Small (sm)",
|
||||
styles: {
|
||||
width: "640px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
md: {
|
||||
name: "Medium (md)",
|
||||
styles: {
|
||||
width: "768px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
lg: {
|
||||
name: "Large (lg)",
|
||||
styles: {
|
||||
width: "1024px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
xl: {
|
||||
name: "Extra Large (xl)",
|
||||
styles: {
|
||||
width: "1280px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
xxl: {
|
||||
name: "2XL (xxl)",
|
||||
styles: {
|
||||
width: "1440px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
full: {
|
||||
name: "Full HD (full)",
|
||||
styles: {
|
||||
width: "1920px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Default story - will be captured at all viewports by Chromatic
|
||||
export const Default = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer component at different breakpoints. Chromatic will capture screenshots at 320px, 360px, 480px, 640px, 768px, 1024px, 1280px, 1440px, and 1920px viewport widths to test responsive behavior.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story for each breakpoint to make testing easier
|
||||
export const ExtraSmall = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xs",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at extra small breakpoint (360px). Tests mobile layout and stacking behavior.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "sm",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at small breakpoint (640px). Tests tablet layout and responsive behavior.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Medium = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "md",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at medium breakpoint (768px). Tests small desktop layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "lg",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story: "Footer at large breakpoint (1024px). Tests desktop layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ExtraLarge = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xl",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at extra large breakpoint (1280px). Tests large desktop layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const TwoXL = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xxl",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at 2XL breakpoint (1440px). Tests very large desktop layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const FullHD = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "full",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at Full HD breakpoint (1920px). Tests maximum desktop layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Interactive story for testing user interactions
|
||||
export const Interactive = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Interactive footer for testing user interactions. Check the Actions panel to see triggered events.",
|
||||
},
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Click footer links", async () => {
|
||||
const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
|
||||
await userEvent.click(useCasesLink);
|
||||
|
||||
const learnLink = canvas.getByRole("link", { name: /learn/i });
|
||||
await userEvent.click(learnLink);
|
||||
|
||||
const aboutLink = canvas.getByRole("link", { name: /about/i });
|
||||
await userEvent.click(aboutLink);
|
||||
|
||||
const privacyLink = canvas.getByRole("link", { name: /privacy policy/i });
|
||||
await userEvent.click(privacyLink);
|
||||
|
||||
const termsLink = canvas.getByRole("link", { name: /terms of service/i });
|
||||
await userEvent.click(termsLink);
|
||||
});
|
||||
|
||||
await step("Click social media links", async () => {
|
||||
const blueskyLink = canvas.getByRole("link", {
|
||||
name: /follow us on bluesky/i,
|
||||
});
|
||||
await userEvent.click(blueskyLink);
|
||||
|
||||
const gitlabLink = canvas.getByRole("link", {
|
||||
name: /follow us on gitlab/i,
|
||||
});
|
||||
await userEvent.click(gitlabLink);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// Story for testing hover states
|
||||
export const HoverStates = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer with hover states visible. This story captures the visual appearance when elements are hovered.",
|
||||
},
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Hover over footer links", async () => {
|
||||
const useCasesLink = canvas.getByRole("link", { name: /use cases/i });
|
||||
await userEvent.hover(useCasesLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const learnLink = canvas.getByRole("link", { name: /learn/i });
|
||||
await userEvent.hover(learnLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const aboutLink = canvas.getByRole("link", { name: /about/i });
|
||||
await userEvent.hover(aboutLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
|
||||
await step("Hover over social media links", async () => {
|
||||
const blueskyLink = canvas.getByRole("link", {
|
||||
name: /follow us on bluesky/i,
|
||||
});
|
||||
await userEvent.hover(blueskyLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
|
||||
const gitlabLink = canvas.getByRole("link", {
|
||||
name: /follow us on gitlab/i,
|
||||
});
|
||||
await userEvent.hover(gitlabLink);
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// Story for testing with long content above
|
||||
export const WithLongContent = {
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Footer with Long Content Above
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This story tests how the footer looks with a lot of content above
|
||||
it. This helps ensure the footer maintains its visual integrity in
|
||||
real-world scenarios.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Array.from({ length: 20 }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg"
|
||||
>
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i + 1}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the footer integrates with
|
||||
page content. This block contains enough text to test layout
|
||||
behavior.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer with long content above to test visual integration and layout stability.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story for testing edge cases
|
||||
export const EdgeCases = {
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xs",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer at the smallest breakpoint to test edge case behavior and ensure no layout issues.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
import Footer from "../../app/components/navigation/Footer";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/Footer",
|
||||
component: Footer,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The main footer with responsive layout, branding section, navigation links, and legal information. Features different logo sizes and layout changes across breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to see how the footer adapts to different screen sizes. The layout changes from stacked to side-by-side and logo sizes adjust.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story to show the footer in a realistic page context
|
||||
export const InPageContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the footer looks in a realistic page context.
|
||||
The footer maintains its responsive behavior while providing
|
||||
navigation and branding information.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg"
|
||||
>
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the footer integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The footer integrated into a full page layout to show how it works in context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,247 @@
|
||||
import Header from "../../app/components/navigation/Header";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/Header/Responsive",
|
||||
component: Header,
|
||||
parameters: {
|
||||
// Chromatic configuration for responsive testing
|
||||
chromatic: {
|
||||
viewports: [320, 360, 480, 640, 768, 1024, 1280, 1440, 1920],
|
||||
// Capture screenshots at each breakpoint
|
||||
delay: 200, // Increased delay to ensure layout is stable
|
||||
// Capture both light and dark themes if available
|
||||
modes: {
|
||||
light: {},
|
||||
dark: {
|
||||
// This will be used if dark mode is implemented
|
||||
colorScheme: "dark",
|
||||
},
|
||||
},
|
||||
},
|
||||
// Storybook viewport configuration
|
||||
viewport: {
|
||||
viewports: {
|
||||
xs: {
|
||||
name: "Extra Small (xs)",
|
||||
styles: {
|
||||
width: "360px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
sm: {
|
||||
name: "Small (sm)",
|
||||
styles: {
|
||||
width: "640px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
md: {
|
||||
name: "Medium (md)",
|
||||
styles: {
|
||||
width: "768px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
lg: {
|
||||
name: "Large (lg)",
|
||||
styles: {
|
||||
width: "1024px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
xl: {
|
||||
name: "Extra Large (xl)",
|
||||
styles: {
|
||||
width: "1280px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
xxl: {
|
||||
name: "2XL (xxl)",
|
||||
styles: {
|
||||
width: "1440px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
full: {
|
||||
name: "Full HD (full)",
|
||||
styles: {
|
||||
width: "1920px",
|
||||
height: "700px",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
onToggle: { action: "toggled" },
|
||||
},
|
||||
};
|
||||
|
||||
// Default story - will be captured at all viewports by Chromatic
|
||||
export const Default = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header component at different breakpoints. Chromatic will capture screenshots at 360px, 640px, 768px, 1024px, and 1280px viewport widths to test responsive behavior.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story for each breakpoint to make testing easier
|
||||
export const ExtraSmall = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xs",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header at extra small breakpoint (360px). Navigation items are moved to the right section.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "sm",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header at small breakpoint (640px). All navigation items are grouped together in the center.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Medium = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "md",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header at medium breakpoint (768px). Navigation items are in the center, login and create rule buttons on the right.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "lg",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header at large breakpoint (1024px). Full navigation layout with larger elements.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ExtraLarge = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xl",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header at extra large breakpoint (1280px). Maximum size layout with largest elements.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story for testing with long content
|
||||
export const WithLongContent = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<Header onToggle={() => console.log("Navigation toggled")} />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Header with Long Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This story tests how the header looks with a lot of content below
|
||||
it. This helps ensure the header maintains its visual integrity in
|
||||
real-world scenarios.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{Array.from({ length: 12 }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg"
|
||||
>
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i + 1}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the header integrates with
|
||||
page content. This block contains enough text to test layout
|
||||
behavior.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header with long content below to test visual integration and layout stability.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story for testing edge cases
|
||||
export const EdgeCases = {
|
||||
args: {
|
||||
onToggle: () => console.log("Navigation toggled"),
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: "xs",
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header at the smallest breakpoint to test edge case behavior and ensure no layout issues.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
import Header from "../../app/components/navigation/Header";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/Header",
|
||||
component: Header,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The main navigation header with responsive behavior across different breakpoints. Features sticky positioning and active state highlighting for current page navigation.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story to show the header in a realistic page context
|
||||
export const InPageContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<Header />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the header looks in a realistic page context.
|
||||
The header maintains its responsive behavior while providing
|
||||
navigation for the page content.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg"
|
||||
>
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the header integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The header integrated into a full page layout to show how it works in context.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import HeaderTab from "../../app/components/navigation/HeaderTab";
|
||||
import Logo from "../../app/components/icons/Logo";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/HeaderTab",
|
||||
component: HeaderTab,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
stretch: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the tab should stretch to fill available space",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
stretch: false,
|
||||
},
|
||||
render: (args) => (
|
||||
<HeaderTab {...args}>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</HeaderTab>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
import HomeHeader from "../../app/components/navigation/HomeHeader";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/HomeHeader",
|
||||
component: HomeHeader,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"The home page header with transparent background, HeaderTab wrapper, and responsive behavior. Features active state highlighting for current page navigation.",
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Use the Viewport toolbar to see how the home header adapts to different screen sizes. The header has a transparent background and uses HeaderTab for the left section.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Story to show the home header in a realistic home page context
|
||||
export const InHomePageContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)]">
|
||||
<HomeHeader />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">
|
||||
Welcome to CommunityRule
|
||||
</h1>
|
||||
<p className="text-xl text-[var(--color-content-default-secondary)] mb-8">
|
||||
This demonstrates how the home header looks in a realistic home page
|
||||
context. The header maintains its transparent background and
|
||||
responsive behavior.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg border border-[var(--border-color-default-tertiary)]"
|
||||
>
|
||||
<h3 className="text-white font-semibold mb-3">Feature {i}</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)]">
|
||||
This is example content to show how the home header integrates
|
||||
with home page content.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"The home header integrated into a full home page layout with gradient background to show the transparent header effect.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,92 @@
|
||||
import MenuBar from "../../app/components/navigation/MenuBar";
|
||||
import MenuBarItem from "../../app/components/navigation/MenuBarItem";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/MenuBar",
|
||||
component: MenuBar,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "default", "medium", "large"],
|
||||
description: "The size of the menu bar and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
size: "default",
|
||||
},
|
||||
render: (args) => (
|
||||
<MenuBar {...args}>
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
),
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XSmall Size</h3>
|
||||
<MenuBar size="xsmall">
|
||||
<MenuBarItem size="xsmall">Home</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">About</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Size</h3>
|
||||
<MenuBar size="default">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<MenuBar size="medium">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<MenuBar size="large">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the menu bar with consistent spacing and layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,184 @@
|
||||
import MenuBarItem from "../../app/components/navigation/MenuBarItem";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/MenuBarItem",
|
||||
component: MenuBarItem,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "home"],
|
||||
description: "The visual style variant of the menu item",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"xsmall",
|
||||
"xsmallUseCases",
|
||||
"homeMd",
|
||||
"homeUseCases",
|
||||
"large",
|
||||
"largeUseCases",
|
||||
"homeXlarge",
|
||||
"xlarge",
|
||||
],
|
||||
description: "The size of the menu item",
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
description: "Whether the menu item is disabled",
|
||||
},
|
||||
href: {
|
||||
control: { type: "text" },
|
||||
description: "The link destination",
|
||||
},
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
},
|
||||
};
|
||||
|
||||
export const Variants = {
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} variant="default">
|
||||
Default
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} variant="home">
|
||||
Home
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
variant: "default",
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const States = {
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
variant: "default",
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args}>Normal</MenuBarItem>
|
||||
<MenuBarItem {...args} disabled>
|
||||
Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the menu item component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AllVariants = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="xsmall">XSmall</MenuBarItem>
|
||||
<MenuBarItem size="large">Large</MenuBarItem>
|
||||
<MenuBarItem size="xlarge">XLarge</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem variant="home" size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="large" disabled>
|
||||
Default Disabled
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large" disabled>
|
||||
Home Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Complete overview of all menu item variants, sizes, and states.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user