Add ScrollableSmallOnwards components #14809
Conversation
marjisound
force-pushed
the
gallery-onwards-secondary-container
branch
from
7424d2b to
81ae393
Compare
marjisound
force-pushed
the
gallery-onwards-secondary-container
branch
2 times, most recently
from
1fd4cb7 to
9c23a75
Compare
| linkTo: string; | ||
| format: ArticleFormat; | ||
| /** The format of the article holding the card */ | ||
| contextFormat?: ArticleFormat; |
There was a problem hiding this comment.
This prop lets us know which article design the card belongs to when it's displayed as onwards content. Because currently we have a re-design for onward contents cards which is only applied on Gallery articles.
Once the redesign is rolled out to all article types, this prop can be removed.
| format, | ||
| dataLinkName: getDataLinkNameCard(format, '0', index), | ||
| }; | ||
| }; |
There was a problem hiding this comment.
I added this function that will create the dcr trail type using the master image rather than the image field. We need to make this chaneg for all the trail types but since that change needs a bit of testing, I decided not to include it in this PR as it's out of the scope.
Added a function to generate the DCR trail type using the master image rather than the image field. The same update will be needed for all trail types, but that requires more testing and is out of scope for this PR, so I've left that change to be done separately.
I've also created this ticket for changing all trail types into using the master image url. #14813
There was a problem hiding this comment.
There's also another ticket to deal with the altText which is currently set to empty string #14628
|
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. |
| border-top: 1px solid | ||
| ${isGalleryOnwardContent | ||
| ? palette('--onward-content-border') | ||
| : palette('--card-border-top')}; |
There was a problem hiding this comment.
Because of this change, all the Card stories are showing diffs in the Chromatic snapshots. The visual design hasn’t changed, only the generated Emotion class names have.
|
Is there a way to preview this change @marjisound? From the after screenshots, it looks like the margin/padding is a bit tight and that it's got some inconsistency depending on elements within the card. |
marjisound
force-pushed
the
gallery-onwards-secondary-container
branch
from
9c23a75 to
1519a2d
Compare
github-actions
bot
removed
the
run_chromatic
github-actions
bot
removed
the
run_chromatic
marjisound
force-pushed
the
gallery-onwards-secondary-container
branch
from
96d92be to
64f27a4
Compare
github-actions
bot
removed
the
run_chromatic
marjisound
force-pushed
the
gallery-onwards-secondary-container
branch
from
64f27a4 to
3d7ad15
Compare
github-actions
bot
removed
the
run_chromatic
github-actions
bot
removed
the
run_chromatic
github-actions
bot
removed
the
run_chromatic
In upcoming PR we will need to fully migrate to using master image for all trails
We need to use this tyo distinguish between the format of the card article and format of the article which holds the card
marjisound
force-pushed
the
gallery-onwards-secondary-container
branch
from
a7892c3 to
fdf516e
Compare
|
Closing this PR in favour of #14894 which follows a different approach |
What does this change?
This PR adds a new component
ScrollableSmallOnwards. This component is used for onwards. Currently as part of this PR, the new component is only used for Gallery articles. But the future plan is to migrate all the rest of articles to use the new design.To implement this component, I followed similar pattern that's done in front container
ScrollableSmallcontainer.Why
This change is a re-design of the onwards container. Currently as part of this PR, the re-design is only applied for the Gallery onwards containers, but the future plan is to do this for all article.
Screenshots
Desktop
Mobile
This PR fixes #14313