add text input component page

Signed-off-by: lakshya <[email protected]>

src/sections/Projects/Project-grid/projectGrid.style.js

@@ -436,7 +436,7 @@ export const ProjectWrapper = styled.div`
 
     .project__card.sistent img {
       margin-top: 0px;
-      margin-bottom: 0px;
+      margin-bottom: 0 px;
     }
 
     .project__card.seven {

src/sections/Projects/Sistent/components/button/index.js

@@ -18,7 +18,7 @@ const overviewContents = [
 
 const guidanceContents = [
   { id: 0, link: "#Function", text: "Function" },
-  { id: 1, link: "#Labeling", text: "Labeling" },
+  { id: 1, link: "#Labelling", text: "Labelling" },
 ];
 
 const codeContents = [

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const TextInputCode = () => {
+  return (
+    <div className="main-content">Sorry, this page is still under work</div>
+  );
+};

src/sections/Projects/Sistent/components/text-input/guidance.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { Row } from "../../../../../reusecore/Layout";
+import { SistentThemeProvider, Input } from "@layer5/sistent";
+
+export const TextInputGuidance = () => {
+  return (
+    <div className="main-content">
+      <p>
+        Although we have only one type of text input to be used, there are
+        different roles that they can function in that ensure that these inputs
+        prove sufficient for multiple use cases.
+      </p>
+      <a id="Function">
+        <h2>Function</h2>
+      </a>
+      <p></p>
+      <h3>Default</h3>
+      <p>
+        Default text inputs are used for most of the input needs across an
+        interface. From filling up forms to entering text content in provided
+        form fields to complete an action or a task. this text input is mostly
+        utilized. Icons are not seldom required in this text input, however,
+        they can included when extremely necessary.
+      </p>
+      <Row Hcenter>
+        <SistentThemeProvider>
+          <Input placeholder="Placeholder goes here" />
+        </SistentThemeProvider>
+      </Row>
+      <h3>Multiline</h3>
+      <p>
+        Multiline text input functions for input that requires more than one
+        line of text. This text input adjusts vertically based on the amount of
+        lines of text entered into the text field.
+      </p>
+      <Row Hcenter>
+        <SistentThemeProvider>
+          <Input placeholder="Placeholder goes here" multiline />
+        </SistentThemeProvider>
+      </Row>
+      <a id="Labelling">
+        <h2>Labelling</h2>
+      </a>
+      <p>
+        A couple of elements come together to support the input field depending
+        on the context in is being used. These elements either provide added
+        information or provide much needed support to ensure users are able to
+        complete intended tasks.
+      </p>
+      <h3>Label</h3>
+      <p>
+        The label is an optional feature that can accompany the text input. It
+        an be used to point out what is required in the input field.
+      </p>
+      <h3>Required</h3>
+      <p>
+        This type of label that is usually applied in forms to inform users of a
+        compulsary information that is to be provided in order to complete the
+        form. It is represented by an asterisk mark (*) that appears after the
+        label text.
+      </p>
+      <h3>Helper text</h3>
+      <p>
+        Helper text appears at the bottom of the input field and it is primarily
+        to serve as an alert for the user to inform them based on the input they
+        have entered but only where necessary.
+      </p>
+    </div>
+  );
+};

src/sections/Projects/Sistent/components/text-input/index.js

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import SistentWrapper from "../../sistent.style";
+import TOC from "../../../../../components/SistentNavigation";
+import { Container } from "../../../../../reusecore/Layout";
+import SistentPagination from "../../../../../components/SistentNavigation/pagination";
+import TabButton from "../../../../../reusecore/Button";
+import IntraPage from "../../../../../components/handbook-navigation/intra-page";
+
+import { TextInputOverview } from "./overview";
+import { TextInputGuidance } from "./guidance";
+import { TextInputCode } from "./code";
+
+const overviewContents = [
+  { id: 0, link: "#Design", text: "Design" },
+  { id: 1, link: "#Sizes", text: "Sizes" },
+  { id: 2, link: "#Adding Icons", text: "Adding Icons" },
+];
+
+const guidanceContents = [
+  { id: 0, link: "#Function", text: "Function" },
+  { id: 1, link: "#Labelling", text: "Labelling" },
+];
+
+const codeContents = [
+  { id: 0, link: "#Basic Button", text: "Basic Button" },
+  { id: 1, link: "#Sizes", text: "Sizes" },
+  { id: 1, link: "#Adding Icons", text: "Adding Icons" },
+];
+
+const SistentTextInput = () => {
+  const [activeTab, setActiveTab] = useState("overview");
+
+  const contents = () => {
+    if (activeTab === "overview") {
+      return overviewContents;
+    } else if (activeTab === "guidance") {
+      return guidanceContents;
+    } else if (activeTab === "code") {
+      return codeContents;
+    }
+  };
+
+  return (
+    <SistentWrapper>
+      <div className="page-header-section">
+        <h1>Button</h1>
+      </div>
+      <TOC />
+      <div className="page-section">
+        <Container>
+          <div className="content">
+            <a id="Identity">
+              <h2>Text Input</h2>
+            </a>
+            <p>
+              Text inputs are important elements that help users interact with
+              an experience by providing text commands that will in turn return
+              expected results. These commands can range from providing a free
+              range of personal information to entering a limited number of
+              characters for a use case.
+            </p>
+            <div className="filterBtns">
+              <TabButton
+                className={activeTab == "overview" ? "active" : ""}
+                onClick={() => setActiveTab("overview")}
+                title="Overview"
+              />
+              <TabButton
+                className={activeTab == "guidance" ? "active" : ""}
+                onClick={() => setActiveTab("guidance")}
+                title="Guidance"
+              />
+              <TabButton
+                className={activeTab == "code" ? "active" : ""}
+                onClick={() => setActiveTab("code")}
+                title="Code"
+              />
+            </div>
+            {activeTab === "overview" && <TextInputOverview />}
+            {activeTab === "guidance" && <TextInputGuidance />}
+            {activeTab === "code" && <TextInputCode />}
+          </div>
+          <SistentPagination />
+        </Container>
+        <IntraPage contents={contents()} />
+      </div>
+    </SistentWrapper>
+  );
+};
+
+export default SistentTextInput;

src/sections/Projects/Sistent/components/text-input/overview.js

@@ -0,0 +1,95 @@
+import React from "react";
+
+import { SistentThemeProvider, Input } from "@layer5/sistent";
+import { Row } from "../../../../../reusecore/Layout";
+
+export const TextInputOverview = () => {
+  return (
+    <div className="main-content">
+      <p>
+        Text inputs are important elements that help users interact with an
+        experience by providing text commands that will in turn return expected
+        results. These commands can range from providing a free range of
+        personal information to entering a limited number of characters for a
+        use case.
+      </p>
+      <a id="Design">
+        <h2>Design</h2>
+      </a>
+      <p>
+        Instead of various types for use across designs, the text input has just
+        one type to ensure simplicity and efficiency. It is preferable that
+        inputs are as minimal as possible since the sole function that they
+        generally perform is to ensure that users are able to send in data and
+        receive corresponding information.
+      </p>
+      <Row Hcenter>
+        <SistentThemeProvider>
+          <Input placeholder="Placeholder goes here" type="text" />
+        </SistentThemeProvider>
+      </Row>
+      <a id="Sizes">
+        <h2>Sizes</h2>
+      </a>
+      <p>
+        Since input fields have a responsive width that adjusts depending on the
+        need and use case, size considerations are mostly directed at the height
+        of the field. This means that the size of text inputs adjust only
+        relative to the height of the text field. Because text inputs are mostly
+        used in tandem with buttons, to ensure design consistency, text inputs
+        and buttons have similar size requirements.
+      </p>
+      <h3>56px / 3.5rem</h3>
+      <p>
+        The 56px text input is the first field size. It is the largest text
+        input available for use and it is available for both mobile and desktop
+        resolutions, but it serves in different capacities across these
+        different resolutions.
+      </p>
+      <Row Hcenter>
+        <SistentThemeProvider>
+          <Input
+            placeholder="Placeholder goes here"
+            type="text"
+            size="medium"
+          />
+        </SistentThemeProvider>
+      </Row>
+      <h3>48px / 3rem</h3>
+      <p>
+        The 48px text input is the second field size in use and it is available
+        from mobile to desktop resolutions, even though it serves in different
+        capacities across these screen sizes.
+      </p>
+      <Row Hcenter>
+        <SistentThemeProvider>
+          <Input placeholder="Placeholder goes here" type="text" size="small" />
+        </SistentThemeProvider>
+      </Row>
+      <p>
+        <strong>NOTE:</strong>
+      </p>
+      <p>
+        These sizes are being specified with numerical values because though the
+        same size is used across screen resolutions, they have different roles.
+        On desktop for instance, the 56px text input is a the default size, and
+        48px the small size, while on mobile, 56px is large and 48px is the
+        default size. Preferred text input sizes (height) are usually arrived at
+        through exploration and proper consideration of industry standards and
+        best practices.
+      </p>
+      <a id="Adding Icons">
+        <h2>Adding Icons</h2>
+      </a>
+      <p>
+        Icons can be used often in text inputs to aid in understanding the
+        required parameters for a given field or to provide options that can
+        help to improve the experience as a user navigates a given set of text
+        inputs. Depending on the context, icons can be placed on the left and
+        right at different times or even at the same time. The icons should be
+        aligned to the left or right side of the input field and not to the
+        center, while text remains left aligned.
+      </p>
+    </div>
+  );
+};