Create "add to gymnast"-button component

[xeniag]

Front-End Implementation: Add to Gymnast Button Component

Goal: Create a reusable, accessible button component that allows authenticated users to add a specific element/skill to a gymnast's profile or routine, remaining strictly hidden for unauthenticated users.

Implementation Checklist

• Component Architecture & State

  • Create src/components/AddToGymnast/AddToGymnast.tsx using React and TypeScript.
  • Accept component props (elementId: string, isLoggedIn: boolean, onAdd?: (gymnastId: string) => void).
  • Implement conditional early return (if (!isLoggedIn) return null;) to ensure the button is completely hidden from non-logged-in users.
  • Support modal toggle or dropdown selection state to choose which gymnast/routine to add the element to.

• UI & Responsive Design

  • Style a primary action button using Tailwind CSS featuring an intuitive icon (e.g., plus icon + or user icon) and clear label text (e.g., "Add to Gymnast").
  • Provide distinct visual states for idle, active, loading, and disabled conditions.
  • Ensure the optional gymnast selector dropdown/modal renders responsively across desktop and mobile views.

• Accessibility (A11y)

  • Use a semantic <button> element with an explicit aria-label (e.g., "Add element to gymnast routine").
  • Hide decorative icons from screen readers using aria-hidden="true".
  • Implement appropriate ARIA attributes for dropdown or modal popovers (aria-haspopup="dialog", aria-expanded).
  • Ensure full keyboard navigation support (Tab, Space, Enter) with high-contrast focus indicators (focus-visible:outline-*).

• Testing & Quality Assurance

  • Create unit tests in src/tests/AddToGymnast.test.tsx using Vitest and React Testing Library.
  • Verify component renders null when isLoggedIn={false}.
  • Verify button renders correctly when isLoggedIn={true} and triggers the expected callback on click.
  • Test keyboard interaction and accessibility attributes.