update: Add localization of contact card section titles (#1871)

* update: Add localization for the contact section headers

* update: Add a story showing localization of contact section titles

Author: musale

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts

@@ -83,40 +83,40 @@ export class MgtPersonCardContact extends BasePersonCardSection {
       icon: getSvg(SvgIcon.Email, '#929292'),
       onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person)),
       showCompact: true,
-      title: 'Email'
+      title: this.strings.emailTitle
     },
     chat: {
       icon: getSvg(SvgIcon.Chat, '#929292'),
       onClick: () => this.sendChat(this._person?.userPrincipalName),
       showCompact: false,
-      title: 'Teams'
+      title: this.strings.chatTitle
     },
     businessPhone: {
       icon: getSvg(SvgIcon.CellPhone, '#929292'),
       onClick: () => this.sendCall(this._person?.businessPhones?.length > 0 ? this._person.businessPhones[0] : null),
       showCompact: true,
-      title: 'Business Phone'
+      title: this.strings.businessPhoneTitle
     },
     cellPhone: {
       icon: getSvg(SvgIcon.CellPhone, '#929292'),
       onClick: () => this.sendCall(this._person?.mobilePhone),
       showCompact: true,
-      title: 'Mobile Phone'
+      title: this.strings.cellPhoneTitle
     },
     department: {
       icon: getSvg(SvgIcon.Department, '#929292'),
       showCompact: false,
-      title: 'Department'
+      title: this.strings.departmentTitle
     },
     title: {
       icon: getSvg(SvgIcon.Person, '#929292'),
       showCompact: false,
-      title: 'Title'
+      title: this.strings.titleTitle
     },
     officeLocation: {
       icon: getSvg(SvgIcon.OfficeLocation, '#929292'),
       showCompact: true,
-      title: 'Office Location'
+      title: this.strings.officeLocationTitle
     }
   };
   // tslint:enable: object-literal-sort-keys

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts

@@ -6,5 +6,12 @@
  */
 
 export const strings = {
-  contactSectionTitle: 'Contact'
+  contactSectionTitle: 'Contact',
+  emailTitle: 'Email',
+  chatTitle: 'Teams',
+  businessPhoneTitle: 'Business Phone',
+  cellPhoneTitle: 'Mobile Phone',
+  departmentTitle: 'Department',
+  titleTitle: 'Title',
+  officeLocationTitle: 'Office Location'
 };

stories/components/personCard/personCard.a.js

@@ -53,7 +53,14 @@ export const localization = () => html`
         showMoreSectionButton: 'أظهر المزيد' // global declaration
       },
       'person-card-contact': {
-        contactSectionTitle: 'اتصل'
+        contactSectionTitle: 'اتصل',
+        emailTitle: 'البريد الإلكتروني',
+        chatTitle: 'دردشة',
+        businessPhoneTitle: 'هاتف العمل',
+        cellPhoneTitle: 'هاتف محمول',
+        departmentTitle: ' قسم، أقسام',
+        titleTitle: 'لقب',
+        officeLocationTitle: 'موقع المكتب'
       },
       'person-card-organization': {
         reportsToSectionTitle: 'تقارير ل',