feat: add quick messaging to fluent person-card

packages/mgt-components/src/components/mgt-person-card/sections/BasePersonCardSection.ts → packages/mgt-components/src/components/BasePersonCardSection.ts

@@ -9,10 +9,10 @@ import { MgtTemplatedComponent, mgtHtml } from '@microsoft/mgt-element';
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { IDynamicPerson } from '../../../graph/types';
-import { MgtPersonCard } from '../mgt-person-card';
+import { IDynamicPerson } from '../graph/types';
+import { MgtPersonCard } from './mgt-person-card/mgt-person-card';
 
-import '../../sub-components/mgt-spinner/mgt-spinner';
+import './sub-components/mgt-spinner/mgt-spinner';
 
 /**
  * A base class for building person card subsections.

packages/mgt-components/src/components/mgt-person-card/sections/base-person-card-section.scss → packages/mgt-components/src/components/base-person-card-section.scss

@@ -5,8 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
-@import '../../../styles/shared-styles.scss';
-@import '../../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import '../styles/shared-styles.scss';
+@import '../../../../node_modules/office-ui-fabric-core/dist/sass/References';
 
 $font-color: var(--font-color, #323130);
 

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

@@ -19,6 +19,10 @@ import './mgt-person/mgt-person-types';
 import './mgt-tasks/mgt-tasks';
 import './mgt-teams-channel-picker/mgt-teams-channel-picker';
 import './mgt-todo/mgt-todo';
+import './mgt-contact/mgt-contact';
+import './mgt-messages/mgt-messages';
+import './mgt-organization/mgt-organization';
+import './mgt-profile/mgt-profile';
 import './mgt-theme-toggle/mgt-theme-toggle';
 
 export * from './mgt-agenda/mgt-agenda';
@@ -35,4 +39,9 @@ export * from './mgt-person/mgt-person-types';
 export * from './mgt-tasks/mgt-tasks';
 export * from './mgt-teams-channel-picker/mgt-teams-channel-picker';
 export * from './mgt-todo/mgt-todo';
+export * from './mgt-contact/mgt-contact';
+export * from './mgt-contact/mgt-contact';
+export * from './mgt-messages/mgt-messages';
+export * from './mgt-organization/mgt-organization';
+export * from './mgt-profile/mgt-profile';
 export * from './mgt-theme-toggle/mgt-theme-toggle';

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

@@ -6,11 +6,9 @@
  */
 
 @import '../base-person-card-section.scss';
-@import '../../../../styles/shared-styles.scss';
-@import '../../../../styles/shared-sass-variables.scss';
-
-$person-card-contact-link-color: var(--person-card-contact-link-color, #{$commblue_primary});
-$person-card-contact-link-hover-color: var(--person-card-contact-link-hover-color, #004578);
+@import '../../styles/shared-styles.scss';
+@import '../../styles/shared-sass-variables.scss';
+@import './mgt-contact.theme.scss';
 
 :host {
   position: relative;
@@ -60,7 +58,7 @@ $person-card-contact-link-hover-color: var(--person-card-contact-link-hover-colo
           line-height: 19px;
 
           .part__link {
-            color: $person-card-contact-link-color;
+            color: set-var(person-card-contact-link-color, $theme-default, $contact-theme);
             font-family: $font-family;
             font-size: 14px;
             cursor: pointer;
@@ -71,7 +69,7 @@ $person-card-contact-link-hover-color: var(--person-card-contact-link-hover-colo
             display: inline-block;
 
             &:hover {
-              color: $person-card-contact-link-hover-color;
+              color: set-var(person-card-contact-link-hover-color, $theme-default, $contact-theme);
             }
           }
         }

packages/mgt-components/src/components/mgt-contact/mgt-contact.theme.scss

@@ -0,0 +1,23 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../styles/shared-sass-variables.scss';
+
+$contact-theme: (
+  person-card-contact-link-color: (
+    _var: --person-card-contact-link-color,
+    light: $link__color--light,
+    dark: $link__color--dark
+  ),
+  person-card-contact-link-hover-color: (
+    _var: --person-card-contact-link-hover-color,
+    light: $link__color__hover--light,
+    dark: $link__color__hover--dark
+  )
+);
+
+@include create-themes($contact-theme);

packages/mgt-components/src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts → packages/mgt-components/src/components/mgt-contact/mgt-contact.ts

@@ -10,10 +10,10 @@ import { html, TemplateResult } from 'lit';
 import { TeamsHelper, customElement } from '@microsoft/mgt-element';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { getEmailFromGraphEntity } from '../../../../graph/graph.people';
+import { getEmailFromGraphEntity } from '../../graph/graph.people';
 import { BasePersonCardSection } from '../BasePersonCardSection';
-import { styles } from './mgt-person-card-contact-css';
-import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
+import { styles } from './mgt-contact-css';
+import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
 
 /**
@@ -40,12 +40,12 @@ type Protocol = 'mailto:' | 'tel:';
  * The contact details subsection of the person card
  *
  * @export
- * @class MgtPersonCardProfile
+ * @class MgtContact
  * @extends {MgtTemplatedComponent}
  */
-@customElement('person-card-contact')
-// @customElement('mgt-person-card-contact')
-export class MgtPersonCardContact extends BasePersonCardSection {
+@customElement('contact')
+// @customElement('mgt-contact')
+export class MgtContact extends BasePersonCardSection {
   /**
    * Array of styles to apply to the element. The styles should be defined
    * using the `css` tag function.
@@ -143,7 +143,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    *
    * @readonly
    * @type {string}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   public get displayName(): string {
     return this.strings.contactSectionTitle;
@@ -155,7 +155,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Render the icon for display in the navigation ribbon.
    *
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   public renderIcon(): TemplateResult {
     return getSvg(SvgIcon.Contact);
@@ -165,7 +165,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Reset any state in the section
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   public clearState() {
     super.clearState();
@@ -178,7 +178,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Render the compact view
    *
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected renderCompactView(): TemplateResult {
     let contentTemplate: TemplateResult;
@@ -214,7 +214,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    *
    * @protected
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected renderFullView(): TemplateResult {
     let contentTemplate: TemplateResult;
@@ -241,7 +241,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * @protected
    * @param {IContactPart} part
    * @returns {TemplateResult}
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected renderContactPart(part: IContactPart): TemplateResult {
     let isPhone = false;
@@ -270,9 +270,12 @@ export class MgtPersonCardContact extends BasePersonCardSection {
           <div class="part__title">${part.title}</div>
           <div class="part__value" title=${part.title}>${valueTemplate}</div>
         </div>
-        <div class="part__copy" aria-role="button" aria-label=${this.strings.copyToClipboardButton} title=${
-      this.strings.copyToClipboardButton
-    }>
+        <div
+          class="part__copy"
+          aria-role="button" 
+          aria-label=${this.strings.copyToClipboardButton}
+          title=${this.strings.copyToClipboardButton}
+        >
           ${getSvg(SvgIcon.Copy)}
         </div>
       </div>
@@ -283,7 +286,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Handle the click event for contact parts
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected handlePartClick(e: MouseEvent, value: string): void {
     if (value) {
@@ -303,7 +306,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Send a chat message to the user
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected sendChat(upn: string): void {
     if (!upn) {
@@ -329,7 +332,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Send an email to the user
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected sendEmail(email: string): void {
     this.sendLink('mailto:', email);
@@ -339,7 +342,7 @@ export class MgtPersonCardContact extends BasePersonCardSection {
    * Send a call to the user
    *
    * @protected
-   * @memberof MgtPersonCardContact
+   * @memberof MgtContact
    */
   protected sendCall = (phone: string): void => {
     this.sendLink('tel:', phone);

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -31,6 +31,18 @@ $progress-ring-size: var(--progress-ring-size, 24px);
 :host {
   font-family: $font-family;
   font-size: $font-size;
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: set-var(title__color__subtitle, $theme-default, $common);
+    padding: 20px 0 12px;
+    line-height: 19px;
+  }
+}
+
+:host .root {
+  padding-inline-start: 20px;
 }
 
 :host .file-list-wrapper {
@@ -43,6 +55,12 @@ $progress-ring-size: var(--progress-ring-size, 24px);
   display: flex;
   flex-direction: column;
   border-radius: 8px;
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: set-var(title__color__subtitle, $theme-default, $common);
+    margin: 0 20px -15px 20px;
+  }
 
   .file-list {
     display: flex;