Styling to indicate which items have been viewed

guardian · Feb 24, 2025 · c98d263 · c98d263
1 parent fbcb657
commit c98d263
Showing 1 changed file with 34 additions and 20 deletions.
diff --git a/newswires/client/src/WireItemList.tsx b/newswires/client/src/WireItemList.tsx
@@ -1,8 +1,10 @@
 import {
 	EuiBadge,
 	EuiButton,
+	EuiScreenReaderOnly,
 	EuiSpacer,
 	EuiText,
+	EuiTextBlockTruncate,
 	useEuiBackgroundColor,
 	useEuiTheme,
 } from '@elastic/eui';
@@ -16,18 +18,6 @@ import { Link } from './Link.tsx';
 import type { WireData } from './sharedTypes.ts';
 import { getSupplierInfo } from './suppliers.ts';
 
-const fadeOutBackground = css`
-	animation: fadeOut ease-out 15s;
-	@keyframes fadeOut {
-		from {
-			background-color: aliceblue;
-		}
-		to {
-			background-color: white;
-		}
-	}
-`;
-
 export const WireItemList = ({
 	wires,
 	totalCount,
@@ -130,11 +120,17 @@ function MaybeSecondaryCardContent({
 	const maybeBodyTextPreview = bodyText
 		? sanitizeHtml(bodyText, { allowedTags: [], allowedAttributes: {} }).slice(
 				0,
-				100,
+				300,
 			)
 		: undefined;
 	if (maybeBodyTextPreview && maybeBodyTextPreview !== headline) {
-		return <p>{maybeBodyTextPreview}</p>;
+		return (
+			<p>
+				<EuiTextBlockTruncate lines={2}>
+					{maybeBodyTextPreview}
+				</EuiTextBlockTruncate>
+			</p>
+		);
 	}
 	return null;
 }
@@ -145,7 +141,6 @@ const WirePreviewCard = ({
 	content,
 	highlight,
 	selected,
-	isFromRefresh,
 }: {
 	id: number;
 	supplier: string;
@@ -154,6 +149,7 @@ const WirePreviewCard = ({
 	selected: boolean;
 	isFromRefresh: boolean;
 }) => {
+	const { viewedItemIds } = useSearch();
 	const ref = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
@@ -166,7 +162,9 @@ const WirePreviewCard = ({
 	}, [selected]);
 
 	const theme = useEuiTheme();
-	const accentBgColor = useEuiBackgroundColor('accent');
+	const accentBgColor = useEuiBackgroundColor('subdued', {
+		method: 'transparent',
+	});
 
 	const supplierInfo = getSupplierInfo(supplier);
 
@@ -175,6 +173,8 @@ const WirePreviewCard = ({
 
 	const mainHeadingContent = decideMainHeadingContent(content);
 
+	const hasBeenViewed = viewedItemIds.includes(id.toString());
+
 	const cardGrid = css`
 		display: grid;
 		gap: 0.5rem;
@@ -201,8 +201,7 @@ const WirePreviewCard = ({
 						padding: 0.5rem;
 						box-sizing: content-box;
 						color: ${theme.euiTheme.colors.text};
-						background-color: ${selected ? accentBgColor : 'inherit'};
-						${isFromRefresh ? fadeOutBackground : ''}
+						background-color: ${hasBeenViewed ? accentBgColor : 'inherit'};
 
 						& h3 {
 							grid-area: title;
@@ -212,11 +211,18 @@ const WirePreviewCard = ({
 			>
 				<h3
 					css={css`
-						font-weight: ${theme.euiTheme.font.weight.medium};
+						font-weight: ${hasBeenViewed
+							? theme.euiTheme.font.weight.regular
+							: theme.euiTheme.font.weight.medium};
 					`}
 				>
 					{mainHeadingContent}
 				</h3>
+				{hasBeenViewed && (
+					<EuiScreenReaderOnly>
+						<h4>viewed</h4>
+					</EuiScreenReaderOnly>
+				)}
 				<div
 					css={css`
 						grid-area: meta;
@@ -232,18 +238,26 @@ const WirePreviewCard = ({
 										key={part}
 										css={css`
 											padding-left: 5px;
+											font-weight: ${hasBeenViewed
+												? theme.euiTheme.font.weight.regular
+												: theme.euiTheme.font.weight.medium};
 										`}
 									>
 										{part}
 									</EuiText>
 								))
 						: ''}
 					<EuiSpacer size="xs" />
-					<EuiBadge color={supplierColour}>{supplierLabel}</EuiBadge>
+					<EuiBadge color={hasBeenViewed ? 'subdued' : supplierColour}>
+						{supplierLabel}
+					</EuiBadge>
 				</div>
 				<div
 					css={css`
 						grid-area: content;
+						font-weight: ${hasBeenViewed
+							? theme.euiTheme.font.weight.light
+							: theme.euiTheme.font.weight.regular};
 					`}
 				>
 					<MaybeSecondaryCardContent {...content} highlight={highlight} />