From e9831bb89fe95930cb6345592dacf0908f73c8ea Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Thu, 10 Jun 2021 09:30:39 +0200
Subject: [PATCH] Add dbp-translated documentation and demonstration
---
packages/common/README.md | 16 ++++++++++++++++
packages/common/dbp-common-demo.js | 16 +++++++++++++++-
packages/common/index.js | 2 ++
3 files changed, 33 insertions(+), 1 deletion(-)
diff --git a/packages/common/README.md b/packages/common/README.md
index 212f20cb..218177c5 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -20,3 +20,19 @@ Variables like `--dbp-override-icon-<icon-name>` can be used to override the ico
Example CSS: `html { --dbp-override-icon-cloud: url(/icons/cloud.svg); }`
+## Translated Web Component
+
+You can use this web component to show translated html.
+
+```html
+<dbp-translated subscribe="lang">
+ <div slot="de">
+ Dieser Text is Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
+ </div>
+ <div slot="en">
+ This text is English and will be German if the language is changed to German.
+ </div>
+</dbp-translated>
+```
+
+The English or German text will be shown according to the `lang` attribute.
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 3b610ffa..3bb5532f 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -3,7 +3,7 @@ import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from './utils.js';
import * as commonStyles from './styles.js';
-import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNotification} from './index.js';
+import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNotification, Translated} from './index.js';
export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
constructor() {
@@ -21,6 +21,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
'dbp-loading-button': LoadingButton,
'dbp-auth': customElements.get('dbp-auth'),
'dbp-inline-notification': InlineNotification,
+ 'dbp-translated': Translated,
};
}
@@ -197,6 +198,19 @@ html {
<dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="warning"></dbp-inline-notification>
</div>
</div>
+ <div class="content">
+ <h2>Translated text</h2>
+ <div class="control" id="dbp-translated-demo">
+ <dbp-translated subscribe="lang">
+ <div slot="de">
+ Dieser Text is Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
+ </div>
+ <div slot="en">
+ This text is English and will be German if the language is changed to German.
+ </div>
+ </dbp-translated>
+ </div>
+ </div>
</section>
`;
}
diff --git a/packages/common/index.js b/packages/common/index.js
index 424cbc9f..fee3726a 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -5,6 +5,7 @@ import {MiniSpinner} from './src/mini-spinner.js';
import {Button, LoadingButton} from './src/button.js';
import {Spinner} from './src/spinner.js';
import {InlineNotification} from './src/inline-notification.js';
+import {Translated} from "./src/translated";
export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
export {getIconSVGURL, getIconCSS, Icon};
@@ -12,5 +13,6 @@ export {MiniSpinner};
export {Button, LoadingButton};
export {Spinner};
export {InlineNotification};
+export {Translated};
export * from './src/logger.js';
export {AdapterLitElement} from './src/adapter-lit-element.js';
\ No newline at end of file
--
GitLab