DropdownMenu composition

package.json

@@ -32,11 +32,11 @@
     "@fortawesome/react-fontawesome": "0.2.2",
     "@hookform/resolvers": "4.1.2",
     "@react-spring/web": "9.7.5",
-    "@tailwindcss/vite": "4.0.7",
+    "@tailwindcss/vite": "4.0.9",
     "@tanstack/react-query": "5.66.9",
     "@tanstack/react-query-devtools": "5.66.9",
     "@tanstack/react-table": "8.21.2",
-    "axios": "1.7.9",
+    "axios": "1.8.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
@@ -51,21 +51,21 @@
     "react-router-dom": "7.2.0",
     "recharts": "2.15.1",
     "tailwind-merge": "3.0.2",
-    "tailwindcss": "4.0.8",
+    "tailwindcss": "4.0.9",
     "uuid": "11.1.0",
     "yup": "1.6.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.4",
+    "@chromatic-com/storybook": "3.2.5",
     "@eslint/js": "9.21.0",
-    "@storybook/addon-essentials": "8.5.8",
-    "@storybook/addon-interactions": "8.5.8",
-    "@storybook/addon-onboarding": "8.5.8",
-    "@storybook/addon-themes": "8.5.8",
-    "@storybook/blocks": "8.5.8",
-    "@storybook/react": "8.5.8",
-    "@storybook/react-vite": "8.5.8",
-    "@storybook/test": "8.5.8",
+    "@storybook/addon-essentials": "8.6.1",
+    "@storybook/addon-interactions": "8.6.1",
+    "@storybook/addon-onboarding": "8.6.1",
+    "@storybook/addon-themes": "8.6.1",
+    "@storybook/blocks": "8.6.1",
+    "@storybook/react": "8.6.1",
+    "@storybook/react-vite": "8.6.1",
+    "@storybook/test": "8.6.1",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
@@ -76,21 +76,21 @@
     "@types/react-dom": "18.3.1",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "3.0.6",
+    "@vitest/coverage-v8": "3.0.7",
     "eslint": "9.21.0",
     "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-react-refresh": "0.4.19",
     "eslint-plugin-storybook": "0.11.3",
     "globals": "16.0.0",
     "jsdom": "26.0.0",
-    "msw": "2.7.1",
+    "msw": "2.7.3",
     "prettier": "3.5.2",
     "prettier-plugin-tailwindcss": "0.6.11",
     "rimraf": "6.0.1",
-    "storybook": "8.5.8",
+    "storybook": "8.6.1",
     "typescript": "5.7.3",
-    "typescript-eslint": "8.24.1",
-    "vite": "6.1.1",
-    "vitest": "3.0.6"
+    "typescript-eslint": "8.25.0",
+    "vite": "6.2.0",
+    "vitest": "3.0.7"
   }
 }

src/common/components/Button/LanguageToggle.tsx

@@ -3,11 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { PropsWithClassName } from 'common/utils/types';
 import { StorageKey } from 'common/utils/constants';
 import storage from 'common/utils/storage';
-import Dropdown from 'common/components/Dropdown/Dropdown';
 import FAIcon from 'common/components/Icon/FAIcon';
-import DropdownContent from 'common/components/Dropdown/DropdownContent';
-import DropdownItem from 'common/components/Dropdown/DropdownItem';
-import Button from './Button';
+import DropdownMenu from '../Dropdown/DropdownMenu';
 
 /**
  * Properties for the `LanguageToggle` component.
@@ -34,34 +31,24 @@ const LanguageToggle = ({ className }: LanguageToggleProps): JSX.Element => {
   };
 
   return (
-    <Dropdown
-      toggle={
-        <Button variant="text" size="icon">
-          <FAIcon icon="language" size="2x" title="Select Language" />
-        </Button>
-      }
-      content={
-        <DropdownContent className="text-sm">
-          <DropdownItem onClick={() => setLanguage('en')} testId="dropdown-item-en">
-            <Button variant="text" className="h-auto p-0!" title="English Language">
-              English
-            </Button>
-          </DropdownItem>
-          <DropdownItem onClick={() => setLanguage('fr')} testId="dropdown-item-fr">
-            <Button variant="text" className="h-auto p-0!" title="French Language">
-              French
-            </Button>
-          </DropdownItem>
-          <DropdownItem onClick={() => setLanguage('es')} testId="dropdown-item-es">
-            <Button variant="text" className="h-auto p-0!" title="Spanish Language">
-              Spanish
-            </Button>
-          </DropdownItem>
-        </DropdownContent>
-      }
-      className={className}
-      testId="dropdown-language"
-    />
+    <DropdownMenu className={className} testId="dropdown-language">
+      <DropdownMenu.Trigger>
+        <FAIcon icon="language" size="2x" title="Select Language" />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Heading>Languages</DropdownMenu.Heading>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onClick={() => setLanguage('en')} testId="dropdown-item-en">
+          English
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={() => setLanguage('fr')} testId="dropdown-item-fr">
+          French
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={() => setLanguage('es')} testId="dropdown-item-es">
+          Spanish
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
   );
 };
 

src/common/components/Divider/Divider.tsx

@@ -14,12 +14,7 @@ export interface DividerProps extends BaseComponentProps {}
  * @returns {JSX.Element} JSX
  */
 const Divider = ({ className, testId = 'divider' }: DividerProps): JSX.Element => {
-  return (
-    <div
-      className={cn('h-0 w-full border-t border-neutral-500/50', className)}
-      data-testid={testId}
-    ></div>
-  );
+  return <div className={cn('h-px bg-neutral-500/50', className)} data-testid={testId}></div>;
 };
 
 export default Divider;

src/common/components/Divider/__stories__/Divider.stories.tsx

@@ -30,12 +30,12 @@ export const Simple: Story = {};
 
 export const Colored: Story = {
   args: {
-    className: 'border-blue-600!',
+    className: 'bg-blue-600!',
   },
 };
 
 export const Thick: Story = {
   args: {
-    className: 'border-4',
+    className: 'h-1',
   },
 };