feat: Step 付き FormDialog の新規作成（FormDialogの拡張ではないバージョン）

[schktjm]

関連URL

asana: https://app.asana.com/0/1206535203416259/1208178713972396/f イメージ図: https://kufuinc.slack.com/archives/CGC58MW01/p1725506017398559?thread_ts=1725505216.026419&cid=CGC58MW01

4972 で、FormDialog の拡張版を作ったのですが、若干ロジックが複雑になってしまったため独立で作ってみました！

比較用に PR は残しています！

概要

Step を持つ FormDialog の実装をしました。

目的

• Step 付きダイアログの見た目を統一するため
• アクセシビリティの観点で、次ステップへ移動したときのフォーカスをダイアログトップへ移動させるため

使用イメージ

<StepFormDialog>
  <Step />
  <Step />
  <Step />
</StepFormDialog>

type FormDialogに追加したProps = {
  decorators?: DecoratorsType<'nextButtonLabel' | 'backButtonLabel'>
  onClickNext?: () => void  // 次へボタンを押したときのイベントハンドラ
  onClickBack?: () => void  // 前へボタンを押したときのイベントハンドラ
}

変更内容

• 4972 から路線変更をして、コンポーネントを新しく生成する方法で実装しました

• FormDialog に、戻る・次へボタンなどをデフォルトで設置するようにしました

確認方法

storybook のコンポーネントを作ったのでそこから確認お願いします！ http://localhost:6006/?path=/story/dialog%EF%BC%88%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%EF%BC%89-stepformdialog--default

[pkg-pr-new[bot]]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@5004

commit: 30b5923