} line4clicked - Fired when line4 is clicked
*
* @cssprop --person-background-color - {Color} the color of the person component background.
- * @cssprop --person-background-border-radius - {Length} the border radius of the person component. Default is 4px.
*
* @cssprop --person-avatar-size - {Length} the width and height of the avatar. Default is 24px.
* @cssprop --person-avatar-border - {String} the border around an avatar. Default is none.
@@ -83,7 +82,8 @@ export const registerMgtPersonComponent = () => {
* @cssprop --person-initials-text-color - {Color} the color of initials in an avatar.
* @cssprop --person-initials-background-color - {Color} the color of the background in an avatar with initials.
*
- * @cssprop --person-details-spacing - {Length} the space between the avatar and the person details. Default is 12px.
+ * @cssprop --person-details-left-spacing - {Length} the space between the avatar and the person details. Default is 12px.
+ * @cssprop --person-details-bottom-spacing - {Length} the space between the bottom of the detail block and the bottom on the component. Default is 0.
*
* @cssprop --person-line1-font-size - {String} the font-size of the line 1 text. Default is 14px.
* @cssprop --person-line1-font-weight - {Length} the font weight of the line 1 text. Default is 600.
@@ -239,7 +239,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
attribute: 'show-presence',
type: Boolean
})
- public showPresence: boolean;
+ public showPresence = false;
/**
* determines person component avatar size and apply presence badge accordingly.
@@ -252,7 +252,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
attribute: 'avatar-size',
type: String
})
- public avatarSize: AvatarSize;
+ public avatarSize: AvatarSize = 'auto';
/**
* object containing Graph details on person
@@ -332,11 +332,10 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
attribute: 'fetch-image',
type: Boolean
})
- public fetchImage: boolean;
+ public fetchImage = false;
/**
- * Sets whether to disable the person image fetch
- * from the Microsoft Graph
+ * Sets whether to disable the person image fetch from the Microsoft Graph
*
* @type {boolean}
* @memberof MgtPerson
@@ -345,7 +344,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
attribute: 'disable-image-fetch',
type: Boolean
})
- public disableImageFetch: boolean;
+ public disableImageFetch = false;
/**
* Sets the vertical layout of
@@ -398,6 +397,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
* Valid options are: 'none', 'hover', or 'click'
* Set to 'none' to not show the card
*
+ * @default PersonCardInteraction.none
* @type {PersonCardInteraction}
* @memberof MgtPerson
*/
@@ -869,16 +869,16 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
// Render the line1 template
const template = this.renderTemplate('line1', { person });
details.push(html`
-
- this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${template}
- `);
+
+ this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${template}
+`);
} else {
// Render the line1 property value
if (line1text) {
details.push(html`
-
- this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${line1text}
- `);
+
+ this.handleLine1Clicked()} role="presentation" aria-label="${line1text}">${line1text}
+`);
}
}
@@ -889,16 +889,16 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
// Render the line2 template
const template = this.renderTemplate('line2', { person });
details.push(html`
-
- this.handleLine2Clicked()} role="presentation" aria-label="${text}">${template}
- `);
+
+ this.handleLine2Clicked()} role="presentation" aria-label="${text}">${template}
+`);
} else {
// Render the line2 property value
if (text) {
details.push(html`
-
- this.handleLine2Clicked()} role="presentation" aria-label="${text}">${text}
- `);
+
+ this.handleLine2Clicked()} role="presentation" aria-label="${text}">${text}
+`);
}
}
}
@@ -910,16 +910,16 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
// Render the line3 template
const template = this.renderTemplate('line3', { person });
details.push(html`
-
- this.handleLine3Clicked()} role="presentation" aria-label="${text}">${template}
+
+ this.handleLine3Clicked()} role="presentation" aria-label="${text}">${template}
`);
} else {
// Render the line3 property value
if (text) {
details.push(html`
-
- this.handleLine3Clicked()} role="presentation" aria-label="${text}">${text}
- `);
+
+ this.handleLine3Clicked()} role="presentation" aria-label="${text}">${text}
+`);
}
}
}
diff --git a/packages/mgt-element/src/utils/version.ts b/packages/mgt-element/src/utils/version.ts
index 2656ea5067..19794f158e 100644
--- a/packages/mgt-element/src/utils/version.ts
+++ b/packages/mgt-element/src/utils/version.ts
@@ -8,4 +8,4 @@
// THIS FILE IS AUTO GENERATED
// ANY CHANGES WILL BE LOST DURING BUILD
-export const PACKAGE_VERSION = '3.1.3';
+export const PACKAGE_VERSION = '4.0.0';
diff --git a/packages/providers/mgt-msal2-provider/src/Msal2Provider.ts b/packages/providers/mgt-msal2-provider/src/Msal2Provider.ts
index c4808992b7..6180b45db4 100644
--- a/packages/providers/mgt-msal2-provider/src/Msal2Provider.ts
+++ b/packages/providers/mgt-msal2-provider/src/Msal2Provider.ts
@@ -24,7 +24,7 @@ import {
InteractionRequiredAuthError,
SsoSilentRequest,
EventMessage,
- AuthenticationResult
+ EventType
} from '@azure/msal-browser';
import { AuthenticationProviderOptions } from '@microsoft/microsoft-graph-client';
@@ -423,7 +423,7 @@ export class Msal2Provider extends IProvider {
}
private readonly handleMsalEvent = (message: EventMessage): void => {
- if (message.eventType === 'msal:acquireTokenSuccess' && 'scopes' in message.payload) {
+ if (message.eventType === EventType.ACQUIRE_TOKEN_SUCCESS && 'scopes' in message.payload) {
this.approvedScopes = message.payload.scopes;
}
};
diff --git a/stories/components/person/person.interactive.stories.js b/stories/components/person/person.interactive.stories.js
new file mode 100644
index 0000000000..480e9740d8
--- /dev/null
+++ b/stories/components/person/person.interactive.stories.js
@@ -0,0 +1,262 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+const objectToStyleRules = obj => {
+ return Object.keys(obj)
+ .map(key => `${key}: ${obj[key]}`)
+ .join(';\n\t');
+};
+
+const PersonArgs = {
+ view: 'twolines',
+ 'person-query': 'me',
+ 'show-presence': true
+};
+
+const PersonArgTypes = {
+ 'avatar-type': {
+ options: ['initials', 'photo'],
+ control: { type: 'select' }
+ },
+ 'avatar-size': {
+ options: ['auto', 'small', 'large'],
+ control: { type: 'select' }
+ },
+ view: {
+ options: ['image', 'oneline', 'twolines', 'threelines', 'fourlines'],
+ control: { type: 'inline-radio' }
+ },
+ 'person-card': {
+ options: ['none', 'hover', 'click'],
+ control: { type: 'inline-radio' }
+ },
+ 'person-query': { control: { type: 'text' } },
+ 'person-image': { control: { type: 'text' } },
+ 'user-id': { control: { type: 'text' } },
+ 'show-presence': { control: { type: 'boolean' } },
+ 'vertical-layout': { control: { type: 'boolean' } },
+ 'fetch-image': { control: { type: 'boolean' } },
+ 'disable-image-fetch': { control: { type: 'boolean' } },
+ 'line1-property': { control: { type: 'text' } },
+ 'line2-property': { control: { type: 'text' } },
+ 'line3-property': { control: { type: 'text' } },
+ 'line4-property': { control: { type: 'text' } },
+ 'person-details': { control: { type: 'object' } },
+ 'fallback-details': { control: { type: 'object' } },
+ 'person-presence': { control: { type: 'object' } },
+ '--person-background-color': { control: { type: 'color' } },
+ '--person-avatar-size': { control: { type: 'text' } },
+ '--person-avatar-border': { control: { type: 'text' } },
+ '--person-avatar-border-radius': { control: { type: 'text' } },
+ '--person-initials-text-color': { control: { type: 'color' } },
+ '--person-initials-background-color': { control: { type: 'color' } },
+ '--person-line1-font-size': { control: { type: 'text' } },
+ '--person-line1-font-weight': { control: { type: 'number', max: 1000, min: 100, step: 100 } },
+ '--person-line1-text-color': { control: { type: 'color' } },
+ '--person-line1-text-transform': { control: { type: 'text' } },
+ '--person-line1-text-line-height': { control: { type: 'text' } },
+ '--person-line2-font-size': { control: { type: 'text' } },
+ '--person-line2-font-weight': { control: { type: 'number', max: 1000, min: 100, step: 100 } },
+ '--person-line2-text-color': { control: { type: 'color' } },
+ '--person-line2-text-transform': { control: { type: 'text' } },
+ '--person-line2-text-line-height': { control: { type: 'text' } },
+ '--person-line3-font-size': { control: { type: 'text' } },
+ '--person-line3-font-weight': { control: { type: 'text' } },
+ '--person-line3-text-color': { control: { type: 'color' } },
+ '--person-line3-text-transform': { control: { type: 'text' } },
+ '--person-line3-text-line-height': { control: { type: 'text' } },
+ '--person-line4-font-size': { control: { type: 'text' } },
+ '--person-line4-font-weight': { control: { type: 'number', max: 1000, min: 100, step: 100 } },
+ '--person-line4-text-color': { control: { type: 'color' } },
+ '--person-line4-text-transform': { control: { type: 'text' } },
+ '--person-line4-text-line-height': { control: { type: 'text' } },
+ '--person-details-left-spacing': { control: { type: 'text' } },
+ '--person-details-bottom-spacing': { control: { type: 'text' } }
+};
+
+export default {
+ title: 'Components / mgt-person / Interactive',
+ component: 'person',
+ argTypes: PersonArgTypes,
+ args: PersonArgs,
+ parameters: {
+ controls: {
+ // this uses the expanded docs from the custom elements manifest to add descriptions to the controls panel
+ expanded: true,
+ // use include to trim the list of args in the controls panel
+ include: Object.keys(PersonArgTypes),
+ sort: 'requiredFirst'
+ },
+ options: { showPanel: true }
+ },
+ render: ({
+ 'avatar-type': avatarType,
+ 'avatar-size': avatarSize,
+ view,
+ 'person-query': personQuery,
+ 'person-image': personImage,
+ 'user-id': userId,
+ 'person-card': personCardInteraction,
+ 'show-presence': showPresence,
+ 'vertical-layout': verticalLayout,
+ 'fetch-image': fetchImage,
+ 'disable-image-fetch': disableImageFetch,
+ 'line1-property': line1Property,
+ 'line2-property': line2Property,
+ 'line3-property': line3Property,
+ 'line4-property': line4Property,
+ 'person-details': personDetails,
+ 'fallback-details': fallbackDetails,
+ 'person-presence': personPresence,
+ '--person-background-color': personBackgroundColor,
+ '--person-avatar-size': personAvatarSize,
+ '--person-avatar-border': personAvatarBorder,
+ '--person-avatar-border-radius': personAvatarBorderRadius,
+ '--person-initials-text-color': personInitialsTextColor,
+ '--person-initials-background-color': personInitialsBackgroundColor,
+ '--person-line1-font-size': personLine1FontSize,
+ '--person-line1-font-weight': personLine1FontWeight,
+ '--person-line1-text-color': personLine1TextColor,
+ '--person-line1-text-transform': personLine1TextTransform,
+ '--person-line1-text-line-height': personLine1TextLineHeight,
+ '--person-line2-font-size': personLine2FontSize,
+ '--person-line2-font-weight': personLine2FontWeight,
+ '--person-line2-text-color': personLine2TextColor,
+ '--person-line2-text-transform': personLine2TextTransform,
+ '--person-line2-text-line-height': personLine2TextLineHeight,
+ '--person-line3-font-size': personLine3FontSize,
+ '--person-line3-font-weight': personLine3FontWeight,
+ '--person-line3-text-color': personLine3TextColor,
+ '--person-line3-text-transform': personLine3TextTransform,
+ '--person-line3-text-line-height': personLine3TextLineHeight,
+ '--person-line4-font-size': personLine4FontSize,
+ '--person-line4-font-weight': personLine4FontWeight,
+ '--person-line4-text-color': personLine4TextColor,
+ '--person-line4-text-transform': personLine4TextTransform,
+ '--person-line4-text-line-height': personLine4TextLineHeight,
+ '--person-details-left-spacing': personDetailsLeftSpacing,
+ '--person-details-bottom-spacing': personDetailsBottomSpacing
+ }) => {
+ const styles = {};
+ if (personBackgroundColor) {
+ styles['--person-background-color'] = personBackgroundColor;
+ }
+ if (personAvatarSize) {
+ styles['--person-avatar-size'] = personAvatarSize;
+ }
+ if (personAvatarBorder) {
+ styles['--person-avatar-border'] = personAvatarBorder;
+ }
+ if (personAvatarBorderRadius) {
+ styles['--person-avatar-border-radius'] = personAvatarBorderRadius;
+ }
+ if (personInitialsTextColor) {
+ styles['--person-initials-text-color'] = personInitialsTextColor;
+ }
+ if (personInitialsBackgroundColor) {
+ styles['--person-initials-background-color'] = personInitialsBackgroundColor;
+ }
+ if (personLine1FontSize) {
+ styles['--person-line1-font-size'] = personLine1FontSize;
+ }
+ if (personLine1FontWeight) {
+ styles['--person-line1-font-weight'] = personLine1FontWeight;
+ }
+ if (personLine1TextColor) {
+ styles['--person-line1-text-color'] = personLine1TextColor;
+ }
+ if (personLine1TextTransform) {
+ styles['--person-line1-text-transform'] = personLine1TextTransform;
+ }
+ if (personLine1TextLineHeight) {
+ styles['--person-line1-text-line-height'] = personLine1TextLineHeight;
+ }
+ if (personLine2FontSize) {
+ styles['--person-line2-font-size'] = personLine2FontSize;
+ }
+ if (personLine2FontWeight) {
+ styles['--person-line2-font-weight'] = personLine2FontWeight;
+ }
+ if (personLine2TextColor) {
+ styles['--person-line2-text-color'] = personLine2TextColor;
+ }
+ if (personLine2TextTransform) {
+ styles['--person-line2-text-transform'] = personLine2TextTransform;
+ }
+ if (personLine2TextLineHeight) {
+ styles['--person-line2-text-line-height'] = personLine2TextLineHeight;
+ }
+ if (personLine3FontSize) {
+ styles['--person-line3-font-size'] = personLine3FontSize;
+ }
+ if (personLine3FontWeight) {
+ styles['--person-line3-font-weight'] = personLine3FontWeight;
+ }
+ if (personLine3TextColor) {
+ styles['--person-line3-text-color'] = personLine3TextColor;
+ }
+ if (personLine3TextTransform) {
+ styles['--person-line3-text-transform'] = personLine3TextTransform;
+ }
+ if (personLine3TextLineHeight) {
+ styles['--person-line3-text-line-height'] = personLine3TextLineHeight;
+ }
+ if (personLine4FontSize) {
+ styles['--person-line4-font-size'] = personLine4FontSize;
+ }
+ if (personLine4FontWeight) {
+ styles['--person-line4-font-weight'] = personLine4FontWeight;
+ }
+ if (personLine4TextColor) {
+ styles['--person-line4-text-color'] = personLine4TextColor;
+ }
+ if (personLine4TextTransform) {
+ styles['--person-line4-text-transform'] = personLine4TextTransform;
+ }
+ if (personLine4TextLineHeight) {
+ styles['--person-line4-text-line-height'] = personLine4TextLineHeight;
+ }
+ if (personDetailsLeftSpacing) {
+ styles['--person-details-left-spacing'] = personDetailsLeftSpacing;
+ }
+ if (personDetailsBottomSpacing) {
+ styles['--person-details-bottom-spacing'] = personDetailsBottomSpacing;
+ }
+ return html`
+
+
+`;
+ }
+};
+
+export const interactive = { args: PersonArgs };
diff --git a/stories/components/person/person.style.stories.js b/stories/components/person/person.style.stories.js
index cb6e1d70f4..5a55fbafd5 100644
--- a/stories/components/person/person.style.stories.js
+++ b/stories/components/person/person.style.stories.js
@@ -18,7 +18,6 @@ export const customCSSProperties = () => html`