Add aspect ratio to model (#12878)

* Add aspect ratio to model

* Specify aspect ratio as optional

* replace AspectRatio type previously from CardPicture with the one defined in types/front

dotcom-rendering/src/components/Card/Card.tsx

@@ -14,6 +14,7 @@ import { palette } from '../../palette';
 import type { Branding } from '../../types/branding';
 import type { StarRating as Rating } from '../../types/content';
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRContainerType,
 	DCRFrontImage,
@@ -26,7 +27,7 @@ import type { OnwardsSource } from '../../types/onwards';
 import { Avatar } from '../Avatar';
 import { CardCommentCount } from '../CardCommentCount.importable';
 import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
-import type { AspectRatio, Loading } from '../CardPicture';
+import type { Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
 import { LatestLinks } from '../LatestLinks.importable';

dotcom-rendering/src/components/CardPicture.tsx

@@ -2,12 +2,12 @@ import { css } from '@emotion/react';
 import { breakpoints, space } from '@guardian/source/foundations';
 import type { ImgHTMLAttributes } from 'react';
 import React from 'react';
+import type { AspectRatio } from '../types/front';
 import type { ImageSizeType } from './Card/components/ImageWrapper';
 import type { ImageWidthType } from './Picture';
 import { generateSources, getFallbackSource } from './Picture';
 
 export type Loading = NonNullable<ImgHTMLAttributes<unknown>['loading']>;
-export type AspectRatio = '5:3' | '5:4' | '4:5';
 
 type Props = {
 	imageSize: ImageSizeType;

dotcom-rendering/src/components/FeatureCard.tsx

@@ -7,6 +7,7 @@ import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../lib/useCommentCount';
 import { palette } from '../palette';
 import type { StarRating as Rating } from '../types/content';
 import type {
+	AspectRatio,
 	DCRContainerPalette,
 	DCRFrontImage,
 	DCRSupportingContent,
@@ -22,7 +23,7 @@ import type {
 import { TrailText } from './Card/components/TrailText';
 import { CardCommentCount } from './CardCommentCount.importable';
 import { CardHeadline, type ResponsiveFontSize } from './CardHeadline';
-import type { AspectRatio, Loading } from './CardPicture';
+import type { Loading } from './CardPicture';
 import { CardPicture } from './CardPicture';
 import { ContainerOverrides } from './ContainerOverrides';
 import { FormatBoundary } from './FormatBoundary';

dotcom-rendering/src/components/MaintainAspectRatio.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { AspectRatio } from './CardPicture';
+import type { AspectRatio } from '../types/front';
 
 type Props = {
 	height: number;

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx

@@ -3,12 +3,12 @@ import type { ConsentState } from '@guardian/libs';
 import { useCallback, useState } from 'react';
 import type { ArticleFormat } from '../../lib/articleFormat';
 import type { AdTargeting } from '../../types/commercial';
+import type { AspectRatio } from '../../types/front';
 import type { RenderingTarget } from '../../types/renderingTarget';
 import type {
 	ImagePositionType,
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
-import type { AspectRatio } from '../CardPicture';
 import { MaintainAspectRatio } from '../MaintainAspectRatio';
 import type { VideoCategory } from './YoutubeAtomOverlay';
 import { YoutubeAtomOverlay } from './YoutubeAtomOverlay';

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx

@@ -10,12 +10,12 @@ import {
 } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../../lib/articleFormat';
 import { palette } from '../../palette';
+import type { AspectRatio } from '../../types/front';
 import type {
 	ImagePositionType,
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
 import { PlayIcon } from '../Card/components/PlayIcon';
-import type { AspectRatio } from '../CardPicture';
 import { FormatBoundary } from '../FormatBoundary';
 import { Kicker } from '../Kicker';
 import { secondsToDuration } from '../MediaDuration';

dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx

@@ -4,12 +4,12 @@ import type { ArticleFormat } from '../lib/articleFormat';
 import { useAB } from '../lib/useAB';
 import { useAdTargeting } from '../lib/useAdTargeting';
 import type { AdTargeting } from '../types/commercial';
+import type { AspectRatio } from '../types/front';
 import { Caption } from './Caption';
 import type {
 	ImagePositionType,
 	ImageSizeType,
 } from './Card/components/ImageWrapper';
-import type { AspectRatio } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import { ophanTrackerApps, ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';

dotcom-rendering/src/model/enhanceCollections.ts

@@ -129,6 +129,7 @@ export const enhanceCollections = ({
 			},
 			canShowMore: hasMore && !collection.config.hideShowMore,
 			targetedTerritory: collection.targetedTerritory,
+			aspectRatio: collection.config.aspectRatio,
 		};
 	});
 };

dotcom-rendering/src/model/front-schema.json

@@ -2779,6 +2779,9 @@
                                     },
                                     "platform": {
                                         "type": "string"
+                                    },
+                                    "aspectRatio": {
+                                        "$ref": "#/definitions/AspectRatio"
                                     }
                                 },
                                 "required": [
@@ -3262,6 +3265,15 @@
             ],
             "type": "string"
         },
+        "AspectRatio": {
+            "enum": [
+                "1:1",
+                "4:5",
+                "5:3",
+                "5:4"
+            ],
+            "type": "string"
+        },
         "Territory": {
             "description": "List of territories that can be targetted against.",
             "enum": [

dotcom-rendering/src/types/front.ts

@@ -366,6 +366,8 @@ export type DCRSnapType = {
 	embedJs?: string;
 };
 
+export type AspectRatio = '5:3' | '5:4' | '4:5' | '1:1';
+
 type FECollectionConfigType = {
 	displayName: string;
 	metadata?: { type: FEContainerMetadata }[];
@@ -383,6 +385,7 @@ type FECollectionConfigType = {
 	showTimestamps: boolean;
 	hideShowMore: boolean;
 	platform: string;
+	aspectRatio?: AspectRatio;
 };
 
 export type FECollectionType = {
@@ -431,6 +434,7 @@ export type DCRCollectionType = {
 	canShowMore?: boolean;
 	collectionBranding?: CollectionBranding;
 	targetedTerritory?: Territory;
+	aspectRatio?: AspectRatio;
 };
 
 export type DCRGroupedTrails = {