Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render star rating on highlights card #13104

Merged
merged 4 commits into from
Jan 9, 2025
+38 −0
Merged

Render star rating on highlights card #13104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
adfee6a
Render star rating on highlights card
abeddow91 Jan 8, 2025
b2a6425
Remove double negation
abeddow91 Jan 8, 2025
d7b7152
Use isundefined from libs
abeddow91 Jan 8, 2025
d1eb110
reinstate highlights checks after testing
abeddow91 Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,16 @@ export const WithLiveKicker: Story = {
parameters: {},
name: 'With Live Kicker',
};

export const WithStarRating: Story = {
args: {
format: {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: Pillar.Culture,
},
starRating: 4,
},
parameters: {},
name: 'With Star Rating',
};
24 changes: 24 additions & 0 deletions dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { css } from '@emotion/react';
import { isUndefined } from '@guardian/libs';
import { between, from, until } from '@guardian/source/foundations';
import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat';
import { isMediaCard } from '../../lib/cardHelpers';
import { palette } from '../../palette';
import type { StarRating as Rating } from '../../types/content';
import type { DCRFrontImage } from '../../types/front';
import type { MainMedia } from '../../types/mainMedia';
import { Avatar } from '../Avatar';
Expand All @@ -12,6 +14,7 @@ import type { Loading } from '../CardPicture';
import { CardPicture } from '../CardPicture';
import { FormatBoundary } from '../FormatBoundary';
import { Icon } from '../MediaMeta';
import { StarRating } from '../StarRating/StarRating';

export type HighlightsCardProps = {
linkTo: string;
Expand All @@ -26,6 +29,7 @@ export type HighlightsCardProps = {
dataLinkName: string;
byline?: string;
isExternalLink: boolean;
starRating?: Rating;
};

const gridContainer = css`
Expand All @@ -37,6 +41,7 @@ const gridContainer = css`
gap: 8px;
grid-template-areas:
'headline headline'
'rating rating'
'media-icon image';

/* Applied word-break: break-word to prevent text overflow
Expand Down Expand Up @@ -121,6 +126,18 @@ const hoverStyles = css`
}
`;

const starWrapper = css`
background-color: ${palette('--star-rating-background')};
color: ${palette('--star-rating-fill')};
width: fit-content;
height: fit-content;
grid-area: rating;
${from.desktop} {
grid-area: media-icon;
align-self: flex-end;
}
`;

export const HighlightsCard = ({
linkTo,
format,
Expand All @@ -134,6 +151,7 @@ export const HighlightsCard = ({
dataLinkName,
byline,
isExternalLink,
starRating,
}: HighlightsCardProps) => {
const showMediaIcon = isMediaCard(format);

Expand Down Expand Up @@ -169,6 +187,12 @@ export const HighlightsCard = ({
/>
</div>

{!isUndefined(starRating) ? (
<div css={starWrapper}>
<StarRating rating={starRating} size="small" />
</div>
) : null}

{!!mainMedia && showMediaIcon && (
<div css={mediaIcon}>
<Icon mediaType={mainMedia.type} />
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/ScrollableHighlights.importable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ export const ScrollableHighlights = ({ trails }: Props) => {
isExternalLink={trail.isExternalLink}
showQuotedHeadline={trail.showQuotedHeadline}
mainMedia={trail.mainMedia}
starRating={trail.starRating}
/>
</li>
);
Expand Down
Loading