Merge branch 'master' into playground

Author: beth-panx

.github/PULL_REQUEST_TEMPLATE.md

@@ -17,12 +17,12 @@ Closes # <!-- REQUIRED: Add the issue number (ex: #12) so the issue is automatic
 ### Description of the changes
 
 ### PR checklist
-- [ ] Added tests and all passed
+- [ ] Project builds (`npm run build`) and changes have been tested in supported browsers (including IE11)
 - [ ] All public classes and methods have been documented
 - [ ] Added appropriate [documentation](https://github.com/microsoftgraph/microsoft-graph-docs/tree/master/concepts/toolkit)
-- [ ] License header has been added to all new source files
+- [ ] License header has been added to all new source files (`npm run setLicense`)
 - [ ] Contains **NO** breaking changes
 
 ### Other information
 <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. 
-     Please note that breaking changes are likely to be rejected -->
+     Please note that breaking changes are likely to be rejected -->

package.json

@@ -60,7 +60,7 @@
     "@microsoft/microsoft-graph-types-beta": "microsoftgraph/msgraph-typescript-typings#beta",
     "lit-element": "^2.2.1",
     "msal": "1.1.3",
-    "office-ui-fabric-core": "10.1.0"
+    "office-ui-fabric-core": "11.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",

readme.md

@@ -24,12 +24,14 @@ The toolkit currently includes the following components:
 * [mgt-people-picker](https://docs.microsoft.com/graph/toolkit/components/people-picker)
 * [mgt-agenda](https://docs.microsoft.com/graph/toolkit/components/agenda)
 * [mgt-tasks](https://docs.microsoft.com/graph/toolkit/components/tasks)
+* [mgt-get](https://docs.microsoft.com/graph/toolkit/components/get)
 
 And the following providers:
 
 * [Msal Provider](https://docs.microsoft.com/graph/toolkit/providers/msal)
 * [SharePoint Provider](https://docs.microsoft.com/graph/toolkit/providers/sharepoint)
 * [Teams Provider](https://docs.microsoft.com/graph/toolkit/providers/teams)
+* [Proxy Provider](https://docs.microsoft.com/graph/toolkit/providers/proxy)
 * [Simple Provider](https://docs.microsoft.com/graph/toolkit/providers/custom)
 
 [View the full documentation](https://docs.microsoft.com/graph/toolkit/overview)

src/components/baseComponent.ts

@@ -6,6 +6,30 @@
  */
 
 import { LitElement, PropertyValues } from 'lit-element';
+
+/**
+ * Defines media query based on component width
+ *
+ * @export
+ * @enum {string}
+ */
+export enum ComponentMediaQuery {
+  /**
+   * devices with width < 768
+   */
+  mobile = '',
+
+  /**
+   * devies with width < 1200
+   */
+  tablet = 'tablet',
+
+  /**
+   * devices with width > 1200
+   */
+  desktop = 'desktop'
+}
+
 /**
  * BaseComponent extends LitElement including ShadowRoot toggle and fireCustomEvent features
  *
@@ -35,6 +59,23 @@ export abstract class MgtBaseComponent extends LitElement {
     this._useShadowRoot = value;
   }
 
+  /**
+   * Gets the ComponentMediaQuery of the component
+   *
+   * @readonly
+   * @type {ComponentMediaQuery}
+   * @memberof MgtBaseComponent
+   */
+  public get mediaQuery(): ComponentMediaQuery {
+    if (this.offsetWidth < 768) {
+      return ComponentMediaQuery.mobile;
+    } else if (this.offsetWidth < 1200) {
+      return ComponentMediaQuery.tablet;
+    } else {
+      return ComponentMediaQuery.desktop;
+    }
+  }
+
   private static _useShadowRoot: boolean = true;
 
   constructor() {
@@ -71,6 +112,7 @@ export abstract class MgtBaseComponent extends LitElement {
     });
     return this.dispatchEvent(event);
   }
+
   /**
    * method to create ShadowRoot if disabled flag isn't present
    *

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

@@ -31,20 +31,17 @@ $color: var(--color, #{$ms-color-neutralDark});
 
       .display-name {
         font-size: 27.3103px;
-        // line-height: 36px;
         color: #333333;
       }
 
       .job-title {
         font-size: 18.2069px;
-        // line-height: 31px;
         color: #767676;
         font-weight: 600;
       }
 
       .department {
         font-size: 15.1724px;
-        // line-height: 31px;
         color: #767676;
       }
 
@@ -68,14 +65,13 @@ $color: var(--color, #{$ms-color-neutralDark});
 
   .additional-details-container {
     .additional-details-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       height: 28px;
       background: rgba(196, 196, 196, 0.1);
-      text-align: center;
-      position: relative;
       .additional-details-svg {
-        width: 50%;
-        bottom: 0;
-        top: 100%;
+        margin-bottom: 3px;
       }
     }
     .additional-details-button:hover {