diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 56441f9d37..e0dc5001b1 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,3 +1,3 @@
{
- ".": "3.0.1"
+ ".": "3.1.0"
}
\ No newline at end of file
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
index f9a11c894e..c3db8125cb 100644
--- a/.storybook/addons/codeEditorAddon/codeAddon.js
+++ b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -70,8 +70,9 @@ export const withCodeEditor = makeDecorator({
skipIfNoParametersOrOptions: false,
wrapper: (getStory, context, { options }) => {
const forOptions = options ? options.disableThemeToggle : false;
- const forContext =
- context && (context.name === 'Custom CSS Properties' || context.title.toLowerCase().includes('templating'));
+ const title =
+ ['Custom CSS Properties', 'Theme'].includes(context.name) || context.title.toLowerCase().includes('templating');
+ const forContext = context && title;
const disableThemeToggle = forOptions || forContext;
let story = getStory(context);
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 9518088445..1731b26fd7 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -47,7 +47,12 @@ addParameters({
inlineStories: false,
page: noArgsDocsPage
},
- version: versionInfo
+ version: versionInfo,
+ options: {
+ storySort: {
+ order: ['stories']
+ }
+ }
});
const req = require.context('../stories', true, /\.(js|mdx)$/);
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5a27c346c..a80b680b93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,21 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [3.1.0](https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v3.0.1...v3.1.0) (2023-07-28)
+
+
+### Features
+
+* add canary url to allowed endpoints for graph ([#2635](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2635)) ([ec621cd](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/ec621cd37a8eb7f91356944fb29ad85699ee89fa))
+
+
+### Bug Fixes
+
+* **a11y:** add distinct name definitions for copy code buttons in storybook overview ([#2622](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2622)) ([4e52f41](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/4e52f41398b1a5771ada9fe54a67dba4e4b84397))
+* add a title text if displaying images only. ([#2625](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2625)) ([28703c9](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/28703c96dd5366b8543fab2a160994db34a9c13b))
+* check the file type being uploaded before performing upload ([#2584](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2584)) ([7fb265c](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/7fb265c744cbbf53d49fe6d5c3d45bc8493eb2fd))
+* remove agenda tooltip ([#2621](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2621)) ([27e1fc9](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/27e1fc9c61e1957dd8addacb3b667de9546fb358))
+
## [3.0.1](https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v3.0.0...v3.0.1) (2023-07-18)
diff --git a/package.json b/package.json
index 856ce539c9..f461490819 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "root",
"private": true,
- "version": "3.0.1",
+ "version": "3.1.0",
"workspaces": {
"packages": [
"packages/*",
diff --git a/packages/mgt-components/README.md b/packages/mgt-components/README.md
index 29737cf2a0..d6351695a9 100644
--- a/packages/mgt-components/README.md
+++ b/packages/mgt-components/README.md
@@ -13,16 +13,23 @@ You can explore components and samples with the [playground](https://mgt.dev) po
The Toolkit currently includes the following components:
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-file](https://learn.microsoft.com/graph/toolkit/components/file)
+* [mgt-file-list](https://learn.microsoft.com/graph/toolkit/components/file-list)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
* [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
* [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
* [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
+* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
+* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
* [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-taxonomy-picker](https://learn.microsoft.com/graph/toolkit/components/taxonomy-picker)
* [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+* [mgt-theme-toggle](https://learn.microsoft.com/graph/toolkit/components/theme-toggle)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
The components work best when used with a [provider](https://learn.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
index c4a315b425..3cea862ae0 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -8,15 +8,7 @@
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { html, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
-import {
- Providers,
- ProviderState,
- MgtTemplatedComponent,
- prepScopes,
- mgtHtml,
- customElement,
- CollectionResponse
-} from '@microsoft/mgt-element';
+import { Providers, ProviderState, MgtTemplatedComponent, mgtHtml, customElement } from '@microsoft/mgt-element';
import '../../styles/style-helper';
import '../mgt-person/mgt-person';
import { styles } from './mgt-agenda-css';
@@ -24,9 +16,9 @@ import { getEventsPageIterator, getEventsQueryPageIterator } from './mgt-agenda.
import { SvgIcon, getSvg } from '../../utils/SvgHelper';
import { MgtPeople } from '../mgt-people/mgt-people';
import { registerFluentComponents } from '../../utils/FluentComponents';
-import { fluentCard, fluentTooltip } from '@fluentui/web-components';
+import { fluentCard } from '@fluentui/web-components';
import { classMap } from 'lit/directives/class-map.js';
-registerFluentComponents(fluentCard, fluentTooltip);
+registerFluentComponents(fluentCard);
/**
* Web Component which represents events in a user or group calendar.
@@ -407,38 +399,16 @@ export class MgtAgenda extends MgtTemplatedComponent {
* @memberof MgtAgenda
*/
protected renderTitle(event: MicrosoftGraph.Event): TemplateResult {
- let eventDescription = event?.bodyPreview ? event.bodyPreview.slice(0, 100) : '';
- const hasDescription = eventDescription !== '';
-
- const eventSubjectClasses = {
- 'event-subject': true,
- narrow: this._isNarrow
- };
-
- eventDescription = eventDescription.split(' ').slice(0, -1).join(' ') + '...';
-
- const hasDescriptionDiv = html`
-
- ${event.subject}
-
-
- ${eventDescription}
-
- `;
-
- const noDescriptionDiv = html`
+ return html`
- ${event.subject}
+ class="${classMap({
+ 'event-subject': true,
+ narrow: this._isNarrow
+ })}"
+ >
+ ${event.subject}
`;
- return hasDescription ? hasDescriptionDiv : noDescriptionDiv;
}
/**
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
index 7e454b8ba4..e72f05f555 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
@@ -66,6 +66,13 @@ interface FutureDataTransferItem extends DataTransferItem {
getAsEntry: typeof DataTransferItem.prototype.webkitGetAsEntry;
}
+const isFutureDataTransferItem = (item: DataTransferItem): item is FutureDataTransferItem =>
+ 'getAsEntry' in item && typeof item.getAsEntry === 'function';
+
+const isDataTransferItem = (item: DataTransferItem | File): item is DataTransferItem =>
+ ('getAsFile' in item && typeof item.getAsFile === 'function') ||
+ ('webkitGetAsEntry' in item && typeof item.webkitGetAsEntry === 'function');
+
/**
* Upload conflict behavior status
*/
@@ -1160,13 +1167,10 @@ export class MgtFileUpload extends MgtBaseComponent {
let entry: FileSystemEntry;
const collectFilesItems: File[] = [];
- for (const uploadFileItem of filesItems as DataTransferItemList) {
- if (uploadFileItem.kind === 'file') {
- // Defensive code to validate if function exists in Browser
- // Collect all Folders into Array
- const futureUpload = uploadFileItem as FutureDataTransferItem;
- if (futureUpload.getAsEntry) {
- entry = futureUpload.getAsEntry();
+ for (const uploadFileItem of filesItems) {
+ if (isDataTransferItem(uploadFileItem)) {
+ if (isFutureDataTransferItem(uploadFileItem)) {
+ entry = uploadFileItem.getAsEntry();
if (isFileSystemDirectoryEntry(entry)) {
folders.push(entry);
} else {
@@ -1187,22 +1191,19 @@ export class MgtFileUpload extends MgtBaseComponent {
collectFilesItems.push(file);
}
}
- } else if ('function' == typeof uploadFileItem.getAsFile) {
+ } else {
const file = uploadFileItem.getAsFile();
if (file) {
this.writeFilePath(file, '');
collectFilesItems.push(file);
}
}
- continue;
} else {
- const fileItem = uploadFileItem.getAsFile();
- if (fileItem) {
- this.writeFilePath(fileItem, '');
- collectFilesItems.push(fileItem);
- }
+ this.writeFilePath(uploadFileItem, '');
+ collectFilesItems.push(uploadFileItem);
}
}
+
// Collect Files from folder
if (folders.length > 0) {
const folderFiles = await this.getFolderFiles(folders);
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
index 7178b4d364..6e9a20e018 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.scss
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
@@ -45,6 +45,7 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
.flyout {
[slot='anchor'] {
display: flex;
+ cursor: pointer;
&.vertical {
flex-direction: column;
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 2f294379a2..d149ce5a47 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -705,8 +705,15 @@ export class MgtPerson extends MgtTemplatedComponent {
*/
protected renderImage(personDetailsInternal: IDynamicPerson, imageSrc: string) {
const altText = `${this.strings.photoFor} ${personDetailsInternal.displayName}`;
- const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo';
- const imageTemplate = html` (this._isInvalidImageSrc = true)} />`;
+ const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === avatarType.photo;
+ const imageOnly = this.avatarType === avatarType.photo && this.view === ViewType.image;
+ const titleText =
+ (personDetailsInternal?.displayName || getEmailFromGraphEntity(personDetailsInternal)) ?? undefined;
+ const imageTemplate = html` (this._isInvalidImageSrc = true)} />`;
const initials = personDetailsInternal ? this.getInitials(personDetailsInternal) : '';
const hasInitials = initials?.length;
@@ -719,6 +726,7 @@ export class MgtPerson extends MgtTemplatedComponent {
// this reduces the redundant announcement of the user's name.
const textTemplate = html`
diff --git a/packages/mgt-components/src/graph/graph.people.ts b/packages/mgt-components/src/graph/graph.people.ts
index 5fa9844460..cf0041d78b 100644
--- a/packages/mgt-components/src/graph/graph.people.ts
+++ b/packages/mgt-components/src/graph/graph.people.ts
@@ -224,9 +224,9 @@ export const getPeople = async (
};
/**
- * returns a promise that resolves after specified time
+ * Attempts to extract the email from the IDynamicPerson properties.
*
- * @param time in milliseconds
+ * @param {IDynamicperson} entity
*/
export const getEmailFromGraphEntity = (entity: IDynamicPerson): string => {
const person = entity as Person;
diff --git a/packages/mgt-element/src/IGraph.ts b/packages/mgt-element/src/IGraph.ts
index 30024dfaf3..ddb60065c4 100644
--- a/packages/mgt-element/src/IGraph.ts
+++ b/packages/mgt-element/src/IGraph.ts
@@ -75,12 +75,8 @@ export type GraphEndpoint =
| 'https://graph.microsoft.us'
| 'https://dod-graph.microsoft.us'
| 'https://graph.microsoft.de'
- | 'https://microsoftgraph.chinacloudapi.cn';
-
-/**
- * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
- */
-export const MICROSOFT_GRAPH_ENDPOINTS: Set = new Set();
+ | 'https://microsoftgraph.chinacloudapi.cn'
+ | 'https://canary.graph.microsoft.com';
/**
* MICROSOFT_GRAPH_DEFAULT_ENDPOINT is the default Graph endpoint that is silently set on
@@ -88,13 +84,14 @@ export const MICROSOFT_GRAPH_ENDPOINTS: Set = new Set {
- const endpoints: GraphEndpoint[] = [
- MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
- 'https://graph.microsoft.us',
- 'https://dod-graph.microsoft.us',
- 'https://graph.microsoft.de',
- 'https://microsoftgraph.chinacloudapi.cn'
- ];
- endpoints.forEach(endpoint => MICROSOFT_GRAPH_ENDPOINTS.add(endpoint));
-})();
+/**
+ * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
+ */
+export const MICROSOFT_GRAPH_ENDPOINTS: Set = new Set([
+ MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
+ 'https://graph.microsoft.us',
+ 'https://dod-graph.microsoft.us',
+ 'https://graph.microsoft.de',
+ 'https://microsoftgraph.chinacloudapi.cn',
+ 'https://canary.graph.microsoft.com'
+]);
diff --git a/packages/mgt/README.md b/packages/mgt/README.md
index cb6d8264d5..2830533e5f 100644
--- a/packages/mgt/README.md
+++ b/packages/mgt/README.md
@@ -15,27 +15,34 @@ The Microsoft Graph Toolkit includes a collection of web components for the most
The components are also available as [React components](https://learn.microsoft.com/graph/toolkit/get-started/mgt-react).
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-file](https://learn.microsoft.com/graph/toolkit/components/file)
+* [mgt-file-list](https://learn.microsoft.com/graph/toolkit/components/file-list)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
* [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
* [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
* [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
+* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
+* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
* [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-taxonomy-picker](https://learn.microsoft.com/graph/toolkit/components/taxonomy-picker)
* [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+* [mgt-theme-toggle](https://learn.microsoft.com/graph/toolkit/components/theme-toggle)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
## Providers
[Providers](https://learn.microsoft.com/graph/toolkit/providers) enable authentication and provide the implementation for acquiring access tokens on various platforms and expose a Microsoft Graph Client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own.
-* [Msal Provider](https://learn.microsoft.com/graph/toolkit/providers/msal)
-* [Msal2 Provider](https://learn.microsoft.com/graph/toolkit/providers/msal2)
-* [SharePoint Provider](https://learn.microsoft.com/graph/toolkit/providers/sharepoint)
-* [Teams Provider](https://learn.microsoft.com/graph/toolkit/providers/teams)
-* [Teams Msal2 Provider](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2)
-* [Proxy Provider](https://learn.microsoft.com/graph/toolkit/providers/proxy)
-* [Simple Provider](https://learn.microsoft.com/graph/toolkit/providers/custom)
+* [Msal2Provider](https://learn.microsoft.com/graph/toolkit/providers/msal2)
+* [SharePointProvider](https://learn.microsoft.com/graph/toolkit/providers/sharepoint)
+* [TeamsFxProvider](https://learn.microsoft.com/graph/toolkit/providers/teamsfx)
+* [ProxyProvider](https://learn.microsoft.com/graph/toolkit/providers/proxy)
+* [SimpleProvider](https://learn.microsoft.com/graph/toolkit/providers/custom)
+* [ElectronProvider](https://learn.microsoft.com/graph/toolkit/providers/electron)
+
## Getting Started
@@ -46,15 +53,15 @@ You can use the components by referencing the loader directly (via unpkg), or in
### Use via mgt-loader:
```html
-
+
```
-> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
+> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 3.0.0 < 4.0.0`, omitting the `@3` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
You can then start using the components in your html page. Here is a full working example with the Msal2 provider:
```html
-
+
diff --git a/readme.md b/readme.md
index 6fe01298ef..2fe2885151 100644
--- a/readme.md
+++ b/readme.md
@@ -62,6 +62,7 @@ The Toolkit currently includes the following components:
* [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
* [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
diff --git a/stories/components/agenda/agenda.a.js b/stories/components/agenda/agenda.stories.js
similarity index 100%
rename from stories/components/agenda/agenda.a.js
rename to stories/components/agenda/agenda.stories.js
diff --git a/stories/components/file/file.a.js b/stories/components/file/file.stories.js
similarity index 100%
rename from stories/components/file/file.a.js
rename to stories/components/file/file.stories.js
diff --git a/stories/components/fileList/fileList.a.js b/stories/components/fileList/fileList.stories.js
similarity index 100%
rename from stories/components/fileList/fileList.a.js
rename to stories/components/fileList/fileList.stories.js
diff --git a/stories/components/people/people.a.js b/stories/components/people/people.stories.js
similarity index 100%
rename from stories/components/people/people.a.js
rename to stories/components/people/people.stories.js
diff --git a/stories/components/peoplePicker/peoplePicker.a.js b/stories/components/peoplePicker/peoplePicker.stories.js
similarity index 100%
rename from stories/components/peoplePicker/peoplePicker.a.js
rename to stories/components/peoplePicker/peoplePicker.stories.js
diff --git a/stories/components/personCard/personCard.a.js b/stories/components/personCard/personCard.stories.js
similarity index 100%
rename from stories/components/personCard/personCard.a.js
rename to stories/components/personCard/personCard.stories.js
diff --git a/stories/components/preview/searchBox/searchBox.a.js b/stories/components/preview/searchBox/searchBox.stories.js
similarity index 100%
rename from stories/components/preview/searchBox/searchBox.a.js
rename to stories/components/preview/searchBox/searchBox.stories.js
diff --git a/stories/components/preview/searchResults/searchResults.a.js b/stories/components/preview/searchResults/searchResults.stories.js
similarity index 100%
rename from stories/components/preview/searchResults/searchResults.a.js
rename to stories/components/preview/searchResults/searchResults.stories.js
diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.a.js b/stories/components/teamsChannelPicker/teamsChannelPicker.stories.js
similarity index 100%
rename from stories/components/teamsChannelPicker/teamsChannelPicker.a.js
rename to stories/components/teamsChannelPicker/teamsChannelPicker.stories.js
diff --git a/stories/samples/general.stories.b.js b/stories/samples/general.stories.b.js
deleted file mode 100644
index 59c139565a..0000000000
--- a/stories/samples/general.stories.b.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * -------------------------------------------------------------------------------------------
- * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
- * See License in the project root for license information.
- * -------------------------------------------------------------------------------------------
- */
-
-import { html } from 'lit';
-import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon';
-
-export default {
- title: 'Samples / General',
- decorators: [
- withCodeEditor({
- disableThemeToggle: true
- })
- ],
- parameters: {
- viewMode: 'story'
- }
-};
-
-export const theme = () => html`
-
-
This demonstrates how to set the theme globally without using a theme toggle and customize styling within specific scopes
-
Please refer to the JS and CSS tabs in the editor for implentation details
-
-
This picker shows the custom focus ring color
-
-
-
-
- I use the theme set on the body
-
-
-
I am custom themed, take care to ensure that your customizations maintain accessibility standards
-
-
-
-
-`;
diff --git a/stories/samples/general.stories.a.js b/stories/samples/general.stories.js
similarity index 75%
rename from stories/samples/general.stories.a.js
rename to stories/samples/general.stories.js
index 15e8dbc007..86c011bd3c 100644
--- a/stories/samples/general.stories.a.js
+++ b/stories/samples/general.stories.js
@@ -172,3 +172,54 @@ clearCacheButton.addEventListener('click', onClearCacheButtonClick);
// };
`;
+
+export const theme = () => html`
+
+
This demonstrates how to set the theme globally without using a theme toggle and customize styling within specific scopes
+
Please refer to the JS and CSS tabs in the editor for implentation details
+
+
This picker shows the custom focus ring color
+
+
+
+
+ I use the theme set on the body
+
+
+
I am custom themed, take care to ensure that your customizations maintain accessibility standards
+
+
+
+
+`;