Person - added support for a 3rd line (#710)

* Added support for a 3rd line

* undo formatting

* Update packages/mgt/src/components/mgt-person/mgt-person.ts

Co-authored-by: Nicolas Vogt <[email protected]>

Co-authored-by: Nicolas Vogt <[email protected]>
Co-authored-by: Beth Pan <[email protected]>

Author: 3 people

packages/mgt-react/src/generated/react.ts

@@ -96,8 +96,6 @@ export type PersonCardProps = {
 export type PersonProps = {
 	personQuery?: string;
 	userId?: string;
-	showName?: boolean;
-	showEmail?: boolean;
 	showPresence?: boolean;
 	personDetails?: IDynamicPerson;
 	personImage?: string;
@@ -106,6 +104,7 @@ export type PersonProps = {
 	personCardInteraction?: PersonCardInteraction;
 	line1Property?: string;
 	line2Property?: string;
+	line3Property?: string;
 	view?: PersonViewType;
 	avatarSize?: AvatarSize;
 	templateConverters?: MgtElement.TemplateContext;

packages/mgt/src/components/mgt-person-card/mgt-person-card.scss

@@ -51,72 +51,29 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
   }
 
   .person-details-container {
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      'image details'
-      '. icons';
+    display: flex;
+    flex-direction: column;
+    width: calc(var(--mgt-flyout-set-width, 340px) - 30px);
     padding: 15px 15px 20px 15px;
 
-    .image {
-      grid-area: image;
-      .person-image {
-        --presence-background-color: var(--person-card-background-color, #ffffff);
-        --presence-icon-color: var(--person-card-background-color, #ffffff);
-        --avatar-size: 75px;
-      }
-    }
-
-    .details {
-      grid-area: details;
-      margin-left: 14px;
-      line-height: 1.15;
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      overflow: hidden;
-      text-overflow: ellipse;
-      white-space: nowrap;
-      background-color: transparent;
-      width: 100%;
-      margin-top: 5px;
-
-      .display-name {
-        font-size: $person-card-display-name-font-size;
-        color: $person-card-display-name-color;
-        &::after {
-          content: '';
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          right: 0;
-          background: linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
-          background: -moz-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
-          background: -o-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
-          background: -ms-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
-          background: -webkit-linear-gradient(left, transparent, transparent 80%, $person-card-background-color);
-        }
-      }
-
-      .job-title {
-        font-size: $person-card-title-font-size;
-        color: $person-card-title-color;
-      }
-
-      .department {
-        font-size: $person-card-subtitle-font-size;
-        color: $person-card-subtitle-color;
-      }
+    .person-image {
+      --presence-background-color: var(--person-card-background-color, #ffffff);
+      --presence-icon-color: var(--person-card-background-color, #ffffff);
+      --avatar-size: 75px;
+      --font-size: 20px;
+      --line2-font-size: 14px;
+      --line2-color: #{$ms-color-gray120};
+      --line3-font-size: 12px;
+      --line3-color: #{$ms-color-gray110};
     }
 
     .base-icons {
-      grid-area: icons;
       display: flex;
       -webkit-align-items: center;
       align-items: center;
       max-width: 120px;
+      margin-left: 87px;
+      margin-top: 4px;
 
       .icon {
         display: flex;

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

@@ -10,21 +10,21 @@ import { customElement, html, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
 import { getPersonImage } from '../../graph/graph.photos';
+import { getUserPresence } from '../../graph/graph.presence';
 import { getUserWithPhoto } from '../../graph/graph.user';
+import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { IDynamicPerson } from '../../graph/types';
 import { Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
+import { Presence } from '@microsoft/microsoft-graph-types-beta';
 import { TeamsHelper } from '../../utils/TeamsHelper';
-import { MgtPerson } from '../mgt-person/mgt-person';
+import { MgtPerson, PersonViewType } from '../mgt-person/mgt-person';
 import { styles } from './mgt-person-card-css';
 import { BasePersonCardSection } from './sections/BasePersonCardSection';
 import { MgtPersonCardContact } from './sections/mgt-person-card-contact/mgt-person-card-contact';
 import { MgtPersonCardFiles } from './sections/mgt-person-card-files/mgt-person-card-files';
 import { MgtPersonCardMessages } from './sections/mgt-person-card-messages/mgt-person-card-messages';
 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 { Presence } from '@microsoft/microsoft-graph-types-beta';
-import { getUserPresence } from '../../graph/graph.presence';
-import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 
 /**
  * Web Component used to show detailed data for a person in the Microsoft Graph
@@ -198,16 +198,6 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     ];
   }
 
-  /**
-   * Invoked each time the custom element is appended into a document-connected element
-   *
-   * @memberof MgtPersonCard
-   */
-  public connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', e => e.stopPropagation());
-  }
-
   /**
    * Synchronizes property values when attributes change.
    *
@@ -223,10 +213,6 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       return;
     }
 
-    if (name === 'is-expanded') {
-      this.isExpanded = false;
-    }
-
     switch (name) {
       case 'person-query':
       case 'user-id':
@@ -309,19 +295,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       personImage: image
     });
     if (!personDetailsTemplate) {
-      const personImageTemplate = this.renderPersonImage(image, presence, showPresence);
-      const personNameTemplate = this.renderPersonName(person);
-      const personTitleTemplate = this.renderPersonTitle(person);
-      const personSubtitleTemplate = this.renderPersonSubtitle(person);
+      const personTemplate = this.renderPerson();
       const contactIconsTemplate = this.renderContactIcons(person);
 
       personDetailsTemplate = html`
-        <div class="image">
-          ${personImageTemplate}
-        </div>
-        <div class="details">
-          ${personNameTemplate} ${personTitleTemplate} ${personSubtitleTemplate}
-        </div>
+        ${personTemplate}
         <div class="base-icons">
           ${contactIconsTemplate}
         </div>
@@ -361,56 +339,23 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    * @param {*} image
    * @memberof MgtPersonCard
    */
-  protected renderPersonImage(imageSrc?: string, presence?: Presence, showPresence?: boolean): TemplateResult {
-    imageSrc = imageSrc || this.getImage();
-    presence = presence || this.personPresence;
-    showPresence = showPresence || this.showPresence;
+  protected renderPerson(): TemplateResult {
     const avatarSize = 'large';
     return html`
       <mgt-person
         class="person-image"
         .personDetails=${this.personDetails}
-        .personImage=${imageSrc}
-        .personPresence=${presence}
-        .showPresence=${showPresence}
+        .personImage=${this.getImage()}
+        .personPresence=${this.personPresence}
+        .showPresence=${this.showPresence}
         .avatarSize=${avatarSize}
+        .view=${PersonViewType.threelines}
+        .line2Property=${'jobTitle'}
+        .line3Property=${'officeLocation'}
       ></mgt-person>
     `;
   }
 
-  /**
-   * Render the display name and persona details (e.g. department, job title) for a person.
-   *
-   * @protected
-   * @param {IDynamicPerson} [person]
-   * @returns {TemplateResult}
-   * @memberof MgtPersonCard
-   */
-  protected renderPersonName(person?: IDynamicPerson): TemplateResult {
-    person = person || this.personDetails;
-    return html`
-      <div class="display-name" title="${person.displayName}">${person.displayName}</div>
-    `;
-  }
-
-  /**
-   * Render person title.
-   *
-   * @protected
-   * @param {IDynamicPerson} person
-   * @returns {TemplateResult}
-   * @memberof MgtPersonCard
-   */
-  protected renderPersonTitle(person?: IDynamicPerson): TemplateResult {
-    person = person || this.personDetails;
-    if (!person.jobTitle) {
-      return;
-    }
-    return html`
-      <div class="job-title">${person.jobTitle}</div>
-    `;
-  }
-
   /**
    * Render person subtitle.
    *
@@ -437,10 +382,6 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    * @memberof MgtPersonCard
    */
   protected renderContactIcons(person?: IDynamicPerson): TemplateResult {
-    if (this.isExpanded) {
-      return html``;
-    }
-
     person = person || this.personDetails;
     const userPerson = person as MicrosoftGraph.User;
 

packages/mgt/src/components/mgt-person/mgt-person.scss

@@ -29,6 +29,11 @@ $line2-font-weight: var(--line2-font-weight, 400);
 $line2-color: var(--line2-color, var(--email-color, #{$color}));
 $line2-text-transform: var(--line2-text-transform, #{$text-transform});
 
+$line3-font-size: var(--line3-font-size, var(--email-font-size, #{$ms-font-size-s}));
+$line3-font-weight: var(--line3-font-weight, 400);
+$line3-color: var(--line3-color, var(--email-color, #{$color}));
+$line3-text-transform: var(--line3-text-transform, #{$text-transform});
+
 $details-spacing: --details-spacing;
 
 $presence-color-online: #6bb700;
@@ -373,6 +378,13 @@ mgt-person .person-root {
       font-weight: $line2-font-weight;
       text-transform: $line2-text-transform;
     }
+
+    .line3 {
+      color: $line3-color;
+      font-size: $line3-font-size;
+      font-weight: $line3-font-weight;
+      text-transform: $line3-text-transform;
+    }
   }
 }