Split out styling

guardian · Dec 4, 2024 · c0c13fa · c0c13fa
1 parent e4ea836
commit c0c13fa
Showing 1 changed file with 46 additions and 35 deletions.
diff --git a/dotcom-rendering/src/components/TableBlockComponent.tsx b/dotcom-rendering/src/components/TableBlockComponent.tsx
@@ -5,37 +5,37 @@ import { palette } from '../palette';
 import { logger } from '../server/lib/logging';
 import type { TableBlockElement } from '../types/content';
 
+const tableStyles = css`
+	width: 100%;
+	background: ${palette('--table-block-background')};
+	border-top: 0.0625rem solid ${palette('--table-block-border-top')};
+	color: ${palette('--table-block-text')};
+	border-collapse: inherit;
+`;
+
+const headStyles = css`
+	tr {
+		font-weight: 800;
+		text-align: left;
+	}
+`;
+
+const rowStyles = css`
+	${textSans12};
+	:nth-child(odd) > td {
+		background-color: ${palette('--table-block-stripe')};
+	}
+`;
+
+const cellPadding = css`
+	padding: 0.5rem;
+`;
+
 const tableEmbed = css`
-	.table--football {
-		width: 100%;
-		background: ${palette('--table-block-background')};
-		border-top: 0.0625rem solid ${palette('--table-block-border-top')};
-		color: ${palette('--table-block-text')};
-		border-collapse: inherit;
-		tr:nth-child(odd) > td {
-			background-color: ${palette('--table-block-stripe')};
-		}
-		th {
-			padding: 0.5rem;
-		}
-		td {
-			padding: 0.5rem;
-		}
-		tr {
-			${textSans12};
-		}
-		thead {
-			tr {
-				font-weight: 800;
-				text-align: left;
-			}
-		}
-		tr > th:first-child,
-		td:first-child {
-			color: ${palette('--table-block-text-first-column')};
-		}
+	tr > th:first-child,
+	td:first-child {
+		color: ${palette('--table-block-text-first-column')};
 	}
-	margin-bottom: 16px;
 `;
 
 type Props = {
@@ -46,10 +46,14 @@ const buildElementTree = (node: Node) => {
 	const children = Array.from(node.childNodes).map(buildElementTree);
 	switch (node.nodeName) {
 		case 'TABLE': {
-			return <table className="table--football">{children}</table>;
+			return (
+				<table className="table--football" css={tableStyles}>
+					{children}
+				</table>
+			);
 		}
 		case 'THEAD': {
-			return <thead>{children}</thead>;
+			return <thead css={headStyles}>{children}</thead>;
 		}
 		case 'TBODY': {
 			return <tbody>{children}</tbody>;
@@ -62,17 +66,20 @@ const buildElementTree = (node: Node) => {
 			);
 		}
 		case 'TR': {
-			return <tr>{children}</tr>;
+			return <tr css={rowStyles}>{children}</tr>;
 		}
 		case 'TH': {
-			return <th>{children}</th>;
+			return <th css={cellPadding}>{children}</th>;
 		}
 		case 'TD': {
 			const isMainColumn = (node as HTMLElement).className.includes(
 				'table-column--main',
 			);
 			return (
-				<td style={isMainColumn ? { width: '100%' } : undefined}>
+				<td
+					style={isMainColumn ? { width: '100%' } : undefined}
+					css={cellPadding}
+				>
 					{children}
 				</td>
 			);
@@ -95,7 +102,11 @@ const buildElementTree = (node: Node) => {
 export const TableBlockComponent = ({ element }: Props) => {
 	const fragment = parseHtml(element.html);
 	return (
-		<div css={tableEmbed} data-testid="football-table-embed">
+		<div
+			css={tableEmbed}
+			style={{ marginBottom: '16px' }}
+			data-testid="football-table-embed"
+		>
 			{Array.from(fragment.childNodes).map(buildElementTree)}
 		</div>
 	);