bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 22:44:11 +00:00
Code Issues Releases Wiki Activity

[CL-134] Switch back to bit-i18n-part directive name

Browse Source
This commit is contained in:
Shane Melton
2023-10-04 15:37:11 -07:00
parent 389ac2819c
commit 42b4b18bb7
5 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/components/src/i18n/i18n-tag.directive.ts → libs/components/src/i18n/i18n-part.directive.ts
View File

@@ -7,8 +7,8 @@ import { Directive, TemplateRef } from "@angular/core";
* <a routerLink="../policies" *bit-i18n-part="let text">{{text}}</a>
*/
@Directive({
selector: "[bit-i18n-tag]",
selector: "[bit-i18n-part]",
})
export class I18nTagDirective {
export class I18nPartDirective {
constructor(public templateRef: TemplateRef<any>) {}
}

12
libs/components/src/i18n/i18n.component.ts
View File

@@ -9,7 +9,7 @@ import {
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { I18nTagDirective } from "./i18n-tag.directive";
import { I18nPartDirective } from "./i18n-part.directive";
interface I18nStringPart {
text: string;
@@ -25,13 +25,13 @@ interface I18nStringPart {
* `"This will be a <0>translated link</0> and this will be another <1>translated link</1>."`
*
* The tag identifiers must be numbers surrounded by angle brackets and will be used to match the corresponding
* bit-i18n-tag. If there are not enough bit-i18n-tag directives, the text will be rendered as-is for the remaining
* bit-i18n-part. If there are not enough bit-i18n-part directives, the text will be rendered as-is for the remaining
* tags.
*
* @example
* <div bit-i18n key="exampleI18nKey">
* <a *bit-i18n-tag="let text" routerLink="./first-link">{{ text }}</a>
* <a *bit-i18n-tag="let text" routerLink="./bold-link">
* <a *bit-i18n-part="let text" routerLink="./first-link">{{ text }}</a>
* <a *bit-i18n-part="let text" routerLink="./bold-link">
* <strong>{{ text }}</strong>
* </a>
* </div>
@@ -59,8 +59,8 @@ export class I18nComponent implements AfterContentInit {
@Input()
args: (string | number)[] = [];
@ContentChildren(I18nTagDirective)
templateTags: QueryList<I18nTagDirective>;
@ContentChildren(I18nPartDirective)
templateTags: QueryList<I18nPartDirective>;
protected translationParts: I18nStringPart[] = [];

26
libs/components/src/i18n/i18n.mdx
View File

@@ -13,10 +13,10 @@ target language.
The templating syntax uses numeric marker tags `<0></0>` around text that will be wrapped. The
marker tags should numbered sequentially starting from 0. The marker tags are then matched and
replaced by the `*bit-i18n-tag` directives in the order they appear in the template.
replaced by the `*bit-i18n-part` directives in the order they appear in the template.
If a corresponding `*bit-i18n-tag` directive is not found for a marker tag, the marker tag's content
will be rendered as is.
If a corresponding `*bit-i18n-part` directive is not found for a marker tag, the marker tag's
content will be rendered as is.
## Basic Example
@@ -33,11 +33,11 @@ will be rendered as is.
-->
<bit-i18n key="basicExample">
<!-- <0></0> -->
<a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
<a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
<!-- <1></1> -->
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<strong *bit-i18n-part="let text">{{ text }}</strong>
<!-- <2></2> -->
<a *bit-i18n-tag="let text" href="#">
<a *bit-i18n-part="let text" href="#">
<strong>{{ text }}</strong>
</a>
</bit-i18n>
@@ -58,15 +58,15 @@ You can also use the `bit-i18n` as an attribute to avoid creating an extra eleme
"This is another example with <1>bold</1> tags to show that tag order does not matter and the <0>link</0> tags are after."
-->
<p bit-i18n key="otherExample">
<a *bit-i18n-tag="let text" href="#">{{ text }}</a>
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<a *bit-i18n-part="let text" href="#">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
</p>
```
## Missing Template Example
If there are not enough `*bit-i18n-tag` directives to match the marker tags, the marker tags will be
rendered as is.
If there are not enough `*bit-i18n-part` directives to match the marker tags, the marker tags will
be rendered as is.
<Story of={stories.MissingTemplate} />
@@ -81,9 +81,9 @@ rendered as is.
-->
<bit-i18n key="basicExample">
<!-- <0></0> -->
<a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
<a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
<!-- <1></1> -->
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<strong *bit-i18n-part="let text">{{ text }}</strong>
<!-- Missing template for <2></2> -->
</bit-i18n>
```
@@ -104,6 +104,6 @@ You can also pass arguments to the `i18nService.t()` method via the `[args]` inp
-->
<bit-i18n key="argExample" [args]="['passed args']">
<!-- <0></0> -->
<a *bit-i18n-tag="let text" routerLink="./">{{ text }}</a>
<a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
</bit-i18n>
```

6
libs/components/src/i18n/i18n.module.ts
View File

@@ -2,12 +2,12 @@ import { NgModule } from "@angular/core";
import { SharedModule } from "../shared";
import { I18nTagDirective } from "./i18n-tag.directive";
import { I18nPartDirective } from "./i18n-part.directive";
import { I18nComponent } from "./i18n.component";
@NgModule({
imports: [SharedModule],
declarations: [I18nComponent, I18nTagDirective],
exports: [I18nComponent, I18nTagDirective],
declarations: [I18nComponent, I18nPartDirective],
exports: [I18nComponent, I18nPartDirective],
})
export class I18nModule {}

18
libs/components/src/i18n/i18n.stories.ts
View File

@@ -42,9 +42,9 @@ export const Basic: Story = {
props: args,
template: `
<bit-i18n key="basicExample">
<a *bit-i18n-tag="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<a *bit-i18n-tag="let text" href="https://localization.blog/2022/05/16/i18n-best-practices-keep-it-together/">
<a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
<a *bit-i18n-part="let text" href="https://localization.blog/2022/05/16/i18n-best-practices-keep-it-together/">
<strong>{{ text }}</strong>
</a>
</bit-i18n>
@@ -57,8 +57,8 @@ export const AttributeSelector: Story = {
props: args,
template: `
<p bit-i18n key="otherExample">
<a *bit-i18n-tag="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
</p>
`,
}),
@@ -69,8 +69,8 @@ export const ArgsExample: Story = {
props: args,
template: `
<p bit-i18n key="argExample" [args]="['passed args']">
<a *bit-i18n-tag="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
</p>
`,
}),
@@ -81,8 +81,8 @@ export const MissingTemplate: Story = {
props: args,
template: `
<p bit-i18n key="basicExample">
<a *bit-i18n-tag="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-tag="let text">{{ text }}</strong>
<a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
</p>
`,
}),