chore(migration): migrate language selector component (#5266)

Co-authored-by: Claudio Wunder <[email protected]>
Co-authored-by: Teja Sai Sandeep Reddy Konala <[email protected]>
Co-authored-by: Shanmughapriyan S <[email protected]>
Co-authored-by: Michael Esteban <[email protected]>

Author: 5 people

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-lock.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",