From dd7a7fdadbe61f4a0de74f6eab9acbb6081a1c45 Mon Sep 17 00:00:00 2001 From: Max Duval Date: Tue, 29 Aug 2023 09:55:45 +0100 Subject: [PATCH] docs(islands): less repetition & more descriptions - automatically infer the title from the component name - add more descriptions about why some of the components need to be islands --- .../scripts/islands/island-descriptions.mjs | 5 +++-- .../components/AlreadyVisited.importable.tsx | 10 +++++++--- .../components/AudioAtomWrapper.importable.tsx | 8 +++++++- .../AustralianTerritorySwitcher.importable.tsx | 13 +++++++++++++ .../src/components/Branding.importable.tsx | 2 -- .../components/BrazeMessaging.importable.tsx | 8 ++++++++ .../CalloutBlockComponent.importable.tsx | 2 -- .../CalloutEmbedBlockComponent.importable.tsx | 2 -- .../src/components/Carousel.importable.tsx | 2 -- .../src/components/CommentCount.importable.tsx | 9 ++++++--- .../DiscussionContainer.importable.tsx | 17 +++++++++++------ .../src/components/GetMatchNav.importable.tsx | 2 -- .../src/components/GetMatchStats.importable.tsx | 2 -- .../src/components/GetMatchTabs.importable.tsx | 9 +++++++++ .../src/components/HeaderTopBar.importable.tsx | 2 -- .../src/components/LatestLinks.importable.tsx | 4 +--- .../src/components/LightboxHash.importable.tsx | 8 ++++++++ .../src/components/LiveBlogEpic.importable.tsx | 8 ++++++++ .../LiveblogRightMultipleAdSlots.importable.tsx | 8 ++++++++ .../src/components/Liveness.importable.tsx | 2 -- .../components/MostViewedFooter.importable.tsx | 10 +++++++--- .../MostViewedRightWrapper.importable.tsx | 12 +++++++++++- .../src/components/OnwardsUpper.importable.tsx | 2 -- .../src/components/PulsingDot.importable.tsx | 2 -- .../components/RichLinkComponent.importable.tsx | 2 -- .../SecureSignupIframe.importable.tsx | 2 -- .../src/components/SendAMessage.importable.tsx | 2 -- .../src/components/SetABTests.importable.tsx | 11 +++++++++++ .../StickyBottomBanner.importable.tsx | 11 +++++++++++ .../src/components/SupportTheG.importable.tsx | 12 ++++++++++++ .../components/TableOfContents.importable.tsx | 2 -- .../src/components/TopRightAdSlot.tsx | 2 ++ 32 files changed, 143 insertions(+), 50 deletions(-) diff --git a/dotcom-rendering/scripts/islands/island-descriptions.mjs b/dotcom-rendering/scripts/islands/island-descriptions.mjs index 42e1aeb3411..6b9e8ee672f 100644 --- a/dotcom-rendering/scripts/islands/island-descriptions.mjs +++ b/dotcom-rendering/scripts/islands/island-descriptions.mjs @@ -112,10 +112,11 @@ const getIslands = async (report) => { : ''; const description = - matched?.[1] + `# ${name.replaceAll(/([A-Z])/g, ' $1')}\n` + + (matched?.[1] ?.split('\n') .map((jsdoc_line) => jsdoc_line.slice(3)) - .join('\n') ?? `# ${name} \n No description yet… 😢`; + .join('\n') ?? `No description yet… 😢`); const html = await processor.process(description); diff --git a/dotcom-rendering/src/components/AlreadyVisited.importable.tsx b/dotcom-rendering/src/components/AlreadyVisited.importable.tsx index 7508c11c4ff..56d12116f54 100644 --- a/dotcom-rendering/src/components/AlreadyVisited.importable.tsx +++ b/dotcom-rendering/src/components/AlreadyVisited.importable.tsx @@ -2,11 +2,15 @@ import { useEffect } from 'react'; import { incrementAlreadyVisited } from '../lib/alreadyVisited'; /** - * # AlreadyVisited - * * Increment the already visited count. * - * @returns {} _No visual or DOM output_ + * ## Why does this need to be an Island? + * + * This modifies local storage values. + * + * --- + * + * Does not render **anything**. */ export const AlreadyVisited = () => { useEffect(() => { diff --git a/dotcom-rendering/src/components/AudioAtomWrapper.importable.tsx b/dotcom-rendering/src/components/AudioAtomWrapper.importable.tsx index 350646d0d79..e2771c89d12 100644 --- a/dotcom-rendering/src/components/AudioAtomWrapper.importable.tsx +++ b/dotcom-rendering/src/components/AudioAtomWrapper.importable.tsx @@ -19,8 +19,14 @@ type Props = { }; /** - * # AudioAtomWrapper + * ## Why does this need to be an Island? * + * The audio atom is interactive. + * Requires consent to use audio ads. + * + * --- + * + * (No visual story exists) */ export const AudioAtomWrapper = ({ id, diff --git a/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx b/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx index b24d2a6c029..c5d69967529 100644 --- a/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx +++ b/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx @@ -40,6 +40,19 @@ const labelStyles = css` type Props = { targetedTerritory: AustralianTerritory; }; + +/** + * Allows containers targetted to a specific territory to be changed + * to a different territory. E.g New South Wales to Victoria + * + * ## Why does this need to be an Island? + * + * We use cookies to set the user’s territory. + * + * --- + * + * [`AustralianTerritorySwitcher` on Chromatic](https://www.chromatic.com/component?appId=63e251470cfbe61776b0ef19&csfId=components-australianterritoryswitcher--victoria&buildNumber=2967) + */ export const AustralianTerritorySwitcher = ({ targetedTerritory }: Props) => { const [expanded, setExpanded] = useState(false); diff --git a/dotcom-rendering/src/components/Branding.importable.tsx b/dotcom-rendering/src/components/Branding.importable.tsx index 9c9a388df78..9cb296ba759 100644 --- a/dotcom-rendering/src/components/Branding.importable.tsx +++ b/dotcom-rendering/src/components/Branding.importable.tsx @@ -163,8 +163,6 @@ type Props = { }; /** - * # Branding - * * Wrapper around the logo and link for sponsored or paid for content. * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/BrazeMessaging.importable.tsx b/dotcom-rendering/src/components/BrazeMessaging.importable.tsx index 33cd1888a49..0f69afaa460 100644 --- a/dotcom-rendering/src/components/BrazeMessaging.importable.tsx +++ b/dotcom-rendering/src/components/BrazeMessaging.importable.tsx @@ -8,6 +8,14 @@ type Props = { /** * This component ensures we call buildBrazeMessaging at least once * on every page + * + * ## Why does this need to be an Island? + * + * All behaviour is client-side. + * + * --- + * + * Does not render **anything**. */ export const BrazeMessaging = ({ idApiUrl }: Props) => { const { brazeMessages, brazeCards } = useBraze(idApiUrl); diff --git a/dotcom-rendering/src/components/CalloutBlockComponent.importable.tsx b/dotcom-rendering/src/components/CalloutBlockComponent.importable.tsx index 664e420cb98..6b837a0e72e 100644 --- a/dotcom-rendering/src/components/CalloutBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/CalloutBlockComponent.importable.tsx @@ -11,8 +11,6 @@ const collapsibleCalloutStyle = css` `; /** - * # Callout Block Component - * * A callout to readers to share their stories. * This is the updated version of the CalloutEmbedBlockComponent. * diff --git a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx index 9c1b4d68d0c..c47633dceec 100644 --- a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx @@ -130,8 +130,6 @@ let hasFormBeenOpened = true; type FormDataType = { [key in string]: unknown }; /** - * # Callout Embed Block Component - * * A callout to readers to share their stories. * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx index f9d3eaca81a..333055ed1a5 100644 --- a/dotcom-rendering/src/components/Carousel.importable.tsx +++ b/dotcom-rendering/src/components/Carousel.importable.tsx @@ -843,8 +843,6 @@ const decideCarouselColours = ( }; /** - * # Carousel - * * A carousel of cards, mainly used in onward journeys, * at the bottom of articles * diff --git a/dotcom-rendering/src/components/CommentCount.importable.tsx b/dotcom-rendering/src/components/CommentCount.importable.tsx index 6d81094b768..cf537830bb4 100644 --- a/dotcom-rendering/src/components/CommentCount.importable.tsx +++ b/dotcom-rendering/src/components/CommentCount.importable.tsx @@ -72,12 +72,15 @@ const linkStyles = css` `; /** - * # CommentCount - * * Shows the number of comments at the top of an article. + * + * ## Why does this need to be an Island? + * * Fetches the count from the discussion API. * - * [Storybook `Count`](https://637e40d1bc73bf3f604394b9-rzazjyrwhc.chromatic.com/?path=/story/components-counts) + * --- + * + * [`Count` on Chromatic](https://www.chromatic.com/component?appId=63e251470cfbe61776b0ef19&csfId=components-counts&buildNumber=2967) */ export const CommentCount = ({ discussionApiUrl, diff --git a/dotcom-rendering/src/components/DiscussionContainer.importable.tsx b/dotcom-rendering/src/components/DiscussionContainer.importable.tsx index 34a61966fa7..4a012dee247 100644 --- a/dotcom-rendering/src/components/DiscussionContainer.importable.tsx +++ b/dotcom-rendering/src/components/DiscussionContainer.importable.tsx @@ -4,15 +4,12 @@ import { Discussion } from './Discussion'; import { DiscussionWhenSignedIn } from './DiscussionWhenSignedIn'; /** - * DiscussionContainer - * * A wrapper component that decides if the user is signed in or not. * - * If they - * are, it renders DiscussionWhenSignedIn which includes an api call to fetch - * the user profile. + * If they are, it renders `DiscussionWhenSignedIn` which includes + * an API call to fetch the user profile. * - * If not, it simply renders Discussion + * If not, it simply renders `Discussion` * * We use component composition like this here because you cannot call react * hooks conditionally and we're using a hook to make the fetch request @@ -20,6 +17,14 @@ import { DiscussionWhenSignedIn } from './DiscussionWhenSignedIn'; * Note. We allow the ...props pattern here because it makes sense when we're * just passing them through * + * ## Why does this need to be an Island? + * + * Discussion has client-side interactivity. + * Signed-in status is only known on the client. + * + * --- + * + * (No visual story exist) */ export const DiscussionContainer = (props: DiscussionProps) => { diff --git a/dotcom-rendering/src/components/GetMatchNav.importable.tsx b/dotcom-rendering/src/components/GetMatchNav.importable.tsx index 4acdce9b733..934e3bff527 100644 --- a/dotcom-rendering/src/components/GetMatchNav.importable.tsx +++ b/dotcom-rendering/src/components/GetMatchNav.importable.tsx @@ -22,8 +22,6 @@ type Props = { const Loading = () => ; /** - * # Get Match Nav - * * Wrapper around `MatchNav` with loading and fallback. * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/GetMatchStats.importable.tsx b/dotcom-rendering/src/components/GetMatchStats.importable.tsx index b7c75ec2875..100e09d35c1 100644 --- a/dotcom-rendering/src/components/GetMatchStats.importable.tsx +++ b/dotcom-rendering/src/components/GetMatchStats.importable.tsx @@ -49,8 +49,6 @@ export const cleanTeamData = (team: TeamType): TeamType => ({ }); /** - * # Get Match Stats - * * Wrapper around `MatchStats`. * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/GetMatchTabs.importable.tsx b/dotcom-rendering/src/components/GetMatchTabs.importable.tsx index 6307708643d..6998044ec5f 100644 --- a/dotcom-rendering/src/components/GetMatchTabs.importable.tsx +++ b/dotcom-rendering/src/components/GetMatchTabs.importable.tsx @@ -9,6 +9,15 @@ type Props = { const Loading = () => ; +/** + * ## Why does this need to be an Island? + * + * Data is fetched from an API on the client-side. + * + * --- + * + * (No visual story exists) + */ export const GetMatchTabs = ({ matchUrl, format }: Props) => { const { data, error, loading } = useApi<{ reportUrl?: string; diff --git a/dotcom-rendering/src/components/HeaderTopBar.importable.tsx b/dotcom-rendering/src/components/HeaderTopBar.importable.tsx index dada7226299..6aef5cd9fa4 100644 --- a/dotcom-rendering/src/components/HeaderTopBar.importable.tsx +++ b/dotcom-rendering/src/components/HeaderTopBar.importable.tsx @@ -50,8 +50,6 @@ const topBarStylesFromLeftCol = css` `; /** - * # Header Top Bar - * * The slim dark blue top bar at the very top of Guardian pages * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/LatestLinks.importable.tsx b/dotcom-rendering/src/components/LatestLinks.importable.tsx index 50a35c44762..14d80e541f3 100644 --- a/dotcom-rendering/src/components/LatestLinks.importable.tsx +++ b/dotcom-rendering/src/components/LatestLinks.importable.tsx @@ -110,8 +110,6 @@ const extractAboutThreeLines = (text: string) => .join(' ') + '…'; // join with spaces and add an ellipsis /** - * # Latest Links - * * Display the last three blocks from a Liveblog when the fronts * tool has enabled showing live updates. * @@ -122,7 +120,7 @@ const extractAboutThreeLines = (text: string) => * * --- * - * [`LatestLinks` on Chromatic](https://www.chromatic.com/component?appId=63e251470cfbe61776b0ef19&csfId=components-latestlinks) + * [`LatestLinks` on Chromatic](https://www.chromatic.com/component?appId=63e251470cfbe61776b0ef19&csfId=components-latestlinks&buildNumber=2967) */ export const LatestLinks = ({ id, diff --git a/dotcom-rendering/src/components/LightboxHash.importable.tsx b/dotcom-rendering/src/components/LightboxHash.importable.tsx index 8818e146951..05c7dd9f8ca 100644 --- a/dotcom-rendering/src/components/LightboxHash.importable.tsx +++ b/dotcom-rendering/src/components/LightboxHash.importable.tsx @@ -13,6 +13,14 @@ import { useOnce } from '../lib/useOnce'; * * If we didn't do this then you'd end up back where you were when you pasted the * url into the browser and unable to access the article under the lightbox. + * + * ## Why does this need to be an Island? + * + * This behaviour is entirely client-side. + * + * --- + * + * Does not render **anything**. */ export const LightboxHash = () => { useOnce(() => { diff --git a/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx b/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx index 8aa88262a6f..6970b743ccb 100644 --- a/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx +++ b/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx @@ -233,6 +233,14 @@ function insertAfter(referenceNode: HTMLElement, newNode: Element) { * 2. Fetch - POST the payload to the contributions endpoint * 3. Render - Take the url, props and name data we got in response to our fetch and dynamically import * and render the Epic component using it + * + * ## Why does this need to be an Island? + * + * All behaviour is client-side. + * + * --- + * + * (No visual story exist) */ export const LiveBlogEpic = ({ sectionId, diff --git a/dotcom-rendering/src/components/LiveblogRightMultipleAdSlots.importable.tsx b/dotcom-rendering/src/components/LiveblogRightMultipleAdSlots.importable.tsx index 5a16706f8e4..285e39a9db0 100644 --- a/dotcom-rendering/src/components/LiveblogRightMultipleAdSlots.importable.tsx +++ b/dotcom-rendering/src/components/LiveblogRightMultipleAdSlots.importable.tsx @@ -39,6 +39,14 @@ type Props = { /** * In the right hand column, there will be the right ad slot, followed * by as many liveblog-right ad slots that can fit + * + * ## Why does this need to be an Island? + * + * Ads are rendered client-side. + * + * --- + * + * (No visual story exists) */ export const LiveblogRightMultipleAdSlots = ({ display, diff --git a/dotcom-rendering/src/components/Liveness.importable.tsx b/dotcom-rendering/src/components/Liveness.importable.tsx index 70c15c8928a..e2cdb0252ea 100644 --- a/dotcom-rendering/src/components/Liveness.importable.tsx +++ b/dotcom-rendering/src/components/Liveness.importable.tsx @@ -142,8 +142,6 @@ function getKey( } /** - * # Liveness - * * Allow new blocks on live blogs to be added without page reload. * Polls the content API inserts news blocks if the user * is at the top of the article. diff --git a/dotcom-rendering/src/components/MostViewedFooter.importable.tsx b/dotcom-rendering/src/components/MostViewedFooter.importable.tsx index c07b1705eb5..42f9f760740 100644 --- a/dotcom-rendering/src/components/MostViewedFooter.importable.tsx +++ b/dotcom-rendering/src/components/MostViewedFooter.importable.tsx @@ -35,11 +35,15 @@ const secondTierStyles = css` `; /** - * # Most Viewed Footer - * * List of 10 most viewed articles to show at the bottom of pages. * - * @Todo add Storybook link + * ## Why does this need to be an Island? + * + * Most viewed data if fetched client-side. + * + * --- + * + * (No visual story exists) */ export const MostViewedFooter = ({ tabs, diff --git a/dotcom-rendering/src/components/MostViewedRightWrapper.importable.tsx b/dotcom-rendering/src/components/MostViewedRightWrapper.importable.tsx index d46c8ef8aa7..2927f1b900c 100644 --- a/dotcom-rendering/src/components/MostViewedRightWrapper.importable.tsx +++ b/dotcom-rendering/src/components/MostViewedRightWrapper.importable.tsx @@ -11,7 +11,17 @@ type Props = { }; /** - * Wrapping MostViewedRight so we can determine whether or not there's enough vertical space in the container to render it + * Wrapping `MostViewedRight` so we can determine whether or not + * there's enough vertical space in the container to render it. + * + * ## Why does this need to be an Island? + * + * We may show the most viewed component depending on the length of the article, + * based on the computed height of the container. + * + * --- + * + * (No visual story exists) */ export const MostViewedRightWrapper = ({ componentDataAttribute, diff --git a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx index a9a38a40563..1c34f6a7171 100644 --- a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx +++ b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx @@ -173,8 +173,6 @@ type Props = { }; /** - * # Onwards Upper - * * A wrapper around `Carousel` for showing related articles at the bottom * of an article. This contains the logic around which articles to show, * depending on a series of factors (story package, paid content, series tag, …) diff --git a/dotcom-rendering/src/components/PulsingDot.importable.tsx b/dotcom-rendering/src/components/PulsingDot.importable.tsx index 367169e498a..d01977093e0 100644 --- a/dotcom-rendering/src/components/PulsingDot.importable.tsx +++ b/dotcom-rendering/src/components/PulsingDot.importable.tsx @@ -35,8 +35,6 @@ interface Props { } /** - * # Pulsing Dot - * * Used for indicating an article is updating live * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/RichLinkComponent.importable.tsx b/dotcom-rendering/src/components/RichLinkComponent.importable.tsx index 030cfafda1f..a082a9d5c16 100644 --- a/dotcom-rendering/src/components/RichLinkComponent.importable.tsx +++ b/dotcom-rendering/src/components/RichLinkComponent.importable.tsx @@ -53,8 +53,6 @@ const buildUrl: (element: RichLinkBlockElement, ajaxUrl: string) => string = ( }; /** - * # Rich Link Component - * * Wrapper around `RichLink` which fetches the rich links’ images. * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/SecureSignupIframe.importable.tsx b/dotcom-rendering/src/components/SecureSignupIframe.importable.tsx index c8954e78340..ed3a68f3f8c 100644 --- a/dotcom-rendering/src/components/SecureSignupIframe.importable.tsx +++ b/dotcom-rendering/src/components/SecureSignupIframe.importable.tsx @@ -178,8 +178,6 @@ const sendTracking = ( }; /** - * # Secure Signup iFrame - * * A descendent of `EmailSignup` used to prevent users from entering their email * on the same page as the one we run third-party scripts on. * diff --git a/dotcom-rendering/src/components/SendAMessage.importable.tsx b/dotcom-rendering/src/components/SendAMessage.importable.tsx index ed435866f01..ddfb07b659e 100644 --- a/dotcom-rendering/src/components/SendAMessage.importable.tsx +++ b/dotcom-rendering/src/components/SendAMessage.importable.tsx @@ -389,8 +389,6 @@ const summaryStyles = css` `; /** - * # Send a Message Component - * * A callout for readers to get in touch with a liveblogger directly. * * ## Why does this need to be an Island? diff --git a/dotcom-rendering/src/components/SetABTests.importable.tsx b/dotcom-rendering/src/components/SetABTests.importable.tsx index 999a2307c6a..52467287cf4 100644 --- a/dotcom-rendering/src/components/SetABTests.importable.tsx +++ b/dotcom-rendering/src/components/SetABTests.importable.tsx @@ -16,6 +16,17 @@ type Props = { pageIsSensitive: CoreAPIConfig['pageIsSensitive']; }; +/** + * Initialises the values of `useAB` and sends relevant Ophan events. + * + * ## Why does this need to be an Island? + * + * All this logic is client-side. + * + * --- + * + * Does not render **anything**. + */ export const SetABTests = ({ isDev, pageIsSensitive, diff --git a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx index f2955f5c470..156f1f29b4e 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx @@ -209,6 +209,17 @@ const buildBrazeBanner = ( timeoutMillis: DEFAULT_BANNER_TIMEOUT_MILLIS, }); +/** + * The reader revenue banner at the end of articles + * + * ## Why does this need to be an Island? + * + * The content of the banner is personalised to an individual page view. + * + * --- + * + * (No visual story exists) + */ export const StickyBottomBanner = ({ contentType, sectionId, diff --git a/dotcom-rendering/src/components/SupportTheG.importable.tsx b/dotcom-rendering/src/components/SupportTheG.importable.tsx index 969fc1a5423..7580f347863 100644 --- a/dotcom-rendering/src/components/SupportTheG.importable.tsx +++ b/dotcom-rendering/src/components/SupportTheG.importable.tsx @@ -410,6 +410,18 @@ const ReaderRevenueLinksNative = ({ ); }; +/** + * Container for `ReaderRevenueLinksRemote` or `ReaderRevenueLinksRemote` + * + * ## Why does this need to be an Island? + * + * Reader revenue links are entirely client-side and specific to a unique + * page view. They also relying on getting a country code. + * + * --- + * + * (No visual story exists) + */ export const SupportTheG = ({ editionId, dataLinkNamePrefix, diff --git a/dotcom-rendering/src/components/TableOfContents.importable.tsx b/dotcom-rendering/src/components/TableOfContents.importable.tsx index c9455be3b6a..d2cd3fa07be 100644 --- a/dotcom-rendering/src/components/TableOfContents.importable.tsx +++ b/dotcom-rendering/src/components/TableOfContents.importable.tsx @@ -110,8 +110,6 @@ const verticalStyle = css` `; /** - * # Table of Contents Component - * * A table of contents, shown at the top of an article * to allow readers to quickly navigate though articles. * diff --git a/dotcom-rendering/src/components/TopRightAdSlot.tsx b/dotcom-rendering/src/components/TopRightAdSlot.tsx index 332d678463b..c5b2ed49304 100644 --- a/dotcom-rendering/src/components/TopRightAdSlot.tsx +++ b/dotcom-rendering/src/components/TopRightAdSlot.tsx @@ -10,6 +10,8 @@ import { LABS_HEADER_HEIGHT } from '../lib/labs-constants'; * **Currently**, `ShadyPie` is disabled, pending the rollout * of the new supporter plus product. * + * --- + * * (No visual story exists) */ export const TopRightAdSlot = ({