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`${altText} (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`${altText} (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

+ +
+ + +`;