Merge pull request #623 from cagov/Multi-Language-Phase-2

Language navigation fix

components/LanguageSelector.tsx

@@ -1,12 +1,18 @@
 import { Dropdown } from 'react-bootstrap'
-import { i18n } from 'next-i18next'
-import { languagelist } from '../public/languages.json'
-import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import languages from '../public/languages.json'
+import { UrlPrefixes } from '../types/common'
+
+export interface LanguageSelectorProps {
+  urlPrefixes?: UrlPrefixes
+  cstUrl: string | undefined
+}
 
 export const LanguageSelector: React.FC = () => {
-  const router = useRouter()
-  const curLanguage = languagelist.find(function (item) {
-    return item['language-code'] === i18n?.language
+  const { i18n } = useTranslation()
+  const curLanguage = languages.languagelist.find(function (item) {
+    return item['language-code'] === i18n.language
   })
 
   return (
@@ -17,18 +23,20 @@ export const LanguageSelector: React.FC = () => {
         <span className="ca-gov-icon-caret-down" />
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        {languagelist &&
-          languagelist.length > 0 &&
-          languagelist.map((language) => (
-            <Dropdown.Item
+        {languages.languagelist &&
+          languages.languagelist.length > 0 &&
+          languages.languagelist.map((language) => (
+            <a
+              href={`./${language['language-code']}`}
+              className={
+                language['language-code'] === curLanguage?.['language-code']
+                  ? 'selected-language languageSelectorTextColor'
+                  : 'languageSelectorTextColor'
+              }
               key={language.display}
-              className="languageSelectorTextColor"
-              onClick={async () => {
-                await router.push('', '', { locale: language['language-code'] })
-              }}
             >
               {language.display}
-            </Dropdown.Item>
+            </a>
           ))}
       </Dropdown.Menu>
     </Dropdown>

public/styles/custom.css

@@ -1075,6 +1075,7 @@ hr {
 	/* display: none; */
 	border: none;
 	border-width: 0px 1px 1px 1px;
+	border-radius: 0px 0px 15px 15px;
 	border-color: #DDDBDA;
 	background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #DDDBDA, #DDDBDA);
 	border-style: solid;
@@ -1106,19 +1107,16 @@ hr {
 }
 
 #languageSelector .languageSelectorTextColor:hover {
-	display: block;
-}
-
-
-#languageSelector div a:hover {
 	background-color: #1E90FF !important;
 	display: block;
 	outline: none;
 	border: none;
+	color: white !important;
+	text-decoration: none;
 }
 
-#languageSelector div a:hover {
-	color: white !important;
+#languageSelector .languageSelectorTextColor:last-of-type {
+	border-radius: inherit;
 }
 
 #languageSelector .dropdown-toggle::after {
@@ -1150,6 +1148,10 @@ hr {
 	display: none;
 }
 
+.selected-language {
+	background-color: #F0F0F4;
+}
+
 @media only screen and (max-width: 992px) {
 	#languageSelector .btn {        
 		height: 100%;

tests/pages/__snapshots__/index.test.tsx.snap

@@ -54,6 +54,7 @@ exports[`Full page snapshot renders homepage unchanged 1`] = `
                 >
                    
                 </span>
+                English
                  
                 <span
                   className="ca-gov-icon-caret-down"

utils/browser/getUrl.ts

@@ -4,7 +4,7 @@
 
 import urls from '../../public/urls.json'
 import { UrlPrefixes } from '../../types/common'
-import { languagelist } from '../../public/languages.json'
+import languages from '../../public/languages.json'
 
 // Type alias for the keys in urls.json
 export type UrlType = keyof typeof urls
@@ -46,8 +46,8 @@ export default function getUrl(linkKey: string, urlPrefixes?: UrlPrefixes, langu
   const urlPrefixBpo = stripTrailingSlashes(urlPrefixes?.urlPrefixBpo || process.env.URL_PREFIX_BPO)
 
   if (urlPrefixUioDesktop && key.startsWith('uio-desktop') && key !== 'uio-desktop-help-new-claim-es') {
-    let query = '?L='
-    const curLanguage = languagelist.find(function (item) {
+    let query = '?l='
+    const curLanguage = languages.languagelist.find(function (item) {
       return item['language-code'] === language
     })
     if (typeof curLanguage !== 'undefined') {