Component cleanup
This commit is contained in:
adilallo
@@ -0,0 +1,57 @@
|
||||
import CreateFlowFooter from "../../app/components/navigation/CreateFlowFooter";
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/CreateFlowFooter",
|
||||
component: CreateFlowFooter,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Footer component for the create rule flow with progress bar and buttons.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
progressBar: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the progress bar",
|
||||
},
|
||||
secondButton: {
|
||||
control: false,
|
||||
description:
|
||||
"The second button (typically Next) to display on the right side",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
progressBar: true,
|
||||
secondButton: (
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
Next
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutProgressBar = {
|
||||
args: {
|
||||
progressBar: false,
|
||||
secondButton: (
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
Next
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutSecondButton = {
|
||||
args: {
|
||||
progressBar: true,
|
||||
secondButton: undefined,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,66 @@
|
||||
import CreateFlowTopNav from "../../app/components/navigation/CreateFlowTopNav";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/CreateFlowTopNav",
|
||||
component: CreateFlowTopNav,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Top navigation bar for the create rule flow. Includes logo and action buttons (Share, Export, Edit, Exit/Save & Exit).",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
hasShare: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Share button",
|
||||
},
|
||||
hasExport: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Export button",
|
||||
},
|
||||
hasEdit: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Edit button",
|
||||
},
|
||||
saveDraftOnExit: {
|
||||
control: "boolean",
|
||||
description:
|
||||
"After user input (or completed step), use Save & Exit and pass saveDraft: true to onExit",
|
||||
},
|
||||
onShare: { action: "share clicked" },
|
||||
onExport: { action: "export clicked" },
|
||||
onEdit: { action: "edit clicked" },
|
||||
onExit: { action: "exit clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
hasShare: false,
|
||||
hasExport: false,
|
||||
hasEdit: false,
|
||||
saveDraftOnExit: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const AllButtons = {
|
||||
args: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
saveDraftOnExit: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const SaveDraftOnExit = {
|
||||
args: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
saveDraftOnExit: true,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,101 @@
|
||||
import Menu from "../../app/components/navigation/Menu";
|
||||
import MenuItem from "../../app/components/navigation/MenuItem";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/Menu",
|
||||
component: Menu,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Navigation Menu (`role=\"menubar\"`) groups MenuItem children. Consistent spacing and layout for horizontal nav clusters with multiple size variants.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["X Small", "Small", "Medium", "Large", "X Large"],
|
||||
description: "The size of the menu and its children",
|
||||
},
|
||||
className: {
|
||||
control: { type: "text" },
|
||||
description: "Additional CSS classes",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
size: "Small",
|
||||
},
|
||||
render: (args) => (
|
||||
<Menu {...args}>
|
||||
<MenuItem size="Large">Home</MenuItem>
|
||||
<MenuItem size="Large">About</MenuItem>
|
||||
<MenuItem size="Large">Contact</MenuItem>
|
||||
</Menu>
|
||||
),
|
||||
};
|
||||
|
||||
export const Sizes = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">X Small Size</h3>
|
||||
<Menu size="X Small">
|
||||
<MenuItem size="X Small">Home</MenuItem>
|
||||
<MenuItem size="X Small">About</MenuItem>
|
||||
<MenuItem size="X Small">Contact</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<Menu size="Small">
|
||||
<MenuItem size="Large">Home</MenuItem>
|
||||
<MenuItem size="Large">About</MenuItem>
|
||||
<MenuItem size="Large">Contact</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<Menu size="Medium">
|
||||
<MenuItem size="Large">Home</MenuItem>
|
||||
<MenuItem size="Large">About</MenuItem>
|
||||
<MenuItem size="Large">Contact</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<Menu size="Large">
|
||||
<MenuItem size="Large">Home</MenuItem>
|
||||
<MenuItem size="Large">About</MenuItem>
|
||||
<MenuItem size="Large">Contact</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">X Large Size</h3>
|
||||
<Menu size="X Large">
|
||||
<MenuItem size="X Large">Home</MenuItem>
|
||||
<MenuItem size="X Large">About</MenuItem>
|
||||
<MenuItem size="X Large">Contact</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the menu with consistent spacing and layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,101 +0,0 @@
|
||||
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: ["X Small", "Small", "Medium", "Large", "X 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: "Small",
|
||||
},
|
||||
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">X Small Size</h3>
|
||||
<MenuBar size="X Small">
|
||||
<MenuBarItem size="X Small">Home</MenuBarItem>
|
||||
<MenuBarItem size="X Small">About</MenuBarItem>
|
||||
<MenuBarItem size="X Small">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<MenuBar size="Small">
|
||||
<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>
|
||||
<h3 className="text-white font-semibold mb-3">X Large Size</h3>
|
||||
<MenuBar size="X Large">
|
||||
<MenuBarItem size="X Large">Home</MenuBarItem>
|
||||
<MenuBarItem size="X Large">About</MenuBarItem>
|
||||
<MenuBarItem size="X Large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants of the menu bar with consistent spacing and layout.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
+37
-37
@@ -1,14 +1,14 @@
|
||||
import MenuBarItem from "../../app/components/navigation/MenuBarItem";
|
||||
import MenuItem from "../../app/components/navigation/MenuItem";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/MenuBarItem",
|
||||
component: MenuBarItem,
|
||||
title: "Components/Navigation/MenuItem",
|
||||
component: MenuItem,
|
||||
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.",
|
||||
"A navigation menu item with multiple variants, sizes, and states. Renders as a link or button (or disabled span) with accessibility support. Use Tab to test focus indicators.",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -51,12 +51,12 @@ export const Modes = {
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} mode="default">
|
||||
<MenuItem {...args} mode="default">
|
||||
Default
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} mode="inverse">
|
||||
</MenuItem>
|
||||
<MenuItem {...args} mode="inverse">
|
||||
Inverse
|
||||
</MenuBarItem>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@@ -77,21 +77,21 @@ export const Sizes = {
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} size="X Small">
|
||||
<MenuItem {...args} size="X Small">
|
||||
X Small
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="Small">
|
||||
</MenuItem>
|
||||
<MenuItem {...args} size="Small">
|
||||
Small
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="Medium">
|
||||
</MenuItem>
|
||||
<MenuItem {...args} size="Medium">
|
||||
Medium
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="Large">
|
||||
</MenuItem>
|
||||
<MenuItem {...args} size="Large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="X Large">
|
||||
</MenuItem>
|
||||
<MenuItem {...args} size="X Large">
|
||||
X Large
|
||||
</MenuBarItem>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@@ -113,10 +113,10 @@ export const States = {
|
||||
render: (args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args}>Normal</MenuBarItem>
|
||||
<MenuBarItem {...args} disabled>
|
||||
<MenuItem {...args}>Normal</MenuItem>
|
||||
<MenuItem {...args} disabled>
|
||||
Disabled
|
||||
</MenuBarItem>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@@ -136,42 +136,42 @@ export const AllModes = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Mode</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="X Small" mode="default">
|
||||
<MenuItem size="X Small" mode="default">
|
||||
X Small
|
||||
</MenuBarItem>
|
||||
<MenuBarItem size="Large" mode="default">
|
||||
</MenuItem>
|
||||
<MenuItem size="Large" mode="default">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem size="X Large" mode="default">
|
||||
</MenuItem>
|
||||
<MenuItem size="X Large" mode="default">
|
||||
X Large
|
||||
</MenuBarItem>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Inverse Mode</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem mode="inverse" size="X Small">
|
||||
<MenuItem mode="inverse" size="X Small">
|
||||
X Small
|
||||
</MenuBarItem>
|
||||
<MenuBarItem mode="inverse" size="Large">
|
||||
</MenuItem>
|
||||
<MenuItem mode="inverse" size="Large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem mode="inverse" size="X Large">
|
||||
</MenuItem>
|
||||
<MenuItem mode="inverse" size="X Large">
|
||||
X Large
|
||||
</MenuBarItem>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="Large" mode="default" disabled>
|
||||
<MenuItem size="Large" mode="default" disabled>
|
||||
Default Disabled
|
||||
</MenuBarItem>
|
||||
<MenuBarItem mode="inverse" size="Large" disabled>
|
||||
</MenuItem>
|
||||
<MenuItem mode="inverse" size="Large" disabled>
|
||||
Inverse Disabled
|
||||
</MenuBarItem>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,8 +1,8 @@
|
||||
import TopNav from "../../app/components/navigation/TopNav";
|
||||
import Top from "../../app/components/navigation/Top";
|
||||
|
||||
export default {
|
||||
title: "Components/Navigation/TopNav",
|
||||
component: TopNav,
|
||||
title: "Components/Navigation/Top",
|
||||
component: Top,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
@@ -117,7 +117,7 @@ export const StandardInPageContext = {
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<TopNav {...args} />
|
||||
<Top {...args} />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
@@ -168,7 +168,7 @@ export const HomePageInContext = {
|
||||
},
|
||||
render: (args) => (
|
||||
<div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)]">
|
||||
<TopNav {...args} />
|
||||
<Top {...args} />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">
|
||||
Reference in New Issue
Block a user