From c2a3b13f91bea2540ef8a636c267ae3cf0d9bdd1 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:00:25 -0800 Subject: [PATCH 01/65] feat: add storybook config --- packages/fluentui/docs/.storybook/main.js | 41 ++++++++++++++++++++ packages/fluentui/docs/.storybook/preview.js | 22 +++++++++++ 2 files changed, 63 insertions(+) create mode 100644 packages/fluentui/docs/.storybook/main.js create mode 100644 packages/fluentui/docs/.storybook/preview.js diff --git a/packages/fluentui/docs/.storybook/main.js b/packages/fluentui/docs/.storybook/main.js new file mode 100644 index 00000000000000..66664d8a0eeec9 --- /dev/null +++ b/packages/fluentui/docs/.storybook/main.js @@ -0,0 +1,41 @@ +const path = require('path'); +const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); + +module.exports = /** @type {import('../../../../.storybook/main').StorybookBaseConfig} */ ({ + stories: ['../src/**/*.stories.tsx'], + core: { + builder: 'webpack5', + }, + babel: {}, + typescript: { + // disable react-docgen-typescript (totally not needed here, slows things down a lot) + reactDocgen: false, + }, + webpackFinal: config => { + const tsPaths = new TsconfigPathsPlugin({ + configFile: path.resolve(__dirname, '../../../../tsconfig.base.json'), + }); + + if (config.resolve) { + config.resolve.plugins ? config.resolve.plugins.push(tsPaths) : (config.resolve.plugins = [tsPaths]); + } + + if (config.module) { + config.module.rules?.unshift({ + test: /\.(ts|tsx)$/, + use: [ + { + loader: '@griffel/webpack-loader', + options: { + babelOptions: { + presets: ['@babel/preset-typescript'], + }, + }, + }, + ], + }); + } + + return config; + }, +}); diff --git a/packages/fluentui/docs/.storybook/preview.js b/packages/fluentui/docs/.storybook/preview.js new file mode 100644 index 00000000000000..331981981eb5d8 --- /dev/null +++ b/packages/fluentui/docs/.storybook/preview.js @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { Provider, teamsTheme } from '@fluentui/react-northstar'; +import Screener from 'screener-storybook/src/screener'; + +/** @type {import("@fluentui/react-storybook-addon").FluentParameters} */ +export const parameters = { layout: 'none' }; +/** @type {import("@storybook/react").DecoratorFn[]} */ +export const decorators = [ + story => {story()}, + story => ( + +
+ {story()} +
+ + ), +]; + +// For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app +if (typeof window === 'object') { + /** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook; +} From bb488a3c03a789d6cbfee5fc7ebc7061df5f2fac Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:12:46 -0800 Subject: [PATCH 02/65] Add Accordion stories --- .../vr-tests/Accordion/Accordion.stories.tsx | 24 ++++++++++++++++++ .../AccordionExampleCustomTitle.stories.tsx | 25 +++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx b/packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx new file mode 100644 index 00000000000000..3f593fdae0ac51 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Accordion/Accordion.stories.tsx @@ -0,0 +1,24 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Accordion } from '@fluentui/react-northstar'; +import AccordionDefaultBsize from '../../examples/components/Accordion/Performance/AccordionDefault.bsize'; +import AccordionExampleRtl from '../../examples/components/Accordion/Rtl/AccordionExample.rtl'; +import AccordionExample from '../../examples/components/Accordion/Types/AccordionExample.shorthand'; +import AccordionExclusiveExample from '../../examples/components/Accordion/Types/AccordionExclusiveExample.shorthand'; +import AccordionExclusiveExpandedExample from '../../examples/components/Accordion/Types/AccordionExclusiveExpandedExample.shorthand'; +import AccordionPanelCustomContentExample from '../../examples/components/Accordion/Usage/AccordionPanelCustomContentExample.shorthand'; +import AccordionPanelCustomTitleExample from '../../examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand'; +import AccordionDefaultExample from '../../examples/components/Accordion/Visual/AccordionExampleDefault.shorthand'; + +export default { component: Accordion, title: 'Accordion' } as ComponentMeta; + +export { + AccordionDefaultBsize, + AccordionExampleRtl, + AccordionExample, + AccordionExclusiveExample, + AccordionExclusiveExpandedExample, + AccordionPanelCustomContentExample, + AccordionPanelCustomTitleExample, + AccordionDefaultExample, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx new file mode 100644 index 00000000000000..726c60052d5c49 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Accordion, accordionTitleSlotClassNames } from '@fluentui/react-northstar'; +import AccordionExampleCustomTitle from '../../examples/components/Accordion/Visual/AccordionExampleCustomTitle.shorthand'; + +export default { + component: Accordion, + title: 'Accordion', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { AccordionExampleCustomTitle }; From f0a62454c34bccdc552e4545deb24c300294c77d Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:24:49 -0800 Subject: [PATCH 03/65] Add Alert Stories --- .../docs/src/vr-tests/Alert/Alert.stories.tsx | 48 +++++++++++++++++++ .../Alert/AlertExampleDanger.stories.tsx | 26 ++++++++++ .../Alert/AlertExampleDismissible.stories.tsx | 26 ++++++++++ .../Alert/AlertExampleInfo.stories.tsx | 26 ++++++++++ .../Alert/AlertExampleOof.stories.tsx | 27 +++++++++++ .../Alert/AlertExampleUrgent.stories.tsx | 27 +++++++++++ .../src/vr-tests/Alert/commonScreenerSteps.ts | 16 +++++++ 7 files changed, 196 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx new file mode 100644 index 00000000000000..3457c7ce6ca3a4 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/Alert.stories.tsx @@ -0,0 +1,48 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Alert } from '@fluentui/react-northstar'; +import AlertDefaultBsize from '../../examples/components/Alert/Performance/AlertDefault.bsize'; +import AlertExampleRtl from '../../examples/components/Alert/Rtl/AlertExample.rtl'; +import AlertExampleChildrenRtl from '../../examples/components/Alert/Rtl/AlertExampleChildren.rtl'; +import AlertExampleDismissActionRtl from '../../examples/components/Alert/Rtl/AlertExampleDismissAction.rtl'; +import AlertExampleDismissAction from '../../examples/components/Alert/Slots/AlertExampleActions.shorthand'; +import AlertExampleHeader from '../../examples/components/Alert/Slots/AlertExampleHeader.shorthand'; +import AlertExampleIcon from '../../examples/components/Alert/Slots/AlertExampleIcon.shorthand'; +import AlertExampleDismissible from '../../examples/components/Alert/State/AlertExampleVisible.shorthand'; +import AlertExample from '../../examples/components/Alert/Types/AlertExample.shorthand'; +import AlertExampleDismissActions from '../../examples/components/Alert/Usage/AlertExampleDismissActions.shorthand'; +import AlertExampleImportantMessage from '../../examples/components/Alert/Usage/AlertExampleImportantMessage.shorthand'; +import AlertExampleWidth from '../../examples/components/Alert/Usage/AlertExampleWidth.shorthand'; +import AlertExampleShorthand from '../../examples/components/Alert/Variations/AlertExampleAttached.shorthand'; +import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger'; +import AlertExampleFitted from '../../examples/components/Alert/Variations/AlertExampleFitted.shorthand'; +import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo'; +import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs'; +import AlertExampleSuccess from '../../examples/components/Alert/Variations/AlertExampleSuccess.shorthand'; +import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent'; +import AlertExampleWarning from '../../examples/components/Alert/Variations/AlertExampleWarning.shorthand'; + +export default { component: Alert, title: 'Alert' } as ComponentMeta; + +export { + AlertDefaultBsize, + AlertExampleRtl, + AlertExampleChildrenRtl, + AlertExampleDismissActionRtl, + AlertExampleDismissAction, + AlertExampleHeader, + AlertExampleIcon, + AlertExampleDismissible, + AlertExample, + AlertExampleDismissActions, + AlertExampleImportantMessage, + AlertExampleWidth, + AlertExampleShorthand, + AlertExampleDanger, + AlertExampleFitted, + AlertExampleInfo, + AlertExampleOof, + AlertExampleSuccess, + AlertExampleUrgent, + AlertExampleWarning, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx new file mode 100644 index 00000000000000..75c5125f795171 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Alert } from '@fluentui/react-northstar'; +import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger.shorthand'; + +export default { + component: Alert, + title: 'Alert', + decorators: [ + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); + +const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); + +const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); + +export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleDanger }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx new file mode 100644 index 00000000000000..0cba64860a4a21 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Alert } from '@fluentui/react-northstar'; +import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AlertExampleDismissible from '../../examples/components/Alert/Types/AlertExampleDismissible.shorthand'; + +export default { + component: Alert, + title: 'Alert', + decorators: [ + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); + +const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); + +const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); + +export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleDismissible }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx new file mode 100644 index 00000000000000..71253a5accb3a0 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Alert } from '@fluentui/react-northstar'; +import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo.shorthand'; + +export default { + component: Alert, + title: 'Alert', + decorators: [ + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); + +const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); + +const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); + +export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleInfo }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx new file mode 100644 index 00000000000000..d94d4f809f4f28 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Alert } from '@fluentui/react-northstar'; +import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; + +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs.shorthand'; + +export default { + component: Alert, + title: 'Alert', + decorators: [ + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); + +const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); + +const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); + +export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleOof }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx new file mode 100644 index 00000000000000..5c0424a7b85104 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Alert } from '@fluentui/react-northstar'; +import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; + +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent.shorthand'; + +export default { + component: Alert, + title: 'Alert', + decorators: [ + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); + +const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); + +const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); + +export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleUrgent }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts new file mode 100644 index 00000000000000..8b4bb42daaea73 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts @@ -0,0 +1,16 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Steps } from 'screener-storybook/src/screener'; +import { alertDismissActionClassName } from '@fluentui/react-northstar'; + +const selectors = { + dismissAction: `.${alertDismissActionClassName}`, +}; +const tab = '\uE004'; + +export const getFocusScreenerSteps = new Steps() + .keys('body', tab) + .snapshot('Focuses the action button') + .hover(selectors.dismissAction) + .snapshot('Hovers the focused action button'); + +export const getHoverScreenerSteps = new Steps().hover(selectors.dismissAction).snapshot('Hovers the action button'); From df9c06e7b39e3e2d68ace8fb42fde487b783d4f5 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:25:33 -0800 Subject: [PATCH 04/65] Add Animation Stories --- .../vr-tests/Animation/Animation.stories.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx b/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx new file mode 100644 index 00000000000000..9a2ead9e453eaa --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Animation } from '@fluentui/react-northstar'; +import AnimationExample from '../../examples/components/Animation/Types/AnimationExample.shorthand'; +import AnimationExampleDelay from '../../examples/components/Animation/Types/AnimationExampleDelay.shorthand'; +import AnimationExampleDirection from '../../examples/components/Animation/Types/AnimationExampleDirection.shorthand'; +import AnimationExampleDuration from '../../examples/components/Animation/Types/AnimationExampleDuration.shorthand'; +import AnimationExampleFillMode from '../../examples/components/Animation/Types/AnimationExampleFillMode.shorthand'; +import AnimationExampleIterationCount from '../../examples/components/Animation/Types/AnimationExampleIterationCount.shorthand'; +import AnimationExamplePlayState from '../../examples/components/Animation/Types/AnimationExamplePlayState.shorthand'; +import AnimationExampleTimingFunction from '../../examples/components/Animation/Types/AnimationExampleTimingFunction.shorthand'; +import AnimationExampleVisible from '../../examples/components/Animation/Usage/AnimationExampleVisible.shorthand'; + +export default { component: Animation, title: 'Animation' } as ComponentMeta; + +export { + AnimationExample, + AnimationExampleDelay, + AnimationExampleDirection, + AnimationExampleDuration, + AnimationExampleFillMode, + AnimationExampleIterationCount, + AnimationExamplePlayState, + AnimationExampleTimingFunction, + AnimationExampleVisible, +}; From 82d1683e3ce511a488ca8f5e5b1eb50e1a9bc9d7 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:32:41 -0800 Subject: [PATCH 05/65] Add Attachment Stories and fix steps for Alert --- .../src/vr-tests/Alert/commonScreenerSteps.ts | 12 ++++++---- .../Attachment/Attachment.stories.tsx | 22 ++++++++++++++++++ ...tachmentActionExampleShorthand.stories.tsx | 23 +++++++++++++++++++ ...mentActionableExampleShorthand.stories.tsx | 23 +++++++++++++++++++ .../Attachment/commonScreenerSteps.ts | 23 +++++++++++++++++++ 5 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts index 8b4bb42daaea73..0a776661c7f6bf 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts @@ -1,16 +1,20 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { Steps } from 'screener-storybook/src/screener'; import { alertDismissActionClassName } from '@fluentui/react-northstar'; +import { keys } from '../utilities/utils'; const selectors = { dismissAction: `.${alertDismissActionClassName}`, }; -const tab = '\uE004'; export const getFocusScreenerSteps = new Steps() - .keys('body', tab) + .keys('body', keys.tab) .snapshot('Focuses the action button') .hover(selectors.dismissAction) - .snapshot('Hovers the focused action button'); + .snapshot('Hovers the focused action button') + .end(); -export const getHoverScreenerSteps = new Steps().hover(selectors.dismissAction).snapshot('Hovers the action button'); +export const getHoverScreenerSteps = new Steps() + .hover(selectors.dismissAction) + .snapshot('Hovers the action button') + .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx new file mode 100644 index 00000000000000..cba097e72b552d --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Attachment/Attachment.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Attachment } from '@fluentui/react-northstar'; +import AttachmentDefaultBsize from '../../examples/components/Attachment/Performance/AttachmentDefault.bsize'; +import AttachmentExampleRtl from '../../examples/components/Attachment/Rtl/AttachmentExample.rtl'; +import AttachmentDescriptionExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand'; +import AttachmentHeaderExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand'; +import AttachmentIconExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentIconExample.shorthand'; +import AttachmentExampleShorthand from '../../examples/components/Attachment/Types/AttachmentExample.shorthand'; +import AttachmentProgressExampleShorthand from '../../examples/components/Attachment/Types/AttachmentProgressExample.shorthand'; + +export default { component: Attachment, title: 'Attachment' } as ComponentMeta; + +export { + AttachmentDefaultBsize, + AttachmentExampleRtl, + AttachmentDescriptionExampleShorthand, + AttachmentHeaderExampleShorthand, + AttachmentIconExampleShorthand, + AttachmentExampleShorthand, + AttachmentProgressExampleShorthand, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..5455b17e8f205e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Attachment } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AttachmentActionExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentActionExample.shorthand'; + +export default { + component: Attachment, + title: 'Attachment', + decorators: [story => {story()}], +} as ComponentMeta; + +const AttachmentTeams = getThemeStoryVariant(Attachment, 'teamsV2'); + +const AttachmentTeamsDark = getThemeStoryVariant(Attachment, 'teamsDarkV2'); + +const AttachmentTeamsHighContrast = getThemeStoryVariant(Attachment, 'teamsHighContrast'); + +export { AttachmentTeams, AttachmentTeamsDark, AttachmentTeamsHighContrast, AttachmentActionExampleShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..b1aca7e882951f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Attachment } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import AttachmentActionableExampleShorthand from '../../examples/components/Attachment/Variations/AttachmentActionableExample.shorthand'; + +export default { + component: Attachment, + title: 'Attachment', + decorators: [story => {story()}], +} as ComponentMeta; + +const AttachmentTeams = getThemeStoryVariant(Attachment, 'teamsV2'); + +const AttachmentTeamsDark = getThemeStoryVariant(Attachment, 'teamsDarkV2'); + +const AttachmentTeamsHighContrast = getThemeStoryVariant(Attachment, 'teamsHighContrast'); + +export { AttachmentTeams, AttachmentTeamsDark, AttachmentTeamsHighContrast, AttachmentActionableExampleShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts new file mode 100644 index 00000000000000..5df11a3ad4934c --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts @@ -0,0 +1,23 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { Steps } from 'screener-storybook/src/screener'; +import { attachmentClassName, attachmentActionClassName } from '@fluentui/react-northstar'; +import { keys } from '../utilities/utils'; + +const selectors = { + root: `.${attachmentClassName}`, + action: `.${attachmentActionClassName}`, +}; + +const screenerSteps = new Steps() + .hover(selectors.root) + .snapshot('Hovers root') + .keys('body', keys.tab) + .snapshot('Focuses root') + .hover(selectors.action) + .snapshot('Hovers action') + .keys('body', keys.tab) + .keys('body', keys.tab) + .snapshot('Focuses action') + .end(); + +export default screenerSteps; From a0b18652f094f18f678c24d5150f9eb8af38cbe0 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:32:56 -0800 Subject: [PATCH 06/65] Add Avatar Stories --- .../src/vr-tests/Avatar/Avatar.stories.tsx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx b/packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx new file mode 100644 index 00000000000000..49cff3e878e5b5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Avatar/Avatar.stories.tsx @@ -0,0 +1,38 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Avatar } from '@fluentui/react-northstar'; +import AvatarDefaultBsize from '../../examples/components/Avatar/Performance/AvatarDefault.bsize'; +import AvatarExampleRtl from '../../examples/components/Avatar/Rtl/AvatarExample.rtl'; +import AvatarExampleShorthand from '../../examples/components/Avatar/Types/AvatarExample.shorthand'; +import AvatarUsageExampleShorthand from '../../examples/components/Avatar/Usage/AvatarUsageExample.shorthand'; +import AvatarExampleExcludedInitialsShorthand from '../../examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand'; +import AvatarExampleGetInitialsShorthand from '../../examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand'; +import AvatarExampleIconShorthand from '../../examples/components/Avatar/Variations/AvatarExampleIcon.shorthand'; +import AvatarExampleImageShorthand from '../../examples/components/Avatar/Variations/AvatarExampleImage.shorthand'; +import AvatarExampleLabelShorthand from '../../examples/components/Avatar/Variations/AvatarExampleLabel.shorthand'; +import AvatarExampleNameShorthand from '../../examples/components/Avatar/Variations/AvatarExampleName.shorthand'; +import AvatarExampleSizeShorthand from '../../examples/components/Avatar/Variations/AvatarExampleSize.shorthand'; +import AvatarExampleSquare from '../../examples/components/Avatar/Variations/AvatarExampleSquare.shorthand'; +import AvatarExampleStatusShorthand from '../../examples/components/Avatar/Variations/AvatarExampleStatus.shorthand'; +import AvatarExampleStatusCustomizationShorthand from '../../examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand'; +import AvatarExampleStatusImageShorthand from '../../examples/components/Avatar/Variations/AvatarExampleStatusImage.shorthand'; + +export default { component: Avatar, title: 'Avatar' } as ComponentMeta; + +export { + AvatarDefaultBsize, + AvatarExampleRtl, + AvatarExampleShorthand, + AvatarUsageExampleShorthand, + AvatarExampleExcludedInitialsShorthand, + AvatarExampleGetInitialsShorthand, + AvatarExampleIconShorthand, + AvatarExampleImageShorthand, + AvatarExampleLabelShorthand, + AvatarExampleNameShorthand, + AvatarExampleSizeShorthand, + AvatarExampleSquare, + AvatarExampleStatusShorthand, + AvatarExampleStatusCustomizationShorthand, + AvatarExampleStatusImageShorthand, +}; From 5467a67ef983642e1b6606b336bd0ce334b7dcdd Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:34:18 -0800 Subject: [PATCH 07/65] Add Box and Breadcrumb stories --- .../fluentui/docs/src/vr-tests/Box/Box.stories.tsx | 10 ++++++++++ .../src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx | 10 ++++++++++ 2 files changed, 20 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx b/packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx new file mode 100644 index 00000000000000..62c3e637b34a38 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Box/Box.stories.tsx @@ -0,0 +1,10 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Box } from '@fluentui/react-northstar'; +import BoxDefaultBsize from '../../examples/components/Box/Performance/BoxDefault.bsize'; +import BoxShorthandExample from '../../examples/components/Box/Types/BoxExample.shorthand'; +import BoxExample from '../../examples/components/Box/Types/BoxExample'; + +export default { component: Box, title: 'Box' } as ComponentMeta; + +export { BoxDefaultBsize, BoxShorthandExample, BoxExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx b/packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx new file mode 100644 index 00000000000000..913ebe7f2406c6 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Breadcrumb/Breadcrumb.stories.tsx @@ -0,0 +1,10 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Breadcrumb } from '@fluentui/react-northstar'; +import BreadcrumbExampleIconDivider from '../../examples/components/Breadcrumb/Content/BreadcrumbExampleIconDivider'; +import BreadcrumbExample from '../../examples/components/Breadcrumb/Types/BreadcrumbExampleBasic'; +import BreadcrumbExampleSizes from '../../examples/components/Breadcrumb/Variations/BreadcrumbExampleSizes'; + +export default { component: Breadcrumb, title: 'Breadcrumb' } as ComponentMeta; + +export { BreadcrumbExampleIconDivider, BreadcrumbExample, BreadcrumbExampleSizes }; From 7b5b5ac4468cbdb81b311091f4e1cb1bfe5a6106 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:38:57 -0800 Subject: [PATCH 08/65] Add Button stories --- .../src/vr-tests/Button/Button.stories.tsx | 42 +++++++++++++++++++ .../vr-tests/Button/ButtonExample.stories.tsx | 23 ++++++++++ .../ButtonExampleContentAndIcon.stories.tsx | 23 ++++++++++ .../Button/ButtonExampleDisabled.stories.tsx | 23 ++++++++++ .../ButtonExampleTextShorthand.stories.tsx | 23 ++++++++++ .../ButtonExampleWithTooltip.stories.tsx | 23 ++++++++++ ...nGroupCircularExampleShorthand.stories.tsx | 23 ++++++++++ .../ButtonGroupExampleShorthand.stories.tsx | 23 ++++++++++ .../vr-tests/Button/commonScreenerSteps.ts | 17 ++++++++ 9 files changed, 220 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx new file mode 100644 index 00000000000000..5774bd627b4f52 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/Button.stories.tsx @@ -0,0 +1,42 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import ButtonDefaultBsize from '../../examples/components/Button/Performance/ButtonDefault.bsize'; +import ButtonExampleRtl from '../../examples/components/Button/Rtl/ButtonExample.rtl'; +import ButtonExampleDisabled from '../../examples/components/Button/States/ButtonExampleDisabled'; +import ButtonExampleDisabledFocusable from '../../examples/components/Button/States/ButtonExampleDisabledFocusable.shorthand'; +import ButtonExampleLoading from '../../examples/components/Button/States/ButtonExampleLoading.shorthand'; +import ButtonExample from '../../examples/components/Button/Types/ButtonExample'; +import ButtonExampleEmphasis from '../../examples/components/Button/Types/ButtonExampleEmphasis.shorthand'; +import ButtonExampleIconOnly from '../../examples/components/Button/Types/ButtonExampleIconOnly.shorthand'; +import ButtonExampleInverted from '../../examples/components/Button/Types/ButtonExampleInverted'; +import ButtonExampleText from '../../examples/components/Button/Types/ButtonExampleText'; +import ButtonExampleContentAndIcon from '../../examples/components/Button/Usage/ButtonExampleContentAndIcon'; +import ButtonExampleOverflow from '../../examples/components/Button/Usage/ButtonExampleOverflow.shorthand'; +import ButtonUsageExampleShorthand from '../../examples/components/Button/Usage/ButtonUsageExample.shorthand'; +import ButtonExampleCircular from '../../examples/components/Button/Variations/ButtonExampleCircular.shorthand'; +import ButtonExampleFlat from '../../examples/components/Button/Variations/ButtonExampleFlat.shorthand'; +import ButtonExampleFluid from '../../examples/components/Button/Variations/ButtonExampleFluid.shorthand'; +import ButtonExampleSizeShorthand from '../../examples/components/Button/Variations/ButtonExampleSize.shorthand'; + +export default { component: Button, title: 'Button' } as ComponentMeta; + +export { + ButtonDefaultBsize, + ButtonExampleRtl, + ButtonExampleDisabled, + ButtonExampleDisabledFocusable, + ButtonExampleLoading, + ButtonExample, + ButtonExampleEmphasis, + ButtonExampleIconOnly, + ButtonExampleInverted, + ButtonExampleText, + ButtonExampleContentAndIcon, + ButtonExampleOverflow, + ButtonUsageExampleShorthand, + ButtonExampleCircular, + ButtonExampleFlat, + ButtonExampleFluid, + ButtonExampleSizeShorthand, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx new file mode 100644 index 00000000000000..0c9676cd1f0005 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonExample from '../../examples/components/Button/Types/ButtonExample.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx new file mode 100644 index 00000000000000..1143245c848c38 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonExampleContentAndIcon from '../../examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleContentAndIcon }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx new file mode 100644 index 00000000000000..6ea44bdf16952b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonExampleDisabled from '../../examples/components/Button/States/ButtonExampleDisabled.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleDisabled }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx new file mode 100644 index 00000000000000..00aa2e38fb319f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonExampleTextShorthand from '../../examples/components/Button/Types/ButtonExampleText.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleTextShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx new file mode 100644 index 00000000000000..333ff76d6f69a3 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonExampleWithTooltip from '../../examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleWithTooltip }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..d0b41ae08184a9 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonGroupCircularExampleShorthand from '../../examples/components/Button/Groups/ButtonGroupCircularExample.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonGroupCircularExampleShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..99fa4566d904ed --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Button } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; +import ButtonGroupExampleShorthand from '../../examples/components/Button/Groups/ButtonGroupExample.shorthand'; + +export default { + component: Button, + title: 'Button', + decorators: [story => {story()}], +} as ComponentMeta; + +const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); + +const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); + +const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); + +export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonGroupExampleShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts new file mode 100644 index 00000000000000..704a3e91153c58 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts @@ -0,0 +1,17 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Steps } from 'screener-storybook/src/screener'; +import { buttonClassName } from '@fluentui/react-northstar'; +import { keys } from '../utilities/utils'; + +const button = `.${buttonClassName}`; + +const screenerSteps = new Steps() + .hover(button) + .snapshot('Hovers the first button') + .click(button) + .snapshot('Clicks the first button') + .keys(button, keys.tab) + .snapshot('Focuses on the second button') + .end(); + +export default screenerSteps; From 75384e28f49a6ad3976af0090d7d415bf7a9713e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:45:01 -0800 Subject: [PATCH 09/65] Fix story names of components with interaction tests --- .../Alert/AlertExampleDanger.stories.tsx | 13 +++++++++---- .../Alert/AlertExampleDismissible.stories.tsx | 13 +++++++++---- .../Alert/AlertExampleInfo.stories.tsx | 8 ++++---- .../Alert/AlertExampleOof.stories.tsx | 8 ++++---- .../Alert/AlertExampleUrgent.stories.tsx | 14 +++++++++----- ...tachmentActionExampleShorthand.stories.tsx | 16 ++++++++++++---- ...mentActionableExampleShorthand.stories.tsx | 19 +++++++++++++++---- .../vr-tests/Button/ButtonExample.stories.tsx | 8 ++++---- .../ButtonExampleContentAndIcon.stories.tsx | 16 ++++++++++++---- .../Button/ButtonExampleDisabled.stories.tsx | 13 +++++++++---- .../ButtonExampleTextShorthand.stories.tsx | 16 ++++++++++++---- .../ButtonExampleWithTooltip.stories.tsx | 13 +++++++++---- ...nGroupCircularExampleShorthand.stories.tsx | 19 +++++++++++++++---- .../ButtonGroupExampleShorthand.stories.tsx | 16 ++++++++++++---- 14 files changed, 135 insertions(+), 57 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx index 75c5125f795171..cb47f5336415da 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx @@ -17,10 +17,15 @@ export default { ], } as ComponentMeta; -const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); +const AlertExampleDangerTeams = getThemeStoryVariant(AlertExampleDanger, 'teamsV2'); -const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); +const AlertExampleDangerTeamsDark = getThemeStoryVariant(AlertExampleDanger, 'teamsDarkV2'); -const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); +const AlertExampleDangerTeamsHighContrast = getThemeStoryVariant(AlertExampleDanger, 'teamsHighContrast'); -export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleDanger }; +export { + AlertExampleDanger, + AlertExampleDangerTeams, + AlertExampleDangerTeamsDark, + AlertExampleDangerTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx index 0cba64860a4a21..dd09fe3dfc46ca 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx @@ -17,10 +17,15 @@ export default { ], } as ComponentMeta; -const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); +const AlertExampleDismissibleTeams = getThemeStoryVariant(AlertExampleDismissible, 'teamsV2'); -const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); +const AlertExampleDismissibleTeamsDark = getThemeStoryVariant(AlertExampleDismissible, 'teamsDarkV2'); -const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); +const AlertExampleDismissibleTeamsHighContrast = getThemeStoryVariant(AlertExampleDismissible, 'teamsHighContrast'); -export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleDismissible }; +export { + AlertExampleDismissible, + AlertExampleDismissibleTeams, + AlertExampleDismissibleTeamsDark, + AlertExampleDismissibleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx index 71253a5accb3a0..6bfb1474ce3685 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx @@ -17,10 +17,10 @@ export default { ], } as ComponentMeta; -const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); +const AlertExampleInfoTeams = getThemeStoryVariant(AlertExampleInfo, 'teamsV2'); -const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); +const AlertExampleInfoTeamsDark = getThemeStoryVariant(AlertExampleInfo, 'teamsDarkV2'); -const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); +const AlertExampleInfoTeamsHighContrast = getThemeStoryVariant(AlertExampleInfo, 'teamsHighContrast'); -export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleInfo }; +export { AlertExampleInfo, AlertExampleInfoTeams, AlertExampleInfoTeamsDark, AlertExampleInfoTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx index d94d4f809f4f28..dd8d8a8ec58c22 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx @@ -18,10 +18,10 @@ export default { ], } as ComponentMeta; -const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); +const AlertExampleOofTeams = getThemeStoryVariant(AlertExampleOof, 'teamsV2'); -const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); +const AlertExampleOofTeamsDark = getThemeStoryVariant(AlertExampleOof, 'teamsDarkV2'); -const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); +const AlertExampleOofTeamsHighContrast = getThemeStoryVariant(AlertExampleOof, 'teamsHighContrast'); -export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleOof }; +export { AlertExampleOof, AlertExampleOofTeams, AlertExampleOofTeamsDark, AlertExampleOofTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx index 5c0424a7b85104..cd3dc7f3d2e76d 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx @@ -5,7 +5,6 @@ import Screener from 'screener-storybook/src/screener'; import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; - import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent.shorthand'; @@ -18,10 +17,15 @@ export default { ], } as ComponentMeta; -const AlertTeams = getThemeStoryVariant(Alert, 'teamsV2'); +const AlertExampleUrgentTeams = getThemeStoryVariant(AlertExampleUrgent, 'teamsV2'); -const AlertTeamsDark = getThemeStoryVariant(Alert, 'teamsDarkV2'); +const AlertExampleUrgentTeamsDark = getThemeStoryVariant(AlertExampleUrgent, 'teamsDarkV2'); -const AlertTeamsHighContrast = getThemeStoryVariant(Alert, 'teamsHighContrast'); +const AlertExampleUrgentTeamsHighContrast = getThemeStoryVariant(AlertExampleUrgent, 'teamsHighContrast'); -export { AlertTeams, AlertTeamsDark, AlertTeamsHighContrast, AlertExampleUrgent }; +export { + AlertExampleUrgent, + AlertExampleUrgentTeams, + AlertExampleUrgentTeamsDark, + AlertExampleUrgentTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx index 5455b17e8f205e..5a0f823724d2b8 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx @@ -14,10 +14,18 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const AttachmentTeams = getThemeStoryVariant(Attachment, 'teamsV2'); +const AttachmentActionExampleShorthandTeams = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsV2'); -const AttachmentTeamsDark = getThemeStoryVariant(Attachment, 'teamsDarkV2'); +const AttachmentActionExampleShorthandTeamsDark = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsDarkV2'); -const AttachmentTeamsHighContrast = getThemeStoryVariant(Attachment, 'teamsHighContrast'); +const AttachmentActionExampleShorthandTeamsHighContrast = getThemeStoryVariant( + AttachmentActionExampleShorthand, + 'teamsHighContrast', +); -export { AttachmentTeams, AttachmentTeamsDark, AttachmentTeamsHighContrast, AttachmentActionExampleShorthand }; +export { + AttachmentActionExampleShorthand, + AttachmentActionExampleShorthandTeams, + AttachmentActionExampleShorthandTeamsDark, + AttachmentActionExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx index b1aca7e882951f..9d841e55cd7f54 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx @@ -14,10 +14,21 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const AttachmentTeams = getThemeStoryVariant(Attachment, 'teamsV2'); +const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant(AttachmentActionableExampleShorthand, 'teamsV2'); -const AttachmentTeamsDark = getThemeStoryVariant(Attachment, 'teamsDarkV2'); +const AttachmentActionableExampleShorthandTeamsDark = getThemeStoryVariant( + AttachmentActionableExampleShorthand, + 'teamsDarkV2', +); -const AttachmentTeamsHighContrast = getThemeStoryVariant(Attachment, 'teamsHighContrast'); +const AttachmentActionableExampleShorthandTeamsHighContrast = getThemeStoryVariant( + AttachmentActionableExampleShorthand, + 'teamsHighContrast', +); -export { AttachmentTeams, AttachmentTeamsDark, AttachmentTeamsHighContrast, AttachmentActionableExampleShorthand }; +export { + AttachmentActionableExampleShorthand, + AttachmentActionableExampleShorthandTeams, + AttachmentActionableExampleShorthandTeamsDark, + AttachmentActionableExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx index 0c9676cd1f0005..ee8ff1a0f9a451 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx @@ -14,10 +14,10 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonExampleTeams = getThemeStoryVariant(ButtonExample, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonExampleTeamsDark = getThemeStoryVariant(ButtonExample, 'teamsDarkV2'); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonExampleTeamsHighContrast = getThemeStoryVariant(ButtonExample, 'teamsHighContrast'); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExample }; +export { ButtonExample, ButtonExampleTeams, ButtonExampleTeamsDark, ButtonExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx index 1143245c848c38..d7fd7aec1d9ded 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx @@ -14,10 +14,18 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonExampleContentAndIconTeams = getThemeStoryVariant(ButtonExampleContentAndIcon, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonExampleContentAndIconTeamsDark = getThemeStoryVariant(ButtonExampleContentAndIcon, 'teamsDarkV2'); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonExampleContentAndIconTeamsHighContrast = getThemeStoryVariant( + ButtonExampleContentAndIcon, + 'teamsHighContrast', +); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleContentAndIcon }; +export { + ButtonExampleContentAndIcon, + ButtonExampleContentAndIconTeams, + ButtonExampleContentAndIconTeamsDark, + ButtonExampleContentAndIconTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx index 6ea44bdf16952b..e07f90ae65ba31 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx @@ -14,10 +14,15 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonExampleDisabledTeams = getThemeStoryVariant(ButtonExampleDisabled, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonExampleDisabledTeamsDark = getThemeStoryVariant(ButtonExampleDisabled, 'teamsDarkV2'); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonExampleDisabledTeamsHighContrast = getThemeStoryVariant(ButtonExampleDisabled, 'teamsHighContrast'); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleDisabled }; +export { + ButtonExampleDisabled, + ButtonExampleDisabledTeams, + ButtonExampleDisabledTeamsDark, + ButtonExampleDisabledTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx index 00aa2e38fb319f..e71d20912d341a 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx @@ -14,10 +14,18 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonExampleTextShorthandTeams = getThemeStoryVariant(ButtonExampleTextShorthand, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonExampleTextShorthandTeamsDark = getThemeStoryVariant(ButtonExampleTextShorthand, 'teamsDarkV2'); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonExampleTextShorthandTeamsHighContrast = getThemeStoryVariant( + ButtonExampleTextShorthand, + 'teamsHighContrast', +); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleTextShorthand }; +export { + ButtonExampleTextShorthand, + ButtonExampleTextShorthandTeams, + ButtonExampleTextShorthandTeamsDark, + ButtonExampleTextShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx index 333ff76d6f69a3..94e898c5589dc3 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx @@ -14,10 +14,15 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonExampleWithTooltipTeams = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonExampleWithTooltipTeamsDark = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsDarkV2'); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonExampleWithTooltipTeamsHighContrast = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsHighContrast'); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonExampleWithTooltip }; +export { + ButtonExampleWithTooltip, + ButtonExampleWithTooltipTeams, + ButtonExampleWithTooltipTeamsDark, + ButtonExampleWithTooltipTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx index d0b41ae08184a9..900200861cce8a 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx @@ -14,10 +14,21 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonGroupCircularExampleShorthandTeams = getThemeStoryVariant(ButtonGroupCircularExampleShorthand, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonGroupCircularExampleShorthandTeamsDark = getThemeStoryVariant( + ButtonGroupCircularExampleShorthand, + 'teamsDarkV2', +); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonGroupCircularExampleShorthandTeamsHighContrast = getThemeStoryVariant( + ButtonGroupCircularExampleShorthand, + 'teamsHighContrast', +); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonGroupCircularExampleShorthand }; +export { + ButtonGroupCircularExampleShorthand, + ButtonGroupCircularExampleShorthandTeams, + ButtonGroupCircularExampleShorthandTeamsDark, + ButtonGroupCircularExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx index 99fa4566d904ed..ebfb938902b8d6 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx @@ -14,10 +14,18 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const ButtonTeams = getThemeStoryVariant(Button, 'teamsV2'); +const ButtonGroupExampleShorthandTeams = getThemeStoryVariant(ButtonGroupExampleShorthand, 'teamsV2'); -const ButtonTeamsDark = getThemeStoryVariant(Button, 'teamsDarkV2'); +const ButtonGroupExampleShorthandTeamsDark = getThemeStoryVariant(ButtonGroupExampleShorthand, 'teamsDarkV2'); -const ButtonTeamsHighContrast = getThemeStoryVariant(Button, 'teamsHighContrast'); +const ButtonGroupExampleShorthandTeamsHighContrast = getThemeStoryVariant( + ButtonGroupExampleShorthand, + 'teamsHighContrast', +); -export { ButtonTeams, ButtonTeamsDark, ButtonTeamsHighContrast, ButtonGroupExampleShorthand }; +export { + ButtonGroupExampleShorthand, + ButtonGroupExampleShorthandTeams, + ButtonGroupExampleShorthandTeamsDark, + ButtonGroupExampleShorthandTeamsHighContrast, +}; From 090fda9ac6b79117311d8d1e05e046b0d639803b Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:53:11 -0800 Subject: [PATCH 10/65] Add Card stories --- .../docs/src/vr-tests/Card/Card.stories.tsx | 44 +++++++++++++++++++ .../Card/CardExampleFocusable.stories.tsx | 31 +++++++++++++ .../Card/CardExampleWithPreview.stories.tsx | 23 ++++++++++ 3 files changed, 98 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx new file mode 100644 index 00000000000000..4ea560a01c5d57 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Card/Card.stories.tsx @@ -0,0 +1,44 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Card } from '@fluentui/react-northstar'; +import CardExampleBody from '../../examples/components/Card/Slots/CardExampleBody'; +import CardExampleFooter from '../../examples/components/Card/Slots/CardExampleFooter'; +import CardExampleHeader from '../../examples/components/Card/Slots/CardExampleHeader'; +import CardExamplePreview from '../../examples/components/Card/Slots/CardExamplePreview'; +import CardExampleDisabled from '../../examples/components/Card/States/CardExampleDisabled'; +import CardExampleSelected from '../../examples/components/Card/States/CardExampleSelected'; +import CardExampleContextMenu from '../../examples/components/Card/Usage/CardExampleContextMenu'; +import CardExampleExpandable from '../../examples/components/Card/Usage/CardExampleExpandable'; +import CardExampleFocusableGrid from '../../examples/components/Card/Usage/CardExampleFocusableChildrenGrid'; +import CardExampleSelectableGrid from '../../examples/components/Card/Usage/CardExampleSelectableGrid'; +import CardExampleSimple from '../../examples/components/Card/Usage/CardExampleSimple'; +import CardExampleCentered from '../../examples/components/Card/Variations/CardExampleCentered'; +import CardExampleElevated from '../../examples/components/Card/Variations/CardExampleElevated'; +import ImageExampleFluent from '../../examples/components/Card/Variations/CardExampleFluid'; +import CardExampleHorizontal from '../../examples/components/Card/Variations/CardExampleHorizontal'; +import CardExampleInverted from '../../examples/components/Card/Variations/CardExampleInverted'; +import CardExampleQuiet from '../../examples/components/Card/Variations/CardExampleQuiet'; +import CardExampleSize from '../../examples/components/Card/Variations/CardExampleSize'; + +export default { component: Card, title: 'Card' } as ComponentMeta; + +export { + CardExampleBody, + CardExampleFooter, + CardExampleHeader, + CardExamplePreview, + CardExampleDisabled, + CardExampleSelected, + CardExampleContextMenu, + CardExampleExpandable, + CardExampleFocusableGrid, + CardExampleSelectableGrid, + CardExampleSimple, + CardExampleCentered, + CardExampleElevated, + ImageExampleFluent, + CardExampleHorizontal, + CardExampleInverted, + CardExampleQuiet, + CardExampleSize, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx new file mode 100644 index 00000000000000..184192f20bdd19 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Card } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import CardExampleFocusable from '../../examples/components/Card/Usage/CardExampleFocusable'; + +export default { + component: Card, + title: 'Card', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +const CardExampleFocusableTeams = getThemeStoryVariant(CardExampleFocusable, 'teamsV2'); + +const CardExampleFocusableTeamsDark = getThemeStoryVariant(CardExampleFocusable, 'teamsDarkV2'); + +const CardExampleFocusableTeamsHighContrast = getThemeStoryVariant(CardExampleFocusable, 'teamsHighContrast'); + +export { + CardExampleFocusable, + CardExampleFocusableTeams, + CardExampleFocusableTeamsDark, + CardExampleFocusableTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx new file mode 100644 index 00000000000000..e8847b42d4ee62 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Card/CardExampleWithPreview.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Card } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import CardExampleWithPreview from '../../examples/components/Card/Usage/CardExampleWithPreview'; + +export default { + component: Card, + title: 'Card', +} as ComponentMeta; + +const CardExampleWithPreviewTeams = getThemeStoryVariant(CardExampleWithPreview, 'teamsV2'); + +const CardExampleWithPreviewTeamsDark = getThemeStoryVariant(CardExampleWithPreview, 'teamsDarkV2'); + +const CardExampleWithPreviewTeamsHighContrast = getThemeStoryVariant(CardExampleWithPreview, 'teamsHighContrast'); + +export { + CardExampleWithPreview, + CardExampleWithPreviewTeams, + CardExampleWithPreviewTeamsDark, + CardExampleWithPreviewTeamsHighContrast, +}; From a786bfe7d6e805e9e989eaad32464571b942050f Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:55:26 -0800 Subject: [PATCH 11/65] Add Carousel stories --- .../docs/src/vr-tests/Carousel/Carousel.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx b/packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx new file mode 100644 index 00000000000000..da38b1e68ab468 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Carousel/Carousel.stories.tsx @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Carousel } from '@fluentui/react-northstar'; +import CarouselExample from '../../examples/components/Carousel/Types/CarouselExample.shorthand'; +import CarouselSlideAnimationExample from '../../examples/components/Carousel/Variations/CarouselSlideAnimationExample.shorthand'; + +export default { component: Carousel, title: 'Carousel' } as ComponentMeta; + +export { CarouselExample, CarouselSlideAnimationExample }; From 24dd13ae0a3e5f1bebc1459bec7e3b03aea39f91 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:57:29 -0800 Subject: [PATCH 12/65] Add Chat stories --- .../docs/src/vr-tests/Chat/Chat.stories.tsx | 28 +++++++++++++++++++ .../src/vr-tests/Chat/ChatExample.stories.tsx | 18 ++++++++++++ .../Chat/ChatExampleCompact.stories.tsx | 23 +++++++++++++++ .../Chat/ChatExampleDetails.stories.tsx | 23 +++++++++++++++ ...atExampleInScrollableShorthand.stories.tsx | 11 ++++++++ .../Chat/ChatMessageExampleBadge.stories.tsx | 23 +++++++++++++++ .../MessageReactionsWithPopup.stories.tsx | 23 +++++++++++++++ 7 files changed, 149 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx new file mode 100644 index 00000000000000..f677372623de5c --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/Chat.stories.tsx @@ -0,0 +1,28 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import ChatExampleHeader from '../../examples/components/Chat/Content/ChatExampleHeader.shorthand'; +import ChatExampleHeaderOverride from '../../examples/components/Chat/Content/ChatExampleHeaderOverride.shorthand'; +import ChatExampleReactionGroup from '../../examples/components/Chat/Content/ChatExampleReactionGroup.shorthand'; +import ChatExampleReadStatus from '../../examples/components/Chat/Content/ChatExampleReadStatus.shorthand'; +import ChatPlayground from '../../examples/components/Chat/Playground'; +import ChatExampleRtl from '../../examples/components/Chat/Rtl/ChatExample.rtl'; +import ChatExampleComfyRefresh from '../../examples/components/Chat/Types/ChatExampleComfyRefresh'; +import ChatExampleCompact from '../../examples/components/Chat/Types/ChatExampleCompact'; +import ChatExampleContentPosition from '../../examples/components/Chat/Types/ChatExampleContentPosition.shorthand'; +import ChatMessageExampleStyled from '../../examples/components/Chat/Types/ChatMessageExampleStyled.shorthand'; + +export default { component: Chat, title: 'Chat' } as ComponentMeta; + +export { + ChatExampleHeader, + ChatExampleHeaderOverride, + ChatExampleReactionGroup, + ChatExampleReadStatus, + ChatPlayground, + ChatExampleRtl, + ChatExampleComfyRefresh, + ChatExampleCompact, + ChatExampleContentPosition, + ChatMessageExampleStyled, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx new file mode 100644 index 00000000000000..c2ba51a6292921 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExample.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ChatExample from '../../examples/components/Chat/Types/ChatExample.shorthand'; + +export default { + component: Chat, + title: 'Chat', +} as ComponentMeta; + +const ChatExampleTeams = getThemeStoryVariant(ChatExample, 'teamsV2'); + +const ChatExampleTeamsDark = getThemeStoryVariant(ChatExample, 'teamsDarkV2'); + +const ChatExampleTeamsHighContrast = getThemeStoryVariant(ChatExample, 'teamsHighContrast'); + +export { ChatExample, ChatExampleTeams, ChatExampleTeamsDark, ChatExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx new file mode 100644 index 00000000000000..766ad72775fe16 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleCompact.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ChatExampleCompact from '../../examples/components/Chat/Types/ChatExampleCompact.shorthand'; + +export default { + component: Chat, + title: 'Chat', +} as ComponentMeta; + +const ChatExampleCompactTeams = getThemeStoryVariant(ChatExampleCompact, 'teamsV2'); + +const ChatExampleCompactTeamsDark = getThemeStoryVariant(ChatExampleCompact, 'teamsDarkV2'); + +const ChatExampleCompactTeamsHighContrast = getThemeStoryVariant(ChatExampleCompact, 'teamsHighContrast'); + +export { + ChatExampleCompact, + ChatExampleCompactTeams, + ChatExampleCompactTeamsDark, + ChatExampleCompactTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx new file mode 100644 index 00000000000000..574a51b06e0a1a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleDetails.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ChatExampleDetails from '../../examples/components/Chat/Types/ChatExampleDetails.shorthand'; + +export default { + component: Chat, + title: 'Chat', +} as ComponentMeta; + +const ChatExampleDetailsTeams = getThemeStoryVariant(ChatExampleDetails, 'teamsV2'); + +const ChatExampleDetailsTeamsDark = getThemeStoryVariant(ChatExampleDetails, 'teamsDarkV2'); + +const ChatExampleDetailsTeamsHighContrast = getThemeStoryVariant(ChatExampleDetails, 'teamsHighContrast'); + +export { + ChatExampleDetails, + ChatExampleDetailsTeams, + ChatExampleDetailsTeamsDark, + ChatExampleDetailsTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx new file mode 100644 index 00000000000000..bff8e724772048 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatExampleInScrollableShorthand.stories.tsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import ChatExampleInScrollableShorthand from '../../examples/components/Chat/Usage/ChatExampleInScrollable.shorthand'; + +export default { + component: Chat, + title: 'Chat', +} as ComponentMeta; + +export { ChatExampleInScrollableShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx new file mode 100644 index 00000000000000..045ed696f6be83 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/ChatMessageExampleBadge.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ChatMessageExampleBadge from '../../examples/components/Chat/Types/ChatMessageExampleBadge.shorthand'; + +export default { + component: Chat, + title: 'Chat', +} as ComponentMeta; + +const ChatMessageExampleBadgeTeams = getThemeStoryVariant(ChatMessageExampleBadge, 'teamsV2'); + +const ChatMessageExampleBadgeTeamsDark = getThemeStoryVariant(ChatMessageExampleBadge, 'teamsDarkV2'); + +const ChatMessageExampleBadgeTeamsHighContrast = getThemeStoryVariant(ChatMessageExampleBadge, 'teamsHighContrast'); + +export { + ChatMessageExampleBadge, + ChatMessageExampleBadgeTeams, + ChatMessageExampleBadgeTeamsDark, + ChatMessageExampleBadgeTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx b/packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx new file mode 100644 index 00000000000000..159eab757981dc --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Chat/MessageReactionsWithPopup.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Chat } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import MessageReactionsWithPopup from '../../examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand'; + +export default { + component: Chat, + title: 'Chat', +} as ComponentMeta; + +const MessageReactionsWithPopupTeams = getThemeStoryVariant(MessageReactionsWithPopup, 'teamsV2'); + +const MessageReactionsWithPopupTeamsDark = getThemeStoryVariant(MessageReactionsWithPopup, 'teamsDarkV2'); + +const MessageReactionsWithPopupTeamsHighContrast = getThemeStoryVariant(MessageReactionsWithPopup, 'teamsHighContrast'); + +export { + MessageReactionsWithPopup, + MessageReactionsWithPopupTeams, + MessageReactionsWithPopupTeamsDark, + MessageReactionsWithPopupTeamsHighContrast, +}; From a55176f0c6a0f3d81d426c1d17ed0096b91ad87c Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 03:59:37 -0800 Subject: [PATCH 13/65] add Checkbox stories --- .../vr-tests/Checkbox/Checkbox.stories.tsx | 18 +++++++++++ .../Checkbox/CheckboxExample.stories.tsx | 16 ++++++++++ .../CheckboxExampleCheckedMixed.stories.tsx | 31 +++++++++++++++++++ .../CheckboxExampleToggle.stories.tsx | 16 ++++++++++ .../vr-tests/Checkbox/commonScreenerSteps.ts | 13 ++++++++ 5 files changed, 94 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx new file mode 100644 index 00000000000000..460c9c1f37ace3 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Checkbox } from '@fluentui/react-northstar'; +import CheckboxExampleRtl from '../../examples/components/Checkbox/Rtl/CheckboxExample.rtl'; +import CheckboxExampleLabel from '../../examples/components/Checkbox/Slots/CheckboxExampleLabel.shorthand'; +import CheckboxExampleChecked from '../../examples/components/Checkbox/States/CheckboxExampleChecked.shorthand'; +import CheckboxExampleDisabled from '../../examples/components/Checkbox/States/CheckboxExampleDisabled.shorthand'; +import CheckboxExampleLabelFlexColumn from '../../examples/components/Checkbox/Visual/CheckboxExampleLabelFlexColumn.shorthand'; + +export default { component: Checkbox, title: 'Checkbox' } as ComponentMeta; + +export { + CheckboxExampleRtl, + CheckboxExampleLabel, + CheckboxExampleChecked, + CheckboxExampleDisabled, + CheckboxExampleLabelFlexColumn, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx new file mode 100644 index 00000000000000..0e6ee49832097e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Checkbox } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import CheckboxExample from '../../examples/components/Checkbox/Types/CheckboxExample.shorthand'; + +export default { + component: Checkbox, + title: 'Checkbox', + decorators: [story => {story()}], +} as ComponentMeta; + +export { CheckboxExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx new file mode 100644 index 00000000000000..c28973817138c8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Checkbox } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import CheckboxExampleCheckedMixed from '../../examples/components/Checkbox/States/CheckboxExampleCheckedMixed'; + +export default { + component: Checkbox, + title: 'Checkbox', + decorators: [story => {story()}], +} as ComponentMeta; + +const CheckboxExampleCheckedMixedTeams = getThemeStoryVariant(CheckboxExampleCheckedMixed, 'teamsV2'); + +const CheckboxExampleCheckedMixedTeamsDark = getThemeStoryVariant(CheckboxExampleCheckedMixed, 'teamsDarkV2'); + +const CheckboxExampleCheckedMixedTeamsHighContrast = getThemeStoryVariant( + CheckboxExampleCheckedMixed, + 'teamsHighContrast', +); + +export { + CheckboxExampleCheckedMixed, + CheckboxExampleCheckedMixedTeams, + CheckboxExampleCheckedMixedTeamsDark, + CheckboxExampleCheckedMixedTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx new file mode 100644 index 00000000000000..94f4762ebc0bf5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Checkbox } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import CheckboxExampleToggle from '../../examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand'; + +export default { + component: Checkbox, + title: 'Checkbox', + decorators: [story => {story()}], +} as ComponentMeta; + +export { CheckboxExampleToggle }; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts new file mode 100644 index 00000000000000..c717834619f550 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts @@ -0,0 +1,13 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Steps } from 'screener-storybook/src/screener'; +import { checkboxClassName } from '@fluentui/react-northstar'; +import { keys } from '../utilities'; + +const screenerSteps = new Steps() + .click(`.${checkboxClassName}`) + .snapshot('Checks checkbox') + .keys('body', keys.tab) + .snapshot('Focuses checkbox') + .end(); + +export default screenerSteps; From b649e1adbb0595cfd1c311cba13a4ba24cf6a465 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 04:14:30 -0800 Subject: [PATCH 14/65] Add DatePicker stories --- .../Datepicker/Datepicker.stories.tsx | 26 ++++++++++ .../DatepickerCellExample.stories.tsx | 43 +++++++++++++++++ .../DatepickerExampleClearable.stories.tsx | 47 +++++++++++++++++++ ...ckerExampleLocalizationStrings.stories.tsx | 39 +++++++++++++++ .../DatepickerExampleMinMaxDate.stories.tsx | 46 ++++++++++++++++++ .../DatepickerExampleNoInput.stories.tsx | 40 ++++++++++++++++ .../DatepickerExampleRequired.stories.tsx | 42 +++++++++++++++++ ...tepickerExampleRestrictedDates.stories.tsx | 36 ++++++++++++++ ...xampleStandaloneCalendarButton.stories.tsx | 42 +++++++++++++++++ .../DatepickerExampleToday.stories.tsx | 45 ++++++++++++++++++ .../DatepickerExampleWeek.stories.tsx | 43 +++++++++++++++++ .../DatepickerFormatExample.stories.tsx | 41 ++++++++++++++++ .../DatepickerHeaderCellExample.stories.tsx | 43 +++++++++++++++++ .../docs/src/vr-tests/Datepicker/utils.ts | 13 +++++ 14 files changed, 546 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx new file mode 100644 index 00000000000000..99b8e6e76e549e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/Datepicker.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker } from '@fluentui/react-northstar'; +import DatepickerHeaderExample from '../../examples/components/Datepicker/Slots/DatepickerHeaderExample.shorthand'; +import DatepickerExampleDisabled from '../../examples/components/Datepicker/States/DatepickerExampleDisabled.shorthand'; +import DatepickerExampleSelectedDate from '../../examples/components/Datepicker/States/DatepickerExampleSelectedDate.shorthand'; +import DatepickerExample from '../../examples/components/Datepicker/Types/DatepickerExample.shorthand'; +import DatepickerExampleOpen from '../../examples/components/Datepicker/Types/DatepickerExampleOpen.shorthand'; +import DatepickerFirstWeekDayExample from '../../examples/components/Datepicker/Usage/DatepickerFirstWeekDayExample.shorthand'; +import DatepickerNoInputPlaceholderExample from '../../examples/components/Datepicker/Usage/DatepickerNoInputPlaceholderExample.shorthand'; +import DatepickerParseExample from '../../examples/components/Datepicker/Usage/DatepickerParseExample.shorthand'; +import DatepickerExampleStandaloneCalendarInput from '../../examples/components/Datepicker/Variations/DatepickerExampleStandaloneCalendarInput.shorthand'; + +export default { component: Datepicker, title: 'Datepicker' } as ComponentMeta; + +export { + DatepickerHeaderExample, + DatepickerExampleDisabled, + DatepickerExampleSelectedDate, + DatepickerExample, + DatepickerExampleOpen, + DatepickerFirstWeekDayExample, + DatepickerNoInputPlaceholderExample, + DatepickerParseExample, + DatepickerExampleStandaloneCalendarInput, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx new file mode 100644 index 00000000000000..c4758d286e522d --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, inputClassName } from '@fluentui/react-northstar'; +import { datepickerCalendarCellSelector } from './utils'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerCellExample from '../../examples/components/Datepicker/Slots/DatepickerCellExample.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerCellExampleTeams = getThemeStoryVariant(DatepickerCellExample, 'teamsV2'); + +const DatepickerCellExampleTeamsDark = getThemeStoryVariant(DatepickerCellExample, 'teamsDarkV2'); + +const DatepickerCellExampleTeamsHighContrast = getThemeStoryVariant(DatepickerCellExample, 'teamsHighContrast'); + +export { + DatepickerCellExample, + DatepickerCellExampleTeams, + DatepickerCellExampleTeamsDark, + DatepickerCellExampleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx new file mode 100644 index 00000000000000..e50f0d1ccbc936 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, inputClassName } from '@fluentui/react-northstar'; +import { datepickerCalendarCellSelector } from './utils'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleClearable from '../../examples/components/Datepicker/Slots/DatepickerExampleClearable.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleClearableTeams = getThemeStoryVariant(DatepickerExampleClearable, 'teamsV2'); + +const DatepickerExampleClearableTeamsDark = getThemeStoryVariant(DatepickerExampleClearable, 'teamsDarkV2'); + +const DatepickerExampleClearableTeamsHighContrast = getThemeStoryVariant( + DatepickerExampleClearable, + 'teamsHighContrast', +); + +export { + DatepickerExampleClearable, + DatepickerExampleClearableTeams, + DatepickerExampleClearableTeamsDark, + DatepickerExampleClearableTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx new file mode 100644 index 00000000000000..dbc7e2a7cc5c5c --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleLocalizationStrings from '../../examples/components/Datepicker/Types/DatepickerExampleLocalizationStrings.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleLocalizationStringsTeams = getThemeStoryVariant(DatepickerExampleLocalizationStrings, 'teamsV2'); + +const DatepickerExampleLocalizationStringsTeamsDark = getThemeStoryVariant( + DatepickerExampleLocalizationStrings, + 'teamsDarkV2', +); + +const DatepickerExampleLocalizationStringsTeamsHighContrast = getThemeStoryVariant( + DatepickerExampleLocalizationStrings, + 'teamsHighContrast', +); + +export { + DatepickerExampleLocalizationStrings, + DatepickerExampleLocalizationStringsTeams, + DatepickerExampleLocalizationStringsTeamsDark, + DatepickerExampleLocalizationStringsTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx new file mode 100644 index 00000000000000..5d1d8f27b554dc --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName, datepickerCalendarHeaderActionClassName } from '@fluentui/react-northstar'; +import { datepickerCalendarCellSelector } from './utils'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleMinMaxDate from '../../examples/components/Datepicker/Types/DatepickerExampleMinMaxDate.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleMinMaxDateTeams = getThemeStoryVariant(DatepickerExampleMinMaxDate, 'teamsV2'); + +const DatepickerExampleMinMaxDateTeamsDark = getThemeStoryVariant(DatepickerExampleMinMaxDate, 'teamsDarkV2'); + +const DatepickerExampleMinMaxDateTeamsHighContrast = getThemeStoryVariant( + DatepickerExampleMinMaxDate, + 'teamsHighContrast', +); + +export { + DatepickerExampleMinMaxDate, + DatepickerExampleMinMaxDateTeams, + DatepickerExampleMinMaxDateTeamsDark, + DatepickerExampleMinMaxDateTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx new file mode 100644 index 00000000000000..033d65a52a2393 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName, inputClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleNoInput from '../../examples/components/Datepicker/Types/DatepickerExampleNoInput.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleNoInputTeams = getThemeStoryVariant(DatepickerExampleNoInput, 'teamsV2'); + +const DatepickerExampleNoInputTeamsDark = getThemeStoryVariant(DatepickerExampleNoInput, 'teamsDarkV2'); + +const DatepickerExampleNoInputTeamsHighContrast = getThemeStoryVariant(DatepickerExampleNoInput, 'teamsHighContrast'); + +export { + DatepickerExampleNoInput, + DatepickerExampleNoInputTeams, + DatepickerExampleNoInputTeamsDark, + DatepickerExampleNoInputTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx new file mode 100644 index 00000000000000..a93a6f0e4fafa6 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; +import { datepickerCalendarCellSelector } from './utils'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleRequired from '../../examples/components/Datepicker/States/DatepickerExampleRequired.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleRequiredTeams = getThemeStoryVariant(DatepickerExampleRequired, 'teamsV2'); + +const DatepickerExampleRequiredTeamsDark = getThemeStoryVariant(DatepickerExampleRequired, 'teamsDarkV2'); + +const DatepickerExampleRequiredTeamsHighContrast = getThemeStoryVariant(DatepickerExampleRequired, 'teamsHighContrast'); + +export { + DatepickerExampleRequired, + DatepickerExampleRequiredTeams, + DatepickerExampleRequiredTeamsDark, + DatepickerExampleRequiredTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx new file mode 100644 index 00000000000000..68268574ed597b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleRestrictedDates from '../../examples/components/Datepicker/Types/DatepickerExampleRestrictedDates.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleRestrictedDatesTeams = getThemeStoryVariant(DatepickerExampleRestrictedDates, 'teamsV2'); + +const DatepickerExampleRestrictedDatesTeamsDark = getThemeStoryVariant(DatepickerExampleRestrictedDates, 'teamsDarkV2'); + +const DatepickerExampleRestrictedDatesTeamsHighContrast = getThemeStoryVariant( + DatepickerExampleRestrictedDates, + 'teamsHighContrast', +); + +export { + DatepickerExampleRestrictedDates, + DatepickerExampleRestrictedDatesTeams, + DatepickerExampleRestrictedDatesTeamsDark, + DatepickerExampleRestrictedDatesTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx new file mode 100644 index 00000000000000..19ae437ee69cb3 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleStandaloneCalendarButton from '../../examples/components/Datepicker/Variations/DatepickerExampleStandaloneCalendarButton.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleStandaloneCalendarButtonTeams = getThemeStoryVariant( + DatepickerExampleStandaloneCalendarButton, + 'teamsV2', +); + +const DatepickerExampleStandaloneCalendarButtonTeamsDark = getThemeStoryVariant( + DatepickerExampleStandaloneCalendarButton, + 'teamsDarkV2', +); + +const DatepickerExampleStandaloneCalendarButtonTeamsHighContrast = getThemeStoryVariant( + DatepickerExampleStandaloneCalendarButton, + 'teamsHighContrast', +); + +export { + DatepickerExampleStandaloneCalendarButton, + DatepickerExampleStandaloneCalendarButtonTeams, + DatepickerExampleStandaloneCalendarButtonTeamsDark, + DatepickerExampleStandaloneCalendarButtonTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx new file mode 100644 index 00000000000000..851973bfff0cf8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; +import { datepickerCalendarCellSelector } from './utils'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleToday from '../../examples/components/Datepicker/States/DatepickerExampleToday.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleTodayTeams = getThemeStoryVariant(DatepickerExampleToday, 'teamsV2'); + +const DatepickerExampleTodayTeamsDark = getThemeStoryVariant(DatepickerExampleToday, 'teamsDarkV2'); + +const DatepickerExampleTodayTeamsHighContrast = getThemeStoryVariant(DatepickerExampleToday, 'teamsHighContrast'); + +export { + DatepickerExampleToday, + DatepickerExampleTodayTeams, + DatepickerExampleTodayTeamsDark, + DatepickerExampleTodayTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx new file mode 100644 index 00000000000000..bccd2f3ec58d39 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, buttonClassName, datepickerCalendarCellClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerExampleWeek from '../../examples/components/Datepicker/Types/DatepickerExampleWeek.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerExampleWeekTeams = getThemeStoryVariant(DatepickerExampleWeek, 'teamsV2'); + +const DatepickerExampleWeekTeamsDark = getThemeStoryVariant(DatepickerExampleWeek, 'teamsDarkV2'); + +const DatepickerExampleWeekTeamsHighContrast = getThemeStoryVariant(DatepickerExampleWeek, 'teamsHighContrast'); + +export { + DatepickerExampleWeek, + DatepickerExampleWeekTeams, + DatepickerExampleWeekTeamsDark, + DatepickerExampleWeekTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx new file mode 100644 index 00000000000000..a151c7c6023304 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, inputClassName } from '@fluentui/react-northstar'; +import { datepickerCalendarCellSelector } from './utils'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerFormatExample from '../../examples/components/Datepicker/Usage/DatepickerFormatExample.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerFormatExampleTeams = getThemeStoryVariant(DatepickerFormatExample, 'teamsV2'); + +const DatepickerFormatExampleTeamsDark = getThemeStoryVariant(DatepickerFormatExample, 'teamsDarkV2'); + +const DatepickerFormatExampleTeamsHighContrast = getThemeStoryVariant(DatepickerFormatExample, 'teamsHighContrast'); + +export { + DatepickerFormatExample, + DatepickerFormatExampleTeams, + DatepickerFormatExampleTeamsDark, + DatepickerFormatExampleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx new file mode 100644 index 00000000000000..c284691c00bc84 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Datepicker, datepickerCalendarHeaderCellClassName, inputClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DatepickerHeaderCellExample from '../../examples/components/Datepicker/Slots/DatepickerHeaderCellExample.shorthand'; + +export default { + component: Datepicker, + title: 'Datepicker', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DatepickerHeaderCellExampleTeams = getThemeStoryVariant(DatepickerHeaderCellExample, 'teamsV2'); + +const DatepickerHeaderCellExampleTeamsDark = getThemeStoryVariant(DatepickerHeaderCellExample, 'teamsDarkV2'); + +const DatepickerHeaderCellExampleTeamsHighContrast = getThemeStoryVariant( + DatepickerHeaderCellExample, + 'teamsHighContrast', +); + +export { + DatepickerHeaderCellExample, + DatepickerHeaderCellExampleTeams, + DatepickerHeaderCellExampleTeamsDark, + DatepickerHeaderCellExampleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts b/packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts new file mode 100644 index 00000000000000..381fe6724a49a7 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/utils.ts @@ -0,0 +1,13 @@ +import { + datepickerCalendarCellClassName, + datepickerCalendarCellButtonClassName, + datepickerCalendarGridRowClassName, +} from '@fluentui/react-northstar'; + +export const datepickerCalendarCellSelector = index => { + const row = Math.floor((index - 1) / 7); + const col = index - row * 7; + return `.${datepickerCalendarGridRowClassName}:nth-child(${row}) + >.${datepickerCalendarCellClassName}:nth-child(${col}) + >.${datepickerCalendarCellButtonClassName}`; +}; From 31609e334815df35772b03469422563cf0d8467b Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 04:19:51 -0800 Subject: [PATCH 15/65] add Dialog stories --- .../src/vr-tests/Dialog/Dialog.stories.tsx | 9 ++++++ .../Dialog/DialogExampleBackdrop.stories.tsx | 28 +++++++++++++++++++ .../Dialog/DialogExampleContent.stories.tsx | 28 +++++++++++++++++++ .../Dialog/DialogExampleFooter.stories.tsx | 16 +++++++++++ .../Dialog/DialogExampleFullWidth.stories.tsx | 16 +++++++++++ .../DialogExampleHeaderAction.stories.tsx | 28 +++++++++++++++++++ .../Dialog/DialogExampleRtl.stories.tsx | 16 +++++++++++ .../Dialog/DialogExampleScroll.stories.tsx | 28 +++++++++++++++++++ .../DialogExampleZoomContent.stories.tsx | 28 +++++++++++++++++++ .../vr-tests/Dialog/commonScreenerSteps.ts | 9 ++++++ 10 files changed, 206 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx new file mode 100644 index 00000000000000..d29b9e78a7d9bc --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/Dialog.stories.tsx @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import DialogExample from '../../examples/components/Dialog/Types/DialogExample.shorthand'; +import DialogExampleCallbacks from '../../examples/components/Dialog/Usage/DialogExampleCallbacks.shorthand'; + +export default { component: Dialog, title: 'Dialog' } as ComponentMeta; + +export { DialogExample, DialogExampleCallbacks }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx new file mode 100644 index 00000000000000..ec16c9182319d1 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import DialogExampleBackdrop from '../../examples/components/Dialog/Variations/DialogExampleBackdrop.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +const DialogExampleBackdropTeams = getThemeStoryVariant(DialogExampleBackdrop, 'teamsV2'); + +const DialogExampleBackdropTeamsDark = getThemeStoryVariant(DialogExampleBackdrop, 'teamsDarkV2'); + +const DialogExampleBackdropTeamsHighContrast = getThemeStoryVariant(DialogExampleBackdrop, 'teamsHighContrast'); + +export { + DialogExampleBackdrop, + DialogExampleBackdropTeams, + DialogExampleBackdropTeamsDark, + DialogExampleBackdropTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx new file mode 100644 index 00000000000000..a45ddcc5b5d561 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import DialogExampleContent from '../../examples/components/Dialog/Content/DialogExampleContent.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +const DialogExampleContentTeams = getThemeStoryVariant(DialogExampleContent, 'teamsV2'); + +const DialogExampleContentTeamsDark = getThemeStoryVariant(DialogExampleContent, 'teamsDarkV2'); + +const DialogExampleContentTeamsHighContrast = getThemeStoryVariant(DialogExampleContent, 'teamsHighContrast'); + +export { + DialogExampleContent, + DialogExampleContentTeams, + DialogExampleContentTeamsDark, + DialogExampleContentTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx new file mode 100644 index 00000000000000..d4605b7b592cdd --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import DialogExampleFooter from '../../examples/components/Dialog/Content/DialogExampleFooter.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +export { DialogExampleFooter }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx new file mode 100644 index 00000000000000..8d8293dbffa9b3 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import DialogExampleFullWidth from '../../examples/components/Dialog/Content/DialogExampleFullWidth.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +export { DialogExampleFullWidth }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx new file mode 100644 index 00000000000000..59d317ddcd8556 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import DialogExampleHeaderAction from '../../examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +const DialogExampleHeaderActionTeams = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsV2'); + +const DialogExampleHeaderActionTeamsDark = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsDarkV2'); + +const DialogExampleHeaderActionTeamsHighContrast = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsHighContrast'); + +export { + DialogExampleHeaderAction, + DialogExampleHeaderActionTeams, + DialogExampleHeaderActionTeamsDark, + DialogExampleHeaderActionTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx new file mode 100644 index 00000000000000..75b38ba755d45d --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import DialogExampleRtl from '../../examples/components/Dialog/Rtl/DialogExample.rtl'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +export { DialogExampleRtl }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx new file mode 100644 index 00000000000000..46e2c0707b8b93 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import DialogExampleScroll from '../../examples/components/Dialog/Variations/DialogExampleScroll.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +const DialogExampleScrollTeams = getThemeStoryVariant(DialogExampleScroll, 'teamsV2'); + +const DialogExampleScrollTeamsDark = getThemeStoryVariant(DialogExampleScroll, 'teamsDarkV2'); + +const DialogExampleScrollTeamsHighContrast = getThemeStoryVariant(DialogExampleScroll, 'teamsHighContrast'); + +export { + DialogExampleScroll, + DialogExampleScrollTeams, + DialogExampleScrollTeamsDark, + DialogExampleScrollTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx new file mode 100644 index 00000000000000..be389bb24dd6cc --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dialog } from '@fluentui/react-northstar'; +import screenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import DialogExampleZoomContent from '../../examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand'; + +export default { + component: Dialog, + title: 'Dialog', + decorators: [story => {story()}], +} as ComponentMeta; + +const DialogExampleZoomContentTeams = getThemeStoryVariant(DialogExampleZoomContent, 'teamsV2'); + +const DialogExampleZoomContentTeamsDark = getThemeStoryVariant(DialogExampleZoomContent, 'teamsDarkV2'); + +const DialogExampleZoomContentTeamsHighContrast = getThemeStoryVariant(DialogExampleZoomContent, 'teamsHighContrast'); + +export { + DialogExampleZoomContent, + DialogExampleZoomContentTeams, + DialogExampleZoomContentTeamsDark, + DialogExampleZoomContentTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts new file mode 100644 index 00000000000000..ea61e8af551cbd --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Steps } from 'screener-storybook/src/screener'; +import { buttonClassName } from '@fluentui/react-northstar'; + +const button = `.${buttonClassName}`; + +const screenerSteps = new Steps().click(button).snapshot('Clicks the trigger button').end(); + +export default screenerSteps; From fc099b8ee38187a7c11ac6fa6d20d195ae42d3ae Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 04:23:17 -0800 Subject: [PATCH 16/65] add Divider stories --- .../src/vr-tests/Divider/Divider.stories.tsx | 11 ++++++++ .../Divider/DividerExampleColor.stories.tsx | 23 ++++++++++++++++ .../Divider/DividerExampleContent.stories.tsx | 23 ++++++++++++++++ .../DividerExampleFittedShorthand.stories.tsx | 26 +++++++++++++++++++ ...viderExampleImportantShorthand.stories.tsx | 26 +++++++++++++++++++ .../Divider/DividerExampleRtl.stories.tsx | 18 +++++++++++++ .../DividerExampleRtlAndLtr.stories.tsx | 23 ++++++++++++++++ .../DividerExampleShorthand.stories.tsx | 23 ++++++++++++++++ .../Divider/DividerExampleSize.stories.tsx | 23 ++++++++++++++++ 9 files changed, 196 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx new file mode 100644 index 00000000000000..93247c8aabb70c --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/Divider.stories.tsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import DividerExampleContent from '../../examples/components/Divider/Types/DividerExampleContent'; +import DividerExampleImportant from '../../examples/components/Divider/Variations/DividerExampleImportant'; +import DividerExampleSize from '../../examples/components/Divider/Variations/DividerExampleSize'; +import DividerVerticalExampleShorthand from '../../examples/components/Divider/Variations/DividerExampleVertical.shorthand'; + +export default { component: Divider, title: 'Divider' } as ComponentMeta; + +export { DividerExampleContent, DividerExampleImportant, DividerExampleSize, DividerVerticalExampleShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx new file mode 100644 index 00000000000000..a739f43d23ef52 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleColor.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleColor from '../../examples/components/Divider/Variations/DividerExampleColor.shorthand'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleColorTeams = getThemeStoryVariant(DividerExampleColor, 'teamsV2'); + +const DividerExampleColorTeamsDark = getThemeStoryVariant(DividerExampleColor, 'teamsDarkV2'); + +const DividerExampleColorTeamsHighContrast = getThemeStoryVariant(DividerExampleColor, 'teamsHighContrast'); + +export { + DividerExampleColor, + DividerExampleColorTeams, + DividerExampleColorTeamsDark, + DividerExampleColorTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx new file mode 100644 index 00000000000000..6a4b9741ffebb4 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleContent.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleContent from '../../examples/components/Divider/Types/DividerExampleContent.shorthand'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleContentTeams = getThemeStoryVariant(DividerExampleContent, 'teamsV2'); + +const DividerExampleContentTeamsDark = getThemeStoryVariant(DividerExampleContent, 'teamsDarkV2'); + +const DividerExampleContentTeamsHighContrast = getThemeStoryVariant(DividerExampleContent, 'teamsHighContrast'); + +export { + DividerExampleContent, + DividerExampleContentTeams, + DividerExampleContentTeamsDark, + DividerExampleContentTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx new file mode 100644 index 00000000000000..85a58f86f0e882 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleFittedShorthand.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleFittedShorthand from '../../examples/components/Divider/Variations/DividerExampleFitted.shorthand'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleFittedShorthandTeams = getThemeStoryVariant(DividerExampleFittedShorthand, 'teamsV2'); + +const DividerExampleFittedShorthandTeamsDark = getThemeStoryVariant(DividerExampleFittedShorthand, 'teamsDarkV2'); + +const DividerExampleFittedShorthandTeamsHighContrast = getThemeStoryVariant( + DividerExampleFittedShorthand, + 'teamsHighContrast', +); + +export { + DividerExampleFittedShorthand, + DividerExampleFittedShorthandTeams, + DividerExampleFittedShorthandTeamsDark, + DividerExampleFittedShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx new file mode 100644 index 00000000000000..d0010f19ec7158 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleImportantShorthand.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleImportantShorthand from '../../examples/components/Divider/Variations/DividerExampleImportant.shorthand'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleImportantShorthandTeams = getThemeStoryVariant(DividerExampleImportantShorthand, 'teamsV2'); + +const DividerExampleImportantShorthandTeamsDark = getThemeStoryVariant(DividerExampleImportantShorthand, 'teamsDarkV2'); + +const DividerExampleImportantShorthandTeamsHighContrast = getThemeStoryVariant( + DividerExampleImportantShorthand, + 'teamsHighContrast', +); + +export { + DividerExampleImportantShorthand, + DividerExampleImportantShorthandTeams, + DividerExampleImportantShorthandTeamsDark, + DividerExampleImportantShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx new file mode 100644 index 00000000000000..fcc611f6801289 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtl.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleRtl from '../../examples/components/Divider/Rtl/DividerExample.rtl'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleRtlTeams = getThemeStoryVariant(DividerExampleRtl, 'teamsV2'); + +const DividerExampleRtlTeamsDark = getThemeStoryVariant(DividerExampleRtl, 'teamsDarkV2'); + +const DividerExampleRtlTeamsHighContrast = getThemeStoryVariant(DividerExampleRtl, 'teamsHighContrast'); + +export { DividerExampleRtl, DividerExampleRtlTeams, DividerExampleRtlTeamsDark, DividerExampleRtlTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx new file mode 100644 index 00000000000000..cef84f33c8c3d4 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleRtlAndLtr.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleRtlAndLtr from '../../examples/components/Divider/Visuals/DividerExampleRtlAndLtr'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleRtlAndLtrTeams = getThemeStoryVariant(DividerExampleRtlAndLtr, 'teamsV2'); + +const DividerExampleRtlAndLtrTeamsDark = getThemeStoryVariant(DividerExampleRtlAndLtr, 'teamsDarkV2'); + +const DividerExampleRtlAndLtrTeamsHighContrast = getThemeStoryVariant(DividerExampleRtlAndLtr, 'teamsHighContrast'); + +export { + DividerExampleRtlAndLtr, + DividerExampleRtlAndLtrTeams, + DividerExampleRtlAndLtrTeamsDark, + DividerExampleRtlAndLtrTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..97d14293dfa73d --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleShorthand.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleShorthand from '../../examples/components/Divider/Types/DividerExample.shorthand'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleShorthandTeams = getThemeStoryVariant(DividerExampleShorthand, 'teamsV2'); + +const DividerExampleShorthandTeamsDark = getThemeStoryVariant(DividerExampleShorthand, 'teamsDarkV2'); + +const DividerExampleShorthandTeamsHighContrast = getThemeStoryVariant(DividerExampleShorthand, 'teamsHighContrast'); + +export { + DividerExampleShorthand, + DividerExampleShorthandTeams, + DividerExampleShorthandTeamsDark, + DividerExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx new file mode 100644 index 00000000000000..2c4d6be0f536ea --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Divider } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DividerExampleSize from '../../examples/components/Divider/Variations/DividerExampleSize.shorthand'; + +export default { + component: Divider, + title: 'Divider', +} as ComponentMeta; + +const DividerExampleSizeTeams = getThemeStoryVariant(DividerExampleSize, 'teamsV2'); + +const DividerExampleSizeTeamsDark = getThemeStoryVariant(DividerExampleSize, 'teamsDarkV2'); + +const DividerExampleSizeTeamsHighContrast = getThemeStoryVariant(DividerExampleSize, 'teamsHighContrast'); + +export { + DividerExampleSize, + DividerExampleSizeTeams, + DividerExampleSizeTeamsDark, + DividerExampleSizeTeamsHighContrast, +}; From 108a1e6ff1ba39341dc7b1840a65e125f1d799bc Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:20:19 -0800 Subject: [PATCH 17/65] Add Embed, Flex, Form, Grid, Header and Image stories --- .../docs/src/vr-tests/Embed/Embed.stories.tsx | 9 +++++++ .../docs/src/vr-tests/Flex/Flex.stories.tsx | 20 ++++++++++++++ .../docs/src/vr-tests/Form/Form.stories.tsx | 22 ++++++++++++++++ .../docs/src/vr-tests/Grid/Grid.stories.tsx | 8 ++++++ .../src/vr-tests/Header/Header.stories.tsx | 26 +++++++++++++++++++ .../docs/src/vr-tests/Image/Image.stories.tsx | 12 +++++++++ 6 files changed, 97 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx b/packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx new file mode 100644 index 00000000000000..ecb979a3c6bdac --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Embed/Embed.stories.tsx @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Embed } from '@fluentui/react-northstar'; +import EmbedExampleVideo from '../../examples/components/Embed/Slots/EmbedExampleVideo.shorthand'; +import EmbedExampleYouTube from '../../examples/components/Embed/Usage/EmbedExampleYouTube.shorthand'; + +export default { component: Embed, title: 'Embed' } as ComponentMeta; + +export { EmbedExampleVideo, EmbedExampleYouTube }; diff --git a/packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx b/packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx new file mode 100644 index 00000000000000..93c956286ba52c --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Flex/Flex.stories.tsx @@ -0,0 +1,20 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Flex } from '@fluentui/react-northstar'; +import FlexExampleMediaCard from '../../examples/components/Flex/Rtl/FlexExample.rtl'; +import FlexExampleColumns from '../../examples/components/Flex/Types/FlexExampleColumns.shorthand'; +import FlexExampleInput from '../../examples/components/Flex/Types/FlexExampleInput.shorthand'; +import FlexExampleItemsAlignment from '../../examples/components/Flex/Types/FlexExampleItemsAlignment.shorthand'; +import FlexExampleMixedAlignment from '../../examples/components/Flex/Types/FlexExampleMixedAlignment.shorthand'; +import FlexExampleNavMenu from '../../examples/components/Flex/Types/FlexExampleNavMenu.shorthand'; + +export default { component: Flex, title: 'Flex' } as ComponentMeta; + +export { + FlexExampleMediaCard, + FlexExampleColumns, + FlexExampleInput, + FlexExampleItemsAlignment, + FlexExampleMixedAlignment, + FlexExampleNavMenu, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx b/packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx new file mode 100644 index 00000000000000..5c2a329bb911de --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Form/Form.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Form } from '@fluentui/react-northstar'; +import FormExampleRtl from '../../examples/components/Form/Rtl/FormExample.rtl'; +import FormExample from '../../examples/components/Form/Types/FormExampleBase'; +import FormExampleCheckbox from '../../examples/components/Form/Usage/FormExampleCheckbox'; +import FormExampleDatepicker from '../../examples/components/Form/Usage/FormExampleDatepicker'; +import FormExampleErrorAndSatisfactory from '../../examples/components/Form/Usage/FormExampleErrorAndSuccessful'; +import FormExampleSlider from '../../examples/components/Form/Usage/FormExampleSlider'; +import FormExampleComponents from '../../examples/components/Form/Variants/FormExampleComponents'; + +export default { component: Form, title: 'Form' } as ComponentMeta; + +export { + FormExampleRtl, + FormExample, + FormExampleCheckbox, + FormExampleDatepicker, + FormExampleErrorAndSatisfactory, + FormExampleSlider, + FormExampleComponents, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx b/packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx new file mode 100644 index 00000000000000..aec55dbd243976 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Grid/Grid.stories.tsx @@ -0,0 +1,8 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Grid } from '@fluentui/react-northstar'; +import GridExample from '../../examples/components/Grid/Rtl/GridExample.rtl'; + +export default { component: Grid, title: 'Grid' } as ComponentMeta; + +export { GridExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx b/packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx new file mode 100644 index 00000000000000..3f93ba878bfaff --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Header/Header.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Header } from '@fluentui/react-northstar'; +import HeaderExampleRtl from '../../examples/components/Header/Rtl/HeaderExample.rtl'; +import HeadersExampleShorthand from '../../examples/components/Header/Types/HeaderExample.shorthand'; +import HeaderExample from '../../examples/components/Header/Types/HeaderExample'; +import HeaderExampleAlign from '../../examples/components/Header/Variations/HeaderExample.shorthand'; +import HeaderExampleColor from '../../examples/components/Header/Variations/HeaderExampleColor.shorthand'; +import HeaderExampleDescriptionShorthand from '../../examples/components/Header/Variations/HeaderExampleDescription.shorthand'; +import HeaderExampleDescription from '../../examples/components/Header/Variations/HeaderExampleDescription'; +import HeaderExampleDescriptionCustomizationShorthand from '../../examples/components/Header/Variations/HeaderExampleDescriptionCustomization.shorthand'; +import HeaderExampleDescriptionCustomization from '../../examples/components/Header/Variations/HeaderExampleDescriptionCustomization'; + +export default { component: Header, title: 'Header' } as ComponentMeta; + +export { + HeaderExampleRtl, + HeadersExampleShorthand, + HeaderExample, + HeaderExampleAlign, + HeaderExampleColor, + HeaderExampleDescriptionShorthand, + HeaderExampleDescription, + HeaderExampleDescriptionCustomizationShorthand, + HeaderExampleDescriptionCustomization, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx b/packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx new file mode 100644 index 00000000000000..457790498a5e9f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Image/Image.stories.tsx @@ -0,0 +1,12 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Image } from '@fluentui/react-northstar'; +import ImageExampleRtl from '../../examples/components/Image/Rtl/ImageExample.rtl'; +import ImageExample from '../../examples/components/Image/Types/ImageExample.shorthand'; +import ImageExampleAvatar from '../../examples/components/Image/Types/ImageExampleAvatar.shorthand'; +import ImageExampleCircular from '../../examples/components/Image/Variations/ImageExampleCircular'; +import ImageExampleFluent from '../../examples/components/Image/Variations/ImageExampleFluid'; + +export default { component: Image, title: 'Image' } as ComponentMeta; + +export { ImageExampleRtl, ImageExample, ImageExampleAvatar, ImageExampleCircular, ImageExampleFluent }; From 8c9a50733b2a657aa8c4b16579bf9d70e662e86a Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:35:58 -0800 Subject: [PATCH 18/65] Add Dropdown stories --- .../vr-tests/Dropdown/Dropdown.stories.tsx | 28 +++++++++ .../DropdownClearableExample.stories.tsx | 29 +++++++++ ...DropdownCustomClearableExample.stories.tsx | 26 ++++++++ .../Dropdown/DropdownExample.stories.tsx | 62 +++++++++++++++++++ .../DropdownExampleDisabled.stories.tsx | 41 ++++++++++++ .../DropdownExampleHeaderMessage.stories.tsx | 25 ++++++++ .../DropdownExampleLoading.stories.tsx | 43 +++++++++++++ .../DropdownExampleMultiple.stories.tsx | 42 +++++++++++++ .../DropdownExamplePosition.stories.tsx | 23 +++++++ .../Dropdown/DropdownExampleRtl.stories.tsx | 33 ++++++++++ .../DropdownExampleSearchMultiple.stories.tsx | 54 ++++++++++++++++ 11 files changed, 406 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx new file mode 100644 index 00000000000000..3542342de8fbc2 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx @@ -0,0 +1,28 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown } from '@fluentui/react-northstar'; +import DropdownExampleFreeform from '../../examples/components/Dropdown/Types/DropdownExampleFreeform.shorthand'; +import DropdownExampleInline from '../../examples/components/Dropdown/Types/DropdownExampleInline.shorthand'; +import DropdownExampleInverted from '../../examples/components/Dropdown/Types/DropdownExampleInverted.shorthand'; +import DropdownExampleSearch from '../../examples/components/Dropdown/Types/DropdownExampleSearch.shorthand'; +import DropdownExampleControlled from '../../examples/components/Dropdown/Usage/DropdownExampleControlled.shorthand'; +import DropdownExampleRender from '../../examples/components/Dropdown/Usage/DropdownExampleRender.shorthand'; +import DropdownExamplePosition from '../../examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand'; +import DropdownExampleSearchMultipleFluid from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFluid.shorthand'; +import DropdownExampleSearchMultipleFrenchLanguage from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFrenchLanguage.shorthand'; +import DropdownExampleSearchMultipleImageAndContent from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleImageAndContent.shorthand'; + +export default { component: Dropdown, title: 'Dropdown' } as ComponentMeta; + +export { + DropdownExampleFreeform, + DropdownExampleInline, + DropdownExampleInverted, + DropdownExampleSearch, + DropdownExampleControlled, + DropdownExampleRender, + DropdownExamplePosition, + DropdownExampleSearchMultipleFluid, + DropdownExampleSearchMultipleFrenchLanguage, + DropdownExampleSearchMultipleImageAndContent, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx new file mode 100644 index 00000000000000..c8b4d004627222 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import DropdownClearableExample from '../../examples/components/Dropdown/Types/DropdownExampleClearable.shorthand'; + +const selectors = { + clearIndicator: `.${dropdownSlotClassNames.clearIndicator}`, + triggerButton: `.${dropdownSlotClassNames.triggerButton}`, + item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`, +}; + +const steps = new Steps() + .click(selectors.triggerButton) + .click(selectors.item(3)) + .snapshot('Selects an item') + .click(selectors.clearIndicator) + .snapshot('Clears the value') + .end(); + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [story => {story()}], +} as ComponentMeta; + +export { DropdownClearableExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx new file mode 100644 index 00000000000000..9ec49db2e86705 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownCustomClearableExample.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DropdownCustomClearableExample from '../../examples/components/Dropdown/Visual/DropdownExampleCustomClearable.shorthand'; + +export default { + component: Dropdown, + title: 'Dropdown', +} as ComponentMeta; + +const DropdownCustomClearableExampleTeams = getThemeStoryVariant(DropdownCustomClearableExample, 'teamsV2'); + +const DropdownCustomClearableExampleTeamsDark = getThemeStoryVariant(DropdownCustomClearableExample, 'teamsDarkV2'); + +const DropdownCustomClearableExampleTeamsHighContrast = getThemeStoryVariant( + DropdownCustomClearableExample, + 'teamsHighContrast', +); + +export { + DropdownCustomClearableExample, + DropdownCustomClearableExampleTeams, + DropdownCustomClearableExampleTeamsDark, + DropdownCustomClearableExampleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx new file mode 100644 index 00000000000000..c93a37713d9fc5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import DropdownExample from '../../examples/components/Dropdown/Types/DropdownExample.shorthand'; + +const selectors = { + triggerButton: `.${dropdownSlotClassNames.triggerButton}`, + item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + {story()} + ), + story => ( + + {story()} + + ), + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DropdownExampleTeams = getThemeStoryVariant(DropdownExample, 'teamsV2'); + +const DropdownExampleTeamsDark = getThemeStoryVariant(DropdownExample, 'teamsDarkV2'); + +const DropdownExampleTeamsHighContrast = getThemeStoryVariant(DropdownExample, 'teamsHighContrast'); + +export { DropdownExample, DropdownExampleTeams, DropdownExampleTeamsDark, DropdownExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx new file mode 100644 index 00000000000000..57ce026447c207 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import DropdownExampleDisabled from '../../examples/components/Dropdown/State/DropdownExampleDisabled.shorthand'; + +const selectors = { + triggerButton: `.${dropdownSlotClassNames.triggerButton}`, + input: `.${dropdownSearchInputSlotClassNames.input}`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + + {story()} + + ), + story => ( + {story()} + ), + ], +} as ComponentMeta; + +const DropdownExampleDisabledTeams = getThemeStoryVariant(DropdownExampleDisabled, 'teamsV2'); + +const DropdownExampleDisabledTeamsDark = getThemeStoryVariant(DropdownExampleDisabled, 'teamsDarkV2'); + +const DropdownExampleDisabledTeamsHighContrast = getThemeStoryVariant(DropdownExampleDisabled, 'teamsHighContrast'); + +export { + DropdownExampleDisabled, + DropdownExampleDisabledTeams, + DropdownExampleDisabledTeamsDark, + DropdownExampleDisabledTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx new file mode 100644 index 00000000000000..07f4e46a3c6f42 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import DropdownExampleHeaderMessage from '../../examples/components/Dropdown/Slots/DropdownExampleHeaderMessage.shorthand'; + +const selectors = { + triggerButton: `.${dropdownSlotClassNames.triggerButton}`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { DropdownExampleHeaderMessage }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx new file mode 100644 index 00000000000000..dc883f80c9a989 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import DropdownExampleLoading from '../../examples/components/Dropdown/State/DropdownExampleLoading.shorthand'; + +const selectors = { + triggerButton: `.${dropdownSlotClassNames.toggleIndicator}`, + input: `.${dropdownSearchInputSlotClassNames.input}`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + + {story()} + + ), + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DropdownExampleLoadingTeams = getThemeStoryVariant(DropdownExampleLoading, 'teamsV2'); + +const DropdownExampleLoadingTeamsDark = getThemeStoryVariant(DropdownExampleLoading, 'teamsDarkV2'); + +const DropdownExampleLoadingTeamsHighContrast = getThemeStoryVariant(DropdownExampleLoading, 'teamsHighContrast'); + +export { + DropdownExampleLoading, + DropdownExampleLoadingTeams, + DropdownExampleLoadingTeamsDark, + DropdownExampleLoadingTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx new file mode 100644 index 00000000000000..8d92f6ad1d6216 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames, dropdownSelectedItemSlotClassNames } from '@fluentui/react-northstar'; +import DropdownExampleMultiple from '../../examples/components/Dropdown/Types/DropdownExampleMultiple.shorthand'; + +const selectors = { + triggerButton: `.${dropdownSlotClassNames.triggerButton}`, + item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`, + removeItemIcon: (itemIndex: number) => + `.${dropdownSlotClassNames.selectedItems} span:nth-child(${itemIndex}) .${dropdownSelectedItemSlotClassNames.icon}`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { DropdownExampleMultiple }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx new file mode 100644 index 00000000000000..3327327d502867 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import DropdownExamplePosition from '../../examples/components/Dropdown/Variations/DropdownExampleOffset.shorthand'; + +const selectors = { + trigger: `.${dropdownSlotClassNames.triggerButton}`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +export { DropdownExamplePosition }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx new file mode 100644 index 00000000000000..6fff2461f4d6a7 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import DropdownExampleRtl from '../../examples/components/Dropdown/Rtl/DropdownExample.rtl'; + +const selectors = { + triggerButton: `.${dropdownSlotClassNames.triggerButton}`, + item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { DropdownExampleRtl }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx new file mode 100644 index 00000000000000..9a972c854aa9c8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Dropdown, dropdownSearchInputSlotClassNames, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import DropdownExampleSearchMultiple from '../../examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand'; + +const selectors = { + toggleIndicator: `.${dropdownSlotClassNames.toggleIndicator}`, + input: `.${dropdownSearchInputSlotClassNames.input}`, + item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`, + selectedItem: (itemIndex: number) => `.${dropdownSlotClassNames.selectedItems} span:nth-child(${itemIndex})`, +}; + +export default { + component: Dropdown, + title: 'Dropdown', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const DropdownExampleSearchMultipleTeams = getThemeStoryVariant(DropdownExampleSearchMultiple, 'teamsV2'); + +const DropdownExampleSearchMultipleTeamsDark = getThemeStoryVariant(DropdownExampleSearchMultiple, 'teamsDarkV2'); + +const DropdownExampleSearchMultipleTeamsHighContrast = getThemeStoryVariant( + DropdownExampleSearchMultiple, + 'teamsHighContrast', +); + +export { + DropdownExampleSearchMultiple, + DropdownExampleSearchMultipleTeams, + DropdownExampleSearchMultipleTeamsDark, + DropdownExampleSearchMultipleTeamsHighContrast, +}; From 3c64839afab7d5631fc107c3dd0008f3d0d9d6dd Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:40:12 -0800 Subject: [PATCH 19/65] Add Input stories --- .../docs/src/vr-tests/Input/Input.stories.tsx | 28 +++++++++++++ .../vr-tests/Input/InputExample.stories.tsx | 18 ++++++++ .../Input/InputExampleClearable.stories.tsx | 35 ++++++++++++++++ .../InputExampleLabelShorthand.stories.tsx | 42 +++++++++++++++++++ 4 files changed, 123 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx new file mode 100644 index 00000000000000..aa24a7f51d6c8f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Input/Input.stories.tsx @@ -0,0 +1,28 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Input } from '@fluentui/react-northstar'; +import InputExampleRtl from '../../examples/components/Input/Rtl/InputExample.rtl'; +import InputExampleDisabled from '../../examples/components/Input/State/InputExampleDisabled.shorthand'; +import InputExampleFluid from '../../examples/components/Input/Variations/InputExampleFluid.shorthand'; +import InputExampleIcon from '../../examples/components/Input/Variations/InputExampleIcon.shorthand'; +import InputExampleIconClearableShorthand from '../../examples/components/Input/Variations/InputExampleIconClearable.shorthand'; +import InputExampleIconPosition from '../../examples/components/Input/Variations/InputExampleIconPosition.shorthand'; +import InputExampleInline from '../../examples/components/Input/Variations/InputExampleInline.shorthand'; +import InputExampleInputSlot from '../../examples/components/Input/Variations/InputExampleInputSlot.shorthand'; +import InputExampleTargeting from '../../examples/components/Input/Variations/InputExampleTargeting.shorthand'; +import InputExampleWrapperSlot from '../../examples/components/Input/Variations/InputExampleWrapperSlot.shorthand'; + +export default { component: Input, title: 'Input' } as ComponentMeta; + +export { + InputExampleRtl, + InputExampleDisabled, + InputExampleFluid, + InputExampleIcon, + InputExampleIconClearableShorthand, + InputExampleIconPosition, + InputExampleInline, + InputExampleInputSlot, + InputExampleTargeting, + InputExampleWrapperSlot, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx new file mode 100644 index 00000000000000..641127ce2db3b1 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Input/InputExample.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Input } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import InputExample from '../../examples/components/Input/Types/InputInvertedExample.shorthand'; + +export default { + component: Input, + title: 'Input', +} as ComponentMeta; + +const InputExampleTeams = getThemeStoryVariant(InputExample, 'teamsV2'); + +const InputExampleTeamsDark = getThemeStoryVariant(InputExample, 'teamsDarkV2'); + +const InputExampleTeamsHighContrast = getThemeStoryVariant(InputExample, 'teamsHighContrast'); + +export { InputExample, InputExampleTeams, InputExampleTeamsDark, InputExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx new file mode 100644 index 00000000000000..2d7dd051cf0d29 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Input, inputClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import InputExampleClearable from '../../examples/components/Input/Variations/InputExampleClearable.shorthand'; + +export default { + component: Input, + title: 'Input', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const InputExampleClearableTeams = getThemeStoryVariant(InputExampleClearable, 'teamsV2'); + +const InputExampleClearableTeamsDark = getThemeStoryVariant(InputExampleClearable, 'teamsDarkV2'); + +const InputExampleClearableTeamsHighContrast = getThemeStoryVariant(InputExampleClearable, 'teamsHighContrast'); + +export { + InputExampleClearable, + InputExampleClearableTeams, + InputExampleClearableTeamsDark, + InputExampleClearableTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx new file mode 100644 index 00000000000000..3ce60940108de2 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Input } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import InputExampleLabelShorthand from '../../examples/components/Input/Slots/InputExampleLabel.shorthand'; + +export default { + component: Input, + title: 'Input', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const InputExampleLabelShorthandTeams = getThemeStoryVariant(InputExampleLabelShorthand, 'teamsV2'); + +const InputExampleLabelShorthandTeamsDark = getThemeStoryVariant(InputExampleLabelShorthand, 'teamsDarkV2'); + +const InputExampleLabelShorthandTeamsHighContrast = getThemeStoryVariant( + InputExampleLabelShorthand, + 'teamsHighContrast', +); + +export { + InputExampleLabelShorthand, + InputExampleLabelShorthandTeams, + InputExampleLabelShorthandTeamsDark, + InputExampleLabelShorthandTeamsHighContrast, +}; From d22a9fa8b35064b0d4a284ed17dfd2954ea5979e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:40:26 -0800 Subject: [PATCH 20/65] Add ItemLayout stories --- .../ItemLayout/ItemLayout.stories.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx b/packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx new file mode 100644 index 00000000000000..18567825006961 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/ItemLayout/ItemLayout.stories.tsx @@ -0,0 +1,28 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { ItemLayout } from '@fluentui/react-northstar'; +import ItemLayoutExampleContent from '../../examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand'; +import ItemLayoutExampleContentMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand'; +import ItemLayoutExampleEndMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand'; +import ItemLayoutExampleHeader from '../../examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand'; +import ItemLayoutExampleHeaderContentShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand'; +import ItemLayoutExampleHeaderMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand'; +import ItemLayoutExampleMediaShorthand from '../../examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand'; +import ItemLayoutExampleRtlShorthand from '../../examples/components/ItemLayout/Rtl/ItemLayoutExample.rtl'; +import ItemLayoutExampleShorthand from '../../examples/components/ItemLayout/Types/ItemLayoutExample.shorthand'; +import ItemLayoutExampleSelectionShorthand from '../../examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand'; + +export default { component: ItemLayout, title: 'ItemLayout' } as ComponentMeta; + +export { + ItemLayoutExampleContent, + ItemLayoutExampleContentMediaShorthand, + ItemLayoutExampleEndMediaShorthand, + ItemLayoutExampleHeader, + ItemLayoutExampleHeaderContentShorthand, + ItemLayoutExampleHeaderMediaShorthand, + ItemLayoutExampleMediaShorthand, + ItemLayoutExampleRtlShorthand, + ItemLayoutExampleShorthand, + ItemLayoutExampleSelectionShorthand, +}; From 1f7701117370e5e8497ac111aa1736f4aefadf3a Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:40:56 -0800 Subject: [PATCH 21/65] Add Label and Layout stories --- .../docs/src/vr-tests/Label/Label.stories.tsx | 26 +++++++++++++++++++ .../src/vr-tests/Layout/Layout.stories.tsx | 12 +++++++++ 2 files changed, 38 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx b/packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx new file mode 100644 index 00000000000000..f6561b9a508677 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Label/Label.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Label } from '@fluentui/react-northstar'; +import LabelExampleShorthand from '../../examples/components/Label/Content/LabelExample.shorthand'; +import LabelExample from '../../examples/components/Label/Content/LabelExample'; +import LabelExampleContentCustomizationShorthand from '../../examples/components/Label/Content/LabelExampleContentCustomization.shorthand'; +import LabelExampleIconShorthand from '../../examples/components/Label/Content/LabelExampleIcon.shorthand'; +import LabelExampleIconPositionShorthand from '../../examples/components/Label/Content/LabelExampleIconPosition.shorthand'; +import LabelExampleImageShorthand from '../../examples/components/Label/Content/LabelExampleImage.shorthand'; +import LabelExampleRtl from '../../examples/components/Label/Rtl/LabelExample.rtl'; +import LabelExampleCircularShorthand from '../../examples/components/Label/Variations/LabelExampleCircular.shorthand'; +import LabelExampleColor from '../../examples/components/Label/Variations/LabelExampleColor.shorthand'; + +export default { component: Label, title: 'Label' } as ComponentMeta; + +export { + LabelExampleShorthand, + LabelExample, + LabelExampleContentCustomizationShorthand, + LabelExampleIconShorthand, + LabelExampleIconPositionShorthand, + LabelExampleImageShorthand, + LabelExampleRtl, + LabelExampleCircularShorthand, + LabelExampleColor, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx b/packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx new file mode 100644 index 00000000000000..eb68894e63079a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Layout/Layout.stories.tsx @@ -0,0 +1,12 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Layout } from '@fluentui/react-northstar'; +import LayoutExample from '../../examples/components/Layout/Types/LayoutExample.shorthand'; +import LayoutExampleVertical from '../../examples/components/Layout/Types/LayoutExampleVertical.shorthand'; +import LayoutExampleDisappearing from '../../examples/components/Layout/Variations/LayoutExampleDisappearing.shorthand'; +import LayoutExampleGap from '../../examples/components/Layout/Variations/LayoutExampleGap.shorthand'; +import LayoutExampleReducing from '../../examples/components/Layout/Variations/LayoutExampleReducing.shorthand'; + +export default { component: Layout, title: 'Layout' } as ComponentMeta; + +export { LayoutExample, LayoutExampleVertical, LayoutExampleDisappearing, LayoutExampleGap, LayoutExampleReducing }; From e64c788a027c3430904c8163c2d93b30ffc29bed Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:44:37 -0800 Subject: [PATCH 22/65] Add List stories --- .../docs/src/vr-tests/List/List.stories.tsx | 22 ++++++++ .../List/ListExampleNavigable.stories.tsx | 50 +++++++++++++++++++ .../List/ListExampleSelectable.stories.tsx | 48 ++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/List/List.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/List/List.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/List.stories.tsx new file mode 100644 index 00000000000000..59d1fcc09496c6 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/List/List.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { List } from '@fluentui/react-northstar'; +import ListExample from '../../examples/components/List/Content/ListExampleContent.shorthand'; +import ListExampleMediaShorthand from '../../examples/components/List/Content/ListExampleMedia.shorthand'; +import ListExampleMedia from '../../examples/components/List/Content/ListExampleMedia'; +import ListExampleRtl from '../../examples/components/List/Rtl/ListExample.rtl'; +import ListExampleSelectable from '../../examples/components/List/Types/ListExample.shorthand'; +import ListExampleNavigable from '../../examples/components/List/Types/ListExampleNavigable'; +import SelectableListControlledExample from '../../examples/components/List/Types/ListExampleSelectableControlled.shorthand'; + +export default { component: List, title: 'List' } as ComponentMeta; + +export { + ListExample, + ListExampleMediaShorthand, + ListExampleMedia, + ListExampleRtl, + ListExampleSelectable, + ListExampleNavigable, + SelectableListControlledExample, +}; diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx new file mode 100644 index 00000000000000..6c8f9093bbfbb7 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { List, listItemClassName, listClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import ListExampleNavigable from '../../examples/components/List/Types/ListExampleNavigable.shorthand'; + +const selectors = { + list: `.${listClassName}`, + item: (itemIndex: number) => `.${listClassName} .${listItemClassName}:nth-of-type(${itemIndex})`, +}; + +export default { + component: List, + title: 'List', + decorators: [ + story => ( + + {story()} + + ), + story => {story()}, + ], +} as ComponentMeta; + +const ListExampleNavigableTeams = getThemeStoryVariant(ListExampleNavigable, 'teamsV2'); + +const ListExampleNavigableTeamsDark = getThemeStoryVariant(ListExampleNavigable, 'teamsDarkV2'); + +const ListExampleNavigableTeamsHighContrast = getThemeStoryVariant(ListExampleNavigable, 'teamsHighContrast'); + +export { + ListExampleNavigable, + ListExampleNavigableTeams, + ListExampleNavigableTeamsDark, + ListExampleNavigableTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx new file mode 100644 index 00000000000000..73b9e8a6ad9683 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { List, listItemClassName, listClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import ListExampleSelectable from '../../examples/components/List/Types/ListExampleSelectable.shorthand'; + +const selectors = { + list: `.${listClassName}`, + item: (itemIndex: number) => `.${listClassName} .${listItemClassName}:nth-of-type(${itemIndex})`, +}; + +export default { + component: List, + title: 'List', + decorators: [ + story => ( + + {story()} + + ), + story => {story()}, + ], +} as ComponentMeta; + +const ListExampleSelectableTeams = getThemeStoryVariant(ListExampleSelectable, 'teamsV2'); + +const ListExampleSelectableTeamsDark = getThemeStoryVariant(ListExampleSelectable, 'teamsDarkV2'); + +const ListExampleSelectableTeamsHighContrast = getThemeStoryVariant(ListExampleSelectable, 'teamsHighContrast'); + +export { + ListExampleSelectable, + ListExampleSelectableTeams, + ListExampleSelectableTeamsDark, + ListExampleSelectableTeamsHighContrast, +}; From 63930015335ed15a10cf94757f024d60e40ead40 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 15:51:17 -0800 Subject: [PATCH 23/65] Add Loader stories --- .../src/vr-tests/Loader/Loader.stories.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx b/packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx new file mode 100644 index 00000000000000..8fd2001869c70a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Loader/Loader.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Loader } from '@fluentui/react-northstar'; +import LoaderExampleRtl from '../../examples/components/Loader/Rtl/LoaderExample.rtl'; +import LoaderExample from '../../examples/components/Loader/Types/LoaderExample.shorthand'; +import LoaderExampleLabel from '../../examples/components/Loader/Types/LoaderExampleLabel.shorthand'; +import LoaderExampleDelay from '../../examples/components/Loader/Usage/LoaderExampleDelay'; +import LoaderExampleInline from '../../examples/components/Loader/Variations/LoaderExampleInline'; +import LoaderExampleSecondary from '../../examples/components/Loader/Variations/LoaderExampleSecondary'; +import LoaderExampleSize from '../../examples/components/Loader/Variations/LoaderExampleSize'; + +export default { component: Loader, title: 'Loader' } as ComponentMeta; + +export { + LoaderExampleRtl, + LoaderExample, + LoaderExampleLabel, + LoaderExampleDelay, + LoaderExampleInline, + LoaderExampleSecondary, + LoaderExampleSize, +}; From 361352741de8ca92bac3c2ae160052a997f3286b Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 16:34:58 -0800 Subject: [PATCH 24/65] Add Menu stories --- .../docs/src/vr-tests/Menu/Menu.stories.tsx | 42 ++++++++++++++ .../src/vr-tests/Menu/MenuExample.stories.tsx | 23 ++++++++ .../Menu/MenuExampleIconOnly.stories.tsx | 28 +++++++++ .../Menu/MenuExamplePointing.stories.tsx | 28 +++++++++ ...enuExamplePositioningShorthand.stories.tsx | 30 ++++++++++ ...mplePositioningUpdateShorthand.stories.tsx | 30 ++++++++++ .../MenuExampleToolbarShorthand.stories.tsx | 57 +++++++++++++++++++ .../Menu/MenuExampleUnderlined.stories.tsx | 28 +++++++++ .../Menu/MenuExampleVertical.stories.tsx | 47 +++++++++++++++ .../MenuExampleVerticalPointing.stories.tsx | 16 ++++++ .../Menu/MenuExampleWithIcons.stories.tsx | 16 ++++++ .../Menu/MenuExampleWithSubMenu.stories.tsx | 16 ++++++ .../MenuExampleWithSubMenuHover.stories.tsx | 47 +++++++++++++++ .../Menu/MenuExampleWithTooltip.stories.tsx | 46 +++++++++++++++ .../src/vr-tests/Menu/commonScreenerSteps.ts | 23 ++++++++ 15 files changed, 477 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx new file mode 100644 index 00000000000000..8ab6200b115619 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/Menu.stories.tsx @@ -0,0 +1,42 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import MenuPlayground from '../../examples/components/Menu/Playground'; +import MenuExample from '../../examples/components/Menu/Rtl/MenuExample.rtl'; +import MenuExampleKind from '../../examples/components/Menu/Slots/MenuExampleDivider.shorthand'; +import MenuExampleDividerHorizontal from '../../examples/components/Menu/Slots/MenuExampleDividerHorizontal'; +import MenuExampleIconOnly from '../../examples/components/Menu/Slots/MenuExampleIconOnly'; +import MenuExampleSlot from '../../examples/components/Menu/Slots/MenuExampleSlot'; +import MenuExampleWithIcons from '../../examples/components/Menu/Slots/MenuExampleWithIcons'; +import MenuControlledExampleDisabled from '../../examples/components/Menu/States/MenuControlledExample.shorthand'; +import MenuItemExampleDisabled from '../../examples/components/Menu/States/MenuItemExampleDisabled.shorthand'; +import MenuExamplePointing from '../../examples/components/Menu/Types/MenuExamplePointing'; +import MenuExampleUnderlined from '../../examples/components/Menu/Types/MenuExampleUnderlined'; +import MenuExampleTabShorthand from '../../examples/components/Menu/Usage/MenuExampleTabList.shorthand'; +import MenuWithSubmenuControlledExample from '../../examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand'; +import MenuExampleWithTooltip from '../../examples/components/Menu/Usage/MenuExampleWithTooltip'; +import MenuExampleFluid from '../../examples/components/Menu/Variations/MenuExampleFluid.shorthand'; +import MenuExampleVerticalPointing from '../../examples/components/Menu/Variations/MenuExampleVerticalPointing'; +import MenuExampleVertical from '../../examples/components/Menu/Visual/MenuExampleVertical'; + +export default { component: Menu, title: 'Menu' } as ComponentMeta; + +export { + MenuPlayground, + MenuExample, + MenuExampleKind, + MenuExampleDividerHorizontal, + MenuExampleIconOnly, + MenuExampleSlot, + MenuExampleWithIcons, + MenuControlledExampleDisabled, + MenuItemExampleDisabled, + MenuExamplePointing, + MenuExampleUnderlined, + MenuExampleTabShorthand, + MenuWithSubmenuControlledExample, + MenuExampleWithTooltip, + MenuExampleFluid, + MenuExampleVerticalPointing, + MenuExampleVertical, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx new file mode 100644 index 00000000000000..4ea748fcb7aa6e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import MenuExample from '../../examples/components/Menu/Slots/MenuExampleSlot.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +const MenuExampleTeams = getThemeStoryVariant(MenuExample, 'teamsV2'); + +const MenuExampleTeamsDark = getThemeStoryVariant(MenuExample, 'teamsDarkV2'); + +const MenuExampleTeamsHighContrast = getThemeStoryVariant(MenuExample, 'teamsHighContrast'); + +export { MenuExample, MenuExampleTeams, MenuExampleTeamsDark, MenuExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx new file mode 100644 index 00000000000000..b3d5a9eb855a35 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import MenuExampleIconOnly from '../../examples/components/Menu/Slots/MenuExampleIconOnly.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +const MenuExampleIconOnlyTeams = getThemeStoryVariant(MenuExampleIconOnly, 'teamsV2'); + +const MenuExampleIconOnlyTeamsDark = getThemeStoryVariant(MenuExampleIconOnly, 'teamsDarkV2'); + +const MenuExampleIconOnlyTeamsHighContrast = getThemeStoryVariant(MenuExampleIconOnly, 'teamsHighContrast'); + +export { + MenuExampleIconOnly, + MenuExampleIconOnlyTeams, + MenuExampleIconOnlyTeamsDark, + MenuExampleIconOnlyTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx new file mode 100644 index 00000000000000..65a367a775054b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import MenuExamplePointing from '../../examples/components/Menu/Types/MenuExamplePointing.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +const MenuExamplePointingTeams = getThemeStoryVariant(MenuExamplePointing, 'teamsV2'); + +const MenuExamplePointingTeamsDark = getThemeStoryVariant(MenuExamplePointing, 'teamsDarkV2'); + +const MenuExamplePointingTeamsHighContrast = getThemeStoryVariant(MenuExamplePointing, 'teamsHighContrast'); + +export { + MenuExamplePointing, + MenuExamplePointingTeams, + MenuExamplePointingTeamsDark, + MenuExamplePointingTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx new file mode 100644 index 00000000000000..05fc10f0300fe4 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import MenuExamplePositioningShorthand from '../../examples/components/Menu/Visual/MenuExamplePositioning.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { MenuExamplePositioningShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx new file mode 100644 index 00000000000000..d175bc2d229cb9 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import MenuExamplePositioningUpdateShorthand from '../../examples/components/Menu/Visual/MenuExamplePositioningUpdate.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { MenuExamplePositioningUpdateShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx new file mode 100644 index 00000000000000..f3a9e175391c0d --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu, menuClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import MenuExampleToolbarShorthand from '../../examples/components/Menu/Usage/MenuExampleToolbar.shorthand'; + +const selectors = { + menu: `.${menuClassName}`, + item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`, + lastItem: `.${menuClassName} li:last-child a`, +}; + +export default { + component: Menu, + title: 'Menu', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const MenuExampleToolbarShorthandTeams = getThemeStoryVariant(MenuExampleToolbarShorthand, 'teamsV2'); + +const MenuExampleToolbarShorthandTeamsDark = getThemeStoryVariant(MenuExampleToolbarShorthand, 'teamsDarkV2'); + +const MenuExampleToolbarShorthandTeamsHighContrast = getThemeStoryVariant( + MenuExampleToolbarShorthand, + 'teamsHighContrast', +); + +export { + MenuExampleToolbarShorthand, + MenuExampleToolbarShorthandTeams, + MenuExampleToolbarShorthandTeamsDark, + MenuExampleToolbarShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx new file mode 100644 index 00000000000000..b02159685cfbcc --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import MenuExampleUnderlined from '../../examples/components/Menu/Types/MenuExampleUnderlined.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +const MenuExampleUnderlinedTeams = getThemeStoryVariant(MenuExampleUnderlined, 'teamsV2'); + +const MenuExampleUnderlinedTeamsDark = getThemeStoryVariant(MenuExampleUnderlined, 'teamsDarkV2'); + +const MenuExampleUnderlinedTeamsHighContrast = getThemeStoryVariant(MenuExampleUnderlined, 'teamsHighContrast'); + +export { + MenuExampleUnderlined, + MenuExampleUnderlinedTeams, + MenuExampleUnderlinedTeamsDark, + MenuExampleUnderlinedTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx new file mode 100644 index 00000000000000..2d3af798fca451 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu, menuClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import MenuExampleVertical from '../../examples/components/Menu/Variations/MenuExampleVerticalPrimary.shorthand'; + +const selectors = { + menu: `.${menuClassName}`, + item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`, +}; + +export default { + component: Menu, + title: 'Menu', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const MenuExampleVerticalTeams = getThemeStoryVariant(MenuExampleVertical, 'teamsV2'); + +const MenuExampleVerticalTeamsDark = getThemeStoryVariant(MenuExampleVertical, 'teamsDarkV2'); + +const MenuExampleVerticalTeamsHighContrast = getThemeStoryVariant(MenuExampleVertical, 'teamsHighContrast'); + +export { + MenuExampleVertical, + MenuExampleVerticalTeams, + MenuExampleVerticalTeamsDark, + MenuExampleVerticalTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx new file mode 100644 index 00000000000000..55c992f69cf7ea --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import MenuExampleVerticalPointing from '../../examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +export { MenuExampleVerticalPointing }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx new file mode 100644 index 00000000000000..34a17fcdbba3bb --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import MenuExampleWithIcons from '../../examples/components/Menu/Slots/MenuExampleWithIcons.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +export { MenuExampleWithIcons }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx new file mode 100644 index 00000000000000..f41c0b00d3606e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu } from '@fluentui/react-northstar'; +import getScreenerSteps from './commonScreenerSteps'; +import MenuExampleWithSubMenu from '../../examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand'; + +export default { + component: Menu, + title: 'Menu', + decorators: [story => {story()}], +} as ComponentMeta; + +export { MenuExampleWithSubMenu }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx new file mode 100644 index 00000000000000..42c685686b8441 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu, menuClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import MenuExampleWithSubMenuHover from '../../examples/components/Menu/Usage/MenuExampleWithSubmenuHover.shorthand'; + +const selectors = { + item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`, +}; + +export default { + component: Menu, + title: 'Menu', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const MenuExampleWithSubMenuHoverTeams = getThemeStoryVariant(MenuExampleWithSubMenuHover, 'teamsV2'); + +const MenuExampleWithSubMenuHoverTeamsDark = getThemeStoryVariant(MenuExampleWithSubMenuHover, 'teamsDarkV2'); + +const MenuExampleWithSubMenuHoverTeamsHighContrast = getThemeStoryVariant( + MenuExampleWithSubMenuHover, + 'teamsHighContrast', +); + +export { + MenuExampleWithSubMenuHover, + MenuExampleWithSubMenuHoverTeams, + MenuExampleWithSubMenuHoverTeamsDark, + MenuExampleWithSubMenuHoverTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx new file mode 100644 index 00000000000000..a3b7a65923eb09 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Menu, menuClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import MenuExampleWithTooltip from '../../examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand'; + +const selectors = { + menu: `.${menuClassName}`, + item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`, +}; + +export default { + component: Menu, + title: 'Menu', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const MenuExampleWithTooltipTeams = getThemeStoryVariant(MenuExampleWithTooltip, 'teamsV2'); + +const MenuExampleWithTooltipTeamsDark = getThemeStoryVariant(MenuExampleWithTooltip, 'teamsDarkV2'); + +const MenuExampleWithTooltipTeamsHighContrast = getThemeStoryVariant(MenuExampleWithTooltip, 'teamsHighContrast'); + +export { + MenuExampleWithTooltip, + MenuExampleWithTooltipTeams, + MenuExampleWithTooltipTeamsDark, + MenuExampleWithTooltipTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts new file mode 100644 index 00000000000000..b23b01a6803cac --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Steps } from 'screener-storybook/src/screener'; +import { menuClassName } from '@fluentui/react-northstar'; +import { keys } from '../utilities'; + +export const selectors = { + menu: `.${menuClassName}`, + item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`, +}; + +const getScreenerSteps = ({ vertical = false, startItem = 2, endItem = 3 }) => + new Steps() + .hover(selectors.item(startItem)) + .snapshot('Hovers 2nd item (hover state styles)') + .click(selectors.item(startItem)) + .snapshot('Clicks on 2nd item (active state styles)') + .keys(selectors.item(startItem), vertical ? keys.downArrow : keys.rightArrow) + .snapshot('Navigates to next item (focus state styles)') + .keys(selectors.item(endItem), vertical ? keys.upArrow : keys.leftArrow) + .snapshot('Navigates to previous item (active and focus state styles)') + .end(); + +export default getScreenerSteps; From c3c1a636c01bda40b8e682deea3c0066921498e1 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 16:37:42 -0800 Subject: [PATCH 25/65] Add MenuButton stories --- .../MenuButton/MenuButton.stories.tsx | 10 +++++++++ .../MenuButtonExampleRtl.stories.tsx | 21 +++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx new file mode 100644 index 00000000000000..2236279b250386 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx @@ -0,0 +1,10 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { MenuButton } from '@fluentui/react-northstar'; +import MenuButtonOpenExample from '../../examples/components/MenuButton/State/MenuButtonExampleOpen.shorthand'; +import MenuButtonOnElement from '../../examples/components/MenuButton/Usage/MenuButtonExampleContextMenu.shorthand'; +import MenuButtonExampleOn from '../../examples/components/MenuButton/Usage/MenuButtonExampleOn.shorthand'; + +export default { component: MenuButton, title: 'MenuButton' } as ComponentMeta; + +export { MenuButtonOpenExample, MenuButtonOnElement, MenuButtonExampleOn }; diff --git a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx new file mode 100644 index 00000000000000..d79634649f55b3 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { MenuButton, buttonClassName } from '@fluentui/react-northstar'; +import MenuButtonExampleRtl from '../../examples/components/MenuButton/Rtl/MenuButtonExample.rtl'; + +export default { + component: MenuButton, + title: 'MenuButton', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { MenuButtonExampleRtl }; From 6a6034996db700585b6dd0dbbab26465f3ad9250 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 16:38:25 -0800 Subject: [PATCH 26/65] Add Pill stories --- .../docs/src/vr-tests/Pill/Pill.stories.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx b/packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx new file mode 100644 index 00000000000000..28830e1c8e2ffa --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Pill/Pill.stories.tsx @@ -0,0 +1,28 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Pill } from '@fluentui/react-northstar'; +import PillExampleDisabled from '../../examples/components/Pill/State/PillExampleDisabled'; +import PillExample from '../../examples/components/Pill/Types/PillExample'; +import PillGroupExample from '../../examples/components/Pill/Types/PillsExample'; +import PillActionableExample from '../../examples/components/Pill/Variations/PillExampleActionable'; +import PillAppearanceExample from '../../examples/components/Pill/Variations/PillExampleAppearance'; +import PillIconExample from '../../examples/components/Pill/Variations/PillExampleIcon'; +import PillImageExample from '../../examples/components/Pill/Variations/PillExampleImage'; +import PillRectangularExample from '../../examples/components/Pill/Variations/PillExampleRectangular'; +import PillSelectableExample from '../../examples/components/Pill/Variations/PillExampleSelectable'; +import PillSizesExample from '../../examples/components/Pill/Variations/PillExampleSizes'; + +export default { component: Pill, title: 'Pill' } as ComponentMeta; + +export { + PillExampleDisabled, + PillExample, + PillGroupExample, + PillActionableExample, + PillAppearanceExample, + PillIconExample, + PillImageExample, + PillRectangularExample, + PillSelectableExample, + PillSizesExample, +}; From ea94fc93718a7c22ea0e59e771c958bb010c6838 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 16:48:29 -0800 Subject: [PATCH 27/65] Add Popup stories --- .../PopperExamplePositioning.stories.tsx | 33 ++++++++++++ ...pperExampleVisibilityModifiers.stories.tsx | 32 ++++++++++++ .../docs/src/vr-tests/Popup/Popup.stories.tsx | 44 ++++++++++++++++ .../Popup/PopupControlledExample.stories.tsx | 52 +++++++++++++++++++ .../PopupCustomTargetExample.stories.tsx | 19 +++++++ .../vr-tests/Popup/PopupExample.stories.tsx | 26 ++++++++++ .../Popup/PopupExampleOffset.stories.tsx | 23 ++++++++ .../Popup/PopupExampleRtl.stories.tsx | 19 +++++++ .../Popup/PopupScrollExample.stories.tsx | 46 ++++++++++++++++ 9 files changed, 294 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx new file mode 100644 index 00000000000000..12c49e7b33ff65 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup } from '@fluentui/react-northstar'; +import PopperExamplePositioning from '../../examples/components/Popup/Visual/PopperExamplePositioning'; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { PopperExamplePositioning }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx new file mode 100644 index 00000000000000..d545f84d6c33c5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup } from '@fluentui/react-northstar'; +import PopperExampleVisibilityModifiers from '../../examples/components/Popup/Visual/PopperExampleVisibilityModifiers'; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { PopperExampleVisibilityModifiers }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx new file mode 100644 index 00000000000000..7191d98ca0131c --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx @@ -0,0 +1,44 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup } from '@fluentui/react-northstar'; +import PopupControlledExample from '../../examples/components/Popup/Types/PopupControlledExample'; +import PopupCustomTargetExample from '../../examples/components/Popup/Types/PopupCustomTargetExample'; +import PopupExample from '../../examples/components/Popup/Types/PopupExample'; +import PopupExampleInline from '../../examples/components/Popup/Types/PopupExampleInline.shorthand'; +import PopupExamplePointing from '../../examples/components/Popup/Types/PopupExamplePointing.shorthand'; +import PopupFocusTrapExample from '../../examples/components/Popup/Types/PopupFocusTrapExample.shorthand'; +import PopupExampleAsync from '../../examples/components/Popup/Usage/PopupExampleAsync.shorthand'; +import PopupCloseButtonExample from '../../examples/components/Popup/Usage/PopupExampleCloseButton'; +import PopupContextOnElement from '../../examples/components/Popup/Usage/PopupExampleContextOnElement'; +import PopupExampleNested from '../../examples/components/Popup/Usage/PopupExampleNested.shorthand'; +import PopupExampleOn from '../../examples/components/Popup/Usage/PopupExampleOn.shorthand'; +import PopupExampleOnMultiple from '../../examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand'; +import PopupExampleOnWithFocusTrap from '../../examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand'; +import PopupExampleAutoSize from '../../examples/components/Popup/Variations/PopupExampleAutoSize.shorthand'; +import PopupExamplePosition from '../../examples/components/Popup/Variations/PopupExamplePosition.shorthand'; +import PopupExampleContainerTransformed from '../../examples/components/Popup/Visual/PopupExampleContainerTransformed'; +import PopupExamplePointerMargin from '../../examples/components/Popup/Visual/PopupExamplePointerMargin.shorthand'; +import PopupExamplePointerOffset from '../../examples/components/Popup/Visual/PopupExamplePointerOffset'; + +export default { component: Popup, title: 'Popup' } as ComponentMeta; + +export { + PopupControlledExample, + PopupCustomTargetExample, + PopupExample, + PopupExampleInline, + PopupExamplePointing, + PopupFocusTrapExample, + PopupExampleAsync, + PopupCloseButtonExample, + PopupContextOnElement, + PopupExampleNested, + PopupExampleOn, + PopupExampleOnMultiple, + PopupExampleOnWithFocusTrap, + PopupExampleAutoSize, + PopupExamplePosition, + PopupExampleContainerTransformed, + PopupExamplePointerMargin, + PopupExamplePointerOffset, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx new file mode 100644 index 00000000000000..e929a0693ee7e2 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup, buttonClassName, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import PopupControlledExample from '../../examples/components/Popup/Usage/PopupExampleCloseButton.shorthand'; + +const selectors = { + toggleIndicator: `.${dropdownSlotClassNames.toggleIndicator}`, + item: (itemIndex: number) => `.${dropdownSlotClassNames.itemsList} li:nth-child(${itemIndex})`, + popupTrigger: `.${buttonClassName}`, +}; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const PopupControlledExampleTeams = getThemeStoryVariant(PopupControlledExample, 'teamsV2'); + +const PopupControlledExampleTeamsDark = getThemeStoryVariant(PopupControlledExample, 'teamsDarkV2'); + +const PopupControlledExampleTeamsHighContrast = getThemeStoryVariant(PopupControlledExample, 'teamsHighContrast'); + +export { + PopupControlledExample, + PopupControlledExampleTeams, + PopupControlledExampleTeamsDark, + PopupControlledExampleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx new file mode 100644 index 00000000000000..cc4335e5bec575 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup, buttonClassName } from '@fluentui/react-northstar'; +import PopupCustomTargetExample from '../../examples/components/Popup/Types/PopupCustomTargetExample.shorthand'; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +export { PopupCustomTargetExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx new file mode 100644 index 00000000000000..b0c7b99518607b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup, buttonClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import PopupExample from '../../examples/components/Popup/Types/PopupExample.shorthand'; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +const PopupExampleTeams = getThemeStoryVariant(PopupExample, 'teamsV2'); + +const PopupExampleTeamsDark = getThemeStoryVariant(PopupExample, 'teamsDarkV2'); + +const PopupExampleTeamsHighContrast = getThemeStoryVariant(PopupExample, 'teamsHighContrast'); + +export { PopupExample, PopupExampleTeams, PopupExampleTeamsDark, PopupExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx new file mode 100644 index 00000000000000..8f499cf85cc736 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup, buttonClassName } from '@fluentui/react-northstar'; +import PopupExampleOffset from '../../examples/components/Popup/Variations/PopupExampleOffset.shorthand'; + +const selectors = { + trigger: `.${buttonClassName}`, +}; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +export { PopupExampleOffset }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx new file mode 100644 index 00000000000000..9ac19220857963 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup, buttonClassName } from '@fluentui/react-northstar'; +import PopupExampleRtl from '../../examples/components/Popup/Rtl/PopupExample.rtl'; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +export { PopupExampleRtl }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx new file mode 100644 index 00000000000000..7e0b7baa10e60f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Popup, buttonClassName } from '@fluentui/react-northstar'; +import PopupScrollExample from '../../examples/components/Popup/Visual/PopupScrollExample'; + +const selectors = { + triggerButtonPopupWithTrapFocus: `.${buttonClassName}[title*="Show popup with focus"]`, + triggerButtonControlledPopupWithFocus: `.${buttonClassName}[title*="Show controlled popup"]`, + triggerButtonInlineControlledPopupWithFocus: `.${buttonClassName}[title*="Show controlled popup inline"]`, +}; + +export default { + component: Popup, + title: 'Popup', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { PopupScrollExample }; From 07404587e637af203d43b46cc29a864208bb7b56 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:00:04 -0800 Subject: [PATCH 28/65] Add Portal stories --- .../docs/src/vr-tests/Portal/Portal.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx b/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx new file mode 100644 index 00000000000000..fc30b2b8b3fbc8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx @@ -0,0 +1,10 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Portal } from '@fluentui/react-northstar'; +import PortalExampleOpen from '../../examples/components/Portal/State/PortalExampleOpen'; +import PortalExamplePortal from '../../examples/components/Portal/Types/PortalExample.shorthand'; +import PortalExampleFocusTrapped from '../../examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand'; + +export default { component: Portal, title: 'Portal' } as ComponentMeta; + +export { PortalExampleOpen, PortalExamplePortal, PortalExampleFocusTrapped }; From 15f4dbf414062da2ef274a86f6a1eb56bbc3e5b4 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:01:32 -0800 Subject: [PATCH 29/65] Add Provider stories --- .../vr-tests/Provider/Provider.stories.tsx | 20 +++++++++++++ ...derExampleFocusBorderShorthand.stories.tsx | 30 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx b/packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx new file mode 100644 index 00000000000000..0b58f7722dd771 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Provider/Provider.stories.tsx @@ -0,0 +1,20 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Provider } from '@fluentui/react-northstar'; +import ProviderExampleAnimation from '../../examples/components/Provider/Types/ProviderDisableAnimationsExample.shorthand'; +import ProviderExampleShorthand from '../../examples/components/Provider/Types/ProviderExample.shorthand'; +import ProviderExampleScrollbar from '../../examples/components/Provider/Types/ProviderExampleScrollbar.shorthand'; +import ProviderRtlExample from '../../examples/components/Provider/Types/ProviderRtlExample.shorthand'; +import ProviderExampleTarget from '../../examples/components/Provider/Usage/ProviderExampleTarget'; +import ProviderExampleTargetFrame from '../../examples/components/Provider/Usage/ProviderExampleTargetFrame'; + +export default { component: Provider, title: 'Provider' } as ComponentMeta; + +export { + ProviderExampleAnimation, + ProviderExampleShorthand, + ProviderExampleScrollbar, + ProviderRtlExample, + ProviderExampleTarget, + ProviderExampleTargetFrame, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx new file mode 100644 index 00000000000000..18b8202cf4af01 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Provider, buttonClassName } from '@fluentui/react-northstar'; +import { keys } from '../utilities'; +import ProviderExampleFocusBorderShorthand from '../../examples/components/Provider/Types/ProviderExampleFocusBorder.shorthand'; + +const button = `.${buttonClassName}`; + +export default { + component: Provider, + title: 'Provider', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { ProviderExampleFocusBorderShorthand }; From 445a2e591e3ff2c8c5b0cd105be9e20a2e9b6232 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:03:37 -0800 Subject: [PATCH 30/65] Add RadioGroup stories --- .../RadioGroup/RadioGroup.stories.tsx | 22 ++++++++++++++ .../RadioGroupVerticalExample.stories.tsx | 29 +++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx new file mode 100644 index 00000000000000..30dce23348087f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { RadioGroup } from '@fluentui/react-northstar'; +import RadioGroupItemExample from '../../examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand'; +import RadioGroupItemExampleCheckedShorthand from '../../examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand'; +import RadioGroupItemExampleDisabledShorthand from '../../examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand'; +import RadioGroupExampleRtl from '../../examples/components/RadioGroup/Rtl/RadioGroupExample.rtl'; +import RadioGroupColorPickerExample from '../../examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand'; +import RadioGroupVerticalExample from '../../examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand'; +import RadioGroupCustomExample from '../../examples/components/RadioGroup/Usage/RadioGroupCustomExample.shorthand'; + +export default { component: RadioGroup, title: 'RadioGroup' } as ComponentMeta; + +export { + RadioGroupItemExample, + RadioGroupItemExampleCheckedShorthand, + RadioGroupItemExampleDisabledShorthand, + RadioGroupExampleRtl, + RadioGroupColorPickerExample, + RadioGroupVerticalExample, + RadioGroupCustomExample, +}; diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx new file mode 100644 index 00000000000000..628fac16b19768 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { RadioGroup } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import RadioGroupVerticalExample from '../../examples/components/RadioGroup/Types/RadioGroupExample.shorthand'; + +export default { + component: RadioGroup, + title: 'RadioGroup', + decorators: [ + story => {story()}, + ], +} as ComponentMeta; + +const RadioGroupVerticalExampleTeams = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsV2'); + +const RadioGroupVerticalExampleTeamsDark = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsDarkV2'); + +const RadioGroupVerticalExampleTeamsHighContrast = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsHighContrast'); + +export { + RadioGroupVerticalExample, + RadioGroupVerticalExampleTeams, + RadioGroupVerticalExampleTeamsDark, + RadioGroupVerticalExampleTeamsHighContrast, +}; From 941a34cda911cac321bcadf9c8263bd9e1a3bfc5 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:05:04 -0800 Subject: [PATCH 31/65] Add Reaction, Ref, Segment and Skeleton stories --- .../vr-tests/Reaction/Reaction.stories.tsx | 10 +++++++++ .../docs/src/vr-tests/Ref/Ref.stories.tsx | 9 ++++++++ .../src/vr-tests/Segment/Segment.stories.tsx | 22 +++++++++++++++++++ .../vr-tests/Skeleton/Skeleton.stories.tsx | 18 +++++++++++++++ 4 files changed, 59 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx b/packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx new file mode 100644 index 00000000000000..edd2fa683a5de4 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Reaction/Reaction.stories.tsx @@ -0,0 +1,10 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Reaction } from '@fluentui/react-northstar'; +import ReactionGroupExampleRtl from '../../examples/components/Reaction/Rtl/ReactionExample.rtl'; +import ReactionExample from '../../examples/components/Reaction/Types/ReactionExample.shorthand'; +import ReactionGroupExample from '../../examples/components/Reaction/Types/ReactionGroupExample.shorthand'; + +export default { component: Reaction, title: 'Reaction' } as ComponentMeta; + +export { ReactionGroupExampleRtl, ReactionExample, ReactionGroupExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx b/packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx new file mode 100644 index 00000000000000..e2611a87112783 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Ref } from '@fluentui/react-northstar'; +import RefExample from '../../examples/components/Ref/Types/RefExample.shorthand'; +import RefForwardingExample from '../../examples/components/Ref/Types/RefForwardingExample.shorthand'; + +export default { component: Ref, title: 'Ref' } as ComponentMeta; + +export { RefExample, RefForwardingExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx b/packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx new file mode 100644 index 00000000000000..7c726565a4cd1b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Segment/Segment.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Segment } from '@fluentui/react-northstar'; +import SegmentExampleRtl from '../../examples/components/Segment/Rtl/SegmentExample.rtl'; +import SegmentExampleDisabledShorthand from '../../examples/components/Segment/States/SegmentExampleDisabled.shorthand'; +import SegmentExampleDisabled from '../../examples/components/Segment/States/SegmentExampleDisabled'; +import SegmentExampleShorthand from '../../examples/components/Segment/Types/SegmentExample.shorthand'; +import SegmentExample from '../../examples/components/Segment/Types/SegmentExample'; +import SegmentExampleColor from '../../examples/components/Segment/Variations/SegmentExampleColor.shorthand'; +import SegmentExampleInvertedShorthand from '../../examples/components/Segment/Variations/SegmentExampleInverted.shorthand'; + +export default { component: Segment, title: 'Segment' } as ComponentMeta; + +export { + SegmentExampleRtl, + SegmentExampleDisabledShorthand, + SegmentExampleDisabled, + SegmentExampleShorthand, + SegmentExample, + SegmentExampleColor, + SegmentExampleInvertedShorthand, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx b/packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx new file mode 100644 index 00000000000000..7d742dd4beb91f --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Skeleton/Skeleton.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Skeleton } from '@fluentui/react-northstar'; +import SkeletonExampleCard from '../../examples/components/Skeleton/Usage/SkeletonExampleCard'; +import SkeletonExampleDefault from '../../examples/components/Skeleton/Usage/SkeletonExampleDefault'; +import SkeletonExampleList from '../../examples/components/Skeleton/Usage/SkeletonExampleList'; +import SkeletonExampleAnimations from '../../examples/components/Skeleton/Variations/SkeletonExampleAnimations'; +import SkeletonExampleComponents from '../../examples/components/Skeleton/Variations/SkeletonExampleComponents'; + +export default { component: Skeleton, title: 'Skeleton' } as ComponentMeta; + +export { + SkeletonExampleCard, + SkeletonExampleDefault, + SkeletonExampleList, + SkeletonExampleAnimations, + SkeletonExampleComponents, +}; From 930a791bb83c4140183675aa12d9c53b8a18c4ff Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:28:00 -0800 Subject: [PATCH 32/65] Add Slider stories --- .../src/vr-tests/Slider/Slider.stories.tsx | 18 +++++++++++ .../Slider/SliderExampleRtl.stories.tsx | 27 ++++++++++++++++ .../Slider/SliderExampleShorthand.stories.tsx | 32 +++++++++++++++++++ .../vr-tests/Slider/commonScreenerSteps.ts | 30 +++++++++++++++++ 4 files changed, 107 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx new file mode 100644 index 00000000000000..a8e9f98bffae0b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Slider/Slider.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Slider } from '@fluentui/react-northstar'; +import SliderExampleDisabledShorthand from '../../examples/components/Slider/States/SliderExampleDisabled.shorthand'; +import SliderExampleActionShorthand from '../../examples/components/Slider/Usage/SliderExampleAction.shorthand'; +import SliderExampleFormShorthand from '../../examples/components/Slider/Usage/SliderExampleForm.shorthand'; +import SliderExampleFluidShorthand from '../../examples/components/Slider/Variations/SliderExampleFluid.shorthand'; +import SliderExampleVerticalShorthand from '../../examples/components/Slider/Variations/SliderExampleVertical.shorthand'; + +export default { component: Slider, title: 'Slider' } as ComponentMeta; + +export { + SliderExampleDisabledShorthand, + SliderExampleActionShorthand, + SliderExampleFormShorthand, + SliderExampleFluidShorthand, + SliderExampleVerticalShorthand, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx new file mode 100644 index 00000000000000..b5653da164e3e8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Slider } from '@fluentui/react-northstar'; +import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import SliderExampleRtl from '../../examples/components/Slider/Rtl/SliderExample.rtl'; + +export default { + component: Slider, + title: 'Slider', + decorators: [ + story => {story()}, + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const SliderExampleRtlTeams = getThemeStoryVariant(SliderExampleRtl, 'teamsV2'); + +const SliderExampleRtlTeamsDark = getThemeStoryVariant(SliderExampleRtl, 'teamsDarkV2'); + +const SliderExampleRtlTeamsHighContrast = getThemeStoryVariant(SliderExampleRtl, 'teamsHighContrast'); + +export { SliderExampleRtl, SliderExampleRtlTeams, SliderExampleRtlTeamsDark, SliderExampleRtlTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..e0f19748b43800 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Slider } from '@fluentui/react-northstar'; +import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonScreenerSteps'; +import { getThemeStoryVariant } from '../utilities'; +import SliderExampleShorthand from '../../examples/components/Slider/Types/SliderExample.shorthand'; + +export default { + component: Slider, + title: 'Slider', + decorators: [ + story => {story()}, + story => {story()}, + story => {story()}, + ], +} as ComponentMeta; + +const SliderExampleShorthandTeams = getThemeStoryVariant(SliderExampleShorthand, 'teamsV2'); + +const SliderExampleShorthandTeamsDark = getThemeStoryVariant(SliderExampleShorthand, 'teamsDarkV2'); + +const SliderExampleShorthandTeamsHighContrast = getThemeStoryVariant(SliderExampleShorthand, 'teamsHighContrast'); + +export { + SliderExampleShorthand, + SliderExampleShorthandTeams, + SliderExampleShorthandTeamsDark, + SliderExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts new file mode 100644 index 00000000000000..950e65a873fea1 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts @@ -0,0 +1,30 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Steps } from 'screener-storybook/src/screener'; +import { sliderSlotClassNames } from '@fluentui/react-northstar'; +import { keys } from '../utilities'; + +const selectors = { + input: `.${sliderSlotClassNames.input}`, +}; + +export const focusSliderSteps = new Steps().keys('body', keys.tab).end(); + +export const rightArrowSteps = new Steps() + .keys('body', keys.tab) + .keys(selectors.input, keys.rightArrow) + .keys(selectors.input, keys.rightArrow) + .keys(selectors.input, keys.rightArrow) + .keys(selectors.input, keys.rightArrow) + .keys(selectors.input, keys.rightArrow) + .snapshot('Navigates to the right with the right arrow key') + .end(); + +export const upArrowSteps = new Steps() + .keys('body', keys.tab) + .keys(selectors.input, keys.upArrow) + .keys(selectors.input, keys.upArrow) + .keys(selectors.input, keys.upArrow) + .keys(selectors.input, keys.upArrow) + .keys(selectors.input, keys.upArrow) + .snapshot('Navigates to the right with the up arrow key') + .end(); From b96731bd07aea8b54a8529b680d528fcf258d422 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:30:43 -0800 Subject: [PATCH 33/65] Add SplitButton stories --- .../SplitButton/SplitButton.stories.tsx | 22 ++++++++++++++++ ...tButtonExamplePrimaryShorthand.stories.tsx | 25 ++++++++++++++++++ ...litButtonExampleSmallContainer.stories.tsx | 26 +++++++++++++++++++ ...tonPositioningExampleShorthand.stories.tsx | 23 ++++++++++++++++ 4 files changed, 96 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx new file mode 100644 index 00000000000000..83bff1d6c3e16e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButton.stories.tsx @@ -0,0 +1,22 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SplitButton } from '@fluentui/react-northstar'; +import SplitButtonIconAndContentExampleShorthand from '../../examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand'; +import SplitButtonExampleToggleButtonShorthand from '../../examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand'; +import SplitButtonExampleDisabledShorthand from '../../examples/components/SplitButton/States/SplitButtonExampleDisabled.shorthand'; +import SplitButtonExampleShorthand from '../../examples/components/SplitButton/Types/SplitButtonExample.shorthand'; +import SplitButtonExampleFlat from '../../examples/components/SplitButton/Types/SplitButtonExampleFlat.shorthand'; +import SplitButtonExampleSmallShorthand from '../../examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand'; +import SplitButtonMainOptionChangeExample from '../../examples/components/SplitButton/Usage/SplitButtonMainOptionChangeExample.shorthand'; + +export default { component: SplitButton, title: 'SplitButton' } as ComponentMeta; + +export { + SplitButtonIconAndContentExampleShorthand, + SplitButtonExampleToggleButtonShorthand, + SplitButtonExampleDisabledShorthand, + SplitButtonExampleShorthand, + SplitButtonExampleFlat, + SplitButtonExampleSmallShorthand, + SplitButtonMainOptionChangeExample, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx new file mode 100644 index 00000000000000..02615ee3a0e003 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SplitButton, splitButtonToggleClassName } from '@fluentui/react-northstar'; +import SplitButtonExamplePrimaryShorthand from '../../examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand'; + +const selectors = { + triggerButton: `.${splitButtonToggleClassName}`, +}; + +export default { + component: SplitButton, + title: 'SplitButton', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { SplitButtonExamplePrimaryShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx new file mode 100644 index 00000000000000..5c28b2b204f485 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExampleSmallContainer.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SplitButton } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SplitButtonExampleSmallContainer from '../../examples/components/SplitButton/Visual/SplitButtonExampleSmallContainer'; + +export default { + component: SplitButton, + title: 'SplitButton', +} as ComponentMeta; + +const SplitButtonExampleSmallContainerTeams = getThemeStoryVariant(SplitButtonExampleSmallContainer, 'teamsV2'); + +const SplitButtonExampleSmallContainerTeamsDark = getThemeStoryVariant(SplitButtonExampleSmallContainer, 'teamsDarkV2'); + +const SplitButtonExampleSmallContainerTeamsHighContrast = getThemeStoryVariant( + SplitButtonExampleSmallContainer, + 'teamsHighContrast', +); + +export { + SplitButtonExampleSmallContainer, + SplitButtonExampleSmallContainerTeams, + SplitButtonExampleSmallContainerTeamsDark, + SplitButtonExampleSmallContainerTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..c5d197f5f08b05 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SplitButton, splitButtonToggleClassName } from '@fluentui/react-northstar'; +import SplitButtonPositioningExampleShorthand from '../../examples/components/SplitButton/Usage/SplitButtonPositioningExampleShorthand.shorthand'; + +const selectors = { + triggerButton: `.${splitButtonToggleClassName}`, +}; + +export default { + component: SplitButton, + title: 'SplitButton', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +export { SplitButtonPositioningExampleShorthand }; From 5ac0dce3c25e36a8634aabf9658fdd4043209f1f Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:31:23 -0800 Subject: [PATCH 34/65] Add Status stories --- .../src/vr-tests/Status/Status.stories.tsx | 18 +++++++++++++ .../StatusTypeExampleShorthand.stories.tsx | 26 +++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx b/packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx new file mode 100644 index 00000000000000..f54dc4f2d1aeb8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Status/Status.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Status } from '@fluentui/react-northstar'; +import StatusExampleShorthand from '../../examples/components/Status/Types/StatusExample.shorthand'; +import StatusColorExampleShorthand from '../../examples/components/Status/Variations/StatusColorExample.shorthand'; +import StatusCustomExampleShorthand from '../../examples/components/Status/Variations/StatusCustomExample.shorthand'; +import StatusIconExampleShorthand from '../../examples/components/Status/Variations/StatusIconExample.shorthand'; +import StatusSizeExampleShorthand from '../../examples/components/Status/Variations/StatusSizeExample.shorthand'; + +export default { component: Status, title: 'Status' } as ComponentMeta; + +export { + StatusExampleShorthand, + StatusColorExampleShorthand, + StatusCustomExampleShorthand, + StatusIconExampleShorthand, + StatusSizeExampleShorthand, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..17d042e8d31a1b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Status/StatusTypeExampleShorthand.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Status } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import StatusTypeExampleShorthand from '../../examples/components/Status/Types/StatusTypeExample.shorthand'; + +export default { + component: Status, + title: 'Status', +} as ComponentMeta; + +const StatusTypeExampleShorthandTeams = getThemeStoryVariant(StatusTypeExampleShorthand, 'teamsV2'); + +const StatusTypeExampleShorthandTeamsDark = getThemeStoryVariant(StatusTypeExampleShorthand, 'teamsDarkV2'); + +const StatusTypeExampleShorthandTeamsHighContrast = getThemeStoryVariant( + StatusTypeExampleShorthand, + 'teamsHighContrast', +); + +export { + StatusTypeExampleShorthand, + StatusTypeExampleShorthandTeams, + StatusTypeExampleShorthandTeamsDark, + StatusTypeExampleShorthandTeamsHighContrast, +}; From 0f8851c02178cead82c3f7e2038b1faf8b92e0dd Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:33:56 -0800 Subject: [PATCH 35/65] Add SvgIcon stories --- .../src/vr-tests/SvgIcon/SvgIcon.stories.tsx | 11 ++++++++ .../SvgIcon/SvgIconExample.stories.tsx | 18 +++++++++++++ .../SvgIconExampleCircular.stories.tsx | 23 ++++++++++++++++ .../SvgIcon/SvgIconExampleColor.stories.tsx | 23 ++++++++++++++++ .../SvgIconExampleDisabled.stories.tsx | 23 ++++++++++++++++ .../SvgIcon/SvgIconExampleSize.stories.tsx | 23 ++++++++++++++++ .../SvgIcon/SvgIconExampleSpace.stories.tsx | 23 ++++++++++++++++ .../SvgIconSetExampleShorthand.stories.tsx | 26 +++++++++++++++++++ .../SvgIcon/SvgconExampleBordered.stories.tsx | 23 ++++++++++++++++ 9 files changed, 193 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx new file mode 100644 index 00000000000000..0ea1b827bf2cfe --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIcon.stories.tsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import SvgPlayground from '../../examples/components/SvgIcon/Playground'; +import SvgIconExampleRtl from '../../examples/components/SvgIcon/Rtl/SvgIconExample.rtl'; +import SvgIconExampleRotateRtl from '../../examples/components/SvgIcon/Rtl/SvgIconExampleRotate.rtl'; +import SvgIconExampleRotate from '../../examples/components/SvgIcon/Variations/SvgIconExampleRotate.shorthand'; + +export default { component: SvgIcon, title: 'SvgIcon' } as ComponentMeta; + +export { SvgPlayground, SvgIconExampleRtl, SvgIconExampleRotateRtl, SvgIconExampleRotate }; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx new file mode 100644 index 00000000000000..813a298f8c59b0 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExample.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconExample from '../../examples/components/SvgIcon/Types/SvgIconExample.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconExampleTeams = getThemeStoryVariant(SvgIconExample, 'teamsV2'); + +const SvgIconExampleTeamsDark = getThemeStoryVariant(SvgIconExample, 'teamsDarkV2'); + +const SvgIconExampleTeamsHighContrast = getThemeStoryVariant(SvgIconExample, 'teamsHighContrast'); + +export { SvgIconExample, SvgIconExampleTeams, SvgIconExampleTeamsDark, SvgIconExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx new file mode 100644 index 00000000000000..eec7e4842d4fe2 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleCircular.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconExampleCircular from '../../examples/components/SvgIcon/Variations/SvgIconExampleCircular.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconExampleCircularTeams = getThemeStoryVariant(SvgIconExampleCircular, 'teamsV2'); + +const SvgIconExampleCircularTeamsDark = getThemeStoryVariant(SvgIconExampleCircular, 'teamsDarkV2'); + +const SvgIconExampleCircularTeamsHighContrast = getThemeStoryVariant(SvgIconExampleCircular, 'teamsHighContrast'); + +export { + SvgIconExampleCircular, + SvgIconExampleCircularTeams, + SvgIconExampleCircularTeamsDark, + SvgIconExampleCircularTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx new file mode 100644 index 00000000000000..735cb6e155aa4a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleColor.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconExampleColor from '../../examples/components/SvgIcon/Variations/SvgIconExampleColor.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconExampleColorTeams = getThemeStoryVariant(SvgIconExampleColor, 'teamsV2'); + +const SvgIconExampleColorTeamsDark = getThemeStoryVariant(SvgIconExampleColor, 'teamsDarkV2'); + +const SvgIconExampleColorTeamsHighContrast = getThemeStoryVariant(SvgIconExampleColor, 'teamsHighContrast'); + +export { + SvgIconExampleColor, + SvgIconExampleColorTeams, + SvgIconExampleColorTeamsDark, + SvgIconExampleColorTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx new file mode 100644 index 00000000000000..38a15eee3196c8 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleDisabled.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconExampleDisabled from '../../examples/components/SvgIcon/States/SvgIconExampleDisabled.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconExampleDisabledTeams = getThemeStoryVariant(SvgIconExampleDisabled, 'teamsV2'); + +const SvgIconExampleDisabledTeamsDark = getThemeStoryVariant(SvgIconExampleDisabled, 'teamsDarkV2'); + +const SvgIconExampleDisabledTeamsHighContrast = getThemeStoryVariant(SvgIconExampleDisabled, 'teamsHighContrast'); + +export { + SvgIconExampleDisabled, + SvgIconExampleDisabledTeams, + SvgIconExampleDisabledTeamsDark, + SvgIconExampleDisabledTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx new file mode 100644 index 00000000000000..f6be6a9318b527 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSize.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconExampleSize from '../../examples/components/SvgIcon/Variations/SvgIconExampleSize.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconExampleSizeTeams = getThemeStoryVariant(SvgIconExampleSize, 'teamsV2'); + +const SvgIconExampleSizeTeamsDark = getThemeStoryVariant(SvgIconExampleSize, 'teamsDarkV2'); + +const SvgIconExampleSizeTeamsHighContrast = getThemeStoryVariant(SvgIconExampleSize, 'teamsHighContrast'); + +export { + SvgIconExampleSize, + SvgIconExampleSizeTeams, + SvgIconExampleSizeTeamsDark, + SvgIconExampleSizeTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx new file mode 100644 index 00000000000000..9b3892cb322a98 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconExampleSpace.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconExampleSpace from '../../examples/components/SvgIcon/Variations/SvgIconExampleSpace.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconExampleSpaceTeams = getThemeStoryVariant(SvgIconExampleSpace, 'teamsV2'); + +const SvgIconExampleSpaceTeamsDark = getThemeStoryVariant(SvgIconExampleSpace, 'teamsDarkV2'); + +const SvgIconExampleSpaceTeamsHighContrast = getThemeStoryVariant(SvgIconExampleSpace, 'teamsHighContrast'); + +export { + SvgIconExampleSpace, + SvgIconExampleSpaceTeams, + SvgIconExampleSpaceTeamsDark, + SvgIconExampleSpaceTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..bee76b07b9a76a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgIconSetExampleShorthand.stories.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgIconSetExampleShorthand from '../../examples/components/SvgIcon/Usage/SvgIconSetExample.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgIconSetExampleShorthandTeams = getThemeStoryVariant(SvgIconSetExampleShorthand, 'teamsV2'); + +const SvgIconSetExampleShorthandTeamsDark = getThemeStoryVariant(SvgIconSetExampleShorthand, 'teamsDarkV2'); + +const SvgIconSetExampleShorthandTeamsHighContrast = getThemeStoryVariant( + SvgIconSetExampleShorthand, + 'teamsHighContrast', +); + +export { + SvgIconSetExampleShorthand, + SvgIconSetExampleShorthandTeams, + SvgIconSetExampleShorthandTeamsDark, + SvgIconSetExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx new file mode 100644 index 00000000000000..c4c2c90b3987f5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/SvgIcon/SvgconExampleBordered.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { SvgIcon } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import SvgconExampleBordered from '../../examples/components/SvgIcon/Variations/SvgIconExampleBordered.shorthand'; + +export default { + component: SvgIcon, + title: 'SvgIcon', +} as ComponentMeta; + +const SvgconExampleBorderedTeams = getThemeStoryVariant(SvgconExampleBordered, 'teamsV2'); + +const SvgconExampleBorderedTeamsDark = getThemeStoryVariant(SvgconExampleBordered, 'teamsDarkV2'); + +const SvgconExampleBorderedTeamsHighContrast = getThemeStoryVariant(SvgconExampleBordered, 'teamsHighContrast'); + +export { + SvgconExampleBordered, + SvgconExampleBorderedTeams, + SvgconExampleBorderedTeamsDark, + SvgconExampleBorderedTeamsHighContrast, +}; From 45d7df76801a6322a2cf49eb2976164c8b6b48fe Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:36:03 -0800 Subject: [PATCH 36/65] Add Table stories --- .../src/vr-tests/Table/StaticTable.stories.tsx | 18 ++++++++++++++++++ .../docs/src/vr-tests/Table/Table.stories.tsx | 11 +++++++++++ 2 files changed, 29 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx new file mode 100644 index 00000000000000..0b3faa3c8a8108 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Table/StaticTable.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Table } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import StaticTable from '../../examples/components/Table/Usage/TableExampleNavigable.shorthand'; + +export default { + component: Table, + title: 'Table', +} as ComponentMeta; + +const StaticTableTeams = getThemeStoryVariant(StaticTable, 'teamsV2'); + +const StaticTableTeamsDark = getThemeStoryVariant(StaticTable, 'teamsDarkV2'); + +const StaticTableTeamsHighContrast = getThemeStoryVariant(StaticTable, 'teamsHighContrast'); + +export { StaticTable, StaticTableTeams, StaticTableTeamsDark, StaticTableTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx b/packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx new file mode 100644 index 00000000000000..1ee2f3ffc1059b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Table/Table.stories.tsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Table } from '@fluentui/react-northstar'; +import TableExampleStaticShorthand from '../../examples/components/Table/Usage/TableExampleStatic.shorthand'; +import TableExampleStatic from '../../examples/components/Table/Usage/TableExampleStatic'; +import StaticTableCompact from '../../examples/components/Table/Usage/TableExampleStaticCompact.shorthand'; +import StaticTable from '../../examples/components/Table/Usage/TableExampleStaticHeadless.shorthand'; + +export default { component: Table, title: 'Table' } as ComponentMeta; + +export { TableExampleStaticShorthand, TableExampleStatic, StaticTableCompact, StaticTable }; From 527f0defa3eefb08cdc3ae2cd7fb13866bf088d3 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:36:25 -0800 Subject: [PATCH 37/65] Add Text stories --- .../docs/src/vr-tests/Text/Text.stories.tsx | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx b/packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx new file mode 100644 index 00000000000000..53cef8f847f180 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Text/Text.stories.tsx @@ -0,0 +1,54 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Text } from '@fluentui/react-northstar'; +import TextExampleRtl from '../../examples/components/Text/Rtl/TextExample.rtl'; +import TextExampleDisabledShorthand from '../../examples/components/Text/States/TextExampleDisabled.shorthand'; +import TextExampleDisabled from '../../examples/components/Text/States/TextExampleDisabled'; +import TextExampleErrorShorthand from '../../examples/components/Text/States/TextExampleError.shorthand'; +import TextExampleError from '../../examples/components/Text/States/TextExampleError'; +import TextExampleSuccessShorthand from '../../examples/components/Text/States/TextExampleSuccess.shorthand'; +import TextExampleSuccess from '../../examples/components/Text/States/TextExampleSuccess'; +import TextExampleTemporaryShorthand from '../../examples/components/Text/States/TextExampleTemporary.shorthand'; +import TextExampleTemporary from '../../examples/components/Text/States/TextExampleTemporary'; +import TextExampleTruncatedShorthand from '../../examples/components/Text/States/TextExampleTruncated.shorthand'; +import TextExampleTruncated from '../../examples/components/Text/States/TextExampleTruncated'; +import TextSizesExampleShorthand from '../../examples/components/Text/Types/TextSizesExample.shorthand'; +import TextSizesExample from '../../examples/components/Text/Types/TextSizesExample'; +import TextWeightsExampleShorthand from '../../examples/components/Text/Types/TextWeightsExample.shorthand'; +import TextWeightsExample from '../../examples/components/Text/Types/TextWeightsExample'; +import HeaderExampleAlign from '../../examples/components/Text/Variations/TextExampleAlign.shorthand'; +import TextExampleAtMentionShorthand from '../../examples/components/Text/Variations/TextExampleAtMention.shorthand'; +import TextExampleAtMention from '../../examples/components/Text/Variations/TextExampleAtMention'; +import TextExampleColor from '../../examples/components/Text/Variations/TextExampleColor.shorthand'; +import TextExampleImportantShorthand from '../../examples/components/Text/Variations/TextExampleImportant.shorthand'; +import TextExampleImportant from '../../examples/components/Text/Variations/TextExampleImportant'; +import TextExampleTimestampShorthand from '../../examples/components/Text/Variations/TextExampleTimestamp.shorthand'; +import TextExampleTimestamp from '../../examples/components/Text/Variations/TextExampleTimestamp'; + +export default { component: Text, title: 'Text' } as ComponentMeta; + +export { + TextExampleRtl, + TextExampleDisabledShorthand, + TextExampleDisabled, + TextExampleErrorShorthand, + TextExampleError, + TextExampleSuccessShorthand, + TextExampleSuccess, + TextExampleTemporaryShorthand, + TextExampleTemporary, + TextExampleTruncatedShorthand, + TextExampleTruncated, + TextSizesExampleShorthand, + TextSizesExample, + TextWeightsExampleShorthand, + TextWeightsExample, + HeaderExampleAlign, + TextExampleAtMentionShorthand, + TextExampleAtMention, + TextExampleColor, + TextExampleImportantShorthand, + TextExampleImportant, + TextExampleTimestampShorthand, + TextExampleTimestamp, +}; From 5ab1486ce1a9f9b59702e39ed28f63319ed4694f Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:39:34 -0800 Subject: [PATCH 38/65] Add TextArea stories --- .../vr-tests/TextArea/TextArea.stories.tsx | 20 ++++++++++++++ .../TextArea/TextAreaExample.stories.tsx | 26 +++++++++++++++++++ .../TextAreaExampleInverted.stories.tsx | 23 ++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx new file mode 100644 index 00000000000000..866dd936a25441 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextArea.stories.tsx @@ -0,0 +1,20 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { TextArea } from '@fluentui/react-northstar'; +import TextAreaDisabledExample from '../../examples/components/TextArea/States/TextAreaDisabledExample.shorthand'; +import TextAreaValueExample from '../../examples/components/TextArea/States/TextAreaValueExample.shorthand'; +import TextAreaExampleHeight from '../../examples/components/TextArea/Usage/TextAreaExampleHeight.shorthand'; +import TextAreaExampleMaxLength from '../../examples/components/TextArea/Usage/TextAreaExampleMaxLength.shorthand'; +import TextAreaExampleResize from '../../examples/components/TextArea/Usage/TextAreaExampleResize.shorthand'; +import TextAreaExampleFluid from '../../examples/components/TextArea/Variations/TextAreaExampleFluid.shorthand'; + +export default { component: TextArea, title: 'TextArea' } as ComponentMeta; + +export { + TextAreaDisabledExample, + TextAreaValueExample, + TextAreaExampleHeight, + TextAreaExampleMaxLength, + TextAreaExampleResize, + TextAreaExampleFluid, +}; diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx new file mode 100644 index 00000000000000..6495574e7538dd --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { TextArea, textAreaClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import TextAreaExample from '../../examples/components/TextArea/Types/TextAreaExample.shorthand'; + +export default { + component: TextArea, + title: 'TextArea', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +const TextAreaExampleTeams = getThemeStoryVariant(TextAreaExample, 'teamsV2'); + +const TextAreaExampleTeamsDark = getThemeStoryVariant(TextAreaExample, 'teamsDarkV2'); + +const TextAreaExampleTeamsHighContrast = getThemeStoryVariant(TextAreaExample, 'teamsHighContrast'); + +export { TextAreaExample, TextAreaExampleTeams, TextAreaExampleTeamsDark, TextAreaExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx new file mode 100644 index 00000000000000..b79ad71f795ddb --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExampleInverted.stories.tsx @@ -0,0 +1,23 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { TextArea } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import TextAreaExampleInverted from '../../examples/components/TextArea/Variations/TextAreaExampleInverted.shorthand'; + +export default { + component: TextArea, + title: 'TextArea', +} as ComponentMeta; + +const TextAreaExampleInvertedTeams = getThemeStoryVariant(TextAreaExampleInverted, 'teamsV2'); + +const TextAreaExampleInvertedTeamsDark = getThemeStoryVariant(TextAreaExampleInverted, 'teamsDarkV2'); + +const TextAreaExampleInvertedTeamsHighContrast = getThemeStoryVariant(TextAreaExampleInverted, 'teamsHighContrast'); + +export { + TextAreaExampleInverted, + TextAreaExampleInvertedTeams, + TextAreaExampleInvertedTeamsDark, + TextAreaExampleInvertedTeamsHighContrast, +}; From 680e03ac4625bd8671d335c351fb115458678360 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 17:51:08 -0800 Subject: [PATCH 39/65] Add Toolbar stories --- .../src/vr-tests/Toolbar/Toolbar.stories.tsx | 18 +++++++ ...oolbarExampleActionPopupInMenu.stories.tsx | 43 ++++++++++++++++ .../ToolbarExampleEditorShorthand.stories.tsx | 32 ++++++++++++ .../ToolbarExampleMenuShorthand.stories.tsx | 17 +++++++ ...xampleMenuWithSubmenuShorthand.stories.tsx | 51 +++++++++++++++++++ .../ToolbarExampleOverflow.stories.tsx | 23 +++++++++ ...leOverflowPositioningShorthand.stories.tsx | 26 ++++++++++ ...verflowPositioningShorthandRtl.stories.tsx | 26 ++++++++++ .../ToolbarExamplePopupInMenu.stories.tsx | 40 +++++++++++++++ .../ToolbarExamplePopupShorthand.stories.tsx | 43 ++++++++++++++++ ...lbarExampleRadioGroupShorthand.stories.tsx | 29 +++++++++++ .../ToolbarExampleShorthand.stories.tsx | 45 ++++++++++++++++ .../ToolbarExampleVariables.stories.tsx | 28 ++++++++++ 13 files changed, 421 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx new file mode 100644 index 00000000000000..b3e7cfa9529516 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/Toolbar.stories.tsx @@ -0,0 +1,18 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import ToolbarExampleCustomContentShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleCustomContent.shorthand'; +import ToolbarExampleMenuItemToggle from '../../examples/components/Toolbar/Content/ToolbarExampleMenuItemToggle.shorthand'; +import ToolbarExampleMenuRadioGroup from '../../examples/components/Toolbar/Content/ToolbarExampleMenuRadioGroup.shorthand'; +import ToolbarExampleShorthand from '../../examples/components/Toolbar/Types/ToolbarExample.shorthand'; +import ToolbarExample from '../../examples/components/Toolbar/Types/ToolbarExample'; + +export default { component: Toolbar, title: 'Toolbar' } as ComponentMeta; + +export { + ToolbarExampleCustomContentShorthand, + ToolbarExampleMenuItemToggle, + ToolbarExampleMenuRadioGroup, + ToolbarExampleShorthand, + ToolbarExample, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx new file mode 100644 index 00000000000000..dc4613b3305e64 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ToolbarExampleActionPopupInMenu from '../../examples/components/Toolbar/Usage/ToolbarExampleActionPopupInMenu.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const ToolbarExampleActionPopupInMenuTeams = getThemeStoryVariant(ToolbarExampleActionPopupInMenu, 'teamsV2'); + +const ToolbarExampleActionPopupInMenuTeamsDark = getThemeStoryVariant(ToolbarExampleActionPopupInMenu, 'teamsDarkV2'); + +const ToolbarExampleActionPopupInMenuTeamsHighContrast = getThemeStoryVariant( + ToolbarExampleActionPopupInMenu, + 'teamsHighContrast', +); + +export { + ToolbarExampleActionPopupInMenu, + ToolbarExampleActionPopupInMenuTeams, + ToolbarExampleActionPopupInMenuTeamsDark, + ToolbarExampleActionPopupInMenuTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx new file mode 100644 index 00000000000000..42df1ce69ae4f1 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import ToolbarExampleEditorShorthand from '../../examples/components/Toolbar/Types/ToolbarExampleEditor.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => {story()}, + ], +} as ComponentMeta; + +const ToolbarExampleEditorShorthandTeams = getThemeStoryVariant(ToolbarExampleEditorShorthand, 'teamsV2'); + +const ToolbarExampleEditorShorthandTeamsDark = getThemeStoryVariant(ToolbarExampleEditorShorthand, 'teamsDarkV2'); + +const ToolbarExampleEditorShorthandTeamsHighContrast = getThemeStoryVariant( + ToolbarExampleEditorShorthand, + 'teamsHighContrast', +); + +export { + ToolbarExampleEditorShorthand, + ToolbarExampleEditorShorthandTeams, + ToolbarExampleEditorShorthandTeamsDark, + ToolbarExampleEditorShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx new file mode 100644 index 00000000000000..31b027f5c0b6ac --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import ToolbarExampleMenuShorthand from '../../examples/components/Toolbar/Visual/ToolbarExampleCompose.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => {story()}, + ], +} as ComponentMeta; + +export { ToolbarExampleMenuShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx new file mode 100644 index 00000000000000..c89437494a025a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import ToolbarExampleMenuWithSubmenuShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const ToolbarExampleMenuWithSubmenuShorthandTeams = getThemeStoryVariant( + ToolbarExampleMenuWithSubmenuShorthand, + 'teamsV2', +); + +const ToolbarExampleMenuWithSubmenuShorthandTeamsDark = getThemeStoryVariant( + ToolbarExampleMenuWithSubmenuShorthand, + 'teamsDarkV2', +); + +const ToolbarExampleMenuWithSubmenuShorthandTeamsHighContrast = getThemeStoryVariant( + ToolbarExampleMenuWithSubmenuShorthand, + 'teamsHighContrast', +); + +export { + ToolbarExampleMenuWithSubmenuShorthand, + ToolbarExampleMenuWithSubmenuShorthandTeams, + ToolbarExampleMenuWithSubmenuShorthandTeamsDark, + ToolbarExampleMenuWithSubmenuShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx new file mode 100644 index 00000000000000..9befe1aa21c1be --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import ToolbarExampleOverflow from '../../examples/components/Toolbar/Visual/ToolbarExampleChatMessage'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { ToolbarExampleOverflow }; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx new file mode 100644 index 00000000000000..1bbdce5c7c64a3 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import ToolbarExampleOverflowPositioningShorthand from '../../examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { ToolbarExampleOverflowPositioningShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx new file mode 100644 index 00000000000000..f77a1dc820fb97 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import ToolbarExampleOverflowPositioningShorthandRtl from '../../examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.rtl'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { ToolbarExampleOverflowPositioningShorthandRtl }; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx new file mode 100644 index 00000000000000..f05f180d1ad18a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar, toolbarItemClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ToolbarExamplePopupInMenu from '../../examples/components/Toolbar/Usage/ToolbarExamplePopupInMenu.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const ToolbarExamplePopupInMenuTeams = getThemeStoryVariant(ToolbarExamplePopupInMenu, 'teamsV2'); + +const ToolbarExamplePopupInMenuTeamsDark = getThemeStoryVariant(ToolbarExamplePopupInMenu, 'teamsDarkV2'); + +const ToolbarExamplePopupInMenuTeamsHighContrast = getThemeStoryVariant(ToolbarExamplePopupInMenu, 'teamsHighContrast'); + +export { + ToolbarExamplePopupInMenu, + ToolbarExamplePopupInMenuTeams, + ToolbarExamplePopupInMenuTeamsDark, + ToolbarExamplePopupInMenuTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx new file mode 100644 index 00000000000000..487582113835fb --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar, toolbarItemClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ToolbarExamplePopupShorthand from '../../examples/components/Toolbar/Content/ToolbarExamplePopup.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const ToolbarExamplePopupShorthandTeams = getThemeStoryVariant(ToolbarExamplePopupShorthand, 'teamsV2'); + +const ToolbarExamplePopupShorthandTeamsDark = getThemeStoryVariant(ToolbarExamplePopupShorthand, 'teamsDarkV2'); + +const ToolbarExamplePopupShorthandTeamsHighContrast = getThemeStoryVariant( + ToolbarExamplePopupShorthand, + 'teamsHighContrast', +); + +export { + ToolbarExamplePopupShorthand, + ToolbarExamplePopupShorthandTeams, + ToolbarExamplePopupShorthandTeamsDark, + ToolbarExamplePopupShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx new file mode 100644 index 00000000000000..324c662500cbb9 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleRadioGroupShorthand.stories.tsx @@ -0,0 +1,29 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import ToolbarExampleRadioGroupShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleRadioGroup.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', +} as ComponentMeta; + +const ToolbarExampleRadioGroupShorthandTeams = getThemeStoryVariant(ToolbarExampleRadioGroupShorthand, 'teamsV2'); + +const ToolbarExampleRadioGroupShorthandTeamsDark = getThemeStoryVariant( + ToolbarExampleRadioGroupShorthand, + 'teamsDarkV2', +); + +const ToolbarExampleRadioGroupShorthandTeamsHighContrast = getThemeStoryVariant( + ToolbarExampleRadioGroupShorthand, + 'teamsHighContrast', +); + +export { + ToolbarExampleRadioGroupShorthand, + ToolbarExampleRadioGroupShorthandTeams, + ToolbarExampleRadioGroupShorthandTeamsDark, + ToolbarExampleRadioGroupShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..35ab1a0f62cd8a --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar, toolbarClassName, toolbarItemClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import ToolbarExampleShorthand from '../../examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand'; + +const selectors = { + item: (itemIndex: number) => `.${toolbarClassName} .${toolbarItemClassName}:nth-child(${itemIndex})`, +}; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const ToolbarExampleShorthandTeams = getThemeStoryVariant(ToolbarExampleShorthand, 'teamsV2'); + +const ToolbarExampleShorthandTeamsDark = getThemeStoryVariant(ToolbarExampleShorthand, 'teamsDarkV2'); + +const ToolbarExampleShorthandTeamsHighContrast = getThemeStoryVariant(ToolbarExampleShorthand, 'teamsHighContrast'); + +export { + ToolbarExampleShorthand, + ToolbarExampleShorthandTeams, + ToolbarExampleShorthandTeamsDark, + ToolbarExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx new file mode 100644 index 00000000000000..245ac400d4f11d --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Toolbar } from '@fluentui/react-northstar'; +import ToolbarExampleVariables from '../../examples/components/Toolbar/Visual/ToolbarExampleVariables.shorthand'; + +export default { + component: Toolbar, + title: 'Toolbar', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { ToolbarExampleVariables }; From a8067d74985a32af9bc9168a8d054c2516da58c3 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 18:09:29 -0800 Subject: [PATCH 40/65] Add Tooltip stories --- .../src/vr-tests/Tooltip/Tooltip.stories.tsx | 24 +++++++++++ .../Tooltip/TooltipExample.stories.tsx | 26 +++++++++++ ...pExampleDialogContentShorthand.stories.tsx | 27 ++++++++++++ .../TooltipExamplePointing.stories.tsx | 43 +++++++++++++++++++ .../Tooltip/TooltipExampleRtl.stories.tsx | 21 +++++++++ .../Tooltip/TooltipExampleTarget.stories.tsx | 21 +++++++++ 6 files changed, 162 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx new file mode 100644 index 00000000000000..ac3787e6185113 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/Tooltip.stories.tsx @@ -0,0 +1,24 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tooltip } from '@fluentui/react-northstar'; +import TooltipOpenExample from '../../examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand'; +import TooltipExample from '../../examples/components/Tooltip/Types/TooltipExample'; +import TooltipExamplePointing from '../../examples/components/Tooltip/Types/TooltipExamplePointing'; +import TooltipExampleDisabledTrigger from '../../examples/components/Tooltip/Usage/TooltipExampleDisabledTrigger.shorthand'; +import TooltipExampleDismissOnContentMouseEnter from '../../examples/components/Tooltip/Usage/TooltipExampleDismissOnContentMouseEnter'; +import TooltipExampleTarget from '../../examples/components/Tooltip/Usage/TooltipExampleTarget'; +import TooltipExamplePosition from '../../examples/components/Tooltip/Variations/TooltipExamplePosition.shorthand'; +import TooltipExamplePointerMargin from '../../examples/components/Tooltip/Visual/TooltipExamplePointerMargin.shorthand'; + +export default { component: Tooltip, title: 'Tooltip' } as ComponentMeta; + +export { + TooltipOpenExample, + TooltipExample, + TooltipExamplePointing, + TooltipExampleDisabledTrigger, + TooltipExampleDismissOnContentMouseEnter, + TooltipExampleTarget, + TooltipExamplePosition, + TooltipExamplePointerMargin, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx new file mode 100644 index 00000000000000..b30cade128fc71 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import TooltipExample from '../../examples/components/Tooltip/Types/TooltipExample.shorthand'; + +export default { + component: Tooltip, + title: 'Tooltip', + decorators: [ + story => ( + {story()} + ), + ], +} as ComponentMeta; + +const TooltipExampleTeams = getThemeStoryVariant(TooltipExample, 'teamsV2'); + +const TooltipExampleTeamsDark = getThemeStoryVariant(TooltipExample, 'teamsDarkV2'); + +const TooltipExampleTeamsHighContrast = getThemeStoryVariant(TooltipExample, 'teamsHighContrast'); + +export { TooltipExample, TooltipExampleTeams, TooltipExampleTeamsDark, TooltipExampleTeamsHighContrast }; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx new file mode 100644 index 00000000000000..4541ef4e28a41b --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tooltip, buttonClassName, dialogSlotClassNames } from '@fluentui/react-northstar'; +import TooltipExampleDialogContentShorthand from '../../examples/components/Tooltip/Usage/TooltipExampleDialogContent.shorthand'; + +export default { + component: Tooltip, + title: 'Tooltip', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { TooltipExampleDialogContentShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx new file mode 100644 index 00000000000000..b29b1a35b1e917 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import TooltipExamplePointing from '../../examples/components/Tooltip/Types/TooltipExamplePointing.shorthand'; + +export default { + component: Tooltip, + title: 'Tooltip', + decorators: [ + story => ( + {story()} + ), + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const TooltipExamplePointingTeams = getThemeStoryVariant(TooltipExamplePointing, 'teamsV2'); + +const TooltipExamplePointingTeamsDark = getThemeStoryVariant(TooltipExamplePointing, 'teamsDarkV2'); + +const TooltipExamplePointingTeamsHighContrast = getThemeStoryVariant(TooltipExamplePointing, 'teamsHighContrast'); + +export { + TooltipExamplePointing, + TooltipExamplePointingTeams, + TooltipExamplePointingTeamsDark, + TooltipExamplePointingTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx new file mode 100644 index 00000000000000..63ca4d7237694e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; +import TooltipExampleRtl from '../../examples/components/Tooltip/Rtl/TooltipExample.rtl'; + +export default { + component: Tooltip, + title: 'Tooltip', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { TooltipExampleRtl }; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx new file mode 100644 index 00000000000000..2eb743db3e7e79 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; +import TooltipExampleTarget from '../../examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand'; + +export default { + component: Tooltip, + title: 'Tooltip', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export { TooltipExampleTarget }; From d59d5cdd1de8758215cfe6227cdc35be32cb0af2 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 18:13:31 -0800 Subject: [PATCH 41/65] Add Tree stories --- .../docs/src/vr-tests/Tree/Tree.stories.tsx | 9 +++ .../Tree/TreeExampleShorthand.stories.tsx | 50 ++++++++++++++ .../Tree/TreeMultiselectExample.stories.tsx | 69 +++++++++++++++++++ .../TreeTitleCustomizationExample.stories.tsx | 42 +++++++++++ 4 files changed, 170 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx new file mode 100644 index 00000000000000..ce434afebb46bd --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tree/Tree.stories.tsx @@ -0,0 +1,9 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tree } from '@fluentui/react-northstar'; +import TreeExclusiveExample from '../../examples/components/Tree/Types/TreeExclusiveExample.shorthand'; +import TreeInitiallyOpenExampleShorthand from '../../examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand'; + +export default { component: Tree, title: 'Tree' } as ComponentMeta; + +export { TreeExclusiveExample, TreeInitiallyOpenExampleShorthand }; diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx new file mode 100644 index 00000000000000..606a61912886f1 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tree, treeTitleClassName, treeItemClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import TreeExampleShorthand from '../../examples/components/Tree/Types/TreeExample.shorthand'; + +const selectors = { + treeItem: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex})`, + treeTitle: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleClassName}`, +}; + +export default { + component: Tree, + title: 'Tree', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const TreeExampleShorthandTeams = getThemeStoryVariant(TreeExampleShorthand, 'teamsV2'); + +const TreeExampleShorthandTeamsDark = getThemeStoryVariant(TreeExampleShorthand, 'teamsDarkV2'); + +const TreeExampleShorthandTeamsHighContrast = getThemeStoryVariant(TreeExampleShorthand, 'teamsHighContrast'); + +export { + TreeExampleShorthand, + TreeExampleShorthandTeams, + TreeExampleShorthandTeamsDark, + TreeExampleShorthandTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx new file mode 100644 index 00000000000000..3f0fc0b4df652e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tree, treeItemClassName, treeTitleClassName, treeTitleSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant, keys } from '../utilities'; +import TreeMultiselectExample from '../../examples/components/Tree/Usage/TreeMultiselectExample.shorthand'; + +const selectors = { + treeTitle: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleClassName}`, + treeItem: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex})`, + selectionIndicator: (itemIndex: number) => + `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleSlotClassNames.indicator}`, +}; + +export default { + component: Tree, + title: 'Tree', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const TreeMultiselectExampleTeams = getThemeStoryVariant(TreeMultiselectExample, 'teamsV2'); + +const TreeMultiselectExampleTeamsDark = getThemeStoryVariant(TreeMultiselectExample, 'teamsDarkV2'); + +const TreeMultiselectExampleTeamsHighContrast = getThemeStoryVariant(TreeMultiselectExample, 'teamsHighContrast'); + +export { + TreeMultiselectExample, + TreeMultiselectExampleTeams, + TreeMultiselectExampleTeamsDark, + TreeMultiselectExampleTeamsHighContrast, +}; diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx new file mode 100644 index 00000000000000..c9cbae5331081e --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import Screener, { Steps } from 'screener-storybook/src/screener'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Tree, treeItemClassName, treeTitleClassName } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; +import TreeTitleCustomizationExample from '../../examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand'; + +const selectors = { + treeTitle: (itemIndex: number) => `.${treeItemClassName}:nth-of-type(${itemIndex}) .${treeTitleClassName}`, +}; + +export default { + component: Tree, + title: 'Tree', + decorators: [ + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +const TreeTitleCustomizationExampleTeams = getThemeStoryVariant(TreeTitleCustomizationExample, 'teamsV2'); + +const TreeTitleCustomizationExampleTeamsDark = getThemeStoryVariant(TreeTitleCustomizationExample, 'teamsDarkV2'); + +const TreeTitleCustomizationExampleTeamsHighContrast = getThemeStoryVariant( + TreeTitleCustomizationExample, + 'teamsHighContrast', +); + +export { + TreeTitleCustomizationExample, + TreeTitleCustomizationExampleTeams, + TreeTitleCustomizationExampleTeamsDark, + TreeTitleCustomizationExampleTeamsHighContrast, +}; From e4ec66dd192246a9846a954bb8d9e1c1571ec5ac Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 18:14:03 -0800 Subject: [PATCH 42/65] Add Video stories --- .../fluentui/docs/src/vr-tests/Video/Video.stories.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx b/packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx new file mode 100644 index 00000000000000..1a88c202db4934 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/Video/Video.stories.tsx @@ -0,0 +1,8 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentMeta } from '@storybook/react'; +import { Video } from '@fluentui/react-northstar'; +import VideoExample from '../../examples/components/Video/Types/VideoExample.shorthand'; + +export default { component: Video, title: 'Video' } as ComponentMeta; + +export { VideoExample }; From 3e79eaea041ed857fd93f223c093e7b7cbadb86e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 18:14:26 -0800 Subject: [PATCH 43/65] feat: Add getThemeStoryVariant and keys utility functions --- .../utilities/getThemeStoryVariant.tsx | 16 ++++++++++++ .../docs/src/vr-tests/utilities/index.ts | 4 +++ .../docs/src/vr-tests/utilities/utils.ts | 25 +++++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx create mode 100644 packages/fluentui/docs/src/vr-tests/utilities/index.ts create mode 100644 packages/fluentui/docs/src/vr-tests/utilities/utils.ts diff --git a/packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx b/packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx new file mode 100644 index 00000000000000..eaf7f3bc6cd3a5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/utilities/getThemeStoryVariant.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ComponentStory } from '@storybook/react'; +import { Provider, teamsDarkV2Theme, teamsHighContrastTheme, teamsV2Theme } from '@fluentui/react-northstar'; + +const themes = { + teamsV2: teamsV2Theme, + teamsDarkV2: teamsDarkV2Theme, + teamsHighContrast: teamsHighContrastTheme, +} as const; + +export const getThemeStoryVariant = (story: ComponentStory, themeName: keyof typeof themes) => { + const theme = themes[themeName]; + + return { ...story, render: story, decorators: [story => {story()}] }; +}; diff --git a/packages/fluentui/docs/src/vr-tests/utilities/index.ts b/packages/fluentui/docs/src/vr-tests/utilities/index.ts new file mode 100644 index 00000000000000..e8a08c840b97bf --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/utilities/index.ts @@ -0,0 +1,4 @@ +import { getThemeStoryVariant } from './getThemeStoryVariant'; +import { keys } from './utils'; + +export { getThemeStoryVariant, keys }; diff --git a/packages/fluentui/docs/src/vr-tests/utilities/utils.ts b/packages/fluentui/docs/src/vr-tests/utilities/utils.ts new file mode 100644 index 00000000000000..4e41bbf33238e5 --- /dev/null +++ b/packages/fluentui/docs/src/vr-tests/utilities/utils.ts @@ -0,0 +1,25 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { ScreenerRunnerKeys } from '@fluentui/scripts/screener'; + +export const keys: ScreenerRunnerKeys = { + alt: '\uE00A', + control: '\uE009', + enter: '\uE007', + escape: '\uE00C', + return: '\uE006', + shift: '\uE008', + tab: '\uE004', + leftArrow: '\uE012', + upArrow: '\uE013', + rightArrow: '\uE014', + downArrow: '\uE015', + backSpace: '\uE003', + space: '\uE00D', + pageUp: '\uE00E', + pageDown: '\uE00F', + end: '\uE010', + home: '\uE011', + insert: '\uE016', + delete: '\uE017', + command: '\uE03D', +}; From 8bc1268337ed4da1977466c5db32ec5876828982 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 18:42:01 -0800 Subject: [PATCH 44/65] fix: type errors addressed --- ...AttachmentActionExampleShorthand.stories.tsx | 14 ++++++++++---- ...chmentActionableExampleShorthand.stories.tsx | 11 +++++++---- .../Divider/DividerExampleSize.stories.tsx | 14 ++++++++++---- .../RadioGroupVerticalExample.stories.tsx | 17 +++++++++++++---- 4 files changed, 40 insertions(+), 16 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx index 5a0f823724d2b8..d205b8a4585f0f 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import Screener from 'screener-storybook/src/screener'; // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import { Attachment } from '@fluentui/react-northstar'; import screenerSteps from './commonScreenerSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; @@ -14,12 +14,18 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const AttachmentActionExampleShorthandTeams = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsV2'); +const AttachmentActionExampleShorthandTeams = getThemeStoryVariant( + (AttachmentActionExampleShorthand as unknown) as ComponentStory, + 'teamsV2', +); -const AttachmentActionExampleShorthandTeamsDark = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsDarkV2'); +const AttachmentActionExampleShorthandTeamsDark = getThemeStoryVariant( + (AttachmentActionExampleShorthand as unknown) as ComponentStory, + 'teamsDarkV2', +); const AttachmentActionExampleShorthandTeamsHighContrast = getThemeStoryVariant( - AttachmentActionExampleShorthand, + (AttachmentActionExampleShorthand as unknown) as ComponentStory, 'teamsHighContrast', ); diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx index 9d841e55cd7f54..dfee6d6e180e8c 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import Screener from 'screener-storybook/src/screener'; // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import { Attachment } from '@fluentui/react-northstar'; import screenerSteps from './commonScreenerSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; @@ -14,15 +14,18 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant(AttachmentActionableExampleShorthand, 'teamsV2'); +const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant( + (AttachmentActionableExampleShorthand as unknown) as ComponentStory, + 'teamsV2', +); const AttachmentActionableExampleShorthandTeamsDark = getThemeStoryVariant( - AttachmentActionableExampleShorthand, + (AttachmentActionableExampleShorthand as unknown) as ComponentStory, 'teamsDarkV2', ); const AttachmentActionableExampleShorthandTeamsHighContrast = getThemeStoryVariant( - AttachmentActionableExampleShorthand, + (AttachmentActionableExampleShorthand as unknown) as ComponentStory, 'teamsHighContrast', ); diff --git a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx index 2c4d6be0f536ea..244330bacb4d03 100644 --- a/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Divider/DividerExampleSize.stories.tsx @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import { Divider } from '@fluentui/react-northstar'; import { getThemeStoryVariant } from '../utilities'; import DividerExampleSize from '../../examples/components/Divider/Variations/DividerExampleSize.shorthand'; @@ -9,11 +9,17 @@ export default { title: 'Divider', } as ComponentMeta; -const DividerExampleSizeTeams = getThemeStoryVariant(DividerExampleSize, 'teamsV2'); +const DividerExampleSizeTeams = getThemeStoryVariant((DividerExampleSize as unknown) as ComponentStory, 'teamsV2'); -const DividerExampleSizeTeamsDark = getThemeStoryVariant(DividerExampleSize, 'teamsDarkV2'); +const DividerExampleSizeTeamsDark = getThemeStoryVariant( + (DividerExampleSize as unknown) as ComponentStory, + 'teamsDarkV2', +); -const DividerExampleSizeTeamsHighContrast = getThemeStoryVariant(DividerExampleSize, 'teamsHighContrast'); +const DividerExampleSizeTeamsHighContrast = getThemeStoryVariant( + (DividerExampleSize as unknown) as ComponentStory, + 'teamsHighContrast', +); export { DividerExampleSize, diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx index 628fac16b19768..7d54dfc69d51b7 100644 --- a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import Screener, { Steps } from 'screener-storybook/src/screener'; // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import { RadioGroup } from '@fluentui/react-northstar'; import { getThemeStoryVariant, keys } from '../utilities'; import RadioGroupVerticalExample from '../../examples/components/RadioGroup/Types/RadioGroupExample.shorthand'; @@ -15,11 +15,20 @@ export default { ], } as ComponentMeta; -const RadioGroupVerticalExampleTeams = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsV2'); +const RadioGroupVerticalExampleTeams = getThemeStoryVariant( + (RadioGroupVerticalExample as unknown) as ComponentStory, + 'teamsV2', +); -const RadioGroupVerticalExampleTeamsDark = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsDarkV2'); +const RadioGroupVerticalExampleTeamsDark = getThemeStoryVariant( + (RadioGroupVerticalExample as unknown) as ComponentStory, + 'teamsDarkV2', +); -const RadioGroupVerticalExampleTeamsHighContrast = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsHighContrast'); +const RadioGroupVerticalExampleTeamsHighContrast = getThemeStoryVariant( + (RadioGroupVerticalExample as unknown) as ComponentStory, + 'teamsHighContrast', +); export { RadioGroupVerticalExample, From 012a9e9f3d4d32559faae43bd68643238415d79a Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 19:05:23 -0800 Subject: [PATCH 45/65] Add testwrapper to all stories --- packages/fluentui/docs/.storybook/preview.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/fluentui/docs/.storybook/preview.js b/packages/fluentui/docs/.storybook/preview.js index 331981981eb5d8..b6e296edd128c6 100644 --- a/packages/fluentui/docs/.storybook/preview.js +++ b/packages/fluentui/docs/.storybook/preview.js @@ -6,13 +6,12 @@ import Screener from 'screener-storybook/src/screener'; export const parameters = { layout: 'none' }; /** @type {import("@storybook/react").DecoratorFn[]} */ export const decorators = [ - story => {story()}, story => ( - +
{story()}
- + ), ]; From 2fb5354cabb67a7c5ebbeb9f660e2379750e15ba Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 19:06:10 -0800 Subject: [PATCH 46/65] Add storybook scripts to package.json --- packages/fluentui/docs/package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index 86439cfdcdee90..a5ad7798ee482b 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -65,10 +65,12 @@ }, "scripts": { "build": "gulp build:docs", + "build:storybook": "build-storybook -o dist/storybook", "lint": "eslint --ext .js,.ts,.tsx .", "lint:fix": "yarn lint --fix", "start": "gulp docs", "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs", + "start:storybook": "start-storybook", "vr:build": "cross-env NODE_ENV=production gulp screener:build", "vr:test": "gulp screener:runner" } From bbd34bace1be9a486fc3f0d9d0a89fb98002fb35 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 20:28:59 -0800 Subject: [PATCH 47/65] fix: address problematic imported class components --- .../vr-tests/Animation/Animation.stories.tsx | 2 - ...tachmentActionExampleShorthand.stories.tsx | 33 +++++++---- ...mentActionableExampleShorthand.stories.tsx | 30 +++++++--- .../vr-tests/Dropdown/Dropdown.stories.tsx | 2 - .../MenuButton/MenuButton.stories.tsx | 4 +- .../docs/src/vr-tests/Popup/Popup.stories.tsx | 8 --- .../src/vr-tests/Portal/Portal.stories.tsx | 4 +- .../RadioGroup/RadioGroup.stories.tsx | 32 ++++++++-- .../RadioGroupVerticalExample.stories.tsx | 59 ++++++++++++++----- .../docs/src/vr-tests/Ref/Ref.stories.tsx | 9 --- 10 files changed, 118 insertions(+), 65 deletions(-) delete mode 100644 packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx diff --git a/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx b/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx index 9a2ead9e453eaa..117fde8f07603e 100644 --- a/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Animation/Animation.stories.tsx @@ -7,7 +7,6 @@ import AnimationExampleDirection from '../../examples/components/Animation/Types import AnimationExampleDuration from '../../examples/components/Animation/Types/AnimationExampleDuration.shorthand'; import AnimationExampleFillMode from '../../examples/components/Animation/Types/AnimationExampleFillMode.shorthand'; import AnimationExampleIterationCount from '../../examples/components/Animation/Types/AnimationExampleIterationCount.shorthand'; -import AnimationExamplePlayState from '../../examples/components/Animation/Types/AnimationExamplePlayState.shorthand'; import AnimationExampleTimingFunction from '../../examples/components/Animation/Types/AnimationExampleTimingFunction.shorthand'; import AnimationExampleVisible from '../../examples/components/Animation/Usage/AnimationExampleVisible.shorthand'; @@ -20,7 +19,6 @@ export { AnimationExampleDuration, AnimationExampleFillMode, AnimationExampleIterationCount, - AnimationExamplePlayState, AnimationExampleTimingFunction, AnimationExampleVisible, }; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx index d205b8a4585f0f..ec068a4770cba8 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx @@ -2,11 +2,28 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import Screener from 'screener-storybook/src/screener'; // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ComponentMeta } from '@storybook/react'; import { Attachment } from '@fluentui/react-northstar'; +import { CloseIcon, MoreIcon } from '@fluentui/react-icons-northstar'; import screenerSteps from './commonScreenerSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; -import AttachmentActionExampleShorthand from '../../examples/components/Attachment/Slots/AttachmentActionExample.shorthand'; + +const handleClick = action => () => alert(`'${action}' was clicked`); + +const AttachmentActionExampleShorthand = () => ( +
+ , onClick: handleClick('Remove'), title: 'Close' }} + /> + , onClick: handleClick('Show more'), title: 'Show more' }} + /> +
+); export default { component: Attachment, @@ -14,18 +31,12 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const AttachmentActionExampleShorthandTeams = getThemeStoryVariant( - (AttachmentActionExampleShorthand as unknown) as ComponentStory, - 'teamsV2', -); +const AttachmentActionExampleShorthandTeams = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsV2'); -const AttachmentActionExampleShorthandTeamsDark = getThemeStoryVariant( - (AttachmentActionExampleShorthand as unknown) as ComponentStory, - 'teamsDarkV2', -); +const AttachmentActionExampleShorthandTeamsDark = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsDarkV2'); const AttachmentActionExampleShorthandTeamsHighContrast = getThemeStoryVariant( - (AttachmentActionExampleShorthand as unknown) as ComponentStory, + AttachmentActionExampleShorthand, 'teamsHighContrast', ); diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx index dfee6d6e180e8c..8637be79930e5e 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx @@ -2,11 +2,28 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import Screener from 'screener-storybook/src/screener'; // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ComponentMeta } from '@storybook/react'; import { Attachment } from '@fluentui/react-northstar'; import screenerSteps from './commonScreenerSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; -import AttachmentActionableExampleShorthand from '../../examples/components/Attachment/Variations/AttachmentActionableExample.shorthand'; +import { MoreIcon, TableIcon } from '@fluentui/react-icons-northstar'; + +const handleClick = message => e => { + alert(`'${message}' was clicked`); + e.stopPropagation(); +}; + +const AttachmentActionableExampleShorthand = () => ( + } + header="Document.docx" + description="800 Kb" + action={{ icon: , onClick: handleClick('More Action'), title: 'More Action' }} + progress={33} + onClick={handleClick('Attachment')} + /> +); export default { component: Attachment, @@ -14,18 +31,15 @@ export default { decorators: [story => {story()}], } as ComponentMeta; -const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant( - (AttachmentActionableExampleShorthand as unknown) as ComponentStory, - 'teamsV2', -); +const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant(AttachmentActionableExampleShorthand, 'teamsV2'); const AttachmentActionableExampleShorthandTeamsDark = getThemeStoryVariant( - (AttachmentActionableExampleShorthand as unknown) as ComponentStory, + AttachmentActionableExampleShorthand, 'teamsDarkV2', ); const AttachmentActionableExampleShorthandTeamsHighContrast = getThemeStoryVariant( - (AttachmentActionableExampleShorthand as unknown) as ComponentStory, + AttachmentActionableExampleShorthand, 'teamsHighContrast', ); diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx index 3542342de8fbc2..795e92f39f264f 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/Dropdown.stories.tsx @@ -5,7 +5,6 @@ import DropdownExampleFreeform from '../../examples/components/Dropdown/Types/Dr import DropdownExampleInline from '../../examples/components/Dropdown/Types/DropdownExampleInline.shorthand'; import DropdownExampleInverted from '../../examples/components/Dropdown/Types/DropdownExampleInverted.shorthand'; import DropdownExampleSearch from '../../examples/components/Dropdown/Types/DropdownExampleSearch.shorthand'; -import DropdownExampleControlled from '../../examples/components/Dropdown/Usage/DropdownExampleControlled.shorthand'; import DropdownExampleRender from '../../examples/components/Dropdown/Usage/DropdownExampleRender.shorthand'; import DropdownExamplePosition from '../../examples/components/Dropdown/Variations/DropdownExamplePosition.shorthand'; import DropdownExampleSearchMultipleFluid from '../../examples/components/Dropdown/Variations/DropdownExampleSearchMultipleFluid.shorthand'; @@ -19,7 +18,6 @@ export { DropdownExampleInline, DropdownExampleInverted, DropdownExampleSearch, - DropdownExampleControlled, DropdownExampleRender, DropdownExamplePosition, DropdownExampleSearchMultipleFluid, diff --git a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx index 2236279b250386..7694fcbf26967a 100644 --- a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButton.stories.tsx @@ -2,9 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import { MenuButton } from '@fluentui/react-northstar'; import MenuButtonOpenExample from '../../examples/components/MenuButton/State/MenuButtonExampleOpen.shorthand'; -import MenuButtonOnElement from '../../examples/components/MenuButton/Usage/MenuButtonExampleContextMenu.shorthand'; -import MenuButtonExampleOn from '../../examples/components/MenuButton/Usage/MenuButtonExampleOn.shorthand'; export default { component: MenuButton, title: 'MenuButton' } as ComponentMeta; -export { MenuButtonOpenExample, MenuButtonOnElement, MenuButtonExampleOn }; +export { MenuButtonOpenExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx index 7191d98ca0131c..7506363c6aaf50 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/Popup.stories.tsx @@ -9,11 +9,7 @@ import PopupExamplePointing from '../../examples/components/Popup/Types/PopupExa import PopupFocusTrapExample from '../../examples/components/Popup/Types/PopupFocusTrapExample.shorthand'; import PopupExampleAsync from '../../examples/components/Popup/Usage/PopupExampleAsync.shorthand'; import PopupCloseButtonExample from '../../examples/components/Popup/Usage/PopupExampleCloseButton'; -import PopupContextOnElement from '../../examples/components/Popup/Usage/PopupExampleContextOnElement'; import PopupExampleNested from '../../examples/components/Popup/Usage/PopupExampleNested.shorthand'; -import PopupExampleOn from '../../examples/components/Popup/Usage/PopupExampleOn.shorthand'; -import PopupExampleOnMultiple from '../../examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand'; -import PopupExampleOnWithFocusTrap from '../../examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand'; import PopupExampleAutoSize from '../../examples/components/Popup/Variations/PopupExampleAutoSize.shorthand'; import PopupExamplePosition from '../../examples/components/Popup/Variations/PopupExamplePosition.shorthand'; import PopupExampleContainerTransformed from '../../examples/components/Popup/Visual/PopupExampleContainerTransformed'; @@ -31,11 +27,7 @@ export { PopupFocusTrapExample, PopupExampleAsync, PopupCloseButtonExample, - PopupContextOnElement, PopupExampleNested, - PopupExampleOn, - PopupExampleOnMultiple, - PopupExampleOnWithFocusTrap, PopupExampleAutoSize, PopupExamplePosition, PopupExampleContainerTransformed, diff --git a/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx b/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx index fc30b2b8b3fbc8..47dd13fe2a0a2f 100644 --- a/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Portal/Portal.stories.tsx @@ -2,9 +2,7 @@ import { ComponentMeta } from '@storybook/react'; import { Portal } from '@fluentui/react-northstar'; import PortalExampleOpen from '../../examples/components/Portal/State/PortalExampleOpen'; -import PortalExamplePortal from '../../examples/components/Portal/Types/PortalExample.shorthand'; -import PortalExampleFocusTrapped from '../../examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand'; export default { component: Portal, title: 'Portal' } as ComponentMeta; -export { PortalExampleOpen, PortalExamplePortal, PortalExampleFocusTrapped }; +export { PortalExampleOpen }; diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx index 30dce23348087f..0d1d1de3115743 100644 --- a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroup.stories.tsx @@ -1,14 +1,39 @@ +import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; -import { RadioGroup } from '@fluentui/react-northstar'; +import { Divider, RadioGroup } from '@fluentui/react-northstar'; import RadioGroupItemExample from '../../examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand'; import RadioGroupItemExampleCheckedShorthand from '../../examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand'; import RadioGroupItemExampleDisabledShorthand from '../../examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand'; import RadioGroupExampleRtl from '../../examples/components/RadioGroup/Rtl/RadioGroupExample.rtl'; -import RadioGroupColorPickerExample from '../../examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand'; -import RadioGroupVerticalExample from '../../examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand'; import RadioGroupCustomExample from '../../examples/components/RadioGroup/Usage/RadioGroupCustomExample.shorthand'; +const RadioGroupColorPickerExample = () => { + const [selectedValue, setSelectedValue] = React.useState(''); + + return ( +
+ The selected value is: {selectedValue} + + ({ + key: color, + value: color, + name: color, + 'aria-label': color, + variables: { + indicatorColorDefault: color, + indicatorBackgroundColorChecked: color, + indicatorBorderColorDefaultHover: color, + }, + }))} + onCheckedValueChange={(e, props) => setSelectedValue(props.value)} + /> +
+ ); +}; + export default { component: RadioGroup, title: 'RadioGroup' } as ComponentMeta; export { @@ -17,6 +42,5 @@ export { RadioGroupItemExampleDisabledShorthand, RadioGroupExampleRtl, RadioGroupColorPickerExample, - RadioGroupVerticalExample, RadioGroupCustomExample, }; diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx index 7d54dfc69d51b7..3373da05127913 100644 --- a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx @@ -2,10 +2,48 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies import Screener, { Steps } from 'screener-storybook/src/screener'; // eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { RadioGroup } from '@fluentui/react-northstar'; +import { ComponentMeta } from '@storybook/react'; +import { Divider, RadioGroup } from '@fluentui/react-northstar'; import { getThemeStoryVariant, keys } from '../utilities'; -import RadioGroupVerticalExample from '../../examples/components/RadioGroup/Types/RadioGroupExample.shorthand'; + +const RadioGroupVerticalExample = () => { + const [selectedValue, setSelectedValue] = React.useState(''); + + const getItems = () => { + return [ + { + name: 'pizza', + key: 'Capricciosa', + label: 'Capricciosa', + value: 'capricciosa', + }, + { + name: 'pizza', + key: 'Prosciutto', + label: 'Prosciutto', + value: 'prosciutto', + disabled: true, + }, + { + name: 'pizza', + key: 'Pepperoni', + label: 'Pepperoni', + value: 'pepperoni', + }, + ]; + }; + + const handleChange = (e, props) => { + setSelectedValue(props.value); + }; + return ( +
+ The selected value is: {selectedValue} + + +
+ ); +}; export default { component: RadioGroup, @@ -15,20 +53,11 @@ export default { ], } as ComponentMeta; -const RadioGroupVerticalExampleTeams = getThemeStoryVariant( - (RadioGroupVerticalExample as unknown) as ComponentStory, - 'teamsV2', -); +const RadioGroupVerticalExampleTeams = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsV2'); -const RadioGroupVerticalExampleTeamsDark = getThemeStoryVariant( - (RadioGroupVerticalExample as unknown) as ComponentStory, - 'teamsDarkV2', -); +const RadioGroupVerticalExampleTeamsDark = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsDarkV2'); -const RadioGroupVerticalExampleTeamsHighContrast = getThemeStoryVariant( - (RadioGroupVerticalExample as unknown) as ComponentStory, - 'teamsHighContrast', -); +const RadioGroupVerticalExampleTeamsHighContrast = getThemeStoryVariant(RadioGroupVerticalExample, 'teamsHighContrast'); export { RadioGroupVerticalExample, diff --git a/packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx b/packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx deleted file mode 100644 index e2611a87112783..00000000000000 --- a/packages/fluentui/docs/src/vr-tests/Ref/Ref.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { ComponentMeta } from '@storybook/react'; -import { Ref } from '@fluentui/react-northstar'; -import RefExample from '../../examples/components/Ref/Types/RefExample.shorthand'; -import RefForwardingExample from '../../examples/components/Ref/Types/RefForwardingExample.shorthand'; - -export default { component: Ref, title: 'Ref' } as ComponentMeta; - -export { RefExample, RefForwardingExample }; From bb962fafd58f6ec853c6244dbc737e47af52bb38 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 21:46:14 -0800 Subject: [PATCH 48/65] fix: RTL stories now display correctly --- packages/fluentui/docs/.storybook/preview.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/fluentui/docs/.storybook/preview.js b/packages/fluentui/docs/.storybook/preview.js index b6e296edd128c6..93a606a0ba906d 100644 --- a/packages/fluentui/docs/.storybook/preview.js +++ b/packages/fluentui/docs/.storybook/preview.js @@ -6,13 +6,17 @@ import Screener from 'screener-storybook/src/screener'; export const parameters = { layout: 'none' }; /** @type {import("@storybook/react").DecoratorFn[]} */ export const decorators = [ - story => ( - -
- {story()} -
- - ), + (story, context) => { + const isRtl = context.id.toLowerCase().includes('rtl'); + + return ( + +
+ {story()} +
+ + ); + }, ]; // For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app From 21139e9c9d0afbb2786ccb7838f3072e1e840672 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 10 Nov 2022 22:18:06 -0800 Subject: [PATCH 49/65] fix(Accordion): add missing .end() call --- .../vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx index 726c60052d5c49..296e4265e05736 100644 --- a/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx @@ -14,7 +14,8 @@ export default { {story()} From e1b3ac0b9a9767295cbc61e02da3762efbb38442 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 16 Nov 2022 15:54:32 -0800 Subject: [PATCH 50/65] Replace Screener tags with StoryWright --- .../AccordionExampleCustomTitle.stories.tsx | 6 +++--- .../vr-tests/Alert/AlertExampleDanger.stories.tsx | 8 ++++---- .../Alert/AlertExampleDismissible.stories.tsx | 8 ++++---- .../vr-tests/Alert/AlertExampleInfo.stories.tsx | 8 ++++---- .../src/vr-tests/Alert/AlertExampleOof.stories.tsx | 8 ++++---- .../vr-tests/Alert/AlertExampleUrgent.stories.tsx | 8 ++++---- .../docs/src/vr-tests/Alert/commonScreenerSteps.ts | 6 +++--- .../AttachmentActionExampleShorthand.stories.tsx | 6 +++--- ...ttachmentActionableExampleShorthand.stories.tsx | 6 +++--- .../src/vr-tests/Attachment/commonScreenerSteps.ts | 6 +++--- .../src/vr-tests/Button/ButtonExample.stories.tsx | 6 +++--- .../Button/ButtonExampleContentAndIcon.stories.tsx | 6 +++--- .../Button/ButtonExampleDisabled.stories.tsx | 6 +++--- .../Button/ButtonExampleTextShorthand.stories.tsx | 6 +++--- .../Button/ButtonExampleWithTooltip.stories.tsx | 6 +++--- ...ButtonGroupCircularExampleShorthand.stories.tsx | 6 +++--- .../Button/ButtonGroupExampleShorthand.stories.tsx | 6 +++--- .../src/vr-tests/Button/commonScreenerSteps.ts | 6 +++--- .../vr-tests/Card/CardExampleFocusable.stories.tsx | 4 ++-- .../vr-tests/Checkbox/CheckboxExample.stories.tsx | 6 +++--- .../CheckboxExampleCheckedMixed.stories.tsx | 6 +++--- .../Checkbox/CheckboxExampleToggle.stories.tsx | 6 +++--- .../src/vr-tests/Checkbox/commonScreenerSteps.ts | 6 +++--- .../Datepicker/DatepickerCellExample.stories.tsx | 6 +++--- .../DatepickerExampleClearable.stories.tsx | 6 +++--- ...atepickerExampleLocalizationStrings.stories.tsx | 6 +++--- .../DatepickerExampleMinMaxDate.stories.tsx | 6 +++--- .../DatepickerExampleNoInput.stories.tsx | 6 +++--- .../DatepickerExampleRequired.stories.tsx | 6 +++--- .../DatepickerExampleRestrictedDates.stories.tsx | 6 +++--- ...ckerExampleStandaloneCalendarButton.stories.tsx | 6 +++--- .../Datepicker/DatepickerExampleToday.stories.tsx | 6 +++--- .../Datepicker/DatepickerExampleWeek.stories.tsx | 6 +++--- .../Datepicker/DatepickerFormatExample.stories.tsx | 6 +++--- .../DatepickerHeaderCellExample.stories.tsx | 6 +++--- .../Dialog/DialogExampleBackdrop.stories.tsx | 6 +++--- .../Dialog/DialogExampleContent.stories.tsx | 6 +++--- .../Dialog/DialogExampleFooter.stories.tsx | 6 +++--- .../Dialog/DialogExampleFullWidth.stories.tsx | 6 +++--- .../Dialog/DialogExampleHeaderAction.stories.tsx | 6 +++--- .../vr-tests/Dialog/DialogExampleRtl.stories.tsx | 6 +++--- .../Dialog/DialogExampleScroll.stories.tsx | 6 +++--- .../Dialog/DialogExampleZoomContent.stories.tsx | 6 +++--- .../src/vr-tests/Dialog/commonScreenerSteps.ts | 6 +++--- .../Dropdown/DropdownClearableExample.stories.tsx | 4 ++-- .../vr-tests/Dropdown/DropdownExample.stories.tsx | 14 ++++++++------ .../Dropdown/DropdownExampleDisabled.stories.tsx | 10 ++++++---- .../DropdownExampleHeaderMessage.stories.tsx | 6 +++--- .../Dropdown/DropdownExampleLoading.stories.tsx | 12 +++++++----- .../Dropdown/DropdownExampleMultiple.stories.tsx | 6 +++--- .../Dropdown/DropdownExamplePosition.stories.tsx | 6 ++++-- .../Dropdown/DropdownExampleRtl.stories.tsx | 6 +++--- .../DropdownExampleSearchMultiple.stories.tsx | 6 +++--- .../Input/InputExampleClearable.stories.tsx | 6 +++--- .../Input/InputExampleLabelShorthand.stories.tsx | 6 +++--- .../vr-tests/List/ListExampleNavigable.stories.tsx | 10 ++++++---- .../List/ListExampleSelectable.stories.tsx | 10 ++++++---- .../docs/src/vr-tests/Menu/MenuExample.stories.tsx | 6 +++--- .../vr-tests/Menu/MenuExampleIconOnly.stories.tsx | 6 +++--- .../vr-tests/Menu/MenuExamplePointing.stories.tsx | 6 +++--- .../MenuExamplePositioningShorthand.stories.tsx | 6 +++--- ...nuExamplePositioningUpdateShorthand.stories.tsx | 6 +++--- .../Menu/MenuExampleToolbarShorthand.stories.tsx | 6 +++--- .../Menu/MenuExampleUnderlined.stories.tsx | 6 +++--- .../vr-tests/Menu/MenuExampleVertical.stories.tsx | 6 +++--- .../Menu/MenuExampleVerticalPointing.stories.tsx | 6 +++--- .../vr-tests/Menu/MenuExampleWithIcons.stories.tsx | 6 +++--- .../Menu/MenuExampleWithSubMenu.stories.tsx | 6 +++--- .../Menu/MenuExampleWithSubMenuHover.stories.tsx | 6 +++--- .../Menu/MenuExampleWithTooltip.stories.tsx | 6 +++--- .../docs/src/vr-tests/Menu/commonScreenerSteps.ts | 6 +++--- .../MenuButton/MenuButtonExampleRtl.stories.tsx | 6 +++--- .../Popup/PopperExamplePositioning.stories.tsx | 8 ++++---- .../PopperExampleVisibilityModifiers.stories.tsx | 6 +++--- .../Popup/PopupControlledExample.stories.tsx | 8 ++++---- .../Popup/PopupCustomTargetExample.stories.tsx | 6 ++++-- .../src/vr-tests/Popup/PopupExample.stories.tsx | 6 ++++-- .../vr-tests/Popup/PopupExampleOffset.stories.tsx | 4 ++-- .../src/vr-tests/Popup/PopupExampleRtl.stories.tsx | 6 ++++-- .../vr-tests/Popup/PopupScrollExample.stories.tsx | 6 +++--- ...ProviderExampleFocusBorderShorthand.stories.tsx | 6 +++--- .../RadioGroupVerticalExample.stories.tsx | 6 ++++-- .../vr-tests/Slider/SliderExampleRtl.stories.tsx | 10 +++++----- .../Slider/SliderExampleShorthand.stories.tsx | 10 +++++----- .../src/vr-tests/Slider/commonScreenerSteps.ts | 2 +- .../SplitButtonExamplePrimaryShorthand.stories.tsx | 6 +++--- ...itButtonPositioningExampleShorthand.stories.tsx | 6 ++++-- .../vr-tests/TextArea/TextAreaExample.stories.tsx | 6 ++++-- .../ToolbarExampleActionPopupInMenu.stories.tsx | 6 +++--- .../ToolbarExampleEditorShorthand.stories.tsx | 6 ++++-- .../ToolbarExampleMenuShorthand.stories.tsx | 6 ++++-- ...lbarExampleMenuWithSubmenuShorthand.stories.tsx | 6 +++--- .../Toolbar/ToolbarExampleOverflow.stories.tsx | 6 +++--- ...ExampleOverflowPositioningShorthand.stories.tsx | 6 +++--- ...mpleOverflowPositioningShorthandRtl.stories.tsx | 6 +++--- .../Toolbar/ToolbarExamplePopupInMenu.stories.tsx | 6 +++--- .../ToolbarExamplePopupShorthand.stories.tsx | 6 +++--- .../Toolbar/ToolbarExampleShorthand.stories.tsx | 6 +++--- .../Toolbar/ToolbarExampleVariables.stories.tsx | 6 +++--- .../vr-tests/Tooltip/TooltipExample.stories.tsx | 6 ++++-- ...ooltipExampleDialogContentShorthand.stories.tsx | 6 +++--- .../Tooltip/TooltipExamplePointing.stories.tsx | 10 ++++++---- .../vr-tests/Tooltip/TooltipExampleRtl.stories.tsx | 6 +++--- .../Tooltip/TooltipExampleTarget.stories.tsx | 6 +++--- .../vr-tests/Tree/TreeExampleShorthand.stories.tsx | 6 +++--- .../Tree/TreeMultiselectExample.stories.tsx | 6 +++--- .../Tree/TreeTitleCustomizationExample.stories.tsx | 6 +++--- 107 files changed, 358 insertions(+), 326 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx index 296e4265e05736..9df7d4734e8439 100644 --- a/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Accordion/AccordionExampleCustomTitle.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Accordion, accordionTitleSlotClassNames } from '@fluentui/react-northstar'; @@ -11,14 +11,14 @@ export default { title: 'Accordion', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx index cb47f5336415da..936001ad4eeca5 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger.shorthand'; @@ -12,8 +12,8 @@ export default { component: Alert, title: 'Alert', decorators: [ - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx index dd09fe3dfc46ca..b1750d25b97f2f 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleDismissible from '../../examples/components/Alert/Types/AlertExampleDismissible.shorthand'; @@ -12,8 +12,8 @@ export default { component: Alert, title: 'Alert', decorators: [ - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx index 6bfb1474ce3685..758f476450bca0 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo.shorthand'; @@ -12,8 +12,8 @@ export default { component: Alert, title: 'Alert', decorators: [ - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx index dd8d8a8ec58c22..fd91a73005fa17 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs.shorthand'; @@ -13,8 +13,8 @@ export default { component: Alert, title: 'Alert', decorators: [ - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx index cd3dc7f3d2e76d..417ab3315a9738 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusScreenerSteps, getHoverScreenerSteps } from './commonScreenerSteps'; +import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent.shorthand'; @@ -12,8 +12,8 @@ export default { component: Alert, title: 'Alert', decorators: [ - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts index 0a776661c7f6bf..b04981a6f8660a 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { alertDismissActionClassName } from '@fluentui/react-northstar'; import { keys } from '../utilities/utils'; @@ -7,14 +7,14 @@ const selectors = { dismissAction: `.${alertDismissActionClassName}`, }; -export const getFocusScreenerSteps = new Steps() +export const getFocusStoryWrightSteps = new Steps() .keys('body', keys.tab) .snapshot('Focuses the action button') .hover(selectors.dismissAction) .snapshot('Hovers the focused action button') .end(); -export const getHoverScreenerSteps = new Steps() +export const getHoverStoryWrightSteps = new Steps() .hover(selectors.dismissAction) .snapshot('Hovers the action button') .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx index ec068a4770cba8..e61a2c34b9fbff 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionExampleShorthand.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Attachment } from '@fluentui/react-northstar'; import { CloseIcon, MoreIcon } from '@fluentui/react-icons-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; const handleClick = action => () => alert(`'${action}' was clicked`); @@ -28,7 +28,7 @@ const AttachmentActionExampleShorthand = () => ( export default { component: Attachment, title: 'Attachment', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const AttachmentActionExampleShorthandTeams = getThemeStoryVariant(AttachmentActionExampleShorthand, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx index 8637be79930e5e..933bf93c02e3d5 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Attachment/AttachmentActionableExampleShorthand.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Attachment } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import { MoreIcon, TableIcon } from '@fluentui/react-icons-northstar'; @@ -28,7 +28,7 @@ const AttachmentActionableExampleShorthand = () => ( export default { component: Attachment, title: 'Attachment', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const AttachmentActionableExampleShorthandTeams = getThemeStoryVariant(AttachmentActionableExampleShorthand, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts index 5df11a3ad4934c..4b747cba1f10e3 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts @@ -1,5 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { attachmentClassName, attachmentActionClassName } from '@fluentui/react-northstar'; import { keys } from '../utilities/utils'; @@ -8,7 +8,7 @@ const selectors = { action: `.${attachmentActionClassName}`, }; -const screenerSteps = new Steps() +const StoryWrightSteps = new Steps() .hover(selectors.root) .snapshot('Hovers root') .keys('body', keys.tab) @@ -20,4 +20,4 @@ const screenerSteps = new Steps() .snapshot('Focuses action') .end(); -export default screenerSteps; +export default StoryWrightSteps; diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx index ee8ff1a0f9a451..04f52023ca6067 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExample.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonExample from '../../examples/components/Button/Types/ButtonExample.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonExampleTeams = getThemeStoryVariant(ButtonExample, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx index d7fd7aec1d9ded..ec12f635cf3126 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleContentAndIcon.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonExampleContentAndIcon from '../../examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonExampleContentAndIconTeams = getThemeStoryVariant(ButtonExampleContentAndIcon, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx index e07f90ae65ba31..9a36eeef45b9a2 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleDisabled.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonExampleDisabled from '../../examples/components/Button/States/ButtonExampleDisabled.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonExampleDisabledTeams = getThemeStoryVariant(ButtonExampleDisabled, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx index e71d20912d341a..9ceed7b8cb59a4 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleTextShorthand.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonExampleTextShorthand from '../../examples/components/Button/Types/ButtonExampleText.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonExampleTextShorthandTeams = getThemeStoryVariant(ButtonExampleTextShorthand, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx index 94e898c5589dc3..92c3762e737b55 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonExampleWithTooltip.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonExampleWithTooltip from '../../examples/components/Button/Usage/ButtonExampleWithTooltip.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonExampleWithTooltipTeams = getThemeStoryVariant(ButtonExampleWithTooltip, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx index 900200861cce8a..35d75f5371a2ed 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupCircularExampleShorthand.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonGroupCircularExampleShorthand from '../../examples/components/Button/Groups/ButtonGroupCircularExample.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonGroupCircularExampleShorthandTeams = getThemeStoryVariant(ButtonGroupCircularExampleShorthand, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx index ebfb938902b8d6..8f93f0dc9f798a 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Button/ButtonGroupExampleShorthand.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Button } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import ButtonGroupExampleShorthand from '../../examples/components/Button/Groups/ButtonGroupExample.shorthand'; export default { component: Button, title: 'Button', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const ButtonGroupExampleShorthandTeams = getThemeStoryVariant(ButtonGroupExampleShorthand, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts index 704a3e91153c58..96bc53130faac8 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts @@ -1,11 +1,11 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { buttonClassName } from '@fluentui/react-northstar'; import { keys } from '../utilities/utils'; const button = `.${buttonClassName}`; -const screenerSteps = new Steps() +const StoryWrightSteps = new Steps() .hover(button) .snapshot('Hovers the first button') .click(button) @@ -14,4 +14,4 @@ const screenerSteps = new Steps() .snapshot('Focuses on the second button') .end(); -export default screenerSteps; +export default StoryWrightSteps; diff --git a/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx index 184192f20bdd19..c948debcc150d7 100644 --- a/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Card } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Card', decorators: [ story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx index 0e6ee49832097e..b7484ab19838d0 100644 --- a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExample.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Checkbox } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import CheckboxExample from '../../examples/components/Checkbox/Types/CheckboxExample.shorthand'; export default { component: Checkbox, title: 'Checkbox', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { CheckboxExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx index c28973817138c8..f63dacc50b601b 100644 --- a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleCheckedMixed.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Checkbox } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import CheckboxExampleCheckedMixed from '../../examples/components/Checkbox/States/CheckboxExampleCheckedMixed'; export default { component: Checkbox, title: 'Checkbox', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const CheckboxExampleCheckedMixedTeams = getThemeStoryVariant(CheckboxExampleCheckedMixed, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx index 94f4762ebc0bf5..9e1091650ad445 100644 --- a/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/CheckboxExampleToggle.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Checkbox } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import CheckboxExampleToggle from '../../examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand'; export default { component: Checkbox, title: 'Checkbox', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { CheckboxExampleToggle }; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts index c717834619f550..e271d9c57783cc 100644 --- a/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts @@ -1,13 +1,13 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { checkboxClassName } from '@fluentui/react-northstar'; import { keys } from '../utilities'; -const screenerSteps = new Steps() +const StoryWrightSteps = new Steps() .click(`.${checkboxClassName}`) .snapshot('Checks checkbox') .keys('body', keys.tab) .snapshot('Focuses checkbox') .end(); -export default screenerSteps; +export default StoryWrightSteps; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx index c4758d286e522d..cf9cb5319849ba 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerCellExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, inputClassName } from '@fluentui/react-northstar'; @@ -13,7 +13,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx index e50f0d1ccbc936..64af91cd11a4c5 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleClearable.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, inputClassName } from '@fluentui/react-northstar'; @@ -13,7 +13,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx index dbc7e2a7cc5c5c..59fe8a14216a19 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleLocalizationStrings.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; @@ -12,9 +12,9 @@ export default { title: 'Datepicker', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx index 5d1d8f27b554dc..ce0397d377a0a9 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleMinMaxDate.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName, datepickerCalendarHeaderActionClassName } from '@fluentui/react-northstar'; @@ -13,7 +13,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx index 033d65a52a2393..1ae0ada3dbac79 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleNoInput.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName, inputClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx index a93a6f0e4fafa6..fedb0e323842c2 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRequired.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; @@ -13,7 +13,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx index 68268574ed597b..00869d7137a360 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleRestrictedDates.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; @@ -12,9 +12,9 @@ export default { title: 'Datepicker', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx index 19ae437ee69cb3..c668c56784679f 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleStandaloneCalendarButton.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; @@ -12,9 +12,9 @@ export default { title: 'Datepicker', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx index 851973bfff0cf8..e7e18196f1fe08 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleToday.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName } from '@fluentui/react-northstar'; @@ -13,7 +13,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx index bccd2f3ec58d39..4b57bd595750cf 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerExampleWeek.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, buttonClassName, datepickerCalendarCellClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx index a151c7c6023304..d95dafcec6726f 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerFormatExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, inputClassName } from '@fluentui/react-northstar'; @@ -13,7 +13,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx index c284691c00bc84..d78737cd37672d 100644 --- a/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Datepicker/DatepickerHeaderCellExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Datepicker, datepickerCalendarHeaderCellClassName, inputClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Datepicker', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx index ec16c9182319d1..b52b282bacda4e 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleBackdrop.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import DialogExampleBackdrop from '../../examples/components/Dialog/Variations/DialogExampleBackdrop.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const DialogExampleBackdropTeams = getThemeStoryVariant(DialogExampleBackdrop, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx index a45ddcc5b5d561..81e6d8ee80e0be 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleContent.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import DialogExampleContent from '../../examples/components/Dialog/Content/DialogExampleContent.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const DialogExampleContentTeams = getThemeStoryVariant(DialogExampleContent, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx index d4605b7b592cdd..1a06d2da20563f 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFooter.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import DialogExampleFooter from '../../examples/components/Dialog/Content/DialogExampleFooter.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { DialogExampleFooter }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx index 8d8293dbffa9b3..6b56ddc7c88932 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleFullWidth.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import DialogExampleFullWidth from '../../examples/components/Dialog/Content/DialogExampleFullWidth.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { DialogExampleFullWidth }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx index 59d317ddcd8556..213b5c8cbd39c4 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleHeaderAction.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import DialogExampleHeaderAction from '../../examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const DialogExampleHeaderActionTeams = getThemeStoryVariant(DialogExampleHeaderAction, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx index 75b38ba755d45d..a51568d6611151 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleRtl.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import DialogExampleRtl from '../../examples/components/Dialog/Rtl/DialogExample.rtl'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { DialogExampleRtl }; diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx index 46e2c0707b8b93..e8facf50a6d209 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleScroll.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import DialogExampleScroll from '../../examples/components/Dialog/Variations/DialogExampleScroll.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const DialogExampleScrollTeams = getThemeStoryVariant(DialogExampleScroll, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx index be389bb24dd6cc..e83155f52d6473 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dialog/DialogExampleZoomContent.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dialog } from '@fluentui/react-northstar'; -import screenerSteps from './commonScreenerSteps'; +import StoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import DialogExampleZoomContent from '../../examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand'; export default { component: Dialog, title: 'Dialog', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const DialogExampleZoomContentTeams = getThemeStoryVariant(DialogExampleZoomContent, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts index ea61e8af551cbd..0a8740e2157875 100644 --- a/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts @@ -1,9 +1,9 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { buttonClassName } from '@fluentui/react-northstar'; const button = `.${buttonClassName}`; -const screenerSteps = new Steps().click(button).snapshot('Clicks the trigger button').end(); +const StoryWrightSteps = new Steps().click(button).snapshot('Clicks the trigger button').end(); -export default screenerSteps; +export default StoryWrightSteps; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx index c8b4d004627222..495664a9eba75c 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownClearableExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -23,7 +23,7 @@ const steps = new Steps() export default { component: Dropdown, title: 'Dropdown', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { DropdownClearableExample }; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx index c93a37713d9fc5..7d9d42bdc69d45 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -17,10 +17,12 @@ export default { title: 'Dropdown', decorators: [ story => ( - {story()} + + {story()} + ), story => ( - {story()} - + ), story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx index 57ce026447c207..b7cc64ca2860dc 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleDisabled.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar'; @@ -17,12 +17,14 @@ export default { title: 'Dropdown', decorators: [ story => ( - + {story()} - + ), story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx index 07f4e46a3c6f42..e72eadd9b8b77e 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleHeaderMessage.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -15,9 +15,9 @@ export default { title: 'Dropdown', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx index dc883f80c9a989..05ee682998589d 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar'; @@ -17,14 +17,16 @@ export default { title: 'Dropdown', decorators: [ story => ( - + {story()} - + ), story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx index 8d92f6ad1d6216..28af72c92ea000 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleMultiple.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames, dropdownSelectedItemSlotClassNames } from '@fluentui/react-northstar'; @@ -18,7 +18,7 @@ export default { title: 'Dropdown', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx index 3327327d502867..e464cb567129cc 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExamplePosition.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -15,7 +15,9 @@ export default { title: 'Dropdown', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx index 6fff2461f4d6a7..03feabd3142409 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleRtl.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -16,7 +16,7 @@ export default { title: 'Dropdown', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx index 9a972c854aa9c8..82294887f18187 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSearchInputSlotClassNames, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -19,7 +19,7 @@ export default { title: 'Dropdown', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx index 2d7dd051cf0d29..0f8d8e21738fad 100644 --- a/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Input/InputExampleClearable.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Input, inputClassName } from '@fluentui/react-northstar'; @@ -12,11 +12,11 @@ export default { title: 'Input', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx index 3ce60940108de2..ff853d0b38a6bd 100644 --- a/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Input/InputExampleLabelShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Input } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Input', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx index 6c8f9093bbfbb7..ebb2c7906398fb 100644 --- a/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { List, listItemClassName, listClassName } from '@fluentui/react-northstar'; @@ -17,7 +17,7 @@ export default { title: 'List', decorators: [ story => ( - {story()} - + + ), + story => ( + {story()} ), - story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx index 73b9e8a6ad9683..83ca88878c1227 100644 --- a/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { List, listItemClassName, listClassName } from '@fluentui/react-northstar'; @@ -17,7 +17,7 @@ export default { title: 'List', decorators: [ story => ( - {story()} - + + ), + story => ( + {story()} ), - story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx index 4ea748fcb7aa6e..5fc97487cb5b63 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExample.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import MenuExample from '../../examples/components/Menu/Slots/MenuExampleSlot.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const MenuExampleTeams = getThemeStoryVariant(MenuExample, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx index b3d5a9eb855a35..8889264b2847bd 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleIconOnly.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import MenuExampleIconOnly from '../../examples/components/Menu/Slots/MenuExampleIconOnly.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const MenuExampleIconOnlyTeams = getThemeStoryVariant(MenuExampleIconOnly, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx index 65a367a775054b..70e05bf89284bb 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePointing.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import MenuExamplePointing from '../../examples/components/Menu/Types/MenuExamplePointing.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const MenuExamplePointingTeams = getThemeStoryVariant(MenuExamplePointing, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx index 05fc10f0300fe4..396cc9eb582a05 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; @@ -11,7 +11,7 @@ export default { title: 'Menu', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx index d175bc2d229cb9..44d20004f67e74 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExamplePositioningUpdateShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; @@ -11,7 +11,7 @@ export default { title: 'Menu', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx index f3a9e175391c0d..1e3281b3aae120 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu, menuClassName } from '@fluentui/react-northstar'; @@ -18,7 +18,7 @@ export default { title: 'Menu', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx index b02159685cfbcc..3c15c156d962a5 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleUnderlined.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import MenuExampleUnderlined from '../../examples/components/Menu/Types/MenuExampleUnderlined.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; const MenuExampleUnderlinedTeams = getThemeStoryVariant(MenuExampleUnderlined, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx index 2d3af798fca451..71ebb9f84e6b5b 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVertical.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu, menuClassName } from '@fluentui/react-northstar'; @@ -17,7 +17,7 @@ export default { title: 'Menu', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx index 55c992f69cf7ea..f115f44d8f9e97 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleVerticalPointing.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import MenuExampleVerticalPointing from '../../examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { MenuExampleVerticalPointing }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx index 34a17fcdbba3bb..d24d38bf0cc58d 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithIcons.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import MenuExampleWithIcons from '../../examples/components/Menu/Slots/MenuExampleWithIcons.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { MenuExampleWithIcons }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx index f41c0b00d3606e..829f3c38f5627a 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenu.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu } from '@fluentui/react-northstar'; -import getScreenerSteps from './commonScreenerSteps'; +import getStoryWrightSteps from './commonStoryWrightSteps'; import MenuExampleWithSubMenu from '../../examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand'; export default { component: Menu, title: 'Menu', - decorators: [story => {story()}], + decorators: [story => {story()}], } as ComponentMeta; export { MenuExampleWithSubMenu }; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx index 42c685686b8441..e75a990215a1a9 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithSubMenuHover.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu, menuClassName } from '@fluentui/react-northstar'; @@ -16,7 +16,7 @@ export default { title: 'Menu', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx index a3b7a65923eb09..b32d8a0d1ac3e7 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu, menuClassName } from '@fluentui/react-northstar'; @@ -17,7 +17,7 @@ export default { title: 'Menu', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts index b23b01a6803cac..469f05d57a06ec 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { menuClassName } from '@fluentui/react-northstar'; import { keys } from '../utilities'; @@ -8,7 +8,7 @@ export const selectors = { item: (itemIndex: number) => `.${menuClassName} li:nth-child(${itemIndex}) a`, }; -const getScreenerSteps = ({ vertical = false, startItem = 2, endItem = 3 }) => +const getStoryWrightSteps = ({ vertical = false, startItem = 2, endItem = 3 }) => new Steps() .hover(selectors.item(startItem)) .snapshot('Hovers 2nd item (hover state styles)') @@ -20,4 +20,4 @@ const getScreenerSteps = ({ vertical = false, startItem = 2, endItem = 3 }) => .snapshot('Navigates to previous item (active and focus state styles)') .end(); -export default getScreenerSteps; +export default getStoryWrightSteps; diff --git a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx index d79634649f55b3..d796bf56c87cdb 100644 --- a/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/MenuButton/MenuButtonExampleRtl.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { MenuButton, buttonClassName } from '@fluentui/react-northstar'; @@ -11,9 +11,9 @@ export default { title: 'MenuButton', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx index 12c49e7b33ff65..06e9b5520b86de 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopperExamplePositioning.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup } from '@fluentui/react-northstar'; @@ -11,8 +11,8 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx index d545f84d6c33c5..70f85c86c05451 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopperExampleVisibilityModifiers.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup } from '@fluentui/react-northstar'; @@ -11,7 +11,7 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx index e929a0693ee7e2..66e9ce8ec69d5b 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupControlledExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup, buttonClassName, dropdownSlotClassNames } from '@fluentui/react-northstar'; @@ -18,13 +18,13 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx index cc4335e5bec575..7369cbb087baed 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupCustomTargetExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup, buttonClassName } from '@fluentui/react-northstar'; @@ -11,7 +11,9 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx index b0c7b99518607b..3d0412136220ed 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup, buttonClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,9 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx index 8f499cf85cc736..b5b0f053396fc0 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleOffset.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup, buttonClassName } from '@fluentui/react-northstar'; @@ -15,7 +15,7 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx index 9ac19220857963..77dae9f8c125dd 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupExampleRtl.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup, buttonClassName } from '@fluentui/react-northstar'; @@ -11,7 +11,9 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx index 7e0b7baa10e60f..8880c4a33da750 100644 --- a/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Popup/PopupScrollExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Popup, buttonClassName } from '@fluentui/react-northstar'; @@ -17,7 +17,7 @@ export default { title: 'Popup', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx index 18b8202cf4af01..1195b356ea0a6e 100644 --- a/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Provider, buttonClassName } from '@fluentui/react-northstar'; @@ -14,7 +14,7 @@ export default { title: 'Provider', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx index 3373da05127913..e924c112a9b8cc 100644 --- a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Divider, RadioGroup } from '@fluentui/react-northstar'; @@ -49,7 +49,9 @@ export default { component: RadioGroup, title: 'RadioGroup', decorators: [ - story => {story()}, + story => ( + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx index b5653da164e3e8..4c8784c7c923bd 100644 --- a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleRtl.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Slider } from '@fluentui/react-northstar'; -import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonScreenerSteps'; +import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import SliderExampleRtl from '../../examples/components/Slider/Rtl/SliderExample.rtl'; @@ -12,9 +12,9 @@ export default { component: Slider, title: 'Slider', decorators: [ - story => {story()}, - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx index e0f19748b43800..9f3d51aa5f4279 100644 --- a/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Slider/SliderExampleShorthand.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener from 'screener-storybook/src/screener'; +import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Slider } from '@fluentui/react-northstar'; -import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonScreenerSteps'; +import { focusSliderSteps, rightArrowSteps, upArrowSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities'; import SliderExampleShorthand from '../../examples/components/Slider/Types/SliderExample.shorthand'; @@ -12,9 +12,9 @@ export default { component: Slider, title: 'Slider', decorators: [ - story => {story()}, - story => {story()}, - story => {story()}, + story => {story()}, + story => {story()}, + story => {story()}, ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts index 950e65a873fea1..fbff83a5af76a2 100644 --- a/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'screener-storybook/src/screener'; +import { Steps } from 'storywright'; import { sliderSlotClassNames } from '@fluentui/react-northstar'; import { keys } from '../utilities'; diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx index 02615ee3a0e003..b99c7c907e65b2 100644 --- a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonExamplePrimaryShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { SplitButton, splitButtonToggleClassName } from '@fluentui/react-northstar'; @@ -15,9 +15,9 @@ export default { title: 'SplitButton', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx index c5d197f5f08b05..60e3d31288cd1a 100644 --- a/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/SplitButton/SplitButtonPositioningExampleShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { SplitButton, splitButtonToggleClassName } from '@fluentui/react-northstar'; @@ -15,7 +15,9 @@ export default { title: 'SplitButton', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx index 6495574e7538dd..6796008aefe307 100644 --- a/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/TextArea/TextAreaExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { TextArea, textAreaClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,9 @@ export default { title: 'TextArea', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx index dc4613b3305e64..9e3c7efee52c4e 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleActionPopupInMenu.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx index 42df1ce69ae4f1..09eee02b9b1b62 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; @@ -11,7 +11,9 @@ export default { component: Toolbar, title: 'Toolbar', decorators: [ - story => {story()}, + story => ( + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx index 31b027f5c0b6ac..dc0d95aa18ed43 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; @@ -10,7 +10,9 @@ export default { component: Toolbar, title: 'Toolbar', decorators: [ - story => {story()}, + story => ( + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx index c89437494a025a..f9123ffa244b30 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx index 9befe1aa21c1be..d6c00465667264 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflow.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; @@ -11,11 +11,11 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx index 1bbdce5c7c64a3..46d5022e3b61c7 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; @@ -11,14 +11,14 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx index f77a1dc820fb97..dc555305fa4cca 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleOverflowPositioningShorthandRtl.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; @@ -11,14 +11,14 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx index f05f180d1ad18a..80723992cc618d 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupInMenu.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarItemClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx index 487582113835fb..51c4fe658b5a30 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExamplePopupShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarItemClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx index 35ab1a0f62cd8a..2aa6d3a1241093 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarClassName, toolbarItemClassName } from '@fluentui/react-northstar'; @@ -16,7 +16,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx index 245ac400d4f11d..b9a99e3387bf30 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleVariables.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; @@ -11,7 +11,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx index b30cade128fc71..b834c9ba11a53c 100644 --- a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; @@ -12,7 +12,9 @@ export default { title: 'Tooltip', decorators: [ story => ( - {story()} + + {story()} + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx index 4541ef4e28a41b..30f9fa8001aab5 100644 --- a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleDialogContentShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tooltip, buttonClassName, dialogSlotClassNames } from '@fluentui/react-northstar'; @@ -11,7 +11,7 @@ export default { title: 'Tooltip', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx index b29b1a35b1e917..1db9aa33adaff5 100644 --- a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; @@ -12,10 +12,12 @@ export default { title: 'Tooltip', decorators: [ story => ( - {story()} + + {story()} + ), story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx index 63ca4d7237694e..107df9ad43b765 100644 --- a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleRtl.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; @@ -11,9 +11,9 @@ export default { title: 'Tooltip', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx index 2eb743db3e7e79..e9873d42da39be 100644 --- a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExampleTarget.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; @@ -11,9 +11,9 @@ export default { title: 'Tooltip', decorators: [ story => ( - + {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx index 606a61912886f1..5861d508d8d14a 100644 --- a/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeExampleShorthand.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tree, treeTitleClassName, treeItemClassName } from '@fluentui/react-northstar'; @@ -17,7 +17,7 @@ export default { title: 'Tree', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx index 3f0fc0b4df652e..bc0f35ec4e396b 100644 --- a/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeMultiselectExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tree, treeItemClassName, treeTitleClassName, treeTitleSlotClassNames } from '@fluentui/react-northstar'; @@ -19,7 +19,7 @@ export default { title: 'Tree', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx index c9cbae5331081e..310323ff2beaba 100644 --- a/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tree/TreeTitleCustomizationExample.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import Screener, { Steps } from 'screener-storybook/src/screener'; +import { StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tree, treeItemClassName, treeTitleClassName } from '@fluentui/react-northstar'; @@ -16,11 +16,11 @@ export default { title: 'Tree', decorators: [ story => ( - {story()} - + ), ], } as ComponentMeta; From 4325b399b2f01d4ebfc0dd4a8679c2e718d3c4fd Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 16 Nov 2022 16:12:22 -0800 Subject: [PATCH 51/65] Rename commonScreenerSteps files to commonStoryWrightSteps --- .../Alert/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 .../{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 .../Button/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 .../{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 .../Dialog/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 .../Menu/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 .../Slider/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename packages/fluentui/docs/src/vr-tests/Alert/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) rename packages/fluentui/docs/src/vr-tests/Attachment/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) rename packages/fluentui/docs/src/vr-tests/Button/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) rename packages/fluentui/docs/src/vr-tests/Checkbox/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) rename packages/fluentui/docs/src/vr-tests/Dialog/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) rename packages/fluentui/docs/src/vr-tests/Menu/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) rename packages/fluentui/docs/src/vr-tests/Slider/{commonScreenerSteps.ts => commonStoryWrightSteps.ts} (100%) diff --git a/packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Alert/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Attachment/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Button/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Checkbox/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Dialog/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Dialog/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Dialog/commonStoryWrightSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Menu/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts diff --git a/packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts similarity index 100% rename from packages/fluentui/docs/src/vr-tests/Slider/commonScreenerSteps.ts rename to packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts From 0941f15529f46eff1b793dcfc03520be3d15e768 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 16 Nov 2022 16:30:43 -0800 Subject: [PATCH 52/65] Add VRT tool related deps and scripts to package.json --- packages/fluentui/docs/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index a5ad7798ee482b..11886a6f05038a 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -58,7 +58,8 @@ "@types/react-custom-scrollbars": "^4.0.5", "@types/react-router-dom": "^5.1.5", "@types/react-virtualized": "^9.21.8", - "@types/react-window": "^1.8.2" + "@types/react-window": "^1.8.2", + "storywright": "0.0.23-beta.1" }, "publishConfig": { "access": "public" @@ -71,6 +72,7 @@ "start": "gulp docs", "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs", "start:storybook": "start-storybook", + "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true", "vr:build": "cross-env NODE_ENV=production gulp screener:build", "vr:test": "gulp screener:runner" } From 37fd603170d6264fb837e93067dfc4a235b862fb Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 16 Nov 2022 16:41:08 -0800 Subject: [PATCH 53/65] fix: use correct storywright version --- packages/fluentui/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index 11886a6f05038a..3132f5d1caedf3 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -59,7 +59,7 @@ "@types/react-router-dom": "^5.1.5", "@types/react-virtualized": "^9.21.8", "@types/react-window": "^1.8.2", - "storywright": "0.0.23-beta.1" + "storywright": "0.0.26-beta.1" }, "publishConfig": { "access": "public" From df844929f8c3ccb71ce23be404d6b2326b41509b Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 09:35:19 -0800 Subject: [PATCH 54/65] fix (Alert): remove unneeded StoryWright steps --- .../src/vr-tests/Alert/AlertExampleDanger.stories.tsx | 8 -------- .../docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx | 8 -------- 2 files changed, 16 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx index 936001ad4eeca5..7cac651f0cdba1 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDanger.stories.tsx @@ -1,20 +1,12 @@ -import * as React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleDanger from '../../examples/components/Alert/Variations/AlertExampleDanger.shorthand'; export default { component: Alert, title: 'Alert', - decorators: [ - story => {story()}, - story => {story()}, - ], } as ComponentMeta; const AlertExampleDangerTeams = getThemeStoryVariant(AlertExampleDanger, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx index 758f476450bca0..ff50fad180f6ba 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleInfo.stories.tsx @@ -1,20 +1,12 @@ -import * as React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleInfo from '../../examples/components/Alert/Variations/AlertExampleInfo.shorthand'; export default { component: Alert, title: 'Alert', - decorators: [ - story => {story()}, - story => {story()}, - ], } as ComponentMeta; const AlertExampleInfoTeams = getThemeStoryVariant(AlertExampleInfo, 'teamsV2'); From 6d5971307c3a47e29e651f21d5e3dbbfc3387527 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 13:53:21 -0800 Subject: [PATCH 55/65] fix: use storywright Keys --- .../vr-tests/Alert/commonStoryWrightSteps.ts | 14 ++++----- .../Attachment/commonStoryWrightSteps.ts | 9 +++--- .../vr-tests/Button/commonStoryWrightSteps.ts | 5 ++-- .../Card/CardExampleFocusable.stories.tsx | 6 ++-- .../Checkbox/commonStoryWrightSteps.ts | 5 ++-- .../Dropdown/DropdownExample.stories.tsx | 10 +++---- .../DropdownExampleLoading.stories.tsx | 6 ++-- .../DropdownExampleSearchMultiple.stories.tsx | 5 ++-- .../List/ListExampleNavigable.stories.tsx | 8 ++--- .../List/ListExampleSelectable.stories.tsx | 6 ++-- .../MenuExampleToolbarShorthand.stories.tsx | 10 +++---- .../Menu/MenuExampleWithTooltip.stories.tsx | 6 ++-- .../vr-tests/Menu/commonStoryWrightSteps.ts | 7 ++--- ...derExampleFocusBorderShorthand.stories.tsx | 5 ++-- .../RadioGroupVerticalExample.stories.tsx | 6 ++-- .../vr-tests/Slider/commonStoryWrightSteps.ts | 29 +++++++++---------- .../ToolbarExampleEditorShorthand.stories.tsx | 6 ++-- ...xampleMenuWithSubmenuShorthand.stories.tsx | 6 ++-- .../ToolbarExampleShorthand.stories.tsx | 6 ++-- .../TooltipExamplePointing.stories.tsx | 6 ++-- .../Tree/TreeExampleShorthand.stories.tsx | 8 ++--- .../Tree/TreeMultiselectExample.stories.tsx | 12 ++++---- 22 files changed, 86 insertions(+), 95 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts index b04981a6f8660a..f5e0e96b18a2e9 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Alert/commonStoryWrightSteps.ts @@ -1,20 +1,18 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'storywright'; +import { Keys, Steps } from 'storywright'; import { alertDismissActionClassName } from '@fluentui/react-northstar'; -import { keys } from '../utilities/utils'; const selectors = { dismissAction: `.${alertDismissActionClassName}`, }; -export const getFocusStoryWrightSteps = new Steps() - .keys('body', keys.tab) +const screenerSteps = new Steps() + .hover(selectors.dismissAction) + .snapshot('Hovers the action button') + .keys('body', Keys.tab) .snapshot('Focuses the action button') .hover(selectors.dismissAction) .snapshot('Hovers the focused action button') .end(); -export const getHoverStoryWrightSteps = new Steps() - .hover(selectors.dismissAction) - .snapshot('Hovers the action button') - .end(); +export default screenerSteps; diff --git a/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts index 4b747cba1f10e3..956c533340b0d5 100644 --- a/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Attachment/commonStoryWrightSteps.ts @@ -1,7 +1,6 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { Steps } from 'storywright'; +import { Keys, Steps } from 'storywright'; import { attachmentClassName, attachmentActionClassName } from '@fluentui/react-northstar'; -import { keys } from '../utilities/utils'; const selectors = { root: `.${attachmentClassName}`, @@ -11,12 +10,12 @@ const selectors = { const StoryWrightSteps = new Steps() .hover(selectors.root) .snapshot('Hovers root') - .keys('body', keys.tab) + .keys('body', Keys.tab) .snapshot('Focuses root') .hover(selectors.action) .snapshot('Hovers action') - .keys('body', keys.tab) - .keys('body', keys.tab) + .keys('body', Keys.tab) + .keys('body', Keys.tab) .snapshot('Focuses action') .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts index 96bc53130faac8..ad5d5fbcfc6084 100644 --- a/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Button/commonStoryWrightSteps.ts @@ -1,7 +1,6 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'storywright'; +import { Keys, Steps } from 'storywright'; import { buttonClassName } from '@fluentui/react-northstar'; -import { keys } from '../utilities/utils'; const button = `.${buttonClassName}`; @@ -10,7 +9,7 @@ const StoryWrightSteps = new Steps() .snapshot('Hovers the first button') .click(button) .snapshot('Clicks the first button') - .keys(button, keys.tab) + .keys(button, Keys.tab) .snapshot('Focuses on the second button') .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx index c948debcc150d7..583336c5e7e5f6 100644 --- a/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Card/CardExampleFocusable.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Card } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import CardExampleFocusable from '../../examples/components/Card/Usage/CardExampleFocusable'; export default { @@ -12,7 +12,7 @@ export default { title: 'Card', decorators: [ story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts index e271d9c57783cc..00bc345b2bb42d 100644 --- a/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Checkbox/commonStoryWrightSteps.ts @@ -1,12 +1,11 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'storywright'; +import { Keys, Steps } from 'storywright'; import { checkboxClassName } from '@fluentui/react-northstar'; -import { keys } from '../utilities'; const StoryWrightSteps = new Steps() .click(`.${checkboxClassName}`) .snapshot('Checks checkbox') - .keys('body', keys.tab) + .keys('body', Keys.tab) .snapshot('Focuses checkbox') .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx index 7d9d42bdc69d45..b4ccf74aa69588 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExample.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import DropdownExample from '../../examples/components/Dropdown/Types/DropdownExample.shorthand'; const selectors = { @@ -41,11 +41,11 @@ export default { story => ( diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx index 05ee682998589d..0c50032002c009 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleLoading.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSlotClassNames, dropdownSearchInputSlotClassNames } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import DropdownExampleLoading from '../../examples/components/Dropdown/State/DropdownExampleLoading.shorthand'; const selectors = { @@ -23,7 +23,7 @@ export default { ), story => ( {story()} diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx index 82294887f18187..21010e8fba1147 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSearchInputSlotClassNames, dropdownSlotClassNames } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; import DropdownExampleSearchMultiple from '../../examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand'; const selectors = { @@ -25,7 +24,7 @@ export default { .click(selectors.item(2)) .click(selectors.toggleIndicator) .click(selectors.item(2)) - .keys(selectors.input, keys.leftArrow) + .keys(selectors.input, Keys.leftArrow) .snapshot('Selects last selected element') .hover(selectors.selectedItem(1)) .snapshot('Hovers first selected element') diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx index ebb2c7906398fb..6b548b82a93d7b 100644 --- a/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleNavigable.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { List, listItemClassName, listClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import ListExampleNavigable from '../../examples/components/List/Types/ListExampleNavigable.shorthand'; const selectors = { @@ -25,7 +25,7 @@ export default { .snapshot('Clicks on an item') .hover(selectors.item(3)) .snapshot('Highlights another item') - .keys(selectors.item(2), keys.downArrow) + .keys(selectors.item(2), Keys.downArrow) .snapshot('Focuses last item using keyboard') .end()} > @@ -33,7 +33,7 @@ export default { ), story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx index 83ca88878c1227..bb9085ec35d0ce 100644 --- a/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/List/ListExampleSelectable.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { List, listItemClassName, listClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import ListExampleSelectable from '../../examples/components/List/Types/ListExampleSelectable.shorthand'; const selectors = { @@ -31,7 +31,7 @@ export default { ), story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx index 1e3281b3aae120..f2309eb6ca83f3 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleToolbarShorthand.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu, menuClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import MenuExampleToolbarShorthand from '../../examples/components/Menu/Usage/MenuExampleToolbar.shorthand'; const selectors = { @@ -24,13 +24,13 @@ export default { .snapshot('Hovers 2nd item (hover state styles)') .click(selectors.item(2)) .snapshot('Clicks on 2nd item (active state styles)') - .keys(selectors.item(2), keys.rightArrow) + .keys(selectors.item(2), Keys.rightArrow) .snapshot('Navigates to next item (focus state styles)') - .keys(selectors.item(5), keys.leftArrow) + .keys(selectors.item(5), Keys.leftArrow) .snapshot('Navigates to previous item (active and focus state styles)') .click(selectors.lastItem) .snapshot('Clicks on the last item and opens submenu') - .keys(selectors.lastItem, keys.downArrow) + .keys(selectors.lastItem, Keys.downArrow) .snapshot('Focuses on the first element in the submenu') .end()} > diff --git a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx index b32d8a0d1ac3e7..92b5a487a162a1 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Menu/MenuExampleWithTooltip.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Menu, menuClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import MenuExampleWithTooltip from '../../examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand'; const selectors = { @@ -22,7 +22,7 @@ export default { .hover(selectors.item(1)) .snapshot('Hovers 1st item (show tooltip)') .click(selectors.item(1)) - .keys(selectors.item(1), keys.rightArrow) + .keys(selectors.item(1), Keys.rightArrow) .snapshot('Navigates to next item (shows tooltip)') .end()} > diff --git a/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts index 469f05d57a06ec..3408e69718afd0 100644 --- a/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Menu/commonStoryWrightSteps.ts @@ -1,7 +1,6 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'storywright'; +import { Keys, Steps } from 'storywright'; import { menuClassName } from '@fluentui/react-northstar'; -import { keys } from '../utilities'; export const selectors = { menu: `.${menuClassName}`, @@ -14,9 +13,9 @@ const getStoryWrightSteps = ({ vertical = false, startItem = 2, endItem = 3 }) = .snapshot('Hovers 2nd item (hover state styles)') .click(selectors.item(startItem)) .snapshot('Clicks on 2nd item (active state styles)') - .keys(selectors.item(startItem), vertical ? keys.downArrow : keys.rightArrow) + .keys(selectors.item(startItem), vertical ? Keys.downArrow : Keys.rightArrow) .snapshot('Navigates to next item (focus state styles)') - .keys(selectors.item(endItem), vertical ? keys.upArrow : keys.leftArrow) + .keys(selectors.item(endItem), vertical ? Keys.upArrow : Keys.leftArrow) .snapshot('Navigates to previous item (active and focus state styles)') .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx index 1195b356ea0a6e..209e9964ca64cc 100644 --- a/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Provider/ProviderExampleFocusBorderShorthand.stories.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Provider, buttonClassName } from '@fluentui/react-northstar'; -import { keys } from '../utilities'; import ProviderExampleFocusBorderShorthand from '../../examples/components/Provider/Types/ProviderExampleFocusBorder.shorthand'; const button = `.${buttonClassName}`; @@ -17,7 +16,7 @@ export default { diff --git a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx index e924c112a9b8cc..33783baa8d6d16 100644 --- a/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/RadioGroup/RadioGroupVerticalExample.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Divider, RadioGroup } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; const RadioGroupVerticalExample = () => { const [selectedValue, setSelectedValue] = React.useState(''); @@ -50,7 +50,7 @@ export default { title: 'RadioGroup', decorators: [ story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts index fbff83a5af76a2..b83098d3b04060 100644 --- a/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts @@ -1,30 +1,29 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { Steps } from 'storywright'; +import { Keys, Steps } from 'storywright'; import { sliderSlotClassNames } from '@fluentui/react-northstar'; -import { keys } from '../utilities'; const selectors = { input: `.${sliderSlotClassNames.input}`, }; -export const focusSliderSteps = new Steps().keys('body', keys.tab).end(); +export const focusSliderSteps = new Steps().Keys('body', Keys.tab).end(); export const rightArrowSteps = new Steps() - .keys('body', keys.tab) - .keys(selectors.input, keys.rightArrow) - .keys(selectors.input, keys.rightArrow) - .keys(selectors.input, keys.rightArrow) - .keys(selectors.input, keys.rightArrow) - .keys(selectors.input, keys.rightArrow) + .Keys('body', Keys.tab) + .Keys(selectors.input, Keys.rightArrow) + .Keys(selectors.input, Keys.rightArrow) + .Keys(selectors.input, Keys.rightArrow) + .Keys(selectors.input, Keys.rightArrow) + .Keys(selectors.input, Keys.rightArrow) .snapshot('Navigates to the right with the right arrow key') .end(); export const upArrowSteps = new Steps() - .keys('body', keys.tab) - .keys(selectors.input, keys.upArrow) - .keys(selectors.input, keys.upArrow) - .keys(selectors.input, keys.upArrow) - .keys(selectors.input, keys.upArrow) - .keys(selectors.input, keys.upArrow) + .Keys('body', Keys.tab) + .Keys(selectors.input, Keys.upArrow) + .Keys(selectors.input, Keys.upArrow) + .Keys(selectors.input, Keys.upArrow) + .Keys(selectors.input, Keys.upArrow) + .Keys(selectors.input, Keys.upArrow) .snapshot('Navigates to the right with the up arrow key') .end(); diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx index 09eee02b9b1b62..f91cc1f50bb432 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleEditorShorthand.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import ToolbarExampleEditorShorthand from '../../examples/components/Toolbar/Types/ToolbarExampleEditor.shorthand'; export default { @@ -12,7 +12,7 @@ export default { title: 'Toolbar', decorators: [ story => ( - {story()} + {story()} ), ], } as ComponentMeta; diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx index f9123ffa244b30..b31b7187eb24fc 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleMenuWithSubmenuShorthand.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarItemWrapperClassName, toolbarMenuItemClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import ToolbarExampleMenuWithSubmenuShorthand from '../../examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand'; export default { @@ -16,7 +16,7 @@ export default { steps={new Steps() .click(`.${toolbarItemWrapperClassName} button`) .snapshot('Shows menu') - .keys(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Play`, keys.rightArrow) + .keys(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Play`, Keys.rightArrow) .snapshot('Opens first submenu') .click(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Appearance`) .snapshot('Opens second submenu') diff --git a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx index 2aa6d3a1241093..62e691f5bd263f 100644 --- a/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Toolbar/ToolbarExampleShorthand.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Toolbar, toolbarClassName, toolbarItemClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import ToolbarExampleShorthand from '../../examples/components/Toolbar/Usage/ToolbarExampleWithTooltip.shorthand'; const selectors = { @@ -21,7 +21,7 @@ export default { .hover(selectors.item(1)) .snapshot('Hovers 1st item (show tooltip)') .click(selectors.item(1)) - .keys(selectors.item(1), keys.rightArrow) + .keys(selectors.item(1), Keys.rightArrow) .snapshot('Navigates to next item (shows tooltip)') .end()} > diff --git a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx index 1db9aa33adaff5..481ea27fcac22a 100644 --- a/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Tooltip/TooltipExamplePointing.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies -import { StoryWright, Steps } from 'storywright'; +import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Tooltip, buttonClassName } from '@fluentui/react-northstar'; -import { getThemeStoryVariant, keys } from '../utilities'; +import { getThemeStoryVariant } from '../utilities'; import TooltipExamplePointing from '../../examples/components/Tooltip/Types/TooltipExamplePointing.shorthand'; export default { @@ -19,7 +19,7 @@ export default { story => ( From 946dc1af84e12c3367f02e0a2243247f1124149e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 13:53:44 -0800 Subject: [PATCH 56/65] fix(Alert): update Steps to use unified common one --- .../src/vr-tests/Alert/AlertExampleDismissible.stories.tsx | 7 ++----- .../docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx | 7 ++----- .../docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx | 7 ++----- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx index b1750d25b97f2f..fbf5ee76f398bf 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleDismissible.stories.tsx @@ -4,17 +4,14 @@ import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; +import screenerSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleDismissible from '../../examples/components/Alert/Types/AlertExampleDismissible.shorthand'; export default { component: Alert, title: 'Alert', - decorators: [ - story => {story()}, - story => {story()}, - ], + decorators: [story => {story()}], } as ComponentMeta; const AlertExampleDismissibleTeams = getThemeStoryVariant(AlertExampleDismissible, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx index fd91a73005fa17..1e7cc02cc80955 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleOof.stories.tsx @@ -4,7 +4,7 @@ import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; +import screenerSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExampleOofs.shorthand'; @@ -12,10 +12,7 @@ import AlertExampleOof from '../../examples/components/Alert/Variations/AlertExa export default { component: Alert, title: 'Alert', - decorators: [ - story => {story()}, - story => {story()}, - ], + decorators: [story => {story()}], } as ComponentMeta; const AlertExampleOofTeams = getThemeStoryVariant(AlertExampleOof, 'teamsV2'); diff --git a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx index 417ab3315a9738..ec7a66820ee083 100644 --- a/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Alert/AlertExampleUrgent.stories.tsx @@ -4,17 +4,14 @@ import { StoryWright } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Alert } from '@fluentui/react-northstar'; -import { getFocusStoryWrightSteps, getHoverStoryWrightSteps } from './commonStoryWrightSteps'; +import screenerSteps from './commonStoryWrightSteps'; import { getThemeStoryVariant } from '../utilities/getThemeStoryVariant'; import AlertExampleUrgent from '../../examples/components/Alert/Variations/AlertExampleUrgent.shorthand'; export default { component: Alert, title: 'Alert', - decorators: [ - story => {story()}, - story => {story()}, - ], + decorators: [story => {story()}], } as ComponentMeta; const AlertExampleUrgentTeams = getThemeStoryVariant(AlertExampleUrgent, 'teamsV2'); From e4c278d6eb2741b58e25a3f51fda20f46e0598d2 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 13:55:40 -0800 Subject: [PATCH 57/65] chore: remove deleted keys file --- .../docs/src/vr-tests/utilities/index.ts | 3 +-- .../docs/src/vr-tests/utilities/utils.ts | 25 ------------------- 2 files changed, 1 insertion(+), 27 deletions(-) delete mode 100644 packages/fluentui/docs/src/vr-tests/utilities/utils.ts diff --git a/packages/fluentui/docs/src/vr-tests/utilities/index.ts b/packages/fluentui/docs/src/vr-tests/utilities/index.ts index e8a08c840b97bf..7eadca0dd0a555 100644 --- a/packages/fluentui/docs/src/vr-tests/utilities/index.ts +++ b/packages/fluentui/docs/src/vr-tests/utilities/index.ts @@ -1,4 +1,3 @@ import { getThemeStoryVariant } from './getThemeStoryVariant'; -import { keys } from './utils'; -export { getThemeStoryVariant, keys }; +export { getThemeStoryVariant }; diff --git a/packages/fluentui/docs/src/vr-tests/utilities/utils.ts b/packages/fluentui/docs/src/vr-tests/utilities/utils.ts deleted file mode 100644 index 4e41bbf33238e5..00000000000000 --- a/packages/fluentui/docs/src/vr-tests/utilities/utils.ts +++ /dev/null @@ -1,25 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { ScreenerRunnerKeys } from '@fluentui/scripts/screener'; - -export const keys: ScreenerRunnerKeys = { - alt: '\uE00A', - control: '\uE009', - enter: '\uE007', - escape: '\uE00C', - return: '\uE006', - shift: '\uE008', - tab: '\uE004', - leftArrow: '\uE012', - upArrow: '\uE013', - rightArrow: '\uE014', - downArrow: '\uE015', - backSpace: '\uE003', - space: '\uE00D', - pageUp: '\uE00E', - pageDown: '\uE00F', - end: '\uE010', - home: '\uE011', - insert: '\uE016', - delete: '\uE017', - command: '\uE03D', -}; From 50f4eb34814058d35e1afd830e38a9c7113a9e34 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 14:20:48 -0800 Subject: [PATCH 58/65] Update VRT Pipelines to add v0 testing --- .devops/templates/runpublishvrscreenshot.yml | 9 +++ azure-pipelines.vrt-baseline.yml | 27 +++++++ azure-pipelines.vrt-pr.yml | 83 ++++++++++++++++++++ 3 files changed, 119 insertions(+) diff --git a/.devops/templates/runpublishvrscreenshot.yml b/.devops/templates/runpublishvrscreenshot.yml index 25d4f87e19e40a..e68e23018409be 100644 --- a/.devops/templates/runpublishvrscreenshot.yml +++ b/.devops/templates/runpublishvrscreenshot.yml @@ -11,6 +11,9 @@ parameters: - name: shouldBuildstorybookaddon type: boolean default: false + - name: shouldBuildNorthstar + type: boolean + default: false steps: - task: Bash@3 @@ -47,6 +50,12 @@ steps: displayName: Build react-storybook-addon condition: eq(variables['vrTestSkip'], 'no') + - ${{ if eq(parameters.shouldBuildNorthstar, 'true') }}: + - script: | + yarn build --to @fluentui/docs + displayName: Build react-northstar + condition: eq(variables['vrTestSkip'], 'no') + - script: | yarn workspace ${{ parameters.vrTestPackageName }} screener:build displayName: Build VR tests components package diff --git a/azure-pipelines.vrt-baseline.yml b/azure-pipelines.vrt-baseline.yml index 2afeec0e6dea10..899742783c888e 100644 --- a/azure-pipelines.vrt-baseline.yml +++ b/azure-pipelines.vrt-baseline.yml @@ -68,3 +68,30 @@ jobs: STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) + + - job: VRToolUpdateBaseline_V0 + workspace: + clean: all + steps: + - template: .devops/templates/tools.yml + + - template: .devops/templates/runpublishvrscreenshot.yml + parameters: + fluentVersion: v0 + vrTestPackageName: '@fluentui/docs' + vrTestPackagePath: 'packages/fluentui/docs' + shouldBuildstorybookaddon: true + + - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentuiv0" --buildId $(Build.BuildId) + displayName: 'Run Screenshotdiff update baseline' + env: + API_URL: $(System.CollectionUri) + API_TOKEN: $(fabric-public-pipeline-access-PAT) + API_REPOSITORY: $(Build.Repository.Name) + API_PROJECT: $(System.TeamProject) + SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv0 + GITHUB_API_TOKEN: $(githubRepoStatusPAT) + STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI) + STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) + BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) + VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) diff --git a/azure-pipelines.vrt-pr.yml b/azure-pipelines.vrt-pr.yml index fb545405f3deda..4e70f159f31f83 100644 --- a/azure-pipelines.vrt-pr.yml +++ b/azure-pipelines.vrt-pr.yml @@ -63,6 +63,7 @@ jobs: vrTestPackageName: '@fluentui/vr-tests-react-components' vrTestPackagePath: 'apps/vr-tests-react-components' shouldBuildstorybookaddon: true + shouldBuildNorthstar: false - powershell: | $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" @@ -142,6 +143,7 @@ jobs: vrTestPackageName: '@fluentui/vr-tests' vrTestPackagePath: 'apps/vr-tests' shouldBuildstorybookaddon: false + shouldBuildNorthstar: false - powershell: | $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" @@ -173,3 +175,84 @@ jobs: GITHUB_REPO_OWNER: 'microsoft' GITHUB_REPO_NAME: 'fluentui' condition: eq(variables['vrTestSkip'], 'no') + + - job: VisualRegressionTest_V0 + variables: + pipelineId: '313' + pipelineName: 'fluent-ui VRT Pipeline v0' + + workspace: + clean: all + steps: + - checkout: self + fetchDepth: 0 + + - template: .devops/templates/tools.yml + + - bash: | + postPolicy="true"; + response=$(curl --request POST 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/oauth2/token' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=client_credentials' --data-urlencode 'client_id=288a69b6-760d-4c1f-ad6d-0183b5e5740f' --data-urlencode 'client_secret='${VR_APPROVAL_CLIENT_SECRET} ) + parsedResponse=${response/*"access_token"/} + token=${parsedResponse:3:${#parsedResponse}-5} + curl --location --request POST 'https://vrt-fluentapp.azurewebsites.net/api/policyState' \ + --header 'Authorization: Bearer '"$token" \ + --header 'Content-Type: application/json' \ + --data-raw ' { + "organization": "uifabric", + "projectName": "fabricpublic", + "prId": $(System.PullRequest.PullRequestNumber), + "commitId": "$(Build.SourceVersion)", + "generate":true, + "blockingPipeline":{ + }, + "nonBlockingPipeline":{ + "$(pipelineId)": { + "pipelineStatus": "PENDING", + "pipelineName": "$(pipelineName)" + } + }, + "postPolicy": '${postPolicy}', + "policyType": "OPTIONAL" + }' + displayName: 'Call policy State Api' + env: + VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) + + - template: .devops/templates/runpublishvrscreenshot.yml + parameters: + fluentVersion: v0 + vrTestPackageName: '@fluentui/docs' + vrTestPackagePath: 'packages/fluentui/docs' + shouldBuildstorybookaddon: false + shouldBuildNorthstar: true + + - powershell: | + $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" + Write-Host "Looking up latest official build via url: $url" + $pipelineBuildInfo = Invoke-RestMethod -Uri $url -Headers @{Authorization = "Bearer $env:SYSTEM_ACCESSTOKEN"} + Write-Host "Response: $pipelineBuildInfo" + [int]$latestBuildId = $pipelineBuildInfo.value.id + Write-Host "Setting variable LatestBuildId=$latestBuildId" + Write-Host "##vso[task.setvariable variable=LatestBuildId]$latestBuildId" + name: GetLatestGreenCIBuild + env: + SYSTEM_ACCESSTOKEN: $(System.AccessToken) + BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID) + condition: eq(variables['vrTestSkip'], 'no') + + - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "fluentuiv0" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId) --pipelineId $(pipelineId) --pipelineName '$(pipelineName)' + displayName: 'Run fluentui-screenshotdiff' + env: + API_URL: $(System.CollectionUri) + API_TOKEN: $(fabric-public-pipeline-access-PAT) + API_REPOSITORY: $(Build.Repository.Name) + API_PROJECT: $(System.TeamProject) + SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv0 + GITHUB_API_TOKEN: $(githubRepoStatusPAT) + STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI) + STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) + BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) + VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) + GITHUB_REPO_OWNER: 'microsoft' + GITHUB_REPO_NAME: 'fluentui' + condition: eq(variables['vrTestSkip'], 'no') From b00cdb4fc5189fc1d9ee27496432559babd54113 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 14:21:39 -0800 Subject: [PATCH 59/65] add screener:build script and partition for testing --- packages/fluentui/docs/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index 3132f5d1caedf3..be4a4b29a2d2c2 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -70,9 +70,10 @@ "lint": "eslint --ext .js,.ts,.tsx .", "lint:fix": "yarn lint --fix", "start": "gulp docs", + "screener:build": "build:storybook", "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs", "start:storybook": "start-storybook", - "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true", + "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --partitionIndex 1 --totalPartitions 20", "vr:build": "cross-env NODE_ENV=production gulp screener:build", "vr:test": "gulp screener:runner" } From 71d2481aa14e44f4468471a35aaef3790237f788 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 14:25:03 -0800 Subject: [PATCH 60/65] Update DonutChart.base.tsx --- .../src/components/DonutChart/DonutChart.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx index 1d2487da4e2ba9..3ac925f9cb9fba 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -192,7 +192,7 @@ export class DonutChartBase extends React.Component { if (this.state.selectedLegend === point.legend) { this.setState({ selectedLegend: '' }); From b989bcab5eb0e1eb4a4c7944c24057bc099389ca Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 17 Nov 2022 14:47:55 -0800 Subject: [PATCH 61/65] fix: step keys errors addressed --- .../DropdownExampleSearchMultiple.stories.tsx | 1 + .../vr-tests/Slider/commonStoryWrightSteps.ts | 26 +++++++++---------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx index 21010e8fba1147..767d8148e5165c 100644 --- a/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx +++ b/packages/fluentui/docs/src/vr-tests/Dropdown/DropdownExampleSearchMultiple.stories.tsx @@ -4,6 +4,7 @@ import { Keys, StoryWright, Steps } from 'storywright'; // eslint-disable-next-line import/no-extraneous-dependencies import { ComponentMeta } from '@storybook/react'; import { Dropdown, dropdownSearchInputSlotClassNames, dropdownSlotClassNames } from '@fluentui/react-northstar'; +import { getThemeStoryVariant } from '../utilities'; import DropdownExampleSearchMultiple from '../../examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand'; const selectors = { diff --git a/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts index b83098d3b04060..6862891755baf6 100644 --- a/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts +++ b/packages/fluentui/docs/src/vr-tests/Slider/commonStoryWrightSteps.ts @@ -6,24 +6,24 @@ const selectors = { input: `.${sliderSlotClassNames.input}`, }; -export const focusSliderSteps = new Steps().Keys('body', Keys.tab).end(); +export const focusSliderSteps = new Steps().keys('body', Keys.tab).end(); export const rightArrowSteps = new Steps() - .Keys('body', Keys.tab) - .Keys(selectors.input, Keys.rightArrow) - .Keys(selectors.input, Keys.rightArrow) - .Keys(selectors.input, Keys.rightArrow) - .Keys(selectors.input, Keys.rightArrow) - .Keys(selectors.input, Keys.rightArrow) + .keys('body', Keys.tab) + .keys(selectors.input, Keys.rightArrow) + .keys(selectors.input, Keys.rightArrow) + .keys(selectors.input, Keys.rightArrow) + .keys(selectors.input, Keys.rightArrow) + .keys(selectors.input, Keys.rightArrow) .snapshot('Navigates to the right with the right arrow key') .end(); export const upArrowSteps = new Steps() - .Keys('body', Keys.tab) - .Keys(selectors.input, Keys.upArrow) - .Keys(selectors.input, Keys.upArrow) - .Keys(selectors.input, Keys.upArrow) - .Keys(selectors.input, Keys.upArrow) - .Keys(selectors.input, Keys.upArrow) + .keys('body', Keys.tab) + .keys(selectors.input, Keys.upArrow) + .keys(selectors.input, Keys.upArrow) + .keys(selectors.input, Keys.upArrow) + .keys(selectors.input, Keys.upArrow) + .keys(selectors.input, Keys.upArrow) .snapshot('Navigates to the right with the up arrow key') .end(); From 18c1644baf5d2eca28eedf3da2786495a9a6b26d Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 20 Nov 2022 06:23:32 -0800 Subject: [PATCH 62/65] Revert "Update VRT Pipelines to add v0 testing" This reverts commit 50f4eb34814058d35e1afd830e38a9c7113a9e34. --- .devops/templates/runpublishvrscreenshot.yml | 9 --- azure-pipelines.vrt-baseline.yml | 27 ------- azure-pipelines.vrt-pr.yml | 83 -------------------- 3 files changed, 119 deletions(-) diff --git a/.devops/templates/runpublishvrscreenshot.yml b/.devops/templates/runpublishvrscreenshot.yml index e68e23018409be..25d4f87e19e40a 100644 --- a/.devops/templates/runpublishvrscreenshot.yml +++ b/.devops/templates/runpublishvrscreenshot.yml @@ -11,9 +11,6 @@ parameters: - name: shouldBuildstorybookaddon type: boolean default: false - - name: shouldBuildNorthstar - type: boolean - default: false steps: - task: Bash@3 @@ -50,12 +47,6 @@ steps: displayName: Build react-storybook-addon condition: eq(variables['vrTestSkip'], 'no') - - ${{ if eq(parameters.shouldBuildNorthstar, 'true') }}: - - script: | - yarn build --to @fluentui/docs - displayName: Build react-northstar - condition: eq(variables['vrTestSkip'], 'no') - - script: | yarn workspace ${{ parameters.vrTestPackageName }} screener:build displayName: Build VR tests components package diff --git a/azure-pipelines.vrt-baseline.yml b/azure-pipelines.vrt-baseline.yml index 899742783c888e..2afeec0e6dea10 100644 --- a/azure-pipelines.vrt-baseline.yml +++ b/azure-pipelines.vrt-baseline.yml @@ -68,30 +68,3 @@ jobs: STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) - - - job: VRToolUpdateBaseline_V0 - workspace: - clean: all - steps: - - template: .devops/templates/tools.yml - - - template: .devops/templates/runpublishvrscreenshot.yml - parameters: - fluentVersion: v0 - vrTestPackageName: '@fluentui/docs' - vrTestPackagePath: 'packages/fluentui/docs' - shouldBuildstorybookaddon: true - - - bash: node node_modules/vrscreenshotdiff/lib/index.js release --clientType "fluentuiv0" --buildId $(Build.BuildId) - displayName: 'Run Screenshotdiff update baseline' - env: - API_URL: $(System.CollectionUri) - API_TOKEN: $(fabric-public-pipeline-access-PAT) - API_REPOSITORY: $(Build.Repository.Name) - API_PROJECT: $(System.TeamProject) - SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv0 - GITHUB_API_TOKEN: $(githubRepoStatusPAT) - STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI) - STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) - BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) - VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) diff --git a/azure-pipelines.vrt-pr.yml b/azure-pipelines.vrt-pr.yml index 4e70f159f31f83..fb545405f3deda 100644 --- a/azure-pipelines.vrt-pr.yml +++ b/azure-pipelines.vrt-pr.yml @@ -63,7 +63,6 @@ jobs: vrTestPackageName: '@fluentui/vr-tests-react-components' vrTestPackagePath: 'apps/vr-tests-react-components' shouldBuildstorybookaddon: true - shouldBuildNorthstar: false - powershell: | $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" @@ -143,7 +142,6 @@ jobs: vrTestPackageName: '@fluentui/vr-tests' vrTestPackagePath: 'apps/vr-tests' shouldBuildstorybookaddon: false - shouldBuildNorthstar: false - powershell: | $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" @@ -175,84 +173,3 @@ jobs: GITHUB_REPO_OWNER: 'microsoft' GITHUB_REPO_NAME: 'fluentui' condition: eq(variables['vrTestSkip'], 'no') - - - job: VisualRegressionTest_V0 - variables: - pipelineId: '313' - pipelineName: 'fluent-ui VRT Pipeline v0' - - workspace: - clean: all - steps: - - checkout: self - fetchDepth: 0 - - - template: .devops/templates/tools.yml - - - bash: | - postPolicy="true"; - response=$(curl --request POST 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/oauth2/token' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=client_credentials' --data-urlencode 'client_id=288a69b6-760d-4c1f-ad6d-0183b5e5740f' --data-urlencode 'client_secret='${VR_APPROVAL_CLIENT_SECRET} ) - parsedResponse=${response/*"access_token"/} - token=${parsedResponse:3:${#parsedResponse}-5} - curl --location --request POST 'https://vrt-fluentapp.azurewebsites.net/api/policyState' \ - --header 'Authorization: Bearer '"$token" \ - --header 'Content-Type: application/json' \ - --data-raw ' { - "organization": "uifabric", - "projectName": "fabricpublic", - "prId": $(System.PullRequest.PullRequestNumber), - "commitId": "$(Build.SourceVersion)", - "generate":true, - "blockingPipeline":{ - }, - "nonBlockingPipeline":{ - "$(pipelineId)": { - "pipelineStatus": "PENDING", - "pipelineName": "$(pipelineName)" - } - }, - "postPolicy": '${postPolicy}', - "policyType": "OPTIONAL" - }' - displayName: 'Call policy State Api' - env: - VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) - - - template: .devops/templates/runpublishvrscreenshot.yml - parameters: - fluentVersion: v0 - vrTestPackageName: '@fluentui/docs' - vrTestPackagePath: 'packages/fluentui/docs' - shouldBuildstorybookaddon: false - shouldBuildNorthstar: true - - - powershell: | - $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1" - Write-Host "Looking up latest official build via url: $url" - $pipelineBuildInfo = Invoke-RestMethod -Uri $url -Headers @{Authorization = "Bearer $env:SYSTEM_ACCESSTOKEN"} - Write-Host "Response: $pipelineBuildInfo" - [int]$latestBuildId = $pipelineBuildInfo.value.id - Write-Host "Setting variable LatestBuildId=$latestBuildId" - Write-Host "##vso[task.setvariable variable=LatestBuildId]$latestBuildId" - name: GetLatestGreenCIBuild - env: - SYSTEM_ACCESSTOKEN: $(System.AccessToken) - BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID) - condition: eq(variables['vrTestSkip'], 'no') - - - bash: node node_modules/vrscreenshotdiff/lib/index.js pr --clientType "fluentuiv0" --buildId $(Build.BuildId) --lkgCIBuild $(LatestBuildId) --pipelineId $(pipelineId) --pipelineName '$(pipelineName)' - displayName: 'Run fluentui-screenshotdiff' - env: - API_URL: $(System.CollectionUri) - API_TOKEN: $(fabric-public-pipeline-access-PAT) - API_REPOSITORY: $(Build.Repository.Name) - API_PROJECT: $(System.TeamProject) - SCREENSHOT_ARTIFACT_FOLDER: vrscreenshotv0 - GITHUB_API_TOKEN: $(githubRepoStatusPAT) - STORAGE_ACCOUNT_FLUENTUI: $(STORAGE-ACCOUNT-FLUENTUI) - STORAGE_KEY_FLUENTUI: $(STORAGE-KEY-BLOB-FLUENTUI) - BLOB_CONNECTION_STRING: $(BLOB-CONNECTION-STRING) - VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET) - GITHUB_REPO_OWNER: 'microsoft' - GITHUB_REPO_NAME: 'fluentui' - condition: eq(variables['vrTestSkip'], 'no') From f05bcbe9fc4596768681a6ac1c2a167724e9fed1 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 20 Nov 2022 06:31:30 -0800 Subject: [PATCH 63/65] Update scripts --- packages/fluentui/docs/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index be4a4b29a2d2c2..3132f5d1caedf3 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -70,10 +70,9 @@ "lint": "eslint --ext .js,.ts,.tsx .", "lint:fix": "yarn lint --fix", "start": "gulp docs", - "screener:build": "build:storybook", "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs", "start:storybook": "start-storybook", - "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --partitionIndex 1 --totalPartitions 20", + "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true", "vr:build": "cross-env NODE_ENV=production gulp screener:build", "vr:test": "gulp screener:runner" } From 5d54abdc0b3fedbfcd88e2b6f2f2049c7ab4d275 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 20 Nov 2022 22:35:53 -0800 Subject: [PATCH 64/65] Add screener:build script --- packages/fluentui/docs/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index 3132f5d1caedf3..2f2ff8ee19249c 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -70,6 +70,7 @@ "lint": "eslint --ext .js,.ts,.tsx .", "lint:fix": "yarn lint --fix", "start": "gulp docs", + "screener:build": "lage build --to @fluentui/docs --verbose && yarn build:storybook", "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs", "start:storybook": "start-storybook", "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true", From fd7c4d63695e036d1edd5f1bc73d39c11da48c05 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 20 Nov 2022 22:40:36 -0800 Subject: [PATCH 65/65] simplify script to only build storybook --- packages/fluentui/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/docs/package.json b/packages/fluentui/docs/package.json index 2f2ff8ee19249c..f9acb8e53d6b34 100644 --- a/packages/fluentui/docs/package.json +++ b/packages/fluentui/docs/package.json @@ -70,7 +70,7 @@ "lint": "eslint --ext .js,.ts,.tsx .", "lint:fix": "yarn lint --fix", "start": "gulp docs", - "screener:build": "lage build --to @fluentui/docs --verbose && yarn build:storybook", + "screener:build": "yarn build:storybook", "start:profile": "cross-env NODE_ENV=production PERF=true gulp docs", "start:storybook": "start-storybook", "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",