summaryrefslogtreecommitdiff
path: root/docs/guide/guidelines
diff options
context:
space:
mode:
authorPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
committerPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
commit7385e139b0c9efca7430458cee982e63e282f4ae (patch)
tree1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/guide/guidelines
parentb24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff)
downloadwebui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/guide/guidelines')
-rw-r--r--docs/guide/guidelines/colors.md25
-rw-r--r--docs/guide/guidelines/internationalization.md42
-rw-r--r--docs/guide/guidelines/motion.md13
-rw-r--r--docs/guide/guidelines/typography.md2
4 files changed, 47 insertions, 35 deletions
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index 3ba91b6a..6ddcfeee 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -1,4 +1,5 @@
# Colors
+
This color palette has been agreed upon by the OpenBMC community and differs
from the Bootstrap color patterns. The OpenBMC palette includes custom hex
values, along with additional blue, green, red, and yellow color variables used
@@ -6,45 +7,45 @@ as accent colors for components. The `.scss` component files use these accent
colors to override default styles set by the Bootstrap library.
- [Learn more about theme customization](/customization/theme/)
-- [Open an issue in the OpenBMC webui-vue
- repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a
- change
-- [Learn more about Bootstrap
- colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
+- [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new/choose)
+ to request a change
+- [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
## Grays
+
<colors-grays/>
## Blues
+
<colors-blues/>
## Greens
+
<colors-greens/>
## Reds
+
<colors-reds/>
## Yellows
+
<colors-yellows/>
## All Colors
+
`All Colors` is the term Bootstrap uses to describe the colors that make up the
`colors` map. These colors and the Grays color variables define the
`theme-colors` map colors.
-[Learn more about the Bootstrap color
-maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
+[Learn more about the Bootstrap color maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
<colors-all/>
## Theme Colors
+
The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant
prop that accepts any of the `theme-colors` keys to set the theme of a
component.
-[Learn more about the Bootstrap theme-colors
-maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
+[Learn more about the Bootstrap theme-colors maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
<colors-theme/>
-
-
-
diff --git a/docs/guide/guidelines/internationalization.md b/docs/guide/guidelines/internationalization.md
index 6ff17d76..7afc4598 100644
--- a/docs/guide/guidelines/internationalization.md
+++ b/docs/guide/guidelines/internationalization.md
@@ -1,41 +1,48 @@
# Internationalization
+
The OpenBMC Web UI implements internationalization and separates the language-
-specific parts of the interface from the rest of the code, so they can be
-easily replaced. The OpenBMC Web UI uses the following library for
+specific parts of the interface from the rest of the code, so they can be easily
+replaced. The OpenBMC Web UI uses the following library for
internationalization:
+
- [Vue I18n](https://kazupon.github.io/vue-i18n/introduction.html)
## Key naming convention
+
The OpenBMC Web UI follows the following key naming conventions:
- Page specific labels should be nested in an object with a key prefixed `page`
-followed by the page title. Formatting in this manner provides a systematic
-structure and improves readability of the language file.
- - e.g. `pageLocalUserManagement.editUser`
+ followed by the page title. Formatting in this manner provides a systematic
+ structure and improves readability of the language file.
+ - e.g. `pageLocalUserManagement.editUser`
- Any 'major' child components should be nested inside page specific objects
-(ex. table, modal)
- - e.g. `pageEventLogs.table.eventType`
+ (ex. table, modal)
+ - e.g. `pageEventLogs.table.eventType`
- Avoid any complex linked locale messages.
- Alphabetize object keys. This helps in locating the keys.
- We use the `$t()` function in markup and `this.$t` in scripts (which Vue I18n
-provides to our components) for outputting translation messages.
+ provides to our components) for outputting translation messages.
## Using the Vue I18n plugin
-- A new `src/i18n.js` file is added and it registers Vue I18n as a plugin to
-our Vue instance via the `Vue.use()` function.
+
+- A new `src/i18n.js` file is added and it registers Vue I18n as a plugin to our
+ Vue instance via the `Vue.use()` function.
- The CLI creates a `src/locales/en-US.json` file, which contains our default
-translation messages.
+ translation messages.
- The keys are placed in the `src/locales/en-US.json` file and then the `$t()`
-function is used to output the translation messages.
+ function is used to output the translation messages.
- After adding or removing calls to `$t` please run this to ensure consistent
-English translation (note: using variable expansion in key names is not
-handled automatically, you need to manually check them):
+ English translation (note: using variable expansion in key names is not
+ handled automatically, you need to manually check them):
+
```bash
node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue)' -l 'src/locales/en-US.json'
```
+
- If you're working on updating a translation for another language (e.g.
-Russian), run this to see the omissions (as well as cruft) and add the
-necessary keys automatically:
+ Russian), run this to see the omissions (as well as cruft) and add the
+ necessary keys automatically:
+
```bash
node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue)' -l 'src/locales/ru-RU.json' -a
```
@@ -51,8 +58,7 @@ node node_modules/vue-i18n-extract/bin/vue-i18n-extract.js -v 'src/**/*.?(js|vue
```
- Vue I18n’s `$tc()` function can help with displaying plurals.
-[Learn more about
-pluralization.](https://kazupon.github.io/vue-i18n/guide/pluralization.html)
+ [Learn more about pluralization.](https://kazupon.github.io/vue-i18n/guide/pluralization.html)
```json
"modal": {
diff --git a/docs/guide/guidelines/motion.md b/docs/guide/guidelines/motion.md
index 4e176293..8ec9f5b7 100644
--- a/docs/guide/guidelines/motion.md
+++ b/docs/guide/guidelines/motion.md
@@ -1,18 +1,20 @@
# Motion
+
The motion guidelines are based on Carbon Design System guidelines. These
guidelines avoid easing curves that are unnatural, distracting, or purely
-decorative. [The documentation below is attributed to Carbon's animation
-documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
-
+decorative.
+[The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
## Easing
### Productive motion
+
Productive motion creates a sense of efficiency and responsiveness, while
remaining subtle and out of the way. Productive motion is appropriate for
moments when the user needs to focus on completing tasks.
### Expressive motion
+
Expressive motion delivers enthusiastic, vibrant, and highly visible movement.
Use expressive motion for significant moments such as opening a new page,
clicking the primary action button, or when the movement itself conveys a
@@ -20,6 +22,7 @@ meaning. System alerts and the appearance of notification boxes are great cases
for expressive motion.
### Easing tokens
+
```
$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
@@ -30,6 +33,7 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
```
## Duration
+
Duration is calculated based on the style and size of the motion. Among the two
motion styles, productive motion is significantly faster than expressive motion.
Motion’s duration should be dynamic based on the size of the animation; the
@@ -37,6 +41,7 @@ larger the change in distance (traveled) or size (scaling) of the element, the
longer the animation takes.
### Duration tokens
+
```
$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
$duration--fast-02: 110ms; //Micro-interactions such as fade
@@ -44,4 +49,4 @@ $duration--moderate-01: 150ms; //Micro-interactions, small expansion, short dist
$duration--moderate-02: 240ms; //Expansion, system communication, toast
$duration--slow-01: 400ms; //Large expansion, important system notifications
$duration--slow-02: 700ms; //Background dimming
-``` \ No newline at end of file
+```
diff --git a/docs/guide/guidelines/typography.md b/docs/guide/guidelines/typography.md
index db88d407..c972c3a8 100644
--- a/docs/guide/guidelines/typography.md
+++ b/docs/guide/guidelines/typography.md
@@ -1 +1 @@
-# Typography \ No newline at end of file
+# Typography