Star rating redesign #15032
Star rating redesign #15032
Conversation
…asier to add a 0% switch for testing over festive period
…be controlled via test
…is not in variant
…r accessibility requirments. These are needed for cards such as feature cards which have lighter / variable backgrounds
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
|
Looks good @abeddow91 ❤️ Since the new Star Rating design forms part of Source core components, would it make sense to build this component into the Source React component library? This would help align the design-developer handoff for future changes and ensure the component is not tightly coupled to dotcom-rendering |
dotcom-rendering/src/components/StarRating/StarRating.stories.tsx
Outdated
Show resolved
Hide resolved
| isInStarRatingVariant={ | ||
| isInStarRatingVariant | ||
| } | ||
| starRating={article.starRating} |
There was a problem hiding this comment.
Why does the StarRating component now get called from within the ArticleHeadline component?
There was a problem hiding this comment.
The designs now co-locate the headline with the star ratings before headline bottom padding is applied.
Currently, the headline bottom-padding is applied in a wrapper within ArticleHeadline so the star ratings is rendered within this wrapper, following the same pattern as byline, the design tag and age warning.
It would be possible to lift this wrapper up outside of the ArticleHeadline component to decouple star ratings from the headline component but I'm not sure if that would be preferable.
domlander
left a comment
domlander
left a comment
There was a problem hiding this comment.
This looks great Anna, thanks for writing all this code!
There's a few comments that need to be deleted as SImon pointed out and it would be great if a few more stories could be added in places we have the new star ratings.
This update uses a ratings map to reduce boiler plate code.
…or star ratings. This is to prevent overloading the term dark which is more commonly used in the code base to refer to dark mode
abeddow91
force-pushed
the
ab/star-rating-update
branch
from
0ba2cdc to
3c8aca0
Compare
…ending on if the user is in the test variant
abeddow91
force-pushed
the
ab/star-rating-update
branch
from
9624256 to
af64c48
Compare
abeddow91
added
run_chromatic
What does this change?
Introduces the redesigned star rating component behind a 0% opt in test.
As part of the redesign the component has been refactored.
It now features
Why?
The star rating component is used site wide. By using a 0% opt in test, we can ensure design and engineering are given ample time to QA this change, especially given we are approaching the festive period.
To allow for the opt in test, the legacy star rating component has been deprecated and a new component has been added. This should make clean up easier once the the designs are fully approved and ready to roll out site wide.
Screenshots