From 6d080bfcf5ed9fa55950383775da276166f394ef Mon Sep 17 00:00:00 2001 From: clacina Date: Tue, 28 Apr 2026 08:25:11 -0700 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20site-wide=20foote?= =?UTF-8?q?r=20with=20ASL=20disclaimer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements a collapsible footer component rendered on all pages, containing an accessible ASL icon and four disclaimer bullet points per the term-input-footer spec. --- .claude/commands/add-and-commit.md | 38 +++++++++++++++++++++++++++ _specs/term-input-footer.md | 42 ++++++++++++++++++++++++++++++ src/App.css | 37 ++++++++++++++++++++++++++ src/App.jsx | 2 ++ src/components/Footer.jsx | 18 +++++++++++++ tests/Footer.test.jsx | 30 +++++++++++++++++++++ 6 files changed, 167 insertions(+) create mode 100644 .claude/commands/add-and-commit.md create mode 100644 _specs/term-input-footer.md create mode 100644 src/components/Footer.jsx create mode 100644 tests/Footer.test.jsx diff --git a/.claude/commands/add-and-commit.md b/.claude/commands/add-and-commit.md new file mode 100644 index 0000000..fa69970 --- /dev/null +++ b/.claude/commands/add-and-commit.md @@ -0,0 +1,38 @@ +--- +description: Create a commit message by analyzing git diffs +allowed-tools: Bash(git status:*), Bash(git diff --staged), Bash(git commit:*) +--- + +## Context: + +- Current git status: !`git status` +- Current git diff: !`git diff --staged` +- ADD all modified and new files to git. If you think there are files that should not be in version control, ask the user. If you see files that you think should be bundled into separate commits, ask the user. +Analyze above staged git changes and create a commit message. Use present tense and explain "why" something has changed, not just "what" has changed. + +## Commit types with emojis: +Only use the following emojis: + +- ✨ `feat:` - New feature +- 🐛 `fix:` - Bug fix +- 🔨 `refactor:` - Refactoring code +- 📝 `docs:` - Documentation +- 🎨 `style:` - Styling/formatting +- ✅ `test:` - Tests +- ⚡ `perf:` - Performance + +## Format: +Use the following format for making the commit message: + +``` + : + +``` + +## Output: + +1. Show summary of changes currently staged +2. Propose commit message with appropriate emoji +3. Ask for confirmation before committing + +DO NOT auto-commit - wait for user approval, and only commit if the user says so. \ No newline at end of file diff --git a/_specs/term-input-footer.md b/_specs/term-input-footer.md new file mode 100644 index 0000000..928221a --- /dev/null +++ b/_specs/term-input-footer.md @@ -0,0 +1,42 @@ +# Spec for term-input-footer + +branch: claude/feature/term-input-footer + +## Summary +Add a footer to the TermInput page that includes an ASL-related icon and a disclaimer section informing users about the scope and limitations of the site. + +## Functional Requirements +- Display a footer at the bottom of the TermInput page +- Include an icon visually representing American Sign Language (e.g., a signing hand) +- Include a disclaimer section with the following notes: + - This site is not for professional use and is only for helping study ASL + - Uses public domain videos that are not owned by the creator + - Does not promise that the signs provided are the most recent versions of ASL + - Attempts to restrict signs to ASL vs other sign languages (BSL, etc.) + +## Possible Edge Cases +- Footer should not overlap or obscure page content on small/mobile screens +- Icon should be accessible (alt text or aria-label) +- Disclaimer text should remain readable at all screen sizes + +## Acceptance Criteria +- The TermInput page renders a footer at the bottom of the page +- The footer contains an ASL-representative icon +- The footer contains all four disclaimer bullet points +- Footer is visible without scrolling past main content on standard viewport sizes +- Footer is responsive and does not break layout on mobile + +## Open Questions +- Should the footer appear on all pages or only the TermInput page? + - all pages. +- Is there a preferred icon (emoji, SVG, image asset) for the ASL representation? + - no +- Should the disclaimer be collapsible/expandable or always visible? + - collapsible/expandable + +## Testing Guidelines +Create a test file(s) in the ./tests folder for the new feature, and create meaningful tests for the following cases, without going too heavy: +- Footer renders on the TermInput page +- All four disclaimer items are present in the rendered output +- ASL icon element is present and has accessible text +- Footer does not render outside the TermInput page (if scoped to that page only) diff --git a/src/App.css b/src/App.css index 77715ed..23d3eba 100644 --- a/src/App.css +++ b/src/App.css @@ -362,6 +362,43 @@ } } +/* ── Footer ───────────────────────────────────────────── */ + +.site-footer { + margin-top: auto; + padding: 12px 0 4px; + border-top: 1px solid var(--border); + font-size: 13px; + color: var(--text); + opacity: 0.7; + text-align: center; +} + +.site-footer__icon { + margin: 0 0 6px; +} + +.site-footer__disclaimer summary { + cursor: pointer; + display: inline-block; + margin-bottom: 6px; +} + +.site-footer__disclaimer ul { + margin: 0 auto; + padding: 0 0 0 20px; + max-width: 560px; + text-align: left; + list-style-position: outside; + line-height: 1.6; + + li { + margin-bottom: 2px; + } +} + +/* ── Term select ──────────────────────────────────────── */ + .term-select { flex: 0 0 200px; align-self: stretch; diff --git a/src/App.jsx b/src/App.jsx index 0081f8a..56d9035 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import { useState } from 'react' import { CardColors } from './data/card-colors' import { LandingPage } from './components/LandingPage' import { FlashcardSession } from './components/FlashcardSession' +import { Footer } from './components/Footer' import './App.css' function App() { @@ -32,6 +33,7 @@ function App() { ) : ( )} +