From 6446d2abf9b9d66562f347d74bc1b4c43daae09a Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Wed, 8 Mar 2023 08:27:29 -0800 Subject: [PATCH] Web Component v3 Stories (#27049) * Flatten badge stories in sidebar * undo badge flattening * add divider stories * progress stories * spinner stories * switch stories * text stories * remove text as story --- .../src/divider/divider.stories.ts | 54 ++++++++++- .../src/progress-bar/progress-bar.stories.ts | 74 +++++++++++++- .../src/spinner/spinner.stories.ts | 34 ++++++- .../src/switch/switch.stories.ts | 18 ++++ .../web-components/src/text/text.stories.ts | 97 +++++++++++++++++++ 5 files changed, 270 insertions(+), 7 deletions(-) diff --git a/packages/web-components/src/divider/divider.stories.ts b/packages/web-components/src/divider/divider.stories.ts index 95bb0ce140666..268729555493a 100644 --- a/packages/web-components/src/divider/divider.stories.ts +++ b/packages/web-components/src/divider/divider.stories.ts @@ -9,7 +9,7 @@ type DividerStoryArgs = Args & FluentDivider; type DividerStoryMeta = Meta; const dividerTemplate = html` -
+
x.alignContent} appearance=${x => x.appearance} @@ -23,7 +23,7 @@ const dividerTemplate = html` `; const dividerSvgTemplate = html` -
+
` + + Wrap your content in an element to render + +`); +export const AlignContent = renderComponent(html` +
+
center
 +
start
 +
end
 +
+`); +export const Appearance = renderComponent(html` +
+
strong
 +
brand
 +
subtle
 +
default
 +
+`); +export const Role = renderComponent(html` +
+
separator
 +
presentation
 +
+`); + +// TODO: there is no visual difference between inset="true" and inset="false" +export const Inset = renderComponent(html` +
+
I'm inset from the edges
 +
Default
 +
+`); +export const Orientation = renderComponent(html` +
+
vertical
 +
+
horizontal
 +
+`); + +// +// 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({}); diff --git a/packages/web-components/src/progress-bar/progress-bar.stories.ts b/packages/web-components/src/progress-bar/progress-bar.stories.ts index 5d609ff780d73..77e2347757131 100644 --- a/packages/web-components/src/progress-bar/progress-bar.stories.ts +++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts @@ -64,6 +64,76 @@ export default { export const Progress = renderComponent(storyTemplate).bind({}); -export const ProgressIndeterminate = renderComponent(html` - +// +// Attribute stories +// + +export const Max = renderComponent(html` +
+

+ 3 of 10 + +

+

+ 3 o 5 + +

+
+`); + +export const Value = renderComponent(html` +
+ 0 + 25 + + 50 + + 75 + + 100 + +
+`); + +export const Thickness = renderComponent(html` +
+

+ medium + +

+

+ large + +

+
+`); + +export const Shape = renderComponent(html` +
+

+ rounded + +

+

+ square + +

+
+`); + +export const ValidationState = renderComponent(html` +
+

+ success + +

+

+ warning + +

+

+ error + +

+
`); diff --git a/packages/web-components/src/spinner/spinner.stories.ts b/packages/web-components/src/spinner/spinner.stories.ts index e9f607798711b..0373b81f304b5 100644 --- a/packages/web-components/src/spinner/spinner.stories.ts +++ b/packages/web-components/src/spinner/spinner.stories.ts @@ -46,8 +46,36 @@ export default { export const Spinner = renderComponent(storyTemplate).bind({}); -export const SpinnerInverted = renderComponent(html` -
- +// +// Attribute stories +// + +export const Appearance = renderComponent(html` +
+
+ primary + +
+
+ inverted + +
+
+`); + +export const Size = renderComponent(html` +
+ tiny + + extra-small + + small + + medium + + large + + extra-large +
`); diff --git a/packages/web-components/src/switch/switch.stories.ts b/packages/web-components/src/switch/switch.stories.ts index 13ece9c67f1c0..57c9e2a9fee1b 100644 --- a/packages/web-components/src/switch/switch.stories.ts +++ b/packages/web-components/src/switch/switch.stories.ts @@ -86,3 +86,21 @@ export default { } as SwitchStoryMeta; export const Switch = renderComponent(storyTemplate).bind({}); + +// +// Attribute stories +// + +export const Checked = renderComponent(html`Checked`); + +export const Disabled = renderComponent(html`Disabled`); + +export const Required = renderComponent(html`Required`); + +export const LabelPosition = renderComponent(html` +
+ before + above + after +
+`); diff --git a/packages/web-components/src/text/text.stories.ts b/packages/web-components/src/text/text.stories.ts index 9149311851f61..c5f9aa31445c7 100644 --- a/packages/web-components/src/text/text.stories.ts +++ b/packages/web-components/src/text/text.stories.ts @@ -118,3 +118,100 @@ export default { } as TextStoryMeta; export const Text = renderComponent(storyTemplate).bind({}); + +// +// Attribute stories +// + +export const Nowrap = renderComponent(html` + +
+ This text will not wrap lines when it overflows the container. +
+ +`); + +export const Truncate = renderComponent(html` + +
+ Setting truncate and nowrap will truncate when it overflows the container. +
+ +`); + +export const Italic = renderComponent(html` + + Italics are emphasized text. + +`); + +export const Underline = renderComponent(html` + + Underlined text draws the reader's attention to the words. + +`); + +export const Strikethrough = renderComponent(html` + + Strikethrough text is used to indicate something that is no longer relevant. + +`); + +export const Block = renderComponent(html` + + Fluent text is inline by default. Setting + block + will make it behave as a block element. + +`); + +export const Size = renderComponent(html` +
+ 100 + 200 + 300 + 400 + 500 + 600 + 700 + 800 + 900 + 1000 +
+`); + +export const Weight = renderComponent(html` +
+ This text is regular. + This text is medium. + This text is semibold. + This text is bold. +
+`); + +export const Align = renderComponent(html` +
+ + Start aligned block. + + + End aligned block. + + + Center aligned block. + + + Justify aligned block text stretches wrapped lines to meet container edges. + +
+`); + +export const Font = renderComponent(html` +
+ Font base. + Font numeric 0123456789. + Font monospace. +
+`);