[PersonCard] Added Files section and updated Profile section (#669)

* Fixed file icons and updated profile section

* Improved missing data states in profile

* Updated missing ddata state for profile languages

* Removed commented code

Author: shweaver-MSFT

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

@@ -25,6 +25,7 @@ $person-card-background-color: var(--person-card-background-color, #ffffff);
   width: var(--mgt-flyout-set-width, 340px);
   font-family: var(--default-font-family);
   overflow: hidden;
+  user-select: none;
 
   .nav {
     display: flex;

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

@@ -18,7 +18,7 @@ import { MgtPerson } 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 { 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';
@@ -193,7 +193,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       new MgtPersonCardContact(),
       new MgtPersonCardOrganization(),
       new MgtPersonCardMessages(),
-      // new MgtPersonCardFiles(),
+      new MgtPersonCardFiles(),
       new MgtPersonCardProfile()
     ];
   }

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

@@ -9,6 +9,7 @@
 
 :host {
   position: relative;
+  user-select: none;
 
   .root {
     padding: 20px 0;

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

@@ -9,6 +9,7 @@
 
 :host {
   position: relative;
+  user-select: none;
 
   .root {
     padding: 20px 0;
@@ -43,7 +44,9 @@
         min-width: 28px;
         height: 28px;
         margin-right: 12px;
-        background-color: #797775;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .file__details {

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

@@ -129,8 +129,6 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
    * @memberof MgtPersonCardFiles
    */
   protected renderFile(file: IFile): TemplateResult {
-    const iconSource = file.thumbnails ? file.thumbnails[0].small.url : null;
-
     const lastModifiedTemplate = file.lastModifiedDateTime
       ? html`
           <div class="file__last-modified">Modified ${getRelativeDisplayDate(new Date(file.lastModifiedDateTime))}</div>
@@ -140,7 +138,7 @@ export class MgtPersonCardFiles extends BasePersonCardSection {
     return html`
       <div class="file">
         <div class="file__icon">
-          <img src="${iconSource}" />
+          ${getSvg(SvgIcon.File)}
         </div>
         <div class="file__details">
           <div class="file__name">${file.name}</div>

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

@@ -9,6 +9,7 @@
 
 :host {
   position: relative;
+  user-select: none;
 
   .root {
     padding: 20px 0;

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

@@ -9,6 +9,7 @@
 
 :host {
   position: relative;
+  user-select: none;
 
   .root {
     padding: 20px 0;

packages/mgt/src/components/mgt-person-card/sections/mgt-person-card-profile/graph.profile.ts

@@ -473,7 +473,7 @@ export interface IProfile {
 }
 
 /**
- * TODO: Figure out the correct graph call
+ * Get user profile data
  *
  * @export
  * @param {IGraph} graph

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

@@ -9,6 +9,7 @@
 
 :host {
   position: relative;
+  user-select: none;
 
   .root {
     padding: 20px 0;
@@ -24,142 +25,137 @@
       margin: 0 20px 12px 20px;
     }
 
-    .section__title {
-      font-size: 16px;
-      color: #797775;
-    }
-
-    .section__content {
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
-    }
-
     section {
       margin-bottom: 24px;
       padding: 0 20px;
-    }
 
-    section:last-child {
-      margin: 0;
+      &:last-child {
+        margin: 0;
+      }
+
+      .section__title {
+        font-size: 16px;
+        color: #797775;
+      }
+
+      .section__content {
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+      }
     }
 
     .token-list {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       margin-top: -10px;
-    }
 
-    .token-list__item {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block;
-      overflow: hidden;
-      font-size: 14px;
-      align-items: center;
-      background: #f3f2f1;
-      border-radius: 2px;
-      max-height: 28px;
-      padding: 4px 8px;
-      margin-right: 10px;
-      margin-top: 10px;
-      color: rgba(50, 49, 48, 0.7);
-
-      &.overflow {
-        display: none;
-      }
-
-      &:hover {
-        background-color: #e1dfdd;
-        color: rgba(50, 49, 48, 0.9);
-        cursor: pointer;
+      .token-list__item {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        overflow: hidden;
+        font-size: 14px;
+        align-items: center;
+        background: #f3f2f1;
+        border-radius: 2px;
+        max-height: 28px;
+        padding: 4px 8px;
+        margin-right: 10px;
+        margin-top: 10px;
+        color: rgba(50, 49, 48, 0.7);
+
+        &:last-child {
+          margin-right: initial;
+        }
+
+        &.overflow {
+          display: none;
+        }
+
+        &:hover {
+          background-color: #e1dfdd;
+          color: rgba(50, 49, 48, 0.9);
+        }
+
+        &.token-list__item--show-overflow {
+          cursor: pointer;
+          user-select: unset;
+        }
       }
     }
 
-    .token-list__item:last-child {
-      margin-right: initial;
-    }
-
     .data-list__item {
       margin-bottom: 20px;
-    }
 
-    .data-list__item:last-child {
-      margin-bottom: initial;
-    }
+      &:last-child {
+        margin-bottom: initial;
+      }
 
-    .data-list__item__title {
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 16px;
-      color: #323130;
-    }
+      .data-list__item__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .data-list__item__content {
+        font-size: 12px;
+        line-height: 16px;
+        color: #605e5c;
+        margin-top: 4px;
+      }
 
-    .data-list__item__content {
-      font-size: 12px;
-      line-height: 16px;
-      color: #605e5c;
-      margin-top: 4px;
+      .data-list__item__title {
+        font-size: 14px;
+        line-height: 16px;
+        color: #323130;
+      }
+
+      .data-list__item__date-range {
+        color: #605e5c;
+        font-size: 10px;
+        line-height: 12px;
+      }
     }
 
     .language__proficiency {
       opacity: 0.77;
     }
 
-    .work-position__company {
-      color: #69afe5;
-      cursor: pointer;
-    }
+    .work-position {
+      .work-position__company {
+        color: #0078d4;
+      }
 
-    .work-position__location {
-      font-size: 10px;
+      .work-position__location {
+        font-size: 10px;
+        color: #605e5c;
+        line-height: 16px;
+      }
     }
 
-    .educational-activity__degree {
-      font-size: 12px;
-      line-height: 14px;
+    .educational-activity {
+      .educational-activity__degree {
+        font-size: 12px;
+        line-height: 14px;
+        color: #605e5c;
+      }
     }
 
     .birthday {
       display: flex;
       align-items: center;
       margin-top: -6px;
-    }
-
-    .birthday__icon {
-      margin-right: 8px;
-    }
 
-    .birthday__date {
-      font-size: 12px;
-      color: #201f1e;
-    }
-
-    .flex-rows {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-
-    .date-range {
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .date-range__circle {
-      height: 10px;
-      width: 10px;
-      border-radius: 10px;
-      border: 2px solid #c4c4c4;
-      display: inline-block;
-      margin-left: 8px;
-    }
+      .birthday__icon {
+        margin-right: 8px;
+      }
 
-    .date-range__line {
-      position: absolute;
-      width: 2px;
-      background-color: #c4c4c4;
+      .birthday__date {
+        font-size: 12px;
+        color: #201f1e;
+      }
     }
   }
 }