feat(frontend): Input Radio Component (#151)

Author: Dario-Au

Diff for: frontend/app/components/input-radio.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+
+import { cn } from '~/utils/tailwind-utils';
+
+const inputBaseClassName =
+  'h-4 w-4 border-gray-500 bg-gray-50 text-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500';
+const inputDisabledClassName = 'pointer-events-none cursor-not-allowed opacity-70';
+const inputErrorClassName = 'border-red-500 text-red-700 focus:border-red-500 focus:ring-red-500';
+const inputReadOnlyClassName = 'pointer-events-none cursor-not-allowed opacity-70';
+
+export interface InputRadioProps extends OmitStrict<React.ComponentProps<'input'>, 'aria-labelledby' | 'children' | 'type'> {
+  append?: ReactNode;
+  appendClassName?: string;
+  children: ReactNode;
+  hasError?: boolean;
+  id: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  name: string;
+}
+
+export function InputRadio({
+  append,
+  appendClassName,
+  children,
+  className,
+  hasError,
+  id,
+  inputClassName,
+  labelClassName,
+  ...restProps
+}: InputRadioProps) {
+  const inputRadioId = `input-radio-${id}`;
+  const inputLabelId = `${inputRadioId}-label`;
+  return (
+    <div className={className}>
+      <div className="flex items-center">
+        <input
+          type="radio"
+          id={inputRadioId}
+          aria-labelledby={inputLabelId}
+          className={cn(
+            inputBaseClassName,
+            restProps.readOnly && inputReadOnlyClassName,
+            restProps.disabled && inputDisabledClassName,
+            hasError && inputErrorClassName,
+            inputClassName,
+          )}
+          data-testid="input-radio"
+          {...restProps}
+        />
+        <label
+          id={inputLabelId}
+          htmlFor={inputRadioId}
+          className={cn(
+            'block pl-3 leading-6',
+            restProps.readOnly && inputReadOnlyClassName,
+            restProps.disabled && inputDisabledClassName,
+            labelClassName,
+          )}
+        >
+          {children}
+        </label>
+      </div>
+      {append && <div className={cn('mt-4 ml-7', appendClassName)}>{append}</div>}
+    </div>
+  );
+}

Diff for: frontend/tests/components/__snapshots__/input-radio.test.tsx.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputRadio > disables radio button when disabled prop is provided > expected html 1`] = `"<div><div class="flex items-center"><input id="input-radio-test-radio" aria-labelledby="input-radio-test-radio-label" class="h-4 w-4 border-gray-500 bg-gray-50 text-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 pointer-events-none cursor-not-allowed opacity-70" data-testid="input-radio" disabled="" type="radio" name="test-radio"><label id="input-radio-test-radio-label" for="input-radio-test-radio" class="block pl-3 leading-6 pointer-events-none cursor-not-allowed opacity-70">Radio Label</label></div></div>"`;
+
+exports[`InputRadio > renders radio button with label and appends content > expected html 1`] = `"<div><div class="flex items-center"><input id="input-radio-test-radio" aria-labelledby="input-radio-test-radio-label" class="h-4 w-4 border-gray-500 bg-gray-50 text-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500" data-testid="input-radio" type="radio" name="test-radio"><label id="input-radio-test-radio-label" for="input-radio-test-radio" class="block pl-3 leading-6">Radio Label</label></div><div class="mt-4 ml-7"><div data-testid="append-content">Appended Content</div></div></div>"`;

Diff for: frontend/tests/components/input-radio.test.tsx

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { InputRadio } from '~/components/input-radio';
+
+describe('InputRadio', () => {
+  it('renders radio button with label and appends content', () => {
+    const labelText = 'Radio Label';
+    const appendContent = <div data-testid="append-content">Appended Content</div>;
+    const { container } = render(
+      <InputRadio id="test-radio" name="test-radio" append={appendContent}>
+        {labelText}
+      </InputRadio>,
+    );
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+
+  it('disables radio button when disabled prop is provided', () => {
+    const { container } = render(
+      <InputRadio id="test-radio" name="test-radio" disabled>
+        Radio Label
+      </InputRadio>,
+    );
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+});