fix: stories tabs to toggle button (#32938)

microsoft · Sep 28, 2024 · 257fefa · 257fefa
1 parent f3887ef
commit 257fefa
Show file tree

Hide file tree

Showing 35 changed files with 1,042 additions and 888 deletions.
diff --git a/packages/web-components/src/accordion-item/accordion-item.stories.ts b/packages/web-components/src/accordion-item/accordion-item.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { AccordionItem as FluentAccordionItem } from './accordion-item.js';
 import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 

diff --git a/packages/web-components/src/anchor-button/anchor-button.stories.ts b/packages/web-components/src/anchor-button/anchor-button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { AnchorButton as FluentAnchorButton } from './anchor-button.js';
 import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
 

diff --git a/packages/web-components/src/avatar/avatar.stories.ts b/packages/web-components/src/avatar/avatar.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Avatar as FluentAvatar } from './avatar.js';
 import { AvatarActive, AvatarAppearance, AvatarColor, AvatarShape, AvatarSize } from './avatar.options.js';
 

diff --git a/packages/web-components/src/badge/badge.stories.ts b/packages/web-components/src/badge/badge.stories.ts
@@ -1,5 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Badge as FluentBadge } from './badge.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 

diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Button as FluentButton } from './button.js';
 import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 

diff --git a/packages/web-components/src/checkbox/checkbox.stories.ts b/packages/web-components/src/checkbox/checkbox.stories.ts
@@ -1,7 +1,7 @@
 import { html, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
 import { LabelPosition, ValidationFlags } from '../field/field.options.js';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { Checkbox as FluentCheckbox } from './checkbox.js';
 import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 

diff --git a/packages/web-components/src/compound-button/compound-button.stories.ts b/packages/web-components/src/compound-button/compound-button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { CompoundButton as FluentCompoundButton } from './compound-button.js';
 import { CompoundButtonAppearance, CompoundButtonShape, CompoundButtonSize } from './compound-button.options.js';
 

diff --git a/packages/web-components/src/counter-badge/counter-badge.stories.ts b/packages/web-components/src/counter-badge/counter-badge.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { CounterBadge as FluentCounterBadge } from './counter-badge.js';
 import {
   CounterBadgeAppearance,

diff --git a/packages/web-components/src/dialog-body/dialog-body.stories.ts b/packages/web-components/src/dialog-body/dialog-body.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { DialogBody as FluentDialogBody } from './dialog-body.js';
 
 type Story = StoryObj<FluentDialogBody>;

diff --git a/packages/web-components/src/dialog/dialog.stories.ts b/packages/web-components/src/dialog/dialog.stories.ts
@@ -1,12 +1,6 @@
 import { css, html, ref } from '@microsoft/fast-element';
 import type { DialogBody as FluentDialogBody } from '../dialog-body/dialog-body.js';
-import {
-  generateImage,
-  type NewMeta as Meta,
-  renderComponent,
-  type StoryArgs,
-  type StoryObj,
-} from '../helpers.stories.js';
+import { generateImage, Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { definition } from './dialog.definition.js';
 import type { Dialog as FluentDialog } from './dialog.js';
 import { DialogType } from './dialog.options.js';

diff --git a/packages/web-components/src/divider/divider.stories.ts b/packages/web-components/src/divider/divider.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Divider as FluentDivider } from './divider.js';
 import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
 

diff --git a/packages/web-components/src/drawer/drawer.stories.ts b/packages/web-components/src/drawer/drawer.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Drawer as FluentDrawer } from './drawer.js';
 import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
 

diff --git a/packages/web-components/src/field/field.stories.ts b/packages/web-components/src/field/field.stories.ts
@@ -1,6 +1,6 @@
 import { html, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { colorStatusDangerForeground1, colorStatusSuccessBackground3 } from '../theme/design-tokens.js';
 import type { TextInput as FluentTextInput } from '../text-input/text-input.js';
 import type { Field as FluentField } from './field.js';

diff --git a/packages/web-components/src/helpers.stories.ts b/packages/web-components/src/helpers.stories.ts
@@ -24,11 +24,6 @@ export declare interface FASTComponentsRenderer extends Renderer {
   storyResult: string | Node | DocumentFragment | ElementViewTemplate;
 }
 
-/**
- * Metadata to configure the stories for a component.
- */
-export declare type NewMeta<TArgs = Args> = ComponentAnnotations<FASTComponentsRenderer, StoryArgs<TArgs>>;
-
 /**
  * A helper that returns a function to bind a Storybook story to a ViewTemplate.
  */
@@ -40,7 +35,7 @@ export type FASTFramework = Renderer & {
 /**
  * Metadata to configure the stories for a component.
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<FASTFramework, Omit<TArgs, keyof FASTElement>>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<FASTComponentsRenderer, StoryArgs<TArgs>>;
 
 /**
  * Story object that represents a CSFv3 component example.

diff --git a/packages/web-components/src/image/image.stories.ts b/packages/web-components/src/image/image.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Image as FluentImage } from './image.js';
 import { ImageFit, ImageShape } from './image.options.js';
 

diff --git a/packages/web-components/src/label/label.stories.ts b/packages/web-components/src/label/label.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Label as FluentLabel } from './label.js';
 import { LabelSize, LabelWeight } from './label.options.js';
 

diff --git a/packages/web-components/src/link/link.stories.ts b/packages/web-components/src/link/link.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { AnchorTarget } from '../anchor-button/anchor-button.options.js';
 import type { Link as FluentLink } from './link.js';
 import { LinkAppearance } from './link.options.js';

diff --git a/packages/web-components/src/menu-button/menu-button.stories.ts b/packages/web-components/src/menu-button/menu-button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { MenuButton as FluentMenuButton } from './menu-button.js';
 import { MenuButtonAppearance, MenuButtonShape, MenuButtonSize } from './menu-button.options.js';
 

diff --git a/packages/web-components/src/menu-list/menu-list.stories.ts b/packages/web-components/src/menu-list/menu-list.stories.ts
@@ -1,5 +1,5 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { type MenuItem as FluentMenuItem, MenuItemRole } from '../menu-item/menu-item.js';
 import type { MenuList as FluentMenuList } from './menu-list.js';
 

diff --git a/packages/web-components/src/menu/menu.stories.ts b/packages/web-components/src/menu/menu.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Menu as FluentMenu } from './menu.js';
 
 type Story = StoryObj<FluentMenu>;

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -1,5 +1,5 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { MessageBar as FluentMessageBar } from './message-bar.js';
 import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 import './define';

diff --git a/packages/web-components/src/progress-bar/progress-bar.stories.ts b/packages/web-components/src/progress-bar/progress-bar.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { ProgressBar as FluentProgressBar } from './progress-bar.js';
 import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 

diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -1,6 +1,6 @@
 import { html, ref, repeat } from '@microsoft/fast-element';
 import type { Field as FluentField } from '../field/field.js';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { ValidationFlags } from '../field/field.options.js';
 import type { RadioGroup as FluentRadioGroup } from './radio-group.js';
 import { RadioGroupOrientation } from './radio-group.options.js';

diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Radio as FluentRadio } from './radio.js';
 
 type Story = StoryObj<FluentRadio>;

diff --git a/packages/web-components/src/rating-display/rating-display.stories.ts b/packages/web-components/src/rating-display/rating-display.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { RatingDisplay as FluentRatingDisplay } from './rating-display.js';
 import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
 

diff --git a/packages/web-components/src/slider/slider.stories.ts b/packages/web-components/src/slider/slider.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { SliderOrientation as SliderSetOrientation, SliderSize as SliderSetSize } from './slider.options.js';
 import type { Slider as FluentSlider } from './slider.js';
 

diff --git a/packages/web-components/src/spinner/spinner.stories.ts b/packages/web-components/src/spinner/spinner.stories.ts
@@ -1,5 +1,5 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 import { Spinner as FluentSpinner } from './spinner.js';
 

diff --git a/packages/web-components/src/switch/switch.stories.ts b/packages/web-components/src/switch/switch.stories.ts
@@ -1,6 +1,6 @@
 import { html, repeat } from '@microsoft/fast-element';
 import { LabelPosition, ValidationFlags } from '../field/field.options.js';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Switch as FluentSwitch } from './switch.js';
 
 type Story = StoryObj<FluentSwitch>;