bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-17 09:59:41 +00:00
Code Issues Releases Wiki Activity

[CL-134] Remove bit-i18n selector in favor of [bit-i18n]

Browse Source
This commit is contained in:
Shane Melton
2023-10-04 16:42:06 -07:00
parent 75d8021c55
commit 1e14c34c56
3 changed files with 10 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,7 +39,7 @@ interface I18nStringPart {
* </div>
*/
@Component({
selector: "[bit-i18n],bit-i18n",
selector: "[bit-i18n]",
imports: [SharedModule],
template: `
<ng-container *ngFor="let part of translationParts">

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

@@ -6,7 +6,7 @@ import * as stories from "./i18n.stories";
# I18n with Template Wrapping
The `<bit-i18n>` component is an alternative to the `i18n` pipe that supports template wrapping. It
The `[bit-i18n]` component is an alternative to the `i18n` pipe that supports template wrapping. It
supports wrapping developer defined tags around parts the translated text. It allows translators to
translate the original text more accurately and so that it still follows the grammar rules of the
target language.
@@ -31,7 +31,7 @@ content will be rendered as is.
"This is an example with <0>link</0> tags and <1>bold</1> tags.
The entire sentence can be <2>translated as a whole</2> and re-arranged according to each language's grammar rules."
-->
<bit-i18n key="basicExample">
<div bit-i18n key="basicExample">
<!-- <0></0> -->
<a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
<!-- <1></1> -->
@@ -40,27 +40,7 @@ content will be rendered as is.
<a *bit-i18n-part="let text" href="#">
<strong>{{ text }}</strong>
</a>
</bit-i18n>
```
## Attribute Selector Example
You can also use the `bit-i18n` as an attribute to avoid creating an extra element in the DOM.
<Story of={stories.AttributeSelector} />
<br />
### Source
```html
<!-- otherExample in messages.json
"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-part="let text" href="#">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
</p>
</div>
```
## Missing Template Example
@@ -79,13 +59,13 @@ be rendered as is.
"This is an example with <0>link</0> tags and <1>bold</1> tags.
The entire sentence can be <2>translated as a whole</2> and re-arranged according to each language's grammar rules."
-->
<bit-i18n key="basicExample">
<div bit-i18n key="basicExample">
<!-- <0></0> -->
<a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
<!-- <1></1> -->
<strong *bit-i18n-part="let text">{{ text }}</strong>
<!-- Missing template for <2></2> -->
</bit-i18n>
</div>
```
## Missing Template Example
@@ -102,8 +82,8 @@ You can also pass arguments to the `i18nService.t()` method via the `[args]` inp
<!-- argExample in messages.json
`This is an example with <0>link</0> tags and $SOME_ARG$.`
-->
<bit-i18n key="argExample" [args]="['passed args']">
<div bit-i18n key="argExample" [args]="['passed args']">
<!-- <0></0> -->
<a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
</bit-i18n>
</div>
```

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

@@ -41,25 +41,13 @@ export const Basic: Story = {
render: (args) => ({
props: args,
template: `
<bit-i18n key="basicExample">
<div bit-i18n key="basicExample">
<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>
`,
}),
};
export const AttributeSelector: Story = {
render: (args) => ({
props: args,
template: `
<p bit-i18n key="otherExample">
<a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
<strong *bit-i18n-part="let text">{{ text }}</strong>
</p>
</div>
`,
}),
};