Skip to content

Commit 3bb57b3

Browse files
nganphan123nganphan123
committed
add overview page
1 parent d3f4975 commit 3bb57b3

File tree

1 file changed

+288
-0
lines changed
  • src/sections/Projects/Sistent/components/select

1 file changed

+288
-0
lines changed

‎src/sections/Projects/Sistent/components/select/index.js

+288
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentThemeProvider, Button } from "@layer5/sistent";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import { Col, Row } from "../../../../../reusecore/Layout";
9+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
10+
import {
11+
Container,
12+
FormControl,
13+
FormHelperText,
14+
Grid,
15+
InputLabel,
16+
MenuItem,
17+
Select,
18+
} from "@mui/material";
19+
20+
const SistentSelect = () => {
21+
const location = useLocation();
22+
const { isDark } = useStyledDarkMode();
23+
24+
return (
25+
<SistentLayout title="Select">
26+
<div className="content">
27+
<a id="Identity">
28+
<h2>Select</h2>
29+
</a>
30+
<p>
31+
Select component is a dropdown menu for selecting an option from a
32+
list.
33+
</p>
34+
<div className="filterBtns">
35+
<TabButton
36+
className={
37+
location.pathname === "/projects/sistent/components/select"
38+
? "active"
39+
: ""
40+
}
41+
onClick={() => navigate("/projects/sistent/components/select")}
42+
title="Overview"
43+
/>
44+
<TabButton
45+
className={
46+
location.pathname ===
47+
"/projects/sistent/components/select/guidance"
48+
? "active"
49+
: ""
50+
}
51+
onClick={() =>
52+
navigate("/projects/sistent/components/select/guidance")
53+
}
54+
title="Guidance"
55+
/>
56+
<TabButton
57+
className={
58+
location.pathname === "/projects/sistent/components/select/code"
59+
? "active"
60+
: ""
61+
}
62+
onClick={() => navigate("/projects/sistent/components/select/code")}
63+
title="Code"
64+
/>
65+
</div>
66+
<div className="main-content">
67+
<p>
68+
The Select component is a versatile and customizable element
69+
commonly used in forms and user interfaces. It is designed to
70+
present a list of options for users to choose from, either as a
71+
single selection or multiple selections. This component plays a
72+
vital role in collecting user-provided information efficiently and
73+
intuitively.
74+
</p>
75+
<a id="Types">
76+
<h2>Types</h2>
77+
</a>
78+
<p>
79+
To accommodate various design styles and use cases, the select
80+
component offers numerous customizable properties. Developers can
81+
customize how the component display the labels or selected option to
82+
improve user experience.
83+
</p>
84+
<h3>Outlined</h3>
85+
<p>
86+
The default style is "outlined," featuring a thin line around the
87+
selection area. The label appears above the selection, and the
88+
dropdown menu is displayed below it.
89+
</p>
90+
<Container sx={{ width: "200px" }}>
91+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
92+
<FormControl fullWidth>
93+
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
94+
<Select
95+
labelId="demo-select-label-outlined"
96+
id="demo-select-outlined"
97+
label="Age"
98+
>
99+
<MenuItem value={10}>Ten</MenuItem>
100+
<MenuItem value={20}>Twenty</MenuItem>
101+
<MenuItem value={30}>Thirty</MenuItem>
102+
</Select>
103+
</FormControl>
104+
</SistentThemeProvider>
105+
</Container>
106+
<h3>Filled</h3>
107+
<p>
108+
Filled select feature a background color fill. Depending on the
109+
theme or intended action, the color fill ican range from a primary
110+
brand color to any other applicable color in a brand's color
111+
palette.
112+
</p>
113+
114+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
115+
<Row $Hcenter className="image-container">
116+
<FormControl sx={{ width: "200px" }}>
117+
<InputLabel id="demo-select-label-filled">Age</InputLabel>
118+
<Select
119+
labelId="demo-select-label-filled"
120+
id="demo-select-filled"
121+
label="Age"
122+
variant="filled"
123+
>
124+
<MenuItem value={10}>Ten</MenuItem>
125+
<MenuItem value={20}>Twenty</MenuItem>
126+
<MenuItem value={30}>Thirty</MenuItem>
127+
</Select>
128+
</FormControl>
129+
</Row>
130+
</SistentThemeProvider>
131+
<h3>Standard</h3>
132+
<p>
133+
The standard style features a simple underline below the selection
134+
area.
135+
</p>
136+
<Row $Hcenter className="image-container">
137+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
138+
<FormControl sx={{ width: "200px" }}>
139+
<InputLabel id="demo-select-label">Age</InputLabel>
140+
<Select
141+
labelId="demo-select-label-standard"
142+
id="demo-select-standard"
143+
label="Age"
144+
variant="standard"
145+
>
146+
<MenuItem value={10}>Ten</MenuItem>
147+
<MenuItem value={20}>Twenty</MenuItem>
148+
<MenuItem value={30}>Thirty</MenuItem>
149+
</Select>
150+
</FormControl>
151+
</SistentThemeProvider>
152+
</Row>
153+
<a id="Label">
154+
<h2>Label and helper text</h2>
155+
</a>
156+
<p>
157+
The label is optional. If provided, helper text is displayed below
158+
the component to give the user more context about the component.
159+
</p>
160+
161+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
162+
<Grid
163+
gap={2}
164+
container
165+
sx={{
166+
width: "100%",
167+
alignItems: "center",
168+
justifyContent: "center",
169+
}}
170+
>
171+
<FormControl sx={{ width: "200px" }}>
172+
<InputLabel id="demo-select-label">Age</InputLabel>
173+
<Select
174+
labelId="demo-select-label"
175+
id="demo-select"
176+
label="Age"
177+
>
178+
<MenuItem value={10}>Ten</MenuItem>
179+
<MenuItem value={20}>Twenty</MenuItem>
180+
<MenuItem value={30}>Thirty</MenuItem>
181+
</Select>
182+
<FormHelperText>With label + Helper text</FormHelperText>
183+
</FormControl>
184+
<FormControl sx={{ width: "200px" }}>
185+
<Select id="demo-select-without-label" defaultValue={"None"}>
186+
<MenuItem value={"None"}>None</MenuItem>
187+
<MenuItem value={10}>Ten</MenuItem>
188+
<MenuItem value={20}>Twenty</MenuItem>
189+
<MenuItem value={30}>Thirty</MenuItem>
190+
</Select>
191+
<FormHelperText>Without label</FormHelperText>
192+
</FormControl>
193+
</Grid>
194+
</SistentThemeProvider>
195+
<a id="Sizes">
196+
<h2>Sizes</h2>
197+
</a>
198+
<p>
199+
For buttons to be fully effective, they can be adjusted in size to
200+
accommodate multiple use cases where they may apply. These size
201+
changes are usually done to the height of the buttons and not the
202+
width since buttons usually grow to contain their content. The
203+
height that makes up the different sizes of our buttons are gotten
204+
from our spacing system to retain space consistency. We have chosen
205+
two different sizes of buttons to provide options and more sizes can
206+
be added to fill the growing needs.
207+
</p>
208+
<h3>56px / 3.5rem</h3>
209+
<p>
210+
The 56px button is the first button size. It is currently the
211+
largest button available for use and it is available for both mobile
212+
and desktop resolutions, but it serves in different capacities
213+
across these different resolutions.
214+
</p>
215+
<Row $Hcenter className="image-container">
216+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
217+
<FormControl fullWidth>
218+
<InputLabel id="demo-select-label">Age</InputLabel>
219+
<Select
220+
labelId="demo-select-label-standard"
221+
id="demo-select-standard"
222+
label="Age"
223+
variant="standard"
224+
>
225+
<MenuItem value={10}>Ten</MenuItem>
226+
<MenuItem value={20}>Twenty</MenuItem>
227+
<MenuItem value={30}>Thirty</MenuItem>
228+
</Select>
229+
</FormControl>
230+
</SistentThemeProvider>
231+
</Row>
232+
<h3>48px / 3rem</h3>
233+
<p>
234+
The 48px button is the second button size currently in use and it is
235+
available from mobile to desktop resolutions, even though it serves
236+
in different capacities across these screen sizes.
237+
</p>
238+
<Row $Hcenter className="image-container">
239+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
240+
<Button variant="contained" label="48px / 3rem" size="medium" />
241+
</SistentThemeProvider>
242+
</Row>
243+
<h3>Full width</h3>
244+
<p>
245+
Full width buttons are more efficient in mobile designs and rightly
246+
so in order to offer users with a wider touch area since the input
247+
devices - the fingers, are a lot larger than the cursor on a desktop
248+
or larger screen.
249+
</p>
250+
<Row $Hcenter className="image-container">
251+
<Col sm={12}>
252+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
253+
<Button variant="contained" label="Full width" fullWidth />
254+
</SistentThemeProvider>
255+
</Col>
256+
</Row>
257+
<p>
258+
<strong>NOTE:</strong>
259+
</p>
260+
<p>
261+
These sizes are being specified with numerical values because though
262+
the same size is used across screen resolutions, they have different
263+
roles. On desktop for instance, the 56px button is a the default
264+
size, and 48px the small size, while on mobile, 56px is large and
265+
48px is the default size. Preferred button sizes (height) are
266+
usually arrived at through exploration and proper consideration of
267+
industry standards and best practices.
268+
</p>
269+
<a id="Adding Icons">
270+
<h2>Adding Icons</h2>
271+
</a>
272+
<p>
273+
Sometimes, icons are used alongside labels in buttons to pass across
274+
specific information or relay added information for a higher level
275+
of understanding and better comprehension. Depending on the
276+
information being conveyed, the icons can be placed on the left side
277+
of the label text or on the right side of the label text. No
278+
specific rules apply apart from spacing tips which may be considered
279+
here. For full width buttons, if icons must be added, they should be
280+
centered in the button alongside the label text.
281+
</p>
282+
</div>
283+
</div>
284+
</SistentLayout>
285+
);
286+
};
287+
288+
export default SistentSelect;

0 commit comments

Comments
 (0)