Skip to content

Commit 43991dd

Browse files
ARYANSHAH1567ARYANSHAH1567
committed
Added the code section for text-input
Signed-off-by: Aryan Shah <[email protected]>
1 parent b35acbe commit 43991dd

File tree

1 file changed

+132
-3
lines changed
  • src/sections/Projects/Sistent/components/text-input

1 file changed

+132
-3
lines changed

‎src/sections/Projects/Sistent/components/text-input/code.js

Lines changed: 132 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,31 @@
11
import React from "react";
22
import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
4-
import { SistentLayout } from "../../sistent-layout";
54

5+
import { SistentThemeProvider, Input } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
7+
import { SistentLayout } from "../../sistent-layout";
8+
import { Row } from "../../../../../reusecore/Layout";
69
import TabButton from "../../../../../reusecore/Button";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
12+
const codes = [
13+
`<Input placeholder="Placeholder goes here" type="text" />`,
14+
`<Input
15+
placeholder="Placeholder goes here"
16+
type="text"
17+
size="medium"
18+
/>`,
19+
`<Input
20+
placeholder="Placeholder goes here"
21+
type="text"
22+
size="small"
23+
/>`
24+
];
725

826
const TextInputCode = () => {
927
const location = useLocation();
28+
const { isDark } = useStyledDarkMode();
1029

1130
return (
1231
<SistentLayout title="Text Input">
@@ -56,10 +75,120 @@ const TextInputCode = () => {
5675
title="Code"
5776
/>
5877
</div>
59-
<div className="main-content">Sorry, this page is still under work</div>
78+
<div className="main-content">
79+
<p>
80+
Text inputs are important elements that help users interact with an
81+
experience by providing text commands that will in turn return
82+
expected results. These commands can range from providing a free
83+
range of personal information to entering a limited number of
84+
characters for a use case.
85+
</p>
86+
<a id="Design">
87+
<h2>Design</h2>
88+
</a>
89+
<p>
90+
Instead of various types for use across designs, the text input has
91+
just one type to ensure simplicity and efficiency. It is preferable
92+
that inputs are as minimal as possible since the sole function that
93+
they generally perform is to ensure that users are able to send in
94+
data and receive corresponding information.
95+
</p>
96+
<div className="showcase">
97+
<div className="tf-items">
98+
<Row $Hcenter>
99+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
100+
<div style={{ margin: "20px 0" }}>
101+
<Input placeholder="Placeholder goes here" type="text" />
102+
</div>
103+
</SistentThemeProvider>
104+
</Row>
105+
</div>
106+
<CodeBlock name="basic-input" code={codes[0]} />
107+
</div>
108+
<a id="Sizes">
109+
<h2>Sizes</h2>
110+
</a>
111+
<p>
112+
Since input fields have a responsive width that adjusts depending on
113+
the need and use case, size considerations are mostly directed at
114+
the height of the field. This means that the size of text inputs
115+
adjust only relative to the height of the text field. Because text
116+
inputs are mostly used in tandem with buttons, to ensure design
117+
consistency, text inputs and buttons have similar size requirements.
118+
</p>
119+
<h3>56px / 3.5rem</h3>
120+
<p>
121+
The 56px text input is the first field size. It is the largest text
122+
input available for use and it is available for both mobile and
123+
desktop resolutions, but it serves in different capacities across
124+
these different resolutions.
125+
</p>
126+
<div className="showcase">
127+
<div className="tf-items">
128+
<Row $Hcenter>
129+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
130+
<div style={{ margin: "20px 0" }}>
131+
<Input
132+
placeholder="Placeholder goes here"
133+
type="text"
134+
size="medium"
135+
/>
136+
</div>
137+
</SistentThemeProvider>
138+
</Row>
139+
</div>
140+
<CodeBlock name="medium-input" code={codes[1]} />
141+
</div>
142+
<h3>48px / 3rem</h3>
143+
<p>
144+
The 48px text input is the second field size in use and it is
145+
available from mobile to desktop resolutions, even though it serves
146+
in different capacities across these screen sizes.
147+
</p>
148+
<div className="showcase">
149+
<div className="tf-items">
150+
<Row $Hcenter>
151+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
152+
<div style={{ margin: "20px 0" }}>
153+
<Input
154+
placeholder="Placeholder goes here"
155+
type="text"
156+
size="small"
157+
/>
158+
</div>
159+
</SistentThemeProvider>
160+
</Row>
161+
</div>
162+
<CodeBlock name="small-input" code={codes[2]} />
163+
</div>
164+
<p>
165+
<strong>NOTE:</strong>
166+
</p>
167+
<p>
168+
These sizes are being specified with numerical values because though
169+
the same size is used across screen resolutions, they have different
170+
roles. On desktop for instance, the 56px text input is a the default
171+
size, and 48px the small size, while on mobile, 56px is large and
172+
48px is the default size. Preferred text input sizes (height) are
173+
usually arrived at through exploration and proper consideration of
174+
industry standards and best practices.
175+
</p>
176+
<a id="Adding Icons">
177+
<h2>Adding Icons</h2>
178+
</a>
179+
<p>
180+
Icons can be used often in text inputs to aid in understanding the
181+
required parameters for a given field or to provide options that can
182+
help to improve the experience as a user navigates a given set of
183+
text inputs. Depending on the context, icons can be placed on the
184+
left and right at different times or even at the same time. The
185+
icons should be aligned to the left or right side of the input field
186+
and not to the center, while text remains left aligned.
187+
</p>
188+
</div>
60189
</div>
61190
</SistentLayout>
62191
);
63192
};
64193

65-
export default TextInputCode;
194+
export default TextInputCode;

0 commit comments

Comments
 (0)