From 15c7f7edbe759cdd393852ac2e52e254f8846cf0 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 2 Nov 2022 14:14:32 -0700 Subject: [PATCH] chore: convert Dialog and Image to CSF --- .../src/stories/Dialog.stories.tsx | 411 ---------------- .../src/stories/Dialog/Dialog.stories.tsx | 444 ++++++++++++++++++ .../src/stories/Image.stories.tsx | 102 ---- .../src/stories/Image/Image.stories.tsx | 114 +++++ 4 files changed, 558 insertions(+), 513 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/stories/Dialog.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Image.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx diff --git a/apps/vr-tests-react-components/src/stories/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog.stories.tsx deleted file mode 100644 index 98ccf2836eb637..00000000000000 --- a/apps/vr-tests-react-components/src/stories/Dialog.stories.tsx +++ /dev/null @@ -1,411 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import { - Dialog, - DialogActions, - DialogBody, - DialogContent, - DialogSurface, - DialogTitle, - DialogTrigger, -} from '@fluentui/react-dialog'; -import { Button } from '@fluentui/react-button'; -import { Rocket24Regular } from '@fluentui/react-icons'; - -storiesOf('Dialog', module) - .addStory( - 'default', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'non-modal', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'alert', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'actions position start', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'actions position start & position end', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'no actions', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'no title', - () => ( - - - - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'no title & no actions', - () => ( - - - - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'title custom action', - () => ( - - - - - - - } />}> - Dialog title - - - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, explicabo repudiandae impedit doloribus - laborum quidem maxime dolores perspiciatis non ipsam, nostrum commodi quis autem sequi, incidunt cum? - Consequuntur, repellendus nostrum? - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'nested', - () => ( - - - - - - - Dialog title - - - - - - - - Inner dialog title - - ⛔️ just because you can doesn't mean you should have nested dialogs ⛔️ - - - - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'scroll long content', - () => ( - - - - - - - Dialog title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est - lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit - gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet - bibendum. Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. - Nunc id cursus metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin - nibh nisl condimentum id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac - auctor augue mauris augue neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur - ridiculus mus mauris vitae ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo - in vitae turpis massa sed elementum tempus egestas sed. -

-

- Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. - Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam - adipiscing vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet - mattis vulputate enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus - cras adipiscing enim eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque - gravida in fermentum et sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis - nunc. Ultrices eros in cursus turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra - justo. Odio pellentesque diam volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec - ullamcorper. Ipsum nunc aliquet bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien - nec sagittis aliquam malesuada bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis - imperdiet. -

-

- Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. - Eget aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra - massa massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero - volutpat sed. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut - aliquam. Volutpat diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a - erat. Venenatis lectus magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel - elit. Neque laoreet suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. - Bibendum ut tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec - ultrices dui. Elit duis tristique sollicitudin nibh sit amet. -

-

- At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. - Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. - Turpis egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu - tincidunt tortor aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus - venenatis lectus magna fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas - maecenas pharetra convallis posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus - sit amet est placerat. -

-

- Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna - condimentum mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat - in ante metus dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales - neque sodales ut etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis - molestie a iaculis at erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit - amet commodo nulla. Fringilla urna porttitor rhoncus dolor purus. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est - lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit - gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet - bibendum. Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. - Nunc id cursus metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin - nibh nisl condimentum id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac - auctor augue mauris augue neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur - ridiculus mus mauris vitae ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo - in vitae turpis massa sed elementum tempus egestas sed. -

-

- Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. - Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam - adipiscing vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet - mattis vulputate enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus - cras adipiscing enim eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque - gravida in fermentum et sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis - nunc. Ultrices eros in cursus turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra - justo. Odio pellentesque diam volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec - ullamcorper. Ipsum nunc aliquet bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien - nec sagittis aliquam malesuada bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis - imperdiet. -

-

- Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. - Eget aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra - massa massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero - volutpat sed. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut - aliquam. Volutpat diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a - erat. Venenatis lectus magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel - elit. Neque laoreet suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. - Bibendum ut tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec - ultrices dui. Elit duis tristique sollicitudin nibh sit amet. -

-

- At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. - Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. - Turpis egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu - tincidunt tortor aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus - venenatis lectus magna fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas - maecenas pharetra convallis posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus - sit amet est placerat. -

-

- Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna - condimentum mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat - in ante metus dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales - neque sodales ut etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis - molestie a iaculis at erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit - amet commodo nulla. Fringilla urna porttitor rhoncus dolor purus. -

- - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ); diff --git a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx new file mode 100644 index 00000000000000..5061f52be2d9c5 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { + Dialog, + DialogActions, + DialogBody, + DialogContent, + DialogSurface, + DialogTitle, + DialogTrigger, +} from '@fluentui/react-dialog'; +import { Button } from '@fluentui/react-button'; +import { Rocket24Regular } from '@fluentui/react-icons'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; + +export default { + title: 'Dialog', +} as ComponentMeta; + +export const Default = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +Default.storyName = 'default'; + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const NonModal = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +NonModal.storyName = 'non-modal'; + +export const NonModalDarkMode = getStoryVariant(NonModal, DARK_MODE); +export const NonModalHighContrast = getStoryVariant(NonModal, HIGH_CONTRAST); +export const NonModalRTL = getStoryVariant(NonModal, RTL); + +export const Alert = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +Alert.storyName = 'alert'; + +export const AlertDarkMode = getStoryVariant(Alert, DARK_MODE); +export const AlertHighContrast = getStoryVariant(Alert, HIGH_CONTRAST); +export const AlertRTL = getStoryVariant(Alert, RTL); + +export const ActionsPositionStart = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +ActionsPositionStart.storyName = 'actions position start'; + +export const ActionsPositionStartDarkMode = getStoryVariant(ActionsPositionStart, DARK_MODE); +export const ActionsPositionStartHighContrast = getStoryVariant(ActionsPositionStart, HIGH_CONTRAST); +export const ActionsPositionStartRTL = getStoryVariant(ActionsPositionStart, RTL); + +export const ActionsPositionStartPositionEnd = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + + + + + + +); + +ActionsPositionStartPositionEnd.storyName = 'actions position start & position end'; + +export const ActionsPositionStartPositionEndDarkMode = getStoryVariant(ActionsPositionStartPositionEnd, DARK_MODE); +export const ActionsPositionStartPositionEndHighContrast = getStoryVariant( + ActionsPositionStartPositionEnd, + HIGH_CONTRAST, +); +export const ActionsPositionStartPositionEndRTL = getStoryVariant(ActionsPositionStartPositionEnd, RTL); + +export const NoActions = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + +); + +NoActions.storyName = 'no actions'; + +export const NoActionsDarkMode = getStoryVariant(NoActions, DARK_MODE); +export const NoActionsHighContrast = getStoryVariant(NoActions, HIGH_CONTRAST); +export const NoActionsRTL = getStoryVariant(NoActions, RTL); + +export const NoTitle = () => ( + + + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +NoTitle.storyName = 'no title'; + +export const NoTitleDarkMode = getStoryVariant(NoTitle, DARK_MODE); +export const NoTitleHighContrast = getStoryVariant(NoTitle, HIGH_CONTRAST); +export const NoTitleRTL = getStoryVariant(NoTitle, RTL); + +export const NoTitleNoActions = () => ( + + + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + +); + +NoTitleNoActions.storyName = 'no title & no actions'; + +export const NoTitleNoActionsDarkMode = getStoryVariant(NoTitleNoActions, DARK_MODE); +export const NoTitleNoActionsHighContrast = getStoryVariant(NoTitleNoActions, HIGH_CONTRAST); +export const NoTitleNoActionsRTL = getStoryVariant(NoTitleNoActions, RTL); + +export const TitleCustomAction = () => ( + + + + + + + } />}> + Dialog title + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, explicabo repudiandae impedit doloribus + laborum quidem maxime dolores perspiciatis non ipsam, nostrum commodi quis autem sequi, incidunt cum? + Consequuntur, repellendus nostrum? + + + + +); + +TitleCustomAction.storyName = 'title custom action'; + +export const TitleCustomActionDarkMode = getStoryVariant(TitleCustomAction, DARK_MODE); +export const TitleCustomActionHighContrast = getStoryVariant(TitleCustomAction, HIGH_CONTRAST); +export const TitleCustomActionRTL = getStoryVariant(TitleCustomAction, RTL); + +export const Nested = () => ( + + + + + + + Dialog title + + + + + + + + Inner dialog title + ⛔️ just because you can doesn't mean you should have nested dialogs ⛔️ + + + + + + + + + + + + +); + +Nested.storyName = 'nested'; + +export const NestedDarkMode = getStoryVariant(Nested, DARK_MODE); +export const NestedHighContrast = getStoryVariant(Nested, HIGH_CONTRAST); +export const NestedRTL = getStoryVariant(Nested, RTL); + +export const ScrollLongContent = () => ( + + + + + + + Dialog title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est + lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit + gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet bibendum. + Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. Nunc id cursus + metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin nibh nisl condimentum + id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac auctor augue mauris augue + neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur ridiculus mus mauris vitae + ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo in vitae turpis massa sed + elementum tempus egestas sed. +

+

+ Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. + Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam adipiscing + vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet mattis vulputate + enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus cras adipiscing enim + eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque gravida in fermentum et + sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Ultrices eros in cursus + turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio pellentesque diam + volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Ipsum nunc aliquet + bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien nec sagittis aliquam malesuada + bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis imperdiet. +

+

+ Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. Eget + aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra massa + massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero volutpat sed. + Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut aliquam. Volutpat + diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a erat. Venenatis lectus + magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel elit. Neque laoreet + suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. Bibendum ut tristique et + egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec ultrices dui. Elit duis + tristique sollicitudin nibh sit amet. +

+

+ At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. + Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. Turpis + egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor + aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus venenatis lectus magna + fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas maecenas pharetra convallis + posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus sit amet est placerat. +

+

+ Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna condimentum + mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat in ante metus + dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales neque sodales ut + etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis molestie a iaculis at + erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. + Fringilla urna porttitor rhoncus dolor purus. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est + lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit + gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet bibendum. + Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. Nunc id cursus + metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin nibh nisl condimentum + id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac auctor augue mauris augue + neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur ridiculus mus mauris vitae + ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo in vitae turpis massa sed + elementum tempus egestas sed. +

+

+ Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. + Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam adipiscing + vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet mattis vulputate + enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus cras adipiscing enim + eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque gravida in fermentum et + sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Ultrices eros in cursus + turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio pellentesque diam + volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Ipsum nunc aliquet + bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien nec sagittis aliquam malesuada + bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis imperdiet. +

+

+ Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. Eget + aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra massa + massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero volutpat sed. + Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut aliquam. Volutpat + diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a erat. Venenatis lectus + magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel elit. Neque laoreet + suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. Bibendum ut tristique et + egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec ultrices dui. Elit duis + tristique sollicitudin nibh sit amet. +

+

+ At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. + Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. Turpis + egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor + aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus venenatis lectus magna + fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas maecenas pharetra convallis + posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus sit amet est placerat. +

+

+ Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna condimentum + mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat in ante metus + dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales neque sodales ut + etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis molestie a iaculis at + erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. + Fringilla urna porttitor rhoncus dolor purus. +

+ + + + + + + + + + +); + +ScrollLongContent.storyName = 'scroll long content'; + +export const ScrollLongContentDarkMode = getStoryVariant(ScrollLongContent, DARK_MODE); +export const ScrollLongContentHighContrast = getStoryVariant(ScrollLongContent, HIGH_CONTRAST); +export const ScrollLongContentRTL = getStoryVariant(ScrollLongContent, RTL); diff --git a/apps/vr-tests-react-components/src/stories/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image.stories.tsx deleted file mode 100644 index cf06075f882bfb..00000000000000 --- a/apps/vr-tests-react-components/src/stories/Image.stories.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import Screener from 'screener-storybook/src/screener'; -import { Image } from '@fluentui/react-image'; - -const imageUrl = 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg'; - -storiesOf('Image Converged', module) - .addDecorator((story: () => React.ReactNode) => ( - {story()} - )) - .addStory('Default', () => ( - Placeholder image - )) - .addStory('Image Shape', () => ( - <> -
- Amanda's avatar default -
-
- Amanda's avatar rounded -
-
- Amanda's avatar circular -
- - )) - .addStory('Image Variations Border', () => ( - <> -
- Amanda's avatar bordered -
-
- Amanda's avatar bordered and rounded -
-
- Amanda's avatar bordered and circular -
- - )) - .addStory('Image Variations Fallback', () => ( - Non-existent image fallback - )) - .addStory('Image Layout Fit', () => ( - <> -
- Placeholder for fit none -
-
- Placeholder for fit center -
-
- Placeholder for fit contain -
-
- Placeholder for fit cover -
- - )) - .addStory('Image Fluid', () => ( - <> -
- -
-
- -
- - )) - .addStory('Image Shadow', () => ( - - )); diff --git a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx new file mode 100644 index 00000000000000..d24288b7aee426 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import Screener from 'screener-storybook/src/screener'; +import { Image } from '@fluentui/react-image'; +import { ComponentMeta } from '@storybook/react'; + +const imageUrl = 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg'; + +export default { + title: 'Image Converged', + + decorators: [ + (story: () => React.ReactNode) => ( + {story()} + ), + ], +} as ComponentMeta; + +export const Default = () => ( + Placeholder image +); + +export const ImageShape = () => ( + <> +
+ Amanda's avatar default +
+
+ Amanda's avatar rounded +
+
+ Amanda's avatar circular +
+ +); + +export const ImageVariationsBorder = () => ( + <> +
+ Amanda's avatar bordered +
+
+ Amanda's avatar bordered and rounded +
+
+ Amanda's avatar bordered and circular +
+ +); + +export const ImageVariationsFallback = () => ( + Non-existent image fallback +); + +export const ImageLayoutFit = () => ( + <> +
+ Placeholder for fit none +
+
+ Placeholder for fit center +
+
+ Placeholder for fit contain +
+
+ Placeholder for fit cover +
+ +); + +export const ImageFluid = () => ( + <> +
+ +
+
+ +
+ +); + +export const ImageShadow = () => ( + +);