adilallo
76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import RuleStack from "../../app/components/sections/RuleStack";
|
|
import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
|
|
|
|
function buildStoryTemplatesPayload() {
|
|
return GOVERNANCE_TEMPLATE_CATALOG.map((c, i) => ({
|
|
id: `story-${c.slug}`,
|
|
slug: c.slug,
|
|
title: c.title,
|
|
category: "Governance pattern",
|
|
description: c.description,
|
|
body: { sections: [] },
|
|
sortOrder: i,
|
|
featured: i < 4,
|
|
}));
|
|
}
|
|
|
|
function withMockTemplatesApi(Story) {
|
|
React.useLayoutEffect(() => {
|
|
const prev = global.fetch;
|
|
global.fetch = async (input, init) => {
|
|
const url = typeof input === "string" ? input : input.url;
|
|
if (String(url).includes("/api/templates")) {
|
|
return new Response(
|
|
JSON.stringify({ templates: buildStoryTemplatesPayload() }),
|
|
{ status: 200, headers: { "Content-Type": "application/json" } },
|
|
);
|
|
}
|
|
return prev(input, init);
|
|
};
|
|
return () => {
|
|
global.fetch = prev;
|
|
};
|
|
}, []);
|
|
return <Story />;
|
|
}
|
|
|
|
export default {
|
|
title: "Components/Sections/RuleStack",
|
|
component: RuleStack,
|
|
decorators: [withMockTemplatesApi],
|
|
parameters: {
|
|
layout: "fullscreen",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"A complete template library component that displays governance patterns in a responsive grid layout. Composes **`type/SectionHeader`** (multi-line variant), interactive **`Rule`** cards, and a call-to-action button. Features comprehensive accessibility, analytics tracking, and responsive design across all breakpoints.\n\n" +
|
|
"**Testing Scenarios:**\n" +
|
|
"- **Responsive Testing**: Resize browser window to test layout adaptation from single column on mobile to 2x2 grid on larger screens\n" +
|
|
"- **Interactive Testing**: Hover over cards to see effects, use Tab to navigate between cards, and click to see analytics events in console\n" +
|
|
"- **Accessibility Testing**: Use screen readers to test ARIA labels, keyboard navigation to move between cards, and verify focus indicators\n" +
|
|
"- **Custom Styling**: Add className prop to customize background or other styling",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: { type: "text" },
|
|
description: "Additional CSS classes for custom styling",
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
export const Default = {
|
|
args: {},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
"The complete RuleStack component with all four governance templates, responsive grid layout, and interactive features. Test hover states, keyboard navigation, and responsive behavior across different screen sizes.",
|
|
},
|
|
},
|
|
},
|
|
};
|