From 372cb4bb10d790903f7249bf98a0a47caeffae1f Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Wed, 9 Nov 2022 11:11:39 -0500
Subject: [PATCH] chore(vr-tests-v9): Convert Accordion VR tests to CSF
 (#25525)

---
 .../src/stories/Accordion.stories.tsx         | 161 ------------------
 .../stories/Accordion/Accordion.stories.tsx   | 140 +++++++++++++++
 .../AccordionFocusInteractions.stories.tsx    |  46 +++++
 3 files changed, 186 insertions(+), 161 deletions(-)
 delete mode 100644 apps/vr-tests-react-components/src/stories/Accordion.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx

diff --git a/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx
deleted file mode 100644
index 4fee9cf87f3a8..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
-import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
-import { CircleRegular } from '@fluentui/react-icons';
-
-storiesOf('Accordion Converged', module)
-  .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
-        .snapshot('normal', { cropTo: '.testWrapper' })
-        .focus('#opened-btn')
-        .snapshot('focus opened', { cropTo: '.testWrapper' })
-        .focus('#closed-btn')
-        .snapshot('focus closed', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      <div className="testWrapper" style={{ width: '300px' }}>
-        {story()}
-      </div>
-    </Screener>
-  ))
-
-  .addStory(
-    'visibility+focus',
-    () => (
-      <Accordion openItems={[0]}>
-        <AccordionItem value={0}>
-          <AccordionHeader button={{ id: 'opened-btn' }}>Opened</AccordionHeader>
-          <AccordionPanel>Opened Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={1}>
-          <AccordionHeader button={{ id: 'closed-btn' }}>Closed</AccordionHeader>
-          <AccordionPanel>Closed Panel</AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  );
-
-storiesOf('Accordion Converged', module)
-  .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
-      <div className="testWrapper" style={{ width: '300px' }}>
-        {story()}
-      </div>
-    </Screener>
-  ))
-
-  .addStory(
-    'size',
-    () => (
-      <Accordion openItems={[0, 1, 2, 3]}>
-        <AccordionItem value={0}>
-          <AccordionHeader size="small">Small</AccordionHeader>
-          <AccordionPanel>Small Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={1}>
-          <AccordionHeader size="medium">Medium</AccordionHeader>
-          <AccordionPanel>Medium Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={2}>
-          <AccordionHeader size="large">Large</AccordionHeader>
-          <AccordionPanel>Large Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={3}>
-          <AccordionHeader size="extra-large">Extra Large</AccordionHeader>
-          <AccordionPanel>Extra Large Panel</AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    ),
-    { includeRtl: true },
-  )
-  .addStory(
-    'expandIconPosition="end"',
-    () => (
-      <Accordion openItems={[0]}>
-        <AccordionItem value={0}>
-          <AccordionHeader expandIconPosition="end">Opened</AccordionHeader>
-          <AccordionPanel>Visible Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={1}>
-          <AccordionHeader expandIconPosition="end">Closed</AccordionHeader>
-          <AccordionPanel>Hidden Panel</AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    ),
-    { includeRtl: true },
-  )
-  .addStory(
-    'expandIcon="<Icon/>"',
-    () => (
-      <Accordion openItems={[]}>
-        <AccordionItem value={0}>
-          <AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="start">
-            Expand Icon Start
-          </AccordionHeader>
-          <AccordionPanel>Expand Icon Start Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={1}>
-          <AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="end">
-            Expand Icon End
-          </AccordionHeader>
-          <AccordionPanel>Expand Icon End Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={2}>
-          <AccordionHeader inline expandIcon={<CircleRegular />} expandIconPosition="end">
-            Expand Icon Inline End
-          </AccordionHeader>
-          <AccordionPanel>Expand Icon Inline End Panel</AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    ),
-    { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
-  )
-  .addStory(
-    'icon="<Icon/>"',
-    () => (
-      <Accordion openItems={[]}>
-        <AccordionItem value={0}>
-          <AccordionHeader icon={<CircleRegular />} expandIconPosition="start">
-            Icon Start
-          </AccordionHeader>
-          <AccordionPanel>Icon Start Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={1}>
-          <AccordionHeader icon={<CircleRegular />} expandIconPosition="end">
-            Icon End
-          </AccordionHeader>
-          <AccordionPanel>Icon End Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={2}>
-          <AccordionHeader inline icon={<CircleRegular />} expandIconPosition="end">
-            Icon Inline End
-          </AccordionHeader>
-          <AccordionPanel>Icon Inline End Panel</AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    ),
-    { includeRtl: true },
-  )
-  .addStory(
-    'disabled',
-    () => (
-      <Accordion openItems={[]}>
-        <AccordionItem value={0} disabled>
-          <AccordionHeader>Disabled Item Opened</AccordionHeader>
-          <AccordionPanel>Disabled Item Opened Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={1} disabled>
-          <AccordionHeader>Disabled Item Closed</AccordionHeader>
-          <AccordionPanel>Disabled Item Closed Panel</AccordionPanel>
-        </AccordionItem>
-        <AccordionItem value={2} disabled>
-          <AccordionHeader inline>Disabled Item ClosedInline</AccordionHeader>
-          <AccordionPanel>Disabled Item ClosedInline Panel</AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    ),
-    { includeHighContrast: true, includeDarkMode: true },
-  );
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
new file mode 100644
index 0000000000000..611d822aa403a
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+import { CircleRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Accordion Converged',
+
+  decorators: [
+    story => (
+      <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+        <div className="testWrapper" style={{ width: '300px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Accordion>;
+
+export const Size = () => (
+  <Accordion openItems={[0, 1, 2, 3]}>
+    <AccordionItem value={0}>
+      <AccordionHeader size="small">Small</AccordionHeader>
+      <AccordionPanel>Small Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader size="medium">Medium</AccordionHeader>
+      <AccordionPanel>Medium Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2}>
+      <AccordionHeader size="large">Large</AccordionHeader>
+      <AccordionPanel>Large Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={3}>
+      <AccordionHeader size="extra-large">Extra Large</AccordionHeader>
+      <AccordionPanel>Extra Large Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+Size.storyName = 'size';
+
+export const SizeRTL = getStoryVariant(Size, RTL);
+
+export const ExpandIconPositionEnd = () => (
+  <Accordion openItems={[0]}>
+    <AccordionItem value={0}>
+      <AccordionHeader expandIconPosition="end">Opened</AccordionHeader>
+      <AccordionPanel>Visible Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader expandIconPosition="end">Closed</AccordionHeader>
+      <AccordionPanel>Hidden Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+ExpandIconPositionEnd.storyName = 'expandIconPosition="end"';
+
+export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
+
+export const ExpandIconIcon = () => (
+  <Accordion openItems={[]}>
+    <AccordionItem value={0}>
+      <AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="start">
+        Expand Icon Start
+      </AccordionHeader>
+      <AccordionPanel>Expand Icon Start Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="end">
+        Expand Icon End
+      </AccordionHeader>
+      <AccordionPanel>Expand Icon End Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2}>
+      <AccordionHeader inline expandIcon={<CircleRegular />} expandIconPosition="end">
+        Expand Icon Inline End
+      </AccordionHeader>
+      <AccordionPanel>Expand Icon Inline End Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+ExpandIconIcon.storyName = 'expandIcon="<Icon/>"';
+
+export const ExpandIconIconDarkMode = getStoryVariant(ExpandIconIcon, DARK_MODE);
+export const ExpandIconIconHighContrast = getStoryVariant(ExpandIconIcon, HIGH_CONTRAST);
+export const ExpandIconIconRTL = getStoryVariant(ExpandIconIcon, RTL);
+
+export const IconIcon = () => (
+  <Accordion openItems={[]}>
+    <AccordionItem value={0}>
+      <AccordionHeader icon={<CircleRegular />} expandIconPosition="start">
+        Icon Start
+      </AccordionHeader>
+      <AccordionPanel>Icon Start Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader icon={<CircleRegular />} expandIconPosition="end">
+        Icon End
+      </AccordionHeader>
+      <AccordionPanel>Icon End Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2}>
+      <AccordionHeader inline icon={<CircleRegular />} expandIconPosition="end">
+        Icon Inline End
+      </AccordionHeader>
+      <AccordionPanel>Icon Inline End Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+IconIcon.storyName = 'icon="<Icon/>"';
+
+export const IconIconRTL = getStoryVariant(IconIcon, RTL);
+
+export const Disabled = () => (
+  <Accordion openItems={[]}>
+    <AccordionItem value={0} disabled>
+      <AccordionHeader>Disabled Item Opened</AccordionHeader>
+      <AccordionPanel>Disabled Item Opened Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1} disabled>
+      <AccordionHeader>Disabled Item Closed</AccordionHeader>
+      <AccordionPanel>Disabled Item Closed Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2} disabled>
+      <AccordionHeader inline>Disabled Item ClosedInline</AccordionHeader>
+      <AccordionPanel>Disabled Item ClosedInline Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+Disabled.storyName = 'disabled';
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
new file mode 100644
index 0000000000000..81c0afc7df01a
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Accordion Converged',
+
+  decorators: [
+    story => (
+      <Screener
+        steps={new Screener.Steps()
+          .snapshot('normal', { cropTo: '.testWrapper' })
+          .focus('#opened-btn')
+          .snapshot('focus opened', { cropTo: '.testWrapper' })
+          .focus('#closed-btn')
+          .snapshot('focus closed', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        <div className="testWrapper" style={{ width: '300px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Accordion>;
+
+export const VisibilityFocus = () => (
+  <Accordion openItems={[0]}>
+    <AccordionItem value={0}>
+      <AccordionHeader button={{ id: 'opened-btn' }}>Opened</AccordionHeader>
+      <AccordionPanel>Opened Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader button={{ id: 'closed-btn' }}>Closed</AccordionHeader>
+      <AccordionPanel>Closed Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+VisibilityFocus.storyName = 'visibility+focus';
+
+export const VisibilityFocusDarkMode = getStoryVariant(VisibilityFocus, DARK_MODE);
+export const VisibilityFocusHighContrast = getStoryVariant(VisibilityFocus, HIGH_CONTRAST);
+export const VisibilityFocusRTL = getStoryVariant(VisibilityFocus, RTL);