feat: nodejs 16 support (#1911)

* Updates dependencies to allow for developers to build using NodeJS 12-16

* adding node versions 14 and 16 to PR build matrix

* update workflows to use node 16 as the default build environment

.github/workflows/next.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr-clean-storybook.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr-storybook.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [12.x, 14.x, 16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/push-release.yml

@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/push.yml

@@ -15,7 +15,7 @@ jobs:
     if: github.repository == 'microsoftgraph/microsoft-graph-toolkit'
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/storybook.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -37,7 +37,7 @@ jobs:
           branch: gh-pages
           folder: storybook-static
           target-folder: next
-          clean-exclude: | 
+          clean-exclude: |
             pr
             fluentui
           token: ${{ secrets.GITHUB_TOKEN }}

gulpfile.js

@@ -1,5 +1,5 @@
 const gulp = require('gulp');
-const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const gap = require('gulp-append-prepend');
 const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');

package.json

@@ -85,7 +85,7 @@
     "gulp-clean-css": "4.3.0",
     "gulp-header-license": "^1.0.10",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0",
+    "gulp-sass": "^5.1.0",
     "gulp-util": "^3.0.8",
     "husky": "^4.3.0",
     "jest": "^24.5.0",

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

@@ -1,4 +1,4 @@
-import { OfficeGraphInsightString,ViewType,ResponseType,IDynamicPerson,PersonType,GroupType,UserType,PersonCardInteraction,MgtPersonConfig,AvatarSize,PersonViewType,TasksStringResource,TasksSource,TaskFilter,SelectedChannel,TodoFilter } from '@microsoft/mgt-components';
+import { OfficeGraphInsightString,ViewType,ResponseType,IDynamicPerson,LoginViewType,PersonType,GroupType,UserType,PersonCardInteraction,MgtPersonConfig,AvatarSize,PersonViewType,TasksStringResource,TasksSource,TaskFilter,SelectedChannel,TodoFilter } from '@microsoft/mgt-components';
 import { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
@@ -84,6 +84,8 @@ export type GetProps = {
 
 export type LoginProps = {
 	userDetails?: IDynamicPerson;
+	showPresence?: boolean;
+	loginView?: LoginViewType;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
 	loginInitiated?: (e: Event) => void;
@@ -164,6 +166,7 @@ export type PersonProps = {
 	personQuery?: string;
 	fallbackDetails?: IDynamicPerson;
 	userId?: string;
+	usage?: string;
 	showPresence?: boolean;
 	personDetails?: IDynamicPerson;
 	personImage?: string;