diff --git a/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx deleted file mode 100644 index 4fee9cf87f3a8b..00000000000000 --- a/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; -import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; -import { CircleRegular } from '@fluentui/react-icons'; - -storiesOf('Accordion Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - - .addStory( - 'visibility+focus', - () => ( - - - Opened - Opened Panel - - - Closed - Closed Panel - - - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ); - -storiesOf('Accordion Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - - .addStory( - 'size', - () => ( - - - Small - Small Panel - - - Medium - Medium Panel - - - Large - Large Panel - - - Extra Large - Extra Large Panel - - - ), - { includeRtl: true }, - ) - .addStory( - 'expandIconPosition="end"', - () => ( - - - Opened - Visible Panel - - - Closed - Hidden Panel - - - ), - { includeRtl: true }, - ) - .addStory( - 'expandIcon=""', - () => ( - - - } expandIconPosition="start"> - Expand Icon Start - - Expand Icon Start Panel - - - } expandIconPosition="end"> - Expand Icon End - - Expand Icon End Panel - - - } expandIconPosition="end"> - Expand Icon Inline End - - Expand Icon Inline End Panel - - - ), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'icon=""', - () => ( - - - } expandIconPosition="start"> - Icon Start - - Icon Start Panel - - - } expandIconPosition="end"> - Icon End - - Icon End Panel - - - } expandIconPosition="end"> - Icon Inline End - - Icon Inline End Panel - - - ), - { includeRtl: true }, - ) - .addStory( - 'disabled', - () => ( - - - Disabled Item Opened - Disabled Item Opened Panel - - - Disabled Item Closed - Disabled Item Closed Panel - - - Disabled Item ClosedInline - Disabled Item ClosedInline Panel - - - ), - { includeHighContrast: true, includeDarkMode: true }, - ); diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx new file mode 100644 index 00000000000000..611d822aa403a3 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx @@ -0,0 +1,140 @@ +import * as React from 'react'; +import Screener from 'screener-storybook/src/screener'; +import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; +import { CircleRegular } from '@fluentui/react-icons'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; + +export default { + title: 'Accordion Converged', + + decorators: [ + story => ( + +
+ {story()} +
+ + ), + ], +} as ComponentMeta; + +export const Size = () => ( + + + Small + Small Panel + + + Medium + Medium Panel + + + Large + Large Panel + + + Extra Large + Extra Large Panel + + +); + +Size.storyName = 'size'; + +export const SizeRTL = getStoryVariant(Size, RTL); + +export const ExpandIconPositionEnd = () => ( + + + Opened + Visible Panel + + + Closed + Hidden Panel + + +); + +ExpandIconPositionEnd.storyName = 'expandIconPosition="end"'; + +export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL); + +export const ExpandIconIcon = () => ( + + + } expandIconPosition="start"> + Expand Icon Start + + Expand Icon Start Panel + + + } expandIconPosition="end"> + Expand Icon End + + Expand Icon End Panel + + + } expandIconPosition="end"> + Expand Icon Inline End + + Expand Icon Inline End Panel + + +); + +ExpandIconIcon.storyName = 'expandIcon=""'; + +export const ExpandIconIconDarkMode = getStoryVariant(ExpandIconIcon, DARK_MODE); +export const ExpandIconIconHighContrast = getStoryVariant(ExpandIconIcon, HIGH_CONTRAST); +export const ExpandIconIconRTL = getStoryVariant(ExpandIconIcon, RTL); + +export const IconIcon = () => ( + + + } expandIconPosition="start"> + Icon Start + + Icon Start Panel + + + } expandIconPosition="end"> + Icon End + + Icon End Panel + + + } expandIconPosition="end"> + Icon Inline End + + Icon Inline End Panel + + +); + +IconIcon.storyName = 'icon=""'; + +export const IconIconRTL = getStoryVariant(IconIcon, RTL); + +export const Disabled = () => ( + + + Disabled Item Opened + Disabled Item Opened Panel + + + Disabled Item Closed + Disabled Item Closed Panel + + + Disabled Item ClosedInline + Disabled Item ClosedInline Panel + + +); + +Disabled.storyName = 'disabled'; + +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); +export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST); diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx new file mode 100644 index 00000000000000..81c0afc7df01a5 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import Screener from 'screener-storybook/src/screener'; +import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; + +export default { + title: 'Accordion Converged', + + decorators: [ + story => ( + +
+ {story()} +
+ + ), + ], +} as ComponentMeta; + +export const VisibilityFocus = () => ( + + + Opened + Opened Panel + + + Closed + Closed Panel + + +); + +VisibilityFocus.storyName = 'visibility+focus'; + +export const VisibilityFocusDarkMode = getStoryVariant(VisibilityFocus, DARK_MODE); +export const VisibilityFocusHighContrast = getStoryVariant(VisibilityFocus, HIGH_CONTRAST); +export const VisibilityFocusRTL = getStoryVariant(VisibilityFocus, RTL);