Skip to content

Commit cdf3568

Browse files
Georges-GNMGeorges-GNM
committed
some tweaks from feedback and set up data pipeline
1 parent e727d5c commit cdf3568

File tree

8 files changed

+1059
-96
lines changed

8 files changed

+1059
-96
lines changed

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

Lines changed: 54 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ export type Props = {
163163
headlinePosition?: 'inner' | 'outer';
164164
/** Feature flag for the labs redesign work */
165165
showLabsRedesign?: boolean;
166+
SCStyle?: boolean;
166167
};
167168

168169
const starWrapper = (cardHasImage: boolean) => css`
@@ -420,7 +421,10 @@ export const Card = ({
420421
headlinePosition = 'inner',
421422
showLabsRedesign = false,
422423
subtitleSize = 'small',
424+
SCStyle = false,
423425
}: Props) => {
426+
console.log('article headline, mainMedia:', headlineText, mainMedia);
427+
424428
const hasSublinks = supportingContent && supportingContent.length > 0;
425429
const sublinkPosition = decideSublinkPosition(
426430
supportingContent,
@@ -704,6 +708,8 @@ export const Card = ({
704708
if (!hasSublinks) return null;
705709
if (sublinkPosition === 'none') return null;
706710

711+
console.log('supportingContent:', supportingContent);
712+
707713
const Sublinks = () => (
708714
<SupportingContent
709715
supportingContent={supportingContent}
@@ -725,11 +731,17 @@ export const Card = ({
725731
);
726732

727733
if (sublinkPosition === 'outer') {
728-
return <Sublinks />;
734+
return (
735+
<>
736+
<div>test </div>
737+
<Sublinks />
738+
</>
739+
);
729740
}
730741

731742
return (
732743
<Hide from={isFlexSplash ? 'desktop' : 'tablet'}>
744+
<div>check</div>
733745
<Sublinks />
734746
</Hide>
735747
);
@@ -748,6 +760,7 @@ export const Card = ({
748760
containerPalette={containerPalette}
749761
isDynamo={isDynamo}
750762
fillBackgroundOnMobile={isFlexSplash}
763+
SCStyle={SCStyle}
751764
/>
752765
</Hide>
753766
);
@@ -1171,44 +1184,46 @@ export const Card = ({
11711184
flex-grow: 1;
11721185
`}
11731186
>
1174-
{headlinePosition === 'inner' && (
1175-
<HeadlineWrapper>
1176-
<CardHeadline
1177-
headlineText={headlineText}
1178-
format={format}
1179-
fontSizes={headlineSizes}
1180-
showQuotes={showQuotes}
1181-
kickerText={
1182-
format.design ===
1183-
ArticleDesign.LiveBlog &&
1184-
!kickerText
1185-
? 'Live'
1186-
: kickerText
1187-
}
1188-
showPulsingDot={
1189-
format.design ===
1190-
ArticleDesign.LiveBlog ||
1191-
showPulsingDot
1192-
}
1193-
byline={byline}
1194-
showByline={showByline}
1195-
isExternalLink={isExternalLink}
1196-
kickerImage={
1197-
showKickerImage &&
1198-
media?.type === 'podcast'
1199-
? media.podcastImage
1200-
: undefined
1201-
}
1202-
showLabsRedesign={showLabsRedesign}
1203-
/>
1204-
{!isUndefined(starRating) ? (
1205-
<StarRatingComponent
1206-
rating={starRating}
1207-
cardHasImage={!!image}
1208-
/>
1209-
) : null}
1210-
</HeadlineWrapper>
1211-
)}
1187+
{SCStyle && isFlexSplash
1188+
? null
1189+
: headlinePosition === 'inner' && (
1190+
<HeadlineWrapper>
1191+
<CardHeadline
1192+
headlineText={headlineText}
1193+
format={format}
1194+
fontSizes={headlineSizes}
1195+
showQuotes={showQuotes}
1196+
kickerText={
1197+
format.design ===
1198+
ArticleDesign.LiveBlog &&
1199+
!kickerText
1200+
? 'Live'
1201+
: kickerText
1202+
}
1203+
showPulsingDot={
1204+
format.design ===
1205+
ArticleDesign.LiveBlog ||
1206+
showPulsingDot
1207+
}
1208+
byline={byline}
1209+
showByline={showByline}
1210+
isExternalLink={isExternalLink}
1211+
kickerImage={
1212+
showKickerImage &&
1213+
media?.type === 'podcast'
1214+
? media.podcastImage
1215+
: undefined
1216+
}
1217+
showLabsRedesign={showLabsRedesign}
1218+
/>
1219+
{!isUndefined(starRating) ? (
1220+
<StarRatingComponent
1221+
rating={starRating}
1222+
cardHasImage={!!image}
1223+
/>
1224+
) : null}
1225+
</HeadlineWrapper>
1226+
)}
12121227

12131228
{!!trailText && shouldShowTrailText && (
12141229
<TrailText

‎dotcom-rendering/src/components/FlexibleGeneral.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,7 @@ const SplashCardLayout = ({
362362
subtitleSize={subtitleSize}
363363
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
364364
showLabsRedesign={showLabsRedesign}
365+
SCStyle={SCStyle}
365366
/>
366367
</LI>
367368
</UL>

‎dotcom-rendering/src/components/StorylineSection.tsx‎

Lines changed: 81 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { css } from '@emotion/react';
2-
import { between, from, space, until } from '@guardian/source/foundations';
2+
import {
3+
between,
4+
from,
5+
space,
6+
textSans14,
7+
textSans17,
8+
until,
9+
} from '@guardian/source/foundations';
310
import { type EditionId, isNetworkFront } from '../lib/edition';
411
import { palette as schemePalette } from '../palette';
512
import type { CollectionBranding } from '../types/branding';
@@ -15,6 +22,8 @@ import { FrontPagination } from './FrontPagination';
1522
import { FrontSectionTitle } from './FrontSectionTitle';
1623
import { ShowHideButton } from './ShowHideButton';
1724
import { Treats } from './Treats';
25+
import { Footer } from './ExpandableAtom/Footer';
26+
import { submitComponentEvent } from '../client/ophan/ophan';
1827

1928
type Props = {
2029
/** This text will be used as the h2 shown in the left column for the section */
@@ -86,6 +95,8 @@ type Props = {
8695
isLabs?: boolean;
8796
/** Feature switch for the labs redesign work */
8897
showLabsRedesign?: boolean;
98+
likeHandler?: () => void;
99+
dislikeHandler?: () => void;
89100
};
90101

91102
const width = (columns: number, columnWidth: number, columnGap: number) =>
@@ -589,7 +600,10 @@ export const StorylineSection = ({
589600
hasNavigationButtons = false,
590601
isAboveDesktopAd = false,
591602
isAboveMobileAd = false,
603+
dislikeHandler,
604+
likeHandler,
592605
}: Props) => {
606+
const id = sectionId || 'unknown-id'; //todo: figure out what this should be
593607
const isToggleable = toggleable && !!sectionId;
594608
const isBetaContainer = !!containerLevel;
595609

@@ -663,25 +677,36 @@ export const StorylineSection = ({
663677
>
664678
<FrontSectionTitle
665679
title={
666-
<ContainerTitle
667-
title={title}
668-
lightweightHeader={isTagPage}
669-
description={description}
670-
fontColour={
671-
containerLevel === 'Secondary'
672-
? schemePalette(
673-
'--article-section-secondary-title',
674-
)
675-
: articleSectionTitleStyles(
676-
title,
677-
showSectionColours,
678-
)
679-
}
680-
url={url}
681-
showDateHeader={showDateHeader}
682-
editionId={editionId}
683-
containerLevel={'Secondary'}
684-
/>
680+
<>
681+
<ContainerTitle
682+
title={title}
683+
lightweightHeader={isTagPage}
684+
description={description}
685+
fontColour={
686+
containerLevel === 'Secondary'
687+
? schemePalette(
688+
'--article-section-secondary-title',
689+
)
690+
: articleSectionTitleStyles(
691+
title,
692+
showSectionColours,
693+
)
694+
}
695+
url={url}
696+
showDateHeader={showDateHeader}
697+
editionId={editionId}
698+
containerLevel={'Secondary'}
699+
/>
700+
<div
701+
css={css`
702+
${textSans14};
703+
`}
704+
>
705+
Dive deeper into the Guardian's archive.
706+
This product uses GenAI. Learn more about
707+
how it works <a href="#">here.</a>
708+
</div>
709+
</>
685710
}
686711
collectionBranding={collectionBranding}
687712
/>
@@ -718,35 +743,46 @@ export const StorylineSection = ({
718743
{children}
719744
</div>
720745

721-
<div
722-
css={[
723-
sectionContentHorizontalMargins,
724-
sectionBottomContent,
725-
isBetaContainer
726-
? bottomPaddingBetaContainer(
727-
useLargeSpacingMobile,
728-
useLargeSpacingDesktop,
729-
)
730-
: bottomPadding,
731-
]}
732-
>
733-
{pagination && (
734-
<FrontPagination
735-
sectionName={pagination.sectionName}
736-
totalContent={pagination.totalContent}
737-
currentPage={pagination.currentPage}
738-
lastPage={pagination.lastPage}
739-
pageId={pagination.pageId}
740-
/>
741-
)}
742-
</div>
743-
744746
{treats && (
745747
<div css={[sectionTreats]}>
746-
<Treats
748+
{/* <Treats
747749
treats={treats}
748750
borderColour={schemePalette('--section-border')}
749-
/>
751+
/> */}
752+
<Footer
753+
dislikeHandler={
754+
dislikeHandler ??
755+
(() =>
756+
submitComponentEvent(
757+
{
758+
component: {
759+
componentType: 'QANDA_ATOM',
760+
id,
761+
products: [],
762+
labels: [],
763+
},
764+
action: 'DISLIKE',
765+
},
766+
'Web',
767+
))
768+
}
769+
likeHandler={
770+
likeHandler ??
771+
(() =>
772+
submitComponentEvent(
773+
{
774+
component: {
775+
componentType: 'QANDA_ATOM', //todo: update ophan component types to include storyline?
776+
id,
777+
products: [],
778+
labels: [],
779+
},
780+
action: 'LIKE',
781+
},
782+
'Web',
783+
))
784+
}
785+
></Footer>
750786
</div>
751787
)}
752788
</section>

0 commit comments

Comments
 (0)