feat: add ability to localize common characters (#208)

BrightspaceUI · Nov 18, 2024 · 61b0161 · 61b0161
1 parent 02f63d9
commit 61b0161
Show file tree

Hide file tree

Showing 25 changed files with 434 additions and 10 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -11,5 +11,11 @@
     "rules": {
       "no-console": 0
     }
+  },
+  {
+    "files": "./lang/*.js",
+    "rules": {
+      "quotes": 0
+    }
   }]
 }
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 ## Overview
 
-This library consists of APIs to format and parse numbers, dates, times and file sizes for use in D2L Brightspace.
+This library consists of APIs to format and parse numbers, dates, times and file sizes for use in D2L Brightspace. It also provides localization for common terms.
 
 > Looking for the older `d2l-intl` library? It's still here [in the `v2.x` branch](https://github.com/BrightspaceUI/intl/tree/v2.x).
 
@@ -28,7 +28,9 @@ import { formatNumber, formatPercent } from '@brightspace-ui/intl/lib/number.js'
 
 All of the APIs will automatically detect the document's language via the `lang` attribute on the `<html>` element. They'll also look for various `data-` attributes that will be present in Brightspace pages to access override and timezone information.
 
-## Number Formatting
+## Numbers
+
+### Number Formatting
 
 Integer and decimal numbers can be formatted in the user's locale using `formatNumber`. Percentages can be formatted using `formatPercent`. Use the optional `options` parameter for rounding.
 
@@ -65,7 +67,7 @@ const value = formatPercent(0.333, {
 }); // -> '33.30 %' in en-US
 ```
 
-## Number Parsing
+### Number Parsing
 
 The `parseNumber` method can be used to parse an integer or decimal number written in the user's locale.
 
@@ -75,7 +77,9 @@ import { parseNumber } from '@brightspace-ui/intl/lib/number.js';
 const value = parseNumber('-8 942,39'); // -> -8942.39 in fr-CA
 ```
 
-## Date/Time Formatting
+## Dates & Times
+
+### Date & Time Formatting
 
 Dates and times can be formatted in the user's locale using `formatDate`, `formatTime`, `formatDateTime`, and `formatRelativeDateTime`.
 
@@ -183,7 +187,7 @@ const relativeDateTime = formatRelativeDateTime(
 ); // If today is 2024-08-22, -> 'last week' in en-US
 ```
 
-## Date Parsing
+### Date Parsing
 
 To parse a date written in the user's locale, use `parseDate`:
 
@@ -196,7 +200,7 @@ date.getMonth(); // -> 8 (months are 0-11)
 date.getDate(); // -> 23
 ```
 
-## Time Parsing
+### Time Parsing
 
 To parse a time written in the user's locale, use `parseTime`:
 
@@ -208,7 +212,7 @@ date.getHours(); // -> 14
 date.getMinutes(); // -> 5
 ```
 
-## Date/Time Conversion based on user timezone
+### Date/Time Conversion based on user timezone
 
 To convert an object containing a UTC date to an object containing a local date corresponding to the `data-timezone` attribute:
 ```javascript
@@ -372,7 +376,41 @@ In addition to the Basic Formatting elements, these additional elements may also
 * `<d2l-link>`
 * `<d2l-tooltip-help>`
 
+### Common Resources
+
+Some localization resources are common and shared across D2L applications. To use these resources, set the `loadCommon` option:
+
+```javascript
+import { Localize } from '@brightspace-ui/intl/lib/localize.js';
+
+const localizer = new Localize({
+  loadCommon: true
+});
+```
+
+#### localizeCharacter
+
+The localized value of the following characters can be accessed using `localizeCharacter(char)`:
+* `'` (apostrophe)
+* `&` (ampersand)
+* `*` (asterisk)
+* `\` (backslash)
+* `:` (colon)
+* `,` (comma)
+* `>` (greater-than sign)
+* `<` (less-than sign)
+* `#` (number sign)
+* `%` (percent sign)
+* `|` (pipe)
+* `?` (question mark)
+* `"` (quotation mark)
+
+```javascript
+const value = localizer.localizeCharacter('&'); // -> 'ampersand' in en-US
+```
+
 ### `onResourcesChange`
+
 Provide an `onResourcesChange` callback function to perform tasks when the document language is changed and updated resources are available:
 
 ```javascript

diff --git a/intl.serge.json b/intl.serge.json
@@ -0,0 +1,9 @@
+{
+	"name": "intl",
+	"parser_plugin": {
+	  "plugin": "parse_js"
+	},
+	"source_match": "en\\.js$",
+	"source_dir": "lang",
+	"output_file_path": "lang/%LANG%.js"
+  }
diff --git a/lang/ar.js b/lang/ar.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/cy.js b/lang/cy.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/da.js b/lang/da.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/de.js b/lang/de.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/en-gb.js b/lang/en-gb.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/en.js b/lang/en.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe", // short name or description of the "'" character
+	"intl-common:characters:ampersand": "ampersand", // short name or description of the "&" character
+	"intl-common:characters:asterisk": "asterisk", // short name or description of the "*" character
+	"intl-common:characters:backslash": "backslash", // short name or description of the "\" character
+	"intl-common:characters:colon": "colon", // short name or description of the ":" character
+	"intl-common:characters:comma": "comma", // short name or description of the "," character
+	"intl-common:characters:greaterThan": "greater-than sign", // short name or description of the ">" character
+	"intl-common:characters:lessThan": "less-than sign", // short name or description of the "<" character
+	"intl-common:characters:numberSign": "number sign", // short name or description of the "#" character
+	"intl-common:characters:percentSign": "percent sign", // short name or description of the "%" character
+	"intl-common:characters:pipe": "pipe", // short name or description of the "|" character
+	"intl-common:characters:questionMark": "question mark", // short name or description of the "?" character
+	"intl-common:characters:quotationMark": "quotation mark", // short name or description of the '"' character
+};
diff --git a/lang/es-es.js b/lang/es-es.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/es.js b/lang/es.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/fr-fr.js b/lang/fr-fr.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/fr.js b/lang/fr.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/hi.js b/lang/hi.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/ja.js b/lang/ja.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/ko.js b/lang/ko.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/nl.js b/lang/nl.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/pt.js b/lang/pt.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};
diff --git a/lang/sv.js b/lang/sv.js
@@ -0,0 +1,15 @@
+export default {
+	"intl-common:characters:apostrophe": "apostrophe",
+	"intl-common:characters:ampersand": "ampersand",
+	"intl-common:characters:asterisk": "asterisk",
+	"intl-common:characters:backslash": "backslash",
+	"intl-common:characters:colon": "colon",
+	"intl-common:characters:comma": "comma",
+	"intl-common:characters:greaterThan": "greater-than sign",
+	"intl-common:characters:lessThan": "less-than sign",
+	"intl-common:characters:numberSign": "number sign",
+	"intl-common:characters:percentSign": "percent sign",
+	"intl-common:characters:pipe": "pipe",
+	"intl-common:characters:questionMark": "question mark",
+	"intl-common:characters:quotationMark": "quotation mark",
+};