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

Use aspect ratio for new containers #12897

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

Use aspect ratio for new containers #12897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e26db98
Add aspect ratio to model
Georges-GNM Nov 19, 2024
c860f49
Merge branch 'main' into gl/aspect-ratio
Georges-GNM Nov 20, 2024
e00fdc9
Specify aspect ratio as optional
Georges-GNM Nov 20, 2024
b2d4182
replace AspectRatio type previously from CardPicture with the one def…
Georges-GNM Nov 20, 2024
65b1bd1
Pass aspect ratio to flex general
Georges-GNM Nov 21, 2024
2dc0a1a
Specify aspect ratio in flex gen stories
Georges-GNM Nov 26, 2024
01c5d88
Provide a fallback aspect ratio to avoid it being undefined
Georges-GNM Nov 26, 2024
66dc4f5
Pass aspect ratio to flex special
Georges-GNM Nov 26, 2024
88a3cbf
Pass aspect ratio to scrollable feature
Georges-GNM Nov 26, 2024
4a009b9
Pass aspect ratio to scrollable medium
Georges-GNM Nov 26, 2024
cd287d9
Pass aspect ratio to scrollable small
Georges-GNM Nov 26, 2024
81835bc
Pass aspect ratio to static feature 2
Georges-GNM Nov 26, 2024
80880ad
Pass aspect ratio to static medium 4
Georges-GNM Nov 26, 2024
9a16eb8
Merge branch 'main' into gl/use-aspect-ratio-prop
Georges-GNM Dec 2, 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
10 changes: 10 additions & 0 deletions dotcom-rendering/src/components/DecideContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { ImgHTMLAttributes } from 'react';
import type {
AspectRatio,
DCRContainerPalette,
DCRContainerType,
DCRFrontCard,
Expand Down Expand Up @@ -41,6 +42,7 @@ type Props = {
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
aspectRatio: AspectRatio;
};

export const DecideContainer = ({
Expand All @@ -51,6 +53,7 @@ export const DecideContainer = ({
showAge,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: Props) => {
// If you add a new container type which contains an MPU, you must also add it to
switch (containerType) {
Expand Down Expand Up @@ -242,6 +245,7 @@ export const DecideContainer = ({
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
);
case 'flexible/general':
Expand All @@ -252,6 +256,7 @@ export const DecideContainer = ({
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
);
case 'scrollable/small':
Expand All @@ -264,6 +269,7 @@ export const DecideContainer = ({
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
/>
</Island>
);
Expand All @@ -277,6 +283,7 @@ export const DecideContainer = ({
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
/>
</Island>
);
Expand All @@ -288,6 +295,7 @@ export const DecideContainer = ({
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
);
case 'scrollable/feature':
Expand All @@ -298,6 +306,7 @@ export const DecideContainer = ({
imageLoading={imageLoading}
containerPalette={containerPalette}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
/>
</Island>
);
Expand All @@ -308,6 +317,7 @@ export const DecideContainer = ({
containerPalette={containerPalette}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
);
default:
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ const meta = {
showAge: true,
absoluteServerTimes: true,
imageLoading: 'eager',
aspectRatio: '5:4',
},
render: ({ frontSectionTitle, ...args }) => (
<FrontSection
Expand Down
18 changes: 15 additions & 3 deletions dotcom-rendering/src/components/FlexibleGeneral.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { palette } from '../palette';
import type { BoostLevel } from '../types/content';
import type {
AspectRatio,
DCRContainerPalette,
DCRFrontCard,
DCRGroupedTrails,
Expand All @@ -24,6 +25,7 @@ type Props = {
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
aspectRatio: AspectRatio;
};

type RowLayout = 'oneCard' | 'oneCardBoosted' | 'twoCard';
Expand Down Expand Up @@ -155,12 +157,14 @@ export const SplashCardLayout = ({
showAge,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: {
cards: DCRFrontCard[];
imageLoading: Loading;
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
aspectRatio: AspectRatio;
}) => {
const card = cards[0];
if (!card) return null;
Expand Down Expand Up @@ -202,7 +206,7 @@ export const SplashCardLayout = ({
: supportingContentAlignment
}
imageLoading={imageLoading}
aspectRatio="5:4"
aspectRatio={aspectRatio}
kickerText={card.kickerText}
showLivePlayable={card.showLivePlayable}
liveUpdatesAlignment={liveUpdatesAlignment}
Expand Down Expand Up @@ -262,12 +266,14 @@ export const BoostedCardLayout = ({
showAge,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: {
cards: DCRFrontCard[];
imageLoading: Loading;
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
aspectRatio: AspectRatio;
}) => {
const card = cards[0];
if (!card) return null;
Expand Down Expand Up @@ -302,7 +308,7 @@ export const BoostedCardLayout = ({
: supportingContentAlignment
}
imageLoading={imageLoading}
aspectRatio="5:4"
aspectRatio={aspectRatio}
kickerText={card.kickerText}
showLivePlayable={card.showLivePlayable}
liveUpdatesAlignment="horizontal"
Expand All @@ -323,6 +329,7 @@ export const StandardCardLayout = ({
showImage = true,
imageLoading,
isFirstRow,
aspectRatio,
}: {
cards: DCRFrontCard[];
imageLoading: Loading;
Expand All @@ -331,6 +338,7 @@ export const StandardCardLayout = ({
showAge?: boolean;
absoluteServerTimes: boolean;
showImage?: boolean;
aspectRatio: AspectRatio;
}) => {
if (cards.length === 0) return null;

Expand Down Expand Up @@ -370,7 +378,7 @@ export const StandardCardLayout = ({
supportingContentAlignment="vertical"
supportingContentPosition="outer"
imageSize={'medium'}
aspectRatio="5:4"
aspectRatio={aspectRatio}
kickerText={card.kickerText}
showLivePlayable={false}
showTopBarDesktop={false}
Expand Down Expand Up @@ -400,6 +408,7 @@ export const FlexibleGeneral = ({
showAge,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: Props) => {
const splash = [...groupedTrails.splash].slice(0, 1);
const cards = [...groupedTrails.standard].slice(0, 8);
Expand All @@ -414,6 +423,7 @@ export const FlexibleGeneral = ({
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
)}

Expand All @@ -427,6 +437,7 @@ export const FlexibleGeneral = ({
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
);

Expand All @@ -441,6 +452,7 @@ export const FlexibleGeneral = ({
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
isFirstRow={i === 0}
aspectRatio={aspectRatio}
/>
);
}
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const meta = {
showAge: true,
absoluteServerTimes: true,
imageLoading: 'eager',
aspectRatio: '5:4',
},
render: (args) => (
<FrontSection
Expand Down
14 changes: 12 additions & 2 deletions dotcom-rendering/src/components/FlexibleSpecial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { BoostLevel } from '../types/content';
import type {
AspectRatio,
DCRContainerPalette,
DCRFrontCard,
DCRGroupedTrails,
Expand All @@ -22,6 +23,7 @@ type Props = {
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
aspectRatio: AspectRatio;
};

type BoostProperties = {
Expand Down Expand Up @@ -110,12 +112,14 @@ export const OneCardLayout = ({
showAge,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: {
cards: DCRFrontCard[];
imageLoading: Loading;
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
aspectRatio: AspectRatio;
}) => {
const card = cards[0];
if (!card) return null;
Expand Down Expand Up @@ -149,7 +153,7 @@ export const OneCardLayout = ({
supportingContent={card.supportingContent}
supportingContentAlignment={supportingContentAlignment}
imageLoading={imageLoading}
aspectRatio="5:4"
aspectRatio={aspectRatio}
kickerText={card.kickerText}
showLivePlayable={card.showLivePlayable}
liveUpdatesAlignment={liveUpdatesAlignment}
Expand All @@ -170,13 +174,15 @@ const TwoCardOrFourCardLayout = ({
absoluteServerTimes,
showImage = true,
imageLoading,
aspectRatio,
}: {
cards: DCRFrontCard[];
imageLoading: Loading;
containerPalette?: DCRContainerPalette;
showAge?: boolean;
absoluteServerTimes: boolean;
showImage?: boolean;
aspectRatio: AspectRatio;
}) => {
if (cards.length === 0) return null;
const hasTwoOrFewerCards = cards.length <= 2;
Expand Down Expand Up @@ -210,7 +216,7 @@ const TwoCardOrFourCardLayout = ({
/* we don't want to support sublinks on standard cards here so we hard code to undefined */
supportingContent={undefined}
imageSize={'medium'}
aspectRatio="5:4"
aspectRatio={aspectRatio}
kickerText={card.kickerText}
showLivePlayable={false}
showTopBarDesktop={false}
Expand All @@ -229,6 +235,7 @@ export const FlexibleSpecial = ({
showAge,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: Props) => {
const snaps = [...groupedTrails.snap].slice(0, 1);
const splash = [...groupedTrails.standard].slice(0, 1);
Expand All @@ -242,20 +249,23 @@ export const FlexibleSpecial = ({
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
<OneCardLayout
cards={splash}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
<TwoCardOrFourCardLayout
cards={cards}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
/>
</>
);
Expand Down
10 changes: 8 additions & 2 deletions dotcom-rendering/src/components/ScrollableFeature.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { ArticleDesign } from '../lib/articleFormat';
import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
import type {
AspectRatio,
DCRContainerPalette,
DCRFrontCard,
} from '../types/front';
import { FeatureCard } from './FeatureCard';
import { ScrollableCarousel } from './ScrollableCarousel';

Expand All @@ -8,6 +12,7 @@ type Props = {
containerPalette?: DCRContainerPalette;
absoluteServerTimes: boolean;
imageLoading: 'lazy' | 'eager';
aspectRatio: AspectRatio;
};

/**
Expand All @@ -22,6 +27,7 @@ export const ScrollableFeature = ({
containerPalette,
absoluteServerTimes,
imageLoading,
aspectRatio,
}: Props) => {
return (
<ScrollableCarousel
Expand Down Expand Up @@ -58,7 +64,7 @@ export const ScrollableFeature = ({
containerPalette={containerPalette}
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio="4:5"
aspectRatio={aspectRatio}
imageSize="feature"
headlineSizes={{
desktop: 'xsmall',
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/ScrollableFeature.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const meta = {
containerPalette: undefined,
absoluteServerTimes: true,
imageLoading: 'eager',
aspectRatio: '4:5',
},
render: (args) => (
<FrontSection
Expand Down
5 changes: 4 additions & 1 deletion dotcom-rendering/src/components/ScrollableMedium.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type {
AspectRatio,
DCRContainerPalette,
DCRContainerType,
DCRFrontCard,
Expand All @@ -13,6 +14,7 @@ type Props = {
absoluteServerTimes?: boolean;
imageLoading: 'lazy' | 'eager';
containerType: DCRContainerType;
aspectRatio: AspectRatio;
};

/**
Expand All @@ -29,6 +31,7 @@ export const ScrollableMedium = ({
absoluteServerTimes,
imageLoading,
showAge,
aspectRatio,
}: Props) => {
return (
<ScrollableCarousel
Expand All @@ -55,7 +58,7 @@ export const ScrollableMedium = ({
imageSize="medium"
trailText={undefined} // unsupported
supportingContent={undefined} // unsupported
aspectRatio="5:4"
aspectRatio={aspectRatio}
kickerText={trail.kickerText}
showLivePlayable={trail.showLivePlayable}
showTopBarDesktop={false}
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/ScrollableMedium.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const meta = {
absoluteServerTimes: true,
imageLoading: 'eager',
containerType: 'scrollable/medium',
aspectRatio: '5:4',
},
render: (args) => (
<FrontSection
Expand Down
Loading
Loading