diff --git a/apps/vr-tests-web-components/src/stories/text/text.stories.tsx b/apps/vr-tests-web-components/src/stories/text/text.stories.tsx new file mode 100644 index 00000000000000..a019e1dab8c346 --- /dev/null +++ b/apps/vr-tests-web-components/src/stories/text/text.stories.tsx @@ -0,0 +1,133 @@ +import * as React from 'react'; +import { default as parse } from 'html-react-parser'; +import { Steps, StoryWright } from 'storywright'; +import { TextDefinition, FluentDesignSystem, colorNeutralBackground6 } from '@fluentui/web-components'; + +TextDefinition.define(FluentDesignSystem.registry); + +export default { + title: 'Text', + decorators: [ + (story: () => React.ReactElement) => { + return ( + +
+ {story()} +
+
+ ); + }, + ], +}; + +export const Default = () => + parse(` + Default + `); + +export const Nowrap = () => + parse(` + +
+ This text will not wrap lines when it overflows the container. +
+
+`); + +export const Truncate = () => + parse(` + +
+ Setting truncate and nowrap will truncate when it overflows the container. +
+
+`); + +export const Italic = () => + parse(` + + Italics are emphasized text. + +`); + +export const Underline = () => + parse(` + + Underlined text draws the reader's attention to the words. + +`); + +export const Strikethrough = () => + parse(` + + Strikethrough text is used to indicate something that is no longer relevant. + +`); + +export const Block = () => + parse(` + + Fluent text is inline by default. Setting + block + will make it behave as a block element. + +`); + +export const Size = () => + parse(` +
+ 100 + 200 + 300 + 400 + 500 + 600 + 700 + 800 + 900 + 1000 +
+`); + +export const Weight = () => + parse(` +
+ This text is regular. + This text is medium. + This text is semibold. + This text is bold. +
+`); + +export const Align = () => + parse(` +
+ + Start aligned block. + + + End aligned block. + + + Center aligned block. + + + Justify aligned block text stretches wrapped lines to meet container edges. + +
+`); + +export const Font = () => + parse(` +
+ Font base. + Font numeric 0123456789. + Font monospace. +
+`);