OPHJOD-281: Remove classnames

lib/components/Button/Button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { Button } from './Button';
 
@@ -16,38 +17,30 @@ export const Base: Story = {
   args: {
     label: 'Base Button',
     variant: 'base',
-    onClick: () => {
-      // Do nothing
-    },
+    onClick: fn(),
   },
 };
 
 export const Primary: Story = {
   args: {
     label: 'Primary Button',
     variant: 'primary',
-    onClick: () => {
-      // Do nothing
-    },
+    onClick: fn(),
   },
 };
 
 export const Outlined: Story = {
   args: {
     label: 'Outlined Button',
     variant: 'outlined',
-    onClick: () => {
-      // Do nothing
-    },
+    onClick: fn(),
   },
 };
 
 export const Text: Story = {
   args: {
     label: 'Text Button',
     variant: 'text',
-    onClick: () => {
-      // Do nothing
-    },
+    onClick: fn(),
   },
 };

lib/components/Button/Button.tsx

@@ -1,10 +1,8 @@
-import classNames from 'classnames';
-/**
- * base = default button to be used
- * primary = should be only appear once in a page
- * text = for less-pronounced actions
- */
-export type ButtonVariant = 'base' | 'primary' | 'outlined' | 'text';
+export type ButtonVariant =
+  | 'base' // default button to be used
+  | 'primary' // should be only appear once in a page
+  | 'outlined'
+  | 'text'; // for less-pronounced actions
 
 export interface ButtonProps {
   /** Text shown on the button */
@@ -18,19 +16,17 @@ export interface ButtonProps {
 }
 
 export const Button = ({ label, onClick, variant = 'base', disabled = false }: ButtonProps) => {
+  const className = `m-2 px-4 py-2 font-bold
+      ${variant === 'base' ? 'bg-jod-base text-jod-white' : ''}
+      ${variant === 'primary' ? 'bg-jod-primary text-jod-white' : ''}
+      ${variant === 'outlined' ? 'border border-jod-black text-jod-black' : ''}
+      ${variant === 'text' ? 'text-jod-black' : ''}
+      ${disabled ? 'cursor-not-allowed opacity-50' : ''}`
+    .replace(/\s+/g, ' ')
+    .trim();
+
   return (
-    <button
-      disabled={disabled}
-      type="button"
-      onClick={onClick}
-      className={classNames('jod-button', 'm-2 px-4 py-2 font-bold', {
-        'bg-jod-base text-jod-white': variant === 'base',
-        'bg-jod-primary text-jod-white': variant === 'primary',
-        'border border-jod-black text-jod-black': variant === 'outlined',
-        'text-jod-black': variant === 'text',
-        'cursor-not-allowed opacity-50': disabled,
-      })}
-    >
+    <button disabled={disabled} type="button" onClick={onClick} className={className}>
       {label}
     </button>
   );

lib/components/Button/__snapshots__/Button.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Snapshot testing > Base button 1`] = `
 <button
-  class="jod-button m-2 px-4 py-2 font-bold bg-jod-base text-jod-white"
+  class="m-2 px-4 py-2 font-bold bg-jod-base text-jod-white"
   type="button"
 >
   Base button
@@ -11,7 +11,7 @@ exports[`Snapshot testing > Base button 1`] = `
 
 exports[`Snapshot testing > Outlined button 1`] = `
 <button
-  class="jod-button m-2 px-4 py-2 font-bold border border-jod-black text-jod-black"
+  class="m-2 px-4 py-2 font-bold border border-jod-black text-jod-black"
   type="button"
 >
   Outlined button
@@ -20,7 +20,7 @@ exports[`Snapshot testing > Outlined button 1`] = `
 
 exports[`Snapshot testing > Primary button 1`] = `
 <button
-  class="jod-button m-2 px-4 py-2 font-bold bg-jod-primary text-jod-white"
+  class="m-2 px-4 py-2 font-bold bg-jod-primary text-jod-white"
   type="button"
 >
   Primary button
@@ -29,7 +29,7 @@ exports[`Snapshot testing > Primary button 1`] = `
 
 exports[`Snapshot testing > Text button 1`] = `
 <button
-  class="jod-button m-2 px-4 py-2 font-bold text-jod-black"
+  class="m-2 px-4 py-2 font-bold text-jod-black"
   type="button"
 >
   Text button

lib/components/DropdownMenu/DropdownMenu.test.tsx

@@ -91,8 +91,8 @@ describe('label', () => {
 });
 
 describe('hideLabel', () => {
-  it('should add correct CSS class to label', () => {
+  it('should add aria-label when label is hidden', () => {
     render(<DropdownMenu label="Non-visible label" options={[]} hideLabel={true} />);
-    expect(screen.getByText('Non-visible label').classList).toContain('sr-only');
+    expect(screen.getByRole('combobox', { name: 'Non-visible label' })).not.toBeNull();
   });
 });

lib/components/DropdownMenu/DropdownMenu.tsx

@@ -1,5 +1,4 @@
 import { useId } from 'react';
-import classNames from 'classnames';
 
 export interface DropdownMenuOptionsData<T extends string = string> {
   value: T;
@@ -37,23 +36,16 @@ export const DropdownMenu = <
   const labelId = useId();
   return (
     <div className="flex flex-row">
-      <label
-        htmlFor={labelId}
-        className={classNames('mr-2 self-center font-bold text-jod-black', {
-          'sr-only': hideLabel,
-        })}
-      >
-        {label}
-      </label>
+      {!hideLabel && (
+        <label htmlFor={labelId} className="mr-2 self-center font-bold text-jod-black">
+          {label}
+        </label>
+      )}
       <select
         disabled={disabled}
         id={labelId}
-        className={classNames(
-          'min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500',
-          {
-            'disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200': disabled,
-          },
-        )}
+        aria-label={hideLabel ? label : undefined}
+        className="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
         onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
           if (propOnChange) {
             propOnChange(event.target.value as U);

lib/components/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap

@@ -4,12 +4,9 @@ exports[`Snapshot testing > should not show label 1`] = `
 <div
   class="flex flex-row"
 >
-  <label
-    class="mr-2 self-center font-bold text-jod-black sr-only"
-    for=":r1:"
-  />
   <select
-    class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500"
+    aria-label=""
+    class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
     id=":r1:"
   />
 </div>
@@ -40,7 +37,7 @@ exports[`Snapshot testing > should render with defaults 1`] = `
     for=":r0:"
   />
   <select
-    class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500"
+    class="min-w-[120px] justify-self-end rounded-lg border border-jod-dark bg-jod-white p-2 hover:bg-purple-100 focus:outline-none focus:ring focus:ring-purple-500 disabled:border-gray-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:hover:bg-gray-200"
     id=":r0:"
   />
 </div>

package.json

@@ -46,7 +46,6 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "^1.2.1",
     "autoprefixer": "^10.4.18",
-    "classnames": "^2.5.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",