From 2989b145aef96987732b77bd6a860b2e0cd54b2d Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Thu, 19 Dec 2024 09:34:58 +0000 Subject: [PATCH] Tighten types --- .../src/components/CardHeadline.tsx | 2 +- .../src/components/FlexibleGeneral.tsx | 14 +++++++------- .../src/components/FlexibleSpecial.tsx | 18 +++++++++--------- dotcom-rendering/src/components/Kicker.tsx | 5 +++-- 4 files changed, 20 insertions(+), 19 deletions(-) diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index 309ef1d1b9..143d76d07e 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -37,7 +37,7 @@ import { } from '../lib/articleFormat'; import { getZIndex } from '../lib/getZIndex'; import { palette } from '../palette'; -import { PodcastSeriesImage } from '../types/tag'; +import type { PodcastSeriesImage } from '../types/tag'; import { Byline } from './Byline'; import { Kicker } from './Kicker'; import { QuoteIcon } from './QuoteIcon'; diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index 0653b1d399..79d4e95a6b 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -88,7 +88,7 @@ type BoostedSplashProperties = { const decideSplashCardProperties = ( boostLevel: BoostLevel, supportingContentLength: number, - isMediaCard: boolean, + isAMediaCard: boolean, ): BoostedSplashProperties => { switch (boostLevel) { // boostedfont sizing @@ -101,7 +101,7 @@ const decideSplashCardProperties = ( mobile: 'medium', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'large', supportingContentAlignment: supportingContentLength >= 4 ? 'horizontal' : 'vertical', @@ -116,7 +116,7 @@ const decideSplashCardProperties = ( mobile: 'large', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: supportingContentLength >= 4 ? 'horizontal' : 'vertical', @@ -130,8 +130,8 @@ const decideSplashCardProperties = ( tablet: 'xlarge', mobile: 'xlarge', }, - imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnDesktop: isAMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -144,8 +144,8 @@ const decideSplashCardProperties = ( tablet: 'xlarge', mobile: 'xxlarge', }, - imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnDesktop: isAMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index a4592bb4ad..c8abe52f67 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -44,7 +44,7 @@ type BoostProperties = { const determineCardProperties = ( boostLevel: BoostLevel, supportingContentLength: number, - isMediaCard: boolean, + isAMediaCard: boolean, ): BoostProperties => { switch (boostLevel) { // The default boost level is equal to no boost. It is the same as the default card layout. @@ -56,7 +56,7 @@ const determineCardProperties = ( mobile: 'medium', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'large', supportingContentAlignment: supportingContentLength >= 3 ? 'horizontal' : 'vertical', @@ -72,7 +72,7 @@ const determineCardProperties = ( mobile: 'large', }, imagePositionOnDesktop: 'right', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: supportingContentLength >= 3 ? 'horizontal' : 'vertical', @@ -86,8 +86,8 @@ const determineCardProperties = ( tablet: 'xlarge', mobile: 'xlarge', }, - imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnDesktop: isAMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -100,8 +100,8 @@ const determineCardProperties = ( tablet: 'xxlarge', mobile: 'xxlarge', }, - imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom', - imagePositionOnMobile: isMediaCard ? 'top' : 'bottom', + imagePositionOnDesktop: isAMediaCard ? 'top' : 'bottom', + imagePositionOnMobile: isAMediaCard ? 'top' : 'bottom', imageSize: 'jumbo', supportingContentAlignment: 'horizontal', liveUpdatesAlignment: 'horizontal', @@ -177,9 +177,9 @@ export const OneCardLayout = ({ const getImagePosition = ( hasTwoOrFewerCards: boolean, - isMediaCard: boolean, + isAMediaCard: boolean, ) => { - if (isMediaCard && !hasTwoOrFewerCards) return 'top'; + if (isAMediaCard && !hasTwoOrFewerCards) return 'top'; if (hasTwoOrFewerCards) return 'left'; return 'bottom'; }; diff --git a/dotcom-rendering/src/components/Kicker.tsx b/dotcom-rendering/src/components/Kicker.tsx index a414f36283..af5b05c57c 100644 --- a/dotcom-rendering/src/components/Kicker.tsx +++ b/dotcom-rendering/src/components/Kicker.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; +import { isUndefined } from '@guardian/libs'; import { space, textSans15, @@ -6,10 +7,10 @@ import { textSansBold15, } from '@guardian/source/foundations'; import { palette } from '../palette'; +import type { PodcastSeriesImage } from '../types/tag'; import { CardPicture } from './CardPicture'; import { Island } from './Island'; import { PulsingDot } from './PulsingDot.importable'; -import { PodcastSeriesImage } from '../types/tag'; type Props = { text: string; @@ -92,7 +93,7 @@ export const Kicker = ({ : 'transparent', }} > - {accentImage?.src && ( + {!isUndefined(accentImage?.src) && (