Conversation
deedeeh
added
Commercial 💰
maintenance
deedeeh
changed the title
HostedArticleLayoutArticleBody in HostedArticleLayout
deedeeh
force-pushed
the
dina/include-article-body-in-hosted-article
branch
from
437bf97 to
634c217
Compare
|
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. |
cemms1
left a comment
cemms1
left a comment
There was a problem hiding this comment.
Looks great! Left a few minor comments but nothing blocking ✨
| const isInteractiveContent = | ||
| format.design === ArticleDesign.Interactive || | ||
| format.design === ArticleDesign.Crossword; | ||
| const isHostedContent = format.design === ArticleDesign.HostedArticle; |
There was a problem hiding this comment.
Maybe we should include the other hosted types in here too? Even though they won't ever actually render the ArticleBody, it would be better to be thorough
| `; | ||
|
|
||
| const hostedContentH2Styles = (design: ArticleDesign) => css` | ||
| ${design === ArticleDesign.HostedArticle && |
There was a problem hiding this comment.
Maybe we could make this pure CSS rather than a function since we already have the name of the styles in the function name, hostedContentH2Styles. We can conditionally render these styles if it is hosted content
So instead of
<div css=[hostedContentH2Styles(design)] >...we could do the following:
<div css=[isHostedContent && hostedContentH2Styles] >...| <Caption | ||
| captionText={mainMediaCaptionText} | ||
| format={format} | ||
| standfirst={frontendData.standfirst} | ||
| isMainMedia={true} |
There was a problem hiding this comment.
Logically it feels strange to have the caption for the main media so far down in the DOM. Maybe this could go above the article body?
2 participants
What does this change?
This PR adds the
ArticleBodycomponent toHostedArticleLayoutto populate the hosted content article data. I also changed the location of onwards content in the file to follow the grid of being centred untilleftColwhere we have it on the right column.There will be follow up work related to the styling e.g. links and drop cap once we have confirmation on the designs.
Why?
Hosted content migration to DCAR.
Screenshots
Mobile
Tablet
Desktop
LeftCol