Add Validation for Phone Numbers from Denmark, Germany, and Greenland

- Adjusted the input type to 'tel' to enhance phone number input handling.
- Introduced new properties to `TextInput` to facilitate the validation of phone numbers, with specific enhancements:
- `pattern`: A regex implemented to match phone numbers originating from Denmark, Germany, and Greenland.
- `title`: used to display an error message in most browsers when the input does not adhere to the specified pattern.
- Employed the same text for the `placeholder` as the error message to inform users about the accepted phone number formats.

pattern:
* (\+45|0045)[0-9]{8}: Matches a Denmark phone number: country code +45, followed by 8 digits.
* (\+49|0049)[0-9]{7,11}: Matches a German phone number: country code +49, followed by between 7 and 11 digits.
* (\+299|00299)[0-9]{6}: Matches a Greenland phone number: country code +299, followed by 6 digits.

src/apps/patron-page/PatronPage.dev.tsx

@@ -239,6 +239,11 @@ export default {
     patronPageStatusSectionOutOfAriaLabelEbooksText: {
       defaultValue: "You used @this ebooks out of you quota of @that ebooks",
       control: { type: "text" }
+    },
+    phoneInputMessageText: {
+      defaultValue:
+        "The phone number should be from Denmark (+45), Germany (+49), or Greenland (+299)",
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof PatronPage>;

src/apps/patron-page/PatronPage.entry.tsx

@@ -70,6 +70,7 @@ interface PatronPageTextProps {
   patronPageStatusSectionOutOfText: string;
   patronPageStatusSectionOutOfAriaLabelAudioBooksText: string;
   patronPageStatusSectionOutOfAriaLabelEbooksText: string;
+  phoneInputMessageText: string;
 }
 
 export interface PatronPageProps

src/components/atoms/input/TextInput.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 
 export interface TextInputProps {
   label: string;
-  type: "text" | "password" | "number" | "email";
+  type: "text" | "password" | "number" | "email" | "tel";
   id: string;
   required?: boolean;
   description?: string;
@@ -12,6 +12,8 @@ export interface TextInputProps {
   className?: string;
   pattern?: string;
   inputmode?: "numeric";
+  title?: string;
+  placeholder?: string;
 }
 
 const TextInput: FC<TextInputProps> = ({
@@ -25,7 +27,9 @@ const TextInput: FC<TextInputProps> = ({
   className,
   pattern,
   inputmode,
-  required
+  required,
+  title,
+  placeholder
 }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value);
@@ -44,6 +48,8 @@ const TextInput: FC<TextInputProps> = ({
         onChange={handleChange}
         value={value}
         aria-labelledby={validation ? `validation-${id}` : ""}
+        title={title}
+        placeholder={placeholder}
       />
       {description && (
         <div className="dpl-input__description" id={`description-${id}`}>

src/components/contact-info-section/ContactInfoPhone.tsx

@@ -28,12 +28,15 @@ const ContactInfoPhone: FC<ContactInfoPhoneProps> = ({
         className={className}
         id="phone-input"
         required={isRequired}
-        type="number"
+        type="tel"
+        pattern="(\+45|0045)[0-9]{8}|(\+49|0049)[0-9]{7,11}|(\+299|00299)[0-9]{6}"
+        title={t("phoneInputMessageText")}
         onChange={(newPhoneNumber) =>
           changePatron(newPhoneNumber, "phoneNumber")
         }
         value={patron?.phoneNumber}
         label={t("patronContactPhoneLabelText")}
+        placeholder={t("phoneInputMessageText")}
       />
       {showCheckboxes && (
         <CheckBox