Translate "On this page" component (#523)

* Add initial setup for "On this page" translation * Add new internationalization story * Update tests to use i18n keys * Add first tagalog translation Due to our use of the fallbackLng config option for i18next * Bump version for a prerelease Will test in vets-website * Add tagalog to i18next setup config * Prepare versions for full publishing * Add Tagalog button to story
department-of-veterans-affairs · Aug 31, 2022 · 5b2fee6 · 5b2fee6
1 parent d5b4770
commit 5b2fee6
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 43 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "11.5.5",
+  "version": "11.6.0",
   "license": "MIT",
   "scripts": {
     "build": "webpack"

diff --git a/packages/core/src/i18n/i18n-setup.js b/packages/core/src/i18n/i18n-setup.js
@@ -4,6 +4,7 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import mainTag from './language-detector';
 import enTranslation from './translations/en';
 import esTranslation from './translations/es';
+import tlTranslation from './translations/tl';
 
 const languageDetector = new LanguageDetector();
 languageDetector.addDetector(mainTag);
@@ -15,6 +16,7 @@ i18next.use(languageDetector).init({
   resources: {
     en: { translation: enTranslation },
     es: { translation: esTranslation },
+    tl: { translation: tlTranslation },
   },
 });
 

diff --git a/packages/core/src/i18n/translations/en.js b/packages/core/src/i18n/translations/en.js
@@ -23,4 +23,5 @@ export default {
   'october': 'October',
   'november': 'November',
   'december': 'December',
+  'on-this-page': 'On this page',
 };
diff --git a/packages/core/src/i18n/translations/es.js b/packages/core/src/i18n/translations/es.js
@@ -23,4 +23,5 @@ export default {
   'october': 'Octubre',
   'november': 'Noviembre',
   'december': 'Diciembre',
+  'on-this-page': 'En esta página',
 };
diff --git a/packages/core/src/i18n/translations/tl.js b/packages/core/src/i18n/translations/tl.js
@@ -0,0 +1,3 @@
+export default {
+  'on-this-page': 'Sa pahinang ito',
+};
diff --git a/packages/storybook/stories/va-on-this-page.stories.jsx b/packages/storybook/stories/va-on-this-page.stories.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { getWebComponentDocs, StoryDocs } from './wc-helpers';
 
 const otpDocs = getWebComponentDocs('va-on-this-page');
@@ -14,43 +14,66 @@ export default {
   },
 };
 
+const articleJSX = (
+  <article>
+    <va-on-this-page></va-on-this-page>
+    <h2 id="if-im-a-veteran">
+      If I’m a Veteran, can I get VR&amp;E benefits and services?
+    </h2>
+    <p>
+      You may be eligible for VR&amp;E benefits and services if you’re a
+      Veteran, and you meet all of the requirements listed below.
+    </p>
+    <p>
+      <strong>All of these must be true. You:</strong>
+    </p>
+    <ul>
+      <li>
+        Didn’t receive a dishonorable discharge, <strong>and</strong>
+      </li>
+      <li>
+        Have a service-connected disability rating of at least 10% from VA,
+        <strong>and</strong>
+      </li>
+      <li>
+        <a href="#">Apply for VR&amp;E services</a>
+      </li>
+    </ul>
+    <h2 id="telephone-contacts">Telephone Contacts</h2>
+    <p>Here is a table of phone numbers</p>
+    <h2 id="some-additional-info">Some additional information</h2>
+    <p>Placeholder for additional content.</p>
+    <ol>
+      <li>Alpha</li>
+      <li>Beta</li>
+      <li>Gamma</li>
+    </ol>
+  </article>
+);
+
 const Template = () => {
+  return articleJSX;
+};
+
+const I18nTemplate = args => {
+  const { headline, level, ...rest } = args;
+  const [lang, setLang] = useState('en');
+
+  useEffect(() => {
+    document.querySelector('main').setAttribute('lang', lang);
+  }, [lang]);
+
   return (
-    <article>
-      <va-on-this-page></va-on-this-page>
-      <h2 id="if-im-a-veteran">
-        If I’m a Veteran, can I get VR&amp;E benefits and services?
-      </h2>
-      <p>
-        You may be eligible for VR&amp;E benefits and services if you’re a
-        Veteran, and you meet all of the requirements listed below.
-      </p>
-      <p>
-        <strong>All of these must be true. You:</strong>
-      </p>
-      <ul>
-        <li>
-          Didn’t receive a dishonorable discharge, <strong>and</strong>
-        </li>
-        <li>
-          Have a service-connected disability rating of at least 10% from VA,
-          <strong>and</strong>
-        </li>
-        <li>
-          <a href="#">Apply for VR&amp;E services</a>
-        </li>
-      </ul>
-      <h2 id="telephone-contacts">Telephone Contacts</h2>
-      <p>Here is a table of phone numbers</p>
-      <h2 id="some-additional-info">Some additional information</h2>
-      <p>Placeholder for additional content.</p>
-      <ol>
-        <li>Alpha</li>
-        <li>Beta</li>
-        <li>Gamma</li>
-      </ol>
-    </article>
+    <div>
+      <button onClick={e => setLang('es')}>Español</button>
+      <button onClick={e => setLang('en')}>English</button>
+      <button onClick={e => setLang('tl')}>Tagalog</button>
+
+      {articleJSX}
+    </div>
   );
 };
 
 export const Default = Template.bind(null);
+
+export const Internationalization = I18nTemplate.bind(null);
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "4.12.5",
+  "version": "4.13.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/web-components/src/components/va-on-this-page/test/va-on-this-page.e2e.ts b/packages/web-components/src/components/va-on-this-page/test/va-on-this-page.e2e.ts
@@ -13,7 +13,7 @@ describe('va-on-this-page', () => {
         <mock:shadow-root>
           <nav aria-labelledby="on-this-page">
             <dl>
-              <dt id="on-this-page">On this page</dt>
+              <dt id="on-this-page">on-this-page</dt>
               <dd role="definition"></dd>
             </dl>
           </nav>
@@ -60,7 +60,7 @@ describe('va-on-this-page', () => {
         <mock:shadow-root>
           <nav aria-labelledby="on-this-page">
             <dl>
-              <dt id="on-this-page">On this page</dt>
+              <dt id="on-this-page">on-this-page</dt>
               <dd role="definition">
                 <a href="#an-id">
                   <i aria-hidden="true" class="fa-arrow-down fas"></i>
@@ -99,7 +99,7 @@ describe('va-on-this-page', () => {
     <mock:shadow-root>
       <nav aria-labelledby="on-this-page">
         <dl>
-          <dt id="on-this-page">On this page</dt>
+          <dt id="on-this-page">on-this-page</dt>
           <dd role="definition">
             <a href="#foo">
               <i aria-hidden="true" class="fa-arrow-down fas"></i>
@@ -136,7 +136,7 @@ describe('va-on-this-page', () => {
         <mock:shadow-root>
           <nav aria-labelledby="on-this-page">
             <dl>
-              <dt id="on-this-page">On this page</dt>
+              <dt id="on-this-page">on-this-page</dt>
               <dd role="definition">
                 <a href="#an-id">
                   <i aria-hidden="true" class="fa-arrow-down fas"></i>

diff --git a/packages/web-components/src/components/va-on-this-page/va-on-this-page.tsx b/packages/web-components/src/components/va-on-this-page/va-on-this-page.tsx
@@ -1,6 +1,21 @@
-import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  forceUpdate,
+  h,
+  Prop
+} from '@stencil/core';
+import i18next from 'i18next';
+import { Build } from '@stencil/core';
 import { consoleDevError } from '../../utils/utils';
 
+if (Build.isTesting) {
+  // Make i18next.t() return the key instead of the value
+  i18next.init({ lng: 'cimode' });
+}
+
 /**
  * This component will render links based on the content around it. It scans the document for any `<h2>`
  * elements that contain an `id` inside of an `<article>` and will create a list of links to the headings.
@@ -17,6 +32,8 @@ import { consoleDevError } from '../../utils/utils';
   shadow: true,
 })
 export class VaOnThisPage {
+  @Element() el: HTMLElement;
+
   /**
    * The event used to track usage of the component. This is emitted when the
    * user clicks on a link and enableAnalytics is true.
@@ -46,6 +63,16 @@ export class VaOnThisPage {
     });
   };
 
+  connectedCallback() {
+    i18next.on('languageChanged', () => {
+      forceUpdate(this.el);
+    });
+  }
+
+  disconnectedCallback() {
+    i18next.off('languageChanged');
+  }
+
   render() {
     const { handleOnClick } = this;
 
@@ -61,7 +88,7 @@ export class VaOnThisPage {
     return (
       <nav aria-labelledby="on-this-page">
         <dl>
-          <dt id="on-this-page">On this page</dt>
+          <dt id="on-this-page">{i18next.t('on-this-page')}</dt>
           <dd role="definition">
             {h2s.map(heading => (
               <a href={`#${heading.id}`} onClick={handleOnClick}>