Merge branch 'main' into a11y/fix-btn-chevron

.storybook/manager-head.html

@@ -4,6 +4,8 @@
 <footer class="storybook-footer">
   Microsoft Graph Toolkit (v<span id="mgt-version"></span>) Playground was founded by Microsoft as a community guided,
   open source project.
-  <a href="https://privacy.microsoft.com/en-us/privacystatement">Privacy & cookies</a>
+  <br />
+  <a href="https://privacy.microsoft.com/en-us/privacystatement">Privacy & cookies</a> |
+  <a href=" https://go.microsoft.com/fwlink/?linkid=2259814">Consumer Health Privacy</a> |
   <a href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default">Terms of use</a>
 </footer>

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

@@ -9,9 +9,11 @@
 @import '../../../styles/shared-sass-variables';
 @import './mgt-file-upload.theme';
 
-
 $file-upload-button-border: var(--file-upload-button-border, none);
-$file-upload-dialog-replace-button-border: var(--file-upload-dialog-replace-button-border, 1px solid var(--neutral-foreground-rest));
+$file-upload-dialog-replace-button-border: var(
+  --file-upload-dialog-replace-button-border,
+  1px solid var(--neutral-foreground-rest)
+);
 $file-upload-dialog-keep-both-button-border: var(--file-upload-dialog-keep-both-button-border, none);
 $file-upload-dialog-border: var(--file-upload-dialog-border, 1px solid var(--neutral-fill-rest));
 $file-upload-dialog-width: var(--file-upload-dialog-width, auto);
@@ -234,9 +236,58 @@ $file-upload-border-drag: var(--file-upload-border-drag, 1px dashed #0078d4);
   }
 }
 
-[dir="rtl"] {
-  :host .file-upload-status{
+[dir='rtl'] {
+  :host .file-upload-status {
     left: 0;
     right: 28px;
   }
 }
+
+@media (forced-colors: active) {
+  :host {
+    fluent-button {
+      .upload-icon {
+        path {
+          fill: highlighttext;
+        }
+      }
+
+      &.file-upload-button {
+        &::part(control) {
+          border-width: 1px;
+          border-style: solid;
+          border-color: buttontext;
+          background: highlight;
+
+          &:hover {
+            background: highlighttext;
+            border-color: highlight;
+          }
+        }
+
+        .upload-text {
+          color: highlighttext;
+        }
+      }
+
+      &:hover {
+        .upload-icon {
+          path {
+            fill: highlight;
+          }
+        }
+
+        &.file-upload-button {
+          &::part(control) {
+            border-color: highlight;
+            background: highlighttext;
+          }
+
+          .upload-text {
+            color: highlight;
+          }
+        }
+      }
+    }
+  }
+}

packages/mgt-element/src/index.ts

@@ -39,6 +39,7 @@ export * from './utils/LocalizationHelper';
 export * from './utils/mgtHtml';
 export * from './utils/CustomElement';
 export * from './utils/registerComponent';
+export * from './utils/isSignedIn';
 
 export { PACKAGE_VERSION } from './utils/version';
 

packages/mgt-element/src/utils/isSignedIn.tests.ts

@@ -0,0 +1,22 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { expect } from '@open-wc/testing';
+import { MockProvider } from '../mock/MockProvider';
+import { ProviderState } from '../providers/IProvider';
+import { Providers } from '../providers/Providers';
+import { isSignedIn } from './isSignedIn';
+
+describe('signedInState', () => {
+  it('should change', () => {
+    /* eslint-disable @typescript-eslint/no-unused-expressions */
+    Providers.globalProvider = new MockProvider(false);
+    expect(isSignedIn()).to.be.false;
+    Providers.globalProvider.setState(ProviderState.SignedIn);
+    expect(isSignedIn()).to.be.true;
+  });
+});

packages/mgt-element/src/utils/isSignedIn.ts

@@ -0,0 +1,19 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { ProviderState } from '../providers/IProvider';
+import { Providers } from '../providers/Providers';
+
+/**
+ * Checks the provider state if it's in signed in.
+ *
+ * @returns true if signed in, otherwise false.
+ */
+export const isSignedIn = (): boolean => {
+  const provider = Providers.globalProvider;
+  return provider && provider.state === ProviderState.SignedIn;
+};

packages/mgt-react/readme.md

@@ -93,6 +93,24 @@ const App = (props) => {
 
 The `template` prop allows you to specify which template to overwrite. In this case, the `MyEvent` component will be repeated for every event, and the `event` object will be passed as part of the `dataContext` prop.
 
+## Custom hooks
+
+`mgt-react` exposes some custom hooks that you can use in your app:
+
+### `useIsSignedIn`
+
+You can use this hook to check the signed in state:
+
+```tsx
+import { Agenda, useIsSignedIn } from '@microsoft/mgt-react';
+
+const App = (props) => {
+  const [isSignedIn] = useIsSignedIn();
+
+  return {isSignedIn && <Agenda></Agenda>}
+}
+```
+
 ## Why
 
 If you've used web components in React, you know that proper interop between web components and React components requires a bit of extra work.

packages/mgt-react/src/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export * from './useIsSignedIn';

packages/mgt-react/src/hooks/useIsSignedIn.ts

@@ -0,0 +1,31 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { isSignedIn, Providers } from '@microsoft/mgt-element';
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to check if a user is signed in.
+ *
+ * @returns true if a user is signed on, otherwise false.
+ */
+export const useIsSignedIn = (): [boolean] => {
+  const [signedIn, setIsSignedIn] = useState(false);
+  useEffect(() => {
+    const updateState = () => {
+      setIsSignedIn(isSignedIn());
+    };
+
+    Providers.onProviderUpdated(updateState);
+    updateState();
+
+    return () => {
+      Providers.removeProviderUpdatedListener(updateState);
+    };
+  }, [setIsSignedIn]);
+  return [signedIn];
+};

packages/mgt-react/src/index.ts

@@ -8,5 +8,6 @@
 export * from './Mgt';
 export * from './MgtTemplateProps';
 export * from './generated/react';
+export * from './hooks';
 export * from '@microsoft/mgt-components/dist/es6/exports';
 export * from '@microsoft/mgt-element';

samples/react-contoso/src/Layout.tsx

@@ -2,7 +2,7 @@ import React, { Suspense, lazy } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Header } from './components/Header';
 import { SideNavigation } from './components/SideNavigation';
-import { useIsSignedIn } from './hooks/useIsSignedIn';
+import { useIsSignedIn } from '@microsoft/mgt-react';
 import { NavigationItem } from './models/NavigationItem';
 import { getNavigation } from './services/Navigation';
 import { FluentProvider, makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';

samples/react-contoso/src/components/Header.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { Login, SearchBox } from '@microsoft/mgt-react';
+import { Login, SearchBox, useIsSignedIn } from '@microsoft/mgt-react';
 import { PACKAGE_VERSION } from '@microsoft/mgt-element';
-import { InfoButton } from '@fluentui/react-components/unstable';
 import { SimpleLogin } from './SimpleLogin';
-import { useIsSignedIn } from '../hooks/useIsSignedIn';
 import { useNavigate } from 'react-router-dom';
 import { ThemeSwitcher } from './ThemeSwitcher';
 import { useAppContext } from '../AppContext';
-import { Label, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+import { Label, makeStyles, mergeClasses, shorthands, tokens, InfoLabel } from '@fluentui/react-components';
 import { GridDotsRegular } from '@fluentui/react-icons';
 import { useLocation } from 'react-router-dom';
 
@@ -149,11 +147,7 @@ const HeaderComponent: React.FunctionComponent = () => {
 
         <div className={styles.waffleTitle}>
           <Label className={styles.name}>{import.meta.env.VITE_SITE_NAME} </Label>
-          <InfoButton
-            className={styles.infoIcon}
-            size="medium"
-            info={<>Using the Graph Toolkit v{PACKAGE_VERSION}</>}
-          />
+          <InfoLabel className={styles.infoIcon} size="medium" info={<>Using the Graph Toolkit v{PACKAGE_VERSION}</>} />
         </div>
       </div>
       <div className={styles.search}>