Conversation
deedeeh
added
the
maintenance
deedeeh
changed the title
HostedContentHeader component
deedeeh
force-pushed
the
dina/top-bar-component-hosted-content
branch
from
45dd067 to
6ae15a9
Compare
| > | ||
| The Guardian - Back to home | ||
| </span> | ||
| <p css={hostedByStyles}>Hosted by</p> |
There was a problem hiding this comment.
Frontend contains the "hosted by" label as part of the logo anchor tag so I've done the same in here.
| </span> | ||
| <p css={hostedByStyles}>Hosted by</p> | ||
|
|
||
| <SvgGuardianLogo textColor={`${sourcePalette.neutral[100]}`} /> |
There was a problem hiding this comment.
When we create the correct palette for this logo then we might update the Logo.tsx to accept params like the textColor and an optional children which is the <p> and export it to be used in HostedContentHeader.tsx. That might be an option to unnecessary duplication.
| padding: ${space[1]}px 10px; | ||
|
|
||
| @media (min-width: 330px) { | ||
| margin-right: 0.625rem; |
There was a problem hiding this comment.
The hosted by label got stacked when the breakpoint is less than 330px but in Frontend the spacing between the right margin and the logo is less compared to when it's from 330px and above so that's why I added this @media even though I know we use breakpoints from Source.
I added a margin-right as it's the same spacing in the left side but in Frontend the spacing on the right is a bit less which doesn't seem correct to me unless that was intentional from a design view. That could be confirmed when we have a catchup with the designer as definitely there will be a review after we finish the development work.
|
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. |
deedeeh
force-pushed
the
dina/top-bar-component-hosted-content
branch
from
26b8f93 to
b5d2704
Compare
i-hardy
left a comment
i-hardy
left a comment
There was a problem hiding this comment.
This looks great! And the comments are helpful for where we'll need to tweak and expand things once we're further along with design 👍
Thank you Imogen! Yes I've tried to make our lives easier when we have the data. There might be few tweaks in the new PR with the data, such as not overriding the |
2 participants
What does this change?
This PR creates the
HostedContentHeadercomponent to be used by the Hosted Content different layouts.The changes:
HostedContentHeaderHostedArticleLayoutandHostedGalleryLayoutto include the new component.HostedContentHeaderstory for storybook.Tested locally and the UI is almost identical as there are still few things to update after we have design confirmation. There will be other PRs later to complete the
HostedContentHeaderwork when we have the data.Why?
This is part of the work for Hosted Content migration to DCAR.
Screenshots