From 31fa4f6a83ef63dd7dfa830b8902d4221f8d8c73 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 10 Feb 2026 10:45:57 +0100 Subject: [PATCH 1/3] Add Phone Number Validation Guidelines page --- .../principles/validation-guidelines.tsx | 13 ++ apps/website/screens/common/pagesList.tsx | 1 + .../ValidationGuidelinesPage.tsx | 158 ++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 apps/website/pages/principles/validation-guidelines.tsx create mode 100644 apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx diff --git a/apps/website/pages/principles/validation-guidelines.tsx b/apps/website/pages/principles/validation-guidelines.tsx new file mode 100644 index 000000000..613309893 --- /dev/null +++ b/apps/website/pages/principles/validation-guidelines.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import ValidationGuidelinesPage from "screens/principles/validation-guidelines/ValidationGuidelinesPage"; + +const ValidationGuidelines = () => ( + <> + + Validation Guidelines — Halstack Design System + + + +); + +export default ValidationGuidelines; diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 32f1f9f99..a3871a266 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -39,6 +39,7 @@ const utilitiesLinks: LinkDetails[] = [ const principlesLinks: LinkDetails[] = [ { label: "Data visualization", path: "/principles/data-visualization", icon: "insert_chart" }, { label: "Localization", path: "/principles/localization", icon: "language" }, + { label: "Validation guidelines", path: "/principles/validation-guidelines", icon: "check_circle" }, ]; const tokensLinks: LinkDetails[] = [ diff --git a/apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx b/apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx new file mode 100644 index 000000000..5cfbce644 --- /dev/null +++ b/apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx @@ -0,0 +1,158 @@ +import CodeBlock from "@/common/CodeBlock"; +import DocFooter from "@/common/DocFooter"; +import PageHeading from "@/common/PageHeading"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import { DxcHeading, DxcFlex, DxcParagraph, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react"; + +const sections = [ + { + title: "Phone Number Validation", + subSections: [ + { + title: "Overview", + content: ( + <> + + Phone number validation should be based on the ITU-E.164 international standard and country-specific + numbering plans. This ensures consistency across all Halstack applications without requiring each team to + implement custom validation logic. + + + ), + }, + { + title: "ITU-E.164 Standard", + content: ( + <> + The ITU-E.164 defines the international format for telephone numbers. + + + + Format: "[+][Country Code][National Number]" + + + Maximum length: 15 digits (excluding the + symbol) + + + Country code: 1 to 3 digits + + + National number: Variable length depending on country + + + + ), + }, + { + title: "Country-Specific Examples", + content: ( + <> + + + + Country + Country Code + Length + Example + + + + + Spain + +34 + 9 digits + +34912345678 + + + United States + +1 + 10 digits + +15551234567 + + + United Kingdom + +44 + 10 digits + +447912345678 + + + Germany + +49 + 10-11 digits + +4915123456789 + + + France + +33 + 9 digits + +33612345678 + + + + + ), + }, + { + title: "Implementation", + content: ( + <> + + We strongly recommend using established libraries instead of custom validation: + + + + {`import { isValidPhoneNumber } from "libphonenumber-js" + +const isValid = isValidPhoneNumber("+34912345678", "ES")`} + + + ), + }, + { + title: "Best Practices", + content: ( + <> + + Accept multiple input formats (spaces, dashes, parentheses) + Provide specific error messages + Include a country code selector + Validate on blur, not on every keystroke + Use international format by default + + + ), + }, + { + title: "Why not custom JSON/Regex validation?", + content: ( + <> + Maintaining validation rules for 200+ countries is impractical due to: + + + Frequent changes in numbering plans + Complexity of country-specific rules (length, prefixes, etc.) + High risk of errors and inconsistencies + High maintenance overhead for updates and edge cases + + + Established libraries handle this complexity and receive regular updates. + + ), + }, + ], + }, +]; + +const ValidationGuidelinesPage = () => ( + + + + + + + + + +); + +export default ValidationGuidelinesPage; From ef49bc952c90d5b03733346aceac49426a81e2de Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 10 Feb 2026 11:52:01 +0100 Subject: [PATCH 2/3] Remove unnecesary changes --- .../principles/validation-guidelines.tsx | 13 -- apps/website/screens/common/pagesList.tsx | 1 - .../ValidationGuidelinesPage.tsx | 158 ------------------ 3 files changed, 172 deletions(-) delete mode 100644 apps/website/pages/principles/validation-guidelines.tsx delete mode 100644 apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx diff --git a/apps/website/pages/principles/validation-guidelines.tsx b/apps/website/pages/principles/validation-guidelines.tsx deleted file mode 100644 index 613309893..000000000 --- a/apps/website/pages/principles/validation-guidelines.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import Head from "next/head"; -import ValidationGuidelinesPage from "screens/principles/validation-guidelines/ValidationGuidelinesPage"; - -const ValidationGuidelines = () => ( - <> - - Validation Guidelines — Halstack Design System - - - -); - -export default ValidationGuidelines; diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index a3871a266..32f1f9f99 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -39,7 +39,6 @@ const utilitiesLinks: LinkDetails[] = [ const principlesLinks: LinkDetails[] = [ { label: "Data visualization", path: "/principles/data-visualization", icon: "insert_chart" }, { label: "Localization", path: "/principles/localization", icon: "language" }, - { label: "Validation guidelines", path: "/principles/validation-guidelines", icon: "check_circle" }, ]; const tokensLinks: LinkDetails[] = [ diff --git a/apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx b/apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx deleted file mode 100644 index 5cfbce644..000000000 --- a/apps/website/screens/principles/validation-guidelines/ValidationGuidelinesPage.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import CodeBlock from "@/common/CodeBlock"; -import DocFooter from "@/common/DocFooter"; -import PageHeading from "@/common/PageHeading"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import { DxcHeading, DxcFlex, DxcParagraph, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react"; - -const sections = [ - { - title: "Phone Number Validation", - subSections: [ - { - title: "Overview", - content: ( - <> - - Phone number validation should be based on the ITU-E.164 international standard and country-specific - numbering plans. This ensures consistency across all Halstack applications without requiring each team to - implement custom validation logic. - - - ), - }, - { - title: "ITU-E.164 Standard", - content: ( - <> - The ITU-E.164 defines the international format for telephone numbers. - - - - Format: "[+][Country Code][National Number]" - - - Maximum length: 15 digits (excluding the + symbol) - - - Country code: 1 to 3 digits - - - National number: Variable length depending on country - - - - ), - }, - { - title: "Country-Specific Examples", - content: ( - <> - - - - Country - Country Code - Length - Example - - - - - Spain - +34 - 9 digits - +34912345678 - - - United States - +1 - 10 digits - +15551234567 - - - United Kingdom - +44 - 10 digits - +447912345678 - - - Germany - +49 - 10-11 digits - +4915123456789 - - - France - +33 - 9 digits - +33612345678 - - - - - ), - }, - { - title: "Implementation", - content: ( - <> - - We strongly recommend using established libraries instead of custom validation: - - - - {`import { isValidPhoneNumber } from "libphonenumber-js" - -const isValid = isValidPhoneNumber("+34912345678", "ES")`} - - - ), - }, - { - title: "Best Practices", - content: ( - <> - - Accept multiple input formats (spaces, dashes, parentheses) - Provide specific error messages - Include a country code selector - Validate on blur, not on every keystroke - Use international format by default - - - ), - }, - { - title: "Why not custom JSON/Regex validation?", - content: ( - <> - Maintaining validation rules for 200+ countries is impractical due to: - - - Frequent changes in numbering plans - Complexity of country-specific rules (length, prefixes, etc.) - High risk of errors and inconsistencies - High maintenance overhead for updates and edge cases - - - Established libraries handle this complexity and receive regular updates. - - ), - }, - ], - }, -]; - -const ValidationGuidelinesPage = () => ( - - - - - - - - - -); - -export default ValidationGuidelinesPage; From cc207ac2b30729ef0fa5bfa9366e099c90ecc69b Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 10 Feb 2026 13:25:26 +0100 Subject: [PATCH 3/3] Add Phone Number Validation example and guidelines to TextInputOverviewPage --- .../code/examples/phoneNumberValidation.tsx | 40 +++++++++++++++++++ .../overview/TextInputOverviewPage.tsx | 22 +++++++++- 2 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 apps/website/screens/components/text-input/code/examples/phoneNumberValidation.tsx 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. + + + + + + ), + }, ], }, ];