From b23671860734789c1fe43e573e00990ae54f8350 Mon Sep 17 00:00:00 2001
From: tomof <fffjt007@gmail.com>
Date: Tue, 28 Nov 2023 10:32:32 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20RightFixedNote=E3=81=AEVRT=E7=94=A8Sto?=
 =?UTF-8?q?ry=E3=82=92=E8=BF=BD=E5=8A=A0=20(#4042)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VRTRightFixedNote.stories.tsx             | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/RightFixedNote/VRTRightFixedNote.stories.tsx

diff --git a/src/components/RightFixedNote/VRTRightFixedNote.stories.tsx b/src/components/RightFixedNote/VRTRightFixedNote.stories.tsx
new file mode 100644
index 0000000000..abed22e4e7
--- /dev/null
+++ b/src/components/RightFixedNote/VRTRightFixedNote.stories.tsx
@@ -0,0 +1,62 @@
+import { StoryFn } from '@storybook/react'
+import React from 'react'
+import styled from 'styled-components'
+
+import { InformationPanel } from '../InformationPanel'
+
+import { RightFixedNote } from './RightFixedNote'
+import { All } from './RightFixedNote.stories'
+
+export default {
+  title: 'Data Display（データ表示）/RightFixedNote',
+  component: RightFixedNote,
+  parameters: {
+    withTheming: true,
+  },
+}
+
+export const VRTHover: StoryFn = () => (
+  <>
+    <VRTInformationPanel title="VRT 用の Story です" togglable={false}>
+      hoverの状態で表示されます
+    </VRTInformationPanel>
+    <All />
+  </>
+)
+VRTHover.parameters = {
+  controls: { hideNoControlsWarning: true },
+  pseudo: {
+    hover: ['button'],
+  },
+}
+
+export const VRTFocusVisible: StoryFn = () => (
+  <>
+    <VRTInformationPanel title="VRT 用の Story です" togglable={false}>
+      focusの状態で表示されます
+    </VRTInformationPanel>
+    <All />
+  </>
+)
+VRTFocusVisible.parameters = {
+  controls: { hideNoControlsWarning: true },
+  pseudo: {
+    focusVisible: ['button', 'textarea'],
+  },
+}
+
+export const VRTForcedColors: StoryFn = () => (
+  <>
+    <VRTInformationPanel title="VRT 用の Story です" togglable={false}>
+      Chromatic 上では強制カラーモードで表示されます
+    </VRTInformationPanel>
+    <All />
+  </>
+)
+VRTForcedColors.parameters = {
+  chromatic: { forcedColors: 'active' },
+}
+
+const VRTInformationPanel = styled(InformationPanel)`
+  margin-bottom: 24px;
+`