diff --git a/dotcom-rendering/src/components/AffiliateDisclaimer.tsx b/dotcom-rendering/src/components/AffiliateDisclaimer.tsx index cd0ddebc8a1..51083b440ed 100644 --- a/dotcom-rendering/src/components/AffiliateDisclaimer.tsx +++ b/dotcom-rendering/src/components/AffiliateDisclaimer.tsx @@ -1,12 +1,6 @@ import { css } from '@emotion/react'; -import { - palette, - space, - textSans14, - textSans15, -} from '@guardian/source/foundations'; +import { space, textSans12, textSans15 } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; -import { palette as themePalette } from '../palette'; const disclaimerLeftColStyles = css` ${textSans15}; @@ -20,45 +14,14 @@ const disclaimerLeftColStyles = css` padding-bottom: ${space[1]}px; `; -const disclaimerInlineStyles = css` - ${textSans14}; - /** - * Typography preset styles should not be overridden. - * This has been done because the styles do not directly map to the new presets. - * Please speak to your team's designer and update this to use a more appropriate preset. - */ - line-height: 1.15; - float: left; - clear: left; - width: 8.75rem; - background-color: ${themePalette('--affiliate-disclaimer-background')}; - :hover { - background-color: ${themePalette( - '--affiliate-disclaimer-background-hover', - )}; - } +const disclaimerStandfirstStyles = css` + ${textSans12}; margin-top: ${space[1]}px; - margin-right: ${space[5]}px; margin-bottom: ${space[1]}px; padding-top: ${space[0]}px; - padding-right: 5px; - padding-left: 5px; padding-bottom: ${space[3]}px; `; -/** - * The custom CSS variables generated by palette.ts don't work - * in AMP, so we need to set these styles differently - */ -const ampStyles = css` - background-color: ${palette.neutral[97]}; - a { - text-decoration: none; - border-bottom: 1px solid ${palette.lifestyle[300]}; - color: ${palette.lifestyle[300]}; - } -`; - const DisclaimerText = () => (

The Guardian’s journalism is independent. We will earn a commission if @@ -80,23 +43,15 @@ const AffiliateDisclaimer = () => ( ); -const AffiliateDisclaimerInline = ({ isAmp = false }) => - isAmp ? ( +const AffiliateDisclaimerStandfirst = () => ( +

- ) : ( - - - - ); + +); -export { AffiliateDisclaimer, AffiliateDisclaimerInline }; +export { AffiliateDisclaimer, AffiliateDisclaimerStandfirst }; diff --git a/dotcom-rendering/src/components/BodyArticle.amp.tsx b/dotcom-rendering/src/components/BodyArticle.amp.tsx index 61c6e68d6b3..623536ae50a 100644 --- a/dotcom-rendering/src/components/BodyArticle.amp.tsx +++ b/dotcom-rendering/src/components/BodyArticle.amp.tsx @@ -13,7 +13,6 @@ import { import { findAdSlots } from '../lib/find-adslots.amp'; import { pillarPalette_DO_NOT_USE } from '../lib/pillars'; import { getSharingUrls } from '../lib/sharing-urls'; -import { insertDisclaimerElement } from '../model/enhance-disclaimer'; import type { AMPArticleModel } from '../types/article.amp'; import type { AdTargeting } from '../types/commercial'; import type { ConfigType } from '../types/config'; @@ -105,9 +104,6 @@ type Props = { export const Body = ({ data, config }: Props) => { const bodyElements = data.blocks[0] ? data.blocks[0].elements : []; - const bodyElementsWithDisclaimer = data.affiliateLinksDisclaimer - ? insertDisclaimerElement(bodyElements) - : bodyElements; const adTargeting: AdTargeting = buildAdTargeting({ isAdFreeUser: data.isAdFreeUser, isSensitive: config.isSensitive, @@ -120,12 +116,12 @@ export const Body = ({ data, config }: Props) => { const design = decideDesign(data.format); const pillar = decideTheme(data.format); const elementsWithoutAds = Elements( - bodyElementsWithDisclaimer, + bodyElements, pillar, data.isImmersive, adTargeting, ); - const insertSlotsAfter = findAdSlots(bodyElementsWithDisclaimer); + const insertSlotsAfter = findAdSlots(bodyElements); const adInfo = { adUnit: config.adUnit, section: data.sectionName, diff --git a/dotcom-rendering/src/components/Elements.amp.tsx b/dotcom-rendering/src/components/Elements.amp.tsx index 61e51ea2faf..a612a7f190e 100644 --- a/dotcom-rendering/src/components/Elements.amp.tsx +++ b/dotcom-rendering/src/components/Elements.amp.tsx @@ -9,7 +9,6 @@ import type { AdTargeting } from '../types/commercial'; import type { Switches } from '../types/config'; import type { FEElement } from '../types/content'; import type { TagType } from '../types/tag'; -import { AffiliateDisclaimerInline } from './AffiliateDisclaimer'; import { AudioAtomBlockComponent } from './AudioAtomBlockComponent.amp'; import { CommentBlockComponent } from './CommentBlockComponent.amp'; import { ContentAtomBlockComponent } from './ContentAtomBlockComponent.amp'; @@ -42,7 +41,6 @@ const AMP_SUPPORTED_ELEMENTS = [ 'model.dotcomrendering.pageElements.ChartAtomBlockElement', 'model.dotcomrendering.pageElements.CommentBlockElement', 'model.dotcomrendering.pageElements.ContentAtomBlockElement', - 'model.dotcomrendering.pageElements.DisclaimerBlockElement', // We do not support EmbedBlockElement's when they are mandatory // 'model.dotcomrendering.pageElements.EmbedBlockElement', 'model.dotcomrendering.pageElements.GenericAtomBlockElement', @@ -392,8 +390,6 @@ export const Elements = ( adTargeting={adTargeting} /> ); - case 'model.dotcomrendering.pageElements.DisclaimerBlockElement': - return ; default: console.log('Unsupported Element', JSON.stringify(element)); if ((element as { isMandatory?: boolean }).isMandatory) { diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx index b1b73ca62b6..a0038bb5f95 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.tsx +++ b/dotcom-rendering/src/layouts/AudioLayout.tsx @@ -7,7 +7,10 @@ import { } from '@guardian/source/foundations'; import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; -import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; +import { + AffiliateDisclaimer, + AffiliateDisclaimerStandfirst, +} from '../components/AffiliateDisclaimer'; import { ArticleBody } from '../components/ArticleBody'; import { ArticleContainer } from '../components/ArticleContainer'; import { ArticleHeadline } from '../components/ArticleHeadline'; @@ -315,6 +318,9 @@ export const AudioLayout = (props: WebProps) => { format={format} standfirst={article.standfirst} /> + {!!article.affiliateLinksDisclaimer && ( + + )} diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index 266829d6155..39d9da4742c 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -9,7 +9,10 @@ import { import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; -import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; +import { + AffiliateDisclaimer, + AffiliateDisclaimerStandfirst, +} from '../components/AffiliateDisclaimer'; import { AppsFooter } from '../components/AppsFooter.importable'; import { ArticleBody } from '../components/ArticleBody'; import { ArticleContainer } from '../components/ArticleContainer'; @@ -514,6 +517,9 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { format={format} standfirst={article.standfirst} /> + {!!article.affiliateLinksDisclaimer && ( + + )} {!!article.byline && ( diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index 345ae695e42..19299825e65 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx @@ -9,7 +9,10 @@ import { Hide } from '@guardian/source/react-components'; import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; -import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; +import { + AffiliateDisclaimer, + AffiliateDisclaimerStandfirst, +} from '../components/AffiliateDisclaimer'; import { AppsFooter } from '../components/AppsFooter.importable'; import { ArticleBody } from '../components/ArticleBody'; import { ArticleContainer } from '../components/ArticleContainer'; @@ -435,6 +438,9 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => { format={format} standfirst={article.standfirst} /> + {!!article.affiliateLinksDisclaimer && ( + + )}
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index 8ca60804740..eea01209527 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -9,7 +9,10 @@ import { Hide } from '@guardian/source/react-components'; import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; -import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; +import { + AffiliateDisclaimer, + AffiliateDisclaimerStandfirst, +} from '../components/AffiliateDisclaimer'; import { AppsEpic } from '../components/AppsEpic.importable'; import { AppsFooter } from '../components/AppsFooter.importable'; import { ArticleBody } from '../components/ArticleBody'; @@ -573,6 +576,9 @@ export const StandardLayout = (props: WebProps | AppProps) => { format={format} standfirst={article.standfirst} /> + {!!article.affiliateLinksDisclaimer && ( + + )}
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index 9ba884cecd0..0165059dd24 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -1,5 +1,4 @@ import { AdPlaceholder } from '../components/AdPlaceholder.apps'; -import { AffiliateDisclaimerInline } from '../components/AffiliateDisclaimer'; import { AudioAtomWrapper } from '../components/AudioAtomWrapper.importable'; import { BlockquoteBlockComponent } from '../components/BlockquoteBlockComponent'; import { CalloutBlockComponent } from '../components/CalloutBlockComponent.importable'; @@ -862,9 +861,6 @@ export const renderElement = ({ /> ); - case 'model.dotcomrendering.pageElements.DisclaimerBlockElement': { - return ; - } case 'model.dotcomrendering.pageElements.CrosswordElement': return ( diff --git a/dotcom-rendering/src/model/enhance-disclaimer.ts b/dotcom-rendering/src/model/enhance-disclaimer.ts deleted file mode 100644 index 71cc1ac301a..00000000000 --- a/dotcom-rendering/src/model/enhance-disclaimer.ts +++ /dev/null @@ -1,56 +0,0 @@ -import type { FEElement } from '../types/content'; - -const isParagraph = (element: FEElement) => - element._type === 'model.dotcomrendering.pageElements.TextBlockElement'; - -type ReducerAccumulator = { - elements: FEElement[]; - paragraphCounter: number; -}; - -const createDisclaimerBlock = (): FEElement => ({ - _type: 'model.dotcomrendering.pageElements.DisclaimerBlockElement', - elementId: 'disclaimer', - // this is a marker element and its html should not be rendered - html: '', - role: 'inline', -}); - -/** - * Create a DisclaimerBlockElement before the 2nd paragraph - * This element is just a marker to be used by the layout implementations which - * will insert a component - */ -const insertDisclaimerElement = (elements: FEElement[]): FEElement[] => { - const enhancedElements = elements.reduce( - (acc: ReducerAccumulator, element: FEElement): ReducerAccumulator => { - const paragraphCounter = isParagraph(element) - ? acc.paragraphCounter + 1 - : acc.paragraphCounter; - - const newElements = - paragraphCounter === 2 && isParagraph(element) - ? [...acc.elements, createDisclaimerBlock(), element] - : [...acc.elements, element]; - - return { - elements: newElements, - paragraphCounter, - }; - }, - { - elements: [], - paragraphCounter: 0, - }, - ); - return enhancedElements.elements; -}; - -const enhanceDisclaimer = - (hasAffiliateLinksDisclaimer: boolean) => - (elements: FEElement[]): FEElement[] => - hasAffiliateLinksDisclaimer - ? insertDisclaimerElement(elements) - : elements; - -export { enhanceDisclaimer, insertDisclaimerElement }; diff --git a/dotcom-rendering/src/model/enhanceBlocks.ts b/dotcom-rendering/src/model/enhanceBlocks.ts index f2a4449307b..411fff3e372 100644 --- a/dotcom-rendering/src/model/enhanceBlocks.ts +++ b/dotcom-rendering/src/model/enhanceBlocks.ts @@ -11,7 +11,6 @@ import type { RenderingTarget } from '../types/renderingTarget'; import type { TagType } from '../types/tag'; import { enhanceAdPlaceholders } from './enhance-ad-placeholders'; import { enhanceBlockquotes } from './enhance-blockquotes'; -import { enhanceDisclaimer } from './enhance-disclaimer'; import { enhanceDividers } from './enhance-dividers'; import { enhanceDots } from './enhance-dots'; import { enhanceEmbeds } from './enhance-embeds'; @@ -77,7 +76,6 @@ export const enhanceElements = blockId, ), enhanceAdPlaceholders(format, options.renderingTarget), - enhanceDisclaimer(options.hasAffiliateLinksDisclaimer), ].reduce( (enhancedBlocks, enhancer) => enhancer(enhancedBlocks), elements, diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index b97f41921a0..aaad440e39f 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -4516,23 +4516,6 @@ const richLinkQuoteFillLight: PaletteFunction = ({ design, theme }) => { } }; -const affiliateDisclaimerBackgroundLight: PaletteFunction = ({ design }) => { - return design === ArticleDesign.Analysis - ? '#F2E8E6' - : sourcePalette.neutral[97]; -}; -const affiliateDisclaimerBackgroundDark: PaletteFunction = () => - sourcePalette.neutral[20]; -const affiliateDisclaimerBackgroundHoverLight: PaletteFunction = ({ - design, -}) => { - return design === ArticleDesign.Analysis - ? '#e9d9d5' //not available in colour palette. Check with design to update or change. - : sourcePalette.neutral[93]; -}; -const affiliateDisclaimerBackgroundHoverDark: PaletteFunction = () => - sourcePalette.neutral[10]; - const seriesTitleBackgroundLight: PaletteFunction = ({ theme, display }) => { if (theme === ArticleSpecial.SpecialReport) { return sourcePalette.brandAlt[400]; @@ -5867,14 +5850,6 @@ const paletteColours = { light: articleInnerAdLabelsTextLight, dark: adLabelsTextDark, }, - '--affiliate-disclaimer-background': { - light: affiliateDisclaimerBackgroundLight, - dark: affiliateDisclaimerBackgroundDark, - }, - '--affiliate-disclaimer-background-hover': { - light: affiliateDisclaimerBackgroundHoverLight, - dark: affiliateDisclaimerBackgroundHoverDark, - }, '--age-warning-background': { light: ageWarningBackgroundLight, dark: ageWarningBackgroundDark,