From d2c183808f61c45cf500a122f4456defad751152 Mon Sep 17 00:00:00 2001 From: kyubisation Date: Tue, 25 Jun 2019 10:01:44 +0200 Subject: [PATCH] feat(i18n): applies common pattern for i18n ids (#56) All i18n attributes now have an id with the pattern sbbComponent... Also added descriptions to all i18n attributes. BREAKING CHANGE: i18n ids have changed. --- .../src/app/getting-started/getting-started.md | 12 +++++++++++- .../docs/markdown/sbb-angular-getting-started.html | 7 ++++++- .../calendar/calendar-header.component.html | 11 ++++------- .../datepicker-toggle.component.html | 2 +- .../month-view/month-view.component.html | 3 +-- .../file-selector/file-selector.component.html | 10 ++++++++-- .../ghettobox/ghettobox/ghettobox.component.html | 6 +++++- .../src/lib/tabs/tabs/tabs.component.html | 9 ++++++--- .../src/lib/tag/tag/tag.component.html | 11 +++++++---- .../src/lib/tag/tags/tags.component.html | 8 +++++++- .../lib/textarea/textarea/textarea.component.html | 4 +++- .../textexpand/textexpand.component.html | 14 ++++++++++++-- .../lib/usermenu/usermenu/usermenu.component.html | 2 +- projects/sbb-esta/angular-public/tslint.json | 3 ++- 14 files changed, 74 insertions(+), 28 deletions(-) diff --git a/projects/angular-showcase/src/app/getting-started/getting-started.md b/projects/angular-showcase/src/app/getting-started/getting-started.md index c6becb22fa..33fa5b0a2f 100644 --- a/projects/angular-showcase/src/app/getting-started/getting-started.md +++ b/projects/angular-showcase/src/app/getting-started/getting-started.md @@ -112,7 +112,17 @@ export class MyOwnCustomACLModule {} Whichever approach you use, be sure to import the ACL modules after Angular's BrowserModule, as the import order matters for NgModules. -## Step 5 (Optional): Use mixins and functions from the library +## Step 5: i18n + +This library uses [Angular i18n](https://angular.io/guide/i18n). All translatables have an id with the pattern "sbb*Component*". +Run `ng xi18n` in your project (after using components of this library in your code) to generate the list of translatables. + +### Datepicker i18n: + +The datepicker uses the CLDR data [provided by Angular](https://angular.io/guide/i18n#setting-up-the-locale-of-your-app). +This means it uses the locale data configured via the `i18nLocale` entry in your angular.json `build` options or configurations. + +## Step 6 (Optional): Use mixins and functions from the library If you need to reuse some mixins from the library, you have to configure your own Angular application in SCSS mode and import `styles.scss` from the library into your `styles.scss`: diff --git a/projects/angular-showcase/src/docs/markdown/sbb-angular-getting-started.html b/projects/angular-showcase/src/docs/markdown/sbb-angular-getting-started.html index 77428e084e..97a3794c54 100644 --- a/projects/angular-showcase/src/docs/markdown/sbb-angular-getting-started.html +++ b/projects/angular-showcase/src/docs/markdown/sbb-angular-getting-started.html @@ -66,7 +66,12 @@

Step 4: Import the component modules

}) export class MyOwnCustomACLModule {}

Whichever approach you use, be sure to import the ACL modules after Angular's BrowserModule, as the import order matters for NgModules.

-

Step 5 (Optional): Use mixins and functions from the library

+

Step 5: i18n

+

This library uses Angular i18n. All translatables have an id with the pattern "sbbComponent". Run ng xi18n in your project (after using components of this library in your code) to generate the list of translatables.

+

+ Datepicker i18n:

+

The datepicker uses the CLDR data provided by Angular. This means it uses the locale data configured via the i18nLocale entry in your angular.json build options or configurations.

+

Step 6 (Optional): Use mixins and functions from the library

If you need to reuse some mixins from the library, you have to configure your own Angular application in SCSS mode and import styles.scss from the library into your styles.scss:

@import '../node_modules/@sbb-esta/angular-public/styles.scss';

You can start building your app using components or icons.

diff --git a/projects/sbb-esta/angular-public/src/lib/datepicker/calendar/calendar-header.component.html b/projects/sbb-esta/angular-public/src/lib/datepicker/calendar/calendar-header.component.html index 87be78caef..a400d9a7ec 100644 --- a/projects/sbb-esta/angular-public/src/lib/datepicker/calendar/calendar-header.component.html +++ b/projects/sbb-esta/angular-public/src/lib/datepicker/calendar/calendar-header.component.html @@ -6,7 +6,7 @@ class="sbb-calendar-controls-left-arrow" [disabled]="!previousMonthEnabled()" (click)="previousMonthClicked()" - i18n-aria-label="Button label to switch to the previous month" + i18n-aria-label="Button label to switch to the previous month@@sbbDatepickerSwitchToPreviousMonth" aria-label="Zum letzten Monat wechseln" > {{ monthText }} diff --git a/projects/sbb-esta/angular-public/src/lib/ghettobox/ghettobox/ghettobox.component.html b/projects/sbb-esta/angular-public/src/lib/ghettobox/ghettobox/ghettobox.component.html index 80462f5e77..0ee53b2540 100644 --- a/projects/sbb-esta/angular-public/src/lib/ghettobox/ghettobox/ghettobox.component.html +++ b/projects/sbb-esta/angular-public/src/lib/ghettobox/ghettobox/ghettobox.component.html @@ -38,7 +38,11 @@
diff --git a/projects/sbb-esta/angular-public/src/lib/tabs/tabs/tabs.component.html b/projects/sbb-esta/angular-public/src/lib/tabs/tabs/tabs.component.html index 600c97db0c..40cde260e3 100644 --- a/projects/sbb-esta/angular-public/src/lib/tabs/tabs/tabs.component.html +++ b/projects/sbb-esta/angular-public/src/lib/tabs/tabs/tabs.component.html @@ -20,9 +20,12 @@ > {{ tab.label }} - {{ - tab.badgePill - }} + {{ tab.badgePill }} diff --git a/projects/sbb-esta/angular-public/src/lib/tag/tag/tag.component.html b/projects/sbb-esta/angular-public/src/lib/tag/tag/tag.component.html index 481296d28f..4d3dbe97de 100644 --- a/projects/sbb-esta/angular-public/src/lib/tag/tag/tag.component.html +++ b/projects/sbb-esta/angular-public/src/lib/tag/tag/tag.component.html @@ -3,7 +3,7 @@ {{ label }}   {{ amount }}  {{ label }}   - {{ - amount - }} + {{ amount }} diff --git a/projects/sbb-esta/angular-public/src/lib/tag/tags/tags.component.html b/projects/sbb-esta/angular-public/src/lib/tag/tags/tags.component.html index 9e8f4df90e..54c0b81dcc 100644 --- a/projects/sbb-esta/angular-public/src/lib/tag/tags/tags.component.html +++ b/projects/sbb-esta/angular-public/src/lib/tag/tags/tags.component.html @@ -1,2 +1,8 @@ - + diff --git a/projects/sbb-esta/angular-public/src/lib/textarea/textarea/textarea.component.html b/projects/sbb-esta/angular-public/src/lib/textarea/textarea/textarea.component.html index 1480340604..d9548c5617 100644 --- a/projects/sbb-esta/angular-public/src/lib/textarea/textarea/textarea.component.html +++ b/projects/sbb-esta/angular-public/src/lib/textarea/textarea/textarea.component.html @@ -12,4 +12,6 @@ cdkTextareaAutosize #autosize="cdkTextareaAutosize" > -
Noch {{ counterObserver$ | async }} Zeichen
+
+ Noch {{ counterObserver$ | async }} Zeichen +
diff --git a/projects/sbb-esta/angular-public/src/lib/textexpand/textexpand/textexpand.component.html b/projects/sbb-esta/angular-public/src/lib/textexpand/textexpand/textexpand.component.html index dfd5b36829..1c598464d8 100644 --- a/projects/sbb-esta/angular-public/src/lib/textexpand/textexpand/textexpand.component.html +++ b/projects/sbb-esta/angular-public/src/lib/textexpand/textexpand/textexpand.component.html @@ -6,6 +6,16 @@ [attr.aria-expanded]="isExpanded" (click)="toggleExpanded()" > - Weniger anzeigen - Mehr anzeigen + Weniger anzeigen + Mehr anzeigen diff --git a/projects/sbb-esta/angular-public/src/lib/usermenu/usermenu/usermenu.component.html b/projects/sbb-esta/angular-public/src/lib/usermenu/usermenu/usermenu.component.html index cec4553ef5..bf2298ca7b 100644 --- a/projects/sbb-esta/angular-public/src/lib/usermenu/usermenu/usermenu.component.html +++ b/projects/sbb-esta/angular-public/src/lib/usermenu/usermenu/usermenu.component.html @@ -51,7 +51,7 @@
- diff --git a/projects/sbb-esta/angular-public/tslint.json b/projects/sbb-esta/angular-public/tslint.json index 71ee9005a3..e40d2288fc 100644 --- a/projects/sbb-esta/angular-public/tslint.json +++ b/projects/sbb-esta/angular-public/tslint.json @@ -2,6 +2,7 @@ "extends": "../../../tslint.json", "rules": { "directive-selector": [true, "attribute", "sbb", "camelCase"], - "component-selector": [true, "element", "sbb", "kebab-case"] + "component-selector": [true, "element", "sbb", "kebab-case"], + "template-i18n": [true, "check-id"] } }