diff --git a/apps/website/screens/components/text-input/code/examples/phoneNumberValidation.tsx b/apps/website/screens/components/text-input/code/examples/phoneNumberValidation.tsx new file mode 100644 index 000000000..147bbfd63 --- /dev/null +++ b/apps/website/screens/components/text-input/code/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 ( + + + + ); +}`; + +const scope = { + DxcTextInput, + DxcInset, + useState, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx index 0a3702153..f6757eb45 100644 --- a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx +++ b/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 "../code/examples/phoneNumberValidation"; const sections = [ { @@ -323,6 +324,25 @@ const sections = [ ), }, + { + title: "Phone Number Validation", + content: ( + <> + + + Follow ITU-E.164 standards: when validating phone numbers, we recommend following the + + ITU-E.164 + {" "} + 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. + + + + + + ), + }, ], }, ];