Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fairground 🎡] Style cards differently if card isFlexSplash #12412

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[Fairground 🎡] Style cards differently if card isFlexSplash #12412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cbae743
Add flex splash property
abeddow91 Sep 19, 2024
b7a6eb0
set flex splash to isFlexSplash
abeddow91 Sep 19, 2024
4f1f5d3
extra padding on outer headline
abeddow91 Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 13 additions & 19 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ export type Props = {
/** Alows the consumer to use a larger font size group for boost styling*/
boostedFontSizes?: boolean;
index?: number;
/** The Splash card in a flexible container gets a different visual treatment to other cards*/
isFlexSplash?: boolean;
};

const starWrapper = (cardHasImage: boolean) => css`
Expand Down Expand Up @@ -197,17 +199,6 @@ const isWithinTwelveHours = (webPublicationDate: string): boolean => {
return timeDiffHours <= 12;
};

const decideHeadlinePosition = (
imageSize?: ImageSizeType,
containerType?: DCRContainerType,
) => {
if (imageSize === 'jumbo' && containerType === 'flexible/special') {
return 'outer';
}

return 'inner';
};

export const Card = ({
linkTo,
format,
Expand Down Expand Up @@ -257,15 +248,14 @@ export const Card = ({
aspectRatio,
boostedFontSizes,
index = 0,
isFlexSplash,
}: Props) => {
const hasSublinks = supportingContent && supportingContent.length > 0;
const sublinkPosition = decideSublinkPosition(
supportingContent,
imagePositionOnDesktop,
supportingContentAlignment,
);
const headlinePosition = decideHeadlinePosition(imageSize, containerType);

const showQuotes = !!showQuotedHeadline;

const isOpinion =
Expand Down Expand Up @@ -369,10 +359,14 @@ export const Card = ({
/* Whilst we migrate to the new container types, we need to check which container we are in. */
const isFlexibleContainer = containerType === 'flexible/special';

const headlinePosition =
isFlexSplash && isFlexibleContainer ? 'outer' : 'inner';

/** Determines the gap of between card components based on card properties */
const getGapSize = (): GapSize => {
if (isOnwardContent) return 'none';
if (hasBackgroundColour) return 'small';
if (isFlexSplash) return 'medium';
if (
isFlexibleContainer &&
(imagePositionOnDesktop === 'left' ||
Expand Down Expand Up @@ -404,7 +398,7 @@ export const Card = ({
);
}
return (
<Hide from="tablet">
<Hide from={isFlexSplash ? 'tablet' : 'desktop'}>
<SupportingContent
supportingContent={supportingContent}
containerPalette={containerPalette}
Expand Down Expand Up @@ -432,7 +426,7 @@ export const Card = ({
{headlinePosition === 'outer' && (
<div
css={css`
padding-bottom: 8px;
padding-bottom: ${space[5]}px;
`}
style={{ backgroundColor: cardBackgroundColour }}
>
Expand Down Expand Up @@ -689,9 +683,7 @@ export const Card = ({
}
imageSize={imageSize}
imageType={media?.type}
shouldHide={
isFlexibleContainer ? false : true
}
shouldHide={isFlexSplash ? false : true}
>
<div
dangerouslySetInnerHTML={{
Expand Down Expand Up @@ -744,7 +736,9 @@ export const Card = ({
)}

{hasSublinks && sublinkPosition === 'inner' && (
<Hide until="tablet">
<Hide
until={isFlexSplash ? 'tablet' : 'desktop'}
>
<SupportingContent
supportingContent={supportingContent}
alignment="vertical"
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/FlexibleSpecial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export const OneCardLayout = ({
kickerText={card.kickerText}
showLivePlayable={card.showLivePlayable}
boostedFontSizes={true}
isFlexSplash={true}
/>
</LI>
</UL>
Expand Down
Loading