feat: file grid

ecs-article.md

@@ -0,0 +1,15 @@
+# Microsoft Graph Toolkit - Overview and extensibility
+
+The Microsoft Graph Toolkit is a collection of authentication providers and web components powered by Microsoft Graph. The components simplify connecting to Microsoft Graph and allow developers to focus on their application instead of authentication and the Microsoft Graph API. The components are fully functional right out of the box, but can also be extended to fit most scenarios. The Microsoft Graph Toolkit is available as a library of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and also in a React version via a lightweight wrapper.
+
+## Benefits
+
+## Authentication
+
+## Web Components
+
+## React Components
+
+## Styling
+
+## Extensibility

index.html

@@ -38,16 +38,16 @@
 
     <mgt-mock-provider></mgt-mock-provider>
     <header>
-      <mgt-theme-toggle></mgt-theme-toggle>
+      <mgt-theme-toggle mode="light"></mgt-theme-toggle>
     </header>
 
     <h1>Developer test page</h1>
     <main>
       <h2>mgt-login</h2>
       <mgt-login login-view="compact"></mgt-login>
-      <mgt-login></mgt-login>
+      <!-- <mgt-login></mgt-login>
       <h2>mgt-person me query two lines card on click with presence</h2>
-      <!-- <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person> -->
+      <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person> -->
       <mgt-person-card person-query="me"></mgt-person-card>
       <!-- <h2>mgt-people-picker</h2>
       <mgt-people-picker></mgt-people-picker>
@@ -60,16 +60,26 @@ <h2>mgt-agenda group-by-day</h2>
       <h2>mgt-people show-presence</h2>
       <mgt-people show-presence></mgt-people>
       <h2>mgt-todo</h2>
-      <mgt-todo></mgt-todo>
+      <mgt-todo></mgt-todo>-->
+      <h2>mgt-file-list-composite</h2>
+      <mgt-file-list-composite
+        breadcrumb-root-name="Drive"
+        drive-id="b!M5IeZ2QKf0y18TIIXsDQkecHx1QrukxCte8X3n6ka6yn409-utaER7M2W9uRO4yB"
+        item-id="01WEUQSTTDRNNTJAJ7L5AJYYYSIOC665GF"
+        use-grid-view
+        enable-file-upload
+      ></mgt-file-list-composite>
       <h2>mgt-file-list</h2>
-      <mgt-file-list></mgt-file-list>
-      <h2>mgt-picker</h2>
+      <mgt-file-list
+        drive-id="b!M5IeZ2QKf0y18TIIXsDQkecHx1QrukxCte8X3n6ka6yn409-utaER7M2W9uRO4yB"
+        item-id="01WEUQSTTDRNNTJAJ7L5AJYYYSIOC665GF"
+        enable-file-upload
+      ></mgt-file-list>
+      <!-- <h2>mgt-picker</h2>
       <mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite"></mgt-picker>
       <h2>mgt-search-box</h2>
       <mgt-search-box search-term="contoso"></mgt-search-box>
-      <h2>mgt-search-results</h2>
-      <mgt-search-results query-string="contoso"></mgt-search-results>
-      <mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite"></mgt-picker> -->
+      <h2>mgt-search-results</h2> -->
     </main>
   </body>
 </html>

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

@@ -21,11 +21,14 @@ 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-breadcrumb/mgt-breadcrumb';
 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';
+import './mgt-file-grid/mgt-file-grid';
+import './mgt-file-list-composite/mgt-file-list-composite';
 
 export * from './mgt-agenda/mgt-agenda';
 export * from './mgt-file/mgt-file';
@@ -43,9 +46,12 @@ 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-breadcrumb/mgt-breadcrumb';
 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';
+export * from './mgt-file-grid/mgt-file-grid';
+export * from './mgt-file-list-composite/mgt-file-list-composite';

packages/mgt-components/src/components/mgt-breadcrumb/mgt-breadcrumb.scss

@@ -0,0 +1,33 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import '../../styles/shared-styles.scss';
+@import './mgt-breadcrumb.theme.scss';
+
+:host {
+  --type-ramp-base-font-size: var(--breadcrumb-base-font-size, 18px);
+  --type-ramp-base-line-height: var(--breadcrumb-base-line-height, 36px);
+
+  &::part(crumb),
+  &::part(control) {
+    padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
+  }
+
+  &::part(crumb) {
+    font-weight: 600;
+  }
+  &::part(control) {
+    background-color: var(--neutral-fill-rest);
+    background: var(--neutral-fill-rest);
+    padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
+    &:hover {
+      background-color: var(--neutral-fill-stealth-hover);
+      background: var(--neutral-fill-stealth-hover);
+    }
+  }
+}

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

@@ -0,0 +1,212 @@
+import '../../__mocks__/mock-media-match';
+import { screen } from 'testing-library__dom';
+import userEvent from '@testing-library/user-event';
+import { fixture } from '@open-wc/testing-helpers';
+import './mgt-breadcrumb';
+import { BreadcrumbInfo, MgtBreadcrumb } from './mgt-breadcrumb';
+
+describe('mgt-breadcrumb - tests', () => {
+  it('should render', async () => {
+    const component = await fixture(`
+      <mgt-breadcrumb></mgt-breadcrumb>
+    `);
+    expect(component).toBeDefined();
+  });
+  it('should render with a single node', async () => {
+    const component: MgtBreadcrumb = await fixture(`
+      <mgt-breadcrumb></mgt-breadcrumb>
+    `);
+    component.breadcrumb = [
+      {
+        id: 'root-item',
+        name: 'root-item'
+      }
+    ];
+    await component.updateComplete;
+    const listItems = await screen.findAllByRole('listitem');
+    expect(listItems?.length).toBe(1);
+    const root = await screen.findByText('root-item');
+    expect(root).toBeDefined();
+  });
+  it('should render with three nodes', async () => {
+    const component: MgtBreadcrumb = await fixture(`
+      <mgt-breadcrumb></mgt-breadcrumb>
+    `);
+    component.breadcrumb = [
+      {
+        id: '0',
+        name: 'root-item'
+      },
+      {
+        id: '1',
+        name: 'node-1'
+      },
+      {
+        id: '2',
+        name: 'node-2'
+      }
+    ];
+    await component.updateComplete;
+    const listItems = await screen.findAllByRole('listitem');
+    expect(listItems?.length).toBe(3);
+    const root = await screen.findByText('root-item');
+    expect(root).toBeDefined();
+
+    const buttons = await screen.findAllByRole('button');
+
+    expect(buttons?.length).toBe(2);
+  });
+
+  it('should emit a clicked event when a button is clicked', async () => {
+    const component: MgtBreadcrumb = await fixture(`
+    <mgt-breadcrumb></mgt-breadcrumb>
+  `);
+    let eventEmitted;
+    component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
+      eventEmitted = e.detail;
+    });
+
+    const rootNode = {
+      id: '0',
+      name: 'root-item'
+    };
+    component.breadcrumb = [
+      rootNode,
+      {
+        id: '1',
+        name: 'node-1'
+      }
+    ];
+    await component.updateComplete;
+
+    const buttons = await screen.findAllByRole('button');
+    expect(buttons?.length).toBe(1);
+
+    buttons[0].click();
+    expect(eventEmitted).toBeDefined();
+    expect(eventEmitted).toBe(rootNode);
+  });
+
+  it('should emit a clicked event when the enter button is pressed', async () => {
+    const user = userEvent.setup();
+    const component: MgtBreadcrumb = await fixture(`
+    <mgt-breadcrumb></mgt-breadcrumb>
+  `);
+    let eventEmitted;
+    component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
+      eventEmitted = e.detail;
+    });
+
+    const rootNode = {
+      id: '0',
+      name: 'root-item'
+    };
+    component.breadcrumb = [
+      rootNode,
+      {
+        id: '1',
+        name: 'node-1'
+      }
+    ];
+    await component.updateComplete;
+
+    const buttons = await screen.findAllByRole('button');
+    expect(buttons?.length).toBe(1);
+    buttons[0].focus();
+
+    await user.keyboard('{Enter}');
+    expect(eventEmitted).toBeDefined();
+    expect(eventEmitted).toBe(rootNode);
+  });
+
+  it('should emit a clicked event when the space button is pressed', async () => {
+    const user = userEvent.setup();
+    const component: MgtBreadcrumb = await fixture(`
+    <mgt-breadcrumb></mgt-breadcrumb>
+  `);
+    let eventEmitted;
+    component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
+      eventEmitted = e.detail;
+    });
+
+    const rootNode = {
+      id: '0',
+      name: 'root-item'
+    };
+    component.breadcrumb = [
+      rootNode,
+      {
+        id: '1',
+        name: 'node-1'
+      }
+    ];
+    await component.updateComplete;
+
+    const buttons = await screen.findAllByRole('button');
+    expect(buttons?.length).toBe(1);
+    buttons[0].focus();
+
+    await user.keyboard(' ');
+    expect(eventEmitted).toBeDefined();
+    expect(eventEmitted).toBe(rootNode);
+  });
+
+  it('should not emit a clicked event when a regular character button is pressed', async () => {
+    const user = userEvent.setup();
+    const component: MgtBreadcrumb = await fixture(`
+    <mgt-breadcrumb></mgt-breadcrumb>
+  `);
+    let eventEmitted;
+    component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
+      eventEmitted = e.detail;
+    });
+
+    const rootNode = {
+      id: '0',
+      name: 'root-item'
+    };
+    component.breadcrumb = [
+      rootNode,
+      {
+        id: '1',
+        name: 'node-1'
+      }
+    ];
+    await component.updateComplete;
+
+    const buttons = await screen.findAllByRole('button');
+    expect(buttons?.length).toBe(1);
+    buttons[0].focus();
+
+    await user.keyboard('r');
+    expect(eventEmitted).toBeUndefined();
+  });
+
+  it('should not emit a clicked event when the last node is clicked', async () => {
+    const component: MgtBreadcrumb = await fixture(`
+      <mgt-breadcrumb></mgt-breadcrumb>
+    `);
+    let eventEmitted;
+    component.addEventListener('breadcrumbclick', (e: CustomEvent<BreadcrumbInfo>) => {
+      eventEmitted = e.detail;
+    });
+
+    const rootNode = {
+      id: '0',
+      name: 'root-item'
+    };
+    component.breadcrumb = [
+      rootNode,
+      {
+        id: '1',
+        name: 'node-1'
+      }
+    ];
+    await component.updateComplete;
+
+    const notButton = await screen.findByText('node-1');
+    notButton.click();
+
+    expect(eventEmitted).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,12 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * 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';
+
+$breadcrumb: ();
+
+@include create-themes($breadcrumb);