Add i18n recipe (Esteve Graells code) (#955)

* additional own recipes: i18n and lwclogger

Own recipes created to showcase i18n and how to send events from LWC to Event Monitoring

* New LWC for sending events to Event Monitoring

* Run prettier and fix lint errors

* Rename component

* Add recipe to misc tab, refactor

* Remove logger

* Remove wrong recipe

* Remove CSS file

* Add test

* Add requested changes

---------

Co-authored-by: Esteve Graells <[email protected]>

force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml

@@ -29,6 +29,12 @@
                 <identifier>miscModal</identifier>
             </componentInstance>
         </itemInstances>
+        <itemInstances>
+            <componentInstance>
+                <componentName>miscI18n</componentName>
+                <identifier>c_miscI18n</identifier>
+            </componentInstance>
+        </itemInstances>
         <name>region2</name>
         <type>Region</type>
     </flexiPageRegions>

force-app/main/default/lwc/miscI18n/__tests__/miscI18n.test.js

@@ -0,0 +1,75 @@
+import { createElement } from 'lwc';
+import MiscI18n from 'c/miscI18n';
+import USER_LOCALE from '@salesforce/i18n/locale';
+import USER_CURRENCY from '@salesforce/i18n/currency';
+
+describe('c-misc-i18n', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('component is initialized with correct variables', () => {
+        // Create initial element
+        const element = createElement('c-misc-i18n', {
+            is: MiscI18n
+        });
+        document.body.appendChild(element);
+
+        const userLocale = element.shadowRoot.querySelector('span.userLocale');
+        expect(userLocale).not.toBeNull();
+        expect(userLocale.textContent).toBe(USER_LOCALE);
+
+        const dateUserLocale = element.shadowRoot.querySelector(
+            'span.dateUserLocale'
+        );
+        expect(dateUserLocale).not.toBeNull();
+        expect(dateUserLocale.textContent).toBe(
+            new Intl.DateTimeFormat(USER_LOCALE).format(new Date())
+        );
+
+        const currencyUserLocale = element.shadowRoot.querySelector(
+            'span.currencyUserLocale'
+        );
+        expect(currencyUserLocale).not.toBeNull();
+        expect(currencyUserLocale.textContent).toBe(
+            new Intl.NumberFormat(USER_LOCALE, {
+                style: 'currency',
+                currency: USER_CURRENCY,
+                currencyDisplay: 'symbol'
+            }).format(100)
+        );
+
+        const dateJapanLocale = element.shadowRoot.querySelector(
+            'span.dateJapanLocale'
+        );
+        expect(dateJapanLocale).not.toBeNull();
+        expect(dateJapanLocale.textContent).toBe(
+            new Intl.DateTimeFormat('ja-JP').format(new Date())
+        );
+
+        const currencyJapanLocale = element.shadowRoot.querySelector(
+            'span.currencyJapanLocale'
+        );
+        expect(currencyJapanLocale).not.toBeNull();
+        expect(currencyJapanLocale.textContent).toBe(
+            new Intl.NumberFormat('ja-JP', {
+                style: 'currency',
+                currency: 'JPY',
+                currencyDisplay: 'symbol'
+            }).format(100)
+        );
+    });
+
+    it('is accessible', async () => {
+        const element = createElement('c-misc-i18n', {
+            is: MiscI18n
+        });
+
+        document.body.appendChild(element);
+
+        await expect(element).toBeAccessible();
+    });
+});

force-app/main/default/lwc/miscI18n/miscI18n.html

@@ -0,0 +1,38 @@
+<template>
+    <lightning-card title="MiscI18n" icon-name="custom:custom19">
+        <div class="slds-var-m-around_medium">
+            <p>
+                User's locale:&nbsp;
+                <span class="userLocale"><b>{userLocale}</b></span>
+            </p>
+            <p>
+                Today's date formatted with {userLocale}:&nbsp;
+                <span class="dateUserLocale">
+                    <b>{dateUserLocale}</b>
+                </span>
+            </p>
+            <p>
+                100 {userCurrency} formatted with {userLocale}:&nbsp;
+                <span class="currencyUserLocale">
+                    <b>{currencyUserLocale}</b>
+                </span>
+            </p>
+            <p>
+                Today's date formatted with {japanLocale}:&nbsp;
+                <span class="dateJapanLocale">
+                    <b>{dateJapanLocale}</b>
+                </span>
+            </p>
+            <p>
+                100 {japanCurrency} formatted with {japanLocale}:&nbsp;
+                <span class="currencyJapanLocale">
+                    <b>{currencyJapanLocale}</b>
+                </span>
+            </p>
+        </div>
+        <c-view-source source="lwc/miscI18n" slot="footer">
+            Use the standard JS Intl class to format dates and numbers with
+            different locales and currencies.
+        </c-view-source>
+    </lightning-card>
+</template>

force-app/main/default/lwc/miscI18n/miscI18n.js

@@ -0,0 +1,36 @@
+import { LightningElement } from 'lwc';
+import USER_LOCALE from '@salesforce/i18n/locale';
+import USER_CURRENCY from '@salesforce/i18n/currency';
+
+export default class I18n extends LightningElement {
+    userLocale = USER_LOCALE;
+    userCurrency = USER_CURRENCY;
+    japanLocale = 'ja-JP';
+    japanCurrency = 'JPY';
+
+    get dateUserLocale() {
+        const date = new Date();
+        return new Intl.DateTimeFormat(USER_LOCALE).format(date);
+    }
+
+    get dateJapanLocale() {
+        const date = new Date();
+        return new Intl.DateTimeFormat(this.japanLocale).format(date);
+    }
+
+    get currencyUserLocale() {
+        return new Intl.NumberFormat(USER_LOCALE, {
+            style: 'currency',
+            currency: USER_CURRENCY,
+            currencyDisplay: 'symbol'
+        }).format(100);
+    }
+
+    get currencyJapanLocale() {
+        return new Intl.NumberFormat(this.japanLocale, {
+            style: 'currency',
+            currency: this.japanCurrency,
+            currencyDisplay: 'symbol'
+        }).format(100);
+    }
+}

force-app/main/default/lwc/miscI18n/miscI18n.js-meta.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+	<apiVersion>61.0</apiVersion>
+	<isExposed>true</isExposed>
+	<targets>
+		<target>lightning__RecordPage</target>
+		<target>lightning__AppPage</target>
+		<target>lightning__HomePage</target>
+	</targets>	
+</LightningComponentBundle>