feat(prefixedIpInput): add prefixedInput, prefixedIpInput WD-32589

src/components/PrefixedInput/PrefixedInput.scss

@@ -0,0 +1,22 @@
+@import "vanilla-framework";
+
+.prefixed-input {
+  position: relative;
+
+  .prefixed-input__input {
+    padding-top: 0.25rem;
+  }
+
+  .prefixed-input__text {
+    padding-left: $spv--small;
+    padding-top: 0.3rem;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  &--with-label {
+    .prefixed-input__text {
+      top: 2.5rem;
+    }
+  }
+}

src/components/PrefixedInput/PrefixedInput.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PrefixedInput from "./PrefixedInput";
+
+const meta: Meta<typeof PrefixedInput> = {
+  component: PrefixedInput,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PrefixedInput>;
+
+export const Default: Story = {
+  args: {
+    immutableText: "https://",
+    placeholder: "example.com",
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    immutableText: "@",
+    label: "Username",
+    placeholder: "username",
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    error: "Invalid URL format",
+  },
+};
+
+export const WithHelpText: Story = {
+  args: {
+    immutableText: "User ID:",
+    label: "User Identifier",
+    placeholder: " Enter user ID",
+    help: "This will be used to identify your account",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    required: true,
+  },
+};

src/components/PrefixedInput/PrefixedInput.test.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import PrefixedInput, { PrefixedInputProps } from "./PrefixedInput";
+
+// Mock the Input component
+jest.mock("components/Input", () => {
+  return function MockInput(props: PrefixedInputProps) {
+    return <input data-testid="mock-input" type="text" {...props} />;
+  };
+});
+
+jest.mock("classnames", () => {
+  return jest.fn((...args) => {
+    return args
+      .filter(Boolean)
+      .map((arg) => {
+        if (typeof arg === "string") {
+          return arg;
+        }
+        if (typeof arg === "object" && arg !== null) {
+          return Object.keys(arg)
+            .filter((key) => arg[key])
+            .join(" ");
+        }
+        return "";
+      })
+      .filter(Boolean)
+      .join(" ");
+  });
+});
+
+describe("PrefixedInput", () => {
+  beforeEach(() => {
+    // Mock getBoundingClientRect
+    HTMLElement.prototype.getBoundingClientRect = jest.fn(() => ({
+      width: 50,
+      height: 20,
+      top: 0,
+      left: 0,
+      bottom: 20,
+      right: 50,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders the immutable text", () => {
+    const { container } = render(<PrefixedInput immutableText="https://" />);
+    expect(container).toContainHTML("https://");
+  });
+
+  it("passes extra classes to the input element", () => {
+    const { container } = render(
+      <PrefixedInput immutableText="prefix" className="extra-class" />,
+    );
+    const input = container.querySelector("input") as HTMLInputElement;
+    expect(input).toHaveClass("prefixed-input__input extra-class");
+  });
+
+  it("renders with label class when label is provided", () => {
+    const { container } = render(
+      <PrefixedInput immutableText="prefix" label="Test Label" />,
+    );
+    const element = container.querySelector(".prefixed-input");
+    expect(element).toHaveClass("prefixed-input prefixed-input--with-label");
+  });
+
+  it("renders without label class when label is not provided", () => {
+    const { container } = render(<PrefixedInput immutableText="prefix" />);
+    expect(container.querySelector(".prefixed-input--with-label")).toBeNull();
+  });
+
+  it("updates padding on window resize", () => {
+    const { container } = render(<PrefixedInput immutableText="https://" />);
+    const input = container.querySelector("input");
+
+    expect(input?.style.paddingLeft).toBe("50px");
+
+    HTMLElement.prototype.getBoundingClientRect = jest.fn(() => ({
+      width: 100,
+      height: 20,
+      top: 0,
+      left: 0,
+      bottom: 20,
+      right: 100,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    }));
+
+    window.dispatchEvent(new Event("resize"));
+
+    expect(input?.style.paddingLeft).toBe("100px");
+  });
+
+  it("passes additional props to the Input component", () => {
+    const { container } = render(
+      <PrefixedInput
+        immutableText="prefix"
+        placeholder="Enter text"
+        disabled
+      />,
+    );
+    const input = container.querySelector("input");
+    expect(input).toHaveAttribute("placeholder", "Enter text");
+    expect(input).toHaveAttribute("disabled");
+  });
+
+  it("sets input type to text", () => {
+    const { container } = render(<PrefixedInput immutableText="prefix" />);
+    const input = container.querySelector("input");
+    expect(input).toHaveAttribute("type", "text");
+  });
+});

src/components/PrefixedInput/PrefixedInput.tsx

@@ -0,0 +1,78 @@
+import React, { type ReactElement } from "react";
+import { useLayoutEffect, useRef, useCallback } from "react";
+
+import Input, { type InputProps } from "components/Input";
+import classNames from "classnames";
+import "./PrefixedInput.scss";
+import { PropsWithSpread } from "types";
+
+// export type PrefixedInputProps = Omit<InputProps, "type"> & {
+//   /**
+//    * The immutable text that appears at the beginning of the input field.
+//    * This text is not editable by the user and visually appears inside the input.
+//    */
+//   immutableText: string;
+// };
+
+export type PrefixedInputProps = PropsWithSpread<
+  {
+    /**
+     * The immutable text that appears at the beginning of the input field.
+     * This text is not editable by the user and visually appears inside the input.
+     */
+    immutableText: string;
+  },
+  Omit<InputProps, "type">
+>;
+
+const PrefixedInput = ({
+  immutableText,
+  ...props
+}: PrefixedInputProps): ReactElement => {
+  const prefixTextRef = useRef<HTMLDivElement>(null);
+  const inputWrapperRef = useRef<HTMLDivElement>(null);
+
+  const updatePadding = useCallback(() => {
+    const prefixElement = prefixTextRef.current;
+    const inputElement = inputWrapperRef.current?.querySelector("input");
+
+    if (prefixElement && inputElement) {
+      // Adjust the left padding of the input to be the same width as the immutable text.
+      // This displays the user input and the unchangeable text together as one combined string.
+      const prefixWidth = prefixElement.getBoundingClientRect().width;
+      inputElement.style.paddingLeft = `${prefixWidth}px`;
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    updatePadding();
+
+    // Listen for window resize events (includes zoom changes)
+    window.addEventListener("resize", updatePadding);
+  }, [immutableText, props.label, updatePadding]);
+
+  return (
+    <div
+      className={classNames("prefixed-input", {
+        "prefixed-input--with-label": !!props.label,
+      })}
+    >
+      <div className="prefixed-input__text" ref={prefixTextRef}>
+        {immutableText}
+      </div>
+      <div ref={inputWrapperRef}>
+        <Input
+          {...props}
+          className={classNames("prefixed-input__input", props.className)}
+          type="text"
+          wrapperClassName={classNames(
+            "prefixed-input__wrapper",
+            props.wrapperClassName,
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PrefixedInput;

src/components/PrefixedInput/index.ts

@@ -0,0 +1 @@
+export { default, type PrefixedInputProps } from "./PrefixedInput";