Merge branch 'main' into add-guidlines-InformationPanel

content/articles/products/components/check-box/index.mdx

@@ -0,0 +1,79 @@
+---
+title: 'CheckBox'
+description: "ユーザーに「true/false」といった正反対の状態を入力させるコンポーネントです。"
+---
+import { ComponentStory } from '@Components/ComponentStory'
+import { ComponentPropsTable } from '@Components/ComponentPropsTable'
+import { DoAndDont } from '@Components/DoAndDont'
+import { StaticImage } from '@Components/StaticImage'
+import { Cluster} from 'smarthr-ui'
+
+import checkBoxDo from './images/check-box-do.png';
+import checkBoxDont from './images/check-box-dont.png';
+
+ユーザーに「true/false」といった正反対の状態を入力させるコンポーネントです。
+`input[type='checkbox']`の代わりとして使用します。
+
+<ComponentStory name="CheckBox" />
+
+## 使用上の注意
+
+### 選択肢が複数選択できる場合に使用する
+
+チェックボックスは選択肢を複数選択できる場合に使用します。
+
+- 複数の選択肢から単一選択しかできず、表示領域に余裕がある場合は原則として[RadioButton](/products/components/radio-button/)を検討してください。
+- 選択肢が多い場合や表示領域が狭い場合は、[Select](/products/components/select/)や[ComboBox](/products/components/combo-box/)を検討してください。
+
+![複数項目をチェックボックスで選択している状態](/images/check-box1.png)
+
+
+### 「ON/OFF」といった2択の切り替え入力に使用しない
+
+チェックボックスは、「ON/OFF」「有効/無効」「はい/いいえ」といった2択の切り替え入力には原則として使用しないでください。  
+
+「ON/OFF」などのブール値で制御できる項目にチェックボックスを使用した場合、一方の選択肢が暗黙的になりチェック状態から現在の選択状態が認識しづらくなる場合があります。
+こうした場合には、選択肢を明示的に表示できる[RadioButton](/products/components/radio-button/)を使用してください。
+
+<Cluster gap={1}>
+  <DoAndDont
+    type="do"
+    img={<StaticImage src={checkBoxDo} alt="Do" width="320" />}
+    label={<Text>すべての選択肢が明示的に表示されてい<br/>るため、現在の状態が把握しやすい</Text>}
+  />
+  <DoAndDont
+    type="dont"
+    img={<StaticImage src={checkBoxDont} alt="Dont" width="320" />}
+    label={<Text>「無効」という選択肢が暗黙的であり、<br/>現在の状態をラベルとチェック状態から<br/>推測しなければならない</Text>}
+  />
+</Cluster>
+
+例外として、以下のようにユーザーに操作内容の確認を促す手段としてチェックボックスを単独で使用することがあります。
+
+- 利用規約などユーザーに許諾を得る必要がある内容の確認を促す場合
+- [削除ダイアログ](/products/design-patterns/delete-dialog/#h3-5)など、重要な操作を行なう場合でユーザーに注意事項の確認を促す場合
+
+![削除ダイアログで操作の確認を促す際のチェックボックスの使用例](/images/check-box-confirm.png)
+
+### submitなしに即時反映するUIとして使用しない
+
+チェックボックスは1クリックで状態が正反対の結果になるため、誤入力による意図しない結果の反映を避けるために、原則として入力後に「送信」や「保存」といったtype属性が`submit`のボタンによって入力確定するフォーム画面などで使用してください。  
+
+よくあるテーブルで「表示/非表示」を切り替える場合や、表示領域上`submit`のボタンの配置が難しい場合など、即時反映を前提とする箇所では[Switch](/products/components/switch/)を使用してください。
+
+## 状態
+
+### 混在（mixed）
+
+[テーブル内の一括操作](/products/design-patterns/table-bulk-action/)の「一括選択するチェックボックス」など、複数のチェックボックスの状態をまとめて示す必要があるチェックボックスにおいて、選択状態と未選択状態が混ざっている状態を示す場合には、混在選択状態（`mixed=true`）を採用します。
+
+![よくあるテーブルでの混在状態のチェックボックスの使用例](/images/check-box-mixed.png)
+
+## デザインパターン
+
+設定画面によくある複数の設定項目でチェックボックスを整列して表示する場合などは、[共通設定の操作権限項目](/products/design-patterns-core-features/access-control-setting-pattern/)のデザインパターンを参考にしてください。
+
+## Props
+
+<ComponentPropsTable name="CheckBox" />
+

content/articles/products/components/compact-information-panel.mdx

@@ -1,9 +1,23 @@
 ---
-title: 'CompactInformationPanel'
-description: ''
+title: 'CompactInformationPanel（非推奨）'
+description: "ユーザーに情報を伝えるために、他の要素より視覚的に目立たせるためのInformationPanelよりもコンパクトなコンポーネントです。NotificationBar[base='base']で代替が可能になったため非推奨です。"
 ---
 import { ComponentStory } from '@Components/ComponentStory'
 import { ComponentPropsTable } from '@Components/ComponentPropsTable'
+import { BaseColumn, WarningIcon } from 'smarthr-ui'
+
+<BaseColumn>
+  <WarningIcon text={
+    <span>
+    CompactInformationPanelは非推奨です。<a href="/products/components/notification-bar/">NotificationBar[base="base"]</a>を利用してください。
+    </span>}
+    />
+</BaseColumn>
+
+ユーザーに情報を伝えるために、他の要素より視覚的に目立たせるための[InformationPanel](/products/components/information-panel/)よりもコンパクトなコンポーネントです。
+InformationPanelとは異なり、パネルを閉じることはできません。
+
+伝えたい情報の種類によってアイコンを切り替えて使います。
 
 <ComponentStory name="CompactInformationPanel" />
 

content/articles/products/components/notification-bar.mdx

@@ -19,34 +19,35 @@ NotificationBarコンポーネントは、フィードバックやメッセー
 
 ## 種類
 
-メッセージで伝えたいことや、メッセージの重要度に合わせて4種類を定義しています。
+メッセージで伝えたいことや、メッセージの重要度に合わせて5種類を定義しています。
 
 ```tsx editable codeBlock
 <Stack style={{width: '100%', background: '#f8f7f6', padding: '8px'}}>
   <NotificationBar type="info" message="バックグラウンド処理中です。" />
   <NotificationBar type="success" message="タスクの削除に成功しました。" />
   <NotificationBar type="warning" message="情報の整合性が取れなくなる可能性があります。" />
   <NotificationBar type="error" message="タスクの削除に失敗しました。" />
+  <NotificationBar type="sync" message="データ連携を実行中です。" />
 </Stack>
 ```
 
 ## 状態
 
 ### 強調
 
-ユーザーへのアテンションを高めたい場合は、`bold={true}`にすることを検討します。
+ユーザーへのアテンションを高めたい場合は、`bold`にすることを検討します。
 
 ```tsx editable codeBlock
 <Stack style={{width: '100%', background: '#f8f7f6', padding: '8px'}}>
-  <NotificationBar type="success" bold={true} message="タスクの削除に成功しました。" onClose={()=>{}} />
-  <NotificationBar type="warning" bold={true} message="情報の整合性が取れなくなる可能性があります。" onClose={()=>{}} />
-  <NotificationBar type="error" bold={true} message="タスクの削除に失敗しました。" onClose={()=>{}} />
+  <NotificationBar type="success" bold message="タスクの削除に成功しました。" onClose={()=>{}} />
+  <NotificationBar type="warning" bold message="情報の整合性が取れなくなる可能性があります。" onClose={()=>{}} />
+  <NotificationBar type="error" bold message="タスクの削除に失敗しました。" onClose={()=>{}} />
 </Stack>
 ```
 
 ### アニメーション
 
-メッセージが表示されたことを強調したい場合は、`animate={true}`にすることでスライドインのアニメーション効果を追加できます。
+メッセージが表示されたことを強調したい場合は、`animate`にすることでスライドインのアニメーション効果を追加できます。
 
 <!-- textlint-disable -->
 export const AnimateNotificationBar = () => {
@@ -56,9 +57,9 @@ export const AnimateNotificationBar = () => {
       {visible && (
         <NotificationBar
           type="success"
-          bold={true}
+          bold
           message="タスクの登録に成功しました。"
-          animate={true}
+          animate
           onClose={() => setVisible(!visible)}
         />
       )}
@@ -143,7 +144,7 @@ export const AnimateNotificationBar = () => {
 #### アプリケーション全体にメッセージを表示する
 
 アプリケーション全体にメッセージを表示している例です。  
-アプリケーション内で画面を切り替えてもメッセージが表示され続けることを表すため、[Header](/products/components/header/)よりも上に配置します。また、必ず見てもらいたいメッセージなので`bold={true}`にしています。
+アプリケーション内で画面を切り替えてもメッセージが表示され続けることを表すため、[Header](/products/components/header/)よりも上に配置します。また、必ず見てもらいたいメッセージなので`bold`にしています。
 
 ![NotificationBarを使ってアプリケーション全体へメッセージを表示している例](./images/notification-bar-static1.png)
 

content/articles/products/components/page-counter.mdx

@@ -1,10 +1,12 @@
 ---
 title: 'PageCounter'
-description: ''
+description: '主に「よくあるテーブル」などコレクションの全件数と選択されている現在のページの件数を表示するためのコンポーネントです。'
 ---
 import { ComponentPropsTable } from '@Components/ComponentPropsTable'
 import { ComponentStory } from '@Components/ComponentStory'
 
+主に[よくあるテーブル](/products/design-patterns/smarthr-table)などコレクションの全件数と選択されている現在のページの件数を表示するためのコンポーネントです。
+
 <ComponentStory name="PageCounter" />
 
 ## Props

content/articles/products/components/select.mdx

@@ -9,6 +9,27 @@ import { ComponentStory } from '@Components/ComponentStory'
 
 <ComponentStory name="Select" />
 
+## 使用上の注意
+
+### 選択肢が6個以上の場合に使用する
+
+基本的に選択肢の数が6個以上になる場合はSelectを使用します。初期状態では選択肢を一覧できないことに注意してください。
+
+ユーザーがスムーズに操作できるよう、選択肢の数に応じてSelectコンポーネント以外の使用も考えられます。
+
+#### 選択肢が5個以下の場合
+
+一般的に人は4±1個の情報のまとまりまでしか短期的に記憶できないと言われています。選択肢が5個以下であれば、初期状態で選択肢が一覧できる[RadioButton](/products/components/radio-button/)の使用を推奨します。
+ただし、RadioButtonで配置するスペースがない場合はSelectも使用可能です。
+
+#### 選択肢の数が不定の場合
+
+ユーザーの設定や条件によって選択肢の数が増減するなど、実装時に数を固定できない場合は、想定される最大数を考慮して使用するコンポーネントを判断してください。
+
+### ComboBoxとの使い分け
+
+単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合は[ComboBox](/products/components/combo-box/)の使用を検討してください。
+
 ## Props
 
 <ComponentPropsTable name="Select" />

content/articles/products/contents/error-messages.mdx

@@ -4,8 +4,6 @@ description: 'SmartHRアプリケーション内で表示されるエラーメ
 order: 5
 ---
 
-import { AirtableEmbed } from '@Components/article/AirtableEmbed/AirtableEmbed'
-
 アプリケーション内に表示するエラーメッセージの作成に関するガイドラインです。
 
 エラーメッセージのライティングは、基本的に[ライティングスタイル](../writing-style/)、[用字用語](../idiomatic-usage/data/)に準拠します。
@@ -86,14 +84,10 @@ import { AirtableEmbed } from '@Components/article/AirtableEmbed/AirtableEmbed'
     例：PDFを一括でアップロードする
 
 ##### 1. CSVを取り込むことで、目的の操作をする場合
-<AirtableEmbed tableName="エラーメッセージ（CSV取り込みのバックグラウンド処理）">
-  <iframe class="airtable-embed" src="https://airtable.com/embed/shrnuHRy5KGrszh4a?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
-</AirtableEmbed>
+<iframe className="airtable-embed" src="https://airtable.com/embed/shrnuHRy5KGrszh4a?backgroundColor=teal&viewControls=on" frameBorder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
 
 ##### 2. 目的となる操作とユーザーが実行する操作が一致している場合
-<AirtableEmbed tableName="エラーメッセージ（バックグラウンド処理）">
-  <iframe class="airtable-embed" src="https://airtable.com/embed/shrh2JnB7gShnieyO?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
-</AirtableEmbed>
+<iframe className="airtable-embed" src="https://airtable.com/embed/shrh2JnB7gShnieyO?backgroundColor=teal&viewControls=on" frameBorder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
 
 ### FlashMessage
 * [FlashMessage](https://smarthr.design/products/components/flash-message/)で伝える要素は、**原因**または**原因・対処**です。
@@ -113,6 +107,4 @@ import { AirtableEmbed } from '@Components/article/AirtableEmbed/AirtableEmbed'
 
 
 #### ライティングパターン
-<AirtableEmbed tableName="エラーメッセージ（Flash Message）">
-  <iframe class="airtable-embed" src="https://airtable.com/embed/shrJesWWfaW3G0B02?backgroundColor=teal&viewControls=on" frameborder="0" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
-</AirtableEmbed>
+<iframe className="airtable-embed" src="https://airtable.com/embed/shrJesWWfaW3G0B02?backgroundColor=teal&viewControls=on" frameBorder="0" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

content/articles/products/contents/writing-principles.mdx

@@ -7,8 +7,7 @@ order: 1
 ライティングガイドラインは、SmartHRのプロダクトで表記する言葉についての指針を示したものです。
 
 [デザイン原則](/products/principles/)に基づき、わかりやすく統一感のある言葉を誰でも迷わずに決定できる状態を目指します。  
-「わかりやすい」の定義については、[UXライティンググループミッション 〜プロダクトを、もっとわかりやすく〜](https://smarthr-inc.docbase.io/posts/2138204)を参照してください。
-
+「わかりやすい」の定義については、[UXライティング部のビジョン](https://smarthr-inc.docbase.io/posts/2438010)を参照してください。
 ### 適用範囲
 SmartHRのプロダクトで表記する言葉すべてです。  
 プロダクトとは、アプリケーションだけでなく、ヘルプセンターなど、ユーザーがSmartHRを使うときに触れるものすべてを指します。

content/articles/products/design-patterns-core-features/main-admin.mdx

@@ -195,7 +195,7 @@ OOUIにおける`モーダル`画面の一種で、一覧ビューの[よくあ
 
 #### C-3. フォーム入力エリア - オブジェクトのプロパティ
 オブジェクトの持つさまざまなプロパティを設定するフォーム入力要素を配置するエリアです。
-代表的なフォーム入力要素としては、[FormGroup](/products/components/form-group/)や[Input](../../../products/components/input/)を使用したテキスト入力のほか、[共通設定の操作権限項目](/products/design-patterns-core-features/access-control-setting-pattern/)といったチェックボックスやラジオボタンを組み合わせた設定項目などがあります。
+代表的なフォーム入力要素としては、[FormControl](/products/components/form-control/)や[Fieldset](/products/components/fieldset/)、[Input](../../../products/components/input/)を使用したテキスト入力のほか、[共通設定の操作権限項目](/products/design-patterns-core-features/access-control-setting-pattern/)といったチェックボックスやラジオボタンを組み合わせた設定項目などがあります。
 
 #### C-4. タブ
 対象オブジェクトのフォームが長大になることが想定される場合、フォームを分割表示し俯瞰性を高めるために[TabBar](../../../products/components/tab-bar/)の使用を検討します。

content/articles/products/design-patterns/delete-dialog.mdx

@@ -18,8 +18,6 @@ import {
 } from 'smarthr-ui'
 import { ComponentPreview } from '@Components/ComponentPreview'
 
-import { AirtableEmbed } from '@Components/article/AirtableEmbed/AirtableEmbed'
-
 削除操作をするときのアクションダイアログを定義します。
 
 ## 基本的な考え方