feat(loadNonLatinPlex): introduce loadNonLatinPlex utility (#6802)

### Related Ticket(s)

Refs #5025

### Description

This utility will dynamically load in non-Latin fonts, as well as
setting the font-family to the page accordingly. This leverages the
existing Plex CDN fonts.

In addition, the globalInit introduced the execution of this code, so
this ensures that any page that loads in the Masthead or Footer will do
this check and load in the fonts accordingly.

The `react` and `web-components` storybooks have been updated to 
properly set the language/locale codes so that testing of the language 
selector can be done in Storybook.

### Changelog

**New**

- `loadNonLatinPlex` utility

**Changed**

- Added `loadNonLatinPlex` logic to `globalInit`
- Added proper language/locale setting in storybooks

Author: jeffchew

packages/react/.storybook/preview-head.html

@@ -1,12 +1,14 @@
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { AnalyticsAPI } from '../Analytics';
 import { DDOAPI } from '../DDO';
+import loadNonLatinPlex from '@carbon/ibmdotcom-utilities/es/utilities/loadNonLatinPlex/loadNonLatinPlex';
+import { LocaleAPI } from '../Locale';
 
 /**
  * Flag to determine if the global init has been fired
@@ -34,6 +36,11 @@ export function globalInit() {
     );
   });
 
+  // Sets the Plex font for non-Latin fonts
+  LocaleAPI.getLang().then(lang => {
+    loadNonLatinPlex(lang.lc);
+  });
+
   // analytics tracking
   AnalyticsAPI.initAll();
 }

packages/services/src/services/global/global.js

@@ -14,6 +14,7 @@ export * from './featureflag';
 export * from './formatVideoCaption';
 export * from './geolocation';
 export * from './ipcinfoCookie';
+export * from './loadNonLatinPlex';
 export * from './markdownToHtml';
 export * from './removeHtmlTagEntities';
 export * from './sameHeight';

packages/utilities/src/utilities/index.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { loadNonLatinPlex } from '../';
+
+/**
+ * Cleans the page after testing
+ *
+ * @private
+ */
+function _cleanPage() {
+  document.body.style.fontFamily = '';
+  document.getElementsByTagName('head')[0].innerHTML = '';
+}
+
+describe('Load plex utility | Arabic', () => {
+  beforeAll(() => {
+    loadNonLatinPlex('ar');
+  });
+
+  afterAll(() => {
+    _cleanPage();
+  });
+
+  it('should set Plex Arabic font-family on the page', () => {
+    expect(document.body.style.fontFamily).toBe(
+      'IBM Plex Sans Arabic,IBM Plex Sans,Helvetica Neue,Arial,sans-serif'
+    );
+  });
+
+  it('should load Plex Arabic font css on the page', () => {
+    const headContent = document.getElementsByTagName('head')[0].innerHTML;
+    const fontLink =
+      'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/plex/sans-arabic.css';
+
+    expect(headContent.indexOf(fontLink)).not.toEqual(-1);
+  });
+});
+
+describe('Load plex utility | Japanese', () => {
+  beforeAll(() => {
+    loadNonLatinPlex('ja');
+  });
+
+  afterAll(() => {
+    _cleanPage();
+  });
+
+  it('should set Plex Japanese font-family on the page', () => {
+    expect(document.body.style.fontFamily).toBe(
+      'IBM Plex Sans JP,IBM Plex Sans,Helvetica Neue,Arial,sans-serif'
+    );
+  });
+
+  it('should load Plex Japanese font css on the page', () => {
+    const headContent = document.getElementsByTagName('head')[0].innerHTML;
+    const fontLink =
+      'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/plex/sans-jp.css';
+
+    expect(headContent.indexOf(fontLink)).not.toEqual(-1);
+  });
+});
+
+describe('Load plex utility | Korean', () => {
+  beforeAll(() => {
+    loadNonLatinPlex('ko');
+  });
+
+  afterAll(() => {
+    _cleanPage();
+  });
+
+  it('should set Plex Korean font-family on the page', () => {
+    expect(document.body.style.fontFamily).toBe(
+      'IBM Plex Sans KR,IBM Plex Sans,Helvetica Neue,Arial,sans-serif'
+    );
+  });
+
+  it('should load Plex Korean font css on the page', () => {
+    const headContent = document.getElementsByTagName('head')[0].innerHTML;
+    const fontLink =
+      'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/plex/sans-kr.css';
+
+    expect(headContent.indexOf(fontLink)).not.toEqual(-1);
+  });
+});
+
+describe('Load plex utility | English', () => {
+  beforeAll(() => {
+    loadNonLatinPlex('en');
+  });
+
+  it('should not set anything if passing `en`', () => {
+    const links = document.getElementsByTagName('link').length;
+    const family = document.body.style.fontFamily;
+
+    expect(links).toEqual(0);
+    expect(family).toBe('');
+  });
+});

packages/utilities/src/utilities/loadNonLatinPlex/__tests__/loadNonLatinPlex.test.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as loadNonLatinPlex } from './loadNonLatinPlex';

packages/utilities/src/utilities/loadNonLatinPlex/index.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * CDN host for plex fonts
+ *
+ * @type {string}
+ * @private
+ */
+const _host = 'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/plex';
+
+/**
+ * Non-Latin font keys and corresponding entry file/font-family
+ *
+ * @type {{ar: {entry: string, family: string}, jp: {entry: string, family: string}, kr: {entry: string, family: string}}}
+ * @private
+ */
+const _fonts = {
+  ar: {
+    entry: 'sans-arabic',
+    family: 'IBM Plex Sans Arabic',
+  },
+  ja: {
+    entry: 'sans-jp',
+    family: 'IBM Plex Sans JP',
+  },
+  ko: {
+    entry: 'sans-kr',
+    family: 'IBM Plex Sans KR',
+  },
+};
+
+/**
+ * Injects the corresponding CSS entry point to the page
+ *
+ * @param {string} language two-character language code
+ * @private
+ */
+function _injectCSS(language) {
+  const link = document.createElement('link');
+  link.href = `${_host}/${_fonts[language].entry}.css`;
+  link.type = 'text/css';
+  link.rel = 'stylesheet';
+  link.media = 'screen,print';
+
+  document.getElementsByTagName('head')[0].appendChild(link);
+}
+
+/**
+ * Sets the language's font-family to the page
+ *
+ * @param {string} language two-character language code
+ * @private
+ */
+function _setFontFamily(language) {
+  document.body.style.fontFamily = `${_fonts[language].family},IBM Plex Sans,Helvetica Neue,Arial,sans-serif`;
+}
+
+/**
+ * Utility to load in the corresponding non-Latin Plex font if necessary
+ *
+ * @example
+ * import { loadNonLatinPlex } from '@carbon/ibmdotcom-utilities';
+ *
+ * loadNonLatinPlex('ar');
+ *
+ * @param {string} language two-character language code
+ */
+function loadNonLatinPlex(language) {
+  if (_fonts[language]) {
+    _injectCSS(language);
+    _setFontFamily(language);
+  }
+}
+
+export default loadNonLatinPlex;