diff --git a/README.md b/README.md index 7b9c39bab..1af69d332 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ from JavaScript with CSS Modules: import '@freee_jp/vibes/css'; ``` -スタイルを読み込んだら、Vibes の React Component を次のように使うだけです。 +スタイルを読み込んだら、vibes の React Component を次のように使うだけです。 ```js import * as React from 'react'; diff --git a/docs/Colors.stories.mdx b/docs/Colors.stories.mdx index 779205ce3..8a16bff10 100644 --- a/docs/Colors.stories.mdx +++ b/docs/Colors.stories.mdx @@ -4,14 +4,14 @@ import { Meta } from "@storybook/addon-docs"; # 色についての方針 -Vibes 内で使用する色、ならびに Vibes を使用するプロダクトで使用する色は、[freee のブランドカラー](https://brand.freee.co.jp/designelements/color/)から選定してください。 +vibes 内で使用する色、ならびに vibes を使用するプロダクトで使用する色は、[freee のブランドカラー](https://brand.freee.co.jp/designelements/color/)から選定してください。 また、コントラスト比の確保に留意してください（[コントラスト比確保の重要性](https://a11y-guidelines.freee.co.jp/explanations/contrast.html)） - テキストコンテンツに関しては 4.5:1 のコントラスト比を確保してください - テキストコンテンツ以外に関しては、画面の情報を読み解くのに必要な部分に関しては 3:1 のコントラスト比を確保してください -# Vibes 内で使用されるセマンティックカラー +# vibes 内で使用されるセマンティックカラー 特定の意味を伝えるために、いくつかの色はその意味と紐付いた **セマンティックカラー** として定義します。 これらの意味を伝える場合、または色を使用する場合は、色と意味の組み合わせに一貫性があるようにしてください。 @@ -50,7 +50,7 @@ Vibes 内で使用する色、ならびに Vibes を使用するプロダクト # 外部への提供 -Color 定数として Vibes 内に定義された 16 進数カラーコードを提供します。 +Color 定数として vibes 内に定義された 16 進数カラーコードを提供します。 変数名は歴史的な経緯で名付けられているものもあり、必ずしもその色の使用目的を表現していないことに注意してください。 diff --git a/docs/Contribution.stories.mdx b/docs/Contribution.stories.mdx index 8de657331..49f0525d3 100644 --- a/docs/Contribution.stories.mdx +++ b/docs/Contribution.stories.mdx @@ -2,10 +2,10 @@ import { Meta } from "@storybook/addon-docs"; -# Vibes の開発に参加する +# vibes の開発に参加する このドキュメントを読んでいただいてありがとうございます。 -きっとこれを読んでいるあなたはVibesの開発に参加しようと思ってくれている方かなと思います。そういう人向けの情報を書いていきます。 +きっとこれを読んでいるあなたはvibesの開発に参加しようと思ってくれている方かなと思います。そういう人向けの情報を書いていきます。 ## Issue を立てる @@ -14,7 +14,7 @@ TBD ## Pull Request する -Vibesは誰でもPull RequestしてOKです。あなたからのPull Requestをお待ちしております。 +vibesは誰でもPull RequestしてOKです。あなたからのPull Requestをお待ちしております。 レビューはSlackの #vibes_dev にて、「vdevくじ」で振ってください。 ### 開発環境の準備 @@ -60,36 +60,36 @@ TBD #### majorバージョンに該当する変更 -Vibesを利用する側のプロダクトで、バージョンアップ時に確認や変更が強いられるもの（破壊的変更が含まれるもの）は `major` ラベルを付与します。 +vibesを利用する側のプロダクトで、バージョンアップ時に確認や変更が強いられるもの（破壊的変更が含まれるもの）は `major` ラベルを付与します。 -- Vibesを利用する側で、コードの変更が強いられるもの +- vibesを利用する側で、コードの変更が強いられるもの - 既存コンポーネントの削除 - 既存のpropsの意味が変わってしまうもの -- Vibesを利用する側で、画面デザインの変更が強いられるもの +- vibesを利用する側で、画面デザインの変更が強いられるもの - コンポーネントの外形の大きさが大きく変わってしまうような変更 -- Vibesを利用する側で設定の変更が必要となるもの +- vibesを利用する側で設定の変更が必要となるもの - ビルドまわりの設定変更が必要となりそうなもの - peerDependenciesが増えるもの・減るもの -- Vibes側で大きな方針の変更をするもの +- vibes側で大きな方針の変更をするもの - バージョン指定基準が決まるとか - その他、盛大に祝ったり気持ちを盛り上げ（バイブスを上げ）たりしたいもの #### minorバージョンに該当するもの -コンポーネントの追加・改善などを含み、Vibesを利用するプロダクト側で変更や確認が強いられない場合には `minor` ラベルを付与します。 +コンポーネントの追加・改善などを含み、vibesを利用するプロダクト側で変更や確認が強いられない場合には `minor` ラベルを付与します。 - コンポーネントの追加 - コンポーネントの機能改善 - propsの追加や、取り得る値の追加 - コンポーネントのデザイン改善 - - その改善が加わることによってVibesを使う側の画面のデザインを変更する必要のないもの -- その他、新機能や機能改善がありつつ、Vibesを使う側ではコードや画面デザインの変更が不要な変更 + - その改善が加わることによってvibesを使う側の画面のデザインを変更する必要のないもの +- その他、新機能や機能改善がありつつ、vibesを使う側ではコードや画面デザインの変更が不要な変更 #### patchバージョンに該当するもの `major`, `minor` に該当する変更がない場合は、 `patch` ラベルを付与してください。 - APIに変化のないバグフィックス -- Vibes内で使用しているnpmモジュールのバージョンアップ -- Vibes内のリファクタリング -- その他、新機能や機能改善でもなく、Vibes利用側でのコードや画面デザインの不要な変更 +- vibes内で使用しているnpmモジュールのバージョンアップ +- vibes内のリファクタリング +- その他、新機能や機能改善でもなく、vibes利用側でのコードや画面デザインの不要な変更 diff --git a/docs/Readme.stories.mdx b/docs/Readme.stories.mdx index e26e8b431..bbd56dcf1 100644 --- a/docs/Readme.stories.mdx +++ b/docs/Readme.stories.mdx @@ -2,13 +2,13 @@ import { Meta } from '@storybook/addon-docs'; -# Vibes +# vibes コンポーネントベースのデザインシステムです。 -## Vibes の動作ブラウザ +## vibes の動作ブラウザ -Vibes の動作想定環境は[freee の動作環境](https://support.freee.co.jp/hc/ja/articles/202848120) に準じます。 +vibes の動作想定環境は[freee の動作環境](https://support.freee.co.jp/hc/ja/articles/202848120) に準じます。 スクリーンリーダーに関しては[アクセシビリティー・ガイドラインの標準環境](https://a11y-guidelines.freee.co.jp/explanations/screen-reader-check.html#id79)に準じますが、簡便なテストのために VoiceOver を併用します。 - 以下のブラウザで必要に応じて動作確認をしています @@ -20,43 +20,43 @@ Vibes の動作想定環境は[freee の動作環境](https://support.freee.co.j - スクリーンリーダーでの挙動・バグについては Windows 上の Chrome と NVDA での動作確認に基きます - 一部のブラウザにのみ発生する不具合に関してはバグとして対応しない判断をする場合があります -## Vibes の使い方 +## vibes の使い方 -### Vibes を使った画面デザイン +### vibes を使った画面デザイン -コーディングをせずに画面デザインを行う場合には Sketch を使用してください。Vibes の Library ファイルは Sketch Cloud で配布しています。 +コーディングをせずに画面デザインを行う場合には Sketch を使用してください。vibes の Library ファイルは Sketch Cloud で配布しています。 必要な場合は UX チームにお問い合わせください。 -- Vibes のコンポーネントには、Figma では表現しきれない制約が存在しています。使おうとしているコンポーネントの仕様は Storybook で確認してください +- vibes のコンポーネントには、Figma では表現しきれない制約が存在しています。使おうとしているコンポーネントの仕様は Storybook で確認してください - その他の注意点などを [Design ページ](/?path=/docs/doc-design--page) に記載してあります。ご確認ください ### Storybook からコンポーネントを探す -Vibes のコンポーネントは他のどのコンポーネントにも依存しない `lv1` と、他のコンポーネントを組み合わせてある `lv2` に大別されています +vibes のコンポーネントは他のどのコンポーネントにも依存しない `lv1` と、他のコンポーネントを組み合わせてある `lv2` に大別されています - コンポーネントを探す際は `lv2` から探し、作ろうとしているものが `lv2` で実現できない場合は `lv1` を組み合わせて使うことを検討してください - Storybook に `examples` として、レイアウトのサンプルを用意しています。こちらも参考にしてください -### 作ろうとしているものが Vibes だけでは実現不可能なとき +### 作ろうとしているものが vibes だけでは実現不可能なとき -Vibes に追加されているコンポーネントは、プロダクトを跨いで使用するような汎用的なものを想定しています。 -そのため、プロダクト固有のドメインに強く紐付くもの、ユーザーに強くアトラクトする必要のあるものについては、Vibes を使用しないほうが効果的な場合があります。 +vibes に追加されているコンポーネントは、プロダクトを跨いで使用するような汎用的なものを想定しています。 +そのため、プロダクト固有のドメインに強く紐付くもの、ユーザーに強くアトラクトする必要のあるものについては、vibes を使用しないほうが効果的な場合があります。 -- あなた自身が画面デザインを作成している場合は、あなた自身が画面デザインを作成している場合は、Vibes のコンポーネントのみの組みあわせで目的を達成できるか検討してください - - Vibes で完結する画面設計であれば、工数の削減や品質の向上が見込めます。画面デザインで期待する効果と比較したうえで意思決定してください - - Vibes を使用しない場合でも、Vibes や freee 全体のトーン＆マナーを意識して、全体の統一感を著しく損わないよう注意してください +- あなた自身が画面デザインを作成している場合は、あなた自身が画面デザインを作成している場合は、vibes のコンポーネントのみの組みあわせで目的を達成できるか検討してください + - vibes で完結する画面設計であれば、工数の削減や品質の向上が見込めます。画面デザインで期待する効果と比較したうえで意思決定してください + - vibes を使用しない場合でも、vibes や freee 全体のトーン＆マナーを意識して、全体の統一感を著しく損わないよう注意してください - デザイナーから渡されたものをコーディングしている場合は、まずデザイナーに問い合わせてください - デザイナーがコンポーネントの技術制約を認識できていない場合も考えられます。まずはデザイナーの意思を確認してください - - 必要に応じて、Vibes の仕様変更や、プロダクト側での UI コンポーネント実装を検討してください + - 必要に応じて、vibes の仕様変更や、プロダクト側での UI コンポーネント実装を検討してください - プロダクト側で実装する場合には、今後のアップデートに耐えられる実装を意識してください - - **Vibes のコンポーネントへのスタイル上書きはしないでください** 。`.vb-` で始まるクラス名や、内部の要素セレクタへのスタイル指定を行わないでください。スタイルの上書きは影響範囲を読みづらく、メンテナンス性を下げてしまいます - - **`.vb-` で始まる className をプロダクト内で使用しないでください**。Vibes コンポーネントの DOM 構造は今後変更することがあり、その場合に Vibes のアップデートが困難になります - - Vibes 内で使用していない `.vb-` で始まる className も、使用しないでください。 -- Vibes と組み合わせてスタイルシートを記述する場合は、文字サイズ変更時の整合性を保つため、 `px` ではなく `rem` を使用してください + - **vibes のコンポーネントへのスタイル上書きはしないでください** 。`.vb-` で始まるクラス名や、内部の要素セレクタへのスタイル指定を行わないでください。スタイルの上書きは影響範囲を読みづらく、メンテナンス性を下げてしまいます + - **`.vb-` で始まる className をプロダクト内で使用しないでください**。vibes コンポーネントの DOM 構造は今後変更することがあり、その場合に vibes のアップデートが困難になります + - vibes 内で使用していない `.vb-` で始まる className も、使用しないでください。 +- vibes と組み合わせてスタイルシートを記述する場合は、文字サイズ変更時の整合性を保つため、 `px` ではなく `rem` を使用してください ### アクセシビリティ -Vibes を使用しただけでは、必ずしもアクセシビリティの配慮が要らなくなるというものではありません。 +vibes を使用しただけでは、必ずしもアクセシビリティの配慮が要らなくなるというものではありません。 - Storybook 内の Examples や各コンポーネントのドキュメントにはあちこちにアクセシビリティの向上に必要な情報が書かれています - アクセシビリティ向上のために用意された `prop` には、使い方を誤るとかえってアクセシビリティを下げてしまうものもあるため、ドキュメントをよく読んで使用してください @@ -86,7 +86,7 @@ import '@freee_jp/vibes/css'; - CSS の読み込み方法は、プロジェクトの技術選定状況にあわせて検討してください -### Vibes コンポーネントの使用 +### vibes コンポーネントの使用 `vibes` から 個別のコンポーネントを import して使用してください @@ -110,7 +110,7 @@ const Component = () => } ``` -- Vibes では TypeScript をサポートしています。プロジェクトで使用できる場合には TypeScript を使用してください。 +- vibes では TypeScript をサポートしています。プロジェクトで使用できる場合には TypeScript を使用してください。 - Flow にも対応していますが、新規に採用するのは **非推奨** です。Flow の型定義ファイルは手作業によるメンテナンスとなっており、TypeScript との差異がある状態になっています。 - `vibes/dist` や `vibes/src` からの import は **禁止** です。 @@ -133,7 +133,7 @@ const Component = () => ### VibesContext -Vibes コンポーネント共通の設定を、`VibesContext` から変更して使うことができます +vibes コンポーネント共通の設定を、`VibesContext` から変更して使うことができます ```tsx import { VibesProvider } from '@freee_jp/vibes'; diff --git a/examples/Forms.mdx b/examples/Forms.mdx index 2f5a59ca1..f04007b42 100644 --- a/examples/Forms.mdx +++ b/examples/Forms.mdx @@ -2,7 +2,7 @@ import { Story, Canvas } from '@storybook/addon-docs/blocks'; # フォーム -Vibes では3種類のフォームの組み方を提供しています +vibes では3種類のフォームの組み方を提供しています - 縦フォーム - 横フォーム