Dial code (#2459)

* rename countryCode to dialCode

* begin deprecating countryCode by adding in duplicate dialCode props and updating all examples to use dialCode props

* update props table

* duplicate phone number field tests using dialCode

* update tests

* add required field to phoneNumberFieldProps, added deprecation warning

* update e2e tests

* update phone number field documentation

* rename countrycode files to dialcode

* update angular and vue dial code select name

* update angular and vue to dial code

* return default label to country code and undo e2e test changes

* update unit tests

* update e2e tests to revert change to dial code

* Create swift-kids-help.md

* Update docs/src/pages/[platform]/components/phonenumberfield/react.mdx

add `role="none"` to docs alert

Co-authored-by: Heather Buchel <[email protected]>

* Update swift-kids-help.md

Co-authored-by: Jacob Logan <[email protected]>
Co-authored-by: Heather Buchel <[email protected]>

Author: 3 people

.changeset/swift-kids-help.md

@@ -0,0 +1,17 @@
+---
+"amplify-ui-angular-mono": patch
+"@aws-amplify/ui-react": minor
+"@aws-amplify/ui-angular": patch
+---
+
+Angular: Add `amplify-dialcodeselect` class which contains the previous countrycodeselect styles
+Vue: Add `amplify-dialcodeselect` class which contains the previous countrycodeselect styles
+React: Added 'dialCode' versions of all 'countryCode' props so that users can begin migrating away from the deprecated `countryCode`.
+
+```
+countryCodeLabel => dialCodeLabel
+countryCodeName => dialCodeName
+onCountryCodeChange => onDialCodeChange
+countryCodeRef => dialCodeRef
+defaultCountryCode => defaultDialCode
+```

docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx

@@ -40,8 +40,8 @@ export interface PhoneNumberFieldPropControlsProps
   setValue: (
     value: React.SetStateAction<PhoneNumberFieldProps['value']>
   ) => void;
-  setDefaultCountryCode: (
-    value: React.SetStateAction<PhoneNumberFieldProps['defaultCountryCode']>
+  setDefaultDialCode: (
+    value: React.SetStateAction<PhoneNumberFieldProps['defaultDialCode']>
   ) => void;
 }
 

docs/src/pages/[platform]/components/phonenumberfield/demo.tsx

@@ -9,7 +9,7 @@ import { getPropString } from '../utils/getPropString';
 const propsToCode = (props) => {
   return (
     `<PhoneNumberField` +
-    `\n  defaultCountryCode="${props.defaultCountryCode}"` +
+    `\n  defaultDialCode="${props.defaultDialCode}"` +
     `\n  label="${props.label}"` +
     (props.labelHidden ? `\n  labelHidden` : '') +
     getPropString(props.descriptiveText, 'descriptiveText') +
@@ -25,7 +25,7 @@ const propsToCode = (props) => {
 };
 
 const defaultPhoneNumberFieldProps: PhoneNumberFieldProps = {
-  defaultCountryCode: '+1',
+  defaultDialCode: '+1',
   label: 'Phone number',
   value: '',
   descriptiveText: 'Please enter your phone number',
@@ -51,9 +51,9 @@ export const PhoneNumberFieldDemo = () => {
       <PhoneNumberField
         value={phoneNumberFieldProps.value}
         onChange={(event) => phoneNumberFieldProps.setValue(event.target.value)}
-        defaultCountryCode={phoneNumberFieldProps.defaultCountryCode}
-        onCountryCodeChange={(event) =>
-          phoneNumberFieldProps.setDefaultCountryCode(event.target.value)
+        defaultDialCode={phoneNumberFieldProps.defaultDialCode}
+        onDialCodeChange={(event) =>
+          phoneNumberFieldProps.setDefaultDialCode(event.target.value)
         }
         label={phoneNumberFieldProps.label}
         labelHidden={phoneNumberFieldProps.labelHidden}

docs/src/pages/[platform]/components/phonenumberfield/examples/AccessibilityExample.tsx

@@ -4,8 +4,8 @@ export const AccessibilityExample = () => (
   <PhoneNumberField
     label="Phone Number"
     labelHidden={true}
-    defaultCountryCode="+1"
+    defaultDialCode="+1"
     placeholder="Phone Number"
-    countryCodeLabel="Country code"
+    dialCodeLabel="Dial code"
   />
 );

docs/src/pages/[platform]/components/phonenumberfield/examples/AutoCompleteExample.tsx

@@ -14,7 +14,7 @@ export const AutoCompleteExample = () => {
         autoComplete="username"
         label="Phone Number"
         name="phone_number"
-        defaultCountryCode="+1"
+        defaultDialCode="+1"
       />
       <Button type="submit">Sign In</Button>
     </Flex>

docs/src/pages/[platform]/components/phonenumberfield/examples/ClassNameExample.tsx

@@ -3,7 +3,7 @@ import { PhoneNumberField } from '@aws-amplify/ui-react';
 export const ClassNameExample = () => (
   <PhoneNumberField
     className="custom-phonenumberfield-class"
-    defaultCountryCode="+1"
+    defaultDialCode="+1"
     label="Square field"
   />
 );

docs/src/pages/[platform]/components/phonenumberfield/examples/CountryCodeSelectExample.tsx

@@ -1,5 +1,5 @@
 import { PhoneNumberField } from '@aws-amplify/ui-react';
 
 export const DefaultPhoneNumberFieldExample = () => (
-  <PhoneNumberField label="Phone Number" defaultCountryCode="+1" />
+  <PhoneNumberField label="Phone Number" defaultDialCode="+1" />
 );

docs/src/pages/[platform]/components/phonenumberfield/examples/DefaultPhoneNumberFieldExample.tsx

@@ -3,12 +3,12 @@ import { PhoneNumberField, Text } from '@aws-amplify/ui-react';
 export const DescriptiveTextExample = () => (
   <>
     <PhoneNumberField
-      defaultCountryCode="+1"
+      defaultDialCode="+1"
       label="Phone Number"
       descriptiveText="This is basic descriptive text"
     />
     <PhoneNumberField
-      defaultCountryCode="+1"
+      defaultDialCode="+1"
       label="Phone Number"
       descriptiveText={
         <Text

docs/src/pages/[platform]/components/phonenumberfield/examples/DescriptiveTextExample.tsx

@@ -0,0 +1,12 @@
+import { PhoneNumberField } from '@aws-amplify/ui-react';
+
+export const DialCodeSelectExample = () => (
+  <PhoneNumberField
+    label="Phone Number"
+    defaultDialCode="+7"
+    dialCodeList={['+1', '+44', '+52', '+86', '+91']}
+    dialCodeName="dial_code"
+    dialCodeLabel="Dial Code"
+    onDialCodeChange={(e) => alert(`Dial Code changed to: ${e.target.value}`)}
+  />
+);