Remove legacy media meta (#14123)

* Remove meda meta as this is no longer part of the design system and roll out pills to non-beta containers

* Remove media icon from palette and container overrides as this is not used elsewhere.

* Remove beta logic for duration pill on video cards so that only one pill is ever visible on a card

* Show waveform on all audio cards

* Use standard design in standard card story

Author: abeddow91

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

@@ -1565,7 +1565,7 @@ export const WithATinyGap = () => {
 						imagePositionOnDesktop="left"
 						format={{
 							display: ArticleDisplay.Standard,
-							design: ArticleDesign.Gallery,
+							design: ArticleDesign.Standard,
 							theme: Pillar.Sport,
 						}}
 					/>

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

@@ -38,7 +38,6 @@ import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
 import { LatestLinks } from '../LatestLinks.importable';
 import { LoopVideo } from '../LoopVideo.importable';
-import { MediaMeta } from '../MediaMeta';
 import { Pill } from '../Pill';
 import { Slideshow } from '../Slideshow';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
@@ -554,8 +553,7 @@ export const Card = ({
 -	 */
 	const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;
 
-	// Currently pills are only shown within beta containers.
-	const showPill = isBetaContainer && isMediaCardOrNewsletter;
+	const showPill = isMediaCardOrNewsletter;
 
 	const media = getMedia({
 		imageUrl: image?.src,
@@ -799,15 +797,6 @@ export const Card = ({
 							cardHasImage={!!image}
 						/>
 					) : null}
-					{!showPill &&
-						!!mainMedia &&
-						mainMedia.type !== 'Video' &&
-						mainMedia.type !== 'LoopVideo' && (
-							<MediaMeta
-								mediaType={mainMedia.type}
-								hasKicker={!!kickerText}
-							/>
-						)}
 				</div>
 			)}
 
@@ -825,7 +814,7 @@ export const Card = ({
 				 * Waveform for podcasts is absolutely positioned at bottom of
 				 * card, behind everything else
 				 */}
-				{isBetaContainer && mainMedia?.type === 'Audio' && (
+				{mainMedia?.type === 'Audio' && (
 					<div
 						css={waveformWrapper(
 							imagePositionOnMobile,
@@ -938,7 +927,6 @@ export const Card = ({
 												}
 												index={index}
 												duration={
-													isBetaContainer &&
 													isVideoArticle
 														? undefined
 														: media.mainMedia
@@ -1027,28 +1015,26 @@ export const Card = ({
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
 								/>
-								{(isVideoMainMedia ||
-									(isVideoArticle && !isBetaContainer)) &&
-									mainMedia.duration > 0 && (
-										<div
-											css={css`
-												position: absolute;
-												top: ${space[2]}px;
-												right: ${space[2]}px;
-											`}
-										>
-											<Pill
-												content={secondsToDuration(
-													mainMedia.duration,
-												)}
-												icon={
-													<SvgMediaControlsPlay
-														width={18}
-													/>
-												}
-											/>
-										</div>
-									)}
+								{isVideoMainMedia && mainMedia.duration > 0 && (
+									<div
+										css={css`
+											position: absolute;
+											top: ${space[2]}px;
+											right: ${space[2]}px;
+										`}
+									>
+										<Pill
+											content={secondsToDuration(
+												mainMedia.duration,
+											)}
+											icon={
+												<SvgMediaControlsPlay
+													width={18}
+												/>
+											}
+										/>
+									</div>
+								)}
 							</>
 						)}
 						{media.type === 'crossword' && (
@@ -1148,14 +1134,6 @@ export const Card = ({
 											cardHasImage={!!image}
 										/>
 									) : null}
-									{!showPill &&
-										!!mainMedia &&
-										mainMedia.type !== 'Video' && (
-											<MediaMeta
-												mediaType={mainMedia.type}
-												hasKicker={!!kickerText}
-											/>
-										)}
 								</HeadlineWrapper>
 							)}
 

dotcom-rendering/src/components/ContainerOverrides.tsx

@@ -585,11 +585,6 @@ const cardMediaBackgroundLight: ContainerFunction = (containerPalette) =>
 const cardMediaBackgroundDark: ContainerFunction = (containerPalette) =>
 	transparentColour(cardHeadlineDark(containerPalette), 0.1);
 
-const cardMediaIconLight: ContainerFunction = (containerPalette) =>
-	cardBackgroundLight(containerPalette);
-const cardMediaIconDark: ContainerFunction = (containerPalette) =>
-	cardBackgroundDark(containerPalette);
-
 const cardMediaWaveformLight: ContainerFunction = (containerPalette) => {
 	switch (containerPalette) {
 		case 'InvestigationPalette':
@@ -1127,10 +1122,6 @@ const containerColours = {
 		light: cardMediaBackgroundLight,
 		dark: cardMediaBackgroundDark,
 	},
-	'--card-media-icon': {
-		light: cardMediaIconLight,
-		dark: cardMediaIconDark,
-	},
 	'--card-media-waveform': {
 		light: cardMediaWaveformLight,
 		dark: cardMediaWaveformDark,

dotcom-rendering/src/components/MediaMeta.tsx

@@ -2517,11 +2517,6 @@ const cardMediaBackgroundLight: PaletteFunction = () =>
 const cardMediaBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[20];
 
-const cardMediaIconLight: PaletteFunction = (format) =>
-	cardMediaBackgroundLight(format);
-const cardMediaIconDark: PaletteFunction = (format) =>
-	cardMediaBackgroundDark(format);
-
 const cardMediaWaveformLight: PaletteFunction = () => sourcePalette.neutral[86];
 const cardMediaWaveformDark: PaletteFunction = () => sourcePalette.neutral[38];
 
@@ -6280,10 +6275,6 @@ const paletteColours = {
 		light: cardMediaBackgroundLight,
 		dark: cardMediaBackgroundDark,
 	},
-	'--card-media-icon': {
-		light: cardMediaIconLight,
-		dark: cardMediaIconDark,
-	},
 	'--card-media-sublinks-background': {
 		light: cardMediaSublinksBackgroundLight,
 		dark: cardMediaSublinksBackgroundDark,