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 index 4f566b47cd..d139539fdf 100644 --- 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`
this.emailUser()}> ${getSvg(SvgIcon.SmallEmail)} - Send email + ${this.strings.sendEmailLinkSubtitle}
`; } @@ -519,7 +525,7 @@ export class MgtPersonCard extends MgtTemplatedComponent { chat = html`
this.chatUser()}> ${getSvg(SvgIcon.SmallChat)} - Start chat + ${this.strings.startChatLinkSubtitle}
`; } @@ -627,7 +633,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
${section.displayName}
- this.updateCurrentSection(section)}>Show more + this.updateCurrentSection(section)} + >${this.strings.showMoreSectionButton}
${section.asCompactView()}
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 index fe45ba985c..ce291a7025 100644 --- 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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts index b82e2ad769..ff2c726181 100644 --- a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts +++ b/packages/mgt-components/src/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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/strings.ts new file mode 100644 index 0000000000..3accec891d --- /dev/null +++ b/packages/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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts index 9d597bb3ab..271f198e5e 100644 --- a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts +++ b/packages/mgt-components/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`
-
Files
+
${this.strings.filesSectionTitle}
${contentTemplate}
`; @@ -132,7 +137,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection { const lastModifiedTemplate = file.lastShared ? html`
- Shared ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))} + ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
` : null; diff --git a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/strings.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-files/strings.ts new file mode 100644 index 0000000000..e42830e334 --- /dev/null +++ b/packages/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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts index 9bb47f6962..340cacb9cc 100644 --- a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts +++ b/packages/mgt-components/src/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`
-
Emails
+
${this.strings.emailsSectionTitle}
${contentTemplate}
`; diff --git a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/strings.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-messages/strings.ts new file mode 100644 index 0000000000..371dd6fc5f --- /dev/null +++ b/packages/mgt-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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts index da04010c95..cd32d07d65 100644 --- a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts +++ b/packages/mgt-components/src/components/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`
-
Organization
+
${this.strings.organizationSectionTitle}
${contentTemplate}
`; @@ -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`
diff --git a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/strings.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-organization/strings.ts new file mode 100644 index 0000000000..f3235d317c --- /dev/null +++ b/packages/mgt-components/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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts index cfeae03ec1..0e1cb54067 100644 --- a/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts +++ b/packages/mgt-components/src/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`
-
About
+
${this.strings.AboutCompactSectionTitle}
${this.renderSubSections()}
`; @@ -209,7 +214,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection { return html`
-
Languages
+
${this.strings.LanguagesSubSectionTitle}
${languageItems} @@ -244,7 +249,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection { return html`
-
Skills
+
${this.strings.SkillsSubSectionTitle}
${skillItems} @@ -290,7 +295,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection { return html`
-
Work Experience
+
${this.strings.WorkExperienceSubSectionTitle}
${positionItems} @@ -335,7 +340,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection { return html`
-
Education
+
${this.strings.EducationSubSectionTitle}
${positionItems} @@ -368,7 +373,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection { return html`
-
Professional Interests
+
${this.strings.professionalInterestsSubSectionTitle}
${interestItems} @@ -401,7 +406,7 @@ export class MgtPersonCardProfile extends BasePersonCardSection { return html`
-
Personal Interests
+
${this.strings.personalInterestsSubSectionTitle}
${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/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/strings.ts b/packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-profile/strings.ts new file mode 100644 index 0000000000..5968f5338d --- /dev/null +++ b/packages/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' +}; diff --git a/packages/mgt-components/src/components/mgt-person-card/strings.ts b/packages/mgt-components/src/components/mgt-person-card/strings.ts new file mode 100644 index 0000000000..a57b4672f0 --- /dev/null +++ b/packages/mgt-components/src/components/mgt-person-card/strings.ts @@ -0,0 +1,12 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +export const strings = { + sendEmailLinkSubtitle: 'Send email', + startChatLinkSubtitle: 'Start chat', + showMoreSectionButton: 'Show more' +}; diff --git a/stories/samples/general.stories.js b/stories/samples/general.stories.js index a60978f857..6cab93b500 100644 --- a/stories/samples/general.stories.js +++ b/stories/samples/general.stories.js @@ -8,21 +8,37 @@ import { html } from 'lit-element'; import { withSignIn } from '../../.storybook/addons/signInAddon/signInAddon'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { localize } from '../../.storybook/addons/localizeAddon/localizationAddon'; -import { withKnobs } from '@storybook/addon-knobs'; export default { title: 'Samples | General', component: 'mgt-combo', - decorators: [withSignIn, withCodeEditor, withKnobs, localize], + decorators: [withSignIn, withCodeEditor], parameters: { a11y: { disabled: true }, signInAddon: { test: 'test' - }, - strings: { + } + } +}; + +export const LoginToShowAgenda = () => html` + + +`; + +export const Localization = () => html` + + + + + + + + `; export const theme = () => html`