diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 99f99755bc..b851476adf 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -37,6 +37,7 @@ import { CardPicture } from '../CardPicture'; import { Island } from '../Island'; import { LatestLinks } from '../LatestLinks.importable'; import { MediaDuration } from '../MediaDuration'; +import { MediaMeta } from '../MediaMeta'; import { Pill } from '../Pill'; import { Slideshow } from '../Slideshow'; import { SlideshowCarousel } from '../SlideshowCarousel.importable'; @@ -454,9 +455,14 @@ export const Card = ({ ); } - // Check media type to determine if we should show a pill or media icon + /** + * Check media type to determine if pill, or article metadata & icon shown. + * Currently pills are only shown within beta containers. + */ const showPill = - mainMedia?.type === 'Audio' || mainMedia?.type === 'Gallery'; + isBetaContainer && + mainMedia && + (mainMedia.type === 'Audio' || mainMedia.type === 'Gallery'); const media = getMedia({ imageUrl: image?.src, @@ -652,6 +658,12 @@ export const Card = ({ cardHasImage={!!image} /> ) : null} + {!!mainMedia && mainMedia.type !== 'Video' && !showPill && ( + + )} )} @@ -893,6 +905,14 @@ export const Card = ({ cardHasImage={!!image} /> ) : null} + {!!mainMedia && + mainMedia.type !== 'Video' && + !showPill && ( + + )} )}