localization to person-card 2.0 and associated strings (#798)

* adding localization to person-card 2.0 and associated strings * updating story to use module for localization over knobs * removing log
microsoftgraph · Dec 3, 2020 · f9bded3 · f9bded3
1 parent fc1fa5a
commit f9bded3
Show file tree

Hide file tree

Showing 14 changed files with 192 additions and 45 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -27,6 +27,7 @@ import { MgtPersonCardMessages } from './sections/mgt-person-card-messages/mgt-p
 import { MgtPersonCardOrganization } from './sections/mgt-person-card-organization/mgt-person-card-organization';
 import { MgtPersonCardProfile } from './sections/mgt-person-card-profile/mgt-person-card-profile';
 import { MgtPersonCardConfig, MgtPersonCardState } from './mgt-person-card.types';
+import { strings } from './strings';
 
 import '../sub-components/mgt-spinner/mgt-spinner';
 
@@ -71,6 +72,10 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     return styles;
   }
 
+  protected get strings() {
+    return strings;
+  }
+
   /**
    * Get the scopes required for the person card
    * The scopes depend on what sections are shown
@@ -284,6 +289,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
   constructor() {
     super();
+    this.handleLocalizationChanged();
     this._chatInput = '';
     this._currentSection = null;
     this._history = [];
@@ -508,7 +514,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       email = html`
         <div class="icon" @click=${() => this.emailUser()}>
           ${getSvg(SvgIcon.SmallEmail)}
-          <span>Send email</span>
+          <span>${this.strings.sendEmailLinkSubtitle}</span>
         </div>
       `;
     }
@@ -519,7 +525,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       chat = html`
         <div class="icon" @click=${() => this.chatUser()}>
           ${getSvg(SvgIcon.SmallChat)}
-          <span>Start chat</span>
+          <span>${this.strings.startChatLinkSubtitle}</span>
         </div>
       `;
     }
@@ -627,7 +633,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         <div class="section">
           <div class="section__header">
             <div class="section__title">${section.displayName}</div>
-            <a class="section__show-more" @click=${() => this.updateCurrentSection(section)}>Show more</a>
+            <a class="section__show-more" @click=${() => this.updateCurrentSection(section)}
+              >${this.strings.showMoreSectionButton}</a
+            >
           </div>
           <div class="section__content">${section.asCompactView()}</div>
         </div>

diff --git a/packages/mgt-components/src/components/mgt-person-card/sections/BasePersonCardSection.ts b/packages/mgt-components/src/components/mgt-person-card/sections/BasePersonCardSection.ts
@@ -70,6 +70,7 @@ export abstract class BasePersonCardSection extends MgtTemplatedComponent {
     super();
     this._isCompact = false;
     this._personDetails = null;
+    this.handleLocalizationChanged();
   }
 
   /**

diff --git a/...rc/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts b/...rc/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts
@@ -14,6 +14,7 @@ import { getEmailFromGraphEntity } from '../../../../graph/graph.people';
 import { BasePersonCardSection } from '../BasePersonCardSection';
 import { styles } from './mgt-person-card-contact-css';
 import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
+import { strings } from './strings';
 
 /**
  * Represents a contact part and its metadata
@@ -50,6 +51,10 @@ export class MgtPersonCardContact extends BasePersonCardSection {
     return styles;
   }
 
+  protected get strings() {
+    return strings;
+  }
+
   /**
    * Returns true if the component has data it can render
    *
@@ -138,7 +143,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * @memberof MgtPersonCardContact
    */
   public get displayName(): string {
-    return 'Contact';
+    return this.strings.contactSectionTitle;
   }
 
   // Defines the skeleton for what contact fields are available and what they do.

diff --git a/...mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts b/...mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts
@@ -0,0 +1,10 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export const strings = {
+  contactSectionTitle: 'Contact'
+};
diff --git a/...ts/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts b/...ts/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts
@@ -12,6 +12,7 @@ import { getFileTypeIconUri } from '../../../../styles/fluent-icons';
 import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
 import { getRelativeDisplayDate } from '../../../../utils/Utils';
 import { styles } from './mgt-person-card-files-css';
+import { strings } from './strings';
 
 /**
  * The files subsection of the person card
@@ -30,6 +31,10 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
     return styles;
   }
 
+  protected get strings() {
+    return strings;
+  }
+
   private _files: SharedInsight[];
 
   public constructor(files: SharedInsight[]) {
@@ -45,7 +50,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
    * @memberof MgtPersonCardFiles
    */
   public get displayName(): string {
-    return 'Files';
+    return this.strings.filesSectionTitle;
   }
 
   /**
@@ -114,7 +119,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
 
     return html`
       <div class="root" dir=${this.direction}>
-        <div class="title">Files</div>
+        <div class="title">${this.strings.filesSectionTitle}</div>
         ${contentTemplate}
       </div>
     `;
@@ -132,7 +137,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
     const lastModifiedTemplate = file.lastShared
       ? html`
           <div class="file__last-modified">
-            Shared ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
+            ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
           </div>
         `
       : null;

diff --git a/...s/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/strings.ts b/...s/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/strings.ts
@@ -0,0 +1,11 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export const strings = {
+  filesSectionTitle: 'Files',
+  sharedTextSubtitle: 'Shared'
+};
diff --git a/.../components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts b/.../components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts
@@ -12,6 +12,7 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
 import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
 import { getRelativeDisplayDate } from '../../../../utils/Utils';
 import { styles } from './mgt-person-card-messages-css';
+import { strings } from './strings';
 
 /**
  * The email messages subsection of the person card
@@ -30,6 +31,10 @@ export class MgtPersonCardMessages extends BasePersonCardSection {
     return styles;
   }
 
+  protected get strings() {
+    return strings;
+  }
+
   private _messages: Message[];
 
   public constructor(messages: Message[]) {
@@ -45,7 +50,7 @@ export class MgtPersonCardMessages extends BasePersonCardSection {
    * @memberof MgtPersonCardMessages
    */
   public get displayName(): string {
-    return 'Emails';
+    return this.strings.emailsSectionTitle;
   }
 
   /**
@@ -119,7 +124,7 @@ export class MgtPersonCardMessages extends BasePersonCardSection {
 
     return html`
       <div class="root">
-        <div class="title">Emails</div>
+        <div class="title">${this.strings.emailsSectionTitle}</div>
         ${contentTemplate}
       </div>
     `;

diff --git a/...gt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/strings.ts b/...gt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/strings.ts
@@ -0,0 +1,10 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export const strings = {
+  emailsSectionTitle: 'Emails'
+};
diff --git a/...nts/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts b/...nts/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts
@@ -13,6 +13,7 @@ import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
 import { MgtPersonCardState } from '../../mgt-person-card.types';
 import { PersonViewType } from '../../../mgt-person/mgt-person';
 import { styles } from './mgt-person-card-organization-css';
+import { strings } from './strings';
 
 /**
  * The member organization subsection of the person card
@@ -31,6 +32,10 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
     return styles;
   }
 
+  protected get strings() {
+    return strings;
+  }
+
   private _state: MgtPersonCardState;
   private _me: User;
 
@@ -51,10 +56,10 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
     const { person, directReports } = this._state;
 
     if (!person.manager && directReports && directReports.length) {
-      return `Direct reports (${directReports.length})`;
+      return `${this.strings.directReportsSectionTitle} (${directReports.length})`;
     }
 
-    return 'Reports to';
+    return this.strings.reportsToSectionTitle;
   }
 
   /**
@@ -128,7 +133,7 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
 
     return html`
       <div class="root" dir=${this.direction}>
-        <div class="title">Organization</div>
+        <div class="title">${this.strings.organizationSectionTitle}</div>
         ${contentTemplate}
       </div>
     `;
@@ -314,7 +319,9 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
     }
 
     const subtitle =
-      this._me.id === this._state.person.id ? 'You work with' : `${this._state.person.givenName} works with`;
+      this._me.id === this._state.person.id
+        ? this.strings.youWorkWithSubSectionTitle
+        : `${this._state.person.givenName} ${this.strings.userWorksWithSubSectionTitle}`;
 
     return html`
       <div class="divider"></div>

diff --git a/...omponents/src/components/mgt-person-card/sections/mgt-person-card-organization/strings.ts b/...omponents/src/components/mgt-person-card/sections/mgt-person-card-organization/strings.ts
@@ -0,0 +1,14 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export const strings = {
+  reportsToSectionTitle: 'Reports to',
+  directReportsSectionTitle: 'Direct reports',
+  organizationSectionTitle: 'Organization',
+  youWorkWithSubSectionTitle: 'You work with',
+  userWorksWithSubSectionTitle: 'works with'
+};
diff --git a/...rc/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts b/...rc/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts
@@ -10,6 +10,7 @@ import { customElement, html, TemplateResult } from 'lit-element';
 import { BasePersonCardSection } from '../BasePersonCardSection';
 import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
 import { styles } from './mgt-person-card-profile-css';
+import { strings } from './strings';
 
 /**
  * The user profile subsection of the person card
@@ -28,6 +29,10 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
     return styles;
   }
 
+  protected get strings() {
+    return strings;
+  }
+
   /**
    * The name for display in the overview section.
    *
@@ -36,7 +41,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
    * @memberof MgtPersonCardProfile
    */
   public get displayName(): string {
-    return 'Skills & Experience';
+    return this.strings.SkillsAndExperienceSectionTitle;
   }
 
   /**
@@ -147,7 +152,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <div class="root" dir=${this.direction}>
-        <div class="title">About</div>
+        <div class="title">${this.strings.AboutCompactSectionTitle}</div>
         ${this.renderSubSections()}
       </div>
     `;
@@ -209,7 +214,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <section>
-        <div class="section__title">Languages</div>
+        <div class="section__title">${this.strings.LanguagesSubSectionTitle}</div>
         <div class="section__content">
           <div class="token-list">
             ${languageItems}
@@ -244,7 +249,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <section>
-        <div class="section__title">Skills</div>
+        <div class="section__title">${this.strings.SkillsSubSectionTitle}</div>
         <div class="section__content">
           <div class="token-list">
             ${skillItems}
@@ -290,7 +295,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <section>
-        <div class="section__title">Work Experience</div>
+        <div class="section__title">${this.strings.WorkExperienceSubSectionTitle}</div>
         <div class="section__content">
           <div class="data-list">
             ${positionItems}
@@ -335,7 +340,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <section>
-        <div class="section__title">Education</div>
+        <div class="section__title">${this.strings.EducationSubSectionTitle}</div>
         <div class="section__content">
           <div class="data-list">
             ${positionItems}
@@ -368,7 +373,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <section>
-        <div class="section__title">Professional Interests</div>
+        <div class="section__title">${this.strings.professionalInterestsSubSectionTitle}</div>
         <div class="section__content">
           <div class="token-list">
             ${interestItems}
@@ -401,7 +406,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
 
     return html`
       <section>
-        <div class="section__title">Personal Interests</div>
+        <div class="section__title">${this.strings.personalInterestsSubSectionTitle}</div>
         <div class="section__content">
           <div class="token-list">
             ${interestItems}
@@ -466,7 +471,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection {
       return null;
     }
 
-    const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : 'Current';
+    const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : this.strings.currentYearSubtitle;
     return `${start} — ${end}`;
   }
 

diff --git a/...mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/strings.ts b/...mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/strings.ts
@@ -0,0 +1,19 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export const strings = {
+  SkillsAndExperienceSectionTitle: 'Skills & Experience',
+  AboutCompactSectionTitle: 'About',
+  SkillsSubSectionTitle: 'Skills',
+  LanguagesSubSectionTitle: 'Languages',
+  WorkExperienceSubSectionTitle: 'Work Experience',
+  EducationSubSectionTitle: 'Education',
+  professionalInterestsSubSectionTitle: 'Professional Interests',
+  personalInterestsSubSectionTitle: 'Personal Interests',
+  birthdaySubSectionTitle: 'Birthday',
+  currentYearSubtitle: 'Current'
+};