Merge pull request #425 from microsoftgraph/nmetulev/personUpdate

mgt-person update

Author: vogtn

index.html

@@ -33,11 +33,11 @@
     <!-- <mgt-mock-provider></mgt-mock-provider> -->
 
     <mgt-login></mgt-login>
-    <mgt-person person-query="me" show-name show-email person-card="hover"></mgt-person>
+    <mgt-person person-query="me" view="twoLines" person-card="hover" show-presence></mgt-person>
     <mgt-people-picker></mgt-people-picker>
     <mgt-teams-channel-picker></mgt-teams-channel-picker>
     <mgt-tasks data-source="todo"></mgt-tasks>
     <mgt-agenda group-by-day></mgt-agenda>
-    <mgt-people></mgt-people>
+    <mgt-people show-presence></mgt-people>
   </body>
 </html>

src/components/mgt-login/mgt-login.ts

@@ -16,6 +16,7 @@ import { styles } from './mgt-login-css';
 
 import '../../styles/fabric-icon-font';
 import '../mgt-person/mgt-person';
+import { PersonViewType } from '../mgt-person/mgt-person';
 
 /**
  * Web component button and flyout control to facilitate Microsoft identity platform authentication
@@ -260,13 +261,7 @@ export class MgtLogin extends MgtTemplatedComponent {
     return (
       template ||
       html`
-        <mgt-person
-          .personDetails=${personDetails}
-          .personImage=${personImage}
-          .avatarSize="large"
-          .showName=${true}
-          .showEmail=${true}
-        />
+        <mgt-person .personDetails=${personDetails} .personImage=${personImage} .view=${PersonViewType.twolines} />
       `
     );
   }
@@ -321,12 +316,7 @@ export class MgtLogin extends MgtTemplatedComponent {
     return (
       template ||
       html`
-        <mgt-person
-          .personDetails=${this.userDetails}
-          .personImage=${this._image}
-          .avatarSize="small"
-          .showName=${true}
-        />
+        <mgt-person .personDetails=${this.userDetails} .personImage=${this._image} .view=${PersonViewType.oneline} />
       `
     );
   }

src/components/mgt-people-picker/mgt-people-picker.ts

@@ -17,6 +17,7 @@ import { Providers } from '../../Providers';
 import { ProviderState } from '../../providers/IProvider';
 import '../../styles/fabric-icon-font';
 import { debounce } from '../../utils/Utils';
+import { PersonViewType } from '../mgt-person/mgt-person';
 import { PersonCardInteraction } from '../PersonCardInteraction';
 import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtTemplatedComponent } from '../templatedComponent';
@@ -600,7 +601,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         class="selected-person"
         .personDetails=${person}
         .fetchImage=${true}
-        .showName=${true}
+        .view=${PersonViewType.oneline}
         .personCardInteraction=${PersonCardInteraction.click}
       ></mgt-person>
     `;

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

@@ -602,7 +602,6 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         const person = await getUserWithPhoto(graph, id);
         this.personDetails = person;
         this.personImage = this.getImage();
-        this.personDetails.personImage = this.personImage;
       } else if (
         !this.personDetails.personImage &&
         ((this.fetchImage && !this.personImage) || this.personImage === '@')