Restructured render methods in mgt-person-card (#335)

* Restructured render methods in mgt-person-card. Added hasTemplate() method to TemplatedComponent.

Co-authored-by: Nikola Metulev <[email protected]>

Author: shweaver-MSFT

src/components/mgt-agenda/mgt-agenda.ts

@@ -418,7 +418,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
    * @memberof MgtAgenda
    */
   protected renderOther(event: MicrosoftGraph.Event): TemplateResult {
-    return this.templates['event-other']
+    return this.hasTemplate('event-other')
       ? html`
           ${this.renderTemplate('event-other', { event }, event.id + '-other')}
         `

src/components/mgt-get/mgt-get.ts

@@ -145,7 +145,7 @@ export class MgtGet extends MgtTemplatedComponent {
     } else if (this.error) {
       return this.renderTemplate('error', this.error);
       // tslint:disable-next-line: no-string-literal
-    } else if (this.templates['value'] && this.response && this.response.value) {
+    } else if (this.hasTemplate('value') && this.response && this.response.value) {
       let valueContent;
 
       if (Array.isArray(this.response.value)) {
@@ -161,7 +161,7 @@ export class MgtGet extends MgtTemplatedComponent {
       }
 
       // tslint:disable-next-line: no-string-literal
-      if (this.templates['default']) {
+      if (this.hasTemplate('default')) {
         const defaultContent = this.renderTemplate('default', this.response);
 
         // tslint:disable-next-line: no-string-literal

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

@@ -19,7 +19,7 @@ $color: var(--color, #{$ms-color-neutralDark});
   box-shadow: 0px 0px 4.55172px rgba(0, 0, 0, 0.16);
   font-family: var(--default-font-family);
 
-  .default-view {
+  .person-details-container {
     display: flex;
     padding: 18px 14px;
 
@@ -65,73 +65,70 @@ $color: var(--color, #{$ms-color-neutralDark});
     }
   }
 
-  .additional-details-container {
-    .additional-details-button {
+  .expanded-details-container {
+    .expanded-details-button {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 28px;
       background: rgba(196, 196, 196, 0.1);
-      .additional-details-svg {
+      .expanded-details-svg {
         margin-bottom: 3px;
       }
     }
-    .additional-details-button:hover {
+    .expanded-details-button:hover {
       background-color: rgba(0, 0, 0, 0.068);
     }
-    .additional-details-info {
+    .expanded-details-info {
       margin: 0 0 0 20px;
       padding-bottom: 18px;
+      display: flex;
+      flex-direction: column;
 
       .contact-text {
         margin: 0 0 24px 0;
         font-weight: 600;
         font-size: 14px;
         color: #000000;
       }
-      .additional-details-row {
-        display: flex;
-        .additional-details-item {
-          line-height: normal;
-          font-style: normal;
-          font-weight: normal;
-          font-size: 15px;
-          .icons {
-            text-align: left;
-            .details-icon {
-              margin: 0 0 10px 0;
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-            }
-          }
-          .data {
-            display: block;
-            margin: 0 0 0px 10px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            width: 280px;
-          }
-          .normal-subtitle {
-            padding-top: 2px;
-          }
-          .link-subtitle {
-            color: #3078cd;
-            cursor: pointer;
-          }
-          .link-subtitle:hover {
-            opacity: 0.6;
-          }
+
+      .icons {
+        line-height: normal;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 15px;
+        text-align: left;
+
+        .details-icon {
+          margin: 0 0 10px 0;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
         }
       }
-      .section-divider {
-        width: 96%;
-        height: 1px;
-        background: #eaeaea;
+      .data {
+        display: block;
+        margin: 0 0 0px 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 280px;
       }
-      .custom-section {
+      .normal-subtitle {
+        padding-top: 2px;
       }
+      .link-subtitle {
+        color: #3078cd;
+        cursor: pointer;
+      }
+      .link-subtitle:hover {
+        opacity: 0.6;
+      }
+    }
+    .section-divider {
+      width: 96%;
+      height: 1px;
+      background: #eaeaea;
     }
   }
 }