Skip to content

Commit

Permalink
add guidance page
Browse files Browse the repository at this point in the history
  • Loading branch information
@nganphan123
nganphan123 committed Jan 11, 2025
1 parent 2c67177 commit bd499cd
Show file tree
Hide file tree
Showing 2 changed files with 250 additions and 65 deletions.
241 changes: 241 additions & 0 deletions src/sections/Projects/Sistent/components/select/guidance.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
import React from "react";
import { Row } from "../../../../../reusecore/Layout";
import { SistentThemeProvider } from "@layer5/sistent";
import { SistentLayout } from "../../sistent-layout";
import {
FormHelperText,
FormControl,
InputLabel,
Select,
MenuItem,
Grid,
ListSubheader,
OutlinedInput,
} from "@mui/material";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import SectionNav from "./section-nav";
import Header from "./header";
const SelectGuidance = () => {
const { isDark } = useStyledDarkMode();
const [selectedAge, setSelectedAge] = React.useState("");
const [multipleAges, setMultipleAges] = React.useState([]);
const handleMultiplSelect = (event) => {
let agesList = event.target.value;
setMultipleAges(agesList);
};
return (
<SistentLayout title="Select">
<div className="content">
<Header />
<SectionNav />
<div className="main-content">
<a id="Behavior">
<h2>Behavior</h2>
</a>
<p>
The select component can exhibit different behaviors based on the
context and user input. Since it is usually used within a form
component, these behaviors can act in response to the user input for
other components in the form.
</p>
<h3>Disabled</h3>
<p>
If the component is disabled, the dropdown menu won't display when
user clicks on the selection area. This behavior is useful when the
user is not allowed to select any option.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }} disabled>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
id="demo-select-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<h3>Error</h3>
<p>
This behavior is used to indicate that the user has made an error or
the selection is not compatible with other form components.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }} error>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
id="demo-select-outlined"
label="Age"
renderValue={(value) => `⚠️ - ${value}`}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<h3>Required</h3>
<p>
If specified, the select component will be required to have an input
from the user. An asterisk will be displayed next to the label to
let the user know that the input is required.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }} required>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
id="demo-select-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<a id="Customization">
<h2>Customization</h2>
</a>
<p>
Additional props can be added to the select component to customize
its label and dropdown menu to provide use with more context of
their selection.
</p>
<h3>Label and helper text</h3>
<p>
The label is optional. If provided, helper text is displayed below
the component to give the user more context about the component.
</p>

<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Grid
gap={2}
container
sx={{
width: "100%",
alignItems: "center",
justifyContent: "center",
}}
>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label"
id="demo-select"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>With label + Helper text</FormHelperText>
</FormControl>
<FormControl sx={{ width: "200px" }}>
<Select id="demo-select-without-label">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Without label</FormHelperText>
</FormControl>
</Grid>
</SistentThemeProvider>
<h3>Placeholder</h3>
<p>
Placeholder can be used to give more context about the selection.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }}>
<Select
id="demo-select-outlined"
onChange={(e) => setSelectedAge(e.target.value)}
renderValue={() => {
if (selectedAge == "") return <em>Select an age</em>;
return selectedAge;
}}
value={selectedAge}
displayEmpty
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<h3>Grouping</h3>
<p>
If the selection options are organized into groups, their groups can
be displayed within the dropdown menu to assist users in making
their selection.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
id="demo-select-outlined"
label="Age"
>
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<ListSubheader muiSkipListHighlight>Group 2</ListSubheader>
<MenuItem value={30}>Thirty</MenuItem>
<MenuItem value={40}>Fourty</MenuItem>
<ListSubheader muiSkipListHighlight>Group 3</ListSubheader>
<MenuItem value={50}>Fifty</MenuItem>
<MenuItem value={60}>Sixty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
<a id="Multiple select">
<h2>Multiple select</h2>
</a>
<p>
The multiple select component allows users to select more than one
option from the dropdown list. This is useful in scenarios where
multiple selections are required, such as selecting multiple tags,
categories, or items.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
multiple
labelId="demo-select-label-standard"
id="demo-select-standard"
label="Age"
input={<OutlinedInput label="Name" />}
value={multipleAges}
onChange={handleMultiplSelect}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</Row>
</div>
</div>
</SistentLayout>
);
};

export default SelectGuidance;
74 changes: 9 additions & 65 deletions src/sections/Projects/Sistent/components/select/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import { SistentThemeProvider } from "@layer5/sistent";
import TabButton from "../../../../../reusecore/Button";
import { SistentLayout } from "../../sistent-layout";
import { Row } from "../../../../../reusecore/Layout";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import {
Container,
FormControl,
FormHelperText,
Grid,
InputLabel,
MenuItem,
Select,
Expand All @@ -21,7 +14,6 @@ import Header from "./header";
import SectionNav from "./section-nav";

const SistentSelect = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();
const [multipleAges, setMultipleAges] = React.useState([]);
const handleMultiplSelect = (event) => {
Expand Down Expand Up @@ -58,9 +50,9 @@ const SistentSelect = () => {
selection area. The label appears above the selection, and the
dropdown menu is displayed below it.
</p>
<Container sx={{ width: "200px" }}>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl fullWidth>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
Expand All @@ -73,17 +65,16 @@ const SistentSelect = () => {
</Select>
</FormControl>
</SistentThemeProvider>
</Container>
</Row>
<h3>Filled</h3>
<p>
Filled select feature a background color fill. Depending on the
theme or intended action, the color fill ican range from a primary
brand color to any other applicable color in a brand's color
palette.
</p>

<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Row $Hcenter className="image-container">
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label-filled">Age</InputLabel>
<Select
Expand All @@ -97,8 +88,8 @@ const SistentSelect = () => {
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</Row>
</SistentThemeProvider>
</SistentThemeProvider>
</Row>
<h3>Standard</h3>
<p>
The standard style features a simple underline below the selection
Expand All @@ -121,48 +112,6 @@ const SistentSelect = () => {
</FormControl>
</SistentThemeProvider>
</Row>
<a id="Label">
<h2>Label and helper text</h2>
</a>
<p>
The label is optional. If provided, helper text is displayed below
the component to give the user more context about the component.
</p>

<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Grid
gap={2}
container
sx={{
width: "100%",
alignItems: "center",
justifyContent: "center",
}}
>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label"
id="demo-select"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>With label + Helper text</FormHelperText>
</FormControl>
<FormControl sx={{ width: "200px" }}>
<Select id="demo-select-without-label" defaultValue={"None"}>
<MenuItem value={"None"}>None</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Without label</FormHelperText>
</FormControl>
</Grid>
</SistentThemeProvider>
<a id="Sizes">
<h2>Sizes</h2>
</a>
Expand Down Expand Up @@ -247,15 +196,10 @@ const SistentSelect = () => {
<a id="Multiple select">
<h2>Multiple select</h2>
</a>
<p>
The multiple select component allows users to select more than one
option from the dropdown list. This is useful in scenarios where
multiple selections are required, such as selecting multiple tags,
categories, or items.
</p>
<p>Multiple select component allows users to select more than one.</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ minWidth: "80px", m: 1 }}>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
multiple
Expand Down

0 comments on commit bd499cd

Please sign in to comment.