Menu Story Fix

brainstormforce · Sep 27, 2024 · fe04036 · fe04036
1 parent 4d1c048
commit fe04036
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 117 deletions.
diff --git a/src/components/menu-item/menu-item.stories.js b/src/components/menu-item/menu-item.stories.js
diff --git a/src/components/menu-item/menu.stories.js b/src/components/menu-item/menu.stories.js
@@ -1,9 +1,8 @@
 import Menu from './menu-item.jsx';
-import { CreditCard,
-	Store, PenTool, ShoppingBag, ShoppingCart, Truck, MousePointer, ChartNoAxesColumnIncreasing, Layers, CloudUpload, Bell } from 'lucide-react';
+import { Store, PenTool, ShoppingBag, ShoppingCart, Truck, CreditCard, MousePointer, ChartNoAxesColumnIncreasing, Layers, CloudUpload, Bell } from 'lucide-react';
 
 export default {
-	title: 'Molecules/Menu/Menu',
+	title: 'Molecules/Menu',
 	component: Menu,
 	parameters: {
 		layout: 'centered',
@@ -19,65 +18,84 @@ export default {
 				defaultValue: { summary: 'md' },
 			},
 		},
+		menuItemActive: {
+			description: 'Controls if the Menu Item is active. (This will apply to "Store Settings" item only for demo)',
+			control: { type: 'boolean' },
+		},
+		menuItemDisabled: {
+			description: 'Disables the Menu Item. (This will apply to "Store Settings" item only for demo)',
+			control: { type: 'boolean' },
+		},
+		menuItemContent: {
+			description: 'Content inside the Menu Item',
+			control: { type: 'text' },
+		},
 	},
 };
 
-export const MenuSidebar = {
-	render: ( args ) => (
-		<Menu size={ args.size }>
-			<Menu.List heading="Store" open={ true } arrow={ true }>
-				<Menu.Item>
-					<Store />
-					<div>Store Settings</div>
-				</Menu.Item>
-				<Menu.Item disabled>
-					<PenTool />
-					<div>Design & Branding</div>
-				</Menu.Item>
-			</Menu.List>
-			<Menu.List heading="Orders & Sales" open={ true } arrow={ true }>
-				<Menu.Item>
-					<ShoppingBag />
-					<div>Orders & Receipts</div>
-				</Menu.Item>
-				<Menu.Item active={ true }>
-					<ShoppingCart />
-					<div>Abandoned Checkout</div>
-				</Menu.Item>
-				<Menu.Item>
-					<Truck />
-					<div>Shipping</div>
-				</Menu.Item>
-				<Menu.Item>
-					<CreditCard />
-					<div>Payment Processors</div>
-				</Menu.Item>
-			</Menu.List>
-			<Menu.Separator />
-			<Menu.List heading="Customers" open={ true } arrow={ true }>
-				<Menu.Item>
-					<MousePointer />
-					<div>Affiliates</div>
-				</Menu.Item>
-				<Menu.Item>
-					<ChartNoAxesColumnIncreasing />
-					<div>Subscriptions Saver</div>
-				</Menu.Item>
-			</Menu.List>
-			<Menu.List heading="Others" open={ true } arrow={ true }>
-				<Menu.Item>
-					<Layers />
-					<div>Data Export</div>
-				</Menu.Item>
-				<Menu.Item>
-					<CloudUpload />
-					<div>Connection</div>
-				</Menu.Item>
-				<Menu.Item>
-					<Bell />
-					<div>Notification</div>
-				</Menu.Item>
-			</Menu.List>
-		</Menu>
-	),
+const Template = ( args ) => (
+	<Menu size={ args.size }>
+		<Menu.List heading="Store" open={ true } arrow={ true }>
+			<Menu.Item active={ args.menuItemActive } disabled={ args.menuItemDisabled }>
+				<Store />
+				<div>{ args.menuItemContent || 'Store Settings' }</div>
+			</Menu.Item>
+			<Menu.Item disabled>
+				<PenTool />
+				<div>Design & Branding</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.List heading="Orders & Sales" open={ true } arrow={ true }>
+			<Menu.Item>
+				<ShoppingBag />
+				<div>Orders & Receipts</div>
+			</Menu.Item>
+			<Menu.Item>
+				<ShoppingCart />
+				<div>Abandoned Checkout</div>
+			</Menu.Item>
+			<Menu.Item>
+				<Truck />
+				<div>Shipping</div>
+			</Menu.Item>
+			<Menu.Item>
+				<CreditCard />
+				<div>Payment Processors</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.Separator />
+		<Menu.List heading="Customers" open={ true } arrow={ true }>
+			<Menu.Item>
+				<MousePointer />
+				<div>Affiliates</div>
+			</Menu.Item>
+			<Menu.Item>
+				<ChartNoAxesColumnIncreasing />
+				<div>Subscriptions Saver</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.List heading="Others" open={ true } arrow={ true }>
+			<Menu.Item>
+				<Layers />
+				<div>Data Export</div>
+			</Menu.Item>
+			<Menu.Item>
+				<CloudUpload />
+				<div>Connection</div>
+			</Menu.Item>
+			<Menu.Item>
+				<Bell />
+				<div>Notification</div>
+			</Menu.Item>
+		</Menu.List>
+	</Menu>
+);
+
+export const CombinedMenu = Template.bind( {} );
+
+CombinedMenu.args = {
+	size: 'md',
+	menuItemActive: false,
+	menuItemDisabled: false,
+	menuItemContent: 'Store Settings',
 };