feat: add stats slice component#844
Conversation
- font sizes - shadows - animation timings - "none" animation option - text wrapping for stats
AndyEPhipps
left a comment
AndyEPhipps
left a comment
There was a problem hiding this comment.
Really lovely work, my comments are purely housekeeping, really like what you've done here, looks great!
| } from './StatsSlice.style'; | ||
|
|
||
| // stagger between characters in milliseconds | ||
| const characterStagger = 80; |
There was a problem hiding this comment.
Maybe we can make this a prop with a default of 80, just for flexibility?
| * @param {string} character | ||
| * @returns {'string' | 'number'} | ||
| */ | ||
| function getValueType(character) { |
There was a problem hiding this comment.
Could we break these helper functions out into their own file, in order to ✨s t r e a m l i n e✨ this file a bit? It's pretty biiiiiiiiiiig
| // split value into words and characters, | ||
| // and get the type of each character; | ||
| // we animate string and numeric values differently | ||
| const words = stat |
| const wordKey = String(wordIndex) + wordObj.word; | ||
| return ( | ||
| <Word key={wordKey}> | ||
| {wordObj.map(({ character, type }, characterIndex) => { |
There was a problem hiding this comment.
I've reduced the amount of repetition in this component, but splitting out the actual Word component/loop is probably more trouble than it's worth.
There's a cumulative characterDelay value that's shared between all words and characters, and gets incremented with every character, so we'd have to implement some kind of back-and-forth updating — definitely possible, but not really worth the time imo.
There was a problem hiding this comment.
Gotcha, appreciate the justification
| }; | ||
|
|
||
| // MARK: string | ||
| function AnimatedStringCharacter({ |
| }; | ||
|
|
||
| // MARK: number | ||
| function AnimatedNumberCharacter({ |
|
🎉 This PR is included in version 8.63.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
2 participants
PR description
What is it doing?
Adding a new Stats Slice component. This component animates-in headline text using a "rolling number" format.
link to Jira ticket:
https://comicrelief.atlassian.net/browse/ENG-4289
Quick Checklist:
My PR title follows the Conventional Commit spec.
I have filled out the PR description as per the template above.
I have added tests to cover new or changed behaviour.
I have updated any relevant documentation.
Important! - lastly, make sure to squash merge...