refactor: update the How It Works component to new design#31
refactor: update the How It Works component to new design#31FabianSanchezD wants to merge 3 commits intoACTA-Team:developfrom
Conversation
|
@FabianSanchezD is attempting to deploy a commit to the ACTA Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughRefactored the "How It Works" component from a card-based flip-card layout to a vertically-stacked accordion with controlled single-step expansion, animated open/close, and accessibility IDs. Also removed the "How It Works" heading block from the Use Cases section in the page template. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/HowItWorks.tsx (1)
10-17:idandnumberfields onStepare always identical — consider unifying.Every entry has
id: "0x"andnumber: "0x"with the same value.numberis only used for display (Line 104);iddrives all logic (keying, accordion state, ARIA ID generation). The duplicate field adds noise to the type and every data object.♻️ Proposed simplification
type Step = { - id: string; - number: string; + id: string; // "01" | "02" | "03" — also rendered as the large number icon: React.ReactNode; title: string; description: string; bullets: string[]; }; // In stepsData, remove the `number` field: - { id: "01", number: "01", icon: ..., ... }, + { id: "01", icon: ..., ... }, // In StepRow, render `step.id` instead of `step.number`: - {step.number} + {step.id}Also applies to: 19-59
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HowItWorks.tsx` around lines 10 - 17, The Step type currently duplicates id and number; remove the number field from the Step type and from all step data objects, and update the HowItWorks rendering to use Step.id (or a derived/format function) for display where step.number was used (the keying, accordion state, and ARIA IDs should continue to use step.id unchanged). Update any references to step.number in components (e.g., the step header/label render) to use step.id or formatStepNumber(step.id) and adjust tests/types accordingly so only Step.id remains as the unique identifier. Ensure TypeScript types, prop usages, and any mapping over steps (e.g., in HowItWorks) compile after removing number.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/HowItWorks.tsx`:
- Around line 205-210: The id "how-it-works-label" on the <p> in the HowItWorks
component is unused and should be removed to eliminate dead markup; either
delete the id attribute from that element or, if you intended it to be used for
accessibility, update the container's aria-labelledby to reference
"how-it-works-label" (instead of or in addition to
"how-it-works-heading")—locate the <p> with id="how-it-works-label" and remove
the id or update the section's aria-labelledby accordingly.
- Around line 143-153: The collapse snaps shut because the element uses
hidden={!isExpanded}, which applies display:none immediately and prevents the
gridTemplateRows transition and inner motion.div exit animation; change the
attribute to aria-hidden={!isExpanded} on the region (the div with
role="region", id={contentId}, aria-labelledby={triggerId}) so the visual
collapse (gridTemplateRows and inner overflow:hidden) can animate while still
signaling hidden state to assistive tech; leave the role/id/aria-labelledby and
the gridTemplateRows/isExpanded logic intact.
---
Nitpick comments:
In `@src/components/HowItWorks.tsx`:
- Around line 10-17: The Step type currently duplicates id and number; remove
the number field from the Step type and from all step data objects, and update
the HowItWorks rendering to use Step.id (or a derived/format function) for
display where step.number was used (the keying, accordion state, and ARIA IDs
should continue to use step.id unchanged). Update any references to step.number
in components (e.g., the step header/label render) to use step.id or
formatStepNumber(step.id) and adjust tests/types accordingly so only Step.id
remains as the unique identifier. Ensure TypeScript types, prop usages, and any
mapping over steps (e.g., in HowItWorks) compile after removing number.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/page.tsxsrc/components/HowItWorks.tsx
💤 Files with no reviewable changes (1)
- src/app/page.tsx
| <div | ||
| className="col-span-4 grid grid-cols-subgrid transition-[grid-template-rows] duration-300" | ||
| style={{ | ||
| transform: "rotateY(180deg)", | ||
| backfaceVisibility: "hidden", | ||
| WebkitBackfaceVisibility: "hidden", | ||
| gridTemplateRows: isExpanded ? "1fr" : "0fr", | ||
| transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)", | ||
| }} | ||
| role="region" | ||
| id={contentId} | ||
| aria-labelledby={triggerId} | ||
| hidden={!isExpanded} | ||
| > |
There was a problem hiding this comment.
hidden={!isExpanded} breaks the collapse animation — content snaps shut.
The hidden HTML attribute applies display: none immediately on the next render cycle after isExpanded flips to false. Because display: none is synchronous and layout-removing, the CSS grid-template-rows: 1fr → 0fr transition never renders on close, and the AnimatePresence exit opacity animation on the inner motion.div is also invisible (its parent is already hidden). Only the open direction animates; the close direction snaps.
The visual collapse is already handled by gridTemplateRows: "0fr" + overflow: hidden on the inner div (Line 154), so hidden is redundant for layout purposes. To retain screen-reader exclusion without breaking animation, replace hidden with aria-hidden:
🐛 Proposed fix
<div
className="col-span-4 grid grid-cols-subgrid transition-[grid-template-rows] duration-300"
style={{
gridTemplateRows: isExpanded ? "1fr" : "0fr",
transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
}}
role="region"
id={contentId}
aria-labelledby={triggerId}
- hidden={!isExpanded}
+ aria-hidden={!isExpanded}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| className="col-span-4 grid grid-cols-subgrid transition-[grid-template-rows] duration-300" | |
| style={{ | |
| transform: "rotateY(180deg)", | |
| backfaceVisibility: "hidden", | |
| WebkitBackfaceVisibility: "hidden", | |
| gridTemplateRows: isExpanded ? "1fr" : "0fr", | |
| transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)", | |
| }} | |
| role="region" | |
| id={contentId} | |
| aria-labelledby={triggerId} | |
| hidden={!isExpanded} | |
| > | |
| <div | |
| className="col-span-4 grid grid-cols-subgrid transition-[grid-template-rows] duration-300" | |
| style={{ | |
| gridTemplateRows: isExpanded ? "1fr" : "0fr", | |
| transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)", | |
| }} | |
| role="region" | |
| id={contentId} | |
| aria-labelledby={triggerId} | |
| aria-hidden={!isExpanded} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/HowItWorks.tsx` around lines 143 - 153, The collapse snaps
shut because the element uses hidden={!isExpanded}, which applies display:none
immediately and prevents the gridTemplateRows transition and inner motion.div
exit animation; change the attribute to aria-hidden={!isExpanded} on the region
(the div with role="region", id={contentId}, aria-labelledby={triggerId}) so the
visual collapse (gridTemplateRows and inner overflow:hidden) can animate while
still signaling hidden state to assistive tech; leave the
role/id/aria-labelledby and the gridTemplateRows/isExpanded logic intact.
| <p | ||
| id="how-it-works-label" | ||
| className="text-xs font-medium uppercase text-white/50 tracking-[0.4em]" | ||
| > | ||
| HOW IT WORKS | ||
| </p> |
There was a problem hiding this comment.
id="how-it-works-label" is defined but never referenced.
No aria-labelledby or aria-describedby points to "how-it-works-label". The section's accessible name already comes from the <h2> via aria-labelledby="how-it-works-heading". The unused id is dead markup.
🧹 Proposed fix
- <p
- id="how-it-works-label"
- className="text-xs font-medium uppercase text-white/50 tracking-[0.4em]"
- >
+ <p className="text-xs font-medium uppercase text-white/50 tracking-[0.4em]">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p | |
| id="how-it-works-label" | |
| className="text-xs font-medium uppercase text-white/50 tracking-[0.4em]" | |
| > | |
| HOW IT WORKS | |
| </p> | |
| <p className="text-xs font-medium uppercase text-white/50 tracking-[0.4em]"> | |
| HOW IT WORKS | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/HowItWorks.tsx` around lines 205 - 210, The id
"how-it-works-label" on the <p> in the HowItWorks component is unused and should
be removed to eliminate dead markup; either delete the id attribute from that
element or, if you intended it to be used for accessibility, update the
container's aria-labelledby to reference "how-it-works-label" (instead of or in
addition to "how-it-works-heading")—locate the <p> with id="how-it-works-label"
and remove the id or update the section's aria-labelledby accordingly.
…works-component # Conflicts: # src/features/how-it-works/HowItWorks.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/features/how-it-works/HowItWorks.tsx (2)
12-24: Consider consolidating redundantidandnumberfields.Both
idandnumberhold identical values ("01","02","03"). You could derive one from the other or use a single field to reduce duplication.♻️ Suggested simplification
type Step = { - id: string; number: string; icon: React.ReactNode; title: string; description: string; bullets: string[]; }; const stepsData: Step[] = [ { - id: "01", number: "01", // ... }, // ... ];Then use
step.numberas the key and for state comparison.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/how-it-works/HowItWorks.tsx` around lines 12 - 24, The Step type and stepsData currently duplicate the same value in id and number; remove the redundant id field from the Step type and each object in stepsData, then update any usages (e.g., React list key and state comparisons) to use step.number instead of step.id; search for references to id in this component (and tests) and replace them with number to ensure keys, lookups and equality checks use the single number field.
183-183: Consider extracting the repeated hardcoded color.The color
#616161is used here and again on line 233. For maintainability, consider extracting it to a Tailwind theme extension or CSS variable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/how-it-works/HowItWorks.tsx` at line 183, The hardcoded color literal "text-[`#616161`]" appears repeatedly in HowItWorks.tsx (e.g., the <p className="text-sm text-[`#616161`] sm:text-base leading-relaxed"> instance); extract this color into a reusable token by adding it to your Tailwind theme (or define a CSS variable) with a semantic name (e.g., "muted" or "text-muted") and then replace all occurrences of "text-[`#616161`]" in HowItWorks.tsx with the new utility (e.g., "text-muted"); update any other instances in the file (the second occurrence noted in the review) to use the new token so the color is maintained centrally.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/features/how-it-works/HowItWorks.tsx`:
- Around line 12-24: The Step type and stepsData currently duplicate the same
value in id and number; remove the redundant id field from the Step type and
each object in stepsData, then update any usages (e.g., React list key and state
comparisons) to use step.number instead of step.id; search for references to id
in this component (and tests) and replace them with number to ensure keys,
lookups and equality checks use the single number field.
- Line 183: The hardcoded color literal "text-[`#616161`]" appears repeatedly in
HowItWorks.tsx (e.g., the <p className="text-sm text-[`#616161`] sm:text-base
leading-relaxed"> instance); extract this color into a reusable token by adding
it to your Tailwind theme (or define a CSS variable) with a semantic name (e.g.,
"muted" or "text-muted") and then replace all occurrences of "text-[`#616161`]" in
HowItWorks.tsx with the new utility (e.g., "text-muted"); update any other
instances in the file (the second occurrence noted in the review) to use the new
token so the color is maintained centrally.
1 participant
🚀 ACTA Pull Request
Mark with an
xall the checkboxes that apply (like[x])📌 Type of Change
📝 Changes description
Updated the How It Works component on the main landing page, using the attached design on the closed issue. Follows all guidelines.
📸 Evidence (A Loom/Cap video is required as evidence, we WON'T merge if there's no proof)
Checkout this video for proof of how the component looks:
https://cap.so/s/tak2k8jxdx223h1
npm run lint(warning in other components, not this one):npm run build(warnings in other components):⏰ Time spent breakdown
1 hour
🌌 Comments
Thanks for reviewing this PR! Let me know if any changes are required.
Thank you for contributing to ACTA! We hope you can continue contributing to this project.
Summary by CodeRabbit
New Features
Style