chore(migration): migrate language selector component

components/Common/Dropdown/__tests__/index.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import Dropdown from '..';
+import type { DropdownItem } from '../../../../types';
+
+describe('Dropdown component', () => {
+ const items: DropdownItem[] = [
+ { label: 'item1', title: 'Item 1', active: false, onClick: jest.fn() },
+ { label: 'item2', title: 'Item 2', active: true, onClick: jest.fn() },
+ { label: 'item3', title: 'Item 3', active: false, onClick: jest.fn() },
+ ];
+
+ it('should render the items and apply active styles', () => {
+ render(<Dropdown items={items} shouldShow={true} styles={{}} />);
+
+ items.forEach(item => {
+ const button = screen.getByText(item.title);
+ expect(button).toBeInTheDocument();
+
+ if (item.active) {
+ expect(button).toHaveStyle('font-weight: bold');
+ } else {
+ expect(button).not.toHaveStyle('font-weight: bold');
+ }
+ });
+ });
+
+ it('should call the onClick function when an item is clicked', () => {
+ render(<Dropdown items={items} shouldShow={true} styles={{}} />);
+ const button = screen.getByText(items[2].title);
+ fireEvent.click(button);
+ expect(items[2].onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call the onClick function when Enter or Space is pressed', () => {
+ render(<Dropdown items={items} shouldShow={true} styles={{}} />);
+ const button = screen.getByText(items[1].title);
+ fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
+ fireEvent.keyDown(button, { key: ' ', code: 'Space' });
+ expect(items[1].onClick).toHaveBeenCalledTimes(2);
+ });
+
+ it('should not render the items when shouldShow prop is false', () => {
+ render(<Dropdown items={items} shouldShow={false} styles={{}} />);
+ items.forEach(item => {
+ const button = screen.queryByText(item.title);
+ expect(button).not.toBeVisible();
+ });
+ });
+
+ it('should apply styles passed in the styles prop', () => {
+ const customStyles: React.CSSProperties = {
+ backgroundColor: 'green',
+ padding: '10px',
+ borderRadius: '5px',
+ };
+ render(<Dropdown items={items} shouldShow={true} styles={customStyles} />);
+
+ const dropdownList = screen.getByRole('list');
+ expect(dropdownList).toHaveStyle('background-color: green');
+ expect(dropdownList).toHaveStyle('padding: 10px');
+ expect(dropdownList).toHaveStyle('border-radius: 5px');
+ });
+});

components/Common/Dropdown/index.module.scss

@@ -0,0 +1,30 @@
+.dropdownList {
+ background-color: var(--color-dropdown-background);
+ border-radius: 5px;
+ height: fit-content;
+ list-style-type: none;
+ max-height: 200px;
+ min-width: 150px;
+ overflow-y: auto;
+ padding: 0;
+ position: absolute;
+ width: fit-content;
+
+ > li {
+ > button {
+ background: none;
+ border: none;
+
+ color: var(--color-text-primary);
+ cursor: pointer;
+ font-size: var(--font-size-body1);
+ padding: var(--space-12);
+ text-align: center;
+ width: 100%;
+
+ &:hover {
+ background-color: var(--color-dropdown-hover);
+ }
+ }
+ }
+}

components/Common/Dropdown/index.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import Dropdown from '.';
+
+type Story = StoryObj<typeof Dropdown>;
+
+export default {
+ component: Dropdown,
+};
+
+const items = [...Array(10).keys()].map(item => ({
+ title: `Item ${item + 1}`,
+ label: `item-${item + 1}`,
+ active: false,
+ onClick: () => {},
+}));
+
+items[2].active = true;
+
+export const withItems: Story = {
+ args: {
+ items: items,
+ shouldShow: true,
+ },
+};

components/Common/Dropdown/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { DropdownItem } from '../../../types';
+import styles from './index.module.scss';
+
+export interface DropdownProps {
+ items: Array<DropdownItem>;
+ shouldShow: boolean;
+ styles: Object;
+}
+
+const Dropdown = ({ items, shouldShow, styles: css }: DropdownProps) => {
+ const mappedElements = items.map(item => {
+ const extraStyles = { fontWeight: item.active ? 'bold' : 'normal' };
+
+ const handleKeyPress = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ item.onClick();
+ }
+ };
+
+ return (
+ <li key={`dropdown-item-${item.label}`}>
+ <button
+ style={extraStyles}
+ onClick={item.onClick}
+ onKeyDown={handleKeyPress}
+ type="button"
+ >
+ {item.title}
+ </button>
+ </li>
+ );
+ });
+
+ const dropdownStyles = { display: shouldShow ? 'block' : 'none', ...css };
+
+ return (
+ <ul className={styles.dropdownList} style={dropdownStyles}>
+ {mappedElements}
+ </ul>
+ );
+};
+
+export default Dropdown;

components/Common/LanguageSelector/__tests__/index.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import LanguageSelector from '..';
+
+jest.mock('../../../../hooks/useLocale', () => ({
+ useLocale: () => ({
+ availableLocales: [
+ { code: 'en', name: 'English', localName: 'English' },
+ { code: 'es', name: 'Spanish', localName: 'Español' },
+ ],
+ currentLocale: { code: 'en', name: 'English', localName: 'English' },
+ }),
+}));
+
+describe('LanguageSelector', () => {
+ test('clicking the language switch button toggles the dropdown display', () => {
+ render(<LanguageSelector />);
+ const button = screen.getByRole('button');
+ expect(screen.queryByText('English')).not.toBeVisible();
+ fireEvent.click(button);
+ expect(screen.queryByText('English')).toBeVisible();
+ fireEvent.click(button);
+ expect(screen.queryByText('English')).not.toBeVisible();
+ });
+
+ test('renders the Dropdown component with correct style', () => {
+ render(<LanguageSelector />);
+ const button = screen.getByRole('button');
+ fireEvent.click(button);
+ const dropdown = screen.getByRole('list');
+ expect(dropdown).toHaveStyle(
+ 'position: absolute; top: 60%; right: 0; margin: 0;'
+ );
+ });
+});

components/Common/LanguageSelector/index.module.scss

@@ -0,0 +1,13 @@
+.languageSwitch {
+ background: none;
+ border: none;
+ color: var(--color-text-accent);
+ cursor: pointer;
+ line-height: 0;
+ padding: 0;
+}
+
+.container {
+ display: inline;
+ position: relative;
+}

components/Common/LanguageSelector/index.stories.tsx

@@ -0,0 +1,14 @@
+import LanguageSelector from '.';
+export default { component: LanguageSelector };
+
+export const Default = () => (
+ <div
+ style={{
+ backgroundColor: 'FloralWhite',
+ textAlign: 'right',
+ padding: '20px',
+ }}
+ >
+ <LanguageSelector />
+ </div>
+);

components/Common/LanguageSelector/index.tsx

@@ -0,0 +1,52 @@
+import { useMemo, useState } from 'react';
+import { MdOutlineTranslate } from 'react-icons/md';
+import { useLocale } from '../../../hooks/useLocale';
+import Dropdown from '../Dropdown';
+import styles from './index.module.scss';
+
+const dropdownStyle = {
+ position: 'absolute',
+ top: '60%',
+ right: '0',
+ margin: 0,
+};
+
+const LanguageSelector = () => {
+ const [showDropdown, setShowDropdown] = useState(false);
+
+ const { availableLocales, currentLocale } = useLocale();
+
+ const dropdownItems = useMemo(
+ () =>
+ availableLocales.map(locale => ({
+ title: locale.localName,
+ label: locale.name,
+ onClick: () => {
+ // TODO: "locale changing logic yet to be implemented"
+ },
+ active: currentLocale.code === locale.code,
+ })),
+ [availableLocales, currentLocale]
+ );
+
+ return (
+ <div className={styles.container}>
+ <button
+ type="button"
+ className={styles.languageSwitch}
+ onClick={() => setShowDropdown(!showDropdown)}
+ aria-expanded={showDropdown}
+ >
+ <span className="sr-only">Switch Language</span>
+ <MdOutlineTranslate />
+ </button>
+ <Dropdown
+ items={dropdownItems}
+ shouldShow={showDropdown}
+ styles={dropdownStyle}
+ />
+ </div>
+ );
+};
+
+export default LanguageSelector;

package.json

@@ -48,6 +48,7 @@
  "npm-run-all": "^4.1.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-icons": "^4.8.0",
  "react-intl": "^6.3.2",
  "remark-gfm": "^3.0.1",
  "sass": "^1.60.0",

types/dropdown.ts

@@ -0,0 +1,6 @@
+export interface DropdownItem {
+ title: string;
+ label: string;
+ onClick: () => void;
+ active?: boolean;
+}

types/index.ts

@@ -1,18 +1,19 @@
 // @TODO: These types will be splitted on individual files for better organisation in the future
 import type { AppProps as DefaultAppProps } from 'next/app';
 
+import type { BlogData } from './blog';
 import type { LocaleContext } from './i18n';
 import type { NodeVersionData } from './nodeVersions';
-import type { BlogData } from './blog';
 
+export * from './blog';
 export * from './config';
-export * from './frontmatter';
+export * from './dropdown';
 export * from './features';
+export * from './frontmatter';
+export * from './i18n';
 export * from './layouts';
 export * from './navigation';
 export * from './nodeVersions';
-export * from './blog';
-export * from './i18n';
 
 export interface AppProps {
  i18nData: Pick<LocaleContext, 'localeMessages' | 'currentLocale'>;