From 0a89fe75612947ed0dad9fba5950738ae4341297 Mon Sep 17 00:00:00 2001 From: wsuwt Date: Mon, 6 Jun 2022 20:40:58 +0700 Subject: [PATCH 1/2] feat(slider): add localised label for slider thumb --- packages/elements/src/slider/index.ts | 11 +++++++++-- packages/phrasebook/package.json | 7 ++++++- packages/phrasebook/src/locale/de/slider.ts | 11 +++++++++++ packages/phrasebook/src/locale/en/slider.ts | 11 +++++++++++ packages/phrasebook/src/locale/ja/slider.ts | 11 +++++++++++ packages/phrasebook/src/locale/zh-hant/slider.ts | 11 +++++++++++ packages/phrasebook/src/locale/zh/slider.ts | 11 +++++++++++ 7 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 packages/phrasebook/src/locale/de/slider.ts create mode 100644 packages/phrasebook/src/locale/en/slider.ts create mode 100644 packages/phrasebook/src/locale/ja/slider.ts create mode 100644 packages/phrasebook/src/locale/zh-hant/slider.ts create mode 100644 packages/phrasebook/src/locale/zh/slider.ts diff --git a/packages/elements/src/slider/index.ts b/packages/elements/src/slider/index.ts index daab560cb2..cd06f8578f 100644 --- a/packages/elements/src/slider/index.ts +++ b/packages/elements/src/slider/index.ts @@ -11,11 +11,12 @@ import { import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js'; import { property } from '@refinitiv-ui/core/decorators/property.js'; import { query } from '@refinitiv-ui/core/decorators/query.js'; -import { queryAll } from '@refinitiv-ui/core/decorators/query-all.js'; import { state } from '@refinitiv-ui/core/decorators/state.js'; import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js'; import { createRef, ref, Ref } from '@refinitiv-ui/core/directives/ref.js'; import { styleMap } from '@refinitiv-ui/core/directives/style-map.js'; +import { translate, TranslateDirective } from '@refinitiv-ui/translate'; +import '@refinitiv-ui/phrasebook/locale/en/slider.js'; import { VERSION } from '../version.js'; import '../number-field/index.js'; import type { NumberField } from '../number-field'; @@ -198,6 +199,12 @@ export class Slider extends ControlElement { @property({ type: String, attribute: 'min-range' }) public minRange = '0'; + /** + * Slider internal translation strings + */ + @translate({ scope: 'ef-slider' }) + protected t!: TranslateDirective; + /** * Converts value from string to number for calculations * @returns value of input as a number @@ -1316,7 +1323,7 @@ export class Slider extends ControlElement { active=${ifDefined(isActive || undefined)} name="${name}" role="slider" - aria-label="${name}" + aria-label="${this.t(name.toUpperCase())}" tabindex="1" aria-valuemin=${valueMin} aria-valuemax=${valueMax} diff --git a/packages/phrasebook/package.json b/packages/phrasebook/package.json index 632860a9b1..1edde575f6 100644 --- a/packages/phrasebook/package.json +++ b/packages/phrasebook/package.json @@ -37,6 +37,7 @@ "./locale/de/tree-select.js": "./lib/locale/de/tree-select.js", "./locale/de/notification.js": "./lib/locale/de/notification.js", "./locale/de/card.js": "./lib/locale/de/card.js", + "./locale/de/slider.js": "./lib/locale/de/slider.js", "./locale/en/appstate-bar.js": "./lib/locale/en/appstate-bar.js", "./locale/en/autosuggest.js": "./lib/locale/en/autosuggest.js", "./locale/en/calendar.js": "./lib/locale/en/calendar.js", @@ -53,6 +54,7 @@ "./locale/en/tree-select.js": "./lib/locale/en/tree-select.js", "./locale/en/notification.js": "./lib/locale/en/notification.js", "./locale/en/card.js": "./lib/locale/en/card.js", + "./locale/en/slider.js": "./lib/locale/en/slider.js", "./locale/ja/appstate-bar.js": "./lib/locale/ja/appstate-bar.js", "./locale/ja/autosuggest.js": "./lib/locale/ja/autosuggest.js", "./locale/ja/calendar.js": "./lib/locale/ja/calendar.js", @@ -69,6 +71,7 @@ "./locale/ja/tree-select.js": "./lib/locale/ja/tree-select.js", "./locale/ja/notification.js": "./lib/locale/ja/notification.js", "./locale/ja/card.js": "./lib/locale/ja/card.js", + "./locale/ja/slider.js": "./lib/locale/ja/slider.js", "./locale/zh/appstate-bar.js": "./lib/locale/zh/appstate-bar.js", "./locale/zh/autosuggest.js": "./lib/locale/zh/autosuggest.js", "./locale/zh/calendar.js": "./lib/locale/zh/calendar.js", @@ -85,6 +88,7 @@ "./locale/zh/tree-select.js": "./lib/locale/zh/tree-select.js", "./locale/zh/notification.js": "./lib/locale/zh/notification.js", "./locale/zh/card.js": "./lib/locale/zh/card.js", + "./locale/zh/slider.js": "./lib/locale/zh/slider.js", "./locale/zh-hant/appstate-bar.js": "./lib/locale/zh-hant/appstate-bar.js", "./locale/zh-hant/autosuggest.js": "./lib/locale/zh-hant/autosuggest.js", "./locale/zh-hant/calendar.js": "./lib/locale/zh-hant/calendar.js", @@ -100,7 +104,8 @@ "./locale/zh-hant/time-picker.js": "./lib/locale/zh-hant/time-picker.js", "./locale/zh-hant/tree-select.js": "./lib/locale/zh-hant/tree-select.js", "./locale/zh-hant/notification.js": "./lib/locale/zh-hant/notification.js", - "./locale/zh-hant/card.js": "./lib/locale/zh-hant/card.js" + "./locale/zh-hant/card.js": "./lib/locale/zh-hant/card.js", + "./locale/zh-hant/slider.js": "./lib/locale/zh-hant/slider.js" }, "scripts": { "build": "tsc --sourceMap --declarationMap", diff --git a/packages/phrasebook/src/locale/de/slider.ts b/packages/phrasebook/src/locale/de/slider.ts new file mode 100644 index 0000000000..742cdc24e3 --- /dev/null +++ b/packages/phrasebook/src/locale/de/slider.ts @@ -0,0 +1,11 @@ +import { Phrasebook } from '../../translation.js'; + +const translations = { + FROM: 'From', + TO: 'To', + VALUE: 'Value' +}; + +Phrasebook.define('de', 'ef-slider', translations); + +export default translations; diff --git a/packages/phrasebook/src/locale/en/slider.ts b/packages/phrasebook/src/locale/en/slider.ts new file mode 100644 index 0000000000..acb11a85e1 --- /dev/null +++ b/packages/phrasebook/src/locale/en/slider.ts @@ -0,0 +1,11 @@ +import { Phrasebook } from '../../translation.js'; + +const translations = { + FROM: 'From', + TO: 'To', + VALUE: 'Value' +}; + +Phrasebook.define('en', 'ef-slider', translations); + +export default translations; diff --git a/packages/phrasebook/src/locale/ja/slider.ts b/packages/phrasebook/src/locale/ja/slider.ts new file mode 100644 index 0000000000..1b6be4f0c5 --- /dev/null +++ b/packages/phrasebook/src/locale/ja/slider.ts @@ -0,0 +1,11 @@ +import { Phrasebook } from '../../translation.js'; + +const translations = { + FROM: 'From', + TO: 'To', + VALUE: 'Value' +}; + +Phrasebook.define('ja', 'ef-slider', translations); + +export default translations; diff --git a/packages/phrasebook/src/locale/zh-hant/slider.ts b/packages/phrasebook/src/locale/zh-hant/slider.ts new file mode 100644 index 0000000000..9a6c85ba1b --- /dev/null +++ b/packages/phrasebook/src/locale/zh-hant/slider.ts @@ -0,0 +1,11 @@ +import { Phrasebook } from '../../translation.js'; + +const translations = { + FROM: 'From', + TO: 'To', + VALUE: 'Value' +}; + +Phrasebook.define('zh-Hant', 'ef-slider', translations); + +export default translations; diff --git a/packages/phrasebook/src/locale/zh/slider.ts b/packages/phrasebook/src/locale/zh/slider.ts new file mode 100644 index 0000000000..ebe8ae6a30 --- /dev/null +++ b/packages/phrasebook/src/locale/zh/slider.ts @@ -0,0 +1,11 @@ +import { Phrasebook } from '../../translation.js'; + +const translations = { + FROM: 'From', + TO: 'To', + VALUE: 'Value' +}; + +Phrasebook.define('zh', 'ef-slider', translations); + +export default translations; From 539ba1141e0d68beab2cd1c3232684e23216efc3 Mon Sep 17 00:00:00 2001 From: wsuwt Date: Tue, 7 Jun 2022 10:03:50 +0700 Subject: [PATCH 2/2] tests: update snapshots --- packages/elements/src/slider/__snapshots__/Slider.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/elements/src/slider/__snapshots__/Slider.md b/packages/elements/src/slider/__snapshots__/Slider.md index 99dc015e3d..ebf8e9557c 100644 --- a/packages/elements/src/slider/__snapshots__/Slider.md +++ b/packages/elements/src/slider/__snapshots__/Slider.md @@ -23,7 +23,7 @@