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.
sbb-design-systems · Jun 25, 2019 · d2c1838 · d2c1838
1 parent 1e1ce4b
commit d2c1838
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 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
@@ -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
@@ -66,7 +66,12 @@ <h2 class="docs-markdown-h2">Step 4: Import the component modules</h2>
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> MyOwnCustomACLModule {}</code></pre>
   <p class="docs-markdown-p">Whichever approach you use, be sure to import the ACL modules after Angular's BrowserModule, as the import order matters for NgModules.</p>
-  <h2 class="docs-markdown-h2">Step 5 (Optional): Use mixins and functions from the library</h2>
+  <h2 class="docs-markdown-h2">Step 5: i18n</h2>
+  <p class="docs-markdown-p">This library uses <a href="https://angular.io/guide/i18n" class="docs-markdown-a">Angular i18n</a>. All translatables have an id with the pattern "sbb<em>Component</em>". Run <code class="docs-markdown-code">ng xi18n</code> in your project (after using components of this library in your code) to generate the list of translatables.</p>
+  <h3 id="datepicker-i18n-" class="docs-header-link docs-markdown-h3">
+    <span header-link="datepicker-i18n-"></span> Datepicker i18n: </h3>
+  <p class="docs-markdown-p">The datepicker uses the CLDR data <a href="https://angular.io/guide/i18n#setting-up-the-locale-of-your-app" class="docs-markdown-a">provided by Angular</a>. This means it uses the locale data configured via the <code class="docs-markdown-code">i18nLocale</code> entry in your angular.json <code class="docs-markdown-code">build</code> options or configurations.</p>
+  <h2 class="docs-markdown-h2">Step 6 (Optional): Use mixins and functions from the library</h2>
   <p class="docs-markdown-p">If you need to reuse some mixins from the library, you have to configure your own Angular application in SCSS mode and import <code class="docs-markdown-code">styles.scss</code> from the library into your <code class="docs-markdown-code">styles.scss</code>:</p>
   <pre class="docs-markdown-pre"><code class="language-scss docs-markdown-code">@<span class="hljs-keyword">import</span> <span class="hljs-string">'../node_modules/@sbb-esta/angular-public/styles.scss'</span>;</code></pre>
   <p class="docs-markdown-p">You can start building your app using <a href="./components-list" class="docs-markdown-a">components</a> or <a href="./icons-list" class="docs-markdown-a">icons</a>.</p>

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
@@ -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"
       >
         <sbb-icon-chevron-small-left
@@ -15,18 +15,16 @@
       </button>
       <span
         class="sbb-calendar-controls-label"
-        i18n-aria-label
         [attr.aria-label]="monthText"
         cdkAriaLive="polite"
-        i18n
         >{{ monthText }}</span
       >
       <button
         type="button"
         class="sbb-calendar-controls-right-arrow"
         [disabled]="!nextMonthEnabled()"
         (click)="nextMonthClicked()"
-        i18n-aria-label="Button label to switch to the next month"
+        i18n-aria-label="Button label to switch to the next month@@sbbDatepickerSwitchToNextMonth"
         aria-label="Zum nächsten Monat wechseln"
       >
         <sbb-icon-chevron-small-right
@@ -40,7 +38,7 @@
         class="sbb-calendar-controls-left-arrow"
         [disabled]="!previousYearEnabled()"
         (click)="previousYearClicked()"
-        i18n-aria-label="Button label to switch to the previous year"
+        i18n-aria-label="Button label to switch to the previous year@@sbbDatepickerSwitchToPreviousYear"
         aria-label="Zum letzten Jahr wechseln"
       >
         <sbb-icon-chevron-small-left
@@ -49,7 +47,6 @@
       </button>
       <span
         class="sbb-calendar-controls-label"
-        i18n-aria-label
         [attr.aria-label]="yearText"
         cdkAriaLive="polite"
         >{{ yearText }}</span
@@ -59,7 +56,7 @@
         class="sbb-calendar-controls-right-arrow"
         [disabled]="!nextYearEnabled()"
         (click)="nextYearClicked()"
-        i18n-aria-label="Button label to switch to the next year"
+        i18n-aria-label="Button label to switch to the next year@@sbbDatepickerSwitchToNextYear"
         aria-label="Zum nächsten Jahr wechseln"
       >
         <sbb-icon-chevron-small-right

diff --git a/...esta/angular-public/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.html b/...esta/angular-public/src/lib/datepicker/datepicker-toggle/datepicker-toggle.component.html
@@ -1,6 +1,6 @@
 <button
   aria-haspopup="true"
-  i18n-aria-label="Open calendar"
+  i18n-aria-label="Open calendar@@sbbDatepickerOpenCalendar"
   aria-label="Kalender öffnen"
   [attr.tabindex]="disabled ? -1 : tabIndex"
   [disabled]="disabled"

diff --git a/projects/sbb-esta/angular-public/src/lib/datepicker/month-view/month-view.component.html b/projects/sbb-esta/angular-public/src/lib/datepicker/month-view/month-view.component.html
@@ -1,15 +1,14 @@
 <table class="sbb-calendar-table">
   <thead class="sbb-calendar-table-header">
     <tr>
-      <th *ngFor="let day of weekdays" i18n-aria-label [attr.aria-label]="day.long">
+      <th *ngFor="let day of weekdays" [attr.aria-label]="day.long">
         {{ day.narrow }}
       </th>
     </tr>
     <!-- <tr><th class="sbb-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr> -->
   </thead>
   <tbody
     sbb-calendar-body
-    i18n-label
     label="{{ monthLabel }}"
     [rows]="weeks"
     [todayValue]="todayDate"

diff --git a/.../sbb-esta/angular-public/src/lib/file-selector/file-selector/file-selector.component.html b/.../sbb-esta/angular-public/src/lib/file-selector/file-selector/file-selector.component.html
@@ -13,7 +13,9 @@
       (blur)="onTouched()"
     />
     <span class="sbb-file-selector-button" [class.sbb-file-selector-disabled]="disabled">
-      <span i18n>Datei hochladen</span>
+      <span i18n="Button label to select files for upload@@sbbFileSelectorUploadFile"
+        >Datei hochladen</span
+      >
       <span class="sbb-svgsprite-icon"><sbb-icon-upload></sbb-icon-upload></span>
     </span>
   </label>
@@ -40,7 +42,11 @@
         >, {{ file | fileSizeFormatted }})</span
       >
       <button class="sbb-file-selector-list-remove-icon" (click)="removeFile(file)">
-        <span i18n class="cdk-visually-hidden">Datei entfernen</span>
+        <span
+          i18n="Hidden button label to remove a file from the selection list@@sbbFileSelectorRemoveFile"
+          class="cdk-visually-hidden"
+          >Datei entfernen</span
+        >
         <sbb-icon-trash></sbb-icon-trash>
       </button>
     </li>

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
@@ -38,7 +38,11 @@
       <div class="sbb-ghettobox-close">
         <button type="button" (click)="delete($event)" class="sbb-ghettobox-close-button">
           <sbb-icon-cross></sbb-icon-cross>
-          <span i18n class="cdk-visually-hidden">Hinweismeldung schliessen</span>
+          <span
+            i18n="Hidden button label to close the ghettobox@@sbbGhettoboxCloseGhettobox"
+            class="cdk-visually-hidden"
+            >Hinweismeldung schliessen</span
+          >
         </button>
       </div>
     </article>

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
@@ -20,9 +20,12 @@
       >
         {{ tab.label }}
       </button>
-      <sbb-badge i18n-aria-label aria-label="{{ tab.badgePill }} Einträge" *ngIf="tab.badgePill">{{
-        tab.badgePill
-      }}</sbb-badge>
+      <sbb-badge
+        i18n-aria-label="Aria label for amount of entries displayed in badge pill@@sbbTabsBadgePillAmountOfEntries"
+        aria-label="{{ tab.badgePill }} Einträge"
+        *ngIf="tab.badgePill"
+        >{{ tab.badgePill }}</sbb-badge
+      >
     </li>
   </ul>
 </perfect-scrollbar>

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
@@ -3,7 +3,7 @@
     <span class="sbb-tag-label">{{ label }}</span>
     <span>&nbsp;</span>
     <sbb-badge
-      i18n-aria-label
+      i18n-aria-label="Aria label for amount of results displayed in badge pill@@sbbTagBadgePillAmountOfResults"
       aria-label="{{ amount }} Resultate verfügbar"
       class="sbb-badge-active"
       >{{ amount }}</sbb-badge
@@ -32,8 +32,11 @@
     <span style="display:none">&nbsp;</span>
     <span class="sbb-tag-label">{{ label }}</span>
     <span>&nbsp;</span>
-    <sbb-badge i18n-aria-label aria-label="{{ amount }} Resultate verfügbar" [active]="checked">{{
-      amount
-    }}</sbb-badge>
+    <sbb-badge
+      i18n-aria-label="Aria label for amount of results displayed in badge pill@@sbbTagBadgePillAmountOfResults"
+      aria-label="{{ amount }} Resultate verfügbar"
+      [active]="checked"
+      >{{ amount }}</sbb-badge
+    >
   </label>
 </ng-container>
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
@@ -1,2 +1,8 @@
-<sbb-tag #allTag i18n-label label="Alle" (click)="allTagClick()" [amount]="totalAmount"></sbb-tag>
+<sbb-tag
+  #allTag
+  i18n-label="Label for 'All' tag@@sbbTagsAll"
+  label="Alle"
+  (click)="allTagClick()"
+  [amount]="totalAmount"
+></sbb-tag>
 <ng-content select="sbb-tag, ng-container"></ng-content>
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
@@ -12,4 +12,6 @@
   cdkTextareaAutosize
   #autosize="cdkTextareaAutosize"
 ></textarea>
-<div i18n *ngIf="maxlength && !disabled">Noch {{ counterObserver$ | async }} Zeichen</div>
+<div i18n="Counter text for textarea@@sbbTextareaCounterText" *ngIf="maxlength && !disabled">
+  Noch {{ counterObserver$ | async }} Zeichen
+</div>
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
@@ -6,6 +6,16 @@
   [attr.aria-expanded]="isExpanded"
   (click)="toggleExpanded()"
 >
-  <span class="sbb-textexpand-button-label" *ngIf="isExpanded" i18n>Weniger anzeigen</span>
-  <span class="sbb-textexpand-button-label" *ngIf="!isExpanded" i18n>Mehr anzeigen</span>
+  <span
+    class="sbb-textexpand-button-label"
+    *ngIf="isExpanded"
+    i18n="Button label for showing less@@sbbTextexpandShowLess"
+    >Weniger anzeigen</span
+  >
+  <span
+    class="sbb-textexpand-button-label"
+    *ngIf="!isExpanded"
+    i18n="Button label for showing more@@sbbTextexpandShowMore"
+    >Mehr anzeigen</span
+  >
 </button>
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
@@ -51,7 +51,7 @@
   <div class="sbb-usermenu-logged-off-icon-user">
     <sbb-icon-user></sbb-icon-user>
   </div>
-  <button class="sbb-usermenu-logged-off-button" (click)="emitLogin()" type="button" i18n>
+  <button class="sbb-usermenu-logged-off-button" (click)="emitLogin()" type="button" i18n="Button label for login@@sbbUsermenuLogin">
     Login
   </button>
 </div>

diff --git 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"]
   }
 }