use react-select to add dropdown

Author: christiansamaniego-okta

src/features/common/components/bars/ribbon/ribbon.component.tsx

@@ -14,7 +14,6 @@ import {
 import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
 import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
 import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
-import { GlobeIconComponent } from "@/features/common/components/bars/ribbon/assets/globe-icon.component";
 import { ThemeModel } from "@/features/common/models/theme.model";
 import { useAppStore } from "@/features/common/services/app.store";
 import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
@@ -37,10 +36,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
 }) => {
   const theme$ = useAppStore((state) => state.theme$);
 
-  const currentLanguage = dictionary.languagePicker.options.filter(
-    (element) => element.code === languageCode,
-  )[0];
-
   const sanitizedThemePickerCodeValue = useMemo(() => {
     return getSanitizedThemePickerCodeValue(themeCode);
   }, [themeCode]);
@@ -85,25 +80,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
     [dictionary.themePicker.options],
   );
 
-  const languageOptions = useMemo(
-    () =>
-      dictionary.languagePicker.options.map((option) => {
-        return {
-          code: option.code,
-          full: {
-            ...option,
-            icon: null,
-          },
-          compact: {
-            ...option,
-            label: option.code.toUpperCase(),
-            icon: null,
-          },
-        };
-      }),
-    [dictionary.languagePicker.options],
-  );
-
   const handleThemeSelection = useCallback(
     async (value: ThemePickerCodeValues) => {
       const themePreference = await savePreferredThemeInCookie(
@@ -202,21 +178,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
               listLabel: dictionary.themePicker.list.ariaLabel,
             }}
           />
-          {dictionary.languagePicker.options.length > 1 && (
-            <RibbonPickerComponent
-              icon={<GlobeIconComponent />}
-              label={currentLanguage.label}
-              compactLabel={currentLanguage.code.toUpperCase()}
-              languageCode={languageCode}
-              selectedOptionCode={languageCode}
-              handleSelection={handleLanguageSelection}
-              options={languageOptions}
-              aria={{
-                buttonLabel: dictionary.languagePicker.button.ariaLabel,
-                listLabel: dictionary.languagePicker.list.ariaLabel,
-              }}
-            />
-          )}
         </div>
       </BoxComponent>
     </>

src/features/common/components/footer/footer.component.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { MouseEvent, useState } from "react";
+import Select, { SingleValue, OptionsOrGroups, GroupBase, NonceProvider } from "react-select";
 import { FooterIconsComponent } from "./footer-Icons.component";
 import { MonoFont, SecondaryFont } from "@/libs/theme/fonts";
 import Image from "next/image";
@@ -18,6 +19,8 @@ import { SiteBrandComponent } from "@/features/common/components/site-brand/site
 import { Button } from "react-aria-components";
 import { Auth0LogoComponent } from "../../assets/auth0-logo.component";
 import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service";
+import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
+import { UiLanguageModel } from "../../models/ui-language.model";
 
 interface FooterComponentProps {
   languageCode: string;
@@ -28,8 +31,19 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
   languageCode,
   dictionary,
 }) => {
+  const currentLanguage = dictionary.languagePicker.options.filter(
+    (element) => element.value === languageCode
+  )[0];
+
+  const handleChange = (selection: SingleValue<UiLanguageModel>) => {
+    if (!selection) {
+      return;
+    }
+    savePreferredLanguage(selection.value);
+  };
+
   const [modalState, setModalState] = useState<ModalStateValues>(
-    ModalStateValues.CLOSED,
+    ModalStateValues.CLOSED
   );
   const images = getBrandDictionary(languageCode);
 
@@ -64,7 +78,10 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
         contentClassName={styles.content}
       >
         <div className={styles.siteLogo}>
-          <SiteBrandComponent path={languagePathPrefix} languageCode={languageCode} />
+          <SiteBrandComponent
+            path={languagePathPrefix}
+            languageCode={languageCode}
+          />
         </div>
         <div className={styles.resources}>
           <span className={clsx(styles.resources__title, MonoFont.className)}>
@@ -110,7 +127,7 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
                   }}
                   className={clsx(
                     styles.resource__button,
-                    SecondaryFont.className,
+                    SecondaryFont.className
                   )}
                 >
                   {trigger.text}
@@ -158,11 +175,59 @@ export const FooterComponent: React.FC<FooterComponentProps> = ({
             target="_blank"
             href="https://auth0.com/"
           >
-            <Auth0LogoComponent title={images.tooltip}/>
+            <Auth0LogoComponent title={images.tooltip} />
           </Link>
           <span className={styles.bottomSection__copyright}>
             {dictionary.copyright}
           </span>
+          {dictionary.languagePicker.options.length > 1 && (
+            <Select
+              aria-label={"Language picker"}
+              className={styles.languageSelect__container}
+              onChange={handleChange}
+              options={dictionary.languagePicker.options as OptionsOrGroups<UiLanguageModel, GroupBase<UiLanguageModel>>}
+              menuPortalTarget={document.body}
+              classNamePrefix={"language-select"}
+              isSearchable={false}
+              placeholder={currentLanguage.label}
+              value={currentLanguage}
+              styles={{
+                control: (base) => ({
+                  ...base,
+                  background: "transparent",
+                  border: "none",
+                  borderRadius: "0px",
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  minHeight: "2.5rem",
+                  boxSizing: "border-box",
+                }),
+
+                input: (base) => ({
+                  ...base,
+                  margin: "0px",
+                }),
+                indicatorSeparator: () => ({
+                  display: "none",
+                }),
+                indicatorsContainer: (base) => ({
+                  ...base,
+                  height: "20px",
+                  alignSelf: "center",
+                }),
+                dropdownIndicator: (base) => ({
+                  padding: "0px",
+                  height: "100%",
+                  alignSelf: "center",
+                }),
+                singleValue: (base) => ({
+                  ...base,
+                  color: "unset",
+                })
+              }}
+            ></Select>
+          )}
         </div>
       </BoxComponent>
     </footer>

src/features/common/components/footer/footer.module.scss

@@ -267,3 +267,7 @@
 
   color: var(--color_fg_default);
 }
+
+.languageSelect__container {
+  color: var(--color_fg_default);
+}

src/features/common/models/ui-language.model.ts

@@ -1,4 +1,4 @@
 export interface UiLanguageModel {
-  code: string;
+  value: string;
   label: string;
 }

src/features/localization/dictionaries/layout/en.tsx

@@ -39,20 +39,6 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
-    languagePicker: {
-      button: {
-        ariaLabel: "Select page language",
-      },
-      list: {
-        ariaLabel: "list of page languages",
-      },
-      options: [
-        {
-          code: "en",
-          label: "English",
-        },
-      ],
-    },
   },
   header: {
     links: [
@@ -162,6 +148,20 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
+    languagePicker: {
+      button: {
+        ariaLabel: "Select page language",
+      },
+      list: {
+        ariaLabel: "list of page languages",
+      },
+      options: [
+        {
+          value: "en",
+          label: "English",
+        },
+      ],
+    },
   },
   errors: {
     notFound: {
@@ -187,8 +187,8 @@ export const enLayoutDictionary: LayoutDictionaryModel = {
 };
 
 if (withJapanese) {
-  enLayoutDictionary.ribbon.languagePicker.options.push({
+  enLayoutDictionary.footer.languagePicker.options.push({
     label: "日本語",
-    code: "ja",
+    value: "ja",
   });
 }

src/features/localization/dictionaries/layout/ja.tsx

@@ -39,20 +39,6 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
-    languagePicker: {
-      button: {
-        ariaLabel: "ページの言語を選択してください",
-      },
-      list: {
-        ariaLabel: "ページ言語の一覧",
-      },
-      options: [
-        {
-          code: "en",
-          label: "English",
-        },
-      ],
-    },
   },
   header: {
     links: [
@@ -162,6 +148,20 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
         },
       ],
     },
+    languagePicker: {
+      button: {
+        ariaLabel: "ページの言語を選択してください",
+      },
+      list: {
+        ariaLabel: "ページ言語の一覧",
+      },
+      options: [
+        {
+          value: "en",
+          label: "English",
+        },
+      ],
+    },
   },
   errors: {
     notFound: {
@@ -187,8 +187,8 @@ export const jaLayoutDictionary: LayoutDictionaryModel = {
 };
 
 if (withJapanese) {
-  jaLayoutDictionary.ribbon.languagePicker.options.push({
+  jaLayoutDictionary.footer.languagePicker.options.push({
     label: "日本語",
-    code: "ja",
+    value: "ja",
   });
 }

src/features/localization/models/layout-dictionary.model.ts

@@ -26,7 +26,6 @@ export interface LayoutDictionaryModel {
       };
     };
     themePicker: RibbonPickerModel<ThemeModel>;
-    languagePicker: RibbonPickerModel<UiLanguageModel>;
   };
   header: {
     links: LinkMetadataModel[];
@@ -69,6 +68,7 @@ export interface LayoutDictionaryModel {
         id: string;
       }[];
     };
+    languagePicker: RibbonPickerModel<UiLanguageModel>;
   };
   errors: {
     notFound: {