Skip to content

Commit

Permalink
Merge pull request #94 from brainstormforce/stories_fixes
Browse files Browse the repository at this point in the history 
Menu Story Fix & Toaster Description
  • Loading branch information
@vrundakansara
vrundakansara authored Sep 27, 2024
2 parents 83af9a6 + fe04036 commit bc4a778
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 118 deletions.
56 changes: 0 additions & 56 deletions src/components/menu-item/menu-item.stories.js
View file

This file was deleted.

140 changes: 79 additions & 61 deletions src/components/menu-item/menu.stories.js
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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',
};
35 changes: 34 additions & 1 deletion src/components/toaster/toaster.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,53 @@ export default {
position: {
control: 'select',
options: [ 'top-right', 'top-left', 'bottom-right', 'bottom-left' ],
description: 'The position of the toast notification.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'top-right' },
},
},
design: {
control: 'select',
options: [ 'stack', 'inline' ],
description: 'The design layout of the toast notification.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'stack' },
},
},
theme: {
control: 'select',
options: [ 'light', 'dark' ],
description: 'The theme of the toast notification.',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'light' },
},
},
autoDismiss: {
control: 'boolean',
description: 'Whether the toast notification should automatically dismiss after a certain time.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' },
},
},
dismissAfter: {
control: { type: 'number', min: 1000, max: 10000, step: 500 },
description: 'The time in milliseconds after which the toast notification will be dismissed.',
table: {
type: { summary: 'number' },
defaultValue: { summary: '5000' },
},
},
className: {
control: 'text',
description: 'Additional CSS class names to apply to the toast notification.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
},
},
},
decorators: [
Expand All @@ -37,10 +70,10 @@ export default {
),
],
};

const Template = ( args ) => {
return (
<div>

<Toaster { ...args } key={ args.position } />
<div
style={ {
Expand Down

0 comments on commit bc4a778

Please sign in to comment.