Add language selector (#896)

* fix property names on svg components

* use react-select to add dropdown

* style language selector

* add globe icon and minor style changes

* adjust hover style

Author: christiansamaniego-okta

src/app/apple-icon.tsx

@@ -86,62 +86,62 @@ export default function Icon({ id }: { id: string }) {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
             fill="#FF4F40"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
             fill="#FF4F40"
           />

src/app/icon.tsx

@@ -66,62 +66,62 @@ export default function Icon({ id }: { id: string }) {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
             fill="#48E7CA"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
             fill="#3F59E4"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
             fill="#FF44DD"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
             fill="#FF4F40"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
             fill="#FF4F40"
           />

src/features/common/assets/arrow-head-icon.component.tsx

@@ -12,9 +12,9 @@ export const ArrowHeadIconComponent: React.FC = () => {
       <path
         d="M6 4L10 8L6 12"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );

src/features/common/assets/download-icon.component.tsx

@@ -12,16 +12,16 @@ export const DownloadIconComponent: React.FC = () => {
       <path
         d="M8 10V2M8 10L11 7M8 10L5 7"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
       <path
         d="M1 11V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V11"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );

src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx

@@ -12,8 +12,8 @@ export const DarkIconComponent: React.FC = () => {
       <path
         d="M14.2252 10.0845C14.54 9.95039 14.8559 10.244 14.7134 10.555C14.3379 11.3742 13.8066 12.1157 13.1463 12.7369C12.2739 13.5575 11.2056 14.1406 10.0435 14.4303C8.88133 14.7201 7.6643 14.7068 6.50878 14.3918C5.35325 14.0767 4.29789 13.4705 3.44363 12.631C2.58937 11.7915 1.9648 10.7469 1.62965 9.59707C1.2945 8.44722 1.25998 7.23061 1.52941 6.06361C1.79883 4.89661 2.36318 3.81825 3.16847 2.9317C3.76901 2.27056 4.48855 1.73258 5.28668 1.34413C5.59577 1.1937 5.88975 1.51373 5.74469 1.82539V1.82539C3.32126 7.032 8.59731 12.4835 13.8804 10.2315L14.2252 10.0845Z"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );

src/features/common/components/bars/ribbon/assets/globe-icon.component.tsx

@@ -3,10 +3,11 @@ import React from "react";
 export const GlobeIconComponent: React.FC = () => {
   return (
     <svg
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
     >
       <path
         fillRule="evenodd"
@@ -15,17 +16,20 @@ export const GlobeIconComponent: React.FC = () => {
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        stroke="currentColor"
       ></path>
       <path
         d="M2 12H22"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        stroke="currentColor"
       ></path>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/features/common/components/bars/ribbon/assets/light-icon.component.tsx

@@ -16,11 +16,11 @@ export const LightIconComponent: React.FC = () => {
         height="6"
         rx="3"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
       ></rect>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8 0.25C7.58579 0.25 7.25 0.585786 7.25 1L7.25391 1.07715C7.29248 1.45517 7.6118 1.75 8 1.75C8.41421 1.75 8.75 1.41421 8.75 1C8.75 0.585786 8.41421 0.25 8 0.25ZM8 14.25C7.58579 14.25 7.25 14.5858 7.25 15L7.25391 15.0771C7.29248 15.4552 7.6118 15.75 8 15.75C8.41421 15.75 8.75 15.4142 8.75 15C8.75 14.5858 8.41421 14.25 8 14.25ZM15.0771 7.25391C15.4552 7.29248 15.75 7.6118 15.75 8C15.75 8.3882 15.4552 8.70752 15.0771 8.74609L15 8.75C14.5858 8.75 14.25 8.41421 14.25 8C14.25 7.58579 14.5858 7.25 15 7.25L15.0771 7.25391ZM1.75 8C1.75 7.6118 1.45517 7.29248 1.07715 7.25391L1 7.25C0.585786 7.25 0.25 7.58579 0.25 8C0.25 8.41421 0.585786 8.75 1 8.75L1.07715 8.74609C1.45517 8.70752 1.75 8.3882 1.75 8Z"
         fill="currentColor"
       ></path>

src/features/common/components/bars/ribbon/assets/system-icon.component.tsx

@@ -12,16 +12,16 @@ export const SystemIconComponent: React.FC = () => {
       <path
         d="M1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4C2.34315 1 1 2.34315 1 4Z"
         stroke="currentColor"
-        stroke-width="1.5"
+        strokeWidth="1.5"
       ></path>
       <rect
         x="4"
         y="4"
         width="8"
         height="5"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
       ></rect>
       <rect
         x="11.25"
@@ -34,9 +34,9 @@ export const SystemIconComponent: React.FC = () => {
       <path
         d="M4 12H10"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       ></path>
     </svg>
   );

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>
     </>