Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add review card #2645

Merged
merged 18 commits into from
Feb 20, 2025
Merged

feat: add review card #2645

merged 18 commits into from
Feb 20, 2025

Conversation

artursantiago
Copy link
Collaborator

@artursantiago artursantiago commented Jan 28, 2025 •
edited by Guilera
Loading

What's the purpose of this pull request?

  • This pull request adds the new molecule ReviewCard component.

How does it work?

  • The ReviewCard will display the following information:

    • User's name
    • Verified user (boolean)
    • Review date
    • Review title and text
    • "Read more" and "Read less" options
    • Tooltip (displayed only for verified users when hovering over the verified icon next to the name)

  • The card must be responsive and rearrange itself for both desktop and mobile/tablet views.

  • Compose components were utilized to create the ReviewAuthor and ReviewDate components.

  • This component will be used in the listing of reviews for a product in the new Reviews and Ratings section.

How to test it?

Starters Deploy Preview

Preview

References

JIRA TASK: SFS-2071

Figma

image

image

@artursantiago artursantiago added enhancement New feature or request depends on Depends on another PR - Please mention the PR labels Jan 28, 2025
@artursantiago artursantiago self-assigned this Jan 28, 2025
@vercel Vercel
Copy link

vercel bot commented Jan 28, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
faststore-site ✅ Ready (Inspect) Visit Preview Jan 29, 2025 8:04pm

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Jan 28, 2025 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@artursantiago artursantiago changed the base branch from main to feat/reviews-and-ratings January 29, 2025 23:51
@artursantiago artursantiago marked this pull request as ready for review January 30, 2025 17:42
@artursantiago artursantiago requested a review from a team as a code owner January 30, 2025 17:42
@artursantiago artursantiago requested review from emersonlaurentino and lariciamota and removed request for a team January 30, 2025 17:42
@Guilera Guilera mentioned this pull request Feb 6, 2025
Draft
2 tasks
@Guilera Guilera force-pushed the feat/add-review-card branch from dd30d02 to 0c98a82 Compare February 14, 2025 14:22
@artursantiago artursantiago force-pushed the feat/add-review-card branch 5 times, most recently from f465188 to ae89b57 Compare February 14, 2025 17:28
@Guilera Guilera force-pushed the feat/reviews-and-ratings branch from 9c2cebb to 736e0f8 Compare February 18, 2025 19:49
@artursantiago artursantiago force-pushed the feat/add-review-card branch 2 times, most recently from c6e17e0 to 5fc7054 Compare February 18, 2025 19:55
@hellofanny hellofanny mentioned this pull request Feb 19, 2025
Closed
@Guilera Guilera force-pushed the feat/reviews-and-ratings branch from cc15cdd to 33db057 Compare February 19, 2025 17:34
artursantiago and others added 16 commits February 19, 2025 15:51
@artursantiago
feat: create ReviewCard component
9a4ca7a
@artursantiago
feat(ReviewCard): adjust Tooltip placement
3f723de
@artursantiago
feat(ReviewCard): srink date size when headline overflows
a496280
@artursantiago
feat(ReviewCard): add spaces to review card properties
6050708
@artursantiago @hellofanny
fix(ReviewCard): change placement to bottom-center
16b7ad5 
Co-authored-by: Fanny Chien <fanny.chien@vtex.com>
@artursantiago
refactor(ReviewCard): rename props and types
5a8bdb3
@artursantiago
refactor(ReviewCard): rename sub components
a788781
@artursantiago
feat(ReviewCard): import styles in packages/ui/src/styles/components.…
f406c6c 
…scss
@artursantiago @hellofanny
refactor(ReviewCard): use grid gap token for mobile card gap
175c24f 
Co-authored-by: Fanny Chien <fanny.chien@vtex.com>
@artursantiago @hellofanny
refactor(ReviewCard): use grid gap token for header gap
02fd8db 
Co-authored-by: Fanny Chien <fanny.chien@vtex.com>
@artursantiago @hellofanny
refactor(ReviewCard): use value in rem
960bfc9 
Co-authored-by: Fanny Chien <fanny.chien@vtex.com>
@artursantiago
feat: rename formatDateReviewCard to formatDate
50b6bf6
@artursantiago
feat: use toLocaleString to compare dates in formatDate
cb79f6b
@artursantiago @pedromtec
feat(ReviewCard): use previous value when setting state
fb0a1e4 
Co-authored-by: Pedro Soares <32311264+pedromtec@users.noreply.github.com>
@artursantiago
feat(ReviewCard): add note to useEffect
b81878a
@artursantiago
feat(ReviewCard): remove today logic from formatDate
033c870
@vtex vtex deleted a comment from semgrep-code-vtex-org bot Feb 19, 2025
@vtex vtex deleted a comment from semgrep-code-vtex-org bot Feb 19, 2025
hellofanny
hellofanny approved these changes Feb 20, 2025
View reviewed changes
Copy link
Contributor

@hellofanny hellofanny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done! 🚀

Since I was testing this new component also using the sb, I opened a PR so we can add it here. 😉

artursantiago and others added 2 commits February 20, 2025 09:57
@artursantiago
refactor(ReviewCard): adjust data attributes names
2bc73f9
@hellofanny
chore: Adds review card stories (#2696)
fbc7fed 
## What's the purpose of this pull request?

- Adds `ReviewCard` component stories
- Adds icons file to storybook

## How it works?

Run storybook, you will be able to see `ReviewCard` stories listed.

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/eb83b0d3-3503-4456-9bcc-74dcb7c69ad5"
/>

[Preview
Link](https://679bba553a027698f520f552-upyplcocyt.chromatic.com/?path=/story/review-card--default)
@hellofanny hellofanny merged commit 5b1d946 into feat/reviews-and-ratings Feb 20, 2025
5 of 6 checks passed
@hellofanny hellofanny deleted the feat/add-review-card branch February 20, 2025 13:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pedromtec pedromtec pedromtec approved these changes

@hellofanny hellofanny hellofanny approved these changes

@emersonlaurentino emersonlaurentino Awaiting requested review from emersonlaurentino emersonlaurentino is a code owner automatically assigned from vtex/faststore

@lariciamota lariciamota Awaiting requested review from lariciamota lariciamota is a code owner automatically assigned from vtex/faststore

Assignees

@artursantiago artursantiago

Labels
depends on Depends on another PR - Please mention the PR enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@artursantiago @hellofanny @pedromtec