docs(spindle-ui): add Design Doc for BottomButton

packages/spindle-ui/src/BottomButton/design-doc.md

@@ -0,0 +1,75 @@
+# BottomButton
+
+## 概要・背景
+画面下部に固定されるボタンです。Webページが長く、重要なボタンがページ下部に配置されているとたくさんスクロールする必要あります。 BottomButtonはユーザーがどの位置にスクロールしていても画面下部に表示されているためアクセスを容易にします。
+
+## スクリーンショット
+<img width="334" alt="BottomButtonのイメージ画像。画面下部にボタンが固定されている" src="https://github.com/openameba/spindle/assets/44389443/e6ec209b-d8af-4ae1-bfb6-e7bbe4e459f6">
+
+## 使用例
+基本的にSpindleの`Button`コンポーネントを渡して利用することを想定しています。 fixedで配置する場合とstickyで配置するパターンを想定しています。
+なお、レスポンシブでの実装でPCサイズだけ画面下部に配置をしない場合は、mediaQuery等を利用しpositionを上書きする想定です。
+
+### DO
+```tsx
+<BottomButton position="fixed"> // fixed or sticky
+  <Button size="large" variant="contained" layout="fullWidth">新規登録</Button>
+</BottomButton>
+```
+
+## 要素
+
+### Design Tokens
+- Surface Primary (背景色)
+
+### プロパティ
+```typescript
+type Props = {
+  children?: React.ReactNode;
+  className?: string;
+  position?: 'fixed' | 'sticky';
+};
+```
+
+##### Position
+- `fixed`: 画面下部に固定されます。
+- `sticky`: 親要素下部に固定されます。親要素がスクロールアウトすると一緒にスクロールアウトします。
+
+## 実装例
+書き出されるマークアップです。
+```html
+<div class="spui-BottomButton spui-BottomButton--fixed">
+  <div class="spui-BottomButton-wrap">
+    <button class="spui-Button spui-Button--fullWidth spui-Button--large spui-Button--contained">新規登録</button>
+  </div>
+</div>
+```
+
+React実装です。
+```tsx
+return (
+  <BottomButton position="fixed">
+    <Button size="large" variant="contained" layout="fullWidth">新規登録</Button>
+  </BottomButton>
+);
+```
+
+## アクセシビリティ
+- [表示の向きを固定しない](https://a11y-guidelines.ameba.design/1/3/4/)[SHOULD]
+  - [ ] 画面の向きに関わらず画面下部に表示されるように実装している
+- [リフローできる](https://a11y-guidelines.ameba.design/1/4/10/)[SHOULD]
+  - [ ] 画面を400%まで拡大しても、画面幅に合わせて横幅が変動する
+- [キーボード、タッチデバイスで操作できる](https://a11y-guidelines.ameba.design/2/1/1/)[MUST]
+  - [ ] リンクはTabキーでフォーカスでき、Enterキーで実行できる
+- [適切なフォーカス順序にする](https://a11y-guidelines.ameba.design/2/4/3/)[MUST]
+  - [ ] キーボード操作の順序が、見た目の順序と一致している
+- [フォーカスを見えるようにする](https://a11y-guidelines.ameba.design/2/4/7/)[MUST]
+  - [ ] リンクは、フォーカスの状態が見える
+- [フォーカス時にコンテンツを大きく変更しない](https://a11y-guidelines.ameba.design/3/2/1/)[MUST]
+  - [ ] フォーカス時にコンテンツが大きく変更されない
+- [ナビゲーションの位置を統一する](https://a11y-guidelines.ameba.design/3/2/3/)[SHOULD]
+  - [ ] ナビゲーションは画面下部に固定されている
+- [HTMLを正しく記述する](https://a11y-guidelines.ameba.design/4/1/1/)[MUST]
+  - [ ] HTML仕様に準拠した実装をしている
+- [HTMLの要素や属性を正しい役割で使用する](https://a11y-guidelines.ameba.design/4/1/2/)[MUST]
+  - [ ] ボタンはbutton要素で実装している