Skip to content

Text - Add VR tests #19022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 5, 2021
Merged

Text - Add VR tests #19022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6d9a33
Add VR tests
Jul 20, 2021
9f762ee
Add missing dependency
Jul 20, 2021
95f88c6
Add package name to story name
Aug 2, 2021
07387d0
Unify stories into singular stories
Aug 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/vr-tests/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"@fluentui/react-make-styles": "^9.0.0-alpha.54",
"@fluentui/react-provider": "^9.0.0-alpha.61",
"@fluentui/react-tabs": "^1.0.0-beta.138",
"@fluentui/react-text": "^9.0.0-alpha.0",
"@fluentui/react-theme": "^9.0.0-alpha.20",
"@fluentui/scripts": "^1.0.0",
"@fluentui/storybook": "^1.0.0",
Expand Down
155 changes: 155 additions & 0 deletions apps/vr-tests/src/stories/TextConverged.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Screener from 'screener-storybook/src/screener';
import {
Body,
Caption,
Display,
Headline,
LargeTitle,
Subheadline,
Text,
Title1,
Title2,
Title3,
} from '@fluentui/react-text';
import { FluentProviderDecorator } from '../utilities/index';

const ScreenerWrapper = (story: () => React.ReactNode) => (
<Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
<div className="testWrapper" style={{ width: '250px' }}>
{story()}
</div>
</Screener>
);

storiesOf('react-text Text', module)
.addDecorator(ScreenerWrapper)
.addDecorator(FluentProviderDecorator)
.addStory('Default', () => (
<>
<p>
<Title3 block>Default</Title3>
<Text>Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.</Text>
</p>
<p>
<Title3 block>No wrapping</Title3>
<Text block wrap={false}>
Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
</Text>
</p>
<p>
<Title3 block>Truncate</Title3>
<Text block wrap={false} truncate>
Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
</Text>
</p>
<p>
<Title3 block>Italic</Title3>
<Text block italic>
Hello, world
</Text>
</p>
<p>
<Title3 block>Underline</Title3>
<Text block underline>
Hello, world
</Text>
</p>
<p>
<Title3 block>Strikethrough</Title3>
<Text block strikethrough>
Hello, world
</Text>
</p>
<p>
<Title3 block>Sizes</Title3>
<Text block size={100}>
100
</Text>
<Text block size={200}>
200
</Text>
<Text block size={300}>
300
</Text>
<Text block size={400}>
400
</Text>
<Text block size={500}>
500
</Text>
<Text block size={600}>
600
</Text>
<Text block size={700}>
700
</Text>
<Text block size={800}>
800
</Text>
<Text block size={900}>
900
</Text>
<Text block size={1000}>
1000
</Text>
</p>
<p>
<Title3 block>Fonts</Title3>
<Text block font="base">
Base
</Text>
<Text block font="monospace">
Monospace
</Text>
<Text block font="numeric">
Numeric
</Text>
</p>
<p>
<Title3 block>Weights</Title3>
<Text block weight="regular">
Regular
</Text>
<Text block weight="medium">
Medium
</Text>
<Text block weight="semibold">
Semibold
</Text>
</p>
<p>
<Title3 block>Alignments</Title3>
<Text block align="start">
Start
</Text>
<Text block align="center">
Center
</Text>
<Text block align="end">
End
</Text>
<Text block align="justify">
Justified lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale.
</Text>
</p>
</>
));

storiesOf('react-text Typography wrappers', module)
.addDecorator(ScreenerWrapper)
.addDecorator(FluentProviderDecorator)
.addStory('Display', () => (
<>
<Display block>Display</Display>
<LargeTitle block>LargeTitle</LargeTitle>
<Title1 block>Title1</Title1>
<Title2 block>Title2</Title2>
<Title3 block>Title3</Title3>
<Headline block>Headline</Headline>
<Subheadline block>Subheadline</Subheadline>
<Body block>Body</Body>
<Caption block>Caption</Caption>
</>
));