@fluentui/web-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/docs/api-report.md

@@ -7,6 +7,8 @@
 import { CSSDesignToken } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTAccordion } from '@microsoft/fast-foundation';
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { FASTProgress } from '@microsoft/fast-foundation';
@@ -17,6 +19,64 @@ import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
 import type { Theme } from '@fluentui/tokens';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
+// @public
+export class Accordion extends FASTAccordion {
+}
+
+// @public
+export const accordionDefinition: FASTElementDefinition<typeof Accordion>;
+
+// Warning: (ae-internal-missing-underscore) The name "AccordionItem" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export class AccordionItem extends FASTAccordionItem {
+    // @public
+    block: boolean;
+    // @public
+    expandIconPosition: AccordionItemExpandIconPosition;
+    // @public
+    size: AccordionItemSize;
+}
+
+// Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+//
+// @public
+export const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
+
+// @public
+export const AccordionItemExpandIconPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+
+// @public
+export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+
+// @public
+export const AccordionItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+
+// @public
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+
+// @public (undocumented)
+export const accordionItemStyles: ElementStyles;
+
+// Warning: (ae-incompatible-release-tags) The symbol "template" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+//
+// @public
+export const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
+
+// @public (undocumented)
+export const accordionStyles: ElementStyles;
+
+// @public (undocumented)
+export const accordionTemplate: ElementViewTemplate<Accordion>;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal
 //
 // @public
@@ -1204,14 +1264,15 @@ export const lineHeightHero800: CSSDesignToken<string>;
 export const lineHeightHero900: CSSDesignToken<string>;
 
 // @public
-export class ProgressBar extends FASTProgress {
+class ProgressBar_2 extends FASTProgress {
     shape: ProgressBarShape;
     thickness: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
+export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
 
 // @public
 export const ProgressBarShape: {
@@ -1226,7 +1287,7 @@ export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 export const ProgressBarStyles: ElementStyles;
 
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
 
 // @public
 export const ProgressBarThickness: {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.5",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -24,6 +24,14 @@
       "types": "./dist/dts/index.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./accordion": {
+      "types": "./dist/esm/accordion/define.d.ts",
+      "default": "./dist/esm/accordion/define.js"
+    },
+    "./accordion-item": {
+      "types": "./dist/esm/accordion-item/define.d.ts",
+      "default": "./dist/esm/accordion-item/define.js"
+    },
     "./badge": {
       "types": "./dist/esm/badge/define.d.ts",
       "default": "./dist/esm/badge/define.js"
@@ -48,22 +56,19 @@
   "scripts": {
     "tsc": "tsc",
     "api-extractor": "api-extractor",
-    "clean": "node ./build/clean.cjs dist",
-    "doc": "api-extractor run --local",
-    "doc:ci": "yarn doc",
-    "build": "tsc -p ./tsconfig.json && rollup -c && yarn doc",
-    "dev": "tsc -p ./tsconfig.json -w",
-    "tdd": "yarn dev & yarn test-chrome:watch",
-    "prepare": "yarn clean && yarn build",
+    "compile": "node ./scripts/compile",
+    "clean": "node ./scripts/clean dist",
+    "generate-api": "api-extractor run --local",
+    "build": "yarn compile && rollup -c && yarn generate-api",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore",
     "format:check": "yarn format -c",
     "code-style": "yarn format:check && yarn lint",
-    "start": "yarn start-storybook -p 6006 --docs",
+    "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
     "start-storybook": "node node_modules/@storybook/html/bin/index",
     "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
-    "test": "yarn doc:ci && yarn test-chrome:verbose",
+    "test": "yarn test-chrome:verbose",
     "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",

package/.eslintrc.json

@@ -1,62 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "import"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "settings": {
-    "react": {
-      "version": "latest"
-    }
-  },
-  "rules": {
-    "no-extra-boolean-cast": "off",
-    "no-prototype-builtins": "off",
-    "no-fallthrough": "off",
-    "no-unexpected-multiline": "off",
-    "import/order": "error",
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": true,
-        "ignoreDeclarationSort": true
-      }
-    ],
-    "comma-dangle": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/no-inferrable-types": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        "args": "none"
-      }
-    ],
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        "selector": "default",
-        "format": ["UPPER_CASE", "camelCase", "PascalCase"],
-        "leadingUnderscore": "allow"
-      },
-      {
-        "selector": "property",
-        "format": null // disable for property names because of our foo__expanded convention for JSS
-        // TODO: I think we can come up with a regex that ignores variables with __ in them
-      },
-      {
-        "selector": "variable",
-        "format": null // disable for variable names because of our foo__expanded convention for JSS
-        // TODO: I think we can come up with a regex that ignores variables with __ in them
-      }
-    ]
-  }
-}

package/build/clean.cjs

@@ -1,29 +0,0 @@
-/**
- * Utility for cleaning directories.
- * Usage: node build/clean.js %path%
- */
-const path = require('path');
-const rimraf = require('rimraf');
-const argv = require('yargs').argv;
-
-/**
- * All paths passed to the clean script
- */
-const paths = argv._;
-
-/**
- * Function to remove a given path
- */
-function cleanPath(cleanPath) {
-  const removePath = path.resolve(process.cwd(), cleanPath);
-  rimraf(removePath, () => {
-    console.log(removePath, 'cleaned');
-  });
-}
-
-/**
- * Clean all paths
- */
-if (Array.isArray(paths)) {
-  paths.forEach(cleanPath);
-}

package/build/transform-fragments.js

@@ -1,29 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type, @typescript-eslint/typedef */
-
-/**
- * Reduces extra spaces in HTML tagged templates.
- *
- * @param {string} data - the fragment value
- * @returns string
- */
-export function transformHTMLFragment(data) {
-  data = data.replace(/\s*([<>])\s*/g, '$1'); // remove spaces before and after angle brackets
-  return data.replace(/\s{2,}/g, ' '); // Collapse all sequences to 1 space
-}
-
-/**
- * Reduces extra spaces in CSS tagged templates.
- *
- * Breakdown of this regex:
- *   (?:\s*\/\*(?:.|\s)+?\*\/\s*)  Remove comments (non-capturing)
- *   (?:;)\s+(?=\})  Remove semicolons and spaces followed by property list end (non-capturing)
- *   \s+(?=\{)  Remove spaces before property list start (non-capturing)
- *   (?<=:)\s+  Remove spaces after property declarations (non-capturing)
- *   \s*([{};,])\s*  Remove extra spaces before and after braces, semicolons, and commas (captures)
- *
- * @param {string} data - the fragment value
- * @returns string
- */
-export function transformCSSFragment(data) {
-  return data.replace(/(?:\s*\/\*(?:.|\s)+?\*\/\s*)|(?:;)\s+(?=\})|\s+(?=\{)|(?<=:)\s+|\s*([{};,])\s*/g, '$1');
-}

package/dist/dts/badge/badge.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Args, Meta } from '@storybook/html';
-import type { Badge as FluentBadge } from './badge.js';
-import './define.js';
-declare type BadgeStoryArgs = Args & FluentBadge;
-declare type BadgeStoryMeta = Meta<BadgeStoryArgs>;
-declare const _default: BadgeStoryMeta;
-export default _default;
-export declare const Badge: any;
-export declare const Appearance: (args: Args) => Element | DocumentFragment | null;
-export declare const Color: (args: Args) => Element | DocumentFragment | null;
-export declare const Shape: (args: Args) => Element | DocumentFragment | null;
-export declare const Size: BadgeStoryMeta;

package/dist/dts/counter-badge/counter-badge.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Args, Meta } from '@storybook/html';
-import type { CounterBadge as FluentCounterBadge } from './counter-badge.js';
-import './define.js';
-declare type CounterBadgeStoryArgs = Args & FluentCounterBadge;
-declare type CounterBadgeStoryMeta = Meta<CounterBadgeStoryArgs>;
-declare const _default: CounterBadgeStoryMeta;
-export default _default;
-export declare const CounterBadge: any;
-export declare const Appearance: (args: Args) => Element | DocumentFragment | null;
-export declare const Color: (args: Args) => Element | DocumentFragment | null;
-export declare const Shape: (args: Args) => Element | DocumentFragment | null;
-export declare const Size: CounterBadgeStoryMeta;
-export declare const Dot: (args: Args) => Element | DocumentFragment | null;
-export declare const ShowZero: (args: Args) => Element | DocumentFragment | null;

package/dist/dts/progress-bar/progress-bar.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Args, Meta } from '@storybook/html';
-import type { ProgressBar as FluentProgressBar } from './progress-bar.js';
-import './define.js';
-declare type ProgressStoryArgs = Args & FluentProgressBar;
-declare type ProgressStoryMeta = Meta<ProgressStoryArgs>;
-declare const _default: ProgressStoryMeta;
-export default _default;
-export declare const Progress: any;
-export declare const ProgressIndeterminate: (args: Args) => Element | DocumentFragment | null;

package/dist/dts/spinner/spinner.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Args, Meta } from '@storybook/html';
-import './define.js';
-declare type SpinnerStoryArgs = Args;
-declare type SpinnerStoryMeta = Meta<SpinnerStoryArgs>;
-declare const _default: SpinnerStoryMeta;
-export default _default;
-export declare const Spinner: any;
-export declare const SpinnerInverted: (args: Args) => Element | DocumentFragment | null;

package/dist/dts/text/text.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Args, Meta } from '@storybook/html';
-import type { Text as FluentText } from './text.js';
-import './define.js';
-declare type TextStoryArgs = Args & FluentText;
-declare type TextStoryMeta = Meta<TextStoryArgs>;
-declare const _default: TextStoryMeta;
-export default _default;
-export declare const Text: any;

package/dist/dts/theme/theme.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Tokens: () => string;

package/dist/esm/badge/badge.stories.js

@@ -1,108 +0,0 @@
-import { html, when } from '@microsoft/fast-element';
-import { renderComponent } from '../__test__/helpers.js';
-import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
-import './define.js';
-const storyTemplate = html `
-  <fluent-badge appearance="${x => x.appearance}" color="${x => x.color}" shape="${x => x.shape}" size="${x => x.size}">
-    ${when(x => x.iconPosition === 'start', html `<svg
-        slot="start"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 20 20"
-      >
-        <path
-          fill="currentColor"
-          d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
-        />
-      </svg>`)}
-    ${x => x.content}
-    ${when(x => x.iconPosition === 'end', html `<svg
-        slot="start"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 20 20"
-      >
-        <path
-          fill="currentColor"
-          d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
-        />
-      </svg>`)}
-  </fluent-badge>
-`;
-export default {
-    title: 'Components/Badge/Badge',
-    args: {
-        content: null,
-    },
-    argTypes: {
-        appearance: {
-            options: Object.values(BadgeAppearance),
-            control: {
-                type: 'select',
-            },
-        },
-        color: {
-            options: Object.values(BadgeColor),
-            control: {
-                type: 'select',
-            },
-        },
-        shape: {
-            options: Object.values(BadgeShape),
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: Object.values(BadgeSize),
-            control: {
-                type: 'select',
-            },
-        },
-        iconPosition: {
-            options: ['none', 'start', 'end'],
-            control: {
-                type: 'select',
-            },
-        },
-        content: {
-            control: 'text',
-        },
-    },
-};
-export const Badge = renderComponent(storyTemplate).bind({});
-export const Appearance = renderComponent(html `
-  <fluent-badge appearance="filled">filled</fluent-badge>
-  <fluent-badge appearance="ghost">ghost</fluent-badge>
-  <fluent-badge appearance="outline">outline</fluent-badge>
-  <fluent-badge appearance="tint">tint</fluent-badge>
-`);
-export const Color = renderComponent(html `
-  <fluent-badge color="brand">brand</fluent-badge>
-  <fluent-badge color="danger">danger</fluent-badge>
-  <fluent-badge color="important">important</fluent-badge>
-  <fluent-badge color="informative">informative</fluent-badge>
-  <fluent-badge color="severe">severe</fluent-badge>
-  <fluent-badge color="subtle">subtle</fluent-badge>
-  <fluent-badge color="success">success</fluent-badge>
-  <fluent-badge color="warning">warning</fluent-badge>
-`);
-export const Shape = renderComponent(html `
-  <fluent-badge shape="circular"></fluent-badge>
-  <fluent-badge shape="rounded"></fluent-badge>
-  <fluent-badge shape="square"></fluent-badge>
-`);
-export const Size = renderComponent(html `
-  <fluent-badge size="tiny"></fluent-badge>
-  <fluent-badge size="extra-small"></fluent-badge>
-  <fluent-badge size="small"></fluent-badge>
-  <fluent-badge size="medium"></fluent-badge>
-  <fluent-badge size="large"></fluent-badge>
-  <fluent-badge size="extra-large"></fluent-badge>
-`);

package/dist/esm/counter-badge/counter-badge.stories.js

@@ -1,102 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { renderComponent } from '../__test__/helpers.js';
-import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, } from './counter-badge.options.js';
-import './define.js';
-// TODO: Currently cannot show icon or content
-// in the counter badge stories because it projects as slotted content
-const storyTemplate = html `
-  <fluent-counter-badge
-    appearance="${x => x.appearance}"
-    color="${x => x.color}"
-    shape="${x => x.shape}"
-    size="${x => x.size}"
-    count="${x => x.count}"
-    overflow-count="${x => x.overflowCount}"
-    ?show-zero="${x => x.showZero}"
-    ?dot="${x => x.dot}"
-  ></fluent-counter-badge>
-`;
-export default {
-    title: 'Components/Badge/Counter Badge',
-    args: {
-        dot: false,
-        showZero: false,
-        appearance: CounterBadgeAppearance.filled,
-        color: CounterBadgeColor.brand,
-        shape: CounterBadgeShape.circular,
-        count: 5,
-    },
-    argTypes: {
-        appearance: {
-            options: Object.values(CounterBadgeAppearance),
-            control: {
-                type: 'select',
-            },
-        },
-        color: {
-            options: Object.values(CounterBadgeColor),
-            control: {
-                type: 'select',
-            },
-        },
-        shape: {
-            options: Object.values(CounterBadgeShape),
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: Object.values(CounterBadgeSize),
-            control: {
-                type: 'select',
-            },
-        },
-        iconPosition: {
-            options: ['none', 'start', 'end'],
-            control: {
-                type: 'select',
-            },
-        },
-        dot: {
-            control: 'boolean',
-        },
-        showZero: {
-            control: 'boolean',
-        },
-        count: {
-            control: 'number',
-        },
-        overflowCount: {
-            control: 'text',
-        },
-    },
-};
-export const CounterBadge = renderComponent(storyTemplate).bind({});
-export const Appearance = renderComponent(html `
-  <fluent-counter-badge count="5" appearance="filled"></fluent-counter-badge>
-  <fluent-counter-badge count="5" appearance="ghost"></fluent-counter-badge>
-`);
-export const Color = renderComponent(html `
-  <fluent-counter-badge count="5" color="brand"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="danger"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="important"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="informative"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="severe"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="subtle"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="success"></fluent-counter-badge>
-  <fluent-counter-badge count="5" color="warning"></fluent-counter-badge>
-`);
-export const Shape = renderComponent(html `
-  <fluent-counter-badge count="5" shape="circular"></fluent-counter-badge>
-  <fluent-counter-badge count="5" shape="rounded"></fluent-counter-badge>
-`);
-export const Size = renderComponent(html `
-  <fluent-counter-badge size="tiny"></fluent-counter-badge>
-  <fluent-counter-badge size="extra-small"></fluent-counter-badge>
-  <fluent-counter-badge size="small"></fluent-counter-badge>
-  <fluent-counter-badge size="medium"></fluent-counter-badge>
-  <fluent-counter-badge size="large"></fluent-counter-badge>
-  <fluent-counter-badge size="extra-large"></fluent-counter-badge>
-`);
-export const Dot = renderComponent(html `<fluent-counter-badge dot></fluent-counter-badge>`);
-export const ShowZero = renderComponent(html `<fluent-counter-badge show-zero></fluent-counter-badge>`);

package/dist/esm/progress-bar/progress-bar.stories.js

@@ -1,60 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { renderComponent } from '../__test__/helpers.js';
-import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
-import './define.js';
-const storyTemplate = html `
-  <fluent-progress-bar
-    thickness=${x => x.thickness}
-    shape=${x => x.shape}
-    max=${x => x.max}
-    aria-valuemax=${x => x.max}
-    aria-valuenow=${x => x.value}
-    value=${x => x.value}
-    validation-state=${x => x.validationState}
-  ></fluent-progress-bar>
-`;
-export default {
-    title: 'Components/ProgressBar',
-    args: {
-        max: 100,
-        value: 15,
-        thickness: 'medium',
-        shape: 'rounded',
-        validationState: null,
-    },
-    argTypes: {
-        max: {
-            control: 'number',
-            defaultValue: 100,
-        },
-        value: {
-            control: 'number',
-            defaultValue: 15,
-        },
-        thickness: {
-            control: {
-                type: 'select',
-            },
-            options: Object.values(ProgressBarThickness),
-            defaultValue: 'medium',
-        },
-        shape: {
-            options: Object.values(ProgressBarShape),
-            control: {
-                type: 'select',
-            },
-            defaultValue: 'rounded',
-        },
-        validationState: {
-            options: Object.values(ProgressBarValidationState),
-            control: {
-                type: 'select',
-            },
-            defaultValue: null,
-        },
-    },
-};
-export const Progress = renderComponent(storyTemplate).bind({});
-export const ProgressIndeterminate = renderComponent(html `
-  <fluent-progress-bar title="Indeterminate Bar" aria-label="Indeterminate progress bar"></fluent-progress-bar>
-`);

package/dist/esm/spinner/spinner.stories.js

@@ -1,45 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { renderComponent } from '../__test__/helpers.js';
-import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
-import './define.js';
-const storyTemplate = html `
-  <fluent-spinner appearance=${x => x.appearance} size=${x => x.size}></fluent-spinner>
-`;
-export default {
-    title: 'Components/Spinner',
-    argTypes: {
-        appearance: {
-            description: 'The appearance of the spinner',
-            table: {
-                defaultValue: { summary: 'primary' },
-            },
-            control: {
-                type: 'select',
-                options: Object.values(SpinnerAppearance),
-            },
-            defaultValue: 'primary',
-        },
-        size: {
-            description: 'The size of the spinner',
-            table: {
-                defaultValue: { summary: 'medium' },
-            },
-            control: {
-                type: 'select',
-                options: Object.values(SpinnerSize),
-            },
-            defaultValue: 'medium',
-        },
-    },
-    parameters: {
-        status: {
-            type: 'experimental',
-        },
-    },
-};
-export const Spinner = renderComponent(storyTemplate).bind({});
-export const SpinnerInverted = renderComponent(html `
-  <div style="background-color: #0f6cbd; padding: 20px;">
-    <fluent-spinner appearance="inverted" size="medium"></fluent-spinner>
-  </div>
-`);