普通チェックボックスというと、クリックによってオンオフが切り替わるものが多いですが、今回作成しているものはToDoアプリであるため、クリックしたらタスクそのものを消します。なので見た目はチェックボックスですが、その実ただのボタンであるということになります。

マウスホバー時にだけチェックマークが表示されるようにしましょう。こういったマウスホバーの処理はスタイルシートで書いた方が簡潔なのでそうしましょう。ホバーしたら子要素を消すという指定をするわけです。

ディレクトリ構造

src
  └ components
    └ Atoms
      └ Checkbox
        ├ index.jsx
        ├ story.jsx （旧テンプレートの場合）
        └ index.stories.jsx （新テンプレートの場合）