Skip to content

Commit dc7b087

Browse files
SplinterSwordSplinterSword
committed
Added Menu Documentation
Signed-off-by: SplinterSword <[email protected]>
1 parent 6e9e21c commit dc7b087

File tree

5 files changed

+487
-36
lines changed

5 files changed

+487
-36
lines changed

‎src/components/SistentNavigation/content.js‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -75,52 +75,56 @@ export const content = [
7575
{ id: 54, link: "/projects/sistent/components/list/guidance", text: "List" },
7676
{ id: 55, link: "/projects/sistent/components/list/code", text: "List" },
7777

78-
{ id: 56, link: "/projects/sistent/components/modal", text: "Modal" },
79-
{ id: 57, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
80-
{ id: 58, link: "/projects/sistent/components/modal/code", text: "Modal" },
78+
{ id: 56, link: "/projects/sistent/components/menu", text: "Menu" },
79+
{ id: 57, link: "/projects/sistent/components/menu/guidance", text: "Menu" },
80+
{ id: 58, link: "/projects/sistent/components/menu/code", text: "Menu" },
8181

82-
{ id: 59, link: "/projects/sistent/components/pagination", text: "Pagination" },
83-
{ id: 60, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
84-
{ id: 61, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
82+
{ id: 59, link: "/projects/sistent/components/modal", text: "Modal" },
83+
{ id: 59, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
84+
{ id: 60, link: "/projects/sistent/components/modal/code", text: "Modal" },
8585

86-
{ id: 62, link: "/projects/sistent/components/paper", text: "Paper" },
87-
{ id: 63, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
88-
{ id: 64, link: "/projects/sistent/components/paper/code", text: "Paper" },
86+
{ id: 61, link: "/projects/sistent/components/pagination", text: "Pagination" },
87+
{ id: 62, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
88+
{ id: 63, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
8989

90-
{ id: 65, link: "/projects/sistent/components/popper", text: "Popper" },
91-
{ id: 66, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
92-
{ id: 67, link: "/projects/sistent/components/popper/code", text: "Popper" },
90+
{ id: 64, link: "/projects/sistent/components/paper", text: "Paper" },
91+
{ id: 65, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
92+
{ id: 66, link: "/projects/sistent/components/paper/code", text: "Paper" },
9393

94-
{ id: 68, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
95-
{ id: 69, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
96-
{ id: 70, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
94+
{ id: 67, link: "/projects/sistent/components/popper", text: "Popper" },
95+
{ id: 68, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
96+
{ id: 69, link: "/projects/sistent/components/popper/code", text: "Popper" },
9797

98-
{ id: 71, link: "/projects/sistent/components/select", text: "Select" },
99-
{ id: 72, link: "/projects/sistent/components/select/guidance", text: "Select" },
100-
{ id: 73, link: "/projects/sistent/components/select/code", text: "Select" },
98+
{ id: 70, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
99+
{ id: 78, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
100+
{ id: 79, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
101101

102-
{ id: 74, link: "/projects/sistent/components/switch", text: "Switch" },
103-
{ id: 75, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
104-
{ id: 76, link: "/projects/sistent/components/switch/code", text: "Switch" },
102+
{ id: 80, link: "/projects/sistent/components/select", text: "Select" },
103+
{ id: 81, link: "/projects/sistent/components/select/guidance", text: "Select" },
104+
{ id: 82, link: "/projects/sistent/components/select/code", text: "Select" },
105105

106-
{ id: 77, link: "/projects/sistent/components/tabs", text: "Tabs" },
107-
{ id: 78, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
108-
{ id: 79, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
106+
{ id: 83, link: "/projects/sistent/components/switch", text: "Switch" },
107+
{ id: 84, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
108+
{ id: 85, link: "/projects/sistent/components/switch/code", text: "Switch" },
109109

110-
{ id: 80, link: "/projects/sistent/components/text-field", text: "Text Field" },
111-
{ id: 81, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
112-
{ id: 82, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
110+
{ id: 86, link: "/projects/sistent/components/tabs", text: "Tabs" },
111+
{ id: 87, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
112+
{ id: 88, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
113113

114-
{ id: 83, link: "/projects/sistent/components/text-input", text: "Text Input" },
115-
{ id: 84, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
116-
{ id: 85, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
114+
{ id: 89, link: "/projects/sistent/components/text-field", text: "Text Field" },
115+
{ id: 90, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
116+
{ id: 91, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
117117

118-
{ id: 86, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
119-
{ id: 87, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
120-
{ id: 88, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
118+
{ id: 92, link: "/projects/sistent/components/text-input", text: "Text Input" },
119+
{ id: 93, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
120+
{ id: 94, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
121121

122-
{ id: 89, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
123-
{ id: 90, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
124-
{ id: 91, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
122+
{ id: 95, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
123+
{ id: 96, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
124+
{ id: 97, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
125+
126+
{ id: 95, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
127+
{ id: 96, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
128+
{ id: 97, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
125129

126130
];

‎src/sections/Projects/Sistent/components/content.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,13 @@ const componentsData = [
237237
url: "/projects/sistent/components/stepper",
238238
src: "/stepper",
239239
},
240+
{
241+
id: 32,
242+
name: "Menu",
243+
description: "Menu provides a way to display a list of options to the user.",
244+
url: "/projects/sistent/components/menu",
245+
src: "/menu",
246+
},
240247
];
241248

242249
module.exports = { componentsData };

‎src/sections/Projects/Sistent/components/menu/code.js‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentLayout } from "../../sistent-layout";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
8+
import { SistentThemeProvider, Menu, MenuItem, Button } from "@sistent/sistent";
9+
import { CodeBlock } from "../button/code-block";
10+
11+
const codes = [
12+
// Basic menu
13+
` <SistentThemeProvider>
14+
<Button variant="contained" onClick={handleOpen}>Open menu</Button>
15+
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
16+
<MenuItem onClick={handleClose}>Profile</MenuItem>
17+
<MenuItem onClick={handleClose}>My account</MenuItem>
18+
<MenuItem onClick={handleClose}>Logout</MenuItem>
19+
</Menu>
20+
</SistentThemeProvider>`,
21+
// Positioned menu
22+
` <SistentThemeProvider>
23+
<Button variant="outlined" onClick={handleOpen2}>Top-right menu</Button>
24+
<Menu
25+
anchorEl={anchorEl2}
26+
open={open2}
27+
onClose={handleClose2}
28+
anchorOrigin={{ vertical: "top", horizontal: "right" }}
29+
transformOrigin={{ vertical: "top", horizontal: "right" }}
30+
>
31+
<MenuItem onClick={handleClose2}>Settings</MenuItem>
32+
<MenuItem onClick={handleClose2}>Help</MenuItem>
33+
</Menu>
34+
</SistentThemeProvider>`,
35+
// Menu item states
36+
` <SistentThemeProvider>
37+
<Button variant="text" onClick={handleOpen3}>With states</Button>
38+
<Menu anchorEl={anchorEl3} open={open3} onClose={handleClose3}>
39+
<MenuItem onClick={handleClose3} selected>
40+
Selected
41+
</MenuItem>
42+
<MenuItem onClick={handleClose3} disabled>
43+
Disabled
44+
</MenuItem>
45+
<MenuItem onClick={handleClose3}>Regular</MenuItem>
46+
</Menu>
47+
</SistentThemeProvider>`,
48+
// Long menu with max height and auto focus item
49+
` <SistentThemeProvider>
50+
<Button variant="contained" onClick={handleOpen4}>Long menu</Button>
51+
<Menu
52+
anchorEl={anchorEl4}
53+
open={open4}
54+
onClose={handleClose4}
55+
MenuListProps={{ autoFocusItem: true }}
56+
PaperProps={{ style: { maxHeight: 240, width: 220 } }}
57+
>
58+
{["Profile","My account","Dashboard","Settings","Billing","Support","Sign out"].map((label) => (
59+
<MenuItem key={label} onClick={handleClose4}>{label}</MenuItem>
60+
))}
61+
</Menu>
62+
</SistentThemeProvider>`,
63+
];
64+
65+
const MenuCode = () => {
66+
const location = useLocation();
67+
const { isDark } = useStyledDarkMode();
68+
69+
// Example 1
70+
const [anchorEl, setAnchorEl] = React.useState(null);
71+
const open = Boolean(anchorEl);
72+
const handleOpen = (e) => setAnchorEl(e.currentTarget);
73+
const handleClose = () => setAnchorEl(null);
74+
75+
// Example 2 (positioned)
76+
const [anchorEl2, setAnchorEl2] = React.useState(null);
77+
const open2 = Boolean(anchorEl2);
78+
const handleOpen2 = (e) => setAnchorEl2(e.currentTarget);
79+
const handleClose2 = () => setAnchorEl2(null);
80+
81+
// Example 3 (states)
82+
const [anchorEl3, setAnchorEl3] = React.useState(null);
83+
const open3 = Boolean(anchorEl3);
84+
const handleOpen3 = (e) => setAnchorEl3(e.currentTarget);
85+
const handleClose3 = () => setAnchorEl3(null);
86+
87+
// Example 4 (long)
88+
const [anchorEl4, setAnchorEl4] = React.useState(null);
89+
const open4 = Boolean(anchorEl4);
90+
const handleOpen4 = (e) => setAnchorEl4(e.currentTarget);
91+
const handleClose4 = () => setAnchorEl4(null);
92+
93+
return (
94+
<SistentLayout title="Menu">
95+
<div className="content">
96+
<a id="Identity">
97+
<h2>Menu</h2>
98+
</a>
99+
<p>
100+
The Menu component displays a list of choices on a temporary surface anchored to a trigger.
101+
</p>
102+
103+
<div className="filterBtns">
104+
<TabButton
105+
className={
106+
location.pathname === "/projects/sistent/components/menu" ? "active" : ""
107+
}
108+
onClick={() => navigate("/projects/sistent/components/menu")}
109+
title="Overview"
110+
/>
111+
<TabButton
112+
className={
113+
location.pathname === "/projects/sistent/components/menu/guidance" ? "active" : ""
114+
}
115+
onClick={() => navigate("/projects/sistent/components/menu/guidance")}
116+
title="Guidance"
117+
/>
118+
<TabButton
119+
className={
120+
location.pathname === "/projects/sistent/components/menu/code" ? "active" : ""
121+
}
122+
onClick={() => navigate("/projects/sistent/components/menu/code")}
123+
title="Code"
124+
/>
125+
</div>
126+
127+
<div className="main-content">
128+
{/* Basic Menu */}
129+
<a id="Basic Menu">
130+
<h3>Basic Menu</h3>
131+
</a>
132+
<p>Attach the menu to a trigger using <code>anchorEl</code> and control its visibility with <code>open</code>.</p>
133+
<div className="showcase">
134+
<div className="items">
135+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
136+
<Button variant="contained" onClick={handleOpen}>Open menu</Button>
137+
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
138+
<MenuItem onClick={handleClose}>Profile</MenuItem>
139+
<MenuItem onClick={handleClose}>My account</MenuItem>
140+
<MenuItem onClick={handleClose}>Logout</MenuItem>
141+
</Menu>
142+
</SistentThemeProvider>
143+
</div>
144+
<CodeBlock name="basic-menu" code={codes[0]} />
145+
</div>
146+
147+
{/* Positioned Menu */}
148+
<a id="Positioned Menu">
149+
<h3>Positioned Menu</h3>
150+
</a>
151+
<p>Control menu placement with <code>anchorOrigin</code> and <code>transformOrigin</code>.</p>
152+
<div className="showcase">
153+
<div className="items">
154+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
155+
<Button variant="outlined" onClick={handleOpen2}>Top-right menu</Button>
156+
<Menu
157+
anchorEl={anchorEl2}
158+
open={open2}
159+
onClose={handleClose2}
160+
anchorOrigin={{ vertical: "top", horizontal: "right" }}
161+
transformOrigin={{ vertical: "top", horizontal: "right" }}
162+
>
163+
<MenuItem onClick={handleClose2}>Settings</MenuItem>
164+
<MenuItem onClick={handleClose2}>Help</MenuItem>
165+
</Menu>
166+
</SistentThemeProvider>
167+
</div>
168+
<CodeBlock name="positioned-menu" code={codes[1]} />
169+
</div>
170+
171+
{/* Menu Item States */}
172+
<a id="Menu Item States">
173+
<h3>Menu Item States</h3>
174+
</a>
175+
<p>Communicate state with <code>selected</code> and <code>disabled</code> props on MenuItem.</p>
176+
<div className="showcase">
177+
<div className="items">
178+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
179+
<Button variant="text" onClick={handleOpen3}>With states</Button>
180+
<Menu anchorEl={anchorEl3} open={open3} onClose={handleClose3}>
181+
<MenuItem onClick={handleClose3} selected>
182+
Selected
183+
</MenuItem>
184+
<MenuItem onClick={handleClose3} disabled>
185+
Disabled
186+
</MenuItem>
187+
<MenuItem onClick={handleClose3}>Regular</MenuItem>
188+
</Menu>
189+
</SistentThemeProvider>
190+
</div>
191+
<CodeBlock name="menu-item-states" code={codes[2]} />
192+
</div>
193+
194+
{/* Long Menu */}
195+
<a id="Long Menu">
196+
<h3>Long Menu</h3>
197+
</a>
198+
<p>Constrain menu size with <code>PaperProps</code> and enable keyboard focus with <code>MenuListProps.autoFocusItem</code>.</p>
199+
<div className="showcase">
200+
<div className="items">
201+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
202+
<Button variant="contained" onClick={handleOpen4}>Long menu</Button>
203+
<Menu
204+
anchorEl={anchorEl4}
205+
open={open4}
206+
onClose={handleClose4}
207+
MenuListProps={{ autoFocusItem: true }}
208+
PaperProps={{ style: { maxHeight: 240, width: 220 } }}
209+
>
210+
{["Profile","My account","Dashboard","Settings","Billing","Support","Sign out"].map((label) => (
211+
<MenuItem key={label} onClick={handleClose4}>{label}</MenuItem>
212+
))}
213+
</Menu>
214+
</SistentThemeProvider>
215+
</div>
216+
<CodeBlock name="long-menu" code={codes[3]} />
217+
</div>
218+
</div>
219+
</div>
220+
</SistentLayout>
221+
);
222+
};
223+
224+
export default MenuCode;
225+

0 commit comments

Comments
 (0)