Refactor DottedLines to use CSS not SVG (#1622)

* refactor(DottedLines): CSS not SVG * Add changeset --------- Co-authored-by: James Mockett <[email protected]>
guardian · Aug 5, 2024 · d4e48f9 · d4e48f9
1 parent 32628d3
commit d4e48f9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 48 deletions.
diff --git a/.changeset/tiny-ducks-roll.md b/.changeset/tiny-ducks-roll.md
@@ -0,0 +1,5 @@
+---
+'@guardian/source-development-kitchen': major
+---
+
+Refactor `DottedLines` to render pattern with CSS rather than SVG
diff --git a/libs/@guardian/source-development-kitchen/src/react-components/lines/DottedLines.tsx b/libs/@guardian/source-development-kitchen/src/react-components/lines/DottedLines.tsx
@@ -1,5 +1,5 @@
-import type { SerializedStyles } from '@emotion/react';
-import { breakpoints, neutral } from '@guardian/source/foundations';
+import { css, type SerializedStyles } from '@emotion/react';
+import { breakpoints, palette } from '@guardian/source/foundations';
 import type { LineCount } from './Lines';
 
 const dotRadius = 1;
@@ -8,56 +8,28 @@ const maxWidth = breakpoints.wide;
 
 export const getHeight = (count: LineCount): number => gridSize * count;
 
+const pattern = css`
+	max-width: ${maxWidth}px;
+	background-size: ${gridSize}px ${gridSize}px;
+	background-position: top center;
+	background-image: radial-gradient(
+		currentColor,
+		currentColor ${dotRadius}px,
+		transparent ${dotRadius}px
+	);
+`;
+
 export const DottedLines = ({
 	count = 4,
-	color = neutral[86],
+	color = palette.neutral[86],
 	cssOverrides,
 }: {
 	count?: LineCount;
 	color?: string;
 	cssOverrides?: SerializedStyles | SerializedStyles[];
-}) => {
-	const dots = [];
-	for (let index = 1; index <= count; index++) {
-		dots.push(
-			<circle
-				key={index}
-				fill={color}
-				cx={gridSize / 2}
-				cy={gridSize * (index - 1 / 2)}
-				r={dotRadius}
-			/>,
-		);
-	}
-
-	const height = getHeight(count);
-	const viewBox = `0 0 ${gridSize} ${height}`;
-
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="100%"
-			height={height}
-			viewBox={viewBox}
-			preserveAspectRatio="xMinYMin meet"
-			css={cssOverrides}
-			aria-hidden="true"
-			focusable="false"
-		>
-			<defs>
-				<pattern
-					id="dotted-pattern"
-					viewBox={viewBox}
-					width={gridSize}
-					height={height}
-					patternUnits="userSpaceOnUse"
-					preserveAspectRatio="none"
-				>
-					{dots}
-				</pattern>
-			</defs>
-
-			<rect width={maxWidth} height={height} fill="url(#dotted-pattern)" />
-		</svg>
-	);
-};
+}) => (
+	<div
+		style={{ height: `${getHeight(count)}px`, color }}
+		css={[pattern, cssOverrides]}
+	/>
+);