update stories files

packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts

@@ -12,7 +12,8 @@ import {
 } from '../../styles/';
 import { heightNumber } from '../../styles/size';
 
-export const accordionItemStyles = (context, definition) => css`
+export const accordionItemStyles = (context, definition) =>
+  css`
     ${display('flex')} :host {
         box-sizing: border-box;
         font-family: var(--body-font);
@@ -122,15 +123,15 @@ export const accordionItemStyles = (context, definition) => css`
         z-index: 2;
     }
 `.withBehaviors(
-  accentFillRestBehavior,
-  neutralDividerRestBehavior,
-  neutralForegroundActiveBehavior,
-  neutralForegroundFocusBehavior,
-  neutralForegroundRestBehavior,
-  neutralForegroundHoverBehavior,
-  neutralFocusBehavior,
-  forcedColorsStylesheetBehavior(
-    css`
+    accentFillRestBehavior,
+    neutralDividerRestBehavior,
+    neutralForegroundActiveBehavior,
+    neutralForegroundFocusBehavior,
+    neutralForegroundRestBehavior,
+    neutralForegroundHoverBehavior,
+    neutralFocusBehavior,
+    forcedColorsStylesheetBehavior(
+      css`
             .button:${focusVisible}::before {
                 border-color: ${SystemColors.Highlight};
                 box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight};
@@ -139,5 +140,5 @@ export const accordionItemStyles = (context, definition) => css`
               fill: ${SystemColors.ButtonText};
             }
         `,
-  ),
-);
+    ),
+  );

packages/web-components/src/accordion/accordion.stories.ts

@@ -1,12 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/base.html';
-import { FluentAccordionItem } from './accordion-item';
-import { FluentAccordion } from '.';
-
-// Prevent tree-shaking
-FluentAccordion;
-FluentAccordionItem;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Accordion',

packages/web-components/src/accordion/accordion.styles.ts

@@ -2,14 +2,15 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior } from '../styles/';
 
-export const accordionStyles = (context, definition) => css`
-  ${display('flex')} :host {
-    box-sizing: border-box;
-    flex-direction: column;
-    font-family: var(--body-font);
-    font-size: var(--type-ramp-minus-1-font-size);
-    line-height: var(--type-ramp-minus-1-line-height);
-    color: ${neutralForegroundRestBehavior.var};
-    border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var};
-  }
-`.withBehaviors(accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior);
+export const accordionStyles = (context, definition) =>
+  css`
+    ${display('flex')} :host {
+      box-sizing: border-box;
+      flex-direction: column;
+      font-family: var(--body-font);
+      font-size: var(--type-ramp-minus-1-font-size);
+      line-height: var(--type-ramp-minus-1-line-height);
+      color: ${neutralForegroundRestBehavior.var};
+      border-top: calc(var(--outline-width) * 1px) solid ${neutralDividerRestBehavior.var};
+    }
+  `.withBehaviors(accentFillRestBehavior, neutralDividerRestBehavior, neutralForegroundRestBehavior);

packages/web-components/src/anchor/anchor.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import AnchorTemplate from './fixtures/anchor.html';
-import { FluentAnchor } from './';
-
-// Prevent tree-shaking
-FluentAnchor;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Anchor',

packages/web-components/src/anchor/anchor.styles.ts

@@ -9,12 +9,13 @@ import {
 } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 
-export const anchorStyles = (context, definition) => css`
-  ${BaseButtonStyles}
-`.withBehaviors(
-  appearanceBehavior('accent', AccentButtonStyles),
-  appearanceBehavior('hypertext', HypertextStyles),
-  appearanceBehavior('lightweight', LightweightButtonStyles),
-  appearanceBehavior('outline', OutlineButtonStyles),
-  appearanceBehavior('stealth', StealthButtonStyles),
-);
+export const anchorStyles = (context, definition) =>
+  css`
+    ${BaseButtonStyles}
+  `.withBehaviors(
+    appearanceBehavior('accent', AccentButtonStyles),
+    appearanceBehavior('hypertext', HypertextStyles),
+    appearanceBehavior('lightweight', LightweightButtonStyles),
+    appearanceBehavior('outline', OutlineButtonStyles),
+    appearanceBehavior('stealth', StealthButtonStyles),
+  );

packages/web-components/src/anchored-region/anchored-region.stories.ts

@@ -1,13 +1,9 @@
 import { STORY_RENDERED } from '@storybook/core-events';
 import addons from '@storybook/addons';
 import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities';
-import { FluentDesignSystemProvider } from '../design-system-provider';
-import { FluentAnchoredRegion } from '../anchored-region';
+import { AnchoredRegion } from '@microsoft/fast-foundation';
 import AnchoreRegionTemplate from './fixtures/base.html';
-
-// Prevent tree-shaking
-FluentAnchoredRegion;
-FluentDesignSystemProvider;
+import './index';
 
 let scalingViewportPreviousXValue: number = 250;
 let scalingViewportPreviousYValue: number = 250;
@@ -45,7 +41,7 @@ function scrollViewports(): void {
 function handleScrollViaUpdate(ev: Event): void {
   if (ev.target instanceof HTMLElement) {
     const scalingRegionUpdate: HTMLElement | null = document.getElementById('region-scaling-update');
-    if (scalingRegionUpdate instanceof FluentAnchoredRegion) {
+    if (scalingRegionUpdate instanceof AnchoredRegion) {
       (scalingRegionUpdate as any).update();
     }
   }
@@ -56,7 +52,7 @@ function handleScrollViaOffset(ev: Event): void {
     const scroller: HTMLElement = ev.target as HTMLElement;
 
     const scalingRegionOffset: HTMLElement | null = document.getElementById('region-scaling-offset');
-    if (scalingRegionOffset instanceof FluentAnchoredRegion) {
+    if (scalingRegionOffset instanceof AnchoredRegion) {
       (scalingRegionOffset as any).updateAnchorOffset(
         scalingViewportPreviousXValue - scroller.scrollLeft,
         scalingViewportPreviousYValue - scroller.scrollTop,

packages/web-components/src/badge/badge.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import BadgeTemplate from './fixtures/badge.html';
-import { FluentBadge } from './';
-
-// Prevent tree-shaking
-FluentBadge;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Badge',

packages/web-components/src/badge/badge.styles.ts

@@ -7,7 +7,7 @@ import {
   neutralForegroundRestBehavior,
 } from '../styles';
 
-export const BadgeStyles = (context, definition) =>
+export const badgeStyles = (context, definition) =>
   css`
     ${display('inline-block')} :host {
       box-sizing: border-box;

packages/web-components/src/badge/index.ts

@@ -1,6 +1,6 @@
 import { attr, DOM } from '@microsoft/fast-element';
 import { Badge as FoundationBadge, badgeTemplate as template } from '@microsoft/fast-foundation';
-import { BadgeStyles as styles } from './badge.styles';
+import { badgeStyles as styles } from './badge.styles';
 
 /**
  * Badge appearance options.

packages/web-components/src/breadcrumb-item/breadcrumb-item.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import BreadcrumbItemTemplate from './fixtures/breadcrumb-item.html';
-import { FluentBreadcrumbItem } from '.';
-
-// Prevent tree-shaking
-FluentBreadcrumbItem;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Breadcrumb Item',

packages/web-components/src/breadcrumb-item/index.ts

@@ -1,4 +1,4 @@
-import { BreadcrumbItem, BreadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
+import { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
 import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
 
 /**

packages/web-components/src/breadcrumb/breadcrumb.stories.ts

@@ -1,12 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
-import { FluentBreadcrumbItem } from '../breadcrumb-item';
 import BreadcrumbTemplate from './fixtures/breadcrumb.html';
-import { FluentBreadcrumb } from '.';
-
-// Prevent tree-shaking
-FluentBreadcrumb;
-FluentBreadcrumbItem;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Breadcrumb',

packages/web-components/src/button/button.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import ButtonTemplate from './fixtures/button.html';
-import { FluentButton } from './';
-
-// Prevent tree-shaking
-FluentButton;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Button',

packages/web-components/src/button/index.ts

@@ -1,5 +1,5 @@
 import { attr } from '@microsoft/fast-element';
-import { Button as FoundationButton, ButtonTemplate as template } from '@microsoft/fast-foundation';
+import { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation';
 import { buttonStyles as styles } from './button.styles';
 
 /**

packages/web-components/src/card/card.stories.ts

@@ -1,10 +1,5 @@
-import { FluentDesignSystemProvider } from '../design-system-provider';
 import CardTemplate from './fixtures/card.html';
-import { FluentCard } from './';
-
-// Prevent tree-shaking
-FluentCard;
-FluentDesignSystemProvider;
+import './index';
 
 export default {
   title: 'Card',

packages/web-components/src/checkbox/checkbox.stories.ts

@@ -1,35 +1,19 @@
-import { STORY_RENDERED } from '@storybook/core-events';
 import addons from '@storybook/addons';
-import { FluentDesignSystemProvider } from '../design-system-provider';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
 import Examples from './fixtures/checkbox.html';
-import { FluentCheckbox } from './';
-
-// Prevent tree-shaking
-FluentCheckbox;
-FluentDesignSystemProvider;
+import './index';
 
 addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
   if (name.toLowerCase().startsWith('checkbox')) {
-    setIndeterminate();
-  }
-});
-
-function setIndeterminate(): void {
-  document.querySelectorAll('.flag-indeterminate').forEach(el => {
-    if (el instanceof FluentCheckbox) {
+    document.querySelectorAll('.flag-indeterminate').forEach((el: FoundationCheckbox) => {
       el.indeterminate = true;
-    }
-  });
-}
-
-document.addEventListener('readystatechange', () => {
-  if (document.readyState === 'complete') {
-    setIndeterminate();
+    });
   }
 });
 
 export default {
   title: 'Checkbox',
 };
 
-export const Checkbox = (): string => Examples;
+export const Checkbox = () => Examples;

packages/web-components/src/checkbox/index.ts

@@ -1,4 +1,4 @@
-import { Checkbox, CheckboxTemplate as template } from '@microsoft/fast-foundation';
+import { Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
 import { checkboxStyles as styles } from './checkbox.styles';
 
 /**