feat: add help text to switch component (#1202)

Author: anusha-c18

src/components/Stepper/Step/Step.scss

@@ -85,7 +85,7 @@
   }
 }
 
-.stepper-vertical {
+.stepper-vertical:not(.stepper-horizontal) {
   .p-list__item {
     padding-bottom: 0;
     padding-top: 0;

src/components/Switch/Switch.scss

@@ -0,0 +1,3 @@
+.switch-help-text {
+  margin-left: 2.5rem;
+}

src/components/Switch/Switch.stories.tsx

@@ -27,3 +27,12 @@ export const Disabled: Story = {
     label: "Disabled switch",
   },
 };
+
+export const HelpText: Story = {
+  name: "Help Text",
+
+  args: {
+    label: "Switch with help text",
+    help: "This is some help text",
+  },
+};

src/components/Switch/Switch.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 // import userEvent from "@testing-library/user-event";
 
 import Switch from "./Switch";
@@ -32,4 +32,12 @@ describe("<Switch />", () => {
       "disabled",
     );
   });
+
+  it("renders a switch with help text", () => {
+    render(
+      <Switch label="Switch with help text" help="This is some help text" />,
+    );
+
+    expect(screen.getByText("This is some help text")).toBeInTheDocument();
+  });
 });

src/components/Switch/Switch.tsx

@@ -1,7 +1,9 @@
 import React from "react";
+import classNames from "classnames";
 import type { HTMLProps, ReactNode } from "react";
-
 import type { PropsWithSpread } from "types";
+import { useId } from "react";
+import "./Switch.scss";
 
 export type Props = PropsWithSpread<
   {
@@ -13,6 +15,14 @@ export type Props = PropsWithSpread<
      * Whether the switch is disabled or not
      */
     disabled?: boolean;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
   },
   HTMLProps<HTMLInputElement>
 >;
@@ -23,20 +33,38 @@ export type Props = PropsWithSpread<
 export const Switch = ({
   label,
   disabled = false,
+  help,
+  helpClassName,
   ...inputProps
 }: Props): React.JSX.Element => {
+  const helpId = useId();
+
   return (
-    <label className="p-switch">
-      <input
-        type="checkbox"
-        className="p-switch__input"
-        role="switch"
-        disabled={disabled}
-        {...inputProps}
-      ></input>
-      <span className="p-switch__slider"></span>
-      <span className="p-switch__label">{label}</span>
-    </label>
+    <>
+      <label className="p-switch">
+        <input
+          type="checkbox"
+          className="p-switch__input"
+          role="switch"
+          disabled={disabled}
+          {...inputProps}
+        ></input>
+        <span className="p-switch__slider"></span>
+        <span className="p-switch__label">{label}</span>
+      </label>
+      {help && (
+        <p
+          className={classNames(
+            "p-form-help-text",
+            "switch-help-text",
+            helpClassName,
+          )}
+          id={helpId}
+        >
+          {help}
+        </p>
+      )}
+    </>
   );
 };