Skip to content

Commit

Permalink
docs: Menu storybook snippets
Browse files Browse the repository at this point in the history
  • Loading branch information
@rivka-ungar
rivka-ungar committed Feb 26, 2025
1 parent d7fbc21 commit cfe6fdf
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 90 deletions.
9 changes: 5 additions & 4 deletions packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Menu from "../../../Menu/Menu/Menu";
import MenuItem from "../../../Menu/MenuItem/MenuItem";
import Search from "../../../Search/Search";
import { Calendar, Filter, Wand } from "@vibe/icons";
import styles from "./Menu.stories.module.scss";
import React from "react";

export const TipCombobox = () => (
Expand All @@ -29,7 +28,9 @@ export const ComponentRuleSimpleActions = () => (

export const ComponentRuleWithSearch = () => (
<DialogContentContainer>
<Search size="small" className={styles["component-rule-search"]} />
<div style={{ marginBottom: "var(--sb-spacing-small)" }}>
<Search size="small" />
</div>
<Menu>
<MenuItem title="Item 1" icon={Calendar} />
<MenuItem title="Item 2" icon={Wand} />
Expand All @@ -48,8 +49,8 @@ export const ComponentRuleDefaultWidth = () => (
);

export const ComponentRuleLargeWidth = () => (
<DialogContentContainer className={styles["component-rule-large-dialog"]}>
<Menu className={styles["component-rule-large-menu"]}>
<DialogContentContainer style={{ width: "348px" }}>
<Menu>
<MenuItem title="Item 1" icon={Calendar} />
<MenuItem title="Item 2" icon={Filter} />
</Menu>
Expand Down
16 changes: 0 additions & 16 deletions packages/core/src/components/Menu/Menu/__stories__/Menu.stories.module.scss
View file

This file was deleted.

147 changes: 77 additions & 70 deletions packages/core/src/components/Menu/Menu/__stories__/Menu.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from "react";
import { Activity, Code, Delete, Email, Emoji, Favorite, Feedback, Info, Invite, Settings } from "@vibe/icons";
import { DialogContentContainer, Menu, MenuDivider, MenuGridItem, MenuItem, MenuTitle } from "../../..";
import { DialogContentContainer, Flex, Menu, MenuDivider, MenuGridItem, MenuItem, MenuTitle } from "../../..";
import { DummyNavigableGrid } from "../../../GridKeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.helpers";
import { menuWithTwoDepthsSuite } from "../__tests__/Menu.interactions";
import styles from "./Menu.stories.module.scss";
import { MenuProps } from "../../..";

export default {
Expand Down Expand Up @@ -34,33 +33,35 @@ export const Overview = {

export const Sizes = {
render: () => [
<DialogContentContainer key="small">
<Menu size={Menu.sizes.SMALL}>
<MenuTitle caption="Small menu" />
<MenuDivider />
<MenuItem title="Menu item 1" />
<MenuItem title="Menu item 2" disabled />
<MenuItem title="Menu item 3" />
</Menu>
</DialogContentContainer>,
<DialogContentContainer key="md">
<Menu size={Menu.sizes.MEDIUM}>
<MenuTitle caption="Medium menu" />
<MenuDivider />
<MenuItem title="Menu item 1" />
<MenuItem title="Menu item 2" disabled />
<MenuItem title="Menu item 3" />
</Menu>
</DialogContentContainer>,
<DialogContentContainer key="lg">
<Menu size={Menu.sizes.LARGE}>
<MenuTitle caption="Large menu" />
<MenuDivider />
<MenuItem title="Menu item 1" />
<MenuItem title="Menu item 2" disabled />
<MenuItem title="Menu item 3" />
</Menu>
</DialogContentContainer>
<Flex gap="medium">
<DialogContentContainer key="small">
<Menu size={Menu.sizes.SMALL}>
<MenuTitle caption="Small menu" />
<MenuDivider />
<MenuItem title="Menu item 1" />
<MenuItem title="Menu item 2" disabled />
<MenuItem title="Menu item 3" />
</Menu>
</DialogContentContainer>
<DialogContentContainer key="md">
<Menu size={Menu.sizes.MEDIUM}>
<MenuTitle caption="Medium menu" />
<MenuDivider />
<MenuItem title="Menu item 1" />
<MenuItem title="Menu item 2" disabled />
<MenuItem title="Menu item 3" />
</Menu>
</DialogContentContainer>
<DialogContentContainer key="lg">
<Menu size={Menu.sizes.LARGE}>
<MenuTitle caption="Large menu" />
<MenuDivider />
<MenuItem title="Menu item 1" />
<MenuItem title="Menu item 2" disabled />
<MenuItem title="Menu item 3" />
</Menu>
</DialogContentContainer>
</Flex>
],
name: "Sizes",

Expand All @@ -71,39 +72,43 @@ export const Sizes = {

export const MenuWithIcons = {
render: () => (
<DialogContentContainer>
<Menu>
<MenuItem icon={Email} title="Send" />
<MenuItem icon={Delete} title="Delete" disabled />
<MenuItem icon={Info} title="More info" />
</Menu>
</DialogContentContainer>
<Flex>
<DialogContentContainer>
<Menu>
<MenuItem icon={Email} title="Send" />
<MenuItem icon={Delete} title="Delete" disabled />
<MenuItem icon={Info} title="More info" />
</Menu>
</DialogContentContainer>
</Flex>
),
name: "Menu with icons"
};

export const MenuWithSubMenu = {
render: () => (
<DialogContentContainer>
<Menu>
<MenuItem title="Menu item without sub menu" icon={Activity} />
<MenuItem title="With Sub menu" icon={Activity}>
<Menu>
<MenuItem icon={Email} title="Send" />
<MenuItem icon={Delete} title="Delete" disabled />
<MenuItem icon={Info} title="More info" />
</Menu>
</MenuItem>
<MenuItem title="Another item" icon={Settings} />
</Menu>
</DialogContentContainer>
<Flex>
<DialogContentContainer>
<Menu>
<MenuItem title="Menu item without sub menu" icon={Activity} />
<MenuItem title="With Sub menu" icon={Activity}>
<Menu>
<MenuItem icon={Email} title="Send" />
<MenuItem icon={Delete} title="Delete" disabled />
<MenuItem icon={Info} title="More info" />
</Menu>
</MenuItem>
<MenuItem title="Another item" icon={Settings} />
</Menu>
</DialogContentContainer>
</Flex>
),
name: "Menu with sub menu"
};

export const MenuWithGridItemsAndSubMenu = {
render: () => (
<div className={styles["menu-long-story-wrapper"]}>
<Flex align="start" style={{ height: "500px" }}>
<DialogContentContainer>
<Menu>
<MenuItem title="Menu item" icon={Favorite} />
Expand All @@ -130,32 +135,34 @@ export const MenuWithGridItemsAndSubMenu = {
<MenuItem title="Another item" icon={Settings} />
</Menu>
</DialogContentContainer>
</div>
</Flex>
),
name: "Menu with grid items and sub menu"
};

export const MenuWith2DepthSubMenu = {
render: () => (
<DialogContentContainer>
<Menu>
<MenuItem title="Menu item" icon={Favorite} />
<MenuItem title="With Sub menu" icon={Activity}>
<Menu>
<MenuItem icon={Emoji} title="Send" />
<MenuItem icon={Code} title="Sub Sub menu">
<Menu>
<MenuItem icon={Email} title="Sub sub item" />
<MenuItem icon={Invite} title="Another sub sub item" />
<MenuItem icon={Settings} title="More sub sub items" />
</Menu>
</MenuItem>
<MenuItem icon={Feedback} title="More info" />
</Menu>
</MenuItem>
<MenuItem title="Another item" icon={Settings} />
</Menu>
</DialogContentContainer>
<Flex>
<DialogContentContainer>
<Menu>
<MenuItem title="Menu item" icon={Favorite} />
<MenuItem title="With Sub menu" icon={Activity}>
<Menu>
<MenuItem icon={Emoji} title="Send" />
<MenuItem icon={Code} title="Sub Sub menu">
<Menu>
<MenuItem icon={Email} title="Sub sub item" />
<MenuItem icon={Invite} title="Another sub sub item" />
<MenuItem icon={Settings} title="More sub sub items" />
</Menu>
</MenuItem>
<MenuItem icon={Feedback} title="More info" />
</Menu>
</MenuItem>
<MenuItem title="Another item" icon={Settings} />
</Menu>
</DialogContentContainer>
</Flex>
),
name: "Menu with 2-depth sub menu",
play: menuWithTwoDepthsSuite
Expand Down

0 comments on commit cfe6fdf

Please sign in to comment.