Skip to content

Commit eb31371

Browse files
eljefe223eljefe223
authored
fix: stories menu-list to switch (#32915)
1 parent 12d545e commit eb31371

13 files changed

+1022
-1049
lines changed

‎packages/web-components/src/menu-list/menu-list.stories.ts

+190-260
Large diffs are not rendered by default.

‎packages/web-components/src/message-bar/message-bar.integration.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { MessageBar } from './message-bar.js';
44

55
test.describe('Message Bar', () => {
66
test.beforeEach(async ({ page }) => {
7-
await page.goto(fixtureURL('components-messagebar--message'));
7+
await page.goto(fixtureURL('components-messagebar--default'));
88
await page.waitForFunction(() => customElements.whenDefined('fluent-message-bar'));
99
});
1010

‎packages/web-components/src/message-bar/message-bar.stories.ts

+200-182
Large diffs are not rendered by default.

‎packages/web-components/src/progress-bar/progress-bar.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { ProgressBar } from './progress-bar.js';
44

55
test.describe('Progress Bar', () => {
66
test.beforeEach(async ({ page }) => {
7-
await page.goto(fixtureURL('components-progressbar--progress'));
7+
await page.goto(fixtureURL('components-progressbar--default'));
88

99
await page.waitForFunction(() => customElements.whenDefined('fluent-progress-bar'));
1010
});

‎packages/web-components/src/progress-bar/progress-bar.stories.ts

+91-105
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,123 @@
11
import { html } from '@microsoft/fast-element';
2-
import type { Args, Meta } from '@storybook/html';
3-
import { renderComponent } from '../helpers.stories.js';
2+
import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
43
import type { ProgressBar as FluentProgressBar } from './progress-bar.js';
54
import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
65

7-
type ProgressStoryArgs = Args & FluentProgressBar;
8-
type ProgressStoryMeta = Meta<ProgressStoryArgs>;
6+
type Story = StoryObj<FluentProgressBar>;
97

10-
const storyTemplate = html<ProgressStoryArgs>`
8+
const storyTemplate = html<StoryArgs<FluentProgressBar>>`
119
<fluent-progress-bar
12-
thickness=${x => x.thickness}
13-
shape=${x => x.shape}
14-
max=${x => x.max}
15-
min=${x => x.min}
16-
value=${x => x.value}
17-
validation-state=${x => x.validationState}
10+
thickness="${story => story.thickness}"
11+
shape="${story => story.shape}"
12+
max="${story => story.max}"
13+
min="${story => story.min}"
14+
value="${story => story.value}"
15+
validation-state="${story => story.validationState}"
1816
></fluent-progress-bar>
1917
`;
2018

2119
export default {
2220
title: 'Components/ProgressBar',
23-
args: {
24-
max: 100,
25-
value: 15,
26-
thickness: 'medium',
27-
shape: 'rounded',
28-
validationState: null,
29-
},
21+
render: renderComponent(storyTemplate),
3022
argTypes: {
3123
max: {
3224
control: 'number',
33-
defaultValue: 100,
25+
description: 'The maximum value.',
26+
table: { category: 'attributes', type: { summary: 'number' } },
3427
},
35-
value: {
28+
min: {
3629
control: 'number',
37-
defaultValue: 15,
30+
description: 'The minimum value.',
31+
table: { category: 'attributes', type: { summary: 'number' } },
3832
},
39-
thickness: {
40-
control: {
41-
type: 'select',
33+
shape: {
34+
control: 'select',
35+
description: 'The shape of the progress bar.',
36+
options: ['', ...Object.values(ProgressBarShape)],
37+
mapping: { '': null, ...ProgressBarShape },
38+
table: {
39+
category: 'attributes',
40+
type: {
41+
summary: Object.values(ProgressBarShape).join('|'),
42+
},
4243
},
43-
options: Object.values(ProgressBarThickness),
44-
defaultValue: 'medium',
4544
},
46-
shape: {
47-
options: Object.values(ProgressBarShape),
48-
control: {
49-
type: 'select',
45+
thickness: {
46+
control: 'select',
47+
description: 'The thickness of the progress bar.',
48+
options: ['', ...Object.values(ProgressBarThickness)],
49+
mapping: { '': null, ...ProgressBarThickness },
50+
table: {
51+
category: 'attributes',
52+
type: {
53+
summary: Object.values(ProgressBarThickness).join('|'),
54+
},
5055
},
51-
defaultValue: 'rounded',
5256
},
5357
validationState: {
54-
options: Object.values(ProgressBarValidationState),
55-
control: {
56-
type: 'select',
58+
control: 'select',
59+
description: 'The validation state of the progress bar.',
60+
name: 'validation-state',
61+
options: ['', ...Object.values(ProgressBarValidationState)],
62+
mapping: { '': null, ...ProgressBarValidationState },
63+
table: {
64+
category: 'attributes',
65+
type: {
66+
summary: Object.values(ProgressBarValidationState).join('|'),
67+
},
5768
},
58-
defaultValue: null,
69+
},
70+
value: {
71+
control: 'number',
72+
description: 'The value of the progress.',
73+
table: { category: 'attributes', type: { summary: 'number' } },
5974
},
6075
},
61-
} as ProgressStoryMeta;
76+
} as Meta<FluentProgressBar>;
6277

63-
export const Progress = renderComponent(storyTemplate).bind({});
78+
export const Default: Story = {};
6479

65-
//
66-
// Attribute stories
67-
//
80+
export const Value: Story = {
81+
args: {
82+
value: 15,
83+
},
84+
};
6885

69-
export const Max = renderComponent(html<ProgressStoryArgs>`
70-
<div>
71-
<p>
72-
<code>3 of 10</code>
73-
<fluent-progress-bar value="3" max="10"></fluent-progress-bar>
74-
</p>
75-
<p>
76-
<code>3 of 5</code>
77-
<fluent-progress-bar value="3" max="5"></fluent-progress-bar>
78-
</p>
79-
</div>
80-
`);
86+
export const MinMax: Story = {
87+
name: 'Min/Max',
88+
args: {
89+
max: 9,
90+
min: 3,
91+
value: 5,
92+
},
93+
};
8194

82-
export const Value = renderComponent(html<ProgressStoryArgs>`
83-
<div>
84-
<code>0</code><fluent-progress-bar value="0"></fluent-progress-bar>
85-
<code>25</code>
86-
<fluent-progress-bar value="25"></fluent-progress-bar>
87-
<code>50</code>
88-
<fluent-progress-bar value="50"></fluent-progress-bar>
89-
<code>75</code>
90-
<fluent-progress-bar value="75"></fluent-progress-bar>
91-
<code>100</code>
92-
<fluent-progress-bar value="100"></fluent-progress-bar>
93-
</div>
94-
`);
95+
export const LargeThickness: Story = {
96+
args: {
97+
thickness: 'large',
98+
},
99+
};
95100

96-
export const Thickness = renderComponent(html<ProgressStoryArgs>`
97-
<div>
98-
<p>
99-
<code>medium</code>
100-
<fluent-progress-bar thickness="medium"></fluent-progress-bar>
101-
</p>
102-
<p>
103-
<code>large</code>
104-
<fluent-progress-bar thickness="large"></fluent-progress-bar>
105-
</p>
106-
</div>
107-
`);
101+
export const SquareShape: Story = {
102+
args: {
103+
shape: 'square',
104+
},
105+
};
108106

109-
export const Shape = renderComponent(html<ProgressStoryArgs>`
110-
<div>
111-
<p>
112-
<code>rounded</code>
113-
<fluent-progress-bar shape="rounded" thickness="large"></fluent-progress-bar>
114-
</p>
115-
<p>
116-
<code>square</code>
117-
<fluent-progress-bar shape="square" thickness="large"></fluent-progress-bar>
118-
</p>
119-
</div>
120-
`);
107+
export const SuccessValidationState: Story = {
108+
args: {
109+
validationState: 'success',
110+
},
111+
};
112+
113+
export const WarningValidationState: Story = {
114+
args: {
115+
validationState: 'warning',
116+
},
117+
};
121118

122-
export const ValidationState = renderComponent(html<ProgressStoryArgs>`
123-
<div>
124-
<p>
125-
<code>success</code>
126-
<fluent-progress-bar validation-state="success"></fluent-progress-bar>
127-
</p>
128-
<p>
129-
<code>warning</code>
130-
<fluent-progress-bar validation-state="warning"></fluent-progress-bar>
131-
</p>
132-
<p>
133-
<code>error</code>
134-
<fluent-progress-bar validation-state="error"></fluent-progress-bar>
135-
</p>
136-
</div>
137-
`);
119+
export const ErrorValidationState: Story = {
120+
args: {
121+
validationState: 'error',
122+
},
123+
};

0 commit comments

Comments
 (0)