docs(spindle-ui): ユーザーへの通知の種別を1つの表にまとめ、importできるようにする

openameba · Jan 10, 2025 · 9567c5d · 9567c5d
1 parent b275097
commit 9567c5d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 64 deletions.
diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.mdx b/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.mdx
@@ -9,6 +9,7 @@ import CrossBold from '../Icon/CrossBold';
 import {
   VisiblePropsSample
 } from './InlineNotification.stories.example';
+import UserNotificationTypes from '../../storybook/UserNotificationTypes.mdx';
 
 # InlineNotification
 
@@ -33,27 +34,7 @@ InlineNotificationコンポーネントは、ユーザーのアクションに
 
 また、エラー内容を表示するForm/InvalidMessageコンポーネントとは異なり、フォームに紐づかない形で提供されます。
 
-## ユーザーへの通知の種別
-
-ユーザーにお知らせをするための他のComponentとしてToastとSnackBarがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
-
-### 通信を伴うデータ更新のフィードバック
-
-- 成功：[Toast - Confirmation](/docs/toast--confirmation)で、成功した事実のみを伝える
-- 失敗：[InlineNotification - Error Emphasis](/docs/inlinenotification--error-emphasis)で、失敗した理由とユーザーがすべきアクションを伝える
-- 一連の動作のゴールがある場合：完了画面に遷移させる。例：
-  - 登録完了時
-  - 「元の画面に戻る」動作をユーザーにさせたい時
-
-### 通知系Componentの違い
-
-| Component | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
-| [SnackBar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
-| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
-
-※現在は、SPは中央下のみ実装されています。
+<UserNotificationTypes />
 
 ## 指定できる要素
 - `<InlineNotification.Frame>`: 大枠です

diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.stories.mdx b/packages/spindle-ui/src/SnackBar/SnackBar.stories.mdx
@@ -7,7 +7,7 @@ import Information from '../Icon/Information';
 import CheckCircleFill from '../Icon/CheckCircleFill';
 import Openblank from '../Icon/Openblank';
 import ExclamationmarkCircleFill from '../Icon/ExclamationmarkCircleFill';
-
+import UserNotificationTypes from '../../storybook/UserNotificationTypes.mdx';
 
 export const usePoliteAnnouncer = (message) => {
   const announcer = useRef(null);
@@ -120,27 +120,7 @@ SnackBarコンポーネントは、利用者に一時的なお知らせをする
 
 「重要なお知らせ」とは何かは別途まとめる予定です。
 
-## ユーザーへの通知の種別
-
-ユーザーにお知らせをするための他のComponentとしてToastとInlineNotificationがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
-
-### 通信を伴うデータ更新のフィードバック
-
-- 成功：[Toast - Confirmation](/docs/toast--confirmation)で、成功した事実のみを伝える
-- 失敗：[InlineNotification - Error Emphasis](/docs/inlinenotification--error-emphasis)で、失敗した理由とユーザーがすべきアクションを伝える
-- 一連の動作のゴールがある場合：完了画面に遷移させる。例：
-  - 登録完了時
-  - 「元の画面に戻る」動作をユーザーにさせたい時
-
-### 通知系Componentの違い
-
-| Component | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
-| [SnackBar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
-| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
-
-※現在は、SPは中央下のみ実装されています。
+<UserNotificationTypes />
 
 <Source
   language="javascript"

diff --git a/packages/spindle-ui/src/Toast/Toast.stories.mdx b/packages/spindle-ui/src/Toast/Toast.stories.mdx
@@ -6,6 +6,7 @@ import { Button } from '../Button';
 import Information from '../Icon/Information';
 import CheckCircleFill from '../Icon/CheckCircleFill';
 import ExclamationmarkCircleFill from '../Icon/ExclamationmarkCircleFill';
+import UserNotificationTypes from '../../storybook/UserNotificationTypes.mdx';
 
 export const usePoliteAnnouncer = (message) => {
   const announcer = useRef(null);
@@ -115,27 +116,7 @@ Toastコンポーネントは、利用者に一時的なお知らせをする際
 
 「重要なお知らせ」とは何かは別途まとめる予定です。
 
-## ユーザーへの通知の種別
-
-ユーザーにお知らせをするための他のComponentとしてSnackBarとInlineNotificationがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
-
-### 通信を伴うデータ更新のフィードバック
-
-- 成功：[Toast - Confirmation](/docs/toast--confirmation)で、成功した事実のみを伝える
-- 失敗：[InlineNotification - Error Emphasis](/docs/inlinenotification--error-emphasis)で、失敗した理由とユーザーがすべきアクションを伝える
-- 一連の動作のゴールがある場合：完了画面に遷移させる。例：
-  - 登録完了時
-  - 「元の画面に戻る」動作をユーザーにさせたい時
-
-### 通知系Componentの違い
-
-| Component | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
-| ---- | ---- | ---- | ---- | ---- | ---- |
-| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
-| [Snackbar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
-| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
-
-※現在は、SPは中央下のみ実装されています。
+<UserNotificationTypes />
 
 <Source
   language="javascript"

diff --git a/packages/spindle-ui/storybook/UserNotificationTypes.mdx b/packages/spindle-ui/storybook/UserNotificationTypes.mdx
@@ -0,0 +1,12 @@
+## ユーザーへの通知の種別
+
+ユーザーへの通知を提示するComponentとしてToast、SnackBar、InlineNotificationがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
+
+| 選択肢 | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
+| [SnackBar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
+| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
+| 画面外へ遷移させる | 一連の動作にゴールがある（登録時の完了画面など）<br />「元の画面に戻る」動作をさせたい時 | 制限なし | 制限なし | 消えない | 別ページ |
+
+※現在は、SPは中央下のみ実装されています。