[UI] QuestList card component #427
Conversation
… and Library Details
…or style variants
… tertiary, and error options
…enhance readability
…and integrate Sticker component
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
… into ui/quest-list-cards
…ming/hyperplay-ui into ui/quest-list-cards
| display: flex; | ||
| margin-top: 20px; | ||
| align-items: center; | ||
| gap: 0.5rem; |
There was a problem hiding this comment.
can we use spacing var here
src/components/QuestList/types.ts
Outdated
| @@ -0,0 +1,21 @@ | |||
| import { Quest } from '@hyperplay/utils' | |||
There was a problem hiding this comment.
I'm not too opinionated about this but we usually define the props in the same file as the component. For consistency, can you move it to the component file, please?
|
Were there requirements in this story for mobile responsiveness? |
| <div className={styles.readyForClaim}> | ||
| <p className={styles.readyForClaimTitle}> | ||
| <QuestIconTwo className={styles.questIconTwo} /> | ||
| Ready for Claim |
There was a problem hiding this comment.
would be good if this were an i18n string
| Ready for Claim | ||
| </p> | ||
| <Sticker styleType="secondary" variant="filledStrong"> | ||
| Label |
There was a problem hiding this comment.
Is this meant to be a hardcoded "Label" string?
| const readyForClaimQuests = [ | ||
| { | ||
| id: 1, | ||
| title: 'Play Streak', | ||
| duration: '0 / 7 days', | ||
| resetTime: 'Day resets:', | ||
| time: '23:43:03 (UTC)', | ||
| questType: 'PLAYSTREAK', | ||
| reward: '+200 G7C' | ||
| } | ||
| ] | ||
| const activeQuests = [ | ||
| { | ||
| id: 2, | ||
| title: 'Play Streak', | ||
| duration: '0 / 7 days', | ||
| resetTime: 'Day resets:', | ||
| time: '23:43:03 (UTC)', | ||
| questType: 'PLAYSTREAK', | ||
| reward: '+200 G7C' | ||
| } | ||
| ] |
There was a problem hiding this comment.
this should be in the story
| Weekly | ||
| </Sticker> | ||
| <Sticker styleType="tertiary" variant="outlined"> | ||
| 2x |
There was a problem hiding this comment.
a couple more hardcoded strings here
| <p className={styles.resetTime}> | ||
| <ClockNew className={styles.clockIcon} /> | ||
| <span className={styles.time}> | ||
| Day resets: 23:43:03 (UTC) |
There was a problem hiding this comment.
there are a lot of hardcoded strings in here. They should be i18n strings. The dummy data should only be used in the story too
| <p className={classNames('body', styles.questType)}> | ||
| <Lightning className={styles.lightningIcon} /> | ||
| Play Streak | ||
| </p> | ||
| <p className={styles.rewardType}>+200 G7C</p> |
There was a problem hiding this comment.
it might be best if we accepted a React.ReactElement as a prop and then showed it here
There was a problem hiding this comment.
I like that you are trying to make this component very general.
To that end, how do you feel about making this a layout component?
Basically we would accept React.ReactElement props for each area of the component and it would be up to the consuming code to pass in the appropriate elements.
There was a problem hiding this comment.
That's a good suggestion!
I had left most of this component hard coded because I plan to make it more dynamic when we have the auth login in place since much of what will be shown in it will only be rendered if the user is logged in.
Yes, there's. This PR is paused for the moment because I need our new login feature, which is not yet active. I'll also add the mobile responsiveness during this. Thank you for pointing it out! |
Can you elabore on this @biliesilva? Making the component fully dynamic shouldn't need any implementation detail at this point. You can come up with the API you see fit right now. |
This was more of a prioritization as we discussed in one of our past meetings. There were more urgent tickets to work on, as this one still requires the new login authentication to go live, I paused it for now, but I intend to come back as soon as I can to change what Brett asked above, and make it more mobile responsible. |
Description
This pr is to send the new QuestList component hard coded for our Storybook
PS: After our new auth login is in place I can get the user info about the "Ready for Claim" quests so we can show and finalize the logic for this component in the client.
Design
Design Link
Storybook Link Preview