Skip to content

Commit 862d475

Browse files
christiansamaniego-oktachristiansamaniego-okta
authored
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
1 parent 9e0ca1d commit 862d475

File tree

16 files changed

+214
-142
lines changed

16 files changed

+214
-142
lines changed

‎src/app/apple-icon.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -86,62 +86,62 @@ export default function Icon({ id }: { id: string }) {
8686
xmlns="http://www.w3.org/2000/svg"
8787
>
8888
<path
89-
fill-rule="evenodd"
90-
clip-rule="evenodd"
89+
fillRule="evenodd"
90+
clipRule="evenodd"
9191
d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
9292
fill="white"
9393
/>
9494
<path
95-
fill-rule="evenodd"
96-
clip-rule="evenodd"
95+
fillRule="evenodd"
96+
clipRule="evenodd"
9797
d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
9898
fill="white"
9999
/>
100100
<path
101-
fill-rule="evenodd"
102-
clip-rule="evenodd"
101+
fillRule="evenodd"
102+
clipRule="evenodd"
103103
d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
104104
fill="#48E7CA"
105105
/>
106106
<path
107-
fill-rule="evenodd"
108-
clip-rule="evenodd"
107+
fillRule="evenodd"
108+
clipRule="evenodd"
109109
d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
110110
fill="#48E7CA"
111111
/>
112112
<path
113-
fill-rule="evenodd"
114-
clip-rule="evenodd"
113+
fillRule="evenodd"
114+
clipRule="evenodd"
115115
d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
116116
fill="#3F59E4"
117117
/>
118118
<path
119-
fill-rule="evenodd"
120-
clip-rule="evenodd"
119+
fillRule="evenodd"
120+
clipRule="evenodd"
121121
d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
122122
fill="#3F59E4"
123123
/>
124124
<path
125-
fill-rule="evenodd"
126-
clip-rule="evenodd"
125+
fillRule="evenodd"
126+
clipRule="evenodd"
127127
d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
128128
fill="#FF44DD"
129129
/>
130130
<path
131-
fill-rule="evenodd"
132-
clip-rule="evenodd"
131+
fillRule="evenodd"
132+
clipRule="evenodd"
133133
d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
134134
fill="#FF44DD"
135135
/>
136136
<path
137-
fill-rule="evenodd"
138-
clip-rule="evenodd"
137+
fillRule="evenodd"
138+
clipRule="evenodd"
139139
d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
140140
fill="#FF4F40"
141141
/>
142142
<path
143-
fill-rule="evenodd"
144-
clip-rule="evenodd"
143+
fillRule="evenodd"
144+
clipRule="evenodd"
145145
d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
146146
fill="#FF4F40"
147147
/>

‎src/app/icon.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -66,62 +66,62 @@ export default function Icon({ id }: { id: string }) {
6666
xmlns="http://www.w3.org/2000/svg"
6767
>
6868
<path
69-
fill-rule="evenodd"
70-
clip-rule="evenodd"
69+
fillRule="evenodd"
70+
clipRule="evenodd"
7171
d="M149.242 69.9406V0H110.241V69.9406L129.742 96.7209L149.242 69.9406Z"
7272
fill="white"
7373
/>
7474
<path
75-
fill-rule="evenodd"
76-
clip-rule="evenodd"
75+
fillRule="evenodd"
76+
clipRule="evenodd"
7777
d="M110.241 190.06V260H149.242V190.06L129.742 163.279L110.241 190.06Z"
7878
fill="white"
7979
/>
8080
<path
81-
fill-rule="evenodd"
82-
clip-rule="evenodd"
81+
fillRule="evenodd"
82+
clipRule="evenodd"
8383
d="M149.242 190.068L190.322 246.749L222.042 223.609L180.702 167.188L149.242 156.788V190.068Z"
8484
fill="#48E7CA"
8585
/>
8686
<path
87-
fill-rule="evenodd"
88-
clip-rule="evenodd"
87+
fillRule="evenodd"
88+
clipRule="evenodd"
8989
d="M110.241 69.9413L69.1611 13.2607L37.4408 36.401L78.7811 92.8215L110.241 103.222V69.9413Z"
9090
fill="#48E7CA"
9191
/>
9292
<path
93-
fill-rule="evenodd"
94-
clip-rule="evenodd"
93+
fillRule="evenodd"
94+
clipRule="evenodd"
9595
d="M78.7807 92.8243L12.2201 71.2441L0 108.424L66.5606 130.005L98.2809 119.865L78.7807 92.8243Z"
9696
fill="#3F59E4"
9797
/>
9898
<path
99-
fill-rule="evenodd"
100-
clip-rule="evenodd"
99+
fillRule="evenodd"
100+
clipRule="evenodd"
101101
d="M161.201 140.141L180.701 167.181L247.261 188.762L259.481 151.581L192.921 130.001L161.201 140.141Z"
102102
fill="#3F59E4"
103103
/>
104104
<path
105-
fill-rule="evenodd"
106-
clip-rule="evenodd"
105+
fillRule="evenodd"
106+
clipRule="evenodd"
107107
d="M192.921 130.005L259.481 108.424L247.261 71.2441L180.701 92.8243L161.201 119.865L192.921 130.005Z"
108108
fill="#FF44DD"
109109
/>
110110
<path
111-
fill-rule="evenodd"
112-
clip-rule="evenodd"
111+
fillRule="evenodd"
112+
clipRule="evenodd"
113113
d="M66.5606 130.001L0 151.581L12.2201 188.762L78.7807 167.181L98.2809 140.141L66.5606 130.001Z"
114114
fill="#FF44DD"
115115
/>
116116
<path
117-
fill-rule="evenodd"
118-
clip-rule="evenodd"
117+
fillRule="evenodd"
118+
clipRule="evenodd"
119119
d="M78.7811 167.188L37.4408 223.609L69.1611 246.749L110.241 190.068V156.788L78.7811 167.188Z"
120120
fill="#FF4F40"
121121
/>
122122
<path
123-
fill-rule="evenodd"
124-
clip-rule="evenodd"
123+
fillRule="evenodd"
124+
clipRule="evenodd"
125125
d="M180.702 92.8215L222.042 36.401L190.322 13.2607L149.242 69.9413V103.222L180.702 92.8215Z"
126126
fill="#FF4F40"
127127
/>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ export const ArrowHeadIconComponent: React.FC = () => {
1212
<path
1313
d="M6 4L10 8L6 12"
1414
stroke="currentColor"
15-
stroke-width="1.5"
16-
stroke-linecap="round"
17-
stroke-linejoin="round"
15+
strokeWidth="1.5"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
1818
></path>
1919
</svg>
2020
);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ export const DownloadIconComponent: React.FC = () => {
1212
<path
1313
d="M8 10V2M8 10L11 7M8 10L5 7"
1414
stroke="currentColor"
15-
stroke-width="1.5"
16-
stroke-linecap="round"
17-
stroke-linejoin="round"
15+
strokeWidth="1.5"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
1818
></path>
1919
<path
2020
d="M1 11V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V11"
2121
stroke="currentColor"
22-
stroke-width="1.5"
23-
stroke-linecap="round"
24-
stroke-linejoin="round"
22+
strokeWidth="1.5"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
2525
></path>
2626
</svg>
2727
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export const DarkIconComponent: React.FC = () => {
1212
<path
1313
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"
1414
stroke="currentColor"
15-
stroke-width="1.5"
16-
stroke-linejoin="round"
15+
strokeWidth="1.5"
16+
strokeLinejoin="round"
1717
></path>
1818
</svg>
1919
);

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import React from "react";
33
export const GlobeIconComponent: React.FC = () => {
44
return (
55
<svg
6+
width="24"
7+
height="24"
68
viewBox="0 0 24 24"
79
fill="none"
810
xmlns="http://www.w3.org/2000/svg"
9-
aria-hidden="true"
1011
>
1112
<path
1213
fillRule="evenodd"
@@ -15,17 +16,20 @@ export const GlobeIconComponent: React.FC = () => {
1516
strokeWidth="1.5"
1617
strokeLinecap="round"
1718
strokeLinejoin="round"
19+
stroke="currentColor"
1820
></path>
1921
<path
2022
d="M2 12H22"
2123
strokeWidth="1.5"
2224
strokeLinecap="round"
2325
strokeLinejoin="round"
26+
stroke="currentColor"
2427
></path>
2528
<path
2629
fillRule="evenodd"
2730
clipRule="evenodd"
2831
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"
32+
stroke="currentColor"
2933
strokeWidth="1.5"
3034
strokeLinecap="round"
3135
strokeLinejoin="round"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export const LightIconComponent: React.FC = () => {
1616
height="6"
1717
rx="3"
1818
stroke="currentColor"
19-
stroke-width="1.5"
19+
strokeWidth="1.5"
2020
></rect>
2121
<path
22-
fill-rule="evenodd"
23-
clip-rule="evenodd"
22+
fillRule="evenodd"
23+
clipRule="evenodd"
2424
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"
2525
fill="currentColor"
2626
></path>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ export const SystemIconComponent: React.FC = () => {
1212
<path
1313
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"
1414
stroke="currentColor"
15-
stroke-width="1.5"
15+
strokeWidth="1.5"
1616
></path>
1717
<rect
1818
x="4"
1919
y="4"
2020
width="8"
2121
height="5"
2222
stroke="currentColor"
23-
stroke-width="1.5"
24-
stroke-linejoin="round"
23+
strokeWidth="1.5"
24+
strokeLinejoin="round"
2525
></rect>
2626
<rect
2727
x="11.25"
@@ -34,9 +34,9 @@ export const SystemIconComponent: React.FC = () => {
3434
<path
3535
d="M4 12H10"
3636
stroke="currentColor"
37-
stroke-width="1.5"
38-
stroke-linecap="round"
39-
stroke-linejoin="round"
37+
strokeWidth="1.5"
38+
strokeLinecap="round"
39+
strokeLinejoin="round"
4040
></path>
4141
</svg>
4242
);

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

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
1515
import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
1616
import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
17-
import { GlobeIconComponent } from "@/features/common/components/bars/ribbon/assets/globe-icon.component";
1817
import { ThemeModel } from "@/features/common/models/theme.model";
1918
import { useAppStore } from "@/features/common/services/app.store";
2019
import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
@@ -37,10 +36,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
3736
}) => {
3837
const theme$ = useAppStore((state) => state.theme$);
3938

40-
const currentLanguage = dictionary.languagePicker.options.filter(
41-
(element) => element.code === languageCode,
42-
)[0];
43-
4439
const sanitizedThemePickerCodeValue = useMemo(() => {
4540
return getSanitizedThemePickerCodeValue(themeCode);
4641
}, [themeCode]);
@@ -85,25 +80,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
8580
[dictionary.themePicker.options],
8681
);
8782

88-
const languageOptions = useMemo(
89-
() =>
90-
dictionary.languagePicker.options.map((option) => {
91-
return {
92-
code: option.code,
93-
full: {
94-
...option,
95-
icon: null,
96-
},
97-
compact: {
98-
...option,
99-
label: option.code.toUpperCase(),
100-
icon: null,
101-
},
102-
};
103-
}),
104-
[dictionary.languagePicker.options],
105-
);
106-
10783
const handleThemeSelection = useCallback(
10884
async (value: ThemePickerCodeValues) => {
10985
const themePreference = await savePreferredThemeInCookie(
@@ -202,21 +178,6 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
202178
listLabel: dictionary.themePicker.list.ariaLabel,
203179
}}
204180
/>
205-
{dictionary.languagePicker.options.length > 1 && (
206-
<RibbonPickerComponent
207-
icon={<GlobeIconComponent />}
208-
label={currentLanguage.label}
209-
compactLabel={currentLanguage.code.toUpperCase()}
210-
languageCode={languageCode}
211-
selectedOptionCode={languageCode}
212-
handleSelection={handleLanguageSelection}
213-
options={languageOptions}
214-
aria={{
215-
buttonLabel: dictionary.languagePicker.button.ariaLabel,
216-
listLabel: dictionary.languagePicker.list.ariaLabel,
217-
}}
218-
/>
219-
)}
220181
</div>
221182
</BoxComponent>
222183
</>

0 commit comments

Comments
 (0)