Merge pull request #7081 from helper-uttam/feat/form-control-label-single-commit

feat(form-control-label): add form control label and update navigation

Author: Rajesh-Nagarajan-11

src/components/SistentNavigation/content.js

@@ -37,92 +37,90 @@ export const content = [
   { id: 26, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
   { id: 27, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
 
-  { id: 25, link: "/projects/sistent/components/chip", text: "Chip" },
-  { id: 26, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
-  { id: 27, link: "/projects/sistent/components/chip/code", text: "Chip" },
+  { id: 28, link: "/projects/sistent/components/chip", text: "Chip" },
+  { id: 29, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
+  { id: 30, link: "/projects/sistent/components/chip/code", text: "Chip" },
 
-  { id: 28, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 29, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 30, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
+  { id: 31, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
+  { id: 32, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
+  { id: 33, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
 
-  { id: 31, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 32, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 33, link: "/projects/sistent/components/container/code", text: "Container" },
+  { id: 34, link: "/projects/sistent/components/container", text: "Container" },
+  { id: 35, link: "/projects/sistent/components/container/guidance", text: "Container" },
+  { id: 36, link: "/projects/sistent/components/container/code", text: "Container" },
 
-  { id: 34, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 35, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
-  { id: 36, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
+  { id: 37, link: "/projects/sistent/components/dialog", text: "Dialog" },
+  { id: 38, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
+  { id: 39, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
 
-  { id: 37, link: "/projects/sistent/components/grid", text: "Grid" },
-  { id: 38, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
-  { id: 39, link: "/projects/sistent/components/grid/code", text: "Grid" },
+  { id: 40, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
+  { id: 41, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
+  { id: 42, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
 
-  { id: 40, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
-  { id: 41, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
-  { id: 42, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
+  { id: 43, link: "/projects/sistent/components/grid", text: "Grid" },
+  { id: 44, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
+  { id: 45, link: "/projects/sistent/components/grid/code", text: "Grid" },
 
-  { id: 43, link: "/projects/sistent/components/icons", text: "Icons" },
+  { id: 46, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
+  { id: 47, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
+  { id: 48, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
 
-  { id: 44, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 45, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 46, link: "/projects/sistent/components/link/code", text: "Link" },
+  { id: 49, link: "/projects/sistent/components/icons", text: "Icons" },
 
-  { id: 47, link: "/projects/sistent/components/list", text: "List" },
-  { id: 48, link: "/projects/sistent/components/list/guidance", text: "List" },
-  { id: 49, link: "/projects/sistent/components/list/code", text: "List" },
+  { id: 50, link: "/projects/sistent/components/link", text: "Link" },
+  { id: 51, link: "/projects/sistent/components/link/guidance", text: "Link" },
+  { id: 52, link: "/projects/sistent/components/link/code", text: "Link" },
 
-  { id: 50, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 51, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 52, link: "/projects/sistent/components/modal/code", text: "Modal" },
+  { id: 53, link: "/projects/sistent/components/list", text: "List" },
+  { id: 54, link: "/projects/sistent/components/list/guidance", text: "List" },
+  { id: 55, link: "/projects/sistent/components/list/code", text: "List" },
 
-  { id: 53, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 54, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 55, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
+  { id: 56, link: "/projects/sistent/components/modal", text: "Modal" },
+  { id: 57, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
+  { id: 58, link: "/projects/sistent/components/modal/code", text: "Modal" },
 
-  { id: 56, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 57, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 58, link: "/projects/sistent/components/paper/code", text: "Paper" },
+  { id: 59, link: "/projects/sistent/components/pagination", text: "Pagination" },
+  { id: 60, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
+  { id: 61, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
 
-  { id: 59, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 60, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 61, link: "/projects/sistent/components/popper/code", text: "Popper" },
+  { id: 62, link: "/projects/sistent/components/paper", text: "Paper" },
+  { id: 63, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
+  { id: 64, link: "/projects/sistent/components/paper/code", text: "Paper" },
 
-  { id: 62, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 63, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 64, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
+  { id: 65, link: "/projects/sistent/components/popper", text: "Popper" },
+  { id: 66, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
+  { id: 67, link: "/projects/sistent/components/popper/code", text: "Popper" },
 
-  { id: 65, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 66, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 67, link: "/projects/sistent/components/select/code", text: "Select" },
+  { id: 68, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
+  { id: 69, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
+  { id: 70, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
 
-  { id: 68, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 69, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 70, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
+  { id: 71, link: "/projects/sistent/components/select", text: "Select" },
+  { id: 72, link: "/projects/sistent/components/select/guidance", text: "Select" },
+  { id: 73, link: "/projects/sistent/components/select/code", text: "Select" },
 
-  { id: 71, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 72, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 73, link: "/projects/sistent/components/switch/code", text: "Switch" },
+  { id: 74, link: "/projects/sistent/components/switch", text: "Switch" },
+  { id: 75, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
+  { id: 76, link: "/projects/sistent/components/switch/code", text: "Switch" },
 
-  { id: 74, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 75, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 76, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
+  { id: 77, link: "/projects/sistent/components/tabs", text: "Tabs" },
+  { id: 78, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
+  { id: 79, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
 
-  { id: 77, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 78, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 79, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
+  { id: 80, link: "/projects/sistent/components/text-field", text: "Text Field" },
+  { id: 81, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
+  { id: 82, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
 
-  { id: 80, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 81, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 82, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
-
-  { id: 83, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 84, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 85, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
-
-  { id: 86, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 87, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 88, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
+  { id: 83, link: "/projects/sistent/components/text-input", text: "Text Input" },
+  { id: 84, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
+  { id: 85, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
 
+  { id: 86, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
+  { id: 87, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
+  { id: 88, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
 
+  { id: 89, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
+  { id: 90, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
+  { id: 91, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
 
 ];

src/sections/Projects/Sistent/components/content.js

@@ -184,7 +184,7 @@ const componentsData = [
     id: 24,
     name: "Toolbar",
     description:
-    "The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section.",
+      "The toolbar is a horizontal container for grouping interactive elements like buttons, filters, or navigation controls, typically placed at the top of a UI section.",
     url: "/projects/sistent/components/toolbar",
     src: "/toolbar",
   },
@@ -224,7 +224,14 @@ const componentsData = [
     src: "/iconbutton",
   },
   {
-    id: 30,
+    "id": 30,
+    "name": "FormControlLabel",
+    "description": "A control + label pair used for checkboxes or radio buttons.",
+    "url": "/projects/sistent/components/formcontrollabel",
+    "src": "/formcontrollabel",
+  },
+  {
+    id: 31,
     name: "Stepper",
     description: "Stepper provides a way to display progress through a sequence of logical steps.",
     url: "/projects/sistent/components/stepper",

src/sections/Projects/Sistent/components/formcontrollabel/code.js

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import {
+  FormControlLabel,
+  Checkbox,
+  Radio,
+  Switch,
+  SistentThemeProvider
+} from "@sistent/sistent";
+
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { CodeBlock } from "../button/code-block";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `<FormControlLabel
+  control={<Checkbox />}
+  label="Accept Terms"
+/>`,
+  `<FormControlLabel
+  control={<Radio />}
+  label="Option A"
+/>`,
+  `<FormControlLabel
+  control={<Switch />}
+  label="Enable Notifications"
+/>`,
+  `<FormControlLabel
+  control={<Checkbox disabled />}
+  label="Disabled Option"
+  disabled
+/>`
+];
+
+
+const FormControlLabelCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <SistentLayout title="FormControlLabel">
+      <div className="content">
+        <a id="Identity">
+          <h2>FormControlLabel</h2>
+        </a>
+        <p>
+          The <code>FormControlLabel</code> component wraps controls like checkboxes, radios, and switches,
+          adding a label to the right side by default. It improves accessibility and user experience by combining form elements with clear labeling.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/formcontrollabel"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/formcontrollabel")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/formcontrollabel/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/formcontrollabel/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/formcontrollabel/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/formcontrollabel/code")}
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <h3>With Checkbox</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={checked}
+                      onChange={() => setChecked(!checked)}
+                    />
+                  }
+                  label="Accept Terms"
+                />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="formcontrollabel-checkbox" code={codes[0]} />
+          </div>
+
+          <h3>Disabled Example</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <FormControlLabel
+                  control={<Checkbox disabled />}
+                  label="Disabled Option"
+                  disabled
+                />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="formcontrollabel-disabled" code={codes[3]} />
+          </div>
+
+          <h3>With Radio Button</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <FormControlLabel control={<Radio />} label="Option A" />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="formcontrollabel-radio" code={codes[1]} />
+          </div>
+
+          <h3>With Switch</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <FormControlLabel control={<Switch />} label="Enable Notifications" />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="formcontrollabel-switch" code={codes[2]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default FormControlLabelCode;