diff --git a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx index a2a71a52e7b..224a24c985d 100644 --- a/src/app/legacy/components/ScrollablePromo/Promo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/Promo/index.jsx @@ -81,35 +81,66 @@ const TimeStamp = styled(PromoTimestamp)` color: ${({ theme }) => theme.isDarkUi && theme.palette.GREY_6}; `; -const Promo = ({ block, onClick }) => { +const Promo = ({ block, variant, onClick }) => { const { script, service, serviceDatetimeLocale } = useContext(ServiceContext); - const textBlock = filterForBlockType( - pathOr({}, ['model', 'blocks'], block), - 'text', - ); - const aresLinkBlock = filterForBlockType( - pathOr({}, ['model', 'blocks'], block), - 'aresLink', - ); - const href = pathOr( - '', - ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'], - textBlock, - ); - const title = pathOr( - '', - ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], - textBlock, - ); - const timestamp = path( - ['model', 'blocks', '0', 'model', 'timestamp'], - aresLinkBlock, - ); + let title; + let href; + let textBlock; + let aresLinkBlock; + let timestamp; + switch (variant) { + case 'A': + title = pathOr( + block.headline || '', + [ + 'headlines', + 'promoHeadline', + 'blocks', + '0', + 'model', + 'blocks', + '0', + 'model', + 'text', + ], + block, + ); + href = pathOr('', ['locators', 'canonicalUrl'], block); + break; + case 'B': + title = block.title; + href = block.href; + break; + default: + textBlock = filterForBlockType( + pathOr({}, ['model', 'blocks'], block), + 'text', + ); + aresLinkBlock = filterForBlockType( + pathOr({}, ['model', 'blocks'], block), + 'aresLink', + ); + timestamp = path( + ['model', 'blocks', '0', 'model', 'timestamp'], + aresLinkBlock, + ); + href = pathOr( + '', + ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'], + textBlock, + ); + title = pathOr( + '', + ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], + textBlock, + ); + break; + } + console.log('title', title, 'href', href, 'timestamp', timestamp); const isOperaMini = useOperaMiniDetection(); const WrapperPromoBox = isOperaMini ? OperaPromoBox : PromoBox; - return ( { > {title} - {timestamp && ( + {timestamp && !variant && ( {timestamp} diff --git a/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx b/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx index d633622259d..4b5f20fcfea 100644 --- a/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/PromoList/index.jsx @@ -79,10 +79,11 @@ const OperaStyledList = styled.li` margin-${dir === 'ltr' ? `left` : `right`}: 0;}`} `; -const PromoList = ({ blocks, viewTracker, onClick }) => { +const PromoList = ({ blocks, variant, viewTracker, onClick }) => { + console.log('in promo list', blocks, variant); const { dir } = useContext(ServiceContext); const isOperaMini = useOperaMiniDetection(); - const listBlocks = blocks.slice(0, 3); + const listBlocks = variant === 'B' ? blocks.slice(0, 5) : blocks.slice(0, 3); const ScrollPromo = isOperaMini ? OperaScrollPromo : StandardScrollPromo; const List = isOperaMini ? OperaStyledList : StyledList; @@ -97,7 +98,7 @@ const PromoList = ({ blocks, viewTracker, onClick }) => { return ( // eslint-disable-next-line react/no-array-index-key - + ); })} diff --git a/src/app/legacy/components/ScrollablePromo/helpers/fixtureData.js b/src/app/legacy/components/ScrollablePromo/helpers/fixtureData.js index 7996bdf34d6..f175e81458c 100644 --- a/src/app/legacy/components/ScrollablePromo/helpers/fixtureData.js +++ b/src/app/legacy/components/ScrollablePromo/helpers/fixtureData.js @@ -1334,3 +1334,255 @@ export const PromoSingleBlock = { }, position: [5, 3], }; + +export const MostReadBlocks = [ + { + id: 'urn:bbc:optimo:asset:cg4z0d2xgq3o', + rank: 1, + title: + 'Putin apologise for Azerbaijan Airlines crash but no accept blame for di crash', + href: 'https://www.bbc.com/pidgin/articles/cg4z0d2xgq3o', + timestamp: '2024-12-28T14:30:33.956Z', + }, + { + id: 'urn:bbc:optimo:asset:cj30vyvmn3xo', + rank: 2, + title: 'Court remand Queen Naomi and Oriyomi Hamzat for prison', + href: 'https://www.bbc.com/pidgin/articles/cj30vyvmn3xo', + timestamp: '2024-12-24T14:31:03.815Z', + }, + { + id: 'urn:bbc:optimo:asset:c3rq3lzr3gpo', + rank: 3, + title: + "'Make everybody help me beg make dem release my pikin' - Ex-Queen Naomi mama speak after deadly Ibadan stampede", + href: 'https://www.bbc.com/pidgin/articles/c3rq3lzr3gpo', + timestamp: '2024-12-27T12:00:17.653Z', + }, + { + id: 'urn:bbc:optimo:asset:clyvjjxn0pmo', + rank: 4, + title: + 'Life and Times of Romeo and Juliet star Olivia Hussey wey die at 73', + href: 'https://www.bbc.com/pidgin/articles/clyvjjxn0pmo', + timestamp: '2024-12-28T09:40:51.463Z', + }, + { + id: 'urn:bbc:optimo:asset:c7veqd6vr7lo', + rank: 5, + title: + "Nigerian military say na 'secondary explosion' kill 10 pipo for Sokoto State", + href: 'https://www.bbc.com/pidgin/articles/c7veqd6vr7lo', + timestamp: '2024-12-27T14:25:38.267Z', + }, + { + id: 'urn:bbc:optimo:asset:c5y4j20443do', + rank: 6, + title: + "'Why di next project I go dey for gatz beta pass Seven Doors' - Chioma Akpotha", + href: 'https://www.bbc.com/pidgin/articles/c5y4j20443do', + timestamp: '2024-12-28T06:33:30.811Z', + }, + { + id: 'urn:bbc:optimo:asset:cn9g805eqpno', + rank: 7, + title: + 'IPMAN, MRS and NNPC new fuel price rate – price of fuel go kontinu to go down?', + href: 'https://www.bbc.com/pidgin/articles/cn9g805eqpno', + timestamp: '2024-12-23T17:00:30.378Z', + }, + { + id: 'urn:bbc:optimo:asset:cly2x6pv5zqo', + rank: 8, + title: "'Phone and technology don take di only job wey I know'", + href: 'https://www.bbc.com/pidgin/articles/cly2x6pv5zqo', + timestamp: '2024-12-27T09:12:40.775Z', + }, + { + id: 'urn:bbc:optimo:asset:cpqd5yy8p4xo', + rank: 9, + title: + 'Wetin pipo see na Baltasar Engonga sex videos but wetin dey happun for Equatorial Guinea pass like dat ', + href: 'https://www.bbc.com/pidgin/articles/cpqd5yy8p4xo', + timestamp: '2024-11-10T07:44:00.348Z', + }, + { + id: 'urn:bbc:optimo:asset:c33dl4388p4o', + rank: 10, + title: 'Nasa make history wit closest-ever approach to di Sun', + href: 'https://www.bbc.com/pidgin/articles/c33dl4388p4o', + timestamp: '2024-12-27T14:38:29.323Z', + }, +]; + +export const TopStoriesBlocks = [ + { + locators: { + optimoUrn: 'urn:bbc:optimo:asset:cg4z0d2xgq3o', + canonicalUrl: 'https://www.bbc.com/pidgin/articles/cg4z0d2xgq3o', + }, + timestamp: 1735396233956, + suitableForSyndication: true, + language: 'pcm', + headlines: { + seoHeadline: + 'Azerbaijan Airlines: Putin tok sorry for airline crash but no take blame for am', + promoHeadline: { + blocks: [ + { + type: 'text', + model: { + blocks: [ + { + type: 'paragraph', + model: { + text: 'Putin apologise for Azerbaijan Airlines crash but no accept blame for di crash', + blocks: [ + { + type: 'fragment', + model: { + text: 'Putin apologise for Azerbaijan Airlines crash but no accept blame for di crash', + attributes: [], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + images: { defaultPromoImage: [Object] }, + summary: { blocks: [Array] }, + passport: { + language: 'pcm', + home: 'http://www.bbc.co.uk/ontologies/passport/home/Pidgin', + locator: 'urn:bbc:optimo:asset:cg4z0d2xgq3o', + availability: 'AVAILABLE', + taggings: [Array], + schemaVersion: '1.4.0', + publishedState: 'PUBLISHED', + predicates: [Object], + }, + serviceIdentifier: 'Pidgin', + breakingNews: { isBreaking: false }, + consumableAsSFV: false, + id: 'urn:bbc:ares::article:cg4z0d2xgq3o', + type: 'optimo', + }, + { + locators: { + optimoUrn: 'urn:bbc:optimo:asset:c7veqd6vr7lo', + canonicalUrl: 'https://www.bbc.com/pidgin/articles/c7veqd6vr7lo', + }, + timestamp: 1735309538267, + suitableForSyndication: true, + language: 'pcm', + headlines: { + seoHeadline: + "Sokoto airstrikes: Nigerian military say na 'secondary explosion' kill 10 pipo", + promoHeadline: { + blocks: [ + { + type: 'text', + model: { + blocks: [ + { + type: 'paragraph', + model: { + text: "Nigerian military say na 'secondary explosion' kill 10 pipo for Sokoto State", + blocks: [ + { + type: 'fragment', + model: { + text: "Nigerian military say na 'secondary explosion' kill 10 pipo for Sokoto State", + attributes: [], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + images: { defaultPromoImage: [Object] }, + summary: { blocks: [Array] }, + passport: { + language: 'pcm', + home: 'http://www.bbc.co.uk/ontologies/passport/home/Pidgin', + locator: 'urn:bbc:optimo:asset:c7veqd6vr7lo', + availability: 'AVAILABLE', + taggings: [Array], + schemaVersion: '1.4.0', + publishedState: 'PUBLISHED', + predicates: [Object], + }, + serviceIdentifier: 'Pidgin', + breakingNews: { isBreaking: false }, + consumableAsSFV: false, + id: 'urn:bbc:ares::article:c7veqd6vr7lo', + type: 'optimo', + }, + { + locators: { + optimoUrn: 'urn:bbc:optimo:asset:c33dl4388p4o', + canonicalUrl: 'https://www.bbc.com/pidgin/articles/c33dl4388p4o', + }, + timestamp: 1735310309323, + suitableForSyndication: true, + language: 'pcm', + headlines: { + seoHeadline: + 'Nasa Parker Solar Probe survive closest-ever approach to Sun', + promoHeadline: { + blocks: [ + { + type: 'text', + model: { + blocks: [ + { + type: 'paragraph', + model: { + text: 'Nasa make history wit closest-ever approach to di Sun', + blocks: [ + { + type: 'fragment', + model: { + text: 'Nasa make history wit closest-ever approach to di Sun', + attributes: [], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + images: { defaultPromoImage: [Object] }, + summary: { blocks: [Array] }, + passport: { + language: 'pcm', + home: 'http://www.bbc.co.uk/ontologies/passport/home/Pidgin', + locator: 'urn:bbc:optimo:asset:c33dl4388p4o', + availability: 'AVAILABLE', + taggings: [Array], + schemaVersion: '1.4.0', + publishedState: 'PUBLISHED', + predicates: [Object], + }, + byline: { blocks: [Array] }, + serviceIdentifier: 'Pidgin', + breakingNews: { isBreaking: false }, + consumableAsSFV: false, + id: 'urn:bbc:ares::article:c33dl4388p4o', + type: 'optimo', + }, +]; diff --git a/src/app/legacy/components/ScrollablePromo/index.jsx b/src/app/legacy/components/ScrollablePromo/index.jsx index 31bf3d4a399..49d65f10ffd 100644 --- a/src/app/legacy/components/ScrollablePromo/index.jsx +++ b/src/app/legacy/components/ScrollablePromo/index.jsx @@ -57,9 +57,14 @@ const LabelComponent = styled.strong` `} `; -const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { - const { script, service, dir, translations } = useContext(ServiceContext); - +const ScrollablePromo = ({ + blocks, + blockGroupIndex = null, + variant = 'none', +}) => { + const { script, service, dir, translations, mostRead } = + useContext(ServiceContext); + console.log('Blocks in scrollable promo:', blocks, blocks.type); const eventTrackingData = { componentName: `edoj${blockGroupIndex}`, format: 'CHD=edoj', @@ -72,13 +77,19 @@ const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { return null; } - const title = - blocks[0].type === 'title' && - path( - ['0', 'model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], - blocks, - ); - + let title; + if (variant === 'A') { + title = `${translations.topStoriesTitle || 'Top Stories'} - `; + } else if (variant === 'B') { + title = `${mostRead.header || 'Most Read'} - `; + } else { + title = + blocks[0].type === 'title' && + path( + ['0', 'model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'], + blocks, + ); + } const blocksWithoutTitle = blocks[0].type === 'title' ? tail(blocks) : blocks; const isSingleItem = blocksWithoutTitle.length === 1; @@ -98,7 +109,6 @@ const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { ), }), }; - return ( {title && ( @@ -112,11 +122,20 @@ const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => { {title} )} - {isSingleItem ? ( + {variant !== 'none' && ( + + )} + {variant === 'none' && isSingleItem && ( - ) : ( + )} + {variant === 'none' && !isSingleItem && ( ( +const ScrollablePromoComponent = ({ data, variant, service }) => ( - + ); @@ -65,3 +67,19 @@ export const ArabicText = () => ( export const WithTimestamp = (_, { service }) => ( ); + +export const OJExperimentMostRead = (_, { service }) => ( + +); + +export const OJExperimentTopStories = (_, { service }) => ( + +); diff --git a/src/app/legacy/components/ScrollablePromo/index.test.jsx b/src/app/legacy/components/ScrollablePromo/index.test.jsx index e8cb12d1046..0b43f22de5c 100644 --- a/src/app/legacy/components/ScrollablePromo/index.test.jsx +++ b/src/app/legacy/components/ScrollablePromo/index.test.jsx @@ -7,6 +7,8 @@ import { oneLinkOnly, oneLinkWithNoTitle, moreThanThreeLinks, + TopStoriesBlocks, + MostReadBlocks, } from './helpers/fixtureData'; import ScrollablePromo from '.'; import { edOjA, edOjB } from './fixtures'; @@ -158,4 +160,33 @@ describe('ScrollablePromo', () => { ); expect(container).toMatchSnapshot(); }); + + it('should render Top Stories ScrollablePromo with variant A', () => { + const { container, getByTestId, getByRole, getAllByRole } = render( + , + ); + expect(container.childElementCount).toEqual(1); + const heading = getByTestId('eoj-recommendations-heading'); + expect(heading).toBeInTheDocument(); + expect(heading).toHaveTextContent('Top Stories'); // translations were not available in the rendered component + + const list = getByRole('list'); + expect(list).toBeInTheDocument(); + const items = getAllByRole('listitem'); + expect(items).toHaveLength(3); + }); + it('should render Most Read ScrollablePromo with variant B', () => { + const { container, getByTestId, getByRole, getAllByRole } = render( + , + ); + expect(container.childElementCount).toEqual(1); + const heading = getByTestId('eoj-recommendations-heading'); + expect(heading).toBeInTheDocument(); + expect(heading).toHaveTextContent('Most read'); // there is a 'translation' for this, but it is English + + const list = getByRole('list'); + expect(list).toBeInTheDocument(); + const items = getAllByRole('listitem'); + expect(items).toHaveLength(5); + }); }); diff --git a/src/app/pages/ArticlePage/ArticlePage.styles.ts b/src/app/pages/ArticlePage/ArticlePage.styles.ts index be89a1f5402..3ba306630a6 100644 --- a/src/app/pages/ArticlePage/ArticlePage.styles.ts +++ b/src/app/pages/ArticlePage/ArticlePage.styles.ts @@ -41,6 +41,14 @@ export default { gridColumn: '1 / span 12', paddingBottom: '2rem', }), + aside: ({ mq }: Theme) => + css({ + display: 'none', + + [mq.GROUP_3_MAX_WIDTH]: { + display: 'block', + }, + }), mainContent: ({ spacings }: Theme) => css({ paddingBottom: `${spacings.TRIPLE}rem`, diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index 10561dac036..ac9b2a92b20 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -117,7 +117,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { const formats = pageData?.metadata?.passport?.predicates?.formats ?? []; const recommendationsData = pageData?.recommendations ?? []; - + const topStoriesContent = pageData?.secondaryColumn?.topStories; const isPGL = pageData?.metadata?.type === PHOTO_GALLERY_PAGE; const isSTY = pageData?.metadata?.type === STORY_PAGE; const isCPS = isPGL || isSTY; @@ -227,6 +227,25 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { const showTopics = Boolean( showRelatedTopics && topics.length > 0 && !isTransliterated, ); + // const scrollableOJExperimentVariation = useOptimizelyVariation( + // 'oj_scroll', + // ) as unknown as string; + const variantValue = 'none'; // We would get this value from useOptimizelyVariation (as commented out above) + // so just manually switch the hardcoded variant for now while getting this working + const variant: 'A' | 'B' | 'none' = ['A', 'B'].includes(variantValue) + ? (variantValue as 'A' | 'B') + : 'none'; + let dataForOJExperiment; + if (variant === 'A') { + dataForOJExperiment = topStoriesContent; + } else if (variant === 'B' && mostReadInitialData) { + dataForOJExperiment = mostReadInitialData.items; + } + + const propsForOJExperiment = { + blocks: dataForOJExperiment, + variant, + }; return (
@@ -272,6 +291,11 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { {allowAdvertising && ( )} + {!isPGL && !isTC2Asset && variant !== 'none' && dataForOJExperiment && ( + + )}
diff --git a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap index 3545aefb062..7ecee600a63 100644 --- a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap @@ -6,6 +6,310 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } .emotion-1 { + display: none; +} + +@media (max-width: 62.9375rem) { + .emotion-1 { + display: block; + } +} + +@media (max-width: 14.9375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-2 { + margin-left: 0%; + } +} + +@media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-2 { + margin-left: 20%; + } +} + +@media (min-width: 80rem) { + .emotion-2 { + margin-left: 40%; + } +} + +@supports (display: grid) { + .emotion-2 { + display: block; + width: initial; + margin: 0; + } + + @media (max-width: 14.9375rem) { + .emotion-2 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + grid-column-start: 1; + } + } + + @media (min-width: 15rem) and (max-width: 24.9375rem) { + .emotion-2 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + grid-column-start: 1; + } + } + + @media (min-width: 25rem) and (max-width: 37.4375rem) { + .emotion-2 { + grid-template-columns: repeat(6, 1fr); + grid-column-end: span 6; + grid-column-start: 1; + } + } + + @media (min-width: 37.5rem) and (max-width: 62.9375rem) { + .emotion-2 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + grid-column-start: 1; + } + } + + @media (min-width: 63rem) and (max-width: 79.9375rem) { + .emotion-2 { + grid-template-columns: repeat(5, 1fr); + grid-column-end: span 5; + grid-column-start: 2; + } + } + + @media (min-width: 80rem) { + .emotion-2 { + grid-template-columns: repeat(10, 1fr); + grid-column-end: span 10; + grid-column-start: 5; + } + } +} + +.emotion-4 { + display: block; + font-size: 1.125rem; + line-height: 1.375rem; + font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + margin-bottom: 1rem; + color: #3F3F42; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-4 { + font-size: 1.25rem; + line-height: 1.5rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + font-size: 1.5rem; + line-height: 1.75rem; + } +} + +@media (min-width: 0rem) { + .emotion-4 { + margin-left: 0.5rem; + } +} + +@media (min-width: 25rem) { + .emotion-4 { + margin-left: 1rem; + } +} + +@media (min-width: 63rem) { + .emotion-4 { + margin-left: 0; + } +} + +.emotion-6 { + list-style: none; + padding-left: 0; + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + overflow-x: scroll; + scroll-behavior: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.emotion-6::-webkit-scrollbar { + display: none; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +@media (min-width: 0rem) { + .emotion-8 { + margin-left: 0.5rem; + } + + .emotion-8:first-child { + margin-left: 0.5rem; + } + + .emotion-8:last-child { + margin-right: 0.5rem; + } +} + +@media (min-width: 25rem) { + .emotion-8 { + margin-left: 1rem; + } + + .emotion-8:first-child { + margin-left: 1rem; + } +} + +@media (min-width: 63rem) { + .emotion-8 { + margin-left: 1rem; + } + + .emotion-8:first-child { + margin-left: 0; + } +} + +.emotion-10 { + position: relative; + background-color: #FFFFFF; + padding: 1rem; + margin-bottom: 1.5rem; +} + +@media (min-width: 0rem) { + .emotion-10 { + width: 14.8125rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-10 { + width: 11.125rem; + } +} + +@media (min-width: 63rem) { + .emotion-10 { + width: 12.6875rem; + } +} + +.emotion-12 { + position: static; + color: #222222; + -webkit-text-decoration: none; + text-decoration: none; + overflow-wrap: break-word; + display: inline-block; + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + width: 100%; + overflow-wrap: break-word; + text-overflow: ellipsis; + -webkit-text-decoration: none; + text-decoration: none; + overflow-x: hidden; + overflow-y: hidden; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + color: #202224; +} + +.emotion-12:before { + bottom: 0; + content: ''; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + white-space: nowrap; + z-index: 1; +} + +.emotion-12:hover, +.emotion-12:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.emotion-12:visited { + color: #6E6E73; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-12 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +.emotion-12:hover, +.emotion-12:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.emotion-12:visited { + color: #545658; +} + +.emotion-38 { max-width: 63rem; margin: 0 auto; display: grid; @@ -13,77 +317,77 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) { - .emotion-1 { + .emotion-38 { padding: 0 1rem; -webkit-column-gap: 1rem; column-gap: 1rem; } } -.emotion-2 { +.emotion-39 { grid-column: 1/span 12; padding-bottom: 2rem; } @media (min-width: 63rem) { - .emotion-2 { + .emotion-39 { grid-column: 1/span 8; } } -.emotion-3 { +.emotion-40 { padding-bottom: 1.5rem; } @media (max-width: 14.9375rem) { - .emotion-4 { + .emotion-41 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-4 { + .emotion-41 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-41 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-4 { + .emotion-41 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-4 { + .emotion-41 { margin-left: 16.666666666666668%; } } @media (min-width: 80rem) { - .emotion-4 { + .emotion-41 { margin-left: 33.333333333333336%; } } @supports (display: grid) { - .emotion-4 { + .emotion-41 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -92,7 +396,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -101,7 +405,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -110,7 +414,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -119,7 +423,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-start: 2; @@ -127,7 +431,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-4 { + .emotion-41 { grid-template-columns: repeat(12, 1fr); grid-column-end: span 12; grid-column-start: 5; @@ -135,7 +439,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } } -.emotion-6 { +.emotion-43 { font-size: 1.75rem; line-height: 2rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -149,78 +453,78 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { + .emotion-43 { font-size: 2rem; line-height: 2.25rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-43 { font-size: 2.75rem; line-height: 3rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-43 { padding: 2.5rem 0; } } -.emotion-6:focus { +.emotion-43:focus { outline: none; } @media (max-width: 14.9375rem) { - .emotion-8 { + .emotion-45 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-8 { + .emotion-45 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-45 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-8 { + .emotion-45 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-8 { + .emotion-45 { margin-left: 20%; } } @media (min-width: 80rem) { - .emotion-8 { + .emotion-45 { margin-left: 40%; } } @supports (display: grid) { - .emotion-8 { + .emotion-45 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -229,7 +533,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -238,7 +542,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -247,7 +551,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; padding: 0 1rem; @@ -256,7 +560,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; grid-column-start: 2; @@ -264,7 +568,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-8 { + .emotion-45 { grid-template-columns: repeat(10, 1fr); grid-column-end: span 10; grid-column-start: 5; @@ -272,7 +576,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } } -.emotion-10 { +.emotion-47 { font-size: 0.9375rem; line-height: 1.25rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -284,27 +588,27 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-47 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-47 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 63rem) { - .emotion-10 { + .emotion-47 { padding-right: 2.5rem; } } @media (max-width: 24.9375rem) { - .emotion-12 { + .emotion-49 { margin: 0 0.5rem; padding-bottom: 1.5rem; } @@ -312,7 +616,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc @media (min-width: 25rem) { @media (max-width: 62.9375rem) { - .emotion-12 { + .emotion-49 { margin: 0 1rem; padding-bottom: 2rem; } @@ -320,21 +624,21 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-12 { + .emotion-49 { margin: 0 1rem; padding-bottom: 2.5rem; } } @media (min-width: 80rem) { - .emotion-12 { + .emotion-49 { margin: 0 auto; padding: 0 1rem 1.5rem; max-width: 80rem; } } -.emotion-13 { +.emotion-50 { position: relative; z-index: 0; color: #141414; @@ -342,36 +646,36 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) { - .emotion-13 { + .emotion-50 { margin-top: 1.5rem; } } @media (min-width: 63rem) { - .emotion-13 { + .emotion-50 { margin-bottom: 1.5rem; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-13 { + .emotion-50 { margin-bottom: 1rem; } } -.emotion-15 { +.emotion-52 { margin: 0; padding: 0; scroll-margin-top: 1rem; } -.emotion-15:focus-visible { +.emotion-52:focus-visible { outline: 0.1875rem solid #000000; box-shadow: 0 0 0 0.1875rem #FFFFFF; outline-offset: 0.1875rem; } -.emotion-17 { +.emotion-54 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -381,7 +685,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc flex-direction: column; } -.emotion-19 { +.emotion-56 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -401,7 +705,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) { - .emotion-19 { + .emotion-56 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -409,7 +713,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } } -.emotion-21 { +.emotion-58 { font-size: 1.125rem; line-height: 1.375rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -429,32 +733,32 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-21 { + .emotion-58 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-21 { + .emotion-58 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-21 { + .emotion-58 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-21 { + .emotion-58 { padding-right: 1rem; } } -.emotion-23 { +.emotion-60 { list-style-type: none; margin: 0; padding: 0; @@ -463,7 +767,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @supports (display: grid) { - .emotion-23 { + .emotion-60 { display: grid; position: initial; width: initial; @@ -471,7 +775,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (max-width: 14.9375rem) { - .emotion-23 { + .emotion-60 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -479,7 +783,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-23 { + .emotion-60 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -487,7 +791,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-23 { + .emotion-60 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -495,7 +799,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-23 { + .emotion-60 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 1rem; @@ -503,7 +807,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-23 { + .emotion-60 { grid-template-columns: repeat(8, 1fr); grid-column-end: span 8; grid-column-gap: 1rem; @@ -511,7 +815,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-23 { + .emotion-60 { grid-template-columns: repeat(20, 1fr); grid-column-end: span 20; grid-column-gap: 1rem; @@ -520,24 +824,24 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-23 { + .emotion-60 { grid-auto-flow: row; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-60 { grid-template-rows: repeat(3, auto); } } -.emotion-25 { +.emotion-62 { position: relative; padding-bottom: 1.5rem; } @media (max-width: 14.9375rem) { - .emotion-25 { + .emotion-62 { width: calc(100%); display: inline-block; vertical-align: top; @@ -545,7 +849,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-25 { + .emotion-62 { width: calc(100%); display: inline-block; vertical-align: top; @@ -553,7 +857,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-25 { + .emotion-62 { width: calc(100%); display: inline-block; vertical-align: top; @@ -561,7 +865,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-25 { + .emotion-62 { width: calc(50%); display: inline-block; vertical-align: top; @@ -569,7 +873,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-25 { + .emotion-62 { width: calc(50%); display: inline-block; vertical-align: top; @@ -577,7 +881,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-25 { + .emotion-62 { width: calc(20%); display: inline-block; vertical-align: top; @@ -585,56 +889,56 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @supports (display: grid) { - .emotion-25 { + .emotion-62 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-25 { + .emotion-62 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-25 { + .emotion-62 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-25 { + .emotion-62 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-25 { + .emotion-62 { grid-template-columns: repeat(3, 1fr); grid-column-end: span 3; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-25 { + .emotion-62 { grid-template-columns: repeat(4, 1fr); grid-column-end: span 4; } } @media (min-width: 80rem) { - .emotion-25 { + .emotion-62 { grid-template-columns: repeat(4, 1fr); grid-column-end: span 4; } } } -.emotion-27 { +.emotion-64 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -647,50 +951,50 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (max-width: 14.9375rem) { - .emotion-28 { + .emotion-65 { min-width: 1.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-28 { + .emotion-65 { min-width: 1.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-28 { + .emotion-65 { min-width: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-28 { + .emotion-65 { min-width: 2rem; } } @media (min-width: 37.5rem) { - .emotion-28 { + .emotion-65 { min-width: 2rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-28 { + .emotion-65 { min-width: 2rem; } } } @media (min-width: 80rem) { - .emotion-28 { + .emotion-65 { min-width: 2rem; } } -.emotion-29 { +.emotion-66 { font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -703,32 +1007,32 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-29 { + .emotion-66 { font-size: 2.5rem; line-height: 2.75rem; } } @media (min-width: 37.5rem) { - .emotion-29 { + .emotion-66 { font-size: 3.5rem; line-height: 3.75rem; } } -.emotion-30 { +.emotion-67 { padding-top: 0.375rem; padding-left: 1rem; padding-right: 1rem; } @supports (grid-template-columns: fit-content(200px)) { - .emotion-30 { + .emotion-67 { padding-right: 0; } } -.emotion-31 { +.emotion-68 { font-size: 0.9375rem; line-height: 1.25rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -742,26 +1046,26 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-31 { + .emotion-68 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-31 { + .emotion-68 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-31:hover, -.emotion-31:focus { +.emotion-68:hover, +.emotion-68:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-31:before { +.emotion-68:before { bottom: 0; content: ''; left: 0; @@ -774,31 +1078,31 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) { - .emotion-31 { + .emotion-68 { font-size: 1.125rem; line-height: 1.375rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-31 { + .emotion-68 { font-size: 1.125rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-31 { + .emotion-68 { font-size: 1.25rem; line-height: 1.5rem; } } } -.emotion-32 { +.emotion-69 { padding-top: 0.5rem; } -.emotion-33 { +.emotion-70 { font-size: 0.875rem; line-height: 1.125rem; color: #545658; @@ -809,14 +1113,14 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-33 { + .emotion-70 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-33 { + .emotion-70 { font-size: 0.8125rem; line-height: 1rem; } @@ -830,22 +1134,123 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
chartbeat
-