Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select component doc #6177

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
+815 −13
Draft

Select component doc #6177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6983526
add select route
nganphan123 Dec 21, 2024
d592833
add overview page
nganphan123 Dec 26, 2024
02f6e29
add component size
nganphan123 Dec 27, 2024
68b6e50
add multiple select
nganphan123 Dec 31, 2024
845c5c3
extract section navigation and header
nganphan123 Dec 31, 2024
6008a9d
add guidance page
nganphan123 Jan 5, 2025
0f29800
add code section
nganphan123 Jan 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 20 additions & 13 deletions src/sections/Projects/Sistent/components/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,98 +3,105 @@ const componentsData = [
id: 1,
name: "Button",
description:
"A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
"A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
url: "/projects/sistent/components/button",
src: "/button",
},
{
id: 2,
name: "Text Input",
description:
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
url: "/projects/sistent/components/text-input",
src: "/text-input",
},
{
id: 3,
name: "Modal",
description:
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
url: "/projects/sistent/components/modal",
src: "/modal",
},
{
id: 4,
name: "Paper",
description:
"The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
"The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
url: "/projects/sistent/components/paper",
src: "/paper",
},
{
id: 5,
name: "Popper",
description:
"A popper is a tooltip that appears when a user interacts with an element.",
"A popper is a tooltip that appears when a user interacts with an element.",
url: "/projects/sistent/components/popper",
src: "/popper",
},
{
id: 6,
name: "Text Field",
description:
"The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
"The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
url: "/projects/sistent/components/text-field",
src: "/text-field",
},
{
id: 7,
name: "Link",
description:
"Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
"Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
url: "/projects/sistent/components/link",
src: "/link",
},
{
id: 8,
name: "Container",
description:
"Containers align and center content, providing responsive layout options for different screen sizes.",
"Containers align and center content, providing responsive layout options for different screen sizes.",
url: "/projects/sistent/components/container",
src: "/container",
},
{
id: 9,
name: "ButtonGroup",
description:
"ButtonGroup is a component that groups multiple buttons together.",
"ButtonGroup is a component that groups multiple buttons together.",
url: "/projects/sistent/components/button-group",
src: "/button-group",
},
{
id: 10,
name: "Box",
description:
"Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
"Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
url: "/projects/sistent/components/box",
src: "/box",
},
{
id: 11,
name: "Tooltip",
description:
"The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
"The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
url: "/projects/sistent/components/tooltip",
src: "/tooltip",
},
{
id: 12,
name: "Backdrop",
description:
"Backdrop component overlays a dimmed screen to focus attention on foreground content.",
"Backdrop component overlays a dimmed screen to focus attention on foreground content.",
url: "/projects/sistent/components/backdrop",
src: "/backdrop",
},
{
id: 13,
name: "Select",
description: "Select desc",
url: "/projects/sistent/components/select",
src: "/select",
},
];

module.exports = { componentsData };
module.exports = { componentsData };
277 changes: 277 additions & 0 deletions src/sections/Projects/Sistent/components/select/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
import React from "react";

import { Button, SistentThemeProvider } from "@layer5/sistent";
import { CodeBlock } from "./code-block";
import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
import { SistentLayout } from "../../sistent-layout";

import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import SectionNav from "./section-nav";
import Header from "./header";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";

const codes = {
"variant-outlined": `<SistentThemeProvider>
<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"variant-filled": `<SistentThemeProvider>
<Select variant="filled">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"variant-standard": `<SistentThemeProvider>
<Select variant="standard">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"size-auto": `<SistentThemeProvider>
<Select autoWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"size-small": `<SistentThemeProvider>
<Select size="small">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"size-fullwidth": `<SistentThemeProvider>
<Select fullWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"behavior-error-disabled": `<SistentThemeProvider>
<Select disabled>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<Select error>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"behavior-required": `<SistentThemeProvider>
<FormControl required>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>`,
};

const ButtonCode = () => {
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Button">
<div className="content">
<Header />
<SectionNav />

<div className="main-content">
<a id="Select variants">
<h2>Select variants</h2>
</a>
<p>
The select comes in three types: Outlined, Filled, and Standard. To
specify the variant, pass a value to the variant prop.
</p>
<h3>Outlined</h3>
<p>
If not specified, the default variant of the select if outlined.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="outlined-selection"
code={codes["variant-outlined"]}
/>
</div>
<h3>Filled</h3>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} variant="filled">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="filled-selection" code={codes["variant-filled"]} />
</div>
<h3>Standard</h3>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} variant="standard">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="standard-selection"
code={codes["variant-standard"]}
/>
</div>
<a id="Sizes">
<h2>Sizes</h2>
</a>
<p>
There are 3 size option for the select component: autowidth, small,
and fullWidth. Depending on the size of the select, different prop
can be passed to the component.
</p>
<h3>Autowidth</h3>
<p>
An autoWidth option is passed to the component to enable this
attribute
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} autoWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="size-auto" code={codes["size-auto"]} />
</div>
<h3>Small</h3>
<p>
To generate small select, pass a size prop with a value of small
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} size="small">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="size-small" code={codes["size-small"]} />
</div>
<h3>Full width</h3>
<p>
The select will expand the full width of its parent when passed
fullWidth prop
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10} fullWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock name="size-fullwidth" code={codes["size-fullwidth"]} />
</div>
<a id="Customize behaviors">
<h2>Customize behaviors</h2>
</a>
<p>
Additional props such as error, required, and disabled can be passed
to the select component to customize its behavior.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select disabled defaultValue={10}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<Select error defaultValue={10}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="behavior-error-disabled"
code={codes["behavior-error-disabled"]}
/>
</div>
<div className="showcase">
<div className="items">
<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>
</div>
<CodeBlock name="adding-icons" code={codes["behavior-required"]} />
<p>
<strong>NOTE:</strong>
</p>
<p>
When the select component is marked as required, an asterisk is
added to the label to indicate this to the user. It is recommended
to use this feature in conjunction with the label for better
clarity.
</p>
</div>
<a id="Customize select area">
<h2>Customize select area</h2>
</a>
</div>
</div>
</SistentLayout>
);
};

export default ButtonCode;
Loading
Loading