feat(themeToggle): introduce (#6007)

* feat(themeToggle): introduce

* fix

* remove `ThemeProvider` from `preview.tsx`

* update to use focus and `onKeyDown`

* fix: code format

* use classname instead of css module

* remove toggling

* fix: indentation

* test: render put on `beforeEach`

* separate icon

* update

* chore: code review changes

* fix: style indentation

* meta: corrected designs of themetoggle and languagedropdown

---------

Co-authored-by: Claudio Wunder <[email protected]>

components/Common/AvatarGroup/__tests__/index.test.mjs

@@ -26,7 +26,7 @@ const avatars = names.map(name => ({
   alt: name,
 }));
 
-describe('AvatarGroup component', () => {
+describe('AvatarGroup', () => {
   it('renders the AvatarGroup component properly', () => {
     const { getByText } = render(<AvatarGroup avatars={avatars} limit={2} />);
 

components/Common/LanguageDropDown/index.module.css

@@ -1,12 +1,15 @@
-.iconWrapper {
+.languageDropdown {
   @apply h-9
     w-9
     rounded-md
-    bg-neutral-100
     p-2
     text-neutral-700
-    dark:bg-neutral-900
     dark:text-neutral-300;
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
 }
 
 .dropDownContent {

components/Common/LanguageDropDown/index.tsx

@@ -30,7 +30,7 @@ const LanguageDropdown: FC<LanguageDropDownProps> = ({
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <button className={styles.iconWrapper} aria-label={ariaLabel}>
+        <button className={styles.languageDropdown} aria-label={ariaLabel}>
           <LanguageIcon height="20" />
         </button>
       </DropdownMenu.Trigger>

components/Common/ThemeToggle/__tests__/index.test.mjs

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { LocaleProvider } from '@/providers/localeProvider';
+
+import ThemeToggle from '../';
+
+let mockCurrentTheme = 'light';
+
+const toggleTheme = () => {
+  mockCurrentTheme = mockCurrentTheme === 'light' ? 'dark' : 'light';
+};
+
+describe('ThemeToggle', () => {
+  let toggle;
+
+  beforeEach(() => {
+    mockCurrentTheme = 'light';
+
+    render(
+      <LocaleProvider>
+        <ThemeToggle onClick={toggleTheme} />
+      </LocaleProvider>
+    );
+    toggle = screen.getByRole('button');
+  });
+
+  it('switches dark theme to light theme', async () => {
+    mockCurrentTheme = 'dark';
+    await userEvent.click(toggle);
+    expect(mockCurrentTheme).toBe('light');
+  });
+
+  it('switches light theme to dark theme', async () => {
+    await userEvent.click(toggle);
+    expect(mockCurrentTheme).toBe('dark');
+  });
+});

components/Common/ThemeToggle/index.module.css

@@ -0,0 +1,13 @@
+.themeToggle {
+  @apply h-9
+    w-9
+    rounded-md
+    p-2
+    text-neutral-700
+    dark:text-neutral-300;
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
+}

components/Common/ThemeToggle/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import ThemeToggle from '@/components/Common/ThemeToggle';
+
+type Story = StoryObj<typeof ThemeToggle>;
+type Meta = MetaObj<typeof ThemeToggle>;
+
+export const Default: Story = {};
+
+export default { component: ThemeToggle } as Meta;

components/Common/ThemeToggle/index.tsx

@@ -0,0 +1,31 @@
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
+import type { FC, MouseEvent } from 'react';
+import { useIntl } from 'react-intl';
+
+import styles from './index.module.css';
+
+type ThemeToggleProps = {
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+const ThemeToggle: FC<ThemeToggleProps> = ({ onClick = () => {} }) => {
+  const { formatMessage } = useIntl();
+
+  const ariaLabel = formatMessage({
+    id: 'components.header.buttons.toggleDarkMode',
+  });
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={styles.themeToggle}
+      aria-label={ariaLabel}
+    >
+      <MoonIcon className="block dark:hidden" height="20" />
+      <SunIcon className="hidden dark:block" height="20" />
+    </button>
+  );
+};
+
+export default ThemeToggle;

package.json

@@ -43,6 +43,7 @@
     "@heroicons/react": "~2.0.18",
     "@mdx-js/react": "^2.3.0",
     "@nodevu/core": "~0.1.0",
+    "@radix-ui/react-accessible-icon": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-select": "^2.0.0",