Merge pull request #14922 from guardian/doml/remove-rounded-corners

Remove rounded corners from Onwards Content

Author: domlander

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

@@ -844,7 +844,6 @@ export const Card = ({
 			format={format}
 			showTopBarDesktop={showTopBarDesktop}
 			showTopBarMobile={showTopBarMobile}
-			isOnwardContent={isOnwardContent}
 			containerPalette={containerPalette}
 		>
 			<CardLink
@@ -1081,10 +1080,6 @@ export const Card = ({
 											imageSize={mediaSize}
 											alt={headlineText}
 											loading={imageLoading}
-											roundedCorners={
-												isOnwardContent &&
-												!isMoreGalleriesOnwardContent
-											}
 											aspectRatio={aspectRatio}
 										/>
 									</div>
@@ -1098,10 +1093,6 @@ export const Card = ({
 									imageSize={mediaSize}
 									alt={media.imageAltText}
 									loading={imageLoading}
-									roundedCorners={
-										isOnwardContent &&
-										!isMoreGalleriesOnwardContent
-									}
 									aspectRatio={aspectRatio}
 								/>
 								{isVideoMainMedia && mainMedia.duration > 0 && (
@@ -1143,10 +1134,6 @@ export const Card = ({
 											imageSize="small"
 											alt={media.imageAltText}
 											loading={imageLoading}
-											roundedCorners={
-												isOnwardContent &&
-												!isMoreGalleriesOnwardContent
-											}
 											aspectRatio="1:1"
 										/>
 									</div>

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source/foundations';
-import { ArticleDesign, type ArticleFormat } from '../../../lib/articleFormat';
+import type { ArticleFormat } from '../../../lib/articleFormat';
 import { palette } from '../../../palette';
 import type { DCRContainerPalette } from '../../../types/front';
 import { ContainerOverrides } from '../../ContainerOverrides';
@@ -11,7 +11,6 @@ type Props = {
 	format: ArticleFormat;
 	showTopBarDesktop: boolean;
 	showTopBarMobile: boolean;
-	isOnwardContent: boolean;
 	containerPalette?: DCRContainerPalette;
 };
 
@@ -93,21 +92,11 @@ const desktopTopBarStyles = css`
 	}
 `;
 
-const onwardContentStyles = css`
-	border-radius: ${space[2]}px;
-	overflow: hidden;
-
-	:hover .media-overlay {
-		border-radius: ${space[2]}px;
-	}
-`;
-
 export const CardWrapper = ({
 	children,
 	format,
 	showTopBarDesktop,
 	showTopBarMobile,
-	isOnwardContent,
 	containerPalette,
 }: Props) => {
 	return (
@@ -119,9 +108,6 @@ export const CardWrapper = ({
 						hoverStyles,
 						showTopBarDesktop && desktopTopBarStyles,
 						showTopBarMobile && mobileTopBarStyles,
-						isOnwardContent &&
-							format.design !== ArticleDesign.Gallery &&
-							onwardContentStyles,
 					]}
 				>
 					{children}

dotcom-rendering/src/components/CardPicture.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { breakpoints, space, until } from '@guardian/source/foundations';
+import { breakpoints, until } from '@guardian/source/foundations';
 import type { ImgHTMLAttributes } from 'react';
 import React from 'react';
 import type { AspectRatio } from '../types/front';
@@ -14,7 +14,6 @@ export type Props = {
 	mainImage: string;
 	loading: Loading;
 	alt?: string;
-	roundedCorners?: boolean;
 	isCircular?: boolean;
 	aspectRatio?: AspectRatio;
 	mobileAspectRatio?: AspectRatio;
@@ -200,12 +199,6 @@ const decideAspectRatioStyles = (aspectRatio?: AspectRatio) => {
 	`;
 };
 
-const borderRadius = css`
-	& > * {
-		border-radius: ${space[2]}px;
-	}
-`;
-
 const circularStyles = css`
 	border-radius: 100%;
 	object-fit: cover;
@@ -227,7 +220,6 @@ export const CardPicture = ({
 	alt,
 	imageSize,
 	loading,
-	roundedCorners,
 	isCircular,
 	aspectRatio = '5:3',
 	mobileAspectRatio,
@@ -251,7 +243,6 @@ export const CardPicture = ({
 				decideAspectRatioStyles(aspectRatio),
 				mobileAspectRatio &&
 					decideMobileAspectRatioStyles(mobileAspectRatio),
-				roundedCorners && borderRadius,
 				isCircular && circularStyles,
 			]}
 		>