Merge pull request #1250 from nsbno/phonenumberinput-optional

Added the option to display optional phone number
nsbno · Aug 26, 2024 · ad91d4f · ad91d4f
2 parents 572fc31 + 06f8d91
commit ad91d4f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/chilled-cheetahs-applaud.md b/.changeset/chilled-cheetahs-applaud.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+PhoneNumberInput: Added the option to display the input as optional
diff --git a/packages/spor-react/src/input/PhoneNumberInput.tsx b/packages/spor-react/src/input/PhoneNumberInput.tsx
@@ -25,6 +25,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   /** The optional value of the country code and phone number */
   value?: CountryCodeAndPhoneNumber;
   variant?: "base" | "floating";
+  isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -51,12 +52,16 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       value: externalValue,
       onChange: externalOnChange,
       variant,
+      isOptional,
       ...boxProps
     },
     ref,
   ) => {
     const { t } = useTranslation();
-    const label = externalLabel ?? t(texts.phoneNumber);
+    const label =
+      externalLabel ?? isOptional
+        ? t(texts.phoneNumberOptional)
+        : t(texts.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -125,6 +130,12 @@ const texts = createTexts({
     en: "Phone number",
     sv: "Telefonnummer",
   },
+  phoneNumberOptional: {
+    nb: "Telefonnummer (valgfritt)",
+    nn: "Telefonnummer (valgfritt)",
+    en: "Phone number (optional)",
+    sv: "Telefonnummer (valfritt)",
+  },
   countryCodeLabel: {
     nb: "Landskode",
     nn: "Landskode",