fix: stories compound-button to divider

microsoft · Sep 18, 2024 · a01b5db · a01b5db
1 parent 603fe59
commit a01b5db
Show file tree

Hide file tree

Showing 11 changed files with 1,100 additions and 996 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
@@ -7,9 +7,9 @@ type Story = StoryObj<FluentAccordionItem>;
 
 const storyTemplate = html<StoryArgs<FluentAccordionItem>>`
   <fluent-accordion-item
-    heading-level="${story => story.headinglevel}"
-    marker-position="${story => story.markerPosition}"
-    size="${story => story.size}"
+    heading-level="${story => story.headinglevel || void 0}"
+    marker-position="${story => story.markerPosition || void 0}"
+    size="${story => story.size || void 0}"
     ?disabled="${story => story.disabled}"
     ?expanded="${story => story.expanded}"
     ?block="${story => story.block}"
@@ -93,6 +93,8 @@ export default {
   },
 } as Meta<FluentAccordionItem>;
 
+export const Default: Story = {};
+
 export const AccordionItem: Story = {
   args: {
     expanded: true,

diff --git a/packages/web-components/src/anchor-button/anchor-button.stories.ts b/packages/web-components/src/anchor-button/anchor-button.stories.ts
@@ -8,9 +8,9 @@ type Story = StoryObj<FluentAnchorButton>;
 const storyTemplate = html<StoryArgs<FluentAnchorButton>>`
   <fluent-anchor-button
     href="${story => story.href}"
-    appearance="${story => story.appearance}"
-    shape="${story => story.shape}"
-    size="${story => story.size}"
+    appearance="${story => story.appearance || void 0}"
+    shape="${story => story.shape || void 0}"
+    size="${story => story.size || void 0}"
     ?icon-only="${story => story.iconOnly}"
   >
     ${story => story.startSlottedContent?.()} ${story => story.slottedContent?.()}
@@ -141,6 +141,8 @@ export default {
   },
 } as Meta<FluentAnchorButton>;
 
+export const Default: Story = {};
+
 export const Appearance: Story = {
   render: renderComponent(html<StoryArgs<FluentAnchorButton>>`
     <fluent-anchor-button href="#">Default</fluent-anchor-button>

diff --git a/packages/web-components/src/avatar/avatar.stories.ts b/packages/web-components/src/avatar/avatar.stories.ts
@@ -7,11 +7,11 @@ type Story = StoryObj<FluentAvatar>;
 
 const storyTemplate = html<StoryArgs<FluentAvatar>>`
   <fluent-avatar
-    appearance="${story => story.appearance}"
-    active="${story => story.active}"
-    color="${story => story.color}"
-    shape="${story => story.shape}"
-    size="${story => story.size}"
+    appearance="${story => story.appearance || void 0}"
+    active="${story => story.active || void 0}"
+    color="${story => story.color || void 0}"
+    shape="${story => story.shape || void 0}"
+    size="${story => story.size || void 0}"
     initials="${story => story.initials}"
     name="${story => story.name}"
   >
@@ -94,6 +94,8 @@ export default {
   },
 } as Meta<FluentAvatar>;
 
+export const Default: Story = {};
+
 export const Image: Story = {
   render: renderComponent(html<StoryArgs<FluentAvatar>>`<fluent-avatar>
     <img

diff --git a/packages/web-components/src/badge/badge.stories.ts b/packages/web-components/src/badge/badge.stories.ts
@@ -7,10 +7,10 @@ type Story = StoryObj<FluentBadge>;
 
 const storyTemplate = html<StoryArgs<FluentBadge>>`
   <fluent-badge
-    appearance="${story => story.appearance}"
-    color="${story => story.color}"
-    shape="${story => story.shape}"
-    size="${story => story.size}"
+    appearance="${story => story.appearance || void 0}"
+    color="${story => story.color || void 0}"
+    shape="${story => story.shape || void 0}"
+    size="${story => story.size || void 0}"
   >
     ${story => story.startSlottedContent?.()} ${story => story.slottedContent?.()}
     ${story => story.endSlottedContent?.()}
@@ -84,6 +84,8 @@ export default {
   },
 } as Meta<FluentBadge>;
 
+export const Default: Story = {};
+
 export const SlottedContent: Story = {
   args: {
     slottedContent: () => 'Badge',

diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
@@ -12,16 +12,16 @@ const storyTemplate = html<StoryArgs<FluentButton>>`
     ?disabled="${story => story.disabled}"
     ?formnovalidate="${story => story.formnovalidate}"
     ?icon-only="${story => story.iconOnly}"
-    appearance="${story => story.appearance}"
+    appearance="${story => story.appearance || void 0}"
     form="${story => story.form}"
     formaction="${story => story.formaction}"
     formenctype="${story => story.formenctype}"
     formmethod="${story => story.formmethod}"
     formtarget="${story => story.formtarget}"
     name="${story => story.name}"
-    shape="${story => story.shape}"
-    size="${story => story.size}"
-    type="${story => story.type}"
+    shape="${story => story.shape || void 0}"
+    size="${story => story.size || void 0}"
+    type="${story => story.type || void 0}"
     value="${story => story.value}"
   >
     ${story => story.startSlottedContent?.()} ${story => story.slottedContent?.()}
@@ -159,6 +159,8 @@ export default {
   },
 } as Meta<FluentButton>;
 
+export const Default: Story = {};
+
 export const Appearance: Story = {
   render: renderComponent(html<StoryArgs<FluentButton>>`
     <fluent-button>Default</fluent-button>

diff --git a/packages/web-components/src/checkbox/checkbox.stories.ts b/packages/web-components/src/checkbox/checkbox.stories.ts
@@ -15,8 +15,8 @@ const storyTemplate = html<StoryArgs<FluentCheckbox>>`
     :indeterminate="${story => story.indeterminate}"
     name="${story => story.name}"
     ?required="${story => story.required}"
-    shape="${story => story.shape}"
-    size="${story => story.size}"
+    shape="${story => story.shape || void 0}"
+    size="${story => story.size || void 0}"
     slot="${story => story.slot}"
   >
     ${story => story.checkedIndicatorContent?.()} ${story => story.indeterminateIndicatorContent?.()}
@@ -118,6 +118,8 @@ export default {
   },
 } as Meta<FluentCheckbox>;
 
+export const Default: Story = {};
+
 export const Checkbox: Story = {
   render: renderComponent(storyTemplate).bind({}),
   args: {