Skip to content

Commit f9bded3

Browse files
vogtnvogtn
authored
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
1 parent fc1fa5a commit f9bded3

File tree

14 files changed

+192
-45
lines changed

14 files changed

+192
-45
lines changed

‎packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { MgtPersonCardMessages } from './sections/mgt-person-card-messages/mgt-p
2727
import { MgtPersonCardOrganization } from './sections/mgt-person-card-organization/mgt-person-card-organization';
2828
import { MgtPersonCardProfile } from './sections/mgt-person-card-profile/mgt-person-card-profile';
2929
import { MgtPersonCardConfig, MgtPersonCardState } from './mgt-person-card.types';
30+
import { strings } from './strings';
3031

3132
import '../sub-components/mgt-spinner/mgt-spinner';
3233

@@ -71,6 +72,10 @@ export class MgtPersonCard extends MgtTemplatedComponent {
7172
return styles;
7273
}
7374

75+
protected get strings() {
76+
return strings;
77+
}
78+
7479
/**
7580
* Get the scopes required for the person card
7681
* The scopes depend on what sections are shown
@@ -284,6 +289,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
284289

285290
constructor() {
286291
super();
292+
this.handleLocalizationChanged();
287293
this._chatInput = '';
288294
this._currentSection = null;
289295
this._history = [];
@@ -508,7 +514,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
508514
email = html`
509515
<div class="icon" @click=${() => this.emailUser()}>
510516
${getSvg(SvgIcon.SmallEmail)}
511-
<span>Send email</span>
517+
<span>${this.strings.sendEmailLinkSubtitle}</span>
512518
</div>
513519
`;
514520
}
@@ -519,7 +525,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
519525
chat = html`
520526
<div class="icon" @click=${() => this.chatUser()}>
521527
${getSvg(SvgIcon.SmallChat)}
522-
<span>Start chat</span>
528+
<span>${this.strings.startChatLinkSubtitle}</span>
523529
</div>
524530
`;
525531
}
@@ -627,7 +633,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
627633
<div class="section">
628634
<div class="section__header">
629635
<div class="section__title">${section.displayName}</div>
630-
<a class="section__show-more" @click=${() => this.updateCurrentSection(section)}>Show more</a>
636+
<a class="section__show-more" @click=${() => this.updateCurrentSection(section)}
637+
>${this.strings.showMoreSectionButton}</a
638+
>
631639
</div>
632640
<div class="section__content">${section.asCompactView()}</div>
633641
</div>

‎packages/mgt-components/src/components/mgt-person-card/sections/BasePersonCardSection.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export abstract class BasePersonCardSection extends MgtTemplatedComponent {
7070
super();
7171
this._isCompact = false;
7272
this._personDetails = null;
73+
this.handleLocalizationChanged();
7374
}
7475

7576
/**

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { getEmailFromGraphEntity } from '../../../../graph/graph.people';
1414
import { BasePersonCardSection } from '../BasePersonCardSection';
1515
import { styles } from './mgt-person-card-contact-css';
1616
import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
17+
import { strings } from './strings';
1718

1819
/**
1920
* Represents a contact part and its metadata
@@ -50,6 +51,10 @@ export class MgtPersonCardContact extends BasePersonCardSection {
5051
return styles;
5152
}
5253

54+
protected get strings() {
55+
return strings;
56+
}
57+
5358
/**
5459
* Returns true if the component has data it can render
5560
*
@@ -138,7 +143,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
138143
* @memberof MgtPersonCardContact
139144
*/
140145
public get displayName(): string {
141-
return 'Contact';
146+
return this.strings.contactSectionTitle;
142147
}
143148

144149
// Defines the skeleton for what contact fields are available and what they do.

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
export const strings = {
9+
contactSectionTitle: 'Contact'
10+
};

‎packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { getFileTypeIconUri } from '../../../../styles/fluent-icons';
1212
import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
1313
import { getRelativeDisplayDate } from '../../../../utils/Utils';
1414
import { styles } from './mgt-person-card-files-css';
15+
import { strings } from './strings';
1516

1617
/**
1718
* The files subsection of the person card
@@ -30,6 +31,10 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
3031
return styles;
3132
}
3233

34+
protected get strings() {
35+
return strings;
36+
}
37+
3338
private _files: SharedInsight[];
3439

3540
public constructor(files: SharedInsight[]) {
@@ -45,7 +50,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
4550
* @memberof MgtPersonCardFiles
4651
*/
4752
public get displayName(): string {
48-
return 'Files';
53+
return this.strings.filesSectionTitle;
4954
}
5055

5156
/**
@@ -114,7 +119,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
114119

115120
return html`
116121
<div class="root" dir=${this.direction}>
117-
<div class="title">Files</div>
122+
<div class="title">${this.strings.filesSectionTitle}</div>
118123
${contentTemplate}
119124
</div>
120125
`;
@@ -132,7 +137,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
132137
const lastModifiedTemplate = file.lastShared
133138
? html`
134139
<div class="file__last-modified">
135-
Shared ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
140+
${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
136141
</div>
137142
`
138143
: null;

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
export const strings = {
9+
filesSectionTitle: 'Files',
10+
sharedTextSubtitle: 'Shared'
11+
};

‎packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
1212
import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
1313
import { getRelativeDisplayDate } from '../../../../utils/Utils';
1414
import { styles } from './mgt-person-card-messages-css';
15+
import { strings } from './strings';
1516

1617
/**
1718
* The email messages subsection of the person card
@@ -30,6 +31,10 @@ export class MgtPersonCardMessages extends BasePersonCardSection {
3031
return styles;
3132
}
3233

34+
protected get strings() {
35+
return strings;
36+
}
37+
3338
private _messages: Message[];
3439

3540
public constructor(messages: Message[]) {
@@ -45,7 +50,7 @@ export class MgtPersonCardMessages extends BasePersonCardSection {
4550
* @memberof MgtPersonCardMessages
4651
*/
4752
public get displayName(): string {
48-
return 'Emails';
53+
return this.strings.emailsSectionTitle;
4954
}
5055

5156
/**
@@ -119,7 +124,7 @@ export class MgtPersonCardMessages extends BasePersonCardSection {
119124

120125
return html`
121126
<div class="root">
122-
<div class="title">Emails</div>
127+
<div class="title">${this.strings.emailsSectionTitle}</div>
123128
${contentTemplate}
124129
</div>
125130
`;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
export const strings = {
9+
emailsSectionTitle: 'Emails'
10+
};

‎packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
1313
import { MgtPersonCardState } from '../../mgt-person-card.types';
1414
import { PersonViewType } from '../../../mgt-person/mgt-person';
1515
import { styles } from './mgt-person-card-organization-css';
16+
import { strings } from './strings';
1617

1718
/**
1819
* The member organization subsection of the person card
@@ -31,6 +32,10 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
3132
return styles;
3233
}
3334

35+
protected get strings() {
36+
return strings;
37+
}
38+
3439
private _state: MgtPersonCardState;
3540
private _me: User;
3641

@@ -51,10 +56,10 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
5156
const { person, directReports } = this._state;
5257

5358
if (!person.manager && directReports && directReports.length) {
54-
return `Direct reports (${directReports.length})`;
59+
return `${this.strings.directReportsSectionTitle} (${directReports.length})`;
5560
}
5661

57-
return 'Reports to';
62+
return this.strings.reportsToSectionTitle;
5863
}
5964

6065
/**
@@ -128,7 +133,7 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
128133

129134
return html`
130135
<div class="root" dir=${this.direction}>
131-
<div class="title">Organization</div>
136+
<div class="title">${this.strings.organizationSectionTitle}</div>
132137
${contentTemplate}
133138
</div>
134139
`;
@@ -314,7 +319,9 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
314319
}
315320

316321
const subtitle =
317-
this._me.id === this._state.person.id ? 'You work with' : `${this._state.person.givenName} works with`;
322+
this._me.id === this._state.person.id
323+
? this.strings.youWorkWithSubSectionTitle
324+
: `${this._state.person.givenName} ${this.strings.userWorksWithSubSectionTitle}`;
318325

319326
return html`
320327
<div class="divider"></div>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
export const strings = {
9+
reportsToSectionTitle: 'Reports to',
10+
directReportsSectionTitle: 'Direct reports',
11+
organizationSectionTitle: 'Organization',
12+
youWorkWithSubSectionTitle: 'You work with',
13+
userWorksWithSubSectionTitle: 'works with'
14+
};

0 commit comments

Comments
 (0)