From c6d9a3311e43ce30cc4cc8c5a4854b1ad5805739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Tue, 20 Jul 2021 17:53:54 +0200 Subject: [PATCH 1/4] Add VR tests --- .../src/stories/TextConverged.stories.tsx | 129 ++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 apps/vr-tests/src/stories/TextConverged.stories.tsx diff --git a/apps/vr-tests/src/stories/TextConverged.stories.tsx b/apps/vr-tests/src/stories/TextConverged.stories.tsx new file mode 100644 index 00000000000000..2f2b6d5feee74c --- /dev/null +++ b/apps/vr-tests/src/stories/TextConverged.stories.tsx @@ -0,0 +1,129 @@ +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'; + +storiesOf('Text Converged', module) + .addDecorator(FluentProviderDecorator) + .addDecorator(story => ( + +
+ {story()} +
+ + )) + .addStory('Default', () => Hello, world) + .addStory('No wrap', () => Hello, world) + .addStory('Truncated', () => ( + + Hello, world + + )) + .addStory('Italic', () => Hello, world) + .addStory('Underline', () => Hello, world) + .addStory('Strikethrough', () => Hello, world) + .addStory('Sizes', () => ( + <> + + 100 + + + 200 + + + 300 + + + 400 + + + 500 + + + 600 + + + 700 + + + 800 + + + 900 + + + 1000 + + + )) + .addStory('Fonts', () => ( + <> + + Base + + + Monospace + + + Numeric + + + )) + .addStory('Weights', () => ( + <> + + Regular + + + Medium + + + Semibold + + + )) + .addStory('Alignments', () => ( + <> + + Start + + + Center + + + End + + + J u s t i f i e d element + + + )); + +storiesOf('Typography wrappers', module) + .addDecorator(FluentProviderDecorator) + .addDecorator(story => ( + +
{story()}
+ + )) + .addStory('Display', () => Display) + .addStory('Large Title', () => LargeTitle) + .addStory('Title 1', () => Title1) + .addStory('Title 2', () => Title2) + .addStory('Title 3', () => Title3) + .addStory('Headline', () => Headline) + .addStory('Subheadline', () => Subheadline) + .addStory('Body', () => Body) + .addStory('Caption', () => Caption); From 9f762eeccc81784ce45d48d300ecb58cbf44af85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Tue, 20 Jul 2021 18:09:30 +0200 Subject: [PATCH 2/4] Add missing dependency --- apps/vr-tests/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 4b96272ef03545..553d1d678df922 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -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", From 95f88c68218604211fc49f830000e67d868cbb5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Mon, 2 Aug 2021 18:27:10 +0200 Subject: [PATCH 3/4] Add package name to story name --- apps/vr-tests/src/stories/TextConverged.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests/src/stories/TextConverged.stories.tsx b/apps/vr-tests/src/stories/TextConverged.stories.tsx index 2f2b6d5feee74c..323570221e1d07 100644 --- a/apps/vr-tests/src/stories/TextConverged.stories.tsx +++ b/apps/vr-tests/src/stories/TextConverged.stories.tsx @@ -15,7 +15,7 @@ import { } from '@fluentui/react-text'; import { FluentProviderDecorator } from '../utilities/index'; -storiesOf('Text Converged', module) +storiesOf('react-text Text', module) .addDecorator(FluentProviderDecorator) .addDecorator(story => ( @@ -111,7 +111,7 @@ storiesOf('Text Converged', module) )); -storiesOf('Typography wrappers', module) +storiesOf('react-text Typography wrappers', module) .addDecorator(FluentProviderDecorator) .addDecorator(story => ( From 07387d07bca8eb11f8fea11c4386d10f9b6924ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Thu, 5 Aug 2021 19:03:11 +0200 Subject: [PATCH 4/4] Unify stories into singular stories --- .../src/stories/TextConverged.stories.tsx | 234 ++++++++++-------- 1 file changed, 130 insertions(+), 104 deletions(-) diff --git a/apps/vr-tests/src/stories/TextConverged.stories.tsx b/apps/vr-tests/src/stories/TextConverged.stories.tsx index 323570221e1d07..aa63f0cd62161c 100644 --- a/apps/vr-tests/src/stories/TextConverged.stories.tsx +++ b/apps/vr-tests/src/stories/TextConverged.stories.tsx @@ -15,115 +15,141 @@ import { } from '@fluentui/react-text'; import { FluentProviderDecorator } from '../utilities/index'; +const ScreenerWrapper = (story: () => React.ReactNode) => ( + +
+ {story()} +
+ +); + storiesOf('react-text Text', module) + .addDecorator(ScreenerWrapper) .addDecorator(FluentProviderDecorator) - .addDecorator(story => ( - -
- {story()} -
- - )) - .addStory('Default', () => Hello, world) - .addStory('No wrap', () => Hello, world) - .addStory('Truncated', () => ( - - Hello, world - - )) - .addStory('Italic', () => Hello, world) - .addStory('Underline', () => Hello, world) - .addStory('Strikethrough', () => Hello, world) - .addStory('Sizes', () => ( - <> - - 100 - - - 200 - - - 300 - - - 400 - - - 500 - - - 600 - - - 700 - - - 800 - - - 900 - - - 1000 - - - )) - .addStory('Fonts', () => ( - <> - - Base - - - Monospace - - - Numeric - - - )) - .addStory('Weights', () => ( + .addStory('Default', () => ( <> - - Regular - - - Medium - - - Semibold - - - )) - .addStory('Alignments', () => ( - <> - - Start - - - Center - - - End - - - J u s t i f i e d element - +

+ Default + Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. +

+

+ No wrapping + + Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. + +

+

+ Truncate + + Lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. + +

+

+ Italic + + Hello, world + +

+

+ Underline + + Hello, world + +

+

+ Strikethrough + + Hello, world + +

+

+ Sizes + + 100 + + + 200 + + + 300 + + + 400 + + + 500 + + + 600 + + + 700 + + + 800 + + + 900 + + + 1000 + +

+

+ Fonts + + Base + + + Monospace + + + Numeric + +

+

+ Weights + + Regular + + + Medium + + + Semibold + +

+

+ Alignments + + Start + + + Center + + + End + + + Justified lorem ipsum dolor sit amet, nullam rhoncus tristique tellus in Portucale. + +

)); storiesOf('react-text Typography wrappers', module) + .addDecorator(ScreenerWrapper) .addDecorator(FluentProviderDecorator) - .addDecorator(story => ( - -
{story()}
- - )) - .addStory('Display', () => Display) - .addStory('Large Title', () => LargeTitle) - .addStory('Title 1', () => Title1) - .addStory('Title 2', () => Title2) - .addStory('Title 3', () => Title3) - .addStory('Headline', () => Headline) - .addStory('Subheadline', () => Subheadline) - .addStory('Body', () => Body) - .addStory('Caption', () => Caption); + .addStory('Display', () => ( + <> + Display + LargeTitle + Title1 + Title2 + Title3 + Headline + Subheadline + Body + Caption + + ));