chore(localize): deprecate language-only locales

packages/input-email/stories/index.stories.js

@@ -19,7 +19,7 @@ storiesOf('Forms|Input Email', module)
   )
   .add('Use own validator', () => {
     const gmailOnly = modelValue => ({ gmailOnly: modelValue.indexOf('gmail.com') !== -1 });
-    localize.locale = 'en';
+    localize.locale = 'en-GB';
 
     try {
       localize.addData('en', 'lion-validate+gmailOnly', {

packages/localize/RATIONALE.md

@@ -46,6 +46,8 @@ We chose `Intl MessageFormat` as a format for translation parts because:
 
 ### Fallbacks
 
+> Important: language-only locales are now deprecated, and cause a warning. This is because language only locales cause bugs with date and number formatting. It also makes writing locale based tooling harder and more cumbersome. Usage is highly discouraged.
+
 We decided to have a fallback mechanism in case a dialect (e.g. `nl-NL.js`) is not defined, but generic language (e.g. `nl.js`) is, because we wanted to support legacy applications which used [Polymer's AppLocalizeBehavior](https://polymer-library.polymer-project.org/3.0/docs/apps/localize) and could not instantly switch to using full dialects.
 
 We decided to have a fallback locale (`en-GB` by default):

packages/localize/README.md

@@ -177,6 +177,8 @@ Due to the need to develop application code with not everything translated (yet)
 By default the fallback is `en-GB`, meaning that if some namespace does not have data for the current page locale, the `en-GB` will be loaded, making it an important foundation for all other locales data.
 In addition to that the fallback is a necessary mechanism to allow some features of the browsers like Google Chrome translate to work and use the same original data for translations into all not officially supported languages.
 
+> We highly discourage using fallback locales as a user, because it is bug-prone with things like date and number formatting. Please use full locales whenever possible.
+
 ### Rendering data
 
 When all necessary data are loaded and you want to show localized content on the page you need to format the data.

packages/localize/src/LocalizeManager.js

@@ -42,6 +42,14 @@ export class LocalizeManager extends LionSingleton {
     document.documentElement.lang = value;
     this._setupHtmlLangAttributeObserver();
 
+    if (!value.includes('-')) {
+      console.warn(`
+        Locale was set to ${value}.
+        Language only locales are deprecated, please use the full language locale e.g. 'en-GB' instead of 'en'.
+        See https://github.com/ing-bank/lion/issues/187 for more information.
+      `);
+    }
+
     this._onLocaleChanged(value, oldLocale);
   }
 

packages/localize/test/LocalizeManager.test.js

@@ -302,6 +302,25 @@ describe('LocalizeManager', () => {
 
         throw new Error('did not throw');
       });
+
+      it('throws a warning if the locale set by the user is not a full language locale', async () => {
+        const spy = sinon.spy(console, 'warn');
+        manager = new LocalizeManager();
+        manager.locale = 'nl';
+
+        expect(spy.callCount).to.equal(1);
+        console.warn.restore();
+      });
+
+      it('does not throw a warning if locale was set through the html lang attribute', async () => {
+        const spy = sinon.spy(console, 'warn');
+        manager = new LocalizeManager();
+        document.documentElement.lang = 'nl';
+        await aTimeout(50); // wait for mutation observer to be called
+
+        expect(spy.callCount).to.equal(0);
+        console.warn.restore();
+      });
     });
   });
 

packages/localize/test/date/formatDate.test.js

@@ -56,7 +56,7 @@ describe('formatDate', () => {
       day: '2-digit',
       locale: 'en-US',
     };
-    localize.locale = 'bg';
+    localize.locale = 'bg-BG';
     let date = parseDate('29-12-2017');
     expect(formatDate(date)).to.equal('29.12.2017 г.');