feat(text-input): add new next component

docs/validations.mdx

@@ -64,6 +64,9 @@ Component props that are not supported if the opt-in flag is set to true are lab
 The legacy validation pattern is still available for use, but we recommend using the new validation pattern for a more consistent and user-friendly experience.
 This pattern uses tooltips to provide feedback to users about the state of their input.
 
+The `Textbox` component is used below for documentation purposes, but it is recommend to use the new `TextInput` component instead which only uses the new validation pattern 
+by default.
+
 #### States
 
 Each input component that supports validations accepts the following props - `error`, `warning` and `info`.
@@ -117,7 +120,7 @@ For more information on how to use React Hook Form, please refer to the [React H
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import Button from 'carbon-react/lib/components/button';
 import Form from 'carbon-react/lib/components/form';
-import Textbox from 'carbon-react/lib/components/textbox';
+import TextInput from 'carbon-react/lib/components/textbox/__next__';
 
 interface FormValues {
   name: string;
@@ -146,7 +149,7 @@ const MyForm = () => {
           required: 'Name is required',
         }}
         render={({ field: { onChange, onBlur, value }, fieldState }) => (
-          <Textbox
+          <TextInput
             label="Name"
             required
             value={value}
@@ -167,4 +170,3 @@ export default MyForm;
 
 For legacy projects who still use Formik, please refer to our previous documentation on using 
 [Formik](https://carbon.sage.com/v/154.0.0/index.html?path=/docs/documentation-validations--docs#formik-overview) with Carbon components.
-

docs/validations.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import Textbox from "../src/components/textbox";
+import TextInput from "../src/components/textbox/__next__";
 import { RadioButton, RadioButtonGroup } from "../src/components/radio-button";
 import { Checkbox, CheckboxGroup } from "../src/components/checkbox";
 import CarbonProvider from "../src/components/carbon-provider";
@@ -134,15 +135,15 @@ export const ValidationRedesign: StoryObj = () => {
         <RequiredFieldsIndicator mb={2}>
           Fill in all fields marked with
         </RequiredFieldsIndicator>
-        <Textbox
+        <TextInput
           label="Textbox"
           inputHint="Hint text"
           value={state}
           onChange={(e) => setState(e.target.value)}
           required
           error="Error Message (Fix is required)"
         />
-        <Textbox
+        <TextInput
           label="Textbox"
           inputHint="Hint text"
           value={state}

src/__internal__/validation-message/__next__/index.ts

@@ -0,0 +1 @@
+export { default } from "./validation-message.component";

src/__internal__/validation-message/__next__/validation-message.component.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import StyledValidationMessage from "./validation-message.style";
+import tagComponent, {
+  TagProps,
+} from "../../../__internal__/utils/helpers/tags";
+
+export interface ValidationMessageProps extends TagProps {
+  /**
+   * If true, displays error styling. If passed as a valid string, displays error styling
+   * and the message as children.
+   */
+  error?: boolean | string;
+  /** Id of the component, to be used for accessibility purposes */
+  id?: string;
+  /**
+   * If true, displays warning styling. If passed as a valid string, displays warning styling
+   * and the message as children.
+   */
+  warning?: boolean | string;
+  /** If true, uses large font size */
+  isLarge?: boolean;
+}
+
+const ValidationMessage = ({
+  error,
+  id,
+  warning,
+  "data-element": dataElement,
+  "data-role": dataRole = "validation-message",
+  isLarge,
+}: ValidationMessageProps) => {
+  const validation = error || warning;
+  const isStringValidation = typeof validation === "string";
+
+  return isStringValidation ? (
+    <StyledValidationMessage
+      id={id}
+      isError={Boolean(error)}
+      {...tagComponent("validation-message", {
+        "data-element": dataElement,
+        "data-role": dataRole,
+      })}
+      isLarge={isLarge}
+    >
+      {validation}
+    </StyledValidationMessage>
+  ) : null;
+};
+
+export default ValidationMessage;

src/__internal__/validation-message/__next__/validation-message.style.ts

@@ -0,0 +1,38 @@
+import styled, { css } from "styled-components";
+
+interface StyledValidationMessageProps {
+  isError?: boolean;
+  isDarkBackground?: boolean;
+  isLarge?: boolean;
+}
+
+const StyledValidationMessage = styled.span<StyledValidationMessageProps>`
+  ${({ isError, isLarge }) => {
+    return css`
+      display: flex;
+      align-items: center;
+      align-content: center;
+      align-self: stretch;
+      flex-wrap: wrap;
+      margin: 0px;
+
+      margin: 0px;
+
+      color: ${isError
+        ? "var(--input-validation-label-error)"
+        : "var(--input-validation-label-warn)"};
+
+      font-family: var(--fontFamiliesDefault);
+
+      font-size: ${isLarge
+        ? "var(--global-font-static-body-regular-l)"
+        : "var(--global-font-static-body-regular-m)"};
+
+      font-style: normal;
+      font-weight: ${isError ? "500" : "400"};
+      line-height: 150%;
+    `;
+  }}
+`;
+
+export default StyledValidationMessage;

src/__internal__/validation-message/__next__/validation-message.test.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ValidationMessage from ".";
+
+test("should not render when neither error nor warning is provided", () => {
+  render(<ValidationMessage data-role="validation-message" />);
+  expect(screen.queryByTestId("validation-message")).not.toBeInTheDocument();
+});
+
+test("should render when error is a string", () => {
+  render(<ValidationMessage error="Error message" />);
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toBeVisible();
+});
+
+test("should render when warning is a string", () => {
+  render(<ValidationMessage warning="Warning message" />);
+  const validationMessage = screen.getByText("Warning message");
+  expect(validationMessage).toBeVisible();
+});
+
+test("should render with id attribute", () => {
+  render(<ValidationMessage id="validation-error-1" error="Error message" />);
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toHaveAttribute("id", "validation-error-1");
+});
+
+test("should support custom data-role attribute", () => {
+  render(
+    <ValidationMessage error="Error occurred" data-role="custom-validation" />,
+  );
+  const validationMessage = screen.getByTestId("custom-validation");
+  expect(validationMessage).toBeVisible();
+});
+
+test("should support data-element attribute", () => {
+  render(
+    <ValidationMessage error="Error message" data-element="validation-error" />,
+  );
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toHaveAttribute("data-element", "validation-error");
+});
+
+test("should apply error color when error is provided", () => {
+  render(<ValidationMessage error="Error message" />);
+  const validationMessage = screen.getByText("Error message");
+
+  expect(validationMessage).toHaveStyle(
+    "color: var(--input-validation-label-error)",
+  );
+});
+
+test("should apply error font-weight", () => {
+  render(<ValidationMessage error="Error message" />);
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toHaveStyle("font-weight: 500");
+});
+
+test("should apply warning color when warning is provided", () => {
+  render(<ValidationMessage warning="Warning message" />);
+  const validationMessage = screen.getByText("Warning message");
+  expect(validationMessage).toHaveStyle(
+    "color: var(--input-validation-label-warn)",
+  );
+});
+
+test("should apply warning font-weight", () => {
+  render(<ValidationMessage warning="Warning message" />);
+  const validationMessage = screen.getByText("Warning message");
+  expect(validationMessage).toHaveStyle("font-weight: 400");
+});
+
+test("should apply medium font size by default for error", () => {
+  render(<ValidationMessage error="Error message" />);
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toHaveStyle(
+    "font-size: var(--global-font-static-body-regular-m)",
+  );
+});
+
+test("should apply large font size when isLarge is true for error", () => {
+  render(<ValidationMessage error="Error message" isLarge={true} />);
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toHaveStyle(
+    "font-size: var(--global-font-static-body-regular-l)",
+  );
+});
+
+test("should apply medium font size by default for warning", () => {
+  render(<ValidationMessage warning="Warning message" />);
+  const validationMessage = screen.getByText("Warning message");
+  expect(validationMessage).toHaveStyle(
+    "font-size: var(--global-font-static-body-regular-m)",
+  );
+});
+
+test("should apply large font size when isLarge is true for warning", () => {
+  render(<ValidationMessage warning="Warning message" isLarge={true} />);
+  const validationMessage = screen.getByText("Warning message");
+  expect(validationMessage).toHaveStyle(
+    "font-size: var(--global-font-static-body-regular-l)",
+  );
+});
+
+test("should prioritize error over warning when both provided", () => {
+  render(<ValidationMessage error="Error message" warning="Warning message" />);
+  expect(screen.getByText("Error message")).toBeVisible();
+  expect(screen.queryByText("Warning message")).not.toBeInTheDocument();
+});
+
+test("should apply error styling when both error and warning strings are provided", () => {
+  render(<ValidationMessage error="Error message" warning="Warning message" />);
+  const validationMessage = screen.getByText("Error message");
+  expect(validationMessage).toHaveStyle(
+    "color: var(--input-validation-label-error)",
+  );
+  expect(validationMessage).toHaveStyle("font-weight: 500");
+});

src/components/textbox/__next__/__internal__/error-border/error-border.style.ts

@@ -0,0 +1,18 @@
+import styled, { css } from "styled-components";
+
+const ErrorBorder = styled.span`
+  ${({ warning }: { warning: boolean }) => css`
+    width: 2px;
+    position: absolute;
+    left: -10px;
+    top: 0px;
+    bottom: 0px;
+    z-index: 6;
+    background-color: ${warning
+      ? "var(--input-validation-bar-warn)"
+      : "var(--input-validation-border-error)"};
+  `}
+  transform: scaleX(1);
+`;
+
+export default ErrorBorder;

src/components/textbox/__next__/__internal__/error-border/error-border.test.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ErrorBorder from "./error-border.style";
+
+test("when `warning` is true should render with warning background colour", () => {
+  render(<ErrorBorder data-role="error-border" warning />);
+
+  expect(screen.getByTestId("error-border")).toHaveStyleRule(
+    "background-color",
+    "var(--input-validation-bar-warn)",
+  );
+});
+
+test("when `warning` is false should render with error background colour", () => {
+  render(<ErrorBorder data-role="error-border" warning={false} />);
+
+  expect(screen.getByTestId("error-border")).toHaveStyleRule(
+    "background-color",
+    "var(--input-validation-border-error)",
+  );
+});

src/components/textbox/__next__/__internal__/hint-text/hint-text.component.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import StyledHintText from "./hint-text.style";
+
+export interface HintTextProps {
+  /** Children elements */
+  children?: React.ReactNode;
+  /** Sets the id for the component */
+  id?: string;
+  /** If true, uses large font size */
+  isLarge?: boolean;
+  /** If true, the hint text will display in disabled styling */
+  disabled?: boolean;
+}
+
+export const HintText = ({
+  children,
+  id,
+  isLarge,
+  disabled,
+}: HintTextProps) => {
+  return (
+    <StyledHintText
+      data-element="input-hint"
+      data-role="hint-text"
+      id={id}
+      isLarge={isLarge}
+      disabled={disabled}
+    >
+      {children}
+    </StyledHintText>
+  );
+};
+
+export default HintText;

src/components/textbox/__next__/__internal__/hint-text/hint-text.style.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+interface StyledHintTextProps {
+  isLarge?: boolean;
+  disabled?: boolean;
+}
+
+const StyledHintText = styled.span<StyledHintTextProps>`
+  color: ${({ disabled }) =>
+    disabled
+      ? "var(--input-labelset-label-disabled)"
+      : "var(--input-labelset-label-alt)"};
+
+  font-family: var(--fontFamiliesDefault);
+
+  font-size: ${({ isLarge }) =>
+    isLarge
+      ? "var(--global-font-static-body-regular-l)"
+      : "var(--global-font-static-body-regular-m)"};
+
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+`;
+
+export default StyledHintText;