[doc] Add guidelines for phone numbre validation

apps/website/screens/components/number-input/overview/NumberInputOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { DxcFlex, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcParagraph, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import DocFooter from "@/common/DocFooter";
 import Image from "@/common/Image";
@@ -8,6 +8,7 @@ import Example from "@/common/example/Example";
 import Figure from "@/common/Figure";
 import prefixSuffix from "./examples/prefixSuffix";
 import Code from "@/common/Code";
+import Link from "next/link";
 
 const sections = [
   {
@@ -272,6 +273,18 @@ const sections = [
           </DxcBulletedList>
         ),
       },
+      {
+        title: "Phone number validation",
+        content: (
+          <DxcParagraph>
+            For more information about this, please go to{" "}
+            <Link href="/components/text-input/#best-practices-phone-number-validation" passHref>
+              <DxcLink newWindow>Phone Number Validation Guide</DxcLink>
+            </Link>
+            .
+          </DxcParagraph>
+        ),
+      },
     ],
   },
 ];

apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import Figure from "@/common/Figure";
 import DocFooter from "@/common/DocFooter";
@@ -9,6 +9,7 @@ import customAction from "./examples/customAction";
 import anatomy from "./images/text_input_anatomy.png";
 import textInputClearContent from "./images/text_input_clear_content.png";
 import textInputAutosuggest from "./images/text_input_autosuggest.png";
+import phoneNumberValidation from "./examples/phoneNumberValidation";
 
 const sections = [
   {
@@ -323,6 +324,25 @@ const sections = [
           </DxcBulletedList>
         ),
       },
+      {
+        title: "Phone Number Validation",
+        content: (
+          <>
+            <DxcBulletedList>
+              <DxcBulletedList.Item>
+                <strong>Follow ITU-E.164 standards:</strong> when validating phone numbers, we recommend following the
+                <DxcLink href="https://www.itu.int/rec/T-REC-E.164/en" newWindow>
+                  ITU-E.164
+                </DxcLink>{" "}
+                international standard and country-specific requirements. The standard defines phone numbers as a
+                country code followed by a national number, with a maximum of 15 digits in total.
+              </DxcBulletedList.Item>
+            </DxcBulletedList>
+
+            <Example example={phoneNumberValidation} />
+          </>
+        ),
+      },
     ],
   },
 ];

apps/website/screens/components/text-input/overview/examples/phoneNumberValidation.tsx

@@ -0,0 +1,40 @@
+import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+  const [value, setValue] = useState("");
+  const [errorMessage, setErrorMessage] = useState();
+
+  const onChange = ({ value, error }) => {
+    setValue(value);
+    setErrorMessage(error == undefined ? "" : "Error onChange: invalid phone number");
+  };
+  const onBlur = ({ value, error }) => {
+    setValue(value);
+    setErrorMessage(error == undefined ? "" : "Error onBlur: invalid phone number");
+  };
+
+  const validPhoneNumber = new RegExp("^\\\\+[1-9]\\\\d{6,14}$");
+
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcTextInput
+        label="Enter your phone number"
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        error={errorMessage}
+        helperText="Format: +[country code][phone number] (e.g., +1234567890)"
+        pattern={validPhoneNumber}
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcTextInput,
+  DxcInset,
+  useState,
+};
+
+export default { code, scope };