From 420dc0561f9318efe1c39acec60c30c4403186cc Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 14 Nov 2023 16:14:40 +0100 Subject: [PATCH] test(react-drawer): add VR tests for Drawer (#29709) --- apps/vr-tests-react-components/package.json | 1 + .../src/stories/Drawer/Drawer.stories.tsx | 266 ++++++++++++++++++ 2 files changed, 267 insertions(+) create mode 100644 apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 7afef02c124f6c..da34138bddbe53 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -32,6 +32,7 @@ "@fluentui/react-datepicker-compat": "*", "@fluentui/react-dialog": "*", "@fluentui/react-divider": "*", + "@fluentui/react-drawer": "*", "@fluentui/react-field": "*", "@fluentui/react-icons": "^2.0.217", "@fluentui/react-image": "*", diff --git a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx new file mode 100644 index 00000000000000..d688dd9079d48b --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx @@ -0,0 +1,266 @@ +import * as React from 'react'; +import { ComponentMeta } from '@storybook/react'; + +import { + Drawer, + DrawerHeader, + DrawerHeaderTitle, + DrawerBody, + DrawerHeaderNavigation, + DrawerProps, + OverlayDrawer, + InlineDrawer, + InlineDrawerProps, + DrawerFooter, +} from '@fluentui/react-drawer'; +import { Toolbar, ToolbarButton, ToolbarGroup } from '@fluentui/react-toolbar'; +import { Button } from '@fluentui/react-button'; +import { + ArrowLeft24Regular, + ArrowClockwise24Regular, + Settings24Regular, + Dismiss24Regular, +} from '@fluentui/react-icons'; + +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; + +export default { + title: 'Drawer', +} as ComponentMeta; + +const ExampleDrawerHeader = () => ( + + + + } /> + + + } /> + } /> + } /> + + + + + Title goes here + +); +const ExampleDrawerFooter = () => ( + + + + +); + +const ExampleDrawer = ({ + Component = Drawer, + ...props +}: { Component?: React.ComponentType } & DrawerProps) => ( + + + + +

Drawer content

+ + + + +); + +const ExampleLargeContentScrollDrawer = ({ + Component = Drawer, + ...props +}: { Component?: React.ComponentType } & DrawerProps) => ( + + + + + {new Array(20).fill(0).map((_, index) => ( +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis, cumque veniam quis unde laboriosam + libero harum aspernatur dolorem, laudantium adipisci sit similique repudiandae, ducimus vero facilis! + Praesentium placeat sed accusamus! +

+ ))} + + + + +); + +const ExampleInlineDrawer = (props: InlineDrawerProps) => { + const pageContent = ( +
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum ullam repellat quis explicabo, alias consectetur + rem quas iure assumenda cum ad esse hic itaque obcaecati? Nisi earum quo adipisci corrupti. +
+ ); + + return ( +
+ {props.position === 'end' && pageContent} + + {props.position === 'start' && pageContent} +
+ ); +}; + +export const Default = () => ; + +Default.storyName = 'default drawer'; + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const Overlay = () => ; + +Overlay.storyName = 'overlay drawer'; + +export const OverlayDarkMode = getStoryVariant(Overlay, DARK_MODE); +export const OverlayHighContrast = getStoryVariant(Overlay, HIGH_CONTRAST); +export const OverlayRTL = getStoryVariant(Overlay, RTL); + +export const PositionStartOverlay = () => ; + +PositionStartOverlay.storyName = 'overlay drawer position start'; + +export const PositionStartOverlayDarkMode = getStoryVariant(PositionStartOverlay, DARK_MODE); +export const PositionStartOverlayHighContrast = getStoryVariant(PositionStartOverlay, HIGH_CONTRAST); +export const PositionStartOverlayRTL = getStoryVariant(PositionStartOverlay, RTL); + +export const PositionEndOverlay = () => ; + +PositionEndOverlay.storyName = 'overlay drawer position end'; + +export const PositionEndOverlayDarkMode = getStoryVariant(PositionEndOverlay, DARK_MODE); +export const PositionEndOverlayHighContrast = getStoryVariant(PositionEndOverlay, HIGH_CONTRAST); +export const PositionEndOverlayRTL = getStoryVariant(PositionEndOverlay, RTL); + +export const NonModalOverlay = () => ; + +NonModalOverlay.storyName = 'overlay drawer non modal'; + +export const NonModalOverlayDarkMode = getStoryVariant(NonModalOverlay, DARK_MODE); +export const NonModalOverlayHighContrast = getStoryVariant(NonModalOverlay, HIGH_CONTRAST); +export const NonModalOverlayRTL = getStoryVariant(NonModalOverlay, RTL); + +export const AlertOverlay = () => ; + +AlertOverlay.storyName = 'overlay drawer alert'; + +export const AlertOverlayDarkMode = getStoryVariant(AlertOverlay, DARK_MODE); +export const AlertOverlayHighContrast = getStoryVariant(AlertOverlay, HIGH_CONTRAST); +export const AlertOverlayRTL = getStoryVariant(AlertOverlay, RTL); + +export const MediumOverlay = () => ; + +MediumOverlay.storyName = 'overlay drawer medium'; + +export const MediumOverlayDarkMode = getStoryVariant(MediumOverlay, DARK_MODE); +export const MediumOverlayHighContrast = getStoryVariant(MediumOverlay, HIGH_CONTRAST); +export const MediumOverlayRTL = getStoryVariant(MediumOverlay, RTL); + +export const LargeOverlay = () => ; + +LargeOverlay.storyName = 'overlay drawer large'; + +export const LargeOverlayDarkMode = getStoryVariant(LargeOverlay, DARK_MODE); +export const LargeOverlayHighContrast = getStoryVariant(LargeOverlay, HIGH_CONTRAST); +export const LargeOverlayRTL = getStoryVariant(LargeOverlay, RTL); + +export const FullOverlay = () => ; + +FullOverlay.storyName = 'overlay drawer full'; + +export const FullOverlayDarkMode = getStoryVariant(FullOverlay, DARK_MODE); +export const FullOverlayHighContrast = getStoryVariant(FullOverlay, HIGH_CONTRAST); +export const FullOverlayRTL = getStoryVariant(FullOverlay, RTL); + +export const Inline = () => ; + +Inline.storyName = 'inline drawer'; + +export const InlineDarkMode = getStoryVariant(Inline, DARK_MODE); +export const InlineHighContrast = getStoryVariant(Inline, HIGH_CONTRAST); +export const InlineRTL = getStoryVariant(Inline, RTL); + +export const PositionStartInline = () => ; + +PositionStartInline.storyName = 'inline drawer position start'; + +export const PositionStartInlineDarkMode = getStoryVariant(PositionStartInline, DARK_MODE); +export const PositionStartInlineHighContrast = getStoryVariant(PositionStartInline, HIGH_CONTRAST); +export const PositionStartInlineRTL = getStoryVariant(PositionStartInline, RTL); + +export const PositionEndInline = () => ; + +PositionEndInline.storyName = 'inline drawer position end'; + +export const PositionEndInlineDarkMode = getStoryVariant(PositionEndInline, DARK_MODE); +export const PositionEndInlineHighContrast = getStoryVariant(PositionEndInline, HIGH_CONTRAST); +export const PositionEndInlineRTL = getStoryVariant(PositionEndInline, RTL); + +export const SeparatorPositionEndInline = () => ; + +SeparatorPositionEndInline.storyName = 'inline drawer separator position end'; + +export const SeparatorPositionEndInlineDarkMode = getStoryVariant(SeparatorPositionEndInline, DARK_MODE); +export const SeparatorPositionEndInlineHighContrast = getStoryVariant(SeparatorPositionEndInline, HIGH_CONTRAST); +export const SeparatorPositionEndInlineRTL = getStoryVariant(SeparatorPositionEndInline, RTL); + +export const SeparatorPositionStartInline = () => ; + +SeparatorPositionStartInline.storyName = 'inline drawer separator position start'; + +export const SeparatorPositionStartInlineDarkMode = getStoryVariant(SeparatorPositionStartInline, DARK_MODE); +export const SeparatorPositionStartInlineHighContrast = getStoryVariant(SeparatorPositionStartInline, HIGH_CONTRAST); +export const SeparatorPositionStartInlineRTL = getStoryVariant(SeparatorPositionStartInline, RTL); + +export const MediumInline = () => ; + +MediumInline.storyName = 'inline drawer large'; + +export const MediumInlineDarkMode = getStoryVariant(MediumInline, DARK_MODE); +export const MediumInlineHighContrast = getStoryVariant(MediumInline, HIGH_CONTRAST); +export const MediumInlineRTL = getStoryVariant(MediumInline, RTL); + +export const LargeInline = () => ; + +LargeInline.storyName = 'inline drawer large'; + +export const LargeInlineDarkMode = getStoryVariant(LargeInline, DARK_MODE); +export const LargeInlineHighContrast = getStoryVariant(LargeInline, HIGH_CONTRAST); +export const LargeInlineRTL = getStoryVariant(LargeInline, RTL); + +export const FullInline = () => ; + +FullInline.storyName = 'inline drawer full'; + +export const FullInlineDarkMode = getStoryVariant(FullInline, DARK_MODE); +export const FullInlineHighContrast = getStoryVariant(FullInline, HIGH_CONTRAST); +export const FullInlineRTL = getStoryVariant(FullInline, RTL); + +export const LargeContentScrollInline = () => ( +
+ +
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum ullam repellat quis explicabo, alias consectetur + rem quas iure assumenda cum ad esse hic itaque obcaecati? Nisi earum quo adipisci corrupti. +
+
+); + +LargeContentScrollInline.storyName = 'inline drawer large content scroll'; + +export const LargeContentScrollInlineDarkMode = getStoryVariant(LargeContentScrollInline, DARK_MODE); +export const LargeContentScrollInlineHighContrast = getStoryVariant(LargeContentScrollInline, HIGH_CONTRAST); +export const LargeContentScrollInlineRTL = getStoryVariant(LargeContentScrollInline, RTL); + +export const LargeContentScrollOverlay = () => ; + +LargeContentScrollOverlay.storyName = 'overlay drawer large content scroll'; + +export const LargeContentScrollOverlayDarkMode = getStoryVariant(LargeContentScrollOverlay, DARK_MODE); +export const LargeContentScrollOverlayHighContrast = getStoryVariant(LargeContentScrollOverlay, HIGH_CONTRAST); +export const LargeContentScrollOverlayRTL = getStoryVariant(LargeContentScrollOverlay, RTL);