Skip to content

Commit

Permalink
Web Component v3 Stories (#27049)
Browse files Browse the repository at this point in the history 
* Flatten badge stories in sidebar

* undo badge flattening

* add divider stories

* progress stories

* spinner stories

* switch stories

* text stories

* remove text as story
  • Loading branch information
@levithomason @radium-v
levithomason authored and radium-v committed May 8, 2024
1 parent d771a5d commit 6446d2a
Show file tree
Hide file tree
Showing 5 changed files with 270 additions and 7 deletions.
54 changes: 52 additions & 2 deletions packages/web-components/src/divider/divider.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type DividerStoryArgs = Args & FluentDivider;
type DividerStoryMeta = Meta<DividerStoryArgs>;

const dividerTemplate = html<DividerStoryArgs>`
<div style="border: 30px solid #ccc; height: 9em; display: flex; flex-direction: column; justify-content: center;">
<div>
<fluent-divider
align-content=${x => x.alignContent}
appearance=${x => x.appearance}
Expand All @@ -23,7 +23,7 @@ const dividerTemplate = html<DividerStoryArgs>`
`;

const dividerSvgTemplate = html<DividerStoryArgs>`
<div style="border: 30px solid #ccc; height: 9em; display: flex; flex-direction: column; justify-content: center;">
<div>
<fluent-divider align-content="start" appearance="brand" role="presentation">
<svg width="20px" height="20px" viewBox="0 0 32 33" xmlns="http://www.w3.org/2000/svg">
<path
Expand Down Expand Up @@ -143,5 +143,55 @@ export default {
} as DividerStoryMeta;

export const Divider = renderComponent(dividerTemplate).bind({});

//
// Attribute Stories
//

export const Content = renderComponent(html<DividerStoryArgs>`
<fluent-divider align-content="center">
<em>Wrap your content in an element to render</em>
</fluent-divider>
`);
export const AlignContent = renderComponent(html<DividerStoryArgs>`
<div>
<fluent-divider align-content="center"><div>center</div></fluent-divider>
<fluent-divider align-content="start"><div>start</div></fluent-divider>
<fluent-divider align-content="end"><div>end</div></fluent-divider>
</div>
`);
export const Appearance = renderComponent(html<DividerStoryArgs>`
<div>
<fluent-divider appearance="strong"><div>strong</div></fluent-divider>
<fluent-divider appearance="brand"><div>brand</div></fluent-divider>
<fluent-divider appearance="subtle"><div>subtle</div></fluent-divider>
<fluent-divider appearance="default"><div>default</div></fluent-divider>
</div>
`);
export const Role = renderComponent(html<DividerStoryArgs>`
<div>
<fluent-divider role="separator"><div>separator</div></fluent-divider>
<fluent-divider role="presentation"><div>presentation</div></fluent-divider>
</div>
`);

// TODO: there is no visual difference between inset="true" and inset="false"
export const Inset = renderComponent(html<DividerStoryArgs>`
<div>
<fluent-divider inset><div>I'm inset from the edges</div></fluent-divider>
<fluent-divider><div>Default</div></fluent-divider>
</div>
`);
export const Orientation = renderComponent(html<DividerStoryArgs>`
<div>
<fluent-divider orientation="vertical"><div>vertical</div></fluent-divider>
<br />
<fluent-divider orientation="horizontal"><div>horizontal</div></fluent-divider>
</div>
`);

//
// Extra stories - These stories are in addition to the story for each attribute.
//
export const DividerWithSvg = renderComponent(dividerSvgTemplate).bind({});
export const VerticalDividerWithSvg = renderComponent(dividerSvgVerticalTemplate).bind({});
74 changes: 72 additions & 2 deletions packages/web-components/src/progress-bar/progress-bar.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,76 @@ export default {

export const Progress = renderComponent(storyTemplate).bind({});

export const ProgressIndeterminate = renderComponent(html<ProgressStoryArgs>`
<fluent-progress-bar title="Indeterminate Bar" aria-label="Indeterminate progress bar"></fluent-progress-bar>
//
// Attribute stories
//

export const Max = renderComponent(html<ProgressStoryArgs>`
<div>
<p>
<code>3 of 10</code>
<fluent-progress-bar value="3" aria-valuenow="3" max="10" aria-valuemax="10"></fluent-progress-bar>
</p>
<p>
<code>3 o 5</code>
<fluent-progress-bar value="3" aria-valuenow="3" max="5" aria-valuemax="5"></fluent-progress-bar>
</p>
</div>
`);

export const Value = renderComponent(html<ProgressStoryArgs>`
<div>
<code>0</code><fluent-progress-bar value="0" aria-valuenow="0"></fluent-progress-bar>
<code>25</code>
<fluent-progress-bar value="25" aria-valuenow="25"></fluent-progress-bar>
<code>50</code>
<fluent-progress-bar value="50" aria-valuenow="50"></fluent-progress-bar>
<code>75</code>
<fluent-progress-bar value="75" aria-valuenow="75"></fluent-progress-bar>
<code>100</code>
<fluent-progress-bar value="100" aria-valuenow="100"></fluent-progress-bar>
</div>
`);

export const Thickness = renderComponent(html<ProgressStoryArgs>`
<div>
<p>
<code>medium</code>
<fluent-progress-bar thickness="medium"></fluent-progress-bar>
</p>
<p>
<code>large</code>
<fluent-progress-bar thickness="large"></fluent-progress-bar>
</p>
</div>
`);

export const Shape = renderComponent(html<ProgressStoryArgs>`
<div>
<p>
<code>rounded</code>
<fluent-progress-bar shape="rounded" thickness="large"></fluent-progress-bar>
</p>
<p>
<code>square</code>
<fluent-progress-bar shape="square" thickness="large"></fluent-progress-bar>
</p>
</div>
`);

export const ValidationState = renderComponent(html<ProgressStoryArgs>`
<div>
<p>
<code>success</code>
<fluent-progress-bar validation-state="success"></fluent-progress-bar>
</p>
<p>
<code>warning</code>
<fluent-progress-bar validation-state="warning"></fluent-progress-bar>
</p>
<p>
<code>error</code>
<fluent-progress-bar validation-state="error"></fluent-progress-bar>
</p>
</div>
`);
34 changes: 31 additions & 3 deletions packages/web-components/src/spinner/spinner.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,36 @@ export default {

export const Spinner = renderComponent(storyTemplate).bind({});

export const SpinnerInverted = renderComponent(html<SpinnerStoryArgs>`
<div style="background-color: #0f6cbd; padding: 20px;">
<fluent-spinner appearance="inverted" size="medium"></fluent-spinner>
//
// Attribute stories
//

export const Appearance = renderComponent(html<SpinnerStoryArgs>`
<div>
<div style="padding: 20px;">
<code>primary</code>
<fluent-spinner appearance="primary"></fluent-spinner>
</div>
<div style="padding: 20px; background-color: #0f6cbd; color: #fff;">
<code>inverted</code>
<fluent-spinner appearance="inverted" size="medium"></fluent-spinner>
</div>
</div>
`);

export const Size = renderComponent(html<SpinnerStoryArgs>`
<div style="display: grid; align-items: center; gap: 0 20px; grid-template-columns: 90px min-content;">
<code>tiny</code>
<fluent-spinner size="tiny"></fluent-spinner>
<code>extra-small</code>
<fluent-spinner size="extra-small"></fluent-spinner>
<code>small</code>
<fluent-spinner size="small"></fluent-spinner>
<code>medium</code>
<fluent-spinner size="medium"></fluent-spinner>
<code>large</code>
<fluent-spinner size="large"></fluent-spinner>
<code>extra-large</code>
<fluent-spinner size="extra-large"></fluent-spinner>
</div>
`);
18 changes: 18 additions & 0 deletions packages/web-components/src/switch/switch.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,3 +86,21 @@ export default {
} as SwitchStoryMeta;

export const Switch = renderComponent(storyTemplate).bind({});

//
// Attribute stories
//

export const Checked = renderComponent(html<SwitchStoryArgs>`<fluent-switch checked>Checked</fluent-switch>`);

export const Disabled = renderComponent(html<SwitchStoryArgs>`<fluent-switch disabled>Disabled</fluent-switch>`);

export const Required = renderComponent(html<SwitchStoryArgs>`<fluent-switch required>Required</fluent-switch>`);

export const LabelPosition = renderComponent(html<SwitchStoryArgs>`
<div style="display: flex; align-items: end;">
<fluent-switch label-position="before">before</fluent-switch>
<fluent-switch label-position="above">above</fluent-switch>
<fluent-switch label-position="after">after</fluent-switch>
</div>
`);
97 changes: 97 additions & 0 deletions packages/web-components/src/text/text.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,100 @@ export default {
} as TextStoryMeta;

export const Text = renderComponent(storyTemplate).bind({});

//
// Attribute stories
//

export const Nowrap = renderComponent(html<TextStoryArgs>`
<fluent-text nowrap>
<div style="display: block; width: 320px; border: 1px solid black;">
This text will not wrap lines when it overflows the container.
</div>
</fluent-text>
`);

export const Truncate = renderComponent(html<TextStoryArgs>`
<fluent-text truncate nowrap>
<div style="display: block; width: 320px; border: 1px solid black;">
Setting <code>truncate</code> and <code>nowrap</code> will truncate when it overflows the container.
</div>
</fluent-text>
`);

export const Italic = renderComponent(html<TextStoryArgs>`
<fluent-text italic>
<span>Italics are emphasized text.</span>
</fluent-text>
`);

export const Underline = renderComponent(html<TextStoryArgs>`
<fluent-text underline>
<span>Underlined text draws the reader's attention to the words.</span>
</fluent-text>
`);

export const Strikethrough = renderComponent(html<TextStoryArgs>`
<fluent-text strikethrough>
<span>Strikethrough text is used to indicate something that is no longer relevant.</span>
</fluent-text>
`);

export const Block = renderComponent(html<TextStoryArgs>`
<span>
<fluent-text style="background: #ddd"><span>Fluent text is inline by default. Setting</span></fluent-text>
<fluent-text style="background: #ddd" block><span>block</span></fluent-text>
<fluent-text style="background: #ddd"><span>will make it behave as a block element.</span></fluent-text>
</span>
`);

export const Size = renderComponent(html<TextStoryArgs>`
<div>
<fluent-text block size="100"><span>100</span></fluent-text>
<fluent-text block size="200"><span>200</span></fluent-text>
<fluent-text block size="300"><span>300</span></fluent-text>
<fluent-text block size="400"><span>400</span></fluent-text>
<fluent-text block size="500"><span>500</span></fluent-text>
<fluent-text block size="600"><span>600</span></fluent-text>
<fluent-text block size="700"><span>700</span></fluent-text>
<fluent-text block size="800"><span>800</span></fluent-text>
<fluent-text block size="900"><span>900</span></fluent-text>
<fluent-text block size="1000"><span>1000</span></fluent-text>
</div>
`);

export const Weight = renderComponent(html<TextStoryArgs>`
<div>
<fluent-text block weight="regular"><span>This text is regular.</span></fluent-text>
<fluent-text block weight="medium"><span>This text is medium.</span></fluent-text>
<fluent-text block weight="semibold"><span>This text is semibold.</span></fluent-text>
<fluent-text block weight="bold"><span>This text is bold.</span></fluent-text>
</div>
`);

export const Align = renderComponent(html<TextStoryArgs>`
<div
style="display: flex; flex-direction: column; gap: 20px; width: 320px; border-left: 1px solid #000; border-right: 1px solid #000;"
>
<fluent-text block align="start">
<span>Start aligned block.</span>
</fluent-text>
<fluent-text block align="end">
<span>End aligned block.</span>
</fluent-text>
<fluent-text block align="center">
<span>Center aligned block.</span>
</fluent-text>
<fluent-text block align="justify">
<span>Justify aligned block text stretches wrapped lines to meet container edges.</span>
</fluent-text>
</div>
`);

export const Font = renderComponent(html<TextStoryArgs>`
<div>
<fluent-text block font="base"><span>Font base.</span></fluent-text>
<fluent-text block font="numeric"><span>Font numeric 0123456789.</span></fluent-text>
<fluent-text block font="monospace"><span>Font monospace.</span></fluent-text>
</div>
`);

0 comments on commit 6446d2a

Please sign in to comment.