react-tags-preview: add more vr test

apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${contentId}`)
+  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .mouseDown(`#${contentId}`)
+  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .hover(`#${dismissButtonId}`)
+  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .mouseDown(`#${dismissButtonId}`)
+  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Filled = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="filled"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="outline"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="brand"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);

apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript(`document.querySelector('#${contentId}').setAttribute('data-fui-focus-visible', '')`)
+  .focus(`#${contentId}`)
+  .snapshot('focus content', { cropTo: '.testWrapper' })
+  .executeScript(`document.querySelector('#${contentId}').removeAttribute('data-fui-focus-visible')`)
+
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript(`document.querySelector('#${dismissButtonId}').setAttribute('data-fui-focus-visible', '')`)
+  .focus(`#${dismissButtonId}`)
+  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
+  .executeScript(`document.querySelector('#${dismissButtonId}').removeAttribute('data-fui-focus-visible')`)
+
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Rounded = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
+
+export const RoundedWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const RoundedWithMedia = () => (
+  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithMedia = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    shape="circular"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);

apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${tagId}}`)
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown(`#${tagId}}`)
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Filled = () => (
+  <Tag id={tagId} appearance="filled" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);

apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  // This needs to be added so that the focus outline is shown correctly
+  .executeScript(`document.querySelector('#${tagId}').setAttribute('data-fui-focus-visible', '')`)
+  .focus(`#${tagId}`)
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .executeScript(`document.querySelector('#${tagId}').removeAttribute('data-fui-focus-visible')`)
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Rounded = () => <Tag>Primary Text</Tag>;
+
+export const RoundedWithSecondaryText = () => <Tag secondaryText="Secondary Text">Primary Text</Tag>;
+
+export const RoundedWithMedia = () => (
+  <Tag media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>Primary Text</Tag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <Tag id={tagId} dismissible>
+    Primary Text
+  </Tag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => <Tag shape="circular">Primary Text</Tag>;
+
+export const CircularWithSecondaryText = () => <Tag secondaryText="Secondary Text">Primary Text</Tag>;
+
+export const CircularWithMedia = () => (
+  <Tag shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <Tag id={tagId} shape="circular" dismissible>
+    Primary Text
+  </Tag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);