From 55ad3c15f5b5f2a93e6ef8a0b05f137ccdd400f5 Mon Sep 17 00:00:00 2001 From: nganphan123 Date: Sat, 21 Dec 2024 02:36:42 -0800 Subject: [PATCH 1/9] add select route Signed-off-by: nganphan123 --- .../Projects/Sistent/components/content.js | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index 388e34486f06..8e88c73a4805 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -3,7 +3,7 @@ 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", }, @@ -11,7 +11,7 @@ const componentsData = [ 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", }, @@ -19,7 +19,7 @@ const componentsData = [ 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", }, @@ -27,7 +27,7 @@ const componentsData = [ 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", }, @@ -35,7 +35,7 @@ const componentsData = [ 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", }, @@ -43,7 +43,7 @@ const componentsData = [ 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", }, @@ -51,7 +51,7 @@ const componentsData = [ 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", }, @@ -59,7 +59,7 @@ const componentsData = [ 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", }, @@ -67,7 +67,7 @@ const componentsData = [ 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", }, @@ -75,7 +75,7 @@ const componentsData = [ 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", }, @@ -83,7 +83,7 @@ const componentsData = [ 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", }, @@ -91,10 +91,17 @@ const componentsData = [ 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 }; \ No newline at end of file +module.exports = { componentsData }; From 71814266dc5b6de5b108f252cae29f5aebde0e40 Mon Sep 17 00:00:00 2001 From: nganphan123 Date: Thu, 26 Dec 2024 00:12:06 -0800 Subject: [PATCH 2/9] add overview page Signed-off-by: nganphan123 --- .../Sistent/components/select/index.js | 288 ++++++++++++++++++ 1 file changed, 288 insertions(+) create mode 100644 src/sections/Projects/Sistent/components/select/index.js diff --git a/src/sections/Projects/Sistent/components/select/index.js b/src/sections/Projects/Sistent/components/select/index.js new file mode 100644 index 000000000000..d63c01551bfe --- /dev/null +++ b/src/sections/Projects/Sistent/components/select/index.js @@ -0,0 +1,288 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Button } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Col, Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { + Container, + FormControl, + FormHelperText, + Grid, + InputLabel, + MenuItem, + Select, +} from "@mui/material"; + +const SistentSelect = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Select

+ +

+ Select component is a dropdown menu for selecting an option from a + list. +

+
+ navigate("/projects/sistent/components/select")} + title="Overview" + /> + + navigate("/projects/sistent/components/select/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/select/code")} + title="Code" + /> +
+
+

+ The Select component is a versatile and customizable element + commonly used in forms and user interfaces. It is designed to + present a list of options for users to choose from, either as a + single selection or multiple selections. This component plays a + vital role in collecting user-provided information efficiently and + intuitively. +

+ +

Types

+ +

+ To accommodate various design styles and use cases, the select + component offers numerous customizable properties. Developers can + customize how the component display the labels or selected option to + improve user experience. +

+

Outlined

+

+ The default style is "outlined," featuring a thin line around the + selection area. The label appears above the selection, and the + dropdown menu is displayed below it. +

+ + + + Age + + + + +

Filled

+

+ 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. +

+ + + + + Age + + + + +

Standard

+

+ The standard style features a simple underline below the selection + area. +

+ + + + Age + + + + + +

Label and helper text

+ +

+ The label is optional. If provided, helper text is displayed below + the component to give the user more context about the component. +

+ + + + + Age + + With label + Helper text + + + + Without label + + + + +

Sizes

+ +

+ For buttons to be fully effective, they can be adjusted in size to + accommodate multiple use cases where they may apply. These size + changes are usually done to the height of the buttons and not the + width since buttons usually grow to contain their content. The + height that makes up the different sizes of our buttons are gotten + from our spacing system to retain space consistency. We have chosen + two different sizes of buttons to provide options and more sizes can + be added to fill the growing needs. +

+

56px / 3.5rem

+

+ The 56px button is the first button size. It is currently the + largest button available for use and it is available for both mobile + and desktop resolutions, but it serves in different capacities + across these different resolutions. +

+ + + + Age + + + + +

48px / 3rem

+

+ The 48px button is the second button size currently in use and it is + available from mobile to desktop resolutions, even though it serves + in different capacities across these screen sizes. +

+ + +
+
+ + ); +}; + +export default SistentSelect; From b0fd9cc47a52317b08b51bf5b46d40d6fa05dd4d Mon Sep 17 00:00:00 2001 From: nganphan123 Date: Thu, 26 Dec 2024 16:06:48 -0800 Subject: [PATCH 3/9] add component size Signed-off-by: nganphan123 --- .../Sistent/components/select/index.js | 110 +++++++++++------- 1 file changed, 67 insertions(+), 43 deletions(-) diff --git a/src/sections/Projects/Sistent/components/select/index.js b/src/sections/Projects/Sistent/components/select/index.js index d63c01551bfe..cc8106b305fd 100644 --- a/src/sections/Projects/Sistent/components/select/index.js +++ b/src/sections/Projects/Sistent/components/select/index.js @@ -2,10 +2,10 @@ import React from "react"; import { navigate } from "gatsby"; import { useLocation } from "@reach/router"; -import { SistentThemeProvider, Button } from "@layer5/sistent"; +import { SistentThemeProvider } from "@layer5/sistent"; import TabButton from "../../../../../reusecore/Button"; import { SistentLayout } from "../../sistent-layout"; -import { Col, Row } from "../../../../../reusecore/Layout"; +import { Row } from "../../../../../reusecore/Layout"; import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; import { Container, @@ -196,25 +196,19 @@ const SistentSelect = () => {

Sizes

- For buttons to be fully effective, they can be adjusted in size to - accommodate multiple use cases where they may apply. These size - changes are usually done to the height of the buttons and not the - width since buttons usually grow to contain their content. The - height that makes up the different sizes of our buttons are gotten - from our spacing system to retain space consistency. We have chosen - two different sizes of buttons to provide options and more sizes can - be added to fill the growing needs. -

-

56px / 3.5rem

-

- The 56px button is the first button size. It is currently the - largest button available for use and it is available for both mobile - and desktop resolutions, but it serves in different capacities - across these different resolutions. + The select component can be adjusted in size to accommodate various + use cases. These size adjustments typically affect the height of the + component, while the width adjusts to fit the content. The height of + the select component is derived from our spacing system to maintain + consistency. We offer multiple sizes to meet different needs.

+

Auto width

+ {/*

+ The width of the component can scale +

*/} - + Age + Ten + Twenty + Thirty + +

Full width

-

+ {/*

Full width buttons are more efficient in mobile designs and rightly so in order to offer users with a wider touch area since the input devices - the fingers, are a lot larger than the cursor on a desktop or larger screen. -

+

*/} - - -