Merge pull request #69 from brainstormforce/stories/MenuItem/Skeleton

SUR-288 SUR-296 SUR-302 Add stories to storybook

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '37a62a0e88dc6a48352f');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'fdf7a146fb9b70dc92fd');

src/components/badge/badge.stories.js

@@ -50,7 +50,7 @@ export default {
 			},
 		},
 		closable: {
-			name: 'Clasable',
+			name: 'Closable',
 			description: 'Defines if the badge is closable.',
 			control: 'boolean',
 			table: {

src/components/menu-item/menu-item.jsx

@@ -92,7 +92,7 @@ const MenuList = ( {
 						animate="open"
 						exit="closed"
 						transition={ { duration: 0.3, ease: 'easeInOut' } }
-						className="overflow-hidden flex gap-0.5 flex-col m-0 bg-white rounded-md"
+						className="overflow-hidden flex gap-0.5 flex-col m-0 bg-white rounded-md p-0"
 					>
 						{ children }
 					</motion.ul>

src/components/menu-item/menu-item.stories.js

@@ -0,0 +1,56 @@
+import Menu from './menu-item.jsx';
+import { Store } from 'lucide-react';
+
+export default {
+	title: 'Molecules/Menu Item',
+	component: Menu.Item,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		active: {
+			description: 'Determines if the Menu Item is in an active state',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		disabled: {
+			description: 'Disables the Menu Item if set to true',
+			control: { type: 'boolean' },
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		onClick: {
+			action: 'clicked',
+			description: 'Callback when Menu Item is clicked',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		children: {
+			description: 'Content inside the Menu Item',
+			table: {
+				type: { summary: 'ReactNode' },
+			},
+		},
+	},
+};
+
+export const MenuItem = ( args ) => (
+	<Menu>
+		<Menu.Item { ...args }>
+			<Store />
+			<div>Store Settings</div>
+		</Menu.Item>
+	</Menu>
+);
+
+MenuItem.args = {
+	active: false,
+	disabled: false,
+};

src/components/menu-item/menu.stories.js

@@ -0,0 +1,83 @@
+import Menu from './menu-item.jsx';
+import { CreditCard,
+	Store, PenTool, ShoppingBag, ShoppingCart, Truck, MousePointer, ChartNoAxesColumnIncreasing, Layers, CloudUpload, Bell } from 'lucide-react';
+
+export default {
+	title: 'Molecules/Menu',
+	component: Menu,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		size: {
+			description: 'Specifies the size of the Menu Item components inside Menu',
+			control: { type: 'select' },
+			options: [ 'sm', 'md' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'md' },
+			},
+		},
+	},
+};
+
+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>
+	),
+};

src/components/skeleton/skeleton.jsx

@@ -11,8 +11,13 @@ const Skeleton = ( {
 		rectangular: 'rounded-md bg-gray-200',
 	}?.[ variant ];
 
+	const defaultWidth = {
+		circular: 'size-10',
+		rectangular: 'w-96 h-3',
+	}?.[ variant ];
+
 	return (
-		<div className={ cn( variantClasses, 'animate-pulse', className ) } { ...props }></div>
+		<div className={ cn( variantClasses, 'animate-pulse', defaultWidth, className ) } { ...props }></div>
 	);
 };
 

src/components/skeleton/skeleton.stories.js

@@ -0,0 +1,42 @@
+import Skeleton from './skeleton.jsx';
+
+export default {
+	title: 'Atoms/Skeleton',
+	component: Skeleton,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		variant: {
+			name: 'Variant',
+			description: 'Defines the style variant of the skeleton.',
+			control: 'select',
+			options: [ 'rectangular', 'circular' ],
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'rectangular' },
+			},
+		},
+		className: {
+			description: 'Allows you to pass custom classes to control the size and styles',
+			control: 'text',
+		},
+	},
+};
+
+export const Rectangular = ( args ) => (
+	<Skeleton { ...args } />
+);
+
+Rectangular.args = {
+	variant: 'rectangular',
+};
+
+export const Circular = ( args ) => (
+	<Skeleton { ...args } />
+);
+
+Circular.args = {
+	variant: 'circular',
+};